@tenoxui/moxie 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -1,25 +1,22 @@
-import type { Config, TenoxUIConfig, ProcessedStyle } from './types';
+import type { Config, ProcessedStyle } from './types';
 export * from './types';
-export { Config, TenoxUIConfig };
 export declare class TenoxUI {
     private property;
     private values;
     private classes;
     private aliases;
-    private breakpoints;
-    constructor({ property, values, classes, aliases, breakpoints }?: Config);
+    constructor({ property, values, classes, aliases }?: Config);
     toKebabCase(str: string): string;
     escapeCSSSelector(str: string): string;
     private getAllClassNames;
     private getTypePrefixes;
     private generateClassNameRegEx;
-    parseClassName(className: string): (string | undefined)[] | null;
-    private generateMediaQuery;
-    processValue(type: string, value?: string, unit?: string): string;
-    processShorthand(type: string | undefined, value: string | undefined, unit: string | undefined, prefix: string | undefined, secondValue?: string | undefined, secondUnit?: string | undefined): ProcessedStyle | null;
+    parse(className: string, safelist?: string[]): (string | undefined)[] | null;
+    processValue(value: string, unit: string, group: string): string;
+    processShorthand(type: string | undefined, value: string | undefined, unit: string | undefined, prefix: string | undefined, secondValue?: string | undefined, secondUnit?: string | undefined, isHyphen?: boolean): ProcessedStyle | null;
     private parseValuePattern;
     private getParentClass;
-    processCustomClass(className: string | undefined, value?: string | undefined, unit?: string | undefined, prefix?: string | undefined, secValue?: string | undefined, secUnit?: string | undefined): ProcessedStyle | null;
+    processCustomClass(className: string | undefined, value?: string | undefined, unit?: string | undefined, prefix?: string | undefined, secValue?: string | undefined, secUnit?: string | undefined, isHyphen?: boolean): ProcessedStyle | null;
     processAlias(className: string, prefix?: string): ProcessedStyle | null;
     process(classNames: string | string[]): ProcessedStyle[];
 }

package/dist/index.es.js

@@ -1,327 +1,283 @@
-class Z {
-  constructor({
-    property: e = {},
-    values: s = {},
-    classes: t = {},
-    aliases: a = {},
-    breakpoints: r = []
-  } = {}) {
-    this.property = e, this.values = s, this.classes = t, this.aliases = a, this.breakpoints = r;
+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;
+};
+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;
   }
-  toKebabCase(e) {
-    if (/^(webkit|moz|ms|o)[A-Z]/.test(e)) {
-      const s = e.match(/^(webkit|moz|ms|o)/);
-      if (s) {
-        const t = s[0];
-        return `-${t}${e.slice(t.length).replace(/[A-Z]/g, (a) => `-${a.toLowerCase()}`)}`;
+  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()}`)}`;
       }
     }
-    return e.replace(/[A-Z]/g, (s) => `-${s.toLowerCase()}`);
+    return s.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
   }
