css-variants 1.1.3 → 2.0.0

package/README.md

@@ -44,7 +44,7 @@ Thank you to the authors and contributors of these projects for their innovative
 * [Overriding styles](#overriding-styles)
   * [Overriding styles on a single component](#overriding-styles-on-a-single-component)
   * [Overriding styles on a component with slots](#overriding-styles-on-a-component-with-slots)
-* [Handling Style Conflicts](#handling-style-conflicts)
+* [Custom function to resolve class names](#custom-function-to-resolve-class-names)
 * [TypeScript](#typeScript)
 * [Contribute](#contribute)
 * [License](#license)
@@ -75,31 +75,39 @@ const button = cv({
     color: {
       primary: 'bg-blue-500 hover:bg-blue-700',
       secondary: 'bg-purple-500 hover:bg-purple-700',
+      success: 'hover:bg-green-700',
+    },
+  },
+})
+
+button({ color: 'secondary' })
+// => 'font-bold rounded-sm bg-purple-500 hover:bg-purple-700'
+```
+
+```ts
+import { sv } from 'css-variants'
+ 
+const button = sv({
+  base: {
+    fontWeight: 700,
+  },
+  variants: {
+    color: {
+      primary: {
+        color: 'blue',
+      },
+      secondary: {
+        color: 'red',
+      },
       success: {
-        className: 'hover:bg-green-700',
-        style: { color: 'green' }, // You can also use inline style
+        color: 'green',
       },
     },
   },
 })
 
 button({ color: 'secondary' })
-/**
- * Result:
- * {
- *    className: 'font-bold rounded-sm bg-purple-500 hover:bg-purple-700',
- *    style: {},
- * }
- */
-
-button({ color: 'success' })
-/**
- * Result:
- * {
- *    className: 'font-bold rounded-sm hover:bg-green-700',
- *    style: { color: 'green' },
- * }
- */
+// => { fontWeight: 700, color: 'red' }
 ```
 
 ### Multiple variants
@@ -110,10 +118,7 @@ You can add multiple variants to a single component.
 import { cv } from 'css-variants'
  
 const button = cv({
-  base: {
-    className: 'font-bold',
-    style: { borderRadius: 16 },
-  },
+  base: 'font-bold',
   variants: {
     color: {
       primary: 'bg-blue-500 hover:bg-blue-700',
@@ -129,13 +134,7 @@ const button = cv({
 })
 
 button({ color: 'success', size: 'lg' })
-/**
- * Result:
- * {
- *    className: 'font-bold bg-green-500 hover:bg-green-700 text-lg p-6',
- *    style: { borderRadius: 16 },
- * }
- */
+// => 'font-bold bg-green-500 hover:bg-green-700 text-lg p-6'
 ```
 
 ### Boolean variants
@@ -146,9 +145,6 @@ You can also add boolean variants to a component. This is useful when you want t
 import { cv } from 'css-variants'
  
 const button = cv({
-  base: {
-    style: { fontWeight: 'bold' },
-  },
   variants: {
     color: {
       primary: 'bg-blue-500 hover:bg-blue-700',
@@ -162,13 +158,7 @@ const button = cv({
 })
 
 button({ disabled: true })
-/**
- * Result:
- * {
- *    className: 'opacity-50 pointer-events-none',
- *    style: { fontWeight: 'bold' },
- * }
- */
+// => 'opacity-50 pointer-events-none'
 ```
 
 ### Compound variants
@@ -179,17 +169,11 @@ Sometimes you might want to add a variant that depends on another variant. This
 import { cv } from 'css-variants'
  
 const button = cv({
-  base: {
-    style: { fontWeight: 'bold' },
-  },
   variants: {
     size: {
       sm: 'text-sm p-2',
       md: 'text-md p-4',
-      lg: {
-        className: 'text-lg',
-        style: { padding: 6 },
-      },
+      lg: 'text-lg',
     },
     disabled: {
       true: 'opacity-50 pointer-events-none',
@@ -200,19 +184,12 @@ const button = cv({
       size: 'lg', // You can also use the values as an array
       disabled: true,
       className: 'uppercase',
-      style: { padding: 5 },
     }
   ],
 })
 
 button({ size: 'lg', disabled: true })
-/**
- * Result:
- * {
- *    className: 'text-lg p-6 opacity-50 pointer-events-none uppercase',
- *    style: { fontWeight: 'bold', padding: 5 },
- * }
- */
+// => 'text-lg p-6 opacity-50 pointer-events-none uppercase'
 ```
 
 ### Default variants
@@ -237,13 +214,7 @@ const button = cv({
 })
 
 button()
-/**
- * Result:
- * {
- *    className: 'font-bold rounded-sm bg-blue-500 hover:bg-blue-700',
- *    style: {},
- * }
- */
+// => 'font-bold rounded-sm bg-blue-500 hover:bg-blue-700'
 ```
 
 ## Slots
@@ -255,16 +226,13 @@ Slots allows you to separate a component into multiple parts.
 You can add `slots` by using the slots key. There's no limit to how many slots you can add.
 
 ```ts
-import { csv } from 'css-variants'
+import { scv } from 'css-variants'
 
-const notification = cv({
+const notification = scv({
   slots: ['root', 'title'],
   base: {
     root: 'root',
-    title: {
-      className: 'title',
-      style: { fontSize: 16 },
-    },
+    title: 'title',
   },
 })
 
@@ -272,17 +240,35 @@ notification()
 /**
  * Result:
  * {
- *    root: {
- *      className: 'root',
- *      style: {},
- *    },
- *    title: {
- *      className: 'title',
- *      style: { fontSize: 16 },
- *    },
+ *    root: 'root',
+ *    title: 'title',
  * }
  */
+```
+
+```ts
+import { ssv } from 'css-variants'
 
+const notification = ssv({
+  slots: ['root', 'title'],
+  base: {
+    root: {
+      fontWeight: 'bold',
+    },
+    title: {
+      fontSize: '20px',
+    }
+  },
+})
+
+notification()
+/**
+ * Result:
+ * {
+ *    root: { fontWeight: 'bold' },
+ *    title: { fontSize: '20px' },
+ * }
+ */
 ```
 
 ### Slots with variants
@@ -297,10 +283,7 @@ const notification = cv({
   base: {
     root: 'root',
     title: 'title',
-    content: {
-      className: 'content',
-      style: { fontSize: 16 },
-    },
+    content: 'content',
   },
   variants: {
     color: {
@@ -321,18 +304,9 @@ notification({ color: 'primary' })
 /**
  * Result:
  * {
- *    root: {
- *      className: 'root root-primary',
- *      style: {},
- *    },
- *    title: {
- *      className: 'title title-primary',
- *      style: {},
- *    },
- *    content: {
- *      className: 'content content-primary',
- *      style: { fontSize: 16 },
- *    },
+ *    root: 'root root-primary',
+ *    title: 'title title-primary',
+ *    content: 'content content-primary',
  * }
  */
 
@@ -340,18 +314,9 @@ notification({ color: 'secondary' })
 /**
  * Result:
  * {
- *    root: {
- *      className: 'root',
- *      style: {},
- *    },
- *    title: {
- *      className: 'title title-secondary',
- *      style: {},
- *    },
- *    content: {
- *      className: 'content content-secondary',
- *      style: { fontSize: 16 },
- *    },
+ *    root: 'root',
+ *    title: 'title title-secondary',
+ *    content: 'content content-secondary',
  * }
  */
 ```
@@ -380,18 +345,34 @@ const button = cv({
 button({
   color: 'secondary',
   className: 'border-purple-600',
-  style: {
-    color: 'purple',
+})
+// => 'bg-purple-500 hover:bg-purple-700 border-purple-600'
+```
+
+```ts
+import { sv } from 'css-variants'
+ 
+const button = cv({
+  base: {
+    fontWeight: 700,
   },
+  variants: {
+    color: {
+      primary: {
+        color: 'blue',
+      },
+      secondary: {
+        color: 'purple',
+      },
+    }
+  }
 })
  
-/**
- * Result:
- * {
- *    className: 'bg-purple-500 hover:bg-purple-700 border-purple-600',
- *    style: { color: 'purple' },
- * }
- */
+button({
+  color: 'secondary',
+  style: { color: 'red' },
+})
+// => { fontWeight: 700, color: 'red' }
 ```
 
 ### Overriding styles on a component with slots
@@ -405,10 +386,7 @@ const notification = cv({
   slots: ['root', 'title'],
   base: {
     root: 'root',
-    title: {
-      className: 'title',
-      style: { fontSize: 16 },
-    },
+    title: 'title',
   },
 })
 
@@ -416,53 +394,38 @@ notification({
   classNames: {
     root: 'root-custom-class',
   },
-  styles: {
-    title: {
-      fontSize: 20,
-    }
-  },
 })
 /**
  * Result:
  * {
- *    root: {
- *      className: 'root-custom-class',
- *      style: {},
- *    },
- *    title: {
- *      className: 'title',
- *      style: { fontSize: 20 },
- *    },
+ *    root: 'root root-custom-class',
+ *    title: 'title',
  * }
  */
 
 ```
 
-## Handling Style Conflicts
-
-Although `css-variants` is designed to help you avoid styling conflicts, there's still a small margin of error when combining multiple classes or variants. To further minimize these conflicts and ensure consistent styling, you can integrate `tailwind-merge` into your project.
+## Custom function to resolve class names
 
-`tailwind-merge` is a utility that intelligently combines Tailwind CSS classes, resolving conflicts by giving precedence to the latter class when two classes target the same style property. By incorporating `tailwind-merge` with `css-variants`, you can create more robust components that automatically handle class conflicts.
+Default is the internal 'cx' function. The resolver function should accept multiple class name arguments and return a single concatenated string.
 
-The following example demonstrates how to extend functions from `css-variants` to use `tailwind-merge`. This integration ensures that your components will have consistent styling, even when multiple classes or variants are applied.
+You can use this to integrate with class name utilities like clsx, classnames, or your own custom class name resolution logic.
 
 ```ts
-import { twMerge } from 'tailwind-merge'
-import { cx as baseCx, cv as baseCv } from 'css-variants'
+import { clsx } from 'clsx'
+import { cv as _cv, scv as _scv } from 'css-variants'
 
-export const cx: typeof baseCx = (...args) => twMerge(baseCx(...args))
-
-export const cv: typeof baseCv = (config) => {
-  return baseCv({
+export const cv: typeof _cv = (config) => {
+  return _cv({
     ...config,
-    onDone: ({ className, style }) => {
-      const css = {
-        style,
-        className: twMerge(className),
-      }
+    classNameResolver: clsx,
+  })
+}
 
-      return config.onDone ? config.onDone(css) : css
-    },
+export const scv: typeof _scv = (config) => {
+  return _scv({
+    ...config,
+    classNameResolver: clsx,
   })
 }
 ```
@@ -471,11 +434,8 @@ export const cv: typeof baseCv = (config) => {
 
 ### Extracting Variant Types
 
-You can use the `VariantProps` utility to extract variants from a component.
-
 ```tsx
-import { VariantProps } from 'css-variants'
-import { cv } from 'class-variance-authority'
+import { cv } from 'css-variants'
  
 export const button = cv({
   variants: {
@@ -486,7 +446,7 @@ export const button = cv({
   },
 })
 
-export type ButtonProps = VariantProps<typeof button>
+export type ButtonProps = Parameters<typeof button>[0]
 ```
 
 ## Contribute

package/dist/cjs/cv.d.ts

@@ -1,3 +1,49 @@
-import { VariantCreatorFn } from './types';
-export declare const cv: VariantCreatorFn;
+import { ObjectKeyPicker, ObjectKeyArrayPicker } from './utils/types';
+import { cx, ClassValue } from './cx';
+export type ClassVariantRecord = Record<string, Record<string, ClassValue>>;
+export interface ClassVariantDefinition<T extends ClassVariantRecord | undefined> {
+    base?: ClassValue;
+    variants?: T;
+    compoundVariants?: (ObjectKeyArrayPicker<T> & {
+        className: ClassValue;
+    })[];
+    defaultVariants?: ObjectKeyPicker<T>;
+    classNameResolver?: typeof cx;
+}
+export type ClassVariantFn<T extends ClassVariantRecord | undefined> = (props?: ObjectKeyPicker<T> & {
+    className?: ClassValue;
+}) => string;
+export type ClassVariantCreatorFn = <T extends ClassVariantRecord | undefined>(config: ClassVariantDefinition<T>) => ClassVariantFn<T>;
+/**
+ * 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 declare const cv: ClassVariantCreatorFn;
 export default cv;

package/dist/cjs/cv.js

@@ -1,56 +1,68 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cv = void 0;
-const utils_1 = require("./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 };
-        }
-    }
-};
+const compact_1 = require("./utils/compact");
+const entries_1 = require("./utils/entries");
+const cx_1 = require("./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'
+ * ```
+ */
 const cv = (config) => {
-    const { base, variants, compoundVariants, defaultVariants, onDone } = config;
+    const { base, variants, compoundVariants, defaultVariants, classNameResolver = cx_1.cx } = config;
     return (props) => {
-        const { className: propClassName, style: propStyle, ...rest } = props ?? {};
-        const variantProps = { ...defaultVariants, ...(0, utils_1.compact)(rest) };
-        const css = { className: '', style: {} };
-        let tmp;
+        const { className, ...rest } = props ?? {};
+        const mergedProps = { ...defaultVariants, ...(0, compact_1.compact)(rest) };
+        const classValues = [];
         if (base) {
-            push(css, base);
+            classValues.push(base);
         }
         if (variants) {
-            for (const [key, variant] of (0, utils_1.entries)(variants)) {
-                if ((tmp = variant[variantProps[key]])) {
-                    push(css, tmp);
+            for (const [key, value] of (0, entries_1.entries)(mergedProps)) {
+                const classValue = variants[key][value];
+                if (classValue) {
+                    classValues.push(classValue);
                 }
             }
         }
         if (compoundVariants) {
-            for (const { className: cvClassName, style: cvStyle, ...compoundVariant } of compoundVariants) {
-                if ((0, utils_1.match)(compoundVariant, variantProps)) {
-                    push(css, { className: cvClassName, style: cvStyle });
+            for (const { className: classValue, ...compoundVariant } of compoundVariants) {
+                if ((0, entries_1.entries)(compoundVariant).every(([key, value]) => Array.isArray(value) ? value.includes(mergedProps[key]) : value === mergedProps[key])) {
+                    classValues.push(classValue);
                 }
             }
         }
-        if (propClassName) {
-            css.className && (css.className += ' ');
-            css.className += propClassName;
-        }
-        if (propStyle) {
-            css.style = { ...css.style, ...propStyle };
+        if (className) {
+            classValues.push(className);
         }
-        if (onDone)
-            return onDone(css);
-        return css;
+        return classNameResolver(...classValues);
     };
 };
 exports.cv = cv;

package/dist/cjs/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,6CAAyC;AACzC,6CAAyC;AACzC,6BAAqC;AAoBrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACI,MAAM,EAAE,GAA0B,CAAC,MAAM,EAAE,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,iBAAiB,GAAG,OAAE,EAAE,GAAG,MAAM,CAAA;IAC5F,OAAO,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;QAE1C,MAAM,WAAW,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,IAAA,iBAAO,EAAC,IAAI,CAAC,EAAE,CAAA;QAE5D,MAAM,WAAW,GAAiB,EAAE,CAAA;QAEpC,IAAI,IAAI,EAAE,CAAC;YACT,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACxB,CAAC;QAED,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAA,iBAAO,EAAC,WAAW,CAAC,EAAE,CAAC;gBAChD,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAe,CAAC,CAAA;gBACjD,IAAI,UAAU,EAAE,CAAC;oBACf,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,gBAAgB,EAAE,CAAC;YACrB,KAAK,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,EAAE,CAAC;gBAC7E,IACE,IAAA,iBAAO,EAAC,eAAe,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAC9C,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,WAAW,CAAC,GAAG,CAAC,CACrF,EACD,CAAC;oBACD,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;gBAC9B,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACd,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAC7B,CAAC;QAED,OAAO,iBAAiB,CAAC,GAAG,WAAW,CAAC,CAAA;IAC1C,CAAC,CAAA;AACH,CAAC,CAAA;AAxCY,QAAA,EAAE,MAwCd;AAED,kBAAe,UAAE,CAAA"}

package/dist/cjs/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;