Skip to content

Instantly share code, notes, and snippets.

@zecka
Created September 29, 2025 08:37
Show Gist options
  • Save zecka/08bd2fb1bee4fe11635339893de2d642 to your computer and use it in GitHub Desktop.
Save zecka/08bd2fb1bee4fe11635339893de2d642 to your computer and use it in GitHub Desktop.
Cva zero dep
// src/variants.ts
export type VariantDef = Record<string, readonly string[]>;
export type VariantProps<T extends VariantDef> = {
[K in keyof T]?: T[K][number];
} & { class?: string };
// src/factory.ts
import { cva } from "class-variance-authority";
import type { VariantDef, VariantProps as PublicProps } from "./variants";
export function makeCva<T extends VariantDef>(
base: string,
cfg: { variants: T; defaultVariants?: Partial<PublicProps<T>> }
) {
const inner = cva(base, { variants: cfg.variants as any, defaultVariants: cfg.defaultVariants as any });
return inner as unknown as (props?: PublicProps<T>) => string;
}
// src/button.ts
import { makeCva } from "./factory";
export const button = makeCva("base", {
variants: {
intent: ["primary", "secondary"] as const,
size: ["small", "large"] as const,
},
defaultVariants: { intent: "primary", size: "small" },
});
export type ButtonProps = Parameters<typeof button>[0];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment