css-variants/dist/cjs/sv.d.ts

A lightweight, flexible API for managing CSS class variants.

import { CssProperties, ObjectKeyArrayPicker, ObjectKeyPicker } from './utils/types';
export type StyleVariantRecord = Record<string, Record<string, CssProperties>>;
export type StyleVariantExtendProps = {
    style: CssProperties;
};
export interface StyleVariantDefinition<T extends StyleVariantRecord | undefined> {
    base?: CssProperties;
    variants?: T;
    compoundVariants?: (ObjectKeyArrayPicker<T> & StyleVariantExtendProps)[];
    defaultVariants?: ObjectKeyPicker<T>;
}
export type StyleVariantFnProps<T extends StyleVariantRecord | undefined> = T extends undefined ? Partial<StyleVariantExtendProps> : ObjectKeyPicker<T> & Partial<StyleVariantExtendProps>;
export type StyleVariantFn<T extends StyleVariantRecord | undefined> = (props?: StyleVariantFnProps<T>) => CssProperties;
export 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' }
 * ```
 */
export declare const sv: StyleVariantCreatorFn;
export default sv;