-  escapeCSSSelector(e) {
-    return e.replace(/([ #{}.:;?%&,@+*~'"!^$[\]()=>|/])/g, "\\$1");
+  escapeCSSSelector(s) {
+    return s.replace(/([ #{}.:;?%&,@+*~'"!^$[\]()=>|/])/g, "\\$1");
   }
-  getAllClassNames(e) {
-    if (!e) return [];
-    const s = /* @__PURE__ */ new Set();
-    return Object.entries(e).forEach(([t, a]) => {
-      a && typeof a == "object" && Object.keys(a).forEach((r) => {
-        s.add(r);
+  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(s);
+    }), Array.from(e);
   }
-  getTypePrefixes() {
-    const e = this.property, s = this.classes, t = Object.keys(e);
-    if (!s)
-      return t.sort((l, i) => i.length - l.length).join("|");
-    const r = [...this.getAllClassNames(s)];
-    return [...t, ...r].sort((l, i) => i.length - l.length).join("|");
+  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("|");
   }
-  generateClassNameRegEx() {
-    const e = this.getTypePrefixes();
+  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%]*))?";
     return new RegExp(
-      // you dont have to understand this, me neither
-      `(?:([a-zA-Z0-9-]+|\\[[^\\]]+\\]|\\([^()]*(?:\\([^()]*\\)[^()]*)*\\)|\\{[^{}]*(?:\\{[^{}]*\\}[^{}]*)*\\}):)?(${e}|\\[[^\\]]+\\])-(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|(?:\\[[^\\]]+\\])|(?:\\{[^{}]*(?:\\{[^{}]*\\}[^{}]*)*\\})|(?:\\([^()]*(?:\\([^()]*\\)[^()]*)*\\))|(?:\\$[^\\s]+))([a-zA-Z%]*)(?:\\/(-?(?:\\d+(?:\\.\\d+)?)|(?:[a-zA-Z0-9_]+(?:-[a-zA-Z0-9_]+)*(?:-[a-zA-Z0-9_]+)*)|(?:#[0-9a-fA-F]+)|(?:\\[[^\\]]+\\])|(?:\\{[^{}]*(?:\\{[^{}]*\\}[^{}]*)*\\})|(?:\\([^()]*(?:\\([^()]*\\)[^()]*)*\\))|(?:\\$[^\\s]+))([a-zA-Z%]*))?`
+      c + i + l + h + f + a
     );
   }
-  parseClassName(e) {
-    for (const [f, n] of Object.entries(this.classes))
-      if (n && typeof n == "object" && e in n)
-        return [void 0, e, "", "", void 0, void 0];
-    const s = this.generateClassNameRegEx(), t = e.match(s);
-    if (!t) return null;
-    const [, a, r, l, i, u, o] = t;
-    return [
-      a,
-      //? as its name. e.g. hover, md, focus
-      r,
-      //? compute css properties or variables that will styled. e.g. [color]-, [--red,background]-, bg-,
-      l || "",
-      //? parsed css value from the class name. e.g. red, space-between, 64, 100
-      i || "",
-      //? is optional if the value is numbers. e.g. px, rem, %
-      // same as value and unit, parsed after the '/' character
-      u,
-      o
-    ];
-  }
-  generateMediaQuery(e, s, t) {
-    const { name: a, min: r, max: l } = e;
-    let i = "screen and ";
-    return r !== void 0 && l !== void 0 ? i += `(min-width: ${r}px) and (max-width: ${l}px)` : r !== void 0 ? i += `(min-width: ${r}px)` : l !== void 0 && (i += `(max-width: ${l}px)`), {
-      mediaKey: `@media ${i}`,
-      ruleSet: `.${a}\\:${s} { ${t} }`
-    };
+  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];
   }
   // unique value parser
-  processValue(e, s, t) {
+  processValue(s, e, t) {
     if (!s) return "";
-    const a = (r) => r.replace(/\{([^}]+)\}/g, (l, i) => {
-      const u = typeof this.values == "object" && this.values !== null ? this.values[i] : void 0;
-      return typeof u == "string" ? u : l;
+    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[e] && typeof this.values[e] == "object" && this.values[e][s] || this.values[s]))
-      return typeof this.values[e] == "object" && this.values[e] !== null ? this.values[e][s] : this.values[s];
+    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("{") ? a(r) : r.startsWith("--") ? `var(${r})` : r;
+      return r.includes("{") ? n(r) : r.startsWith("--") ? `var(${r})` : r;
     }
-    return s + (t || "");
+    return s + (e || "");
   }
-  processShorthand(e = "", s = "", t = "", a, r = "", l = "") {
-    const i = this.property[e], u = /^(?:\(|\[)([^:]+):(.+)(?:\)|\])$/;
-    let o = null, f = s || "";
-    const n = f.match(u);
-    n && (o = n[1].trim(), f = n[2].trim());
-    let m;
-    s.includes(o + ":") ? m = s.startsWith("(") ? `(${f})` : `[${f}]` : m = s;
-    const h = this.processValue(e, m, t), $ = this.processValue(e, r, l);
-    if (e.startsWith("[") && e.endsWith("]")) {
-      const y = e.slice(1, -1).split(",").map((p) => p.trim()).map((p) => {
-        const d = this.property[p] || p;
-        return `${typeof d == "string" && d.startsWith("--") ? String(d) : this.toKebabCase(String(d))}: ${h}`;
+  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}`;
       }).join("; ");
       return {
-        className: `${`[${e.slice(1, -1)}]-${s}${t}`}`,
-        cssRules: y,
+        className: `${`[${s.slice(1, -1)}]${i ? "-" : ""}${e}${t}`}`,
+        cssRules: d,
         // return css rules directly
         value: null,
         // and set value to null to prevent value duplication
-        prefix: a
+        prefix: n
       };
     }
-    if (i) {
-      if (typeof i == "object" && "property" in i && "value" in i) {
-        const y = typeof i.property == "function" ? i.property({
-          value: t ? s : h,
-          unit: t,
-          secondValue: l ? r : $,
-          secondUnit: l,
-          key: o
-        }) : i.property, p = i.value;
-        let d;
-        typeof p == "function" ? d = p({
-          value: t ? s : h,
+    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: l ? r : $,
-          secondUnit: l,
-          key: o,
-          property: y
-        }) : p && typeof p == "string" ? d = this.parseValuePattern(e, p, h, "", $, "") ? this.parseValuePattern(e, p, h, "", $, "") : h : d = null;
-        const C = `${e}${s ? `-${s}${t}` : ""}${r ? `/${r}${l}` : ""}`;
+          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
+          });
+        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;
         return {
-          className: i.classNameSuffix ? {
-            className: C,
-            modifier: i.classNameSuffix
-          } : C,
-          cssRules: Array.isArray(y) || typeof y == "string" && y.includes(":") ? y : this.toKebabCase(String(y)),
-          value: p === null ? null : s.startsWith("[") ? h : d,
-          prefix: a
+          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
         };
       }
-      const c = typeof i == "function" ? i({
-        value: t ? s : h,
+      const g = typeof l == "function" ? l({
+        value: t ? e : u,
         unit: t,
-        secondValue: l ? r : $,
-        secondUnit: l,
-        key: o
-      }) : i;
+        secondValue: c ? r : m,
+        secondUnit: c,
+        key: f
+      }) : l;
       return {
-        className: `${e}${s ? "-" + s + t : ""}`,
-        cssRules: Array.isArray(i) ? c : typeof c == "string" && c.startsWith("value:") ? c.slice(6) : this.toKebabCase(String(c)),
-        value: typeof c == "string" && c.startsWith("value:") ? null : h,
-        prefix: a
+        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
       };
     }
     return null;
   }
-  parseValuePattern(e, s, t, a, r, l) {
-    if (!s.includes("{0}") && !s.includes("{1") && !s.includes("||"))
-      return s;
-    const [i, u] = s.split("||").map((n) => n.trim()), o = this.processValue(e, t, a), f = this.processValue(e, r, l);
-    if (s.includes("{0}") && s.includes("{1") || s.includes("{1")) {
-      let n = i;
-      if (t && (n = n.replace("{0}", o)), s.includes("{1")) {
-        const m = n.match(/{1([^}]*)}/);
-        if (s.includes("{1}"))
-          r ? n = r.startsWith("[") ? f : n.replace("{1}", f) : n = u;
-        else if (m) {
-          const h = m[0], $ = m[1].trim();
-          let c = f;
-          !c && $.includes("|") ? c = $.split("|")[1].trim() : c || (c = ""), n = t.startsWith("[") ? o : n.replace(h, c);
+  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);
         }
       }
-      return t ? n : u || i;
+      return t ? a : l || i;
     } else
-      return t ? t.startsWith("[") ? o : i.replace("{0}", o) : u || i;
+      return t ? t.startsWith("[") ? h : i.replace("{0}", h) : l || i;
   }
-  getParentClass(e) {
+  getParentClass(s) {
     return Object.keys(this.classes).filter(
-      (s) => Object.prototype.hasOwnProperty.call(
-        this.classes[s],
-        e
+      (e) => Object.prototype.hasOwnProperty.call(
+        this.classes[e],
+        s
       )
     );
   }
-  processCustomClass(e, s = "", t = "", a = "", r = "", l = "") {
-    if (!e) return null;
-    const i = this.getParentClass(e);
-    if (i.length > 0) {
-      const u = i.map((n) => {
-        const m = this.classes[n];
-        if (!m) return "";
-        const h = this.parseValuePattern(
-          e,
-          m[e] || "",
+  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,
-          l
+          c
         );
-        return `${this.toKebabCase(String(n))}: ${h}`;
-      }).filter(Boolean).join("; "), o = e.slice(-(s + t).length), f = `${e}${s ? `-${s}${t}` : ""}${r ? `/${r}${l}` : ""}`;
+        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 {
-        className: this.escapeCSSSelector(s === o ? e : f),
-        cssRules: u,
+        className: e === f ? s : a,
+        cssRules: h,
         value: null,
-        prefix: a
+        prefix: n
       };
     }
     return null;
   }
-  processAlias(e, s = "") {
-    const t = this.aliases[e];
+  processAlias(s, e = "") {
+    const t = this.aliases[s];
     if (!t) return null;
-    const a = t.split(" "), r = [];
-    return a.forEach((l) => {
-      const [i, u] = l.split(":"), o = u || i, f = u ? i : void 0, n = this.parseClassName(l), m = n || [f, o, "", ""];
-      if (!m) return;
-      const [h, $, c, y, p, d] = m, C = this.processShorthand($, c, y, void 0, p, d), S = this.processCustomClass($, c, y, h, p, d);
-      if (S) {
-        const { cssRules: A } = S;
-        r.push(A);
+    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);
         return;
       }
-      if (C) {
-        const A = C.value !== null ? `: ${C.value}` : "";
-        Array.isArray(C.cssRules) ? C.cssRules.forEach((g) => {
-          r.push(`${this.toKebabCase(g)}${A}`);
-        }) : r.push(`${C.cssRules}${A}`);
+      if ($) {
+        const C = $.value !== null ? `: ${$.value}` : "";
+        Array.isArray($.cssRules) ? $.cssRules.forEach((A) => {
+          r.push(`${this.toKebabCase(A)}${C}`);
+        }) : r.push(`${$.cssRules}${C}`);
       }
     }), {
-      className: e,
+      className: s,
       cssRules: r.join("; "),
       value: null,
-      prefix: s
+      prefix: e
     };
   }
-  process(e) {
-    const s = Array.isArray(e) ? e : e.split(/\s+/), t = [];
-    return s.forEach((a) => {
-      if (!a) return this;
-      const [r, l] = a.split(":"), i = l || r, u = l ? r : void 0, o = this.breakpoints.find((g) => g.name === u), f = this.processAlias(i, u);
-      if (f) {
-        const { className: g, cssRules: x } = f;
-        if (o) {
-          const { mediaKey: b, ruleSet: v } = this.generateMediaQuery(
-            o,
-            g,
-            x
-          );
-          t.push({
-            className: b,
-            cssRules: v,
-            value: null,
-            prefix: null
-          });
-        } else
-          t.push({
-            className: g,
-            cssRules: x,
-            value: null,
-            prefix: u
-          });
+  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,
+          value: null,
+          prefix: l
+        });
         return;
       }
-      const n = this.parseClassName(a), m = n || [u, i, "", ""];
-      if (!m) return this;
-      const [h, $, c, y, p, d] = m, C = this.getParentClass(`${$}-${c}`).length > 0 ? `${$}-${c}` : $, S = this.processCustomClass(
-        C,
-        c,
-        y,
-        h,
+      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,
-        d
+        g,
+        d,
+        y
       );
-      if (S) {
-        const { className: g, cssRules: x, prefix: b } = S;
-        if (o) {
-          const { mediaKey: v, ruleSet: R } = this.generateMediaQuery(
-            o,
-            g,
-            x
-          );
-          t.push({
-            className: v,
-            cssRules: R,
-            value: null,
-            prefix: null
-          });
-        } else
-          t.push({
-            className: g,
-            cssRules: x,
-            value: null,
-            prefix: b
-          });
+      if (x) {
+        const { className: A, cssRules: b, prefix: v } = x;
+        t.push({
+          className: A,
+          cssRules: b,
+          value: null,
+          prefix: v
+        });
         return;
       }
-      const A = this.processShorthand($, c, y, h, p, d);
-      if (A) {
-        const { className: g, cssRules: x, value: b, prefix: v } = A, R = typeof g == "string" ? this.escapeCSSSelector(g) : this.escapeCSSSelector(g.className) + g.modifier;
-        if (o) {
-          const j = Array.isArray(x) ? x.map((W) => `${this.toKebabCase(W)}: ${b}`).join("; ") : `${x}${b !== null ? `: ${b}` : ""}`, { mediaKey: P, ruleSet: V } = this.generateMediaQuery(o, R, j);
-          t.push({
-            className: P,
-            cssRules: V,
-            value: null,
-            prefix: null
-          });
-        } else
-          t.push({
-            className: R,
-            cssRules: x,
-            value: b,
-            prefix: v
-          });
+      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
+        });
       }
     }), t;
   }
 }
 export {
-  Z as TenoxUI,
-  Z as default
+  _ as TenoxUI,
+  _ as default
 };
 //# sourceMappingURL=index.es.js.map