tailwind-variants 0.3.1 → 2.0.0

package/README.md

@@ -20,17 +20,21 @@
 ## Features
 
 - First-class variant API
-- Responsive variants
 - Slots support
 - Composition support
 - Fully typed
 - Framework agnostic
 - Automatic conflict resolution
+- Tailwindcss V4 support
 
 ## Documentation
 
 For full documentation, visit [tailwind-variants.org](https://tailwind-variants.org)
 
+> ❕ Note: `Tailwindcss V4` no longer supports the `config.content.transform` so we remove the `responsive variants` feature
+>
+> If you want to use `responsive variants`, you need to add it manually to your classname.
+
 ## Quick Start
 
 1. Installation:
@@ -40,8 +44,22 @@ For full documentation, visit [tailwind-variants.org](https://tailwind-variants.
 yarn add tailwind-variants
 # or
 npm i tailwind-variants
+# or
+pnpm add tailwind-variants
 ```
 
+**Optional:** If you want automatic conflict resolution, also install `tailwind-merge`:
+
+```bash
+yarn add tailwind-merge
+# or
+npm i tailwind-merge
+# or
+pnpm add tailwind-merge
+```
+
+> **⚠️ Upgrading from v1?** Please read the [migration guide](./MIGRATION-V2.md) for breaking changes and performance improvements.
+
 2. Usage:
 
 ```js
@@ -75,46 +93,6 @@ const button = tv({
 return <button className={button({size: "sm", color: "secondary"})}>Click me</button>;
 ```
 
-3. Responsive variants configuration (optional): If you want to use responsive variants
-   you need to add the Tailwind Variants `wrapper` to your TailwindCSS config file `tailwind.config.js`.
-
-```js
-// tailwind.config.js
-
-const {withTV} = require("tailwind-variants/transformer");
-
-/** @type {import('tailwindcss').Config} */
-module.exports = withTV({
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-});
-```
-
-If you're using a custom path to import Tailwind variants, such as creating a custom tv instance with `createTV`, it's recommended to include this path in the transformer configuration:
-
-```js
-// tailwind.config.js
-
-const {withTV} = require("tailwind-variants/transformer");
-
-/** @type {import('tailwindcss').Config} */
-module.exports = withTV(
-  {
-    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    theme: {
-      extend: {},
-    },
-    plugins: [],
-  },
-  {
-    aliases: ["@/lib/tv"],
-  },
-);
-```
-
 ## Acknowledgements
 
 - [**cva**](https://github.com/joe-bell/cva) ([Joe Bell](https://github.com/joe-bell))

package/dist/chunk-BDOHQXGU.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var chunkL4Q3BGWH_cjs = require('./chunk-L4Q3BGWH.cjs');
+var tailwindMerge = require('tailwind-merge');
+
+var createTwMerge = (cachedTwMergeConfig) => {
+  return chunkL4Q3BGWH_cjs.isEmptyObject(cachedTwMergeConfig) ? tailwindMerge.twMerge : tailwindMerge.extendTailwindMerge({
+    ...cachedTwMergeConfig,
+    extend: {
+      theme: cachedTwMergeConfig.theme,
+      classGroups: cachedTwMergeConfig.classGroups,
+      conflictingClassGroupModifiers: cachedTwMergeConfig.conflictingClassGroupModifiers,
+      conflictingClassGroups: cachedTwMergeConfig.conflictingClassGroups,
+      ...cachedTwMergeConfig.extend
+    }
+  });
+};
+
+exports.createTwMerge = createTwMerge;

package/dist/chunk-GVHG2OMS.js

@@ -0,0 +1,17 @@
+import { isEmptyObject } from './chunk-YWS777Q5.js';
+import { twMerge, extendTailwindMerge } from 'tailwind-merge';
+
+var createTwMerge = (cachedTwMergeConfig) => {
+  return isEmptyObject(cachedTwMergeConfig) ? twMerge : extendTailwindMerge({
+    ...cachedTwMergeConfig,
+    extend: {
+      theme: cachedTwMergeConfig.theme,
+      classGroups: cachedTwMergeConfig.classGroups,
+      conflictingClassGroupModifiers: cachedTwMergeConfig.conflictingClassGroupModifiers,
+      conflictingClassGroups: cachedTwMergeConfig.conflictingClassGroups,
+      ...cachedTwMergeConfig.extend
+    }
+  });
+};
+
+export { createTwMerge };

package/dist/chunk-L4Q3BGWH.cjs

@@ -0,0 +1,82 @@
+'use strict';
+
+// src/utils.js
+var falsyToString = (value) => value === false ? "false" : value === true ? "true" : value === 0 ? "0" : value;
+var isEmptyObject = (obj) => {
+  if (!obj || typeof obj !== "object") return true;
+  for (const _ in obj) return false;
+  return true;
+};
+var isEqual = (obj1, obj2) => {
+  if (obj1 === obj2) return true;
+  if (!obj1 || !obj2) return false;
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length) return false;
+  for (let i = 0; i < keys1.length; i++) {
+    const key = keys1[i];
+    if (!keys2.includes(key)) return false;
+    if (obj1[key] !== obj2[key]) return false;
+  }
+  return true;
+};
+var isBoolean = (value) => value === true || value === false;
+function flat(arr, target) {
+  for (let i = 0; i < arr.length; i++) {
+    const el = arr[i];
+    if (Array.isArray(el)) flat(el, target);
+    else target.push(el);
+  }
+}
+function flatArray(arr) {
+  const flattened = [];
+  flat(arr, flattened);
+  return flattened;
+}
+var flatMergeArrays = (...arrays) => {
+  const result = [];
+  flat(arrays, result);
+  const filtered = [];
+  for (let i = 0; i < result.length; i++) {
+    if (result[i]) filtered.push(result[i]);
+  }
+  return filtered;
+};
+var mergeObjects = (obj1, obj2) => {
+  const result = {};
+  for (const key in obj1) {
+    const val1 = obj1[key];
+    if (key in obj2) {
+      const val2 = obj2[key];
+      if (Array.isArray(val1) || Array.isArray(val2)) {
+        result[key] = flatMergeArrays(val2, val1);
+      } else if (typeof val1 === "object" && typeof val2 === "object" && val1 && val2) {
+        result[key] = mergeObjects(val1, val2);
+      } else {
+        result[key] = val2 + " " + val1;
+      }
+    } else {
+      result[key] = val1;
+    }
+  }
+  for (const key in obj2) {
+    if (!(key in obj1)) {
+      result[key] = obj2[key];
+    }
+  }
+  return result;
+};
+var SPACE_REGEX = /\s+/g;
+var removeExtraSpaces = (str) => {
+  if (!str || typeof str !== "string") return str;
+  return str.replace(SPACE_REGEX, " ").trim();
+};
+
+exports.falsyToString = falsyToString;
+exports.flatArray = flatArray;
+exports.flatMergeArrays = flatMergeArrays;
+exports.isBoolean = isBoolean;
+exports.isEmptyObject = isEmptyObject;
+exports.isEqual = isEqual;
+exports.mergeObjects = mergeObjects;
+exports.removeExtraSpaces = removeExtraSpaces;

package/dist/chunk-YWS777Q5.js

@@ -0,0 +1,73 @@
+// src/utils.js
+var falsyToString = (value) => value === false ? "false" : value === true ? "true" : value === 0 ? "0" : value;
+var isEmptyObject = (obj) => {
+  if (!obj || typeof obj !== "object") return true;
+  for (const _ in obj) return false;
+  return true;
+};
+var isEqual = (obj1, obj2) => {
+  if (obj1 === obj2) return true;
+  if (!obj1 || !obj2) return false;
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length) return false;
+  for (let i = 0; i < keys1.length; i++) {
+    const key = keys1[i];
+    if (!keys2.includes(key)) return false;
+    if (obj1[key] !== obj2[key]) return false;
+  }
+  return true;
+};
+var isBoolean = (value) => value === true || value === false;
+function flat(arr, target) {
+  for (let i = 0; i < arr.length; i++) {
+    const el = arr[i];
+    if (Array.isArray(el)) flat(el, target);
+    else target.push(el);
+  }
+}
+function flatArray(arr) {
+  const flattened = [];
+  flat(arr, flattened);
+  return flattened;
+}
+var flatMergeArrays = (...arrays) => {
+  const result = [];
+  flat(arrays, result);
+  const filtered = [];
+  for (let i = 0; i < result.length; i++) {
+    if (result[i]) filtered.push(result[i]);
+  }
+  return filtered;
+};
+var mergeObjects = (obj1, obj2) => {
+  const result = {};
+  for (const key in obj1) {
+    const val1 = obj1[key];
+    if (key in obj2) {
+      const val2 = obj2[key];
+      if (Array.isArray(val1) || Array.isArray(val2)) {
+        result[key] = flatMergeArrays(val2, val1);
+      } else if (typeof val1 === "object" && typeof val2 === "object" && val1 && val2) {
+        result[key] = mergeObjects(val1, val2);
+      } else {
+        result[key] = val2 + " " + val1;
+      }
+    } else {
+      result[key] = val1;
+    }
+  }
+  for (const key in obj2) {
+    if (!(key in obj1)) {
+      result[key] = obj2[key];
+    }
+  }
+  return result;
+};
+var SPACE_REGEX = /\s+/g;
+var removeExtraSpaces = (str) => {
+  if (!str || typeof str !== "string") return str;
+  return str.replace(SPACE_REGEX, " ").trim();
+};
+
+export { falsyToString, flatArray, flatMergeArrays, isBoolean, isEmptyObject, isEqual, mergeObjects, removeExtraSpaces };

package/dist/cn.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var chunkBDOHQXGU_cjs = require('./chunk-BDOHQXGU.cjs');
+require('./chunk-L4Q3BGWH.cjs');
+
+
+
+Object.defineProperty(exports, "createTwMerge", {
+  enumerable: true,
+  get: function () { return chunkBDOHQXGU_cjs.createTwMerge; }
+});

package/dist/cn.js

@@ -0,0 +1,2 @@
+export { createTwMerge } from './chunk-GVHG2OMS.js';
+import './chunk-YWS777Q5.js';

package/dist/config.d.ts

@@ -1,6 +1,4 @@
 import type {extendTailwindMerge} from "tailwind-merge";
-import type {TVVariants} from "./index";
-import type {TVGeneratedScreens} from "./generated";
 
 type MergeConfig = Parameters<typeof extendTailwindMerge>[0];
 type LegacyMergeConfig = Extract<MergeConfig, {extend?: unknown}>["extend"];
@@ -20,19 +18,4 @@ export type TWMConfig = {
   twMergeConfig?: MergeConfig & LegacyMergeConfig;
 };
 
-export type TVConfig<
-  // @ts-expect-error
-  V extends TVVariants | undefined = undefined,
-  // @ts-expect-error
-  EV extends TVVariants | undefined = undefined,
-> = {
-  /**
-   * Whether to enable responsive variant transform.
-   * Which variants or screens(breakpoints) for responsive variant transform.
-   * @default false
-   */
-  responsiveVariants?:
-    | boolean
-    | TVGeneratedScreens[]
-    | {[K in keyof V | keyof EV]?: boolean | TVGeneratedScreens[]};
-} & TWMConfig;
+export type TVConfig = TWMConfig;

package/dist/index.cjs

@@ -1,12 +1,333 @@
 'use strict';
 
-var tailwindMerge = require('tailwind-merge');
+var chunkBDOHQXGU_cjs = require('./chunk-BDOHQXGU.cjs');
+var chunkL4Q3BGWH_cjs = require('./chunk-L4Q3BGWH.cjs');
 
-var q=e=>typeof e=="boolean"?`${e}`:e===0?"0":e,g=e=>!e||typeof e!="object"||Object.keys(e).length===0,X=(e,l)=>JSON.stringify(e)===JSON.stringify(l);function Y(e,l){e.forEach(function(t){Array.isArray(t)?Y(t,l):l.push(t);});}function F(e){let l=[];return Y(e,l),l}var J=(...e)=>F(e).filter(Boolean),T=(e,l)=>{let t={},O=Object.keys(e),k=Object.keys(l);for(let y of O)if(k.includes(y)){let V=e[y],h=l[y];Array.isArray(V)||Array.isArray(h)?t[y]=J(h,V):typeof V=="object"&&typeof h=="object"?t[y]=T(V,h):t[y]=h+" "+V;}else t[y]=e[y];for(let y of k)O.includes(y)||(t[y]=l[y]);return t},R=e=>!e||typeof e!="string"?e:e.replace(/\s+/g," ").trim();var ce={twMerge:!0,twMergeConfig:{},responsiveVariants:!1},_=e=>e||void 0,E=(...e)=>_(F(e).filter(Boolean).join(" ")),U=null,C={},W=!1,S=(...e)=>l=>l.twMerge?((!U||W)&&(W=!1,U=g(C)?tailwindMerge.twMerge:tailwindMerge.extendTailwindMerge({...C,extend:{theme:C.theme,classGroups:C.classGroups,conflictingClassGroupModifiers:C.conflictingClassGroupModifiers,conflictingClassGroups:C.conflictingClassGroups,...C.extend}})),_(U(E(e)))):E(e),Z=(e,l)=>{for(let t in l)e.hasOwnProperty(t)?e[t]=E(e[t],l[t]):e[t]=l[t];return e},oe=(e,l)=>{let{extend:t=null,slots:O={},variants:k={},compoundVariants:y=[],compoundSlots:V=[],defaultVariants:h={}}=e,d={...ce,...l},B=t!=null&&t.base?E(t.base,e==null?void 0:e.base):e==null?void 0:e.base,b=t!=null&&t.variants&&!g(t.variants)?T(k,t.variants):k,N=t!=null&&t.defaultVariants&&!g(t.defaultVariants)?{...t.defaultVariants,...h}:h;!g(d.twMergeConfig)&&!X(d.twMergeConfig,C)&&(W=!0,C=d.twMergeConfig);let $=g(t==null?void 0:t.slots),x=g(O)?{}:{base:E(e==null?void 0:e.base,$&&(t==null?void 0:t.base)),...O},M=$?x:Z({...t==null?void 0:t.slots},g(x)?{base:e==null?void 0:e.base}:x),j=g(t==null?void 0:t.compoundVariants)?y:J(t==null?void 0:t.compoundVariants,y),v=f=>{if(g(b)&&g(O)&&$)return S(B,f==null?void 0:f.class,f==null?void 0:f.className)(d);if(j&&!Array.isArray(j))throw new TypeError(`The "compoundVariants" prop must be an array. Received: ${typeof j}`);if(V&&!Array.isArray(V))throw new TypeError(`The "compoundSlots" prop must be an array. Received: ${typeof V}`);let P=(r,a,n=[],i)=>{let s=n;if(typeof a=="string")s=s.concat(R(a).split(" ").map(o=>`${r}:${o}`));else if(Array.isArray(a))s=s.concat(a.reduce((o,c)=>o.concat(`${r}:${c}`),[]));else if(typeof a=="object"&&typeof i=="string"){for(let o in a)if(a.hasOwnProperty(o)&&o===i){let c=a[o];if(c&&typeof c=="string"){let m=R(c);s[i]?s[i]=s[i].concat(m.split(" ").map(u=>`${r}:${u}`)):s[i]=m.split(" ").map(u=>`${r}:${u}`);}else Array.isArray(c)&&c.length>0&&(s[i]=c.reduce((m,u)=>m.concat(`${r}:${u}`),[]));}}return s},z=(r,a=b,n=null,i=null)=>{var L;let s=a[r];if(!s||g(s))return null;let o=(L=i==null?void 0:i[r])!=null?L:f==null?void 0:f[r];if(o===null)return null;let c=q(o),m=Array.isArray(d.responsiveVariants)&&d.responsiveVariants.length>0||d.responsiveVariants===!0,u=N==null?void 0:N[r],A=[];if(typeof c=="object"&&m)for(let[G,Q]of Object.entries(c)){let ae=s[Q];if(G==="initial"){u=Q;continue}Array.isArray(d.responsiveVariants)&&!d.responsiveVariants.includes(G)||(A=P(G,ae,A,n));}let p=c!=null&&typeof c!="object"?c:q(u),w=s[p||"false"];return typeof A=="object"&&typeof n=="string"&&A[n]?Z(A,w):A.length>0?(A.push(w),n==="base"?A.join(" "):A):w},ee=()=>b?Object.keys(b).map(r=>z(r,b)):null,te=(r,a)=>{if(!b||typeof b!="object")return null;let n=new Array;for(let i in b){let s=z(i,b,r,a),o=r==="base"&&typeof s=="string"?s:s&&s[r];o&&(n[n.length]=o);}return n},D={};for(let r in f)f[r]!==void 0&&(D[r]=f[r]);let H=(r,a)=>{var i;let n=typeof(f==null?void 0:f[r])=="object"?{[r]:(i=f[r])==null?void 0:i.initial}:{};return {...N,...D,...n,...a}},I=(r=[],a)=>{let n=[];for(let{class:i,className:s,...o}of r){let c=!0;for(let[m,u]of Object.entries(o)){let A=H(m,a)[m];if(Array.isArray(u)){if(!u.includes(A)){c=!1;break}}else {let p=w=>w==null||w===!1;if(p(u)&&p(A))continue;if(A!==u){c=!1;break}}}c&&(i&&n.push(i),s&&n.push(s));}return n},ne=r=>{let a=I(j,r);if(!Array.isArray(a))return a;let n={};for(let i of a)if(typeof i=="string"&&(n.base=S(n.base,i)(d)),typeof i=="object")for(let[s,o]of Object.entries(i))n[s]=S(n[s],o)(d);return n},re=r=>{if(V.length<1)return null;let a={};for(let{slots:n=[],class:i,className:s,...o}of V){if(!g(o)){let c=!0;for(let m of Object.keys(o)){let u=H(m,r)[m];if(u===void 0||(Array.isArray(o[m])?!o[m].includes(u):o[m]!==u)){c=!1;break}}if(!c)continue}for(let c of n)a[c]=a[c]||[],a[c].push([i,s]);}return a};if(!g(O)||!$){let r={};if(typeof M=="object"&&!g(M))for(let a of Object.keys(M))r[a]=n=>{var i,s;return S(M[a],te(a,n),((i=ne(n))!=null?i:[])[a],((s=re(n))!=null?s:[])[a],n==null?void 0:n.class,n==null?void 0:n.className)(d)};return r}return S(B,ee(),I(j),f==null?void 0:f.class,f==null?void 0:f.className)(d)},K=()=>{if(!(!b||typeof b!="object"))return Object.keys(b)};return v.variantKeys=K(),v.extend=t,v.base=B,v.slots=M,v.variants=b,v.defaultVariants=N,v.compoundSlots=V,v.compoundVariants=j,v},ye=e=>(l,t)=>oe(l,t?T(e,t):e);
+// src/index.js
+var defaultConfig = {
+  twMerge: true,
+  twMergeConfig: {},
+  responsiveVariants: false
+};
+var cnBase = (...classes) => {
+  const result = [];
+  flat(classes, result);
+  let str = "";
+  for (let i = 0; i < result.length; i++) {
+    if (result[i]) {
+      if (str) str += " ";
+      str += result[i];
+    }
+  }
+  return str || void 0;
+};
+function flat(arr, target) {
+  for (let i = 0; i < arr.length; i++) {
+    const el = arr[i];
+    if (Array.isArray(el)) flat(el, target);
+    else if (el) target.push(el);
+  }
+}
+var cachedTwMerge = null;
+var cachedTwMergeConfig = {};
+var didTwMergeConfigChange = false;
+var cn = (...classes) => (config) => {
+  const base = cnBase(classes);
+  if (!base || !config.twMerge) return base;
+  if (!cachedTwMerge || didTwMergeConfigChange) {
+    didTwMergeConfigChange = false;
+    cachedTwMerge = chunkBDOHQXGU_cjs.createTwMerge(cachedTwMergeConfig);
+  }
+  return cachedTwMerge(base) || void 0;
+};
+var joinObjects = (obj1, obj2) => {
+  for (const key in obj2) {
+    if (key in obj1) {
+      obj1[key] = cnBase(obj1[key], obj2[key]);
+    } else {
+      obj1[key] = obj2[key];
+    }
+  }
+  return obj1;
+};
+var tv = (options, configProp) => {
+  const {
+    extend = null,
+    slots: slotProps = {},
+    variants: variantsProps = {},
+    compoundVariants: compoundVariantsProps = [],
+    compoundSlots = [],
+    defaultVariants: defaultVariantsProps = {}
+  } = options;
+  const config = { ...defaultConfig, ...configProp };
+  const base = extend?.base ? cnBase(extend.base, options?.base) : options?.base;
+  const variants = extend?.variants && !chunkL4Q3BGWH_cjs.isEmptyObject(extend.variants) ? chunkL4Q3BGWH_cjs.mergeObjects(variantsProps, extend.variants) : variantsProps;
+  const defaultVariants = extend?.defaultVariants && !chunkL4Q3BGWH_cjs.isEmptyObject(extend.defaultVariants) ? { ...extend.defaultVariants, ...defaultVariantsProps } : defaultVariantsProps;
+  if (!chunkL4Q3BGWH_cjs.isEmptyObject(config.twMergeConfig) && !chunkL4Q3BGWH_cjs.isEqual(config.twMergeConfig, cachedTwMergeConfig)) {
+    didTwMergeConfigChange = true;
+    cachedTwMergeConfig = config.twMergeConfig;
+  }
+  const isExtendedSlotsEmpty = chunkL4Q3BGWH_cjs.isEmptyObject(extend?.slots);
+  const componentSlots = !chunkL4Q3BGWH_cjs.isEmptyObject(slotProps) ? {
+    // add "base" to the slots object
+    base: cnBase(options?.base, isExtendedSlotsEmpty && extend?.base),
+    ...slotProps
+  } : {};
+  const slots = isExtendedSlotsEmpty ? componentSlots : joinObjects(
+    { ...extend?.slots },
+    chunkL4Q3BGWH_cjs.isEmptyObject(componentSlots) ? { base: options?.base } : componentSlots
+  );
+  const compoundVariants = chunkL4Q3BGWH_cjs.isEmptyObject(extend?.compoundVariants) ? compoundVariantsProps : chunkL4Q3BGWH_cjs.flatMergeArrays(extend?.compoundVariants, compoundVariantsProps);
+  const component = (props) => {
+    if (chunkL4Q3BGWH_cjs.isEmptyObject(variants) && chunkL4Q3BGWH_cjs.isEmptyObject(slotProps) && isExtendedSlotsEmpty) {
+      return cn(base, props?.class, props?.className)(config);
+    }
+    if (compoundVariants && !Array.isArray(compoundVariants)) {
+      throw new TypeError(
+        `The "compoundVariants" prop must be an array. Received: ${typeof compoundVariants}`
+      );
+    }
+    if (compoundSlots && !Array.isArray(compoundSlots)) {
+      throw new TypeError(
+        `The "compoundSlots" prop must be an array. Received: ${typeof compoundSlots}`
+      );
+    }
+    const getScreenVariantValues = (screen, screenVariantValue, acc = [], slotKey) => {
+      let result = acc;
+      if (typeof screenVariantValue === "string") {
+        const cleaned = chunkL4Q3BGWH_cjs.removeExtraSpaces(screenVariantValue);
+        const parts = cleaned.split(" ");
+        for (let i = 0; i < parts.length; i++) {
+          result.push(`${screen}:${parts[i]}`);
+        }
+      } else if (Array.isArray(screenVariantValue)) {
+        for (let i = 0; i < screenVariantValue.length; i++) {
+          result.push(`${screen}:${screenVariantValue[i]}`);
+        }
+      } else if (typeof screenVariantValue === "object" && typeof slotKey === "string") {
+        if (slotKey in screenVariantValue) {
+          const value = screenVariantValue[slotKey];
+          if (value && typeof value === "string") {
+            const fixedValue = chunkL4Q3BGWH_cjs.removeExtraSpaces(value);
+            const parts = fixedValue.split(" ");
+            const arr = [];
+            for (let i = 0; i < parts.length; i++) {
+              arr.push(`${screen}:${parts[i]}`);
+            }
+            result[slotKey] = result[slotKey] ? result[slotKey].concat(arr) : arr;
+          } else if (Array.isArray(value) && value.length > 0) {
+            const arr = [];
+            for (let i = 0; i < value.length; i++) {
+              arr.push(`${screen}:${value[i]}`);
+            }
+            result[slotKey] = arr;
+          }
+        }
+      }
+      return result;
+    };
+    const getVariantValue = (variant, vrs = variants, slotKey = null, slotProps2 = null) => {
+      const variantObj = vrs[variant];
+      if (!variantObj || chunkL4Q3BGWH_cjs.isEmptyObject(variantObj)) {
+        return null;
+      }
+      const variantProp = slotProps2?.[variant] ?? props?.[variant];
+      if (variantProp === null) return null;
+      const variantKey = chunkL4Q3BGWH_cjs.falsyToString(variantProp);
+      const responsiveVarsEnabled = Array.isArray(config.responsiveVariants) && config.responsiveVariants.length > 0 || config.responsiveVariants === true;
+      let defaultVariantProp = defaultVariants?.[variant];
+      let screenValues = [];
+      if (typeof variantKey === "object" && responsiveVarsEnabled) {
+        for (const [screen, screenVariantKey] of Object.entries(variantKey)) {
+          const screenVariantValue = variantObj[screenVariantKey];
+          if (screen === "initial") {
+            defaultVariantProp = screenVariantKey;
+            continue;
+          }
+          if (Array.isArray(config.responsiveVariants) && !config.responsiveVariants.includes(screen)) {
+            continue;
+          }
+          screenValues = getScreenVariantValues(screen, screenVariantValue, screenValues, slotKey);
+        }
+      }
+      const key = variantKey != null && typeof variantKey != "object" ? variantKey : chunkL4Q3BGWH_cjs.falsyToString(defaultVariantProp);
+      const value = variantObj[key || "false"];
+      if (typeof screenValues === "object" && typeof slotKey === "string" && screenValues[slotKey]) {
+        return joinObjects(screenValues, value);
+      }
+      if (screenValues.length > 0) {
+        screenValues.push(value);
+        if (slotKey === "base") {
+          return screenValues.join(" ");
+        }
+        return screenValues;
+      }
+      return value;
+    };
+    const getVariantClassNames = () => {
+      if (!variants) return null;
+      const keys = Object.keys(variants);
+      const result = [];
+      for (let i = 0; i < keys.length; i++) {
+        const value = getVariantValue(keys[i], variants);
+        if (value) result.push(value);
+      }
+      return result;
+    };
+    const getVariantClassNamesBySlotKey = (slotKey, slotProps2) => {
+      if (!variants || typeof variants !== "object") return null;
+      const result = [];
+      for (const variant in variants) {
+        const variantValue = getVariantValue(variant, variants, slotKey, slotProps2);
+        const value = slotKey === "base" && typeof variantValue === "string" ? variantValue : variantValue && variantValue[slotKey];
+        if (value) result.push(value);
+      }
+      return result;
+    };
+    const propsWithoutUndefined = {};
+    for (const prop in props) {
+      const value = props[prop];
+      if (value !== void 0) propsWithoutUndefined[prop] = value;
+    }
+    const getCompleteProps = (key, slotProps2) => {
+      const initialProp = typeof props?.[key] === "object" ? {
+        [key]: props[key]?.initial
+      } : {};
+      return {
+        ...defaultVariants,
+        ...propsWithoutUndefined,
+        ...initialProp,
+        ...slotProps2
+      };
+    };
+    const getCompoundVariantsValue = (cv = [], slotProps2) => {
+      const result = [];
+      const cvLength = cv.length;
+      for (let i = 0; i < cvLength; i++) {
+        const { class: tvClass, className: tvClassName, ...compoundVariantOptions } = cv[i];
+        let isValid = true;
+        const completeProps = getCompleteProps(null, slotProps2);
+        for (const key in compoundVariantOptions) {
+          const value = compoundVariantOptions[key];
+          const completePropsValue = completeProps[key];
+          if (Array.isArray(value)) {
+            if (!value.includes(completePropsValue)) {
+              isValid = false;
+              break;
+            }
+          } else {
+            if ((value == null || value === false) && (completePropsValue == null || completePropsValue === false))
+              continue;
+            if (completePropsValue !== value) {
+              isValid = false;
+              break;
+            }
+          }
+        }
+        if (isValid) {
+          if (tvClass) result.push(tvClass);
+          if (tvClassName) result.push(tvClassName);
+        }
+      }
+      return result;
+    };
+    const getCompoundVariantClassNamesBySlot = (slotProps2) => {
+      const compoundClassNames = getCompoundVariantsValue(compoundVariants, slotProps2);
+      if (!Array.isArray(compoundClassNames)) return compoundClassNames;
+      const result = {};
+      const cnFn = cn;
+      for (let i = 0; i < compoundClassNames.length; i++) {
+        const className = compoundClassNames[i];
+        if (typeof className === "string") {
+          result.base = cnFn(result.base, className)(config);
+        } else if (typeof className === "object") {
+          for (const slot in className) {
+            result[slot] = cnFn(result[slot], className[slot])(config);
+          }
+        }
+      }
+      return result;
+    };
+    const getCompoundSlotClassNameBySlot = (slotProps2) => {
+      if (compoundSlots.length < 1) return null;
+      const result = {};
+      const completeProps = getCompleteProps(null, slotProps2);
+      for (let i = 0; i < compoundSlots.length; i++) {
+        const {
+          slots: slots2 = [],
+          class: slotClass,
+          className: slotClassName,
+          ...slotVariants
+        } = compoundSlots[i];
+        if (!chunkL4Q3BGWH_cjs.isEmptyObject(slotVariants)) {
+          let isValid = true;
+          for (const key in slotVariants) {
+            const completePropsValue = completeProps[key];
+            const slotVariantValue = slotVariants[key];
+            if (completePropsValue === void 0 || (Array.isArray(slotVariantValue) ? !slotVariantValue.includes(completePropsValue) : slotVariantValue !== completePropsValue)) {
+              isValid = false;
+              break;
+            }
+          }
+          if (!isValid) continue;
+        }
+        for (let j = 0; j < slots2.length; j++) {
+          const slotName = slots2[j];
+          if (!result[slotName]) result[slotName] = [];
+          result[slotName].push([slotClass, slotClassName]);
+        }
+      }
+      return result;
+    };
+    if (!chunkL4Q3BGWH_cjs.isEmptyObject(slotProps) || !isExtendedSlotsEmpty) {
+      const slotsFns = {};
+      if (typeof slots === "object" && !chunkL4Q3BGWH_cjs.isEmptyObject(slots)) {
+        const cnFn = cn;
+        for (const slotKey in slots) {
+          slotsFns[slotKey] = (slotProps2) => {
+            const compoundVariantClasses = getCompoundVariantClassNamesBySlot(slotProps2);
+            const compoundSlotClasses = getCompoundSlotClassNameBySlot(slotProps2);
+            return cnFn(
+              slots[slotKey],
+              getVariantClassNamesBySlotKey(slotKey, slotProps2),
+              compoundVariantClasses ? compoundVariantClasses[slotKey] : void 0,
+              compoundSlotClasses ? compoundSlotClasses[slotKey] : void 0,
+              slotProps2?.class,
+              slotProps2?.className
+            )(config);
+          };
+        }
+      }
+      return slotsFns;
+    }
+    return cn(
+      base,
+      getVariantClassNames(),
+      getCompoundVariantsValue(compoundVariants),
+      props?.class,
+      props?.className
+    )(config);
+  };
+  const getVariantKeys = () => {
+    if (!variants || typeof variants !== "object") return;
+    return Object.keys(variants);
+  };
+  component.variantKeys = getVariantKeys();
+  component.extend = extend;
+  component.base = base;
+  component.slots = slots;
+  component.variants = variants;
+  component.defaultVariants = defaultVariants;
+  component.compoundSlots = compoundSlots;
+  component.compoundVariants = compoundVariants;
+  return component;
+};
+var createTV = (configProp) => {
+  return (options, config) => tv(options, config ? chunkL4Q3BGWH_cjs.mergeObjects(configProp, config) : configProp);
+};
 
-exports.cn = S;
-exports.cnBase = E;
-exports.createTV = ye;
-exports.defaultConfig = ce;
-exports.tv = oe;
-exports.voidEmpty = _;
+exports.cn = cn;
+exports.cnBase = cnBase;
+exports.createTV = createTV;
+exports.defaultConfig = defaultConfig;
+exports.tv = tv;