css-variants 1.1.3 → 2.0.1

package/dist/esm/cv.js

@@ -1,53 +1,67 @@
-import { compact, entries, match } from './utils';
-const push = (data, value) => {
-    if (typeof value === 'string') {
-        data.className && (data.className += ' ');
-        data.className += value.trim();
-    }
-    else {
-        if (value?.className) {
-            data.className && (data.className += ' ');
-            data.className += value.className.trim();
-        }
-        if (value?.style) {
-            data.style = { ...data.style, ...value.style };
-        }
-    }
-};
+import { compact } from './utils/compact';
+import { cx } from './cx';
+/**
+ * Creates a class variant function that combines base classes, variants, compound variants, and default variants.
+ *
+ * @template T - Type of the variant record
+ * @param config - Configuration object for creating class variants
+ * @returns A function that accepts variant props and returns a combined class string
+ *
+ * @example
+ * ```typescript
+ * const button = cv({
+ *   base: 'px-4 py-2 rounded',
+ *   variants: {
+ *     color: {
+ *       primary: 'bg-blue-500 text-white',
+ *       secondary: 'bg-gray-500 text-white'
+ *     },
+ *     size: {
+ *       sm: 'text-sm',
+ *       lg: 'text-lg'
+ *     }
+ *   },
+ *   defaultVariants: {
+ *     color: 'primary',
+ *     size: 'sm'
+ *   }
+ * });
+ *
+ * button(); // => 'px-4 py-2 rounded bg-blue-500 text-white text-sm'
+ * button({ color: 'secondary' }); // => 'px-4 py-2 rounded bg-gray-500 text-white text-sm'
+ * ```
+ */
 export const cv = (config) => {
-    const { base, variants, compoundVariants, defaultVariants, onDone } = config;
+    const { base, variants, compoundVariants, defaultVariants, classNameResolver = cx } = config;
     return (props) => {
-        const { className: propClassName, style: propStyle, ...rest } = props ?? {};
-        const variantProps = { ...defaultVariants, ...compact(rest) };
-        const css = { className: '', style: {} };
-        let tmp;
-        if (base) {
-            push(css, base);
-        }
-        if (variants) {
-            for (const [key, variant] of entries(variants)) {
-                if ((tmp = variant[variantProps[key]])) {
-                    push(css, tmp);
-                }
+        const { className, ...rest } = props ?? {};
+        if (!variants)
+            return classNameResolver(base, className);
+        const mergedProps = { ...defaultVariants, ...compact(rest) };
+        const classValues = [];
+        for (const key in mergedProps) {
+            const classValue = variants[key][mergedProps[key]];
+            if (classValue) {
+                classValues.push(classValue);
             }
         }
         if (compoundVariants) {
-            for (const { className: cvClassName, style: cvStyle, ...compoundVariant } of compoundVariants) {
-                if (match(compoundVariant, variantProps)) {
-                    push(css, { className: cvClassName, style: cvStyle });
+            for (const { className: classValue, ...compoundVariant } of compoundVariants) {
+                let matches = true;
+                for (const key in compoundVariant) {
+                    const value = compoundVariant[key];
+                    const propValue = mergedProps[key];
+                    if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
+                        matches = false;
+                        break;
+                    }
+                }
+                if (matches) {
+                    classValues.push(classValue);
                 }
             }
         }
-        if (propClassName) {
-            css.className && (css.className += ' ');
-            css.className += propClassName;
-        }
-        if (propStyle) {
-            css.style = { ...css.style, ...propStyle };
-        }
-        if (onDone)
-            return onDone(css);
-        return css;
+        return classNameResolver(base, classValues, className);
     };
 };
 export default cv;

package/dist/esm/cv.js.map

@@ -1 +1 @@
-{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,EAAE,EAAE,EAAc,MAAM,MAAM,CAAA;AAoBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,CAAC,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,iBAAiB,GAAG,EAAE,EAAE,GAAG,MAAM,CAAA;IAC5F,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAE1C,IAAI,CAAC,QAAQ;YAAE,OAAO,iBAAiB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;QAExD,MAAM,WAAW,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAA;QAE5D,MAAM,WAAW,GAAiB,EAAE,CAAA;QAEpC,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;YAC5D,IAAI,UAAU,EAAE,CAAC;gBACf,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;YAC9B,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBAC7E,IAAI,OAAO,GAAG,IAAI,CAAA;gBAClB,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;oBAClC,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,CAAA;oBAClC,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;oBAClC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;wBAC5E,OAAO,GAAG,KAAK,CAAA;wBACf,MAAK;oBACP,CAAC;gBACH,CAAC;gBACD,IAAI,OAAO,EAAE,CAAC;oBACZ,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,CAAC,CAAA;IACxD,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}

package/dist/esm/cx.d.ts

@@ -1,3 +1,5 @@
-type Arg = string | number | null | undefined | Record<string, boolean>;
-export declare const cx: (...args: (Arg | Arg[])[]) => string;
+export type ClassDictionary = Record<string, boolean | string | number>;
+export type ClassValue = ClassValue[] | string | number | bigint | ClassDictionary | null | boolean | undefined;
+export type ClassArray = ClassValue[];
+export declare function cx(...args: ClassValue[]): string;
 export default cx;

package/dist/esm/cx.js

@@ -1,37 +1,53 @@
-export const cx = (...args) => {
-    let className = '';
-    let i = 0;
-    let arg;
-    let next;
-    for (i = 0; i < args.length; i++) {
-        if ((arg = args[i])) {
-            if (typeof arg === 'string') {
-                className && (className += ' ');
-                className += arg;
-            }
-            else if (typeof arg === 'number') {
-                className && (className += ' ');
-                className += arg;
-            }
-            else if (typeof arg === 'object') {
-                if (Array.isArray(arg)) {
-                    if ((next = cx(...arg))) {
-                        className && (className += ' ');
-                        className += next;
-                    }
-                }
-                else {
-                    for (const key in arg) {
-                        if (arg[key]) {
-                            className && (className += ' ');
-                            className += key;
-                        }
-                    }
+// credit: https://github.com/lukeed/clsx
+function toVal(input) {
+    if (typeof input === 'string') {
+        return input;
+    }
+    if (typeof input === 'number' || typeof input === 'bigint') {
+        return String(input);
+    }
+    if (input === null || input === undefined || typeof input === 'boolean') {
+        return '';
+    }
+    let result = '';
+    if (Array.isArray(input)) {
+        let i = 0;
+        let tmpClassValue;
+        let tmpClassName;
+        for (; i < input.length; i++) {
+            if ((tmpClassValue = input[i])) {
+                if ((tmpClassName = toVal(tmpClassValue))) {
+                    if (result)
+                        result += ' ';
+                    result += tmpClassName;
                 }
             }
         }
+        return result;
+    }
+    for (const key in input) {
+        if (input[key]) {
+            result && (result += ' ');
+            result += key;
+        }
+    }
+    return result;
+}
+export function cx(...args) {
+    let result = '';
+    let i = 0;
+    let tmpClassValue;
+    let tmpClassName;
+    for (; i < args.length; i++) {
+        if ((tmpClassValue = args[i])) {
+            if ((tmpClassName = toVal(tmpClassValue))) {
+                if (result)
+                    result += ' ';
+                result += tmpClassName;
+            }
+        }
     }
-    return className;
-};
+    return result;
+}
 export default cx;
 //# sourceMappingURL=cx.js.map

package/dist/esm/cx.js.map

@@ -1 +1 @@
-{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAClB,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,GAAgB,CAAA;IACpB,IAAI,IAAY,CAAA;IAEhB,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACpB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC5B,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;gBAC/B,SAAS,IAAI,GAAG,CAAA;YAClB,CAAC;iBAAM,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC;wBACxB,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;wBAC/B,SAAS,IAAI,IAAI,CAAA;oBACnB,CAAC;gBACH,CAAC;qBAAM,CAAC;oBACN,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;wBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;4BACb,SAAS,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC,CAAA;4BAC/B,SAAS,IAAI,GAAG,CAAA;wBAClB,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AAAA,yCAAyC;AAMzC,SAAS,KAAK,CAAC,KAAiB;IAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAA;IACd,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;IACtB,CAAC;IAED,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;QACxE,OAAO,EAAE,CAAA;IACX,CAAC;IAED,IAAI,MAAM,GAAG,EAAE,CAAA;IAEf,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,IAAI,CAAC,GAAG,CAAC,CAAA;QACT,IAAI,aAAyB,CAAA;QAC7B,IAAI,YAAoB,CAAA;QACxB,OAAO,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC;oBAC1C,IAAI,MAAM;wBAAE,MAAM,IAAI,GAAG,CAAA;oBACzB,MAAM,IAAI,YAAY,CAAA;gBACxB,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;IAED,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;QACxB,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YACf,MAAM,IAAI,CAAC,MAAM,IAAI,GAAG,CAAC,CAAA;YACzB,MAAM,IAAI,GAAG,CAAA;QACf,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,UAAU,EAAE,CAAC,GAAG,IAAkB;IACtC,IAAI,MAAM,GAAG,EAAE,CAAA;IACf,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,aAAyB,CAAA;IAC7B,IAAI,YAAoB,CAAA;IAExB,OAAO,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC;gBAC1C,IAAI,MAAM;oBAAE,MAAM,IAAI,GAAG,CAAA;gBACzB,MAAM,IAAI,YAAY,CAAA;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC;AAED,eAAe,EAAE,CAAA"}

package/dist/esm/index.d.ts

@@ -1,4 +1,5 @@
 export * from './cx';
 export * from './cv';
-export * from './csv';
-export { VariantProps } from './types';
+export * from './scv';
+export * from './sv';
+export * from './ssv';

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 export * from './cx';
 export * from './cv';
-export * from './csv';
+export * from './scv';
+export * from './sv';
+export * from './ssv';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAA;AACpB,cAAc,MAAM,CAAA;AACpB,cAAc,OAAO,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAA;AACpB,cAAc,MAAM,CAAA;AACpB,cAAc,OAAO,CAAA;AACrB,cAAc,MAAM,CAAA;AACpB,cAAc,OAAO,CAAA"}

package/dist/esm/scv.d.ts

@@ -0,0 +1,56 @@
+import { ObjectKeyPicker, ObjectKeyArrayPicker, PartialRecord } from './utils/types';
+import { cx, ClassValue } from './cx';
+export type SlotClassRecord<S extends string> = PartialRecord<S, ClassValue>;
+export type SlotClassVariantRecord<S extends string> = Record<string, Record<string, SlotClassRecord<S>>>;
+export interface SlotClassVariantDefinition<S extends string, T extends SlotClassVariantRecord<S> | undefined> {
+    slots: S[];
+    base?: SlotClassRecord<S>;
+    variants?: T;
+    compoundVariants?: (ObjectKeyArrayPicker<T> & {
+        classNames: SlotClassRecord<S>;
+    })[];
+    defaultVariants?: ObjectKeyPicker<T>;
+    classNameResolver?: typeof cx;
+}
+export type SlotClassVariantFn<S extends string, T extends SlotClassVariantRecord<S> | undefined> = (props?: ObjectKeyPicker<T> & {
+    classNames?: SlotClassRecord<S>;
+}) => Record<S, string>;
+export 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' }
+ * ```
+ */
+export declare const scv: SlotClassVariantCreatorFn;
+export default scv;

package/dist/esm/scv.js

@@ -0,0 +1,94 @@
+import { cx } from './cx';
+import { compact } from './utils/compact';
+/**
+ * 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' }
+ * ```
+ */
+export const scv = (config) => {
+    const { slots, base, variants, compoundVariants, defaultVariants, classNameResolver = cx } = config;
+    return (props) => {
+        const { classNames, ...rest } = props ?? {};
+        const mergedProps = { ...defaultVariants, ...compact(rest) };
+        const slotClassValues = {};
+        for (const slot of slots) {
+            if (base?.[slot]) {
+                slotClassValues[slot] = Array.isArray(base[slot]) ? base[slot] : [base[slot]];
+            }
+            else {
+                slotClassValues[slot] = [];
+            }
+        }
+        if (variants) {
+            for (const key in mergedProps) {
+                const slotClassValue = variants[key]?.[mergedProps[key]];
+                if (slotClassValue) {
+                    for (const slot in slotClassValue) {
+                        slotClassValues[slot].push(slotClassValue[slot]);
+                    }
+                }
+            }
+        }
+        if (compoundVariants) {
+            for (const { classNames: slotClassValue, ...compoundVariant } of compoundVariants) {
+                let matches = true;
+                for (const key in compoundVariant) {
+                    const value = compoundVariant[key];
+                    const propValue = mergedProps[key];
+                    if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
+                        matches = false;
+                        break;
+                    }
+                }
+                if (matches) {
+                    for (const slot in slotClassValue) {
+                        slotClassValues[slot].push(slotClassValue[slot]);
+                    }
+                }
+            }
+        }
+        if (classNames) {
+            for (const slot in classNames) {
+                slotClassValues[slot].push(classNames[slot]);
+            }
+        }
+        const result = {};
+        for (const slot in slotClassValues) {
+            result[slot] = classNameResolver(slotClassValues[slot]);
+        }
+        return result;
+    };
+};
+export default scv;
+//# sourceMappingURL=scv.js.map

package/dist/esm/scv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scv.js","sourceRoot":"","sources":["../../src/scv.ts"],"names":[],"mappings":"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"}

package/dist/esm/ssv.d.ts

@@ -0,0 +1,51 @@
+import { ObjectKeyPicker, ObjectKeyArrayPicker, PartialRecord, CssProperties } from './utils/types';
+export type SlotStyleRecord<S extends string> = PartialRecord<S, CssProperties>;
+export type SlotStyleVariantRecord<S extends string> = Record<string, Record<string, SlotStyleRecord<S>>>;
+export interface SlotStyleVariantDefinition<S extends string, T extends SlotStyleVariantRecord<S> | undefined> {
+    slots: S[];
+    base?: SlotStyleRecord<S>;
+    variants?: T;
+    compoundVariants?: (ObjectKeyArrayPicker<T> & {
+        styles: SlotStyleRecord<S>;
+    })[];
+    defaultVariants?: ObjectKeyPicker<T>;
+}
+export type SlotStyleVariantFn<S extends string, T extends SlotStyleVariantRecord<S> | undefined> = (props?: ObjectKeyPicker<T> & {
+    styles?: SlotStyleRecord<S>;
+}) => Record<S, CssProperties>;
+export 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 = csv({
+ *   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' } }
+ * ```
+ */
+export declare const ssv: SlotStyleVariantCreatorFn;
+export default ssv;

package/dist/esm/ssv.js

@@ -0,0 +1,81 @@
+import { compact } from './utils/compact';
+/**
+ * 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 = csv({
+ *   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' } }
+ * ```
+ */
+export const ssv = (config) => {
+    const { slots, base, variants, compoundVariants, defaultVariants } = config;
+    return (props) => {
+        const { styles, ...rest } = props ?? {};
+        const mergedProps = { ...defaultVariants, ...compact(rest) };
+        const result = {};
+        for (const slot of slots) {
+            result[slot] = base?.[slot] ?? {};
+        }
+        if (variants) {
+            for (const key in mergedProps) {
+                const slotStyle = variants[key]?.[mergedProps[key]];
+                if (slotStyle) {
+                    for (const slot in slotStyle) {
+                        result[slot] = { ...result[slot], ...slotStyle[slot] };
+                    }
+                }
+            }
+        }
+        if (compoundVariants) {
+            for (const { styles: slotStyle, ...compoundVariant } of compoundVariants) {
+                let matches = true;
+                for (const key in compoundVariant) {
+                    const value = compoundVariant[key];
+                    const propValue = mergedProps[key];
+                    if (Array.isArray(value) ? !value.includes(propValue) : value !== propValue) {
+                        matches = false;
+                        break;
+                    }
+                }
+                if (matches) {
+                    for (const slot in slotStyle) {
+                        result[slot] = { ...result[slot], ...slotStyle[slot] };
+                    }
+                }
+            }
+        }
+        if (styles) {
+            for (const slot in styles) {
+                result[slot] = { ...result[slot], ...styles[slot] };
+            }
+        }
+        return result;
+    };
+};
+export default ssv;
+//# sourceMappingURL=ssv.js.map

package/dist/esm/ssv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssv.js","sourceRoot":"","sources":["../../src/ssv.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAsBzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,GAAG,GAA8B,CAAC,MAAM,EAAE,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAA;IAE3E,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAEvC,MAAM,WAAW,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAA;QAE5D,MAAM,MAAM,GAAG,EAAmD,CAAA;QAElE,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QACnC,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;gBAC9B,MAAM,SAAS,GAAG,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAW,CAAC,CAAA;gBAE7D,IAAI,SAAS,EAAE,CAAC;oBACd,KAAK,MAAM,IAAI,IAAI,SAAS,EAAE,CAAC;wBAC7B,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAA;oBACxD,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBACzE,IAAI,OAAO,GAAG,IAAI,CAAA;gBAElB,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;oBAClC,MAAM,KAAK,GAAG,eAAe,CAAC,GAAG,CAAC,CAAA;oBAClC,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;oBAElC,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;wBAC5E,OAAO,GAAG,KAAK,CAAA;wBACf,MAAK;oBACP,CAAC;gBACH,CAAC;gBAED,IAAI,OAAO,EAAE,CAAC;oBACZ,KAAK,MAAM,IAAI,IAAI,SAAS,EAAE,CAAC;wBAC7B,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,CAAA;oBACxD,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE,CAAC;gBAC1B,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,CAAA;YACrD,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}

package/dist/esm/sv.d.ts

@@ -0,0 +1,44 @@
+import { CssProperties, ObjectKeyArrayPicker, ObjectKeyPicker } from './utils/types';
+export type StyleVariantRecord = Record<string, Record<string, CssProperties>>;
+export interface StyleVariantDefinition<T extends StyleVariantRecord | undefined> {
+    base?: CssProperties;
+    variants?: T;
+    compoundVariants?: (ObjectKeyArrayPicker<T> & {
+        style: CssProperties;
+    })[];
+    defaultVariants?: ObjectKeyPicker<T>;
+}
+export type StyleVariantFn<T extends StyleVariantRecord | undefined> = (props?: ObjectKeyPicker<T> & {
+    style?: CssProperties;
+}) => 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;