UNPKG

css-variants

Version:

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

48 lines (45 loc) 1.97 kB
import { C as CssProperties, O as ObjectKeyArrayPicker, a as ObjectKeyPicker } from './types-BXKyjXhG.cjs'; import 'csstype'; type StyleVariantRecord = Record<string, Record<string, CssProperties>>; type StyleVariantExtendProps = { style: CssProperties; }; interface StyleVariantDefinition<T extends StyleVariantRecord | undefined> { base?: CssProperties; variants?: T; compoundVariants?: (ObjectKeyArrayPicker<T> & StyleVariantExtendProps)[]; defaultVariants?: ObjectKeyPicker<T>; } type StyleVariantFnProps<T extends StyleVariantRecord | undefined> = T extends undefined ? Partial<StyleVariantExtendProps> : ObjectKeyPicker<T> & Partial<StyleVariantExtendProps>; type StyleVariantFn<T extends StyleVariantRecord | undefined> = (props?: StyleVariantFnProps<T>) => CssProperties; type StyleVariantCreatorFn = <T extends StyleVariantRecord | undefined>(config: StyleVariantDefinition<T>) => StyleVariantFn<T>; /** * Creates a style variant function based on the provided configuration. * * @template T - The type of the style variant record. * @param {StyleVariantDefinition<T>} config - The configuration object for style variants. * @returns {StyleVariantFn<T>} A function that takes props and returns the computed CSS properties. * * @example * ```typescript * * const makeStyle = sv({ * base: { color: 'black' }, * variants: { * size: { * small: { fontSize: '12px' }, * large: { fontSize: '24px' } * } * }, * compoundVariants: [ * { size: 'large', style: { fontWeight: 'bold' } } * ], * defaultVariants: { size: 'small' } * }); * * const style = makeStyle({ size: 'large' }); * // style = { color: 'black', fontSize: '24px', fontWeight: 'bold' } * ``` */ declare const sv: StyleVariantCreatorFn; export { type StyleVariantCreatorFn, type StyleVariantDefinition, type StyleVariantExtendProps, type StyleVariantFn, type StyleVariantFnProps, type StyleVariantRecord, sv as default, sv };