@tenoxui/moxie 0.3.0 → 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 = (P, s, e) => s in P ? j(P, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : P[s] = e, W = (P, s) => {
-  for (var e in s || (s = {}))
-    z.call(s, e) && V(P, e, s[e]);
-  if (R)
-    for (var e of R(s))
-      S.call(s, e) && V(P, e, s[e]);
-  return P;
+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\\/]+))", f = "([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 + f + a
+      prefixPattern + typePattern + separator + valuePattern + unitPattern + secondaryPattern
     );
   }
-  parse(s, e) {
-    if (Object.values(this.classes).some((p) => p == null ? void 0 : p[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, f] = n, a = i === "dummy" ? "" : i.replace("-dummy", "");
-    return [r, c, a, l || "", h, f];
+  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 f = null, a = e || "";
-    const p = a.match(h);
-    p && (f = p[1].trim(), a = p[2].trim());
-    let o;
-    e.includes(f + ":") ? o = e.startsWith("(") ? `(${a})` : `[${a}]` : o = e;
-    const u = this.processValue(o, t, s), m = this.processValue(r, c, s);
-    if (s.startsWith("[") && s.endsWith("]")) {
-      const d = s.slice(1, -1).split(",").map((y) => y.trim()).map((y) => {
-        const $ = this.property[y] || y;
-        return `${typeof $ == "string" && $.startsWith("--") ? String($) : this.toKebabCase(String($))}: ${u}`;
+  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: d,
+        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 d = typeof l.property == "function" ? l.property({
-          value: t ? e : u,
-          unit: t,
-          secondValue: c ? r : m,
-          secondUnit: c,
-          key: f
-        }) : l.property, y = l.value;
-        let $;
-        if (typeof y == "function")
-          $ = y({
-            value: t ? e : u,
-            unit: t,
-            secondValue: c ? r : m,
-            secondUnit: c,
-            key: f,
-            property: d
+    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 (y && typeof y == "string") {
-          const C = l.group || s, A = this.processValue(o, t, C);
-          console.log(o), $ = this.values[o] || this.values[C][o] || o.includes("{") || y.includes("{") ? this.parseValuePattern(C, y, A, "", m, "") : u;
-        } else $ = 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(d) || typeof d == "string" && d.includes(":") ? d : this.toKebabCase(String(d)),
-          value: y === null ? null : e.startsWith("[") ? u : $,
-          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 g = typeof l == "function" ? l({
-        value: t ? e : u,
-        unit: t,
-        secondValue: c ? r : m,
-        secondUnit: c,
-        key: f
-      }) : 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) ? g : typeof g == "string" && g.startsWith("value:") ? g.slice(6) : this.toKebabCase(String(g)),
-        value: typeof g == "string" && g.startsWith("value:") ? null : u,
-        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), f = 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 p = a.match(/{1([^}]*)}/);
-        if (e.includes("{1}"))
-          r ? a = r.startsWith("[") ? f : a.replace("{1}", f) : a = l;
-        else if (p) {
-          const o = p[0], u = p[1].trim();
-          let m = f;
-          !m && u.includes("|") ? m = u.split("|")[1].trim() : m || (m = ""), a = t.startsWith("[") ? h : a.replace(o, m);
+  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((p) => {
-        const o = this.classes[p];
-        if (!o) return "";
-        const u = this.parseValuePattern(
-          s,
-          o[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(p))}: ${u}`;
-      }).filter(Boolean).join("; "), f = 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 === f ? 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, f = l ? i : void 0, a = this.parse(c), p = a || [f, h, "", ""];
-      if (!p) return;
-      const [o, u, m, g, d, y] = p, $ = this.processShorthand(u, m, g, void 0, d, y), x = this.processCustomClass(u, m, g, o, d, y);
-      if (x) {
-        const { cssRules: C } = x;
-        r.push(C);
+  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 ($) {
-        const C = $.value !== null ? `: ${$.value}` : "";
-        Array.isArray($.cssRules) ? $.cssRules.forEach((A) => {
-          r.push(`${this.toKebabCase(A)}${C}`);
-        }) : r.push(`${$.cssRules}${C}`);
+      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: A, cssRules: b } = h;
-        t.push({
-          className: A,
-          cssRules: b,
+  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 f = this.parse(n), a = f || [l, i, "", ""];
-      if (!a) return this;
-      const [p, o, u, m, g, d] = a, y = !n.includes((o || "") + (u || "")), $ = this.getParentClass(`${o}${y ? "-" : ""}${u}`).length > 0 ? `${o}${y ? "-" : ""}${u}` : o, x = this.processCustomClass(
-        $,
-        u,
-        m,
-        p,
-        g,
-        d,
-        y
+      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 (x) {
-        const { className: A, cssRules: b, prefix: v } = x;
-        t.push({
-          className: A,
-          cssRules: b,
+      if (shouldClasses) {
+        const { className: className2, cssRules, prefix: prefix2 } = shouldClasses;
+        results.push({
+          className: className2,
+          cssRules,
           value: null,
-          prefix: v
+          prefix: prefix2
         });
         return;
       }
-      const C = this.processShorthand(o, u, m, p, g, d, y);
-      if (C) {
-        const { className: A, cssRules: b, value: v, prefix: Z } = C;
-        t.push({
-          className: A,
-          cssRules: b,
-          value: v,
-          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