tailwind-variants 3.2.1 → 3.2.2

package/README.md

@@ -104,6 +104,59 @@ const button = tv({
 return <button className={button({size: "sm", color: "secondary"})}>Click me</button>;
 ```
 
+## Utility Functions
+
+Tailwind Variants provides several utility functions for combining and merging class names:
+
+### `cx` - Simple Concatenation
+
+Combines class names without merging conflicting classes (similar to `clsx`):
+
+```js
+import {cx} from "tailwind-variants";
+
+cx("text-xl", "font-bold"); // => "text-xl font-bold"
+cx("px-2", "px-4"); // => "px-2 px-4" (no merging)
+```
+
+### `cn` - Merge with Default Config
+
+> **Updated in v3.2.2** - Now returns a string directly (no function call needed)
+
+Combines class names and merges conflicting Tailwind CSS classes using the default `tailwind-merge` config. Returns a string directly:
+
+```js
+import {cn} from "tailwind-variants";
+
+cn("bg-red-500", "bg-blue-500"); // => "bg-blue-500"
+cn("px-2", "px-4", "py-2"); // => "px-4 py-2"
+```
+
+### `cnMerge` - Merge with Custom Config
+
+> **Available from v3.2.2**
+
+Combines class names and merges conflicting Tailwind CSS classes with support for custom `twMerge` configuration via a second function call:
+
+```js
+import {cnMerge} from "tailwind-variants";
+
+// Disable merging
+cnMerge("px-2", "px-4")({twMerge: false}) // => "px-2 px-4"
+
+// Enable merging explicitly
+cnMerge("bg-red-500", "bg-blue-500")({twMerge: true}) // => "bg-blue-500"
+
+// Use custom twMergeConfig
+cnMerge("px-2", "px-4")({twMergeConfig: {...}}) // => merged with custom config
+```
+
+**When to use which:**
+
+- Use `cx` when you want simple concatenation without any merging
+- Use `cn` for most cases when you want automatic conflict resolution with default settings
+- Use `cnMerge` when you need to customize the merge behavior (disable merging, custom config, etc.)
+
 ## Acknowledgements
 
 - [**cva**](https://github.com/joe-bell/cva) ([Joe Bell](https://github.com/joe-bell))

package/dist/index.cjs

@@ -16,44 +16,24 @@ var createTwMerge = (cachedTwMergeConfig) => {
     }
   });
 };
+var executeMerge = (classnames, config) => {
+  const base = chunk2JY7EID6_cjs.cx(classnames);
+  if (!base || !(config?.twMerge ?? true)) return base;
+  if (!chunk52Z2HSI4_cjs.state.cachedTwMerge || chunk52Z2HSI4_cjs.state.didTwMergeConfigChange) {
+    chunk52Z2HSI4_cjs.state.didTwMergeConfigChange = false;
+    chunk52Z2HSI4_cjs.state.cachedTwMerge = createTwMerge(chunk52Z2HSI4_cjs.state.cachedTwMergeConfig);
+  }
+  return chunk52Z2HSI4_cjs.state.cachedTwMerge(base) || void 0;
+};
 var cn = (...classnames) => {
-  const execute = (config) => {
-    const base = chunk2JY7EID6_cjs.cx(classnames);
-    if (!base || !(config?.twMerge ?? true)) return base;
-    if (!chunk52Z2HSI4_cjs.state.cachedTwMerge || chunk52Z2HSI4_cjs.state.didTwMergeConfigChange) {
-      chunk52Z2HSI4_cjs.state.didTwMergeConfigChange = false;
-      chunk52Z2HSI4_cjs.state.cachedTwMerge = createTwMerge(chunk52Z2HSI4_cjs.state.cachedTwMergeConfig);
-    }
-    return chunk52Z2HSI4_cjs.state.cachedTwMerge(base) || void 0;
-  };
-  const defaultResult = execute({});
-  const fn = (config) => execute(config);
-  return new Proxy(fn, {
-    apply(target, thisArg, args) {
-      return target(...args);
-    },
-    get(target, prop) {
-      if (prop === Symbol.toPrimitive) {
-        return (hint) => {
-          if (hint === "string" || hint === "default") {
-            return defaultResult ?? "";
-          }
-          return defaultResult;
-        };
-      }
-      if (prop === "valueOf") {
-        return () => defaultResult;
-      }
-      if (prop === "toString") {
-        return () => String(defaultResult ?? "");
-      }
-      return target[prop];
-    }
-  });
+  return executeMerge(classnames, {});
+};
+var cnMerge = (...classnames) => {
+  return (config) => executeMerge(classnames, config);
 };
 
 // src/index.js
-var { createTV, tv } = chunk52Z2HSI4_cjs.getTailwindVariants(cn);
+var { createTV, tv } = chunk52Z2HSI4_cjs.getTailwindVariants(cnMerge);
 
 Object.defineProperty(exports, "defaultConfig", {
   enumerable: true,
@@ -64,5 +44,6 @@ Object.defineProperty(exports, "cx", {
   get: function () { return chunk2JY7EID6_cjs.cx; }
 });
 exports.cn = cn;
+exports.cnMerge = cnMerge;
 exports.createTV = createTV;
 exports.tv = tv;

package/dist/index.d.ts

@@ -22,34 +22,40 @@ export type * from "./types.d.ts";
 export declare const cx: <T extends CnOptions>(...classes: T) => CnReturn;
 
 /**
- * Type representing a callable function that can also be coerced to a string.
- * This allows `cn` to work both as a function and directly in template literals.
+ * Combines class names and merges conflicting Tailwind CSS classes using `tailwind-merge`.
+ * Uses default twMerge config. For custom config, use `cnMerge` instead.
+ * @param classes - Class names to combine (strings, arrays, objects, etc.)
+ * @returns A merged class string, or `undefined` if no valid classes are provided
+ * @example
+ * ```ts
+ * // Simple usage with default twMerge config
+ * cn('bg-red-500', 'bg-blue-500') // => 'bg-blue-500'
+ * cn('px-2', 'px-4', 'py-2') // => 'px-4 py-2'
+ *
+ * // For custom twMerge config, use cnMerge instead
+ * cnMerge('px-2', 'px-4')({twMerge: false}) // => 'px-2 px-4'
+ * ```
  */
-type CnCallable = ((config?: TWMConfig) => CnReturn) & {
-  toString(): string;
-  valueOf(): CnReturn;
-  [Symbol.toPrimitive](hint: "string" | "number" | "default"): string | CnReturn;
-} & string;
+export declare const cn: <T extends CnOptions>(...classes: T) => CnReturn;
 
 /**
  * Combines class names and merges conflicting Tailwind CSS classes using `tailwind-merge`.
+ * Supports custom twMerge config via the second function call.
  * @param classes - Class names to combine (strings, arrays, objects, etc.)
- * @returns A callable function that returns the merged class string. Works directly in template literals (coerces to string) or can be called with optional config.
+ * @returns A function that accepts optional twMerge config and returns the merged class string
  * @example
  * ```ts
- * // twMerge defaults to true - works directly in template literals
- * `${cn('bg-red-500', 'bg-blue-500')}` // => 'bg-blue-500'
- * String(cn('bg-red-500', 'bg-blue-500')) // => 'bg-blue-500'
- *
- * // Can still be called with config for explicit control
- * cn('bg-red-500', 'bg-blue-500')() // => 'bg-blue-500'
+ * // With custom config
+ * cnMerge('bg-red-500', 'bg-blue-500')({twMerge: true}) // => 'bg-blue-500'
+ * cnMerge('px-2', 'px-4')({twMerge: false}) // => 'px-2 px-4'
  *
- * // Note: If you need simple concatenation without merging, use `cx` instead:
- * // Instead of: cn('bg-red-500', 'bg-blue-500')({ twMerge: false })
- * // Use: cx('bg-red-500', 'bg-blue-500') // => 'bg-red-500 bg-blue-500'
+ * // With twMergeConfig
+ * cnMerge('px-2', 'px-4')({twMergeConfig: {...}}) // => merged with custom config
  * ```
  */
-export declare const cn: <T extends CnOptions>(...classes: T) => CnCallable;
+export declare const cnMerge: <T extends CnOptions>(
+  ...classes: T
+) => (config?: TWMConfig) => CnReturn;
 
 /**
  * Creates a variant-aware component function with Tailwind CSS classes.

package/dist/index.js

@@ -16,43 +16,23 @@ var createTwMerge = (cachedTwMergeConfig) => {
     }
   });
 };
+var executeMerge = (classnames, config) => {
+  const base = cx(classnames);
+  if (!base || !(config?.twMerge ?? true)) return base;
+  if (!state.cachedTwMerge || state.didTwMergeConfigChange) {
+    state.didTwMergeConfigChange = false;
+    state.cachedTwMerge = createTwMerge(state.cachedTwMergeConfig);
+  }
+  return state.cachedTwMerge(base) || void 0;
+};
 var cn = (...classnames) => {
-  const execute = (config) => {
-    const base = cx(classnames);
-    if (!base || !(config?.twMerge ?? true)) return base;
-    if (!state.cachedTwMerge || state.didTwMergeConfigChange) {
-      state.didTwMergeConfigChange = false;
-      state.cachedTwMerge = createTwMerge(state.cachedTwMergeConfig);
-    }
-    return state.cachedTwMerge(base) || void 0;
-  };
-  const defaultResult = execute({});
-  const fn = (config) => execute(config);
-  return new Proxy(fn, {
-    apply(target, thisArg, args) {
-      return target(...args);
-    },
-    get(target, prop) {
-      if (prop === Symbol.toPrimitive) {
-        return (hint) => {
-          if (hint === "string" || hint === "default") {
-            return defaultResult ?? "";
-          }
-          return defaultResult;
-        };
-      }
-      if (prop === "valueOf") {
-        return () => defaultResult;
-      }
-      if (prop === "toString") {
-        return () => String(defaultResult ?? "");
-      }
-      return target[prop];
-    }
-  });
+  return executeMerge(classnames, {});
+};
+var cnMerge = (...classnames) => {
+  return (config) => executeMerge(classnames, config);
 };
 
 // src/index.js
-var { createTV, tv } = getTailwindVariants(cn);
+var { createTV, tv } = getTailwindVariants(cnMerge);
 
-export { cn, createTV, tv };
+export { cn, cnMerge, createTV, tv };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-variants",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "🦄 Tailwindcss first-class variant API",
   "keywords": [
     "tailwindcss",