@cronocode/react-box 3.0.3 → 3.0.5

package/core.mjs

@@ -1,81 +1,84 @@
-import { useMemo as J, useLayoutEffect as ue, useEffect as fe } from "react";
-function ce(...e) {
-  return e.reduce((t, a) => a ? typeof a == "string" ? (t.push(a), t) : Array.isArray(a) ? (t.push(...ce(...a)), t) : (Object.entries(a).forEach(([u, d]) => {
-    d && t.push(u);
+import { useMemo as Q, useLayoutEffect as ce, useEffect as le, useState as fe, useRef as me } from "react";
+function ve(...e) {
+  return e.reduce((t, r) => r ? typeof r == "string" ? (t.push(r), t) : Array.isArray(r) ? (t.push(...ve(...r)), t) : (Object.entries(r).forEach(([l, d]) => {
+    d && t.push(l);
   }), t) : t, []);
 }
 var n;
 ((e) => {
   ((t) => {
-    function a(d, s) {
+    function r(d, s) {
       return `${d}${s.replace("/", "-")}`;
     }
-    t.fraction = a;
-    function u(d) {
+    t.fraction = r;
+    function l(d) {
       return [`${d} path`, `${d} circle`, `${d} rect`, `${d} line`];
     }
-    t.svg = u;
+    t.svg = l;
   })(e.ClassName || (e.ClassName = {})), ((t) => {
-    function a(y) {
-      return `${y / 4}rem`;
+    function r(b) {
+      return `${b / 4}rem`;
     }
-    t.rem = a;
-    function u(y) {
-      return `${y}px`;
+    t.rem = r;
+    function l(b) {
+      return `${b}px`;
     }
-    t.px = u;
-    function d(y, o) {
-      const [c, f] = o.split("/");
-      return `${+c / +f * 100}%`;
+    t.px = l;
+    function d(b, i) {
+      const [m, c] = i.split("/");
+      return `${+m / +c * 100}%`;
     }
     t.fraction = d;
-    function s(y, o) {
-      switch (o) {
+    function s(b, i) {
+      switch (i) {
         case "fit":
           return "100%";
         case "fit-screen":
-          return y.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
+          return b.toLocaleLowerCase().includes("height") ? "100vh" : "100vw";
         default:
-          return o;
+          return i;
       }
     }
     t.widthHeight = s;
-    function l(y) {
-      return (o, c) => `var(--${y}${c});`;
+    function f(b) {
+      return (i, m) => `var(--${b}${m});`;
     }
-    t.variables = l;
-    function i(y) {
-      return (o, c) => `var(--${y}${c});`;
+    t.variables = f;
+    function a(b) {
+      return (i, m) => `var(--${b}${m});`;
     }
-    t.svgVariables = i;
-    function m(y, o) {
-      return `repeat(${o},minmax(0,1fr))`;
+    t.svgVariables = a;
+    function u(b, i) {
+      return `repeat(${i},minmax(0,1fr))`;
     }
-    t.gridColumns = m;
-    function b(y, o) {
-      return o === "full-row" ? "1/-1" : `span ${o}/span ${o}`;
+    t.gridColumns = u;
+    function y(b, i) {
+      return i === "full-row" ? "1/-1" : `span ${i}/span ${i}`;
     }
-    t.gridColumn = b;
-    function r(y, o) {
-      return `${o}ms`;
+    t.gridColumn = y;
+    function o(b, i) {
+      return `${i}ms`;
     }
-    t.ms = r;
-    function v(y, o) {
-      return `${o}deg`;
+    t.ms = o;
+    function v(b, i) {
+      return `${i}deg`;
     }
     t.rotate = v;
-    function h(y, o) {
-      return o === "xAxis" ? "-1 1" : "1 -1";
+    function g(b, i) {
+      return i === "xAxis" ? "-1 1" : "1 -1";
     }
-    t.flip = h;
+    t.flip = g;
   })(e.Value || (e.Value = {}));
 })(n || (n = {}));
 var W;
 ((e) => {
   e.colors = {
-    inherit: "inherit",
-    current: "currentColor",
+    currentColor: "currentColor",
     transparent: "transparent",
+    green: "green",
+    red: "red",
+    blue: "blue",
+    gray: "gray",
     black: "#000",
     white: "#fff",
     "slate-50": "#f8fafc",
@@ -266,6 +269,7 @@ var W;
     "indigo-900": "#312e81",
     "indigo-950": "#1e1b4b",
     "violet-50": "#f5f3ff",
+    "violet-XX": "#9747FF",
     "violet-100": "#ede9fe",
     "violet-200": "#ddd6fe",
     "violet-300": "#c4b5fd",
@@ -276,6 +280,7 @@ var W;
     "violet-800": "#5b21b6",
     "violet-900": "#4c1d95",
     "violet-950": "#2e1065",
+    vi: "#7949FF",
     "purple-50": "#faf5ff",
     "purple-100": "#f3e8ff",
     "purple-200": "#e9d5ff",
@@ -321,22 +326,28 @@ var W;
     "rose-900": "#881337",
     "rose-950": "#4c0519"
   };
-  const t = {};
-  let a = {};
-  function u(l) {
-    return l in a ? t[l] = a[l] : l in e.colors && (t[l] = e.colors[l]), `var(--${l})`;
+  const t = {
+    inherit: "inherit",
+    none: "none",
+    "bg-img-checked": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><path fill='none' stroke='#FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>")}")`,
+    "bg-img-indeterminate": `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><line stroke='${e.colors["violet-400"]}' x1='4' y1='10' x2='16' y2='10' stroke-width='1' /></svg>`)}")`,
+    "bg-img-radio": `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='100%' viewBox='0 0 20 20'><circle fill='#FFF' cx='10' cy='10' r='5'/></svg>")}")`
+  }, r = {};
+  let l = {};
+  function d(a) {
+    return a in l ? r[a] = l[a] : a in t ? r[a] = t[a] : a in e.colors ? r[a] = e.colors[a] : r[a] = a, `var(--${a})`;
   }
-  e.getVariableValue = u;
-  function d() {
-    return Object.entries(t).map(([l, i]) => `--${l}: ${i};`).join("");
+  e.getVariableValue = d;
+  function s() {
+    return Object.entries(r).map(([a, u]) => `--${a}: ${u};`).join("");
   }
-  e.generateVariables = d;
-  function s(l) {
-    a = l;
+  e.generateVariables = s;
+  function f(a) {
+    l = a;
   }
-  e.setUserVariables = s;
+  e.setUserVariables = f;
 })(W || (W = {}));
-const E = W, j = {
+const z = W, E = {
   /** The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme. */
   appearance: [
     {
@@ -781,8 +792,8 @@ const E = W, j = {
         "11/12"
       ],
       valueFormat: (e) => {
-        const [t, a] = e.split("/");
-        return `${+t / +a * 100}%`;
+        const [t, r] = e.split("/");
+        return `${+t / +r * 100}%`;
       }
     },
     {
@@ -833,8 +844,8 @@ const E = W, j = {
         "11/12"
       ],
       valueFormat: (e) => {
-        const [t, a] = e.split("/");
-        return `${+t / +a * 100}%`;
+        const [t, r] = e.split("/");
+        return `${+t / +r * 100}%`;
       }
     },
     {
@@ -886,8 +897,8 @@ const E = W, j = {
         "11/12"
       ],
       valueFormat: (e) => {
-        const [t, a] = e.split("/");
-        return `${+t / +a * 100}%`;
+        const [t, r] = e.split("/");
+        return `${+t / +r * 100}%`;
       }
     },
     {
@@ -936,8 +947,8 @@ const E = W, j = {
         "11/12"
       ],
       valueFormat: (e) => {
-        const [t, a] = e.split("/");
-        return `${+t / +a * 100}%`;
+        const [t, r] = e.split("/");
+        return `${+t / +r * 100}%`;
       }
     },
     {
@@ -988,8 +999,8 @@ const E = W, j = {
         "11/12"
       ],
       valueFormat: (e) => {
-        const [t, a] = e.split("/");
-        return `${+t / +a * 100}%`;
+        const [t, r] = e.split("/");
+        return `${+t / +r * 100}%`;
       }
     },
     {
@@ -1041,8 +1052,8 @@ const E = W, j = {
         "11/12"
       ],
       valueFormat: (e) => {
-        const [t, a] = e.split("/");
-        return `${+t / +a * 100}%`;
+        const [t, r] = e.split("/");
+        return `${+t / +r * 100}%`;
       }
     },
     {
@@ -1459,32 +1470,39 @@ const E = W, j = {
   ],
   color: [
     {
-      values: Object.keys(E.colors),
+      values: Object.keys(z.colors),
       valueFormat: (e, t) => t(e)
     }
   ],
   bgColor: [
     {
-      values: Object.keys(E.colors),
+      values: Object.keys(z.colors),
       valueFormat: (e, t) => t(e),
       styleName: "background-color"
     }
   ],
   borderColor: [
     {
-      values: Object.keys(E.colors),
+      values: Object.keys(z.colors),
       valueFormat: (e, t) => t(e),
       styleName: "border-color"
     }
   ],
   outlineColor: [
     {
-      values: Object.keys(E.colors),
+      values: Object.keys(z.colors),
       valueFormat: (e, t) => t(e),
       styleName: "outline-color"
     }
+  ],
+  bgImage: [
+    {
+      values: ["none", "bg-img-checked", "bg-img-indeterminate", "bg-img-radio"],
+      valueFormat: (e, t) => t(e),
+      styleName: "background-image"
+    }
   ]
-}, le = {
+}, se = {
   hover: ":hover",
   focus: ":focus-within",
   hasFocus: ":has(:focus)",
@@ -1497,63 +1515,63 @@ const E = W, j = {
   hasChecked: ":has(:checked)",
   hasRequired: ":has(:required)",
   hasDisabled: ":has([disabled])"
-}, D = {
+}, L = {
   indeterminate: ":indeterminate",
   checked: ":checked",
   required: ":required",
   disabled: "[disabled]"
-}, Q = { ...le, ...D }, se = Object.entries(Q).reduce(
-  (e, [t], a) => (e[t] = Math.pow(2, a), e),
+}, Z = { ...se, ...L }, ie = Object.entries(Z).reduce(
+  (e, [t], r) => (e[t] = Math.pow(2, r), e),
   {}
-), K = Object.entries(Q).reduce(
+), D = Object.entries(Z).reduce(
   (e, [t]) => {
-    const a = se[t];
-    return Object.entries(e).forEach(([u, d]) => {
-      e[+u + a] = [...d, t];
+    const r = ie[t];
+    return Object.entries(e).forEach(([l, d]) => {
+      e[+l + r] = [...d, t];
     }), e;
   },
   { 0: [] }
-), L = {
+), K = {
   hoverGroup: "hover",
   focusGroup: "focus",
   activeGroup: "active",
   disabledGroup: "disabled"
-}, G = {
+}, H = {
   sm: 640,
   md: 768,
   lg: 1024,
   xl: 1280,
   xxl: 1536
 };
-var k;
+var q;
 ((e) => {
-  function t(s, l, i) {
-    const m = { ...s }, b = m.props || {};
-    return l.forEach((r) => {
-      r in m && (b[r] = m[r], delete m[r]);
-    }), i && Object.entries(i).forEach(([r, v]) => {
-      b[r] = v;
-    }), m.props = b, m;
+  function t(s, f, a) {
+    const u = { ...s }, y = u.props || {};
+    return f.forEach((o) => {
+      o in u && (y[o] = u[o], delete u[o]);
+    }), a && Object.entries(a).forEach(([o, v]) => {
+      y[o] = v;
+    }), u.props = y, u;
   }
   e.buildProps = t;
-  function a(s) {
+  function r(s) {
     return !!s && typeof s == "object";
   }
-  e.isObject = a;
-  function u(...s) {
-    return s.reduce((l, i) => (Object.keys(i).forEach((m) => {
-      const b = l[m], r = i[m];
-      m in D && typeof r == "boolean" || (m in D && Array.isArray(r) ? l[m] = u(b, r[1] ?? {}) : Array.isArray(b) && Array.isArray(r) ? l[m] = b.concat(...r) : a(b) && a(r) ? l[m] = u(b, r) : l[m] = r);
-    }), l), {});
+  e.isObject = r;
+  function l(...s) {
+    return s.reduce((f, a) => (Object.keys(a ?? {}).forEach((u) => {
+      const y = f[u], o = a[u];
+      u in L && typeof o == "boolean" || (u in L && Array.isArray(o) ? f[u] = l(y, o[1] ?? {}) : Array.isArray(y) && Array.isArray(o) ? f[u] = y.concat(...o) : r(y) && r(o) ? f[u] = l(y, o) : f[u] = o);
+    }), f), {});
   }
-  e.mergeDeep = u;
-  function d(s, l) {
-    return s in l;
+  e.mergeDeep = l;
+  function d(s, f) {
+    return s in f;
   }
   e.isKeyOf = d;
-})(k || (k = {}));
-const $ = k;
-class de {
+})(q || (q = {}));
+const $ = q;
+class be {
   constructor() {
     this._index = 0, this._cache = {};
   }
@@ -1561,134 +1579,131 @@ class de {
     return this._cache[t] || (this._cache[t] = this.getByIndex(this._index++)), this._cache[t];
   }
   getByIndex(t) {
-    const { first: a, next: u } = me, d = t - a.length;
+    const { first: r, next: l } = ye, d = t - r.length;
     if (d < 0)
-      return a[t];
-    const s = Math.floor(d / u.length), l = d - s * u.length;
-    return this.getByIndex(s) + u[l];
+      return r[t];
+    const s = Math.floor(d / l.length), f = d - s * l.length;
+    return this.getByIndex(s) + l[f];
   }
 }
-const me = {
+const ye = {
   first: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
   next: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
 };
-var H;
+var R;
 ((e) => {
   e.components = {};
-})(H || (H = {}));
-function ve(e) {
-  const { clean: t, theme: a, component: u } = e;
-  return J(() => {
-    var l;
+})(R || (R = {}));
+function ge(e) {
+  const { clean: t, theme: r, component: l } = e;
+  return Q(() => {
+    var f;
     if (t) return;
-    const d = u == null ? void 0 : u.split(".");
+    const d = l == null ? void 0 : l.split(".");
     if (!d) return;
-    const s = d.reduce((i, m, b) => {
-      var r, v;
-      return b === 0 ? (r = H.components) == null ? void 0 : r[m] : (v = i == null ? void 0 : i.children) == null ? void 0 : v[m];
+    const s = d.reduce((a, u, y) => {
+      var o, v;
+      return y === 0 ? (o = R.components) == null ? void 0 : o[u] : (v = a == null ? void 0 : a.children) == null ? void 0 : v[u];
     }, void 0);
     if (s)
-      return a ? $.mergeDeep(s.styles, ((l = s.themes) == null ? void 0 : l[a]) ?? {}) : s.styles;
-  }, [u, t, a]);
+      return r ? $.mergeDeep(s.styles, ((f = s.themes) == null ? void 0 : f[r]) ?? {}) : s.styles;
+  }, [l, t, r]);
 }
-const ye = new de(), be = typeof window < "u" && typeof window.document < "u";
-var re;
-const oe = typeof process == "object" && ((re = process.env) == null ? void 0 : re.NODE_ENV) === "test", he = be && !oe ? ue : fe, ne = "_b", S = "_s";
-function ge(e, t) {
-  he(A.flush, [e]);
-  const a = ve(e);
-  return J(() => {
-    var s;
-    const u = [t ? S : ne];
-    (s = e.props) == null || s.name;
-    const d = a ? $.mergeDeep(a, e) : e;
-    return A.addClassNames(d, u, []), u;
-  }, [e, t, a]);
+const he = new be(), pe = typeof window < "u" && typeof window.document < "u";
+var oe;
+const ne = typeof process == "object" && ((oe = process.env) == null ? void 0 : oe.NODE_ENV) === "test", we = pe && !ne ? ce : le, ue = "_b", S = "_s";
+function Ne(e, t) {
+  we(A.flush, [e]);
+  const r = ge(e);
+  return Q(() => {
+    const l = [t ? S : ue], d = r ? $.mergeDeep(r, e) : e;
+    return A.addClassNames(d, l, []), l;
+  }, [e, t, r]);
 }
 var A;
 ((e) => {
-  let t = !0, a = {};
-  function u(r, v, h, y, o) {
-    Object.entries(r).forEach(([c, f]) => {
-      if ($.isKeyOf(c, j))
-        l(c, f, v, h, y, o);
-      else if ($.isKeyOf(c, le))
-        u(f, v, [...h, c], y, o);
-      else if ($.isKeyOf(c, D)) {
-        if (Array.isArray(f)) {
-          const [x, N] = f;
-          u(N, v, [...h, c], y, o);
+  let t = !0, r = {};
+  function l(o, v, g, b, i) {
+    Object.entries(o).forEach(([m, c]) => {
+      if ($.isKeyOf(m, E))
+        f(m, c, v, g, b, i);
+      else if ($.isKeyOf(m, se))
+        l(c, v, [...g, m], b, i);
+      else if ($.isKeyOf(m, L)) {
+        if (Array.isArray(c)) {
+          const [w, x] = c;
+          l(x, v, [...g, m], b, i);
         }
-        $.isObject(f) && u(f, v, [...h, c], y, o);
-      } else $.isKeyOf(c, G) ? u(f, v, h, c, o) : $.isKeyOf(c, L) && (typeof f == "string" ? v.push(`${L[c]}-${f}`) : Object.entries(f).forEach(([x, N]) => {
-        u(N, v, [...h, L[c]], y, x);
+        $.isObject(c) && l(c, v, [...g, m], b, i);
+      } else $.isKeyOf(m, H) ? l(c, v, g, m, i) : $.isKeyOf(m, K) && (typeof c == "string" ? v.push(`${K[m]}-${c}`) : Object.entries(c).forEach(([w, x]) => {
+        l(x, v, [...g, K[m]], b, w);
       }));
     });
   }
-  e.addClassNames = u;
+  e.addClassNames = l;
   function d() {
     if (!t) return;
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: flush");
-    const r = Object.entries(j).reduce((c, [f], x) => (c[f] = x, c), {}), v = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
+    const o = Object.entries(E).reduce((m, [c], w) => (m[c] = w, m), {}), v = `:root{--borderColor: black;--outlineColor: black;--lineHeight: 1.2;--fontSize: 14px;--transitionTime: 0.25s;--svgTransitionTime: 0.3s;}#crono-box {position: absolute;top: 0;left: 0;height: 0;}
 html{font-size: 16px;font-family: Arial, sans-serif;}
 body{margin: 0;line-height: var(--lineHeight);font-size: var(--fontSize);}
 a,ul{all: unset;}
-.${ne}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
+.${ue}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;background-color: initial;transition: all var(--transitionTime);box-sizing: border-box;font-family: inherit;font-size: inherit;}
 .${S}{display: block;border: 0 solid var(--borderColor);outline: 0px solid var(--outlineColor);margin: 0;padding: 0;transition: all var(--svgTransitionTime);}.${S} path,.${S} circle,.${S} rect,.${S} line {transition: all var(--svgTransitionTime);}
-`, h = Object.entries(a);
-    h.sort(
-      ([c], [f]) => (G[c] ?? 0) - (G[f] ?? 0)
+`, g = Object.entries(r);
+    g.sort(
+      ([m], [c]) => (H[m] ?? 0) - (H[c] ?? 0)
     );
-    const y = h.reduce(
-      (c, [f, x]) => (f !== "normal" && c.push(`@media(min-width: ${G[f]}px){`), Object.entries(x).forEach(([N, U]) => {
-        const { __parents: Z, ...ie } = U, P = Object.entries(ie);
-        P.sort(([w], [T]) => r[w] - r[T]), P.forEach(([w, T]) => {
-          T.forEach((V) => {
-            var B, R;
-            const p = j[w].find((F) => Array.isArray(F.values) ? F.values.includes(V) : typeof V == typeof F.values);
-            if (!p) return;
-            const z = i(w, V, +N, f), q = K[+N].map((F) => Q[F]).join(""), g = ((B = p.selector) == null ? void 0 : B.call(p, `.${z}`, q)) ?? `.${z}${q}`, I = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? w], _ = ((R = p.valueFormat) == null ? void 0 : R.call(p, V, E.getVariableValue)) ?? V;
-            c.push(`${g}{${I.map((F) => `${F}:${_}`).join(";")}}`);
+    const b = g.reduce(
+      (m, [c, w]) => (c !== "normal" && m.push(`@media(min-width: ${H[c]}px){`), Object.entries(w).forEach(([x, U]) => {
+        const { __parents: P, ...de } = U, ee = Object.entries(de);
+        ee.sort(([N], [_]) => o[N] - o[_]), ee.forEach(([N, _]) => {
+          _.forEach((C) => {
+            var B, k;
+            const h = E[N].find((F) => Array.isArray(F.values) ? F.values.includes(C) : typeof C == typeof F.values);
+            if (!h) return;
+            const V = a(N, C, +x, c), G = D[+x].map((F) => Z[F]).join(""), p = ((B = h.selector) == null ? void 0 : B.call(h, `.${V}`, G)) ?? `.${V}${G}`, I = Array.isArray(h.styleName) ? h.styleName : [h.styleName ?? N], O = ((k = h.valueFormat) == null ? void 0 : k.call(h, C, z.getVariableValue)) ?? C;
+            m.push(`${p}{${I.map((F) => `${F}:${O}`).join(";")}}`);
           });
-        }), Z && Object.entries(Z).forEach(([w, T]) => {
-          const V = Object.entries(T);
-          V.sort(([O], [p]) => r[O] - r[p]), V.forEach(([O, p]) => {
-            p.forEach((z) => {
-              var ee, te;
-              const g = j[O].find((C) => Array.isArray(C.values) ? C.values.includes(z) : typeof z == typeof C.values);
-              if (!g) return;
-              const I = i(O, z, +N, f, w), [_] = K[+N], B = ((ee = g.selector) == null ? void 0 : ee.call(g, `.${_}-${w}:${_} .${I}`, "")) ?? `.${_}-${w}:${_} .${I}`, R = Array.isArray(g.styleName) ? g.styleName : [g.styleName ?? O], F = ((te = g.valueFormat) == null ? void 0 : te.call(g, z, E.getVariableValue)) ?? z;
-              c.push(`${B}{${R.map((C) => `${C}:${F}`).join(";")}}`);
+        }), P && Object.entries(P).forEach(([N, _]) => {
+          const C = Object.entries(_);
+          C.sort(([j], [h]) => o[j] - o[h]), C.forEach(([j, h]) => {
+            h.forEach((V) => {
+              var te, re;
+              const p = E[j].find((T) => Array.isArray(T.values) ? T.values.includes(V) : typeof V == typeof T.values);
+              if (!p) return;
+              const I = a(j, V, +x, c, N), [O] = D[+x], B = ((te = p.selector) == null ? void 0 : te.call(p, `.${O}-${N}:${O} .${I}`, "")) ?? `.${O}-${N}:${O} .${I}`, k = Array.isArray(p.styleName) ? p.styleName : [p.styleName ?? j], F = ((re = p.valueFormat) == null ? void 0 : re.call(p, V, z.getVariableValue)) ?? V;
+              m.push(`${B}{${k.map((T) => `${T}:${F}`).join(";")}}`);
             });
           });
         });
-      }), f !== "normal" && c.push("}"), c),
+      }), c !== "normal" && m.push("}"), m),
       [v]
     );
-    y.unshift(`:root{${E.generateVariables()}}`);
-    const o = b();
-    o.innerHTML = y.join(""), t = !1;
+    b.unshift(`:root{${z.generateVariables()}}`);
+    const i = y();
+    i.innerHTML = b.join(""), t = !1;
   }
   e.flush = d;
   function s() {
-    a = {};
+    r = {};
   }
   e.clear = s;
-  function l(r, v, h, y, o = "normal", c) {
+  function f(o, v, g, b, i = "normal", m) {
     if (v == null) return;
-    const f = y.reduce((N, U) => N + se[U], 0);
-    a[o] ? a[o][f] ? a[o][f][r] || (a[o][f][r] = /* @__PURE__ */ new Set()) : a[o][f] = { [r]: /* @__PURE__ */ new Set() } : a[o] = { [f]: { [r]: /* @__PURE__ */ new Set() } }, c ? (a[o][f].__parents ? a[o][f].__parents[c] ? a[o][f].__parents[c][r] || (a[o][f].__parents[c][r] = /* @__PURE__ */ new Set()) : a[o][f].__parents[c] = { [r]: /* @__PURE__ */ new Set() } : a[o][f].__parents = { [c]: { [r]: /* @__PURE__ */ new Set() } }, a[o][f].__parents[c][r].has(v) || (a[o][f].__parents[c][r].add(v), t = !0)) : a[o][f][r].has(v) || (a[o][f][r].add(v), t = !0);
-    const x = i(r, v, f, o, c);
-    h.push(x);
+    const c = b.reduce((x, U) => x + ie[U], 0);
+    r[i] ? r[i][c] ? r[i][c][o] || (r[i][c][o] = /* @__PURE__ */ new Set()) : r[i][c] = { [o]: /* @__PURE__ */ new Set() } : r[i] = { [c]: { [o]: /* @__PURE__ */ new Set() } }, m ? (r[i][c].__parents ? r[i][c].__parents[m] ? r[i][c].__parents[m][o] || (r[i][c].__parents[m][o] = /* @__PURE__ */ new Set()) : r[i][c].__parents[m] = { [o]: /* @__PURE__ */ new Set() } : r[i][c].__parents = { [m]: { [o]: /* @__PURE__ */ new Set() } }, r[i][c].__parents[m][o].has(v) || (r[i][c].__parents[m][o].add(v), t = !0)) : r[i][c][o].has(v) || (r[i][c][o].add(v), t = !0);
+    const w = a(o, v, c, i, m);
+    g.push(w);
   }
-  function i(r, v, h, y, o) {
-    const c = K[h], f = `${y === "normal" ? "" : `${y}-`}${c.map((x) => `${x}-`).join("")}${o ? `${o}-` : ""}${r}-${v}`;
-    return oe ? f : ye.getIdentity(f);
+  function a(o, v, g, b, i) {
+    const m = D[g], c = `${b === "normal" ? "" : `${b}-`}${m.map((w) => `${w}-`).join("")}${i ? `${i}-` : ""}${o}-${v}`;
+    return ne ? c : he.getIdentity(c);
   }
-  const m = "crono-styles";
-  function b() {
-    let r = document.getElementById(m);
-    return r || (r = document.createElement("style"), r.setAttribute("id", m), r.setAttribute("type", "text/css"), document.head.insertBefore(r, document.head.firstChild)), r;
+  const u = "crono-styles";
+  function y() {
+    let o = document.getElementById(u);
+    return o || (o = document.createElement("style"), o.setAttribute("id", u), o.setAttribute("type", "text/css"), document.head.insertBefore(o, document.head.firstChild)), o;
   }
 })(A || (A = {}));
 var ae;
@@ -1697,143 +1712,321 @@ var ae;
 })(ae || (ae = {}));
 var M;
 ((e) => {
-  function t(a, u, d) {
-    return E.setUserVariables(a), Object.entries(u).forEach(([s, l]) => {
-      j[s] = l;
-    }), Object.entries(d).forEach(([s, l]) => {
-      const i = j[s];
-      j[s] = i ? [...l, ...i] : l;
-    }), { extendedProps: u, extendedPropTypes: d };
+  function t(r, l, d) {
+    return z.setUserVariables(r), Object.entries(l).forEach(([s, f]) => {
+      E[s] = f;
+    }), Object.entries(d).forEach(([s, f]) => {
+      const a = E[s];
+      E[s] = a ? [...f, ...a] : f;
+    }), { extendedProps: l, extendedPropTypes: d };
   }
   e.extend = t;
 })(M || (M = {}));
-const xe = M;
+const Fe = M;
 var X;
 ((e) => {
   const t = {
     button: {
       styles: {
-        display: "inline-block",
+        display: "inline-flex",
+        color: "white",
+        bgColor: "violet-500",
+        borderColor: "violet-500",
         p: 3,
         cursor: "pointer",
         b: 1,
         borderRadius: 1,
         userSelect: "none",
+        hover: {
+          bgColor: "violet-600",
+          borderColor: "violet-600"
+        },
         disabled: {
-          cursor: "default"
+          cursor: "not-allowed",
+          bgColor: "violet-50",
+          color: "gray-400",
+          borderColor: "gray-300"
         }
       }
     },
-    checkbox: {
+    textbox: {
       styles: {
-        display: "inline-block"
+        display: "inline-block",
+        b: 1,
+        borderColor: "violet-200",
+        bgColor: "violet-50",
+        color: "violet-950",
+        borderRadius: 1,
+        p: 3,
+        transition: "none",
+        hover: {
+          borderColor: "violet-300"
+        },
+        focus: {
+          outline: 1,
+          borderColor: "violet-500",
+          outlineColor: "violet-500"
+        },
+        disabled: {
+          cursor: "not-allowed",
+          bgColor: "violet-50",
+          color: "gray-400",
+          borderColor: "gray-300"
+        }
       }
     },
-    radioButton: {
+    textarea: {
       styles: {
         display: "inline-block",
         b: 1,
-        p: 2
+        borderColor: "violet-200",
+        bgColor: "violet-50",
+        color: "violet-950",
+        borderRadius: 1,
+        p: 3,
+        transition: "none",
+        hover: {
+          borderColor: "violet-300"
+        },
+        focus: {
+          outline: 1,
+          borderColor: "violet-500",
+          outlineColor: "violet-500"
+        },
+        disabled: {
+          cursor: "not-allowed",
+          bgColor: "violet-50",
+          color: "gray-400",
+          borderColor: "gray-300",
+          resize: "none"
+        }
       }
     },
-    textbox: {
+    checkbox: {
       styles: {
         display: "inline-block",
+        appearance: "none",
         b: 1,
+        borderColor: "violet-300",
         borderRadius: 1,
-        p: 3
+        p: 2,
+        cursor: "pointer",
+        transition: "none",
+        hover: {
+          borderColor: "violet-500"
+        },
+        focus: {
+          outline: 2,
+          outlineOffset: 2,
+          outlineColor: "violet-500"
+        },
+        checked: {
+          bgColor: "violet-500",
+          borderColor: "violet-500",
+          bgImage: "bg-img-checked"
+        },
+        indeterminate: {
+          color: "violet-500",
+          bgImage: "bg-img-indeterminate"
+        },
+        disabled: {
+          cursor: "not-allowed",
+          bgColor: "violet-100",
+          color: "gray-400",
+          borderColor: "gray-300"
+        }
       }
     },
-    textarea: {
+    radioButton: {
       styles: {
-        display: "inline-block",
+        appearance: "none",
+        b: 1,
+        borderColor: "violet-300",
+        borderRadius: 3,
+        p: 2,
+        cursor: "pointer",
+        transition: "none",
+        hover: {
+          borderColor: "violet-500"
+        },
+        focus: {
+          outline: 2,
+          outlineOffset: 2,
+          outlineColor: "violet-500"
+        },
+        checked: {
+          bgColor: "violet-500",
+          borderColor: "violet-500",
+          bgImage: "bg-img-radio"
+        },
+        disabled: {
+          cursor: "not-allowed",
+          bgColor: "violet-100",
+          color: "gray-400",
+          borderColor: "violet-200"
+        }
+      }
+    },
+    dropdown: {
+      styles: {
+        display: "inline-flex",
+        ai: "center",
+        gap: 2,
+        jc: "space-between",
+        p: 3,
+        cursor: "pointer",
+        bgColor: "violet-50",
+        color: "violet-950",
         b: 1,
-        borderRadius: 1
+        borderColor: "violet-200",
+        borderRadius: 1,
+        userSelect: "none",
+        lineHeight: 20,
+        minWidth: 40,
+        transition: "none",
+        hover: {
+          borderColor: "violet-300"
+        },
+        focus: {
+          outline: 1,
+          borderColor: "violet-500",
+          outlineColor: "violet-500"
+        },
+        disabled: {
+          cursor: "not-allowed",
+          bgColor: "violet-50",
+          color: "gray-400",
+          borderColor: "gray-300"
+        }
+      },
+      children: {
+        items: {
+          styles: {
+            p: 1,
+            b: 1,
+            borderRadius: 1,
+            position: "relative",
+            top: 1,
+            bgColor: "white",
+            overflow: "auto",
+            maxHeight: 62,
+            borderColor: "violet-300",
+            color: "violet-950"
+          }
+        },
+        item: {
+          styles: {
+            display: "flex",
+            width: "fit",
+            p: 3,
+            cursor: "pointer",
+            lineHeight: 20,
+            borderRadius: 1,
+            hover: {
+              bgColor: "violet-50"
+            },
+            focus: {
+              bgColor: "violet-50"
+            }
+          }
+        }
       }
     }
-    // dropdown: {
-    //   styles: {
-    //     width: 'min-content',
-    //     b: 1,
-    //     borderRadius: 1,
-    //     p: 3,
-    //     cursor: 'pointer',
-    //   },
-    //   children: {
-    //     items: {
-    //       styles: {
-    //         b: 1,
-    //       },
-    //     },
-    //   },
-    // },
   };
-  function a(u) {
-    const { components: d, ...s } = u, l = d ?? {};
-    Object.entries(s).forEach(([i, m]) => {
-      l[i] = m;
-    }), H.components = $.mergeDeep(t, l);
+  function r(l) {
+    const { components: d, ...s } = l, f = d ?? {};
+    Object.entries(s).forEach(([a, u]) => {
+      f[a] = u;
+    }), R.components = $.mergeDeep(t, f);
   }
-  e.setup = a;
+  e.setup = r, R.components = { ...t };
 })(X || (X = {}));
-const Ne = X;
+const $e = X;
 var Y;
 ((e) => {
-  function t(u) {
-    const d = Array.from(u.elements).reduce(
-      (s, l) => {
-        const i = l.name;
-        return i && (s[i] || (s[i] = []), s[i].push(l)), s;
+  function t(r, l, d) {
+    r !== void 0 && r != null && (d[l] = Array.isArray(r) ? r[0] : r);
+  }
+  e.assignBooleanProp = t;
+})(Y || (Y = {}));
+const Ce = Y;
+function Ve() {
+  return Q(() => {
+    const e = "crono-box";
+    let t = document.getElementById(e);
+    return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
+  }, []);
+}
+function ze(e = null) {
+  const [t, r] = fe(!1), l = me(null);
+  return le(() => {
+    function d(a) {
+      const u = e ?? l.current;
+      (u == null ? void 0 : u.contains(a.target)) === !1 && r(!1);
+    }
+    function s() {
+      r(!1);
+    }
+    function f(a) {
+      a.key === "Escape" && r(!1);
+    }
+    return t && (window.addEventListener("mousedown", d), window.addEventListener("resize", s), window.addEventListener("keydown", f)), () => {
+      window.removeEventListener("mousedown", d), window.removeEventListener("resize", s), window.removeEventListener("keydown", f);
+    };
+  }, [e, t]), [t, r, l];
+}
+var J;
+((e) => {
+  function t(l) {
+    const d = Array.from(l.elements).reduce(
+      (s, f) => {
+        const a = f.name;
+        return a && (s[a] || (s[a] = []), s[a].push(f)), s;
       },
       {}
     );
-    return Object.entries(d).reduce((s, [l, i]) => {
-      if (i.length === 1) {
-        const m = i[0];
-        a(s, l, m.type === "checkbox" || m.type === "radio" ? m.checked : m.value);
+    return Object.entries(d).reduce((s, [f, a]) => {
+      if (a.length === 1) {
+        const u = a[0];
+        r(s, f, u.type === "checkbox" || u.type === "radio" ? u.checked : u.value);
       } else {
-        const m = i.reduce((b, r) => (r.type === "checkbox" || r.type === "radio" ? r.checked && b.push(r.value) : b.push(r.value), b), []);
-        a(s, l, m);
+        const u = a.reduce((y, o) => (o.type === "checkbox" || o.type === "radio" ? o.checked && y.push(o.value) : y.push(o.value), y), []);
+        r(s, f, u);
       }
       return s;
     }, {});
   }
   e.getFormEntries = t;
-  function a(u, d, s) {
+  function r(l, d, s) {
     if (d.includes(".")) {
-      const l = d.split(".");
-      let i = u;
-      l.forEach((m, b) => {
-        if (l.length > b + 1) {
-          const r = m.match(/^(.+)\[(\d)\]$/);
-          if (r) {
-            const [, v, h] = r;
-            i[v] = i[v] || [], i[v][h] = i[v][h] || {}, i = i[v][h];
+      const f = d.split(".");
+      let a = l;
+      f.forEach((u, y) => {
+        if (f.length > y + 1) {
+          const o = u.match(/^(.+)\[(\d)\]$/);
+          if (o) {
+            const [, v, g] = o;
+            a[v] = a[v] || [], a[v][g] = a[v][g] || {}, a = a[v][g];
           } else
-            i[m] = i[m] || {}, i = i[m];
+            a[u] = a[u] || {}, a = a[u];
         } else
-          i[m] = s;
+          a[u] = s;
       });
     } else
-      u[d] = s;
+      l[d] = s;
   }
-})(Y || (Y = {}));
-const we = Y;
-function Fe() {
-  return J(() => {
-    const e = "crono-box";
-    let t = document.getElementById(e);
-    return t || (t = document.createElement("div"), t.id = e, document.body.appendChild(t)), t;
-  }, []);
-}
+})(J || (J = {}));
+const Ee = J;
 export {
-  xe as B,
-  we as F,
+  Fe as B,
+  Ee as F,
   $ as O,
   ae as S,
-  Ne as T,
-  E as V,
-  Fe as a,
-  ce as c,
-  ge as u
+  $e as T,
+  z as V,
+  Ce as a,
+  ze as b,
+  ve as c,
+  Ve as d,
+  Ne as u
 };