jade-garden/dist/sva.d.cts

Class utilities to compose class names and variants

import { ClassValue, MergeClassFn, SVA, SVAConfig, Variants } from './types';
/**
 * Creates a slots variants authority (SVA) function with a custom merge function.
 *
 * @param {MergeClassFn} mergeClass - The function to merge class names.
 * @returns {SVA} The sva function.
 */
export declare const createSVA: (mergeClass?: MergeClassFn) => SVA;
/**
 * Defines a type-safe structure for an SVA configuration object.
 * This utility allows you to define a SVA config with type checking based on the specified slots.
 *
 * @template S - A string or union of strings representing the slot keys for the component.
 * @returns A function that takes an `SVAConfig` object with the specified slot keys and returns that same configuration object, ensuring type safety.
 *
 * @example
 * ```ts
 * const buttonConfig = defineSVA<"root" | "label">()({
 *   name: "button",
 *   slots: {
 *     root: "base-button",
 *     label: "button-label",
 *   },
 *   variants: {
 *     size: {
 *       small: {
 *         root: "button-small",
 *         label: "text-sm"
 *       },
 *       medium: {
 *         root: "button-medium",
 *         label: "text-base"
 *       }
 *     },
 *     color: {
 *       primary: {
 *         root: "bg-blue-500 text-white"
 *       },
 *       secondary: {
 *         root: "bg-gray-300 text-gray-800"
 *       }
 *     }
 *   },
 *   defaultVariants: {
 *     size: "medium",
 *     color: "primary"
 *   }
 * });
 *
 * // OR
 *
 * const defineSVAConfig: ReturnType<typeof defineSVA<"root" | "label">> = (config) => config;
 *
 * const buttonConfig = defineSVAConfig({
 *   // ... config object
 * });
 * ```
 */
export declare const defineSVA: <Slots extends string>() => <RCV extends { [S in Slots]?: ClassValue; }, V extends Variants<RCV>>(config: SVAConfig<RCV, V>) => SVAConfig<RCV, V>;
/**
 * Implementation of the slots variants authority (SVA) function using the default class merging function.
 *
 * @type {SVA}
 *
 * @example
 * ```ts
 * const button = sva({
 *   slots: {
 *     root: "flex",
 *     item: "px-2 py-1"
 *   },
 *   variants: {
 *     size: {
 *       small: {
 *         root: "text-sm"
 *       },
 *       medium: {
 *         root: "text-base"
 *       }
 *     }
 *   },
 *   compoundVariants: [{ size: "small", class: { root: "font-bold" } }],
 *   compoundSlots: [{ slots: ["root", "item"], class: "rounded" }],
 *   defaultVariants: {
 *     size: "medium"
 *   }
 * });
 *
 * const buttonClasses = button({ size: "small" });
 * ```
 */
export declare const sva: SVA;
/**
 * Generates `raw` class names based on the sva's configuration.
 *
 * @type {SVA}
 *
 * @example
 * ```ts
 * const button = rawSVA({
 *   name: "button",
 *   slots: { root: "root-class" },
 *   variants: {
 *     size: {
 *       small: { root: "size-small" },
 *       medium: { root: "size-medium" }
 *     },
 *     variant: {
 *       primary: { root: "variant-primary" },
 *       secondary: { root: "variant-secondary" }
 *     }
 *   }
 * });
 *
 * const { root } = button({ size: "small", variant: "primary" });
 * root(); // "button--root button--root__size--small button--root__variant--primary"
 * ```
 */
export declare const rawSVA: SVA;