cva-extended

An extended version of cva, with additional features:

For the main documentation, visit beta.cva.style.

Extended Features

$3

``ts
const button = cva({
variants: {
intent: {
primary: "bg-blue-500",
secondary: "bg-white",
},
disabled: {
true: "opacity-50",
false: "opacity-100",
},
},
});

button.variants; // { intent: ["primary", "secondary"], disabled: [true, false] }
typeof button.variants;
// ^?
// {
// "intent": ReadonlyArray<'primary' | 'secondary'>,
// "disabled": readonly boolean[]
// }
//
`

$3

`ts
const button = cva({
variants: {
intent: {
primary: "bg-blue-500",
secondary: "bg-white",
},
},
});

button(); // Error: Missing required variant: intent

const optionalIntent = cva({
variants: {
intent: {
primary: "bg-blue-500",
secondary: "bg-white",
},
},
defaultVariants: {
intent: "primary",
},
});

optionalIntent(); // No error
`

$3

`ts
const button = cva({
variants: {
intent: {
primary: "bg-blue-500",
secondary: "bg-white",
},
$private: {
true: "private",
},
},
});

button({ $private: true }); // Error: Variant $private is not exposed
button.variants; // { intent: ["primary", "secondary"] }
typeof button.variants;
// ^?
// {
// "intent": ReadonlyArray<'primary' | 'secondary'>
// }
//
``