@tenoxui/moxie 0.3.1 → 0.3.2

package/dist/index.es.js

@@ -1,283 +1,372 @@
-var j = Object.defineProperty;
-var R = Object.getOwnPropertySymbols;
-var z = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
-var V = (v, s, e) => s in v ? j(v, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : v[s] = e, W = (v, s) => {
-  for (var e in s || (s = {}))
-    z.call(s, e) && V(v, e, s[e]);
-  if (R)
-    for (var e of R(s))
-      S.call(s, e) && V(v, e, s[e]);
-  return v;
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
 };
-class _ {
-  constructor({ property: s = {}, values: e = {}, classes: t = {}, aliases: n = {} } = {}) {
-    this.property = W({
-      moxie: ({ key: r }) => r
-    }, s), this.values = e, this.classes = t, this.aliases = n;
+class TenoxUI {
+  constructor({ property = {}, values = {}, classes = {}, aliases = {} } = {}) {
+    this.property = __spreadValues({
+      moxie: ({ key }) => key
+    }, property);
+    this.values = values;
+    this.classes = classes;
+    this.aliases = aliases;
   }
-  toKebabCase(s) {
-    if (/^(webkit|moz|ms|o)[A-Z]/.test(s)) {
-      const e = s.match(/^(webkit|moz|ms|o)/);
-      if (e) {
-        const t = e[0];
-        return `-${t}${s.slice(t.length).replace(/[A-Z]/g, (n) => `-${n.toLowerCase()}`)}`;
+  toKebabCase(str) {
+    if (/^(webkit|moz|ms|o)[A-Z]/.test(str)) {
+      const match = str.match(/^(webkit|moz|ms|o)/);
+      if (match) {
+        const prefix = match[0];
+        return `-${prefix}${str.slice(prefix.length).replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`;
       }
     }
-    return s.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
   }
-  escapeCSSSelector(s) {
-    return s.replace(/([ #{}.:;?%&,@+*~'"!^$[\]()=>|/])/g, "\\$1");
+  escapeCSSSelector(str) {
+    return str.replace(/([ #{}.:;?%&,@+*~'"!^$[\]()=>|/])/g, "\\$1");
   }
-  getAllClassNames(s) {
-    if (!s) return [];
-    const e = /* @__PURE__ */ new Set();
-    return Object.entries(s).forEach(([t, n]) => {
-      n && typeof n == "object" && Object.keys(n).forEach((r) => {
-        e.add(r);
-      });
-    }), Array.from(e);
+  getAllClassNames(classRegistry) {
+    if (!classRegistry) return [];
+    const classNames = /* @__PURE__ */ new Set();
+    Object.entries(classRegistry).forEach(([property, classObj]) => {
+      if (classObj && typeof classObj === "object") {
+        Object.keys(classObj).forEach((className) => {
+          classNames.add(className);
+        });
+      }
+    });
+    return Array.from(classNames);
   }
-  getTypePrefixes(s = []) {
-    const e = this.property, t = this.classes, n = Object.keys(e);
-    if (!t)
-      return [...n, ...s].sort((i, l) => l.length - i.length).join("|");
-    const c = [...this.getAllClassNames(t)];
-    return [...n, ...c, ...s].sort((i, l) => l.length - i.length).join("|");
+  getTypePrefixes(safelist = []) {
+    const styleAttribute = this.property;
+    const classRegistry = this.classes;
+    const propertyTypes = Object.keys(styleAttribute);
+    if (!classRegistry) {
+      return [...propertyTypes, ...safelist].sort((a, b) => b.length - a.length).join("|");
+    }
+    const classConfigs = this.getAllClassNames(classRegistry);
+    const classPatterns = [...classConfigs];
+    return [...propertyTypes, ...classPatterns, ...safelist].sort((a, b) => b.length - a.length).join("|");
   }
-  generateClassNameRegEx(s) {
-    const e = this.getTypePrefixes(s), t = "\\[[^\\]]+\\]", n = "\\([^()]*(?:\\([^()]*\\)[^()]*)*\\)", r = "\\{[^{}]*(?:\\{[^{}]*\\}[^{}]*)*\\}", c = "(?:([a-zA-Z0-9_-]+|[a-zA-Z0-9_-]+(?:-" + t + ")|" + // Direct bracket, parenthesis, or brace content
-    t + "|" + n + "|" + r + "):)?", i = `(${e}|\\[[^\\]]+\\])`, l = "(?:-)?", h = "(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|" + // Hex colors
-    t + "|" + // Bracket content
-    r + "|" + // Curly brace content
-    n + "|(?:\\$[^\\s\\/]+))", p = "([a-zA-Z%]*)", a = "(?:\\/(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|" + t + "|" + r + "|" + n + "|(?:\\$[^\\s\\/]+))([a-zA-Z%]*))?";
+  generateClassNameRegEx(safelist) {
+    const typePrefixes = this.getTypePrefixes(safelist);
+    const nestedBracketPattern = "\\[[^\\]]+\\]";
+    const nestedParenPattern = "\\([^()]*(?:\\([^()]*\\)[^()]*)*\\)";
+    const nestedBracePattern = "\\{[^{}]*(?:\\{[^{}]*\\}[^{}]*)*\\}";
+    const prefixPattern = "(?:([a-zA-Z0-9_-]+|[a-zA-Z0-9_-]+(?:-" + nestedBracketPattern + ")|" + // Direct bracket, parenthesis, or brace content
+    nestedBracketPattern + "|" + nestedParenPattern + "|" + nestedBracePattern + "):)?";
+    const typePattern = `(${typePrefixes}|\\[[^\\]]+\\])`;
+    const separator = "(?:-)?";
+    const valuePattern = "(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|" + // Hex colors
+    nestedBracketPattern + "|" + // Bracket content
+    nestedBracePattern + "|" + // Curly brace content
+    nestedParenPattern + "|(?:\\$[^\\s\\/]+))";
+    const unitPattern = "([a-zA-Z%]*)";
+    const secondaryPattern = "(?:\\/(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|" + nestedBracketPattern + "|" + nestedBracePattern + "|" + nestedParenPattern + "|(?:\\$[^\\s\\/]+))([a-zA-Z%]*))?";
     return new RegExp(
-      c + i + l + h + p + a
+      prefixPattern + typePattern + separator + valuePattern + unitPattern + secondaryPattern
     );
   }
-  parse(s, e) {
-    if (Object.values(this.classes).some((f) => f == null ? void 0 : f[s]))
-      return [void 0, s, "", "", void 0, void 0];
-    const t = this.generateClassNameRegEx(e), n = (s + "-dummy").match(t);
-    if (!n) return null;
-    const [, r, c, i, l, h, p] = n, a = i === "dummy" ? "" : i.replace("-dummy", "");
-    return [r, c, a, l || "", h, p];
+  parse(className, safelist) {
+    if (Object.values(this.classes).some((classObj) => classObj == null ? void 0 : classObj[className])) {
+      return [void 0, className, "", "", void 0, void 0];
+    }
+    const classNameRegEx = this.generateClassNameRegEx(safelist);
+    const match = (className + "-dummy").match(classNameRegEx);
+    if (!match) return null;
+    const [, prefix, type, value, unit, secValue, secUnit] = match;
+    const finalValue = value === "dummy" ? "" : value.replace("-dummy", "");
+    return [prefix, type, finalValue, unit || "", secValue, secUnit];
   }
   // unique value parser
-  processValue(s, e, t) {
-    if (!s) return "";
-    const n = (r) => r.replace(/\{([^}]+)\}/g, (c, i) => {
-      const l = this.values, h = l !== null ? typeof l[t] == "object" ? l[t][i] : l[i] : void 0;
-      return typeof h == "string" ? h : c;
-    });
-    if (typeof this.values == "object" && this.values !== null && (this.values[t] && typeof this.values[t] == "object" && this.values[t][s] || this.values[s]))
-      return typeof this.values[t] == "object" && this.values[t] !== null ? this.values[t][s] : this.values[s];
-    if (s.startsWith("$"))
-      return `var(--${s.slice(1)})`;
-    if (s.startsWith("[") && s.endsWith("]") || s.startsWith("(") && s.endsWith(")")) {
-      const r = s.slice(1, -1).replace(/_/g, " ");
-      return r.includes("{") ? n(r) : r.startsWith("--") ? `var(${r})` : r;
+  processValue(value, unit, group) {
+    if (!value) return "";
+    const replaceWithValueRegistry = (text) => {
+      return text.replace(/\{([^}]+)\}/g, (match, key) => {
+        const valueRegistry = this.values;
+        const val = valueRegistry !== null ? typeof valueRegistry[group] === "object" ? valueRegistry[group][key] : valueRegistry[key] : void 0;
+        return typeof val === "string" ? val : match;
+      });
+    };
+    if (typeof this.values === "object" && this.values !== null && (this.values[group] && typeof this.values[group] === "object" && this.values[group][value] || this.values[value])) {
+      if (typeof this.values[group] === "object" && this.values[group] !== null) {
+        return this.values[group][value];
+      }
+      return this.values[value];
+    } else if (value.startsWith("$")) {
+      return `var(--${value.slice(1)})`;
+    } else if (value.startsWith("[") && value.endsWith("]") || value.startsWith("(") && value.endsWith(")")) {
+      const cleanValue = value.slice(1, -1).replace(/_/g, " ");
+      if (cleanValue.includes("{")) {
+        return replaceWithValueRegistry(cleanValue);
+      }
+      return cleanValue.startsWith("--") ? `var(${cleanValue})` : cleanValue;
     }
-    return s + (e || "");
+    return value + (unit || "");
   }
-  processShorthand(s = "", e = "", t = "", n, r = "", c = "", i = !0) {
-    const l = this.property[s], h = /^(?:\(|\[)([^:]+):(.+)(?:\)|\])$/;
-    let p = null, a = e || "";
-    const f = a.match(h);
-    f && (p = f[1].trim(), a = f[2].trim());
-    let y;
-    e.includes(p + ":") ? y = e.startsWith("(") ? `(${a})` : `[${a}]` : y = e;
-    const o = this.processValue(y, t, s), $ = this.processValue(r, c, s);
-    if (s.startsWith("[") && s.endsWith("]")) {
-      const C = s.slice(1, -1).split(",").map((m) => m.trim()).map((m) => {
-        const u = this.property[m] || m;
-        return `${typeof u == "string" && u.startsWith("--") ? String(u) : this.toKebabCase(String(u))}: ${o}`;
+  processShorthand(type = "", value = "", unit = "", prefix, secondValue = "", secondUnit = "", isHyphen = true) {
+    const properties = this.property[type];
+    const pattern = /^(?:\(|\[)([^:]+):(.+)(?:\)|\])$/;
+    let extractedFor = null;
+    let cleanValue = value || "";
+    const matchValue = cleanValue.match(pattern);
+    if (matchValue) {
+      extractedFor = matchValue[1].trim();
+      cleanValue = matchValue[2].trim();
+    }
+    let finalCleanValue;
+    if (value.includes(extractedFor + ":")) {
+      finalCleanValue = value.startsWith("(") ? `(${cleanValue})` : `[${cleanValue}]`;
+    } else finalCleanValue = value;
+    const finalValue = this.processValue(finalCleanValue, unit, type);
+    const finalSecValue = this.processValue(secondValue, secondUnit, type);
+    if (type.startsWith("[") && type.endsWith("]")) {
+      const items = type.slice(1, -1).split(",").map((item) => item.trim());
+      const cssRules = items.map((item) => {
+        const prop = this.property[item] || item;
+        const finalProperty = typeof prop === "string" && prop.startsWith("--") ? String(prop) : this.toKebabCase(String(prop));
+        return `${finalProperty}: ${finalValue}`;
       }).join("; ");
       return {
-        className: `${`[${s.slice(1, -1)}]${i ? "-" : ""}${e}${t}`}`,
-        cssRules: C,
+        className: `${`[${type.slice(1, -1)}]${isHyphen ? "-" : ""}${value}${unit}`}`,
+        cssRules,
         // return css rules directly
         value: null,
         // and set value to null to prevent value duplication
-        prefix: n
+        prefix
       };
     }
-    if (l) {
-      if (typeof l == "object" && "property" in l && "value" in l) {
-        const C = l.group || s, m = this.values[C][o] ? this.values[C][o] : t ? e : o, u = typeof l.property == "function" ? l.property({
-          value: m,
-          unit: t,
-          secondValue: c ? r : $,
-          secondUnit: c,
-          key: p
-        }) : l.property, g = l.value;
-        let A;
-        if (typeof g == "function")
-          A = g({
-            value: m,
-            unit: t,
-            secondValue: c ? r : $,
-            secondUnit: c,
-            key: p,
-            property: u
+    if (properties) {
+      if (typeof properties === "object" && "property" in properties && "value" in properties) {
+        const groupValue = properties.group && this.values[properties.group] ? this.values[properties.group][finalValue] : unit ? value : finalValue;
+        const property = typeof properties.property === "function" ? properties.property({
+          value: groupValue,
+          unit,
+          secondValue: secondUnit ? secondValue : finalSecValue,
+          secondUnit,
+          key: extractedFor
+        }) : properties.property;
+        const template = properties.value;
+        let processedValue;
+        if (typeof template === "function") {
+          processedValue = template({
+            value: groupValue,
+            unit,
+            secondValue: secondUnit ? secondValue : finalSecValue,
+            secondUnit,
+            key: extractedFor,
+            property
           });
-        else if (g && typeof g == "string") {
-          const x = this.processValue(y, t, C);
-          A = this.values[y] || this.values[C][y] || y.includes("{") || g.includes("{") ? this.parseValuePattern(C, g, x, "", $, "") : o;
-        } else A = null;
+        } else if (template && typeof template === "string") {
+          const valuesGroup = properties.group || type;
+          const newValue = this.processValue(finalCleanValue, unit, valuesGroup);
+          processedValue = this.values[finalCleanValue] || this.values[valuesGroup][finalCleanValue] || finalCleanValue.includes("{") || template.includes("{") ? this.parseValuePattern(valuesGroup, template, newValue, "", finalSecValue, "") : finalValue;
+        } else processedValue = null;
+        const className = `${type}${value ? `${isHyphen ? isHyphen ? "-" : "" : ""}${value}${unit}` : ""}${secondValue ? `/${secondValue}${secondUnit}` : ""}`;
         return {
-          className: `${s}${e ? `${i && i ? "-" : ""}${e}${t}` : ""}${r ? `/${r}${c}` : ""}`,
-          cssRules: Array.isArray(u) || typeof u == "string" && u.includes(":") ? u : this.toKebabCase(String(u)),
-          value: g === null ? null : e.startsWith("[") ? o : A,
-          prefix: n
+          className,
+          cssRules: Array.isArray(property) ? property : typeof property === "string" && property.includes(":") ? property : this.toKebabCase(String(property)),
+          value: template === null ? null : value.startsWith("[") ? finalValue : processedValue,
+          prefix
         };
       }
-      const d = typeof l == "function" ? l({
-        value: t ? e : o,
-        unit: t,
-        secondValue: c ? r : $,
-        secondUnit: c,
-        key: p
-      }) : l;
+      const finalRegProperty = typeof properties === "function" ? properties({
+        value: unit ? value : finalValue,
+        unit,
+        secondValue: secondUnit ? secondValue : finalSecValue,
+        secondUnit,
+        key: extractedFor
+      }) : properties;
       return {
-        className: `${s}${e ? (i ? "-" : "") + e + t : ""}`,
-        cssRules: Array.isArray(l) ? d : typeof d == "string" && d.startsWith("value:") ? d.slice(6) : this.toKebabCase(String(d)),
-        value: typeof d == "string" && d.startsWith("value:") ? null : o,
-        prefix: n
+        className: `${type}${value ? (isHyphen ? "-" : "") + value + unit : ""}`,
+        cssRules: Array.isArray(properties) ? finalRegProperty : typeof finalRegProperty === "string" && finalRegProperty.startsWith("value:") ? finalRegProperty.slice(6) : this.toKebabCase(String(finalRegProperty)),
+        value: typeof finalRegProperty === "string" && finalRegProperty.startsWith("value:") ? null : finalValue,
+        prefix
       };
     }
     return null;
   }
-  parseValuePattern(s, e, t, n, r, c) {
-    if (!e.includes("{0}") && !e.includes("{1") && !e.includes("||"))
-      return e;
-    const [i, l] = e.split("||").map((a) => a.trim()), h = this.processValue(t, n, s), p = this.processValue(r, c, s);
-    if (e.includes("{0}") && e.includes("{1") || e.includes("{1")) {
-      let a = i;
-      if (t && (a = a.replace("{0}", h)), e.includes("{1")) {
-        const f = a.match(/{1([^}]*)}/);
-        if (e.includes("{1}"))
-          r ? a = r.startsWith("[") ? p : a.replace("{1}", p) : a = l;
-        else if (f) {
-          const y = f[0], o = f[1].trim();
-          let $ = p;
-          !$ && o.includes("|") ? $ = o.split("|")[1].trim() : $ || ($ = ""), a = t.startsWith("[") ? h : a.replace(y, $);
+  parseValuePattern(group, pattern, inputValue, inputUnit, inputSecValue, inputSecUnit) {
+    if (!pattern.includes("{0}") && !pattern.includes("{1") && !pattern.includes("||"))
+      return pattern;
+    const [value, defaultValue] = pattern.split("||").map((s) => s.trim());
+    const finalValue = this.processValue(inputValue, inputUnit, group);
+    const finalSecValue = this.processValue(inputSecValue, inputSecUnit, group);
+    if (pattern.includes("{0}") && pattern.includes("{1") || pattern.includes("{1")) {
+      let computedValue = value;
+      if (inputValue) {
+        computedValue = computedValue.replace("{0}", finalValue);
+      }
+      if (pattern.includes("{1")) {
+        const match = computedValue.match(/{1([^}]*)}/);
+        if (pattern.includes("{1}")) {
+          if (inputSecValue) {
+            computedValue = inputSecValue.startsWith("[") ? finalSecValue : computedValue.replace("{1}", finalSecValue);
+          } else {
+            computedValue = defaultValue;
+          }
+        } else if (match) {
+          const fullMatch = match[0];
+          const innerContent = match[1].trim();
+          let replacementValue = finalSecValue;
+          if (!replacementValue && innerContent.includes("|")) {
+            replacementValue = innerContent.split("|")[1].trim();
+          } else if (!replacementValue) {
+            replacementValue = "";
+          }
+          computedValue = inputValue.startsWith("[") ? finalValue : computedValue.replace(fullMatch, replacementValue);
         }
       }
-      return t ? a : l || i;
-    } else
-      return t ? t.startsWith("[") ? h : i.replace("{0}", h) : l || i;
+      return inputValue ? computedValue : defaultValue || value;
+    } else {
+      return inputValue ? inputValue.startsWith("[") ? finalValue : value.replace("{0}", finalValue) : defaultValue || value;
+    }
   }
-  getParentClass(s) {
+  getParentClass(className) {
     return Object.keys(this.classes).filter(
-      (e) => Object.prototype.hasOwnProperty.call(
-        this.classes[e],
-        s
+      (cssProperty) => Object.prototype.hasOwnProperty.call(
+        this.classes[cssProperty],
+        className
       )
     );
   }
-  processCustomClass(s, e = "", t = "", n = "", r = "", c = "", i = !0) {
-    if (!s) return null;
-    const l = this.getParentClass(s);
-    if (l.length > 0) {
-      const h = l.map((f) => {
-        const y = this.classes[f];
-        if (!y) return "";
-        const o = this.parseValuePattern(
-          s,
-          y[s] || "",
-          e,
-          t,
-          r,
-          c
+  processCustomClass(className, value = "", unit = "", prefix = "", secValue = "", secUnit = "", isHyphen = true) {
+    if (!className) return null;
+    const properties = this.getParentClass(className);
+    if (properties.length > 0) {
+      const rules = properties.map((prop) => {
+        const classObj = this.classes[prop];
+        if (!classObj) return "";
+        const processedValue = this.parseValuePattern(
+          className,
+          classObj[className] || "",
+          value,
+          unit,
+          secValue,
+          secUnit
         );
-        return `${this.toKebabCase(String(f))}: ${o}`;
-      }).filter(Boolean).join("; "), p = s.slice(-(e + t).length), a = `${s}${e ? `${i ? "-" : ""}${e}${t}` : ""}${r ? `/${r}${c}` : ""}`;
+        return `${this.toKebabCase(String(prop))}: ${processedValue}`;
+      }).filter(Boolean).join("; ");
+      const isValueType = className.slice(-(value + unit).length);
+      const finalClassName = `${className}${value ? `${isHyphen ? "-" : ""}${value}${unit}` : ""}${secValue ? `/${secValue}${secUnit}` : ""}`;
       return {
-        className: e === p ? s : a,
-        cssRules: h,
+        className: value === isValueType ? className : finalClassName,
+        cssRules: rules,
         value: null,
-        prefix: n
+        prefix
       };
     }
     return null;
   }
-  processAlias(s, e = "") {
-    const t = this.aliases[s];
-    if (!t) return null;
-    const n = t.split(" "), r = [];
-    return n.forEach((c) => {
-      const [i, l] = c.split(":"), h = l || i, p = l ? i : void 0, a = this.parse(c), f = a || [p, h, "", ""];
-      if (!f) return;
-      const [y, o, $, d, C, m] = f, u = this.processShorthand(o, $, d, void 0, C, m), g = this.processCustomClass(o, $, d, y, C, m);
-      if (g) {
-        const { cssRules: A } = g;
-        r.push(A);
+  processAlias(className, prefix = "") {
+    const alias = this.aliases[className];
+    if (!alias) return null;
+    const aliasClasses = alias.split(" ");
+    const combinedRules = [];
+    aliasClasses.forEach((aliasClass) => {
+      const [rprefix, rtype] = aliasClass.split(":");
+      const getType = rtype || rprefix;
+      const getPrefix = rtype ? rprefix : void 0;
+      const parts = this.parse(aliasClass);
+      const parsed = parts ? parts : [getPrefix, getType, "", ""];
+      if (!parsed) return;
+      const [prefix2, type, value, unit, secValue, secUnit] = parsed;
+      const result = this.processShorthand(type, value, unit, void 0, secValue, secUnit);
+      const shouldClasses = this.processCustomClass(type, value, unit, prefix2, secValue, secUnit);
+      if (shouldClasses) {
+        const { cssRules } = shouldClasses;
+        combinedRules.push(cssRules);
         return;
       }
-      if (u) {
-        const A = u.value !== null ? `: ${u.value}` : "";
-        Array.isArray(u.cssRules) ? u.cssRules.forEach((P) => {
-          r.push(`${this.toKebabCase(P)}${A}`);
-        }) : r.push(`${u.cssRules}${A}`);
+      if (result) {
+        const value2 = result.value !== null ? `: ${result.value}` : "";
+        if (Array.isArray(result.cssRules)) {
+          result.cssRules.forEach((rule) => {
+            combinedRules.push(`${this.toKebabCase(rule)}${value2}`);
+          });
+        } else {
+          combinedRules.push(`${result.cssRules}${value2}`);
+        }
       }
-    }), {
-      className: s,
-      cssRules: r.join("; "),
+    });
+    return {
+      className,
+      cssRules: combinedRules.join("; "),
       value: null,
-      prefix: e
+      prefix
     };
   }
-  process(s) {
-    const e = Array.isArray(s) ? s : s.split(/\s+/), t = [];
-    return e.forEach((n) => {
-      if (!n) return this;
-      const [r, c] = n.split(":"), i = c || r, l = c ? r : void 0, h = this.processAlias(i, l);
-      if (h) {
-        const { className: P, cssRules: x } = h;
-        t.push({
-          className: P,
-          cssRules: x,
+  process(classNames) {
+    const classList = Array.isArray(classNames) ? classNames : classNames.split(/\s+/);
+    const results = [];
+    classList.forEach((className) => {
+      if (!className) return this;
+      const [rprefix, rtype] = className.split(":");
+      const getType = rtype || rprefix;
+      const getPrefix = rtype ? rprefix : void 0;
+      const aliasResult = this.processAlias(getType, getPrefix);
+      if (aliasResult) {
+        const { className: aliasClassName, cssRules } = aliasResult;
+        results.push({
+          className: aliasClassName,
+          cssRules,
           value: null,
-          prefix: l
+          prefix: getPrefix
         });
         return;
       }
-      const p = this.parse(n), a = p || [l, i, "", ""];
-      if (!a) return this;
-      const [f, y, o, $, d, C] = a, m = !n.includes((y || "") + (o || "")), u = this.getParentClass(`${y}${m ? "-" : ""}${o}`).length > 0 ? `${y}${m ? "-" : ""}${o}` : y, g = this.processCustomClass(
-        u,
-        o,
-        $,
-        f,
-        d,
-        C,
-        m
+      const parts = this.parse(className);
+      const parsed = parts ? parts : [getPrefix, getType, "", ""];
+      if (!parsed) return this;
+      const [prefix, type, value, unit, secValue, secUnit] = parsed;
+      const isHyphen = !className.includes((type || "") + (value || ""));
+      const classFromClasses = this.getParentClass(`${type}${isHyphen ? "-" : ""}${value}`).length > 0 ? `${type}${isHyphen ? "-" : ""}${value}` : type;
+      const shouldClasses = this.processCustomClass(
+        classFromClasses,
+        value,
+        unit,
+        prefix,
+        secValue,
+        secUnit,
+        isHyphen
       );
-      if (g) {
-        const { className: P, cssRules: x, prefix: b } = g;
-        t.push({
-          className: P,
-          cssRules: x,
+      if (shouldClasses) {
+        const { className: className2, cssRules, prefix: prefix2 } = shouldClasses;
+        results.push({
+          className: className2,
+          cssRules,
           value: null,
-          prefix: b
+          prefix: prefix2
         });
         return;
       }
-      const A = this.processShorthand(y, o, $, f, d, C, m);
-      if (A) {
-        const { className: P, cssRules: x, value: b, prefix: Z } = A;
-        t.push({
-          className: P,
-          cssRules: x,
-          value: b,
-          prefix: Z
+      const result = this.processShorthand(type, value, unit, prefix, secValue, secUnit, isHyphen);
+      if (result) {
+        const { className: className2, cssRules, value: ruleValue, prefix: rulePrefix } = result;
+        results.push({
+          className: className2,
+          cssRules,
+          value: ruleValue,
+          prefix: rulePrefix
         });
       }
-    }), t;
+    });
+    return results;
   }
 }
 export {
-  _ as TenoxUI,
-  _ as default
+  TenoxUI,
+  TenoxUI as default
 };
 //# sourceMappingURL=index.es.js.map