tva

import { tva } from "@pitlane/theme";

function tva<V>(config): TVAFn<V>;

Builds a variant resolver modeled on cva. Where cva composes class strings, tva composes brand-enforced style objects into a mix-ready descriptor.

Each invocation resolves the selection by deep-merging base, then every matching variant in declaration order, then every matching compound variant in array order, and feeds the result to a single css call. defaultVariants fills in unset axes, and boolean axes come from options named true and false.

Type Parameters

V

V extends VariantShape

Parameters

config

TVAConfig<V>

Returns

TVAFn<V>

See

TVAConfig for the configuration shape.
TVAProps to extract the props type.
Theme guide: Variants with Theme Variance Authority

Example

export let button = tva({
    base: { borderRadius: t.radius.md },
    variants: {
        intent: {
            primary: { backgroundColor: t.color.accent },
            secondary: { backgroundColor: "transparent" },
        },
        size: { sm: { fontSize: t.text.sm }, md: { fontSize: t.text.md } },
        block: { true: { display: "flex" } },
    },
    compoundVariants: [
        { intent: "secondary", size: "md", css: { fontSize: t.text.lg } },
    ],
    defaultVariants: { intent: "primary", size: "md" },
});

<button mix={button({ intent: "secondary", block: true })} />;