css-variants/dist/ssv.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, C as CssProperties, O as ObjectKeyArrayPicker, a as ObjectKeyPicker } from './types-BXKyjXhG.js';
import 'csstype';

type SlotStyleRecord<S extends string> = PartialRecord<S, CssProperties>;
type SlotStyleVariantRecord<S extends string> = Record<string, Record<string, SlotStyleRecord<S>>>;
type SlotStyleVariantExtendProps<S extends string> = {
    styles: SlotStyleRecord<S>;
};
interface SlotStyleVariantDefinition<S extends string, T extends SlotStyleVariantRecord<S> | undefined> {
    slots: S[];
    base?: SlotStyleRecord<S>;
    variants?: T;
    compoundVariants?: (ObjectKeyArrayPicker<T> & SlotStyleVariantExtendProps<S>)[];
    defaultVariants?: ObjectKeyPicker<T>;
}
type SlotStyleVariantFnProps<S extends string, T extends SlotStyleVariantRecord<S> | undefined> = T extends undefined ? Partial<SlotStyleVariantExtendProps<S>> : ObjectKeyPicker<T> & Partial<SlotStyleVariantExtendProps<S>>;
type SlotStyleVariantFn<S extends string, T extends SlotStyleVariantRecord<S> | undefined> = (props?: SlotStyleVariantFnProps<S, T>) => Record<S, CssProperties>;
type SlotStyleVariantCreatorFn = <S extends string, T extends SlotStyleVariantRecord<S> | undefined>(config: SlotStyleVariantDefinition<S, T>) => SlotStyleVariantFn<S, T>;
/**
 * Creates a slot-based style variant function that composes CSS properties based on variants and compound variants.
 *
 * @param config - Configuration object for creating style variants
 * @returns A function that accepts variant props and returns composed styles for each slot
 *
 * @example
 * ```ts
 * const buttonStyles = ssv({
 *   slots: ['root', 'icon'],
 *   base: {
 *     root: { padding: '8px' },
 *     icon: { size: '16px' }
 *   },
 *   variants: {
 *     size: {
 *       small: {
 *         root: { padding: '4px' },
 *         icon: { size: '12px' }
 *       },
 *       large: {
 *         root: { padding: '12px' },
 *         icon: { size: '20px' }
 *       }
 *     }
 *   }
 * });
 *
 * // Usage
 * const styles = buttonStyles({ size: 'small' });
 * // => { root: { padding: '4px' }, icon: { size: '12px' } }
 * ```
 */
declare const ssv: SlotStyleVariantCreatorFn;

export { type SlotStyleRecord, type SlotStyleVariantCreatorFn, type SlotStyleVariantDefinition, type SlotStyleVariantExtendProps, type SlotStyleVariantFn, type SlotStyleVariantFnProps, type SlotStyleVariantRecord, ssv as default, ssv };