fgnass / classname-variants Goto Github PK

Hi, awesome library. Thanks! Just would like to know if it's possible to use it together with tailwind-merge so I can override classes if necessary.

It would be useful to have support for as props. For example, for this component:

export const SquareButton = styled('button', {
  base: '',
  variants: {
    size: {
      xs: '',
    },
  },
});

It would be cool if we could do <SquareButton as="a" size="xs" /> similar to StyledComponents

good day, is there a way we can have responsive variants like this?

<Button
    color={{
      '@initial': 'gray',
      '@bp1': 'violet',
    }}
  >
    Button
  </Button>

Would it be possible to add conditional logic such as AND, OR and NOT?

For example, I would like to only apply padding if the variant is NOT a link:

NOT:

{
    variants: {
        size: 'sm',
        variant: not('link')
    },
    className: 'xxx'
},

Other conditional examples

AND:

{
    variants: {
        size: 'sm',
        variant: and('link', 'solid', 'subtle')
    },
    className: 'xxx'
},

OR:

{
    variants: {
        size: 'sm',
        variant: or('link', 'solid', 'subtle')
    },
    className: 'xxx'
},

Hi, do I need to mock this library? I get a Jest error Cannot find module classname-variants/react.

I'm not able to have multiple variants work within the compoundVariants array. The only way I am able to get this to work is throwing an important tag on the bg-transparent which I'd like to avoid doing.

Here's my code you can throw into a sandbox.

import { variantProps } from "classname-variants/react";

const buttonProps = variantProps({
base: "flex flex-row justify-center items-center text-center text-white py-1 px-3 rounded-md font-medium text-xs min-h-[1.875rem] w-fit",
variants: {
color: {
primary: "bg-violet-500",
positive: "bg-green-600",
warning: "bg-orange-500",
negative: "bg-red-500"
},
outlined: {
true: "border bg-transparent"
}
},
compoundVariants: [
{
variants: { color: "primary", outlined: true },
className: "text-violet-500 border-violet-500"
},
{
variants: { color: "positive", outlined: true },
className: "text-green-600 border-green-600"
},
{
variants: { color: "warning", outlined: true },
className: "text-orange-500 border-orange-500"
},
{
variants: { color: "negative", outlined: true },
className: "text-red-500 border-red-500"
}
],
defaultVariants: {
color: "positive"
}
});

const Button = ({ color, outlined, children }) => {
return <div {...buttonProps({ outlined, color })}>{children}</div>;
};

export default function App() {
return (
<div className="flex items-center gap-2 p-4">
<Button color="primary" outlined>
Click Me!
</Button>
<Button color="positive" outlined>
Click Me!
</Button>
<Button color="warning" outlined>
Click Me!
</Button>
<Button color="warning">
Click Me!
</Button>
</div>
);
}

Hi, i tried to build my nextjs project (through next build) but I get this error:

./node_modules/classname-variants/lib/react.d.ts:20:281
Type error: '?' expected.

  18 | };
  19 | declare type PolymorphicComponentProps<T extends ElementType> = AsProps<T> & Omit<ComponentProps<T>, "as">;
> 20 | export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: AsProps<As> & Omit<ComponentProps<As>, "as"> & (C["variants"] extends infer T_1 extends Variants ? { [K in keyof T_1 as K extends keyof (C["variants"] extends infer T_2 extends Variants ? { [K_1 in keyof T_2 as C["variants"][K_1] extends {
     |                                                                                                                                                                                                                                                                                         ^
  21 |     true: any;
  22 | } | {
  23 |     false: any;

Any tips to manage that @fgnass?