Class Variance Authority

Requirements

• Export cva(base?, options?) as named and default. Return a function that accepts variant selections plus optional class and className values and returns a class string.
• Class values are strings, flat arrays of strings, false, null, or undefined. Trim outer whitespace, omit empty/falsy class values, and join nonempty chunks with one space; preserve internal whitespace and duplicate class names.
• options.variants maps variant names to option-key/class-value dictionaries. Select classes in variant definition order. String, numeric, and boolean selections use their stringified option key. Only own option properties count.
• options.defaultVariants supplies fallback selections when a selection is missing or undefined. An explicit null suppresses that variant and its default. false is a valid boolean selection, not a missing value.
• options.compoundVariants is an array of conditions with optional class and/or className. All conditions must match active selections; an array condition matches any of its values. Use effective selections after defaults. Add matching compound classes in declaration order.
• Final order is base, selected variant classes, matching compound classes, caller class, caller className. Unknown variant names/options produce no variant classes. Missing or suppressed variants cannot satisfy compound conditions.
• Do not mutate input configurations or props. class and className are reserved prop names. Nested class arrays, object-style class maps, CSS generation, Tailwind conflict merging, and importing a cva/clsx package are outside scope. This is a documented subset rather than a complete library clone.

Examples

Input: const button = cva("btn", {
  variants: { size: { small: "text-sm", large: "text-lg" } },
  defaultVariants: { size: "small" },
});
button();
button({ size: "large", className: "rounded" });
Output: "btn text-sm" and "btn text-lg rounded".

Input: cva("btn", {
  variants: { disabled: { true: "muted", false: "interactive" } },
})({ disabled: false });
Output: "btn interactive".