An extended version of cva, making it more type-safe, and adding a few features and which were missing from the original

Extended Features

variants object exposed on a cva component

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[]
//            }
//

Require variants, unless a default is provided in defaultVariants

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

Private variants

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'>
//            }
//

---

cva-extended

Class Variance Authority - Extended

Read the Docs 📖

Documentation

Visit cva.style to get started.

License

Apache-2.0 License © Joe Bell