css-variants/dist/scv.d.ts

Lightweight helpers to compose class names and inline styles using variants. Zero runtime deps, small bundle, and first-class TypeScript support.

import { P as PartialRecord, O as ObjectKeyArrayPicker, a as ObjectKeyPicker } from './types-BXKyjXhG.js';
import cx, { ClassValue } from './cx.js';
import 'csstype';

type SlotClassRecord<S extends string> = PartialRecord<S, ClassValue>;
type SlotClassVariantRecord<S extends string> = Record<string, Record<string, SlotClassRecord<S>>>;
type SlotClassVariantExtendProps<S extends string> = {
    classNames: SlotClassRecord<S>;
};
interface SlotClassVariantDefinition<S extends string, T extends SlotClassVariantRecord<S> | undefined> {
    slots: S[];
    base?: SlotClassRecord<S>;
    variants?: T;
    compoundVariants?: (ObjectKeyArrayPicker<T> & SlotClassVariantExtendProps<S>)[];
    defaultVariants?: ObjectKeyPicker<T>;
    classNameResolver?: typeof cx;
}
type SlotClassVariantFnProps<S extends string, T extends SlotClassVariantRecord<S> | undefined> = T extends undefined ? Partial<SlotClassVariantExtendProps<S>> : ObjectKeyPicker<T> & Partial<SlotClassVariantExtendProps<S>>;
type SlotClassVariantFn<S extends string, T extends SlotClassVariantRecord<S> | undefined> = (props?: SlotClassVariantFnProps<S, T>) => Record<S, string>;
type SlotClassVariantCreatorFn = <S extends string, T extends SlotClassVariantRecord<S> | undefined>(config: SlotClassVariantDefinition<S, T>) => SlotClassVariantFn<S, T>;
/**
 * Creates a slot-based class variant function that manages class names for multiple slots with variants.
 *
 * @param config - Configuration object for creating the variant function
 * @returns A function that accepts variant props and returns class names for each slot
 *
 * @example
 * ```typescript
 * const button = scv({
 *   slots: ['root', 'icon'],
 *   base: {
 *     root: 'btn',
 *     icon: 'btn-icon'
 *   },
 *   variants: {
 *     size: {
 *       sm: {
 *         root: 'btn-sm',
 *         icon: 'icon-sm'
 *       },
 *       lg: {
 *         root: 'btn-lg',
 *         icon: 'icon-lg'
 *       }
 *     }
 *   },
 *   defaultVariants: {
 *     size: 'sm'
 *   }
 * })
 *
 * // Usage
 * const classes = button({ size: 'lg' })
 * // Result: { root: 'btn btn-lg', icon: 'btn-icon icon-lg' }
 * ```
 */
declare const scv: SlotClassVariantCreatorFn;

export { type SlotClassRecord, type SlotClassVariantCreatorFn, type SlotClassVariantDefinition, type SlotClassVariantExtendProps, type SlotClassVariantFn, type SlotClassVariantFnProps, type SlotClassVariantRecord, scv as default, scv };