jade-garden/dist/cva.d.ts

Class utilities to compose class names and variants

import { CVA, CVAConfig, MergeClassFn, Variant } from './types';
/**
 * Creates a class variant authority (cva) function with a custom merge function.
 *
 * @param {MergeClassFn} mergeClass - The function to merge class names.
 * @returns {CVA} The cva function.
 */
export declare const createCVA: (mergeClass?: MergeClassFn) => CVA;
/**
 * Implementation of the class variant authority (cva) function using the default class merging function.
 *
 * @type {CVA}
 *
 * @example
 * ```ts
 * const button = cva({
 *   base: "rounded-md",
 *   variants: {
 *     size: {
 *       small: "text-sm",
 *       medium: "text-base"
 *     },
 *     intent: {
 *       primary: "bg-blue-500",
 *       secondary: "bg-gray-200"
 *     }
 *   },
 *   compoundVariants: [
 *     {
 *       size: "small",
 *       intent: "primary",
 *       class: "font-bold"
 *     }
 *   ]
 *   defaultVariants: {
 *     size: "medium",
 *     intent: "primary"
 *   }
 * });
 *
 * const buttonClasses = button({ size: "small", intent: "primary" });
 * ```
 */
export declare const cva: CVA;
/**
 * Defines a type-safe structure for an CVA configuration object.
 * This utility allows you to define a CVA config with type checking.
 *
 * @returns {CVAConfig<Variant>} The CVA configuration object.
 *
 * @example
 * ```ts
 * const buttonConfig = defineCVA({
 *   base: "rounded-md",
 *   variants: {
 *     size: {
 *       small: "text-sm",
 *       medium: "text-base"
 *     }
 *   }
 * });
 * ```
 */
export declare const defineCVA: <V extends Variant>(config: CVAConfig<V>) => CVAConfig<V>;
/**
 * Generates `raw` class names based on the cva's configuration.
 *
 * @type {CVA}
 *
 * @example
 * ```ts
 * const button = rawCVA({
 *   name: "button",
 *   variants: {
 *     size: {
 *       small: "size-2",
 *       medium: "size-4"
 *     },
 *     variant: {
 *       primary: "bg-red-500",
 *       secondary: "bg-blue-500"
 *     }
 *   }
 * });
 *
 * button({ size: "small", variant: "primary" }) // "button button__size--small button__variant--primary"
 * ```
 */
export declare const rawCVA: CVA;