tailwind-to-style 3.1.2 → 3.2.0

package/dist/cx.cjs

@@ -0,0 +1,115 @@
+/**
+ * tailwind-to-style v3.2.0
+ * Runtime Tailwind CSS to inline styles converter
+ * 
+ * @author Bigetion
+ * @license MIT
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * CX - Conditional Class Name Builder
+ * 
+ * A lightweight utility for conditionally joining Tailwind class names.
+ * Similar to `clsx`/`classnames` but designed specifically for tailwind-to-style.
+ * 
+ * @module cx
+ */
+
+/**
+ * Conditionally join class names into a single string.
+ * 
+ * Accepts strings, objects (key=className, value=condition), arrays, and nested combinations.
+ * Falsy values (null, undefined, false, 0, '') are ignored.
+ * 
+ * @param {...(string|Object|Array|boolean|null|undefined)} args - Class name inputs
+ * @returns {string} Joined class names string
+ * 
+ * @example
+ * // Strings
+ * cx('bg-blue-500', 'text-white')
+ * // → 'bg-blue-500 text-white'
+ * 
+ * @example
+ * // Conditionals
+ * cx('p-4', isActive && 'bg-blue-500', isDisabled && 'opacity-50')
+ * // → 'p-4 bg-blue-500' (if isActive=true, isDisabled=false)
+ * 
+ * @example
+ * // Object syntax
+ * cx('p-4', { 'bg-blue-500': isActive, 'opacity-50': isDisabled, 'cursor-pointer': true })
+ * // → 'p-4 bg-blue-500 cursor-pointer'
+ * 
+ * @example
+ * // Arrays (nested)
+ * cx(['p-4', 'bg-white'], isActive && ['ring-2', 'ring-blue-500'])
+ * // → 'p-4 bg-white ring-2 ring-blue-500'
+ * 
+ * @example
+ * // Mixed
+ * cx(
+ *   'base-class',
+ *   condition && 'conditional-class',
+ *   { 'object-class': true, 'ignored-class': false },
+ *   ['array-class-1', 'array-class-2']
+ * )
+ */
+function cx() {
+  const classes = [];
+  for (let i = 0; i < arguments.length; i++) {
+    const arg = i < 0 || arguments.length <= i ? undefined : arguments[i];
+
+    // Skip falsy values
+    if (!arg) continue;
+    const type = typeof arg;
+    if (type === 'string') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      // Recursively process arrays
+      const inner = cx(...arg);
+      if (inner) classes.push(inner);
+    } else if (type === 'object') {
+      // Object: keys are class names, values are conditions
+      const keys = Object.keys(arg);
+      for (let j = 0; j < keys.length; j++) {
+        if (arg[keys[j]]) {
+          classes.push(keys[j]);
+        }
+      }
+    }
+  }
+  return classes.join(' ');
+}
+
+/**
+ * Create a cx function bound with base classes.
+ * Useful for component-level class composition.
+ * 
+ * @param {...(string|Object|Array)} baseArgs - Base class arguments always included
+ * @returns {Function} A cx function pre-filled with base classes
+ * 
+ * @example
+ * const btnClasses = cx.with('px-4 py-2 rounded font-medium transition-colors')
+ * 
+ * btnClasses('bg-blue-500 text-white')
+ * // → 'px-4 py-2 rounded font-medium transition-colors bg-blue-500 text-white'
+ * 
+ * btnClasses({ 'opacity-50 cursor-not-allowed': isDisabled })
+ * // → 'px-4 py-2 rounded font-medium transition-colors opacity-50 cursor-not-allowed'
+ */
+cx.with = function () {
+  for (var _len = arguments.length, baseArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+    baseArgs[_key] = arguments[_key];
+  }
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return cx(...baseArgs, ...args);
+  };
+};
+
+exports.cx = cx;
+exports.default = cx;

package/dist/cx.d.ts

@@ -0,0 +1,41 @@
+// Type definitions for tailwind-to-style/cx
+// Conditional class name builder
+// import { cx } from 'tailwind-to-style/cx'
+
+type ClassValue = string | number | boolean | null | undefined | ClassObject | ClassArray;
+type ClassObject = Record<string, any>;
+type ClassArray = ClassValue[];
+
+/**
+ * Conditionally join class names into a single string.
+ * 
+ * Accepts strings, objects (key=className, value=condition), arrays, and nested combinations.
+ * Falsy values (null, undefined, false, 0, '') are ignored.
+ * 
+ * @example
+ * cx('bg-blue-500', 'text-white')
+ * // → 'bg-blue-500 text-white'
+ * 
+ * @example
+ * cx('p-4', isActive && 'bg-blue-500', { 'opacity-50': isDisabled })
+ * // → 'p-4 bg-blue-500' (when isActive=true, isDisabled=false)
+ * 
+ * @example
+ * cx(['p-4', 'bg-white'], isActive && ['ring-2', 'ring-blue-500'])
+ * // → 'p-4 bg-white ring-2 ring-blue-500'
+ */
+export function cx(...args: ClassValue[]): string;
+
+export namespace cx {
+  /**
+   * Create a cx function pre-filled with base classes.
+   * 
+   * @example
+   * const btnClasses = cx.with('px-4 py-2 rounded font-medium')
+   * btnClasses('bg-blue-500') // → 'px-4 py-2 rounded font-medium bg-blue-500'
+   */
+  function with_(...baseArgs: ClassValue[]): (...args: ClassValue[]) => string;
+  export { with_ as with };
+}
+
+export default cx;

package/dist/cx.esm.js

@@ -0,0 +1,111 @@
+/**
+ * tailwind-to-style v3.2.0
+ * Runtime Tailwind CSS to inline styles converter
+ * 
+ * @author Bigetion
+ * @license MIT
+ */
+/**
+ * CX - Conditional Class Name Builder
+ * 
+ * A lightweight utility for conditionally joining Tailwind class names.
+ * Similar to `clsx`/`classnames` but designed specifically for tailwind-to-style.
+ * 
+ * @module cx
+ */
+
+/**
+ * Conditionally join class names into a single string.
+ * 
+ * Accepts strings, objects (key=className, value=condition), arrays, and nested combinations.
+ * Falsy values (null, undefined, false, 0, '') are ignored.
+ * 
+ * @param {...(string|Object|Array|boolean|null|undefined)} args - Class name inputs
+ * @returns {string} Joined class names string
+ * 
+ * @example
+ * // Strings
+ * cx('bg-blue-500', 'text-white')
+ * // → 'bg-blue-500 text-white'
+ * 
+ * @example
+ * // Conditionals
+ * cx('p-4', isActive && 'bg-blue-500', isDisabled && 'opacity-50')
+ * // → 'p-4 bg-blue-500' (if isActive=true, isDisabled=false)
+ * 
+ * @example
+ * // Object syntax
+ * cx('p-4', { 'bg-blue-500': isActive, 'opacity-50': isDisabled, 'cursor-pointer': true })
+ * // → 'p-4 bg-blue-500 cursor-pointer'
+ * 
+ * @example
+ * // Arrays (nested)
+ * cx(['p-4', 'bg-white'], isActive && ['ring-2', 'ring-blue-500'])
+ * // → 'p-4 bg-white ring-2 ring-blue-500'
+ * 
+ * @example
+ * // Mixed
+ * cx(
+ *   'base-class',
+ *   condition && 'conditional-class',
+ *   { 'object-class': true, 'ignored-class': false },
+ *   ['array-class-1', 'array-class-2']
+ * )
+ */
+function cx() {
+  const classes = [];
+  for (let i = 0; i < arguments.length; i++) {
+    const arg = i < 0 || arguments.length <= i ? undefined : arguments[i];
+
+    // Skip falsy values
+    if (!arg) continue;
+    const type = typeof arg;
+    if (type === 'string') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      // Recursively process arrays
+      const inner = cx(...arg);
+      if (inner) classes.push(inner);
+    } else if (type === 'object') {
+      // Object: keys are class names, values are conditions
+      const keys = Object.keys(arg);
+      for (let j = 0; j < keys.length; j++) {
+        if (arg[keys[j]]) {
+          classes.push(keys[j]);
+        }
+      }
+    }
+  }
+  return classes.join(' ');
+}
+
+/**
+ * Create a cx function bound with base classes.
+ * Useful for component-level class composition.
+ * 
+ * @param {...(string|Object|Array)} baseArgs - Base class arguments always included
+ * @returns {Function} A cx function pre-filled with base classes
+ * 
+ * @example
+ * const btnClasses = cx.with('px-4 py-2 rounded font-medium transition-colors')
+ * 
+ * btnClasses('bg-blue-500 text-white')
+ * // → 'px-4 py-2 rounded font-medium transition-colors bg-blue-500 text-white'
+ * 
+ * btnClasses({ 'opacity-50 cursor-not-allowed': isDisabled })
+ * // → 'px-4 py-2 rounded font-medium transition-colors opacity-50 cursor-not-allowed'
+ */
+cx.with = function () {
+  for (var _len = arguments.length, baseArgs = new Array(_len), _key = 0; _key < _len; _key++) {
+    baseArgs[_key] = arguments[_key];
+  }
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return cx(...baseArgs, ...args);
+  };
+};
+
+export { cx, cx as default };
+//# sourceMappingURL=cx.esm.js.map

package/dist/cx.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.esm.js","sources":["../src/cx.js"],"sourcesContent":["/**\r\n * CX - Conditional Class Name Builder\r\n * \r\n * A lightweight utility for conditionally joining Tailwind class names.\r\n * Similar to `clsx`/`classnames` but designed specifically for tailwind-to-style.\r\n * \r\n * @module cx\r\n */\r\n\r\n/**\r\n * Conditionally join class names into a single string.\r\n * \r\n * Accepts strings, objects (key=className, value=condition), arrays, and nested combinations.\r\n * Falsy values (null, undefined, false, 0, '') are ignored.\r\n * \r\n * @param {...(string|Object|Array|boolean|null|undefined)} args - Class name inputs\r\n * @returns {string} Joined class names string\r\n * \r\n * @example\r\n * // Strings\r\n * cx('bg-blue-500', 'text-white')\r\n * // → 'bg-blue-500 text-white'\r\n * \r\n * @example\r\n * // Conditionals\r\n * cx('p-4', isActive && 'bg-blue-500', isDisabled && 'opacity-50')\r\n * // → 'p-4 bg-blue-500' (if isActive=true, isDisabled=false)\r\n * \r\n * @example\r\n * // Object syntax\r\n * cx('p-4', { 'bg-blue-500': isActive, 'opacity-50': isDisabled, 'cursor-pointer': true })\r\n * // → 'p-4 bg-blue-500 cursor-pointer'\r\n * \r\n * @example\r\n * // Arrays (nested)\r\n * cx(['p-4', 'bg-white'], isActive && ['ring-2', 'ring-blue-500'])\r\n * // → 'p-4 bg-white ring-2 ring-blue-500'\r\n * \r\n * @example\r\n * // Mixed\r\n * cx(\r\n *   'base-class',\r\n *   condition && 'conditional-class',\r\n *   { 'object-class': true, 'ignored-class': false },\r\n *   ['array-class-1', 'array-class-2']\r\n * )\r\n */\r\nexport function cx(...args) {\r\n  const classes = [];\r\n\r\n  for (let i = 0; i < args.length; i++) {\r\n    const arg = args[i];\r\n\r\n    // Skip falsy values\r\n    if (!arg) continue;\r\n\r\n    const type = typeof arg;\r\n\r\n    if (type === 'string') {\r\n      classes.push(arg);\r\n    } else if (Array.isArray(arg)) {\r\n      // Recursively process arrays\r\n      const inner = cx(...arg);\r\n      if (inner) classes.push(inner);\r\n    } else if (type === 'object') {\r\n      // Object: keys are class names, values are conditions\r\n      const keys = Object.keys(arg);\r\n      for (let j = 0; j < keys.length; j++) {\r\n        if (arg[keys[j]]) {\r\n          classes.push(keys[j]);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  return classes.join(' ');\r\n}\r\n\r\n/**\r\n * Create a cx function bound with base classes.\r\n * Useful for component-level class composition.\r\n * \r\n * @param {...(string|Object|Array)} baseArgs - Base class arguments always included\r\n * @returns {Function} A cx function pre-filled with base classes\r\n * \r\n * @example\r\n * const btnClasses = cx.with('px-4 py-2 rounded font-medium transition-colors')\r\n * \r\n * btnClasses('bg-blue-500 text-white')\r\n * // → 'px-4 py-2 rounded font-medium transition-colors bg-blue-500 text-white'\r\n * \r\n * btnClasses({ 'opacity-50 cursor-not-allowed': isDisabled })\r\n * // → 'px-4 py-2 rounded font-medium transition-colors opacity-50 cursor-not-allowed'\r\n */\r\ncx.with = function (...baseArgs) {\r\n  return function (...args) {\r\n    return cx(...baseArgs, ...args);\r\n  };\r\n};\r\n\r\nexport default cx;\r\n"],"names":["cx","classes","i","arguments","length","arg","undefined","type","push","Array","isArray","inner","keys","Object","j","join","with","_len","baseArgs","_key","_len2","args","_key2"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,EAAEA,GAAU;EAC1B,MAAMC,OAAO,GAAG,EAAE;AAElB,EAAA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,SAAA,CAAKC,MAAM,EAAEF,CAAC,EAAE,EAAE;AACpC,IAAA,MAAMG,GAAG,GAAQH,CAAC,GAAA,CAAA,IAAAC,SAAA,CAAAC,MAAA,IAADF,CAAC,GAAAI,SAAA,GAAAH,SAAA,CAADD,CAAC,CAAC;;AAEnB;IACA,IAAI,CAACG,GAAG,EAAE;IAEV,MAAME,IAAI,GAAG,OAAOF,GAAG;IAEvB,IAAIE,IAAI,KAAK,QAAQ,EAAE;AACrBN,MAAAA,OAAO,CAACO,IAAI,CAACH,GAAG,CAAC;IACnB,CAAC,MAAM,IAAII,KAAK,CAACC,OAAO,CAACL,GAAG,CAAC,EAAE;AAC7B;AACA,MAAA,MAAMM,KAAK,GAAGX,EAAE,CAAC,GAAGK,GAAG,CAAC;AACxB,MAAA,IAAIM,KAAK,EAAEV,OAAO,CAACO,IAAI,CAACG,KAAK,CAAC;AAChC,IAAA,CAAC,MAAM,IAAIJ,IAAI,KAAK,QAAQ,EAAE;AAC5B;AACA,MAAA,MAAMK,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACP,GAAG,CAAC;AAC7B,MAAA,KAAK,IAAIS,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,IAAI,CAACR,MAAM,EAAEU,CAAC,EAAE,EAAE;AACpC,QAAA,IAAIT,GAAG,CAACO,IAAI,CAACE,CAAC,CAAC,CAAC,EAAE;AAChBb,UAAAA,OAAO,CAACO,IAAI,CAACI,IAAI,CAACE,CAAC,CAAC,CAAC;AACvB,QAAA;AACF,MAAA;AACF,IAAA;AACF,EAAA;AAEA,EAAA,OAAOb,OAAO,CAACc,IAAI,CAAC,GAAG,CAAC;AAC1B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAf,EAAE,CAACgB,IAAI,GAAG,YAAuB;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAd,SAAA,CAAAC,MAAA,EAAVc,QAAQ,GAAA,IAAAT,KAAA,CAAAQ,IAAA,GAAAE,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAF,IAAA,EAAAE,IAAA,EAAA,EAAA;AAARD,IAAAA,QAAQ,CAAAC,IAAA,CAAA,GAAAhB,SAAA,CAAAgB,IAAA,CAAA;AAAA,EAAA;AAC7B,EAAA,OAAO,YAAmB;AAAA,IAAA,KAAA,IAAAC,KAAA,GAAAjB,SAAA,CAAAC,MAAA,EAANiB,IAAI,GAAA,IAAAZ,KAAA,CAAAW,KAAA,GAAAE,KAAA,GAAA,CAAA,EAAAA,KAAA,GAAAF,KAAA,EAAAE,KAAA,EAAA,EAAA;AAAJD,MAAAA,IAAI,CAAAC,KAAA,CAAA,GAAAnB,SAAA,CAAAmB,KAAA,CAAA;AAAA,IAAA;AACtB,IAAA,OAAOtB,EAAE,CAAC,GAAGkB,QAAQ,EAAE,GAAGG,IAAI,CAAC;EACjC,CAAC;AACH,CAAC;;;;"}