@stackloop/ui 2.3.1 → 2.4.0

package/dist/index.js

@@ -161,31 +161,31 @@ const kr = (e, t) => {
     const l = [];
     let n = 0, c = 0, i = 0, m;
     const x = s.length;
-    for (let w = 0; w < x; w++) {
-      const M = s[w];
+    for (let v = 0; v < x; v++) {
+      const M = s[v];
       if (n === 0 && c === 0) {
         if (M === Ae) {
-          l.push(s.slice(i, w)), i = w + 1;
+          l.push(s.slice(i, v)), i = v + 1;
           continue;
         }
         if (M === "/") {
-          m = w;
+          m = v;
           continue;
         }
       }
       M === "[" ? n++ : M === "]" ? n-- : M === "(" ? c++ : M === ")" && c--;
     }
     const y = l.length === 0 ? s : s.slice(i);
-    let h = y, N = !1;
-    y.endsWith(ye) ? (h = y.slice(0, -1), N = !0) : (
+    let h = y, k = !1;
+    y.endsWith(ye) ? (h = y.slice(0, -1), k = !0) : (
       /**
        * In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
        * @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
        */
-      y.startsWith(ye) && (h = y.slice(1), N = !0)
+      y.startsWith(ye) && (h = y.slice(1), k = !0)
     );
-    const k = m && m > i ? m - i : void 0;
-    return Ie(l, N, h, k);
+    const w = m && m > i ? m - i : void 0;
+    return Ie(l, k, h, w);
   };
   if (t) {
     const s = t + Ae, l = o;
@@ -229,27 +229,27 @@ const kr = (e, t) => {
     const x = c[m], {
       isExternal: y,
       modifiers: h,
-      hasImportantModifier: N,
-      baseClassName: k,
-      maybePostfixModifierPosition: w
+      hasImportantModifier: k,
+      baseClassName: w,
+      maybePostfixModifierPosition: v
     } = a(x);
     if (y) {
       i = x + (i.length > 0 ? " " + i : i);
       continue;
     }
-    let M = !!w, j = o(M ? k.substring(0, w) : k);
+    let M = !!v, j = o(M ? w.substring(0, v) : w);
     if (!j) {
       if (!M) {
         i = x + (i.length > 0 ? " " + i : i);
         continue;
       }
-      if (j = o(k), !j) {
+      if (j = o(w), !j) {
         i = x + (i.length > 0 ? " " + i : i);
         continue;
       }
       M = !1;
     }
-    const L = h.length === 0 ? "" : h.length === 1 ? h[0] : l(h).join(":"), T = N ? L + ye : L, F = T + j;
+    const L = h.length === 0 ? "" : h.length === 1 ? h[0] : l(h).join(":"), T = k ? L + ye : L, F = T + j;
     if (n.indexOf(F) > -1)
       continue;
     n.push(F);
@@ -301,7 +301,7 @@ const kr = (e, t) => {
   const o = Ye.exec(e);
   return o ? o[1] ? t(o[1]) : a : !1;
 }, qe = (e) => e === "position" || e === "percentage", Je = (e) => e === "image" || e === "url", Qe = (e) => e === "length" || e === "size" || e === "bg-size", Ke = (e) => e === "length", it = (e) => e === "number", lt = (e) => e === "family-name", Xe = (e) => e === "shadow", ct = () => {
-  const e = R("color"), t = R("font"), a = R("text"), o = R("font-weight"), s = R("tracking"), l = R("leading"), n = R("breakpoint"), c = R("container"), i = R("spacing"), m = R("radius"), x = R("shadow"), y = R("inset-shadow"), h = R("text-shadow"), N = R("drop-shadow"), k = R("blur"), w = R("perspective"), M = R("aspect"), j = R("ease"), L = R("animate"), T = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], F = () => [
+  const e = R("color"), t = R("font"), a = R("text"), o = R("font-weight"), s = R("tracking"), l = R("leading"), n = R("breakpoint"), c = R("container"), i = R("spacing"), m = R("radius"), x = R("shadow"), y = R("inset-shadow"), h = R("text-shadow"), k = R("drop-shadow"), w = R("blur"), v = R("perspective"), M = R("aspect"), j = R("ease"), L = R("animate"), T = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], F = () => [
     "center",
     "top",
     "bottom",
@@ -321,7 +321,7 @@ const kr = (e, t) => {
     "left-bottom"
   ], P = () => [...F(), b, p], S = () => ["auto", "hidden", "clip", "visible", "scroll"], O = () => ["auto", "contain", "none"], f = () => [b, p, i], C = () => [X, "full", "auto", ...f()], A = () => [J, "none", "subgrid", b, p], _ = () => ["auto", {
     span: ["full", J, b, p]
-  }, J, b, p], V = () => [J, "auto", b, p], W = () => ["auto", "min", "max", "fr", b, p], te = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], q = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], B = () => ["auto", ...f()], G = () => [X, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...f()], v = () => [e, b, p], ve = () => [...F(), De, je, {
+  }, J, b, p], V = () => [J, "auto", b, p], W = () => ["auto", "min", "max", "fr", b, p], te = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], q = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], B = () => ["auto", ...f()], G = () => [X, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...f()], N = () => [e, b, p], ve = () => [...F(), De, je, {
     position: [b, p]
   }], Ne = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
@@ -339,7 +339,7 @@ const kr = (e, t) => {
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
-    k,
+    w,
     b,
     p
   ], ie = () => ["none", z, b, p], le = () => ["none", z, b, p], be = () => [z, b, p], ce = () => [X, "full", ...f()];
@@ -1157,14 +1157,14 @@ const kr = (e, t) => {
        * @see https://v3.tailwindcss.com/docs/placeholder-color
        */
       "placeholder-color": [{
-        placeholder: v()
+        placeholder: N()
       }],
       /**
        * Text Color
        * @see https://tailwindcss.com/docs/text-color
        */
       "text-color": [{
-        text: v()
+        text: N()
       }],
       /**
        * Text Decoration
@@ -1190,7 +1190,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/text-decoration-color
        */
       "text-decoration-color": [{
-        decoration: v()
+        decoration: N()
       }],
       /**
        * Text Underline Offset
@@ -1328,7 +1328,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/background-color
        */
       "bg-color": [{
-        bg: v()
+        bg: N()
       }],
       /**
        * Gradient Color Stops From Position
@@ -1356,21 +1356,21 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from": [{
-        from: v()
+        from: N()
       }],
       /**
        * Gradient Color Stops Via
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via": [{
-        via: v()
+        via: N()
       }],
       /**
        * Gradient Color Stops To
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to": [{
-        to: v()
+        to: N()
       }],
       // ---------------
       // --- Borders ---
@@ -1586,70 +1586,70 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color": [{
-        border: v()
+        border: N()
       }],
       /**
        * Border Color X
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-x": [{
-        "border-x": v()
+        "border-x": N()
       }],
       /**
        * Border Color Y
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-y": [{
-        "border-y": v()
+        "border-y": N()
       }],
       /**
        * Border Color S
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-s": [{
-        "border-s": v()
+        "border-s": N()
       }],
       /**
        * Border Color E
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-e": [{
-        "border-e": v()
+        "border-e": N()
       }],
       /**
        * Border Color Top
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-t": [{
-        "border-t": v()
+        "border-t": N()
       }],
       /**
        * Border Color Right
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-r": [{
-        "border-r": v()
+        "border-r": N()
       }],
       /**
        * Border Color Bottom
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-b": [{
-        "border-b": v()
+        "border-b": N()
       }],
       /**
        * Border Color Left
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-l": [{
-        "border-l": v()
+        "border-l": N()
       }],
       /**
        * Divide Color
        * @see https://tailwindcss.com/docs/divide-color
        */
       "divide-color": [{
-        divide: v()
+        divide: N()
       }],
       /**
        * Outline Style
@@ -1677,7 +1677,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/outline-color
        */
       "outline-color": [{
-        outline: v()
+        outline: N()
       }],
       // ---------------
       // --- Effects ---
@@ -1701,7 +1701,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
        */
       "shadow-color": [{
-        shadow: v()
+        shadow: N()
       }],
       /**
        * Inset Box Shadow
@@ -1715,7 +1715,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
        */
       "inset-shadow-color": [{
-        "inset-shadow": v()
+        "inset-shadow": N()
       }],
       /**
        * Ring Width
@@ -1736,7 +1736,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
        */
       "ring-color": [{
-        ring: v()
+        ring: N()
       }],
       /**
        * Ring Offset Width
@@ -1754,7 +1754,7 @@ const kr = (e, t) => {
        * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
        */
       "ring-offset-color": [{
-        "ring-offset": v()
+        "ring-offset": N()
       }],
       /**
        * Inset Ring Width
@@ -1768,7 +1768,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
        */
       "inset-ring-color": [{
-        "inset-ring": v()
+        "inset-ring": N()
       }],
       /**
        * Text Shadow
@@ -1782,7 +1782,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
        */
       "text-shadow-color": [{
-        "text-shadow": v()
+        "text-shadow": N()
       }],
       /**
        * Opacity
@@ -1833,10 +1833,10 @@ const kr = (e, t) => {
         "mask-linear-to": I()
       }],
       "mask-image-linear-from-color": [{
-        "mask-linear-from": v()
+        "mask-linear-from": N()
       }],
       "mask-image-linear-to-color": [{
-        "mask-linear-to": v()
+        "mask-linear-to": N()
       }],
       "mask-image-t-from-pos": [{
         "mask-t-from": I()
@@ -1845,10 +1845,10 @@ const kr = (e, t) => {
         "mask-t-to": I()
       }],
       "mask-image-t-from-color": [{
-        "mask-t-from": v()
+        "mask-t-from": N()
       }],
       "mask-image-t-to-color": [{
-        "mask-t-to": v()
+        "mask-t-to": N()
       }],
       "mask-image-r-from-pos": [{
         "mask-r-from": I()
@@ -1857,10 +1857,10 @@ const kr = (e, t) => {
         "mask-r-to": I()
       }],
       "mask-image-r-from-color": [{
-        "mask-r-from": v()
+        "mask-r-from": N()
       }],
       "mask-image-r-to-color": [{
-        "mask-r-to": v()
+        "mask-r-to": N()
       }],
       "mask-image-b-from-pos": [{
         "mask-b-from": I()
@@ -1869,10 +1869,10 @@ const kr = (e, t) => {
         "mask-b-to": I()
       }],
       "mask-image-b-from-color": [{
-        "mask-b-from": v()
+        "mask-b-from": N()
       }],
       "mask-image-b-to-color": [{
-        "mask-b-to": v()
+        "mask-b-to": N()
       }],
       "mask-image-l-from-pos": [{
         "mask-l-from": I()
@@ -1881,10 +1881,10 @@ const kr = (e, t) => {
         "mask-l-to": I()
       }],
       "mask-image-l-from-color": [{
-        "mask-l-from": v()
+        "mask-l-from": N()
       }],
       "mask-image-l-to-color": [{
-        "mask-l-to": v()
+        "mask-l-to": N()
       }],
       "mask-image-x-from-pos": [{
         "mask-x-from": I()
@@ -1893,10 +1893,10 @@ const kr = (e, t) => {
         "mask-x-to": I()
       }],
       "mask-image-x-from-color": [{
-        "mask-x-from": v()
+        "mask-x-from": N()
       }],
       "mask-image-x-to-color": [{
-        "mask-x-to": v()
+        "mask-x-to": N()
       }],
       "mask-image-y-from-pos": [{
         "mask-y-from": I()
@@ -1905,10 +1905,10 @@ const kr = (e, t) => {
         "mask-y-to": I()
       }],
       "mask-image-y-from-color": [{
-        "mask-y-from": v()
+        "mask-y-from": N()
       }],
       "mask-image-y-to-color": [{
-        "mask-y-to": v()
+        "mask-y-to": N()
       }],
       "mask-image-radial": [{
         "mask-radial": [b, p]
@@ -1920,10 +1920,10 @@ const kr = (e, t) => {
         "mask-radial-to": I()
       }],
       "mask-image-radial-from-color": [{
-        "mask-radial-from": v()
+        "mask-radial-from": N()
       }],
       "mask-image-radial-to-color": [{
-        "mask-radial-to": v()
+        "mask-radial-to": N()
       }],
       "mask-image-radial-shape": [{
         "mask-radial": ["circle", "ellipse"]
@@ -1947,10 +1947,10 @@ const kr = (e, t) => {
         "mask-conic-to": I()
       }],
       "mask-image-conic-from-color": [{
-        "mask-conic-from": v()
+        "mask-conic-from": N()
       }],
       "mask-image-conic-to-color": [{
-        "mask-conic-to": v()
+        "mask-conic-to": N()
       }],
       /**
        * Mask Mode
@@ -2047,7 +2047,7 @@ const kr = (e, t) => {
           // Deprecated since Tailwind CSS v4.0.0
           "",
           "none",
-          N,
+          k,
           me,
           de
         ]
@@ -2057,7 +2057,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
        */
       "drop-shadow-color": [{
-        "drop-shadow": v()
+        "drop-shadow": N()
       }],
       /**
        * Grayscale
@@ -2275,7 +2275,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/perspective
        */
       perspective: [{
-        perspective: [w, b, p]
+        perspective: [v, b, p]
       }],
       /**
        * Perspective Origin
@@ -2428,7 +2428,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/accent-color
        */
       accent: [{
-        accent: v()
+        accent: N()
       }],
       /**
        * Appearance
@@ -2442,7 +2442,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
        */
       "caret-color": [{
-        caret: v()
+        caret: N()
       }],
       /**
        * Color Scheme
@@ -2688,7 +2688,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/fill
        */
       fill: [{
-        fill: ["none", ...v()]
+        fill: ["none", ...N()]
       }],
       /**
        * Stroke Width
@@ -2702,7 +2702,7 @@ const kr = (e, t) => {
        * @see https://tailwindcss.com/docs/stroke
        */
       stroke: [{
-        stroke: ["none", ...v()]
+        stroke: ["none", ...N()]
       }],
       // ---------------------
       // --- Accessibility ---
@@ -3088,7 +3088,7 @@ const At = ({
           max: o,
           step: s,
           value: e,
-          onChange: (N) => t(Number(N.target.value)),
+          onChange: (k) => t(Number(k.target.value)),
           onMouseDown: () => y(!0),
           onMouseUp: () => y(!1),
           onTouchStart: () => y(!0),
@@ -3126,9 +3126,9 @@ const At = ({
   disabled: m,
   className: x
 }) => {
-  const y = e + t, h = y > 0 ? e / y * 100 : 50, N = y > 0 ? t / y * 100 : 50, k = (w) => {
-    const M = n - w;
-    a(w, Math.max(l, Math.min(n, M)));
+  const y = e + t, h = y > 0 ? e / y * 100 : 50, k = y > 0 ? t / y * 100 : 50, w = (v) => {
+    const M = n - v;
+    a(v, Math.max(l, Math.min(n, M)));
   };
   return /* @__PURE__ */ d("div", { className: u("w-full space-y-3", x), children: [
     /* @__PURE__ */ d("div", { className: "space-y-2", children: [
@@ -3157,7 +3157,7 @@ const At = ({
             max: n,
             step: c,
             value: e,
-            onChange: (w) => k(Number(w.target.value)),
+            onChange: (v) => w(Number(v.target.value)),
             disabled: m,
             className: "absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
           }
@@ -3178,7 +3178,7 @@ const At = ({
           {
             className: "h-full bg-success",
             initial: !1,
-            animate: { width: `${N}%` },
+            animate: { width: `${k}%` },
             transition: { type: "spring", stiffness: 300, damping: 30 }
           }
         ) }),
@@ -3190,7 +3190,7 @@ const At = ({
             max: n,
             step: c,
             value: t,
-            onChange: (w) => k(n - Number(w.target.value)),
+            onChange: (v) => w(n - Number(v.target.value)),
             disabled: m,
             className: "absolute inset-0 w-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
           }
@@ -3215,21 +3215,21 @@ const At = ({
   disabled: i,
   className: m
 }) => {
-  const [x, y] = D(!1), [h, N] = D(""), k = H(null), w = e.find((T) => T.value === t), M = n ? e.filter(
+  const [x, y] = D(!1), [h, k] = D(""), w = H(null), v = e.find((T) => T.value === t), M = n ? e.filter(
     (T) => T.label.toLowerCase().includes(h.toLowerCase())
   ) : e;
   Z(() => {
     const T = (F) => {
-      k.current && !k.current.contains(F.target) && (y(!1), N(""));
+      w.current && !w.current.contains(F.target) && (y(!1), k(""));
     };
     return document.addEventListener("mousedown", T), () => document.removeEventListener("mousedown", T);
   }, []);
   const j = (T) => {
-    a(T), y(!1), N("");
+    a(T), y(!1), k("");
   }, L = (T) => {
     T.stopPropagation(), a("");
   };
-  return /* @__PURE__ */ d("div", { ref: k, className: u("relative w-full", m), children: [
+  return /* @__PURE__ */ d("div", { ref: w, className: u("relative w-full", m), children: [
     s && /* @__PURE__ */ r("label", { className: "block mb-1.5 text-sm font-medium text-foreground", children: s }),
     /* @__PURE__ */ d(
       "button",
@@ -3249,11 +3249,11 @@ const At = ({
         ),
         children: [
           /* @__PURE__ */ d("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
-            w?.icon && /* @__PURE__ */ r("span", { className: "flex-shrink-0", children: w.icon }),
-            /* @__PURE__ */ r("span", { className: u("truncate", !w && "text-foreground/50"), children: w?.label || o })
+            v?.icon && /* @__PURE__ */ r("span", { className: "flex-shrink-0", children: v.icon }),
+            /* @__PURE__ */ r("span", { className: u("truncate", !v && "text-foreground/50"), children: v?.label || o })
           ] }),
           /* @__PURE__ */ d("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-            c && w && /* @__PURE__ */ r(
+            c && v && /* @__PURE__ */ r(
               "button",
               {
                 type: "button",
@@ -3292,14 +3292,14 @@ const At = ({
                 type: "text",
                 placeholder: "Search...",
                 value: h,
-                onChange: (T) => N(T.target.value),
+                onChange: (T) => k(T.target.value),
                 className: "w-full pl-10 pr-8 py-2 text-sm border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
               }
             ),
             h && /* @__PURE__ */ r(
               "button",
               {
-                onClick: () => N(""),
+                onClick: () => k(""),
                 className: "absolute right-2 top-1/2 -translate-y-1/2",
                 children: /* @__PURE__ */ r($, { className: "w-4 h-4 text-primary/50 hover:text-primary" })
               }
@@ -3349,17 +3349,17 @@ const At = ({
     required: x,
     className: y
   }, h) => {
-    const [N, k] = D(!1), [w, M] = D(""), j = H(null), L = e.find((S) => S.value === t), T = c ? e.filter(
-      (S) => S.label.toLowerCase().includes(w.toLowerCase())
+    const [k, w] = D(!1), [v, M] = D(""), j = H(null), L = e.find((S) => S.value === t), T = c ? e.filter(
+      (S) => S.label.toLowerCase().includes(v.toLowerCase())
     ) : e;
     Z(() => {
       const S = (O) => {
-        j.current && !j.current.contains(O.target) && (k(!1), M(""));
+        j.current && !j.current.contains(O.target) && (w(!1), M(""));
       };
       return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
     }, []);
     const F = (S) => {
-      a(S), k(!1), M("");
+      a(S), w(!1), M("");
     }, P = (S) => {
       S.stopPropagation(), a("");
     };
@@ -3373,10 +3373,10 @@ const At = ({
           "button",
           {
             type: "button",
-            onClick: () => !m && k(!N),
+            onClick: () => !m && w(!k),
             disabled: m,
             "aria-haspopup": "listbox",
-            "aria-expanded": N,
+            "aria-expanded": k,
             "aria-required": x,
             className: u(
               "w-full px-4 py-3 rounded-md border transition-all duration-200",
@@ -3386,7 +3386,7 @@ const At = ({
               "touch-target text-base",
               l && "border-error focus:ring-error",
               !l && "border-border",
-              N && "ring-2 ring-primary"
+              k && "ring-2 ring-primary"
             ),
             children: [
               /* @__PURE__ */ d("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
@@ -3409,7 +3409,7 @@ const At = ({
                   {
                     className: u(
                       "w-5 h-5 text-primary transition-transform",
-                      N && "rotate-180"
+                      k && "rotate-180"
                     )
                   }
                 )
@@ -3417,7 +3417,7 @@ const At = ({
             ]
           }
         ),
-        /* @__PURE__ */ r(Q, { children: N && /* @__PURE__ */ d(
+        /* @__PURE__ */ r(Q, { children: k && /* @__PURE__ */ d(
           g.div,
           {
             initial: { opacity: 0, y: -10 },
@@ -3434,13 +3434,13 @@ const At = ({
                   {
                     type: "text",
                     placeholder: "Search...",
-                    value: w,
+                    value: v,
                     onChange: (S) => M(S.target.value),
                     className: "w-full pl-10 pr-8 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary",
                     "aria-label": "Search options"
                   }
                 ),
-                w && /* @__PURE__ */ r(
+                v && /* @__PURE__ */ r(
                   "button",
                   {
                     type: "button",
@@ -3501,16 +3501,16 @@ const Dt = ({
   maxDate: c,
   className: i
 }) => {
-  const [m, x] = D(!1), [y, h] = D(e || /* @__PURE__ */ new Date()), N = H(null);
+  const [m, x] = D(!1), [y, h] = D(e || /* @__PURE__ */ new Date()), k = H(null);
   Z(() => {
     const C = (A) => {
-      N.current && !N.current.contains(A.target) && x(!1);
+      k.current && !k.current.contains(A.target) && x(!1);
     };
     return m && document.addEventListener("mousedown", C), () => {
       document.removeEventListener("mousedown", C);
     };
   }, [m]);
-  const k = [
+  const w = [
     "January",
     "February",
     "March",
@@ -3523,7 +3523,7 @@ const Dt = ({
     "October",
     "November",
     "December"
-  ], w = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], M = (C) => {
+  ], v = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], M = (C) => {
     const A = C.getFullYear(), _ = C.getMonth(), V = new Date(A, _, 1), te = new Date(A, _ + 1, 0).getDate(), q = V.getDay(), B = [];
     for (let G = 0; G < q; G++)
       B.push(null);
@@ -3541,7 +3541,7 @@ const Dt = ({
     month: "short",
     day: "numeric"
   }) : "", f = M(y);
-  return /* @__PURE__ */ d("div", { ref: N, className: u("relative w-full", i), children: [
+  return /* @__PURE__ */ d("div", { ref: k, className: u("relative w-full", i), children: [
     a && /* @__PURE__ */ r("label", { className: "block mb-1.5 text-sm font-medium text-foreground", children: a }),
     /* @__PURE__ */ d(
       "button",
@@ -3585,7 +3585,7 @@ const Dt = ({
               }
             ),
             /* @__PURE__ */ d("div", { className: "font-semibold text-foreground", children: [
-              k[y.getMonth()],
+              w[y.getMonth()],
               " ",
               y.getFullYear()
             ] }),
@@ -3599,7 +3599,7 @@ const Dt = ({
               }
             )
           ] }),
-          /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-1 mb-2", children: w.map((C) => /* @__PURE__ */ r(
+          /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-1 mb-2", children: v.map((C) => /* @__PURE__ */ r(
             "div",
             {
               className: "text-center text-xs font-medium text-primary/70 py-2",
@@ -3877,13 +3877,13 @@ function Vt({
 }) {
   const [n, c] = D(null), [i, m] = D("asc"), x = (h) => {
     n === h ? m(i === "asc" ? "desc" : "asc") : (c(h), m("asc"));
-  }, y = n ? [...e].sort((h, N) => {
-    const k = h[n], w = N[n];
-    return k < w ? i === "asc" ? -1 : 1 : k > w ? i === "asc" ? 1 : -1 : 0;
+  }, y = n ? [...e].sort((h, k) => {
+    const w = h[n], v = k[n];
+    return w < v ? i === "asc" ? -1 : 1 : w > v ? i === "asc" ? 1 : -1 : 0;
   }) : e;
   return a ? /* @__PURE__ */ r("div", { className: u("border border-border rounded-lg overflow-hidden", l), children: /* @__PURE__ */ r("div", { className: "overflow-x-auto", children: /* @__PURE__ */ d("table", { className: "w-full", children: [
-    /* @__PURE__ */ r("thead", { className: "border-b border-border", children: /* @__PURE__ */ r("tr", { children: t.map((h, N) => /* @__PURE__ */ r("th", { className: "px-6 py-4 text-left", children: /* @__PURE__ */ r("div", { className: "h-4 bg-border rounded w-24 animate-pulse" }) }, N)) }) }),
-    /* @__PURE__ */ r("tbody", { children: [...Array(5)].map((h, N) => /* @__PURE__ */ r("tr", { className: "border-b border-border", children: t.map((k, w) => /* @__PURE__ */ r("td", { className: "px-6 py-4", children: /* @__PURE__ */ r("div", { className: "h-4 bg-secondary rounded animate-pulse" }) }, w)) }, N)) })
+    /* @__PURE__ */ r("thead", { className: "border-b border-border", children: /* @__PURE__ */ r("tr", { children: t.map((h, k) => /* @__PURE__ */ r("th", { className: "px-6 py-4 text-left", children: /* @__PURE__ */ r("div", { className: "h-4 bg-border rounded w-24 animate-pulse" }) }, k)) }) }),
+    /* @__PURE__ */ r("tbody", { children: [...Array(5)].map((h, k) => /* @__PURE__ */ r("tr", { className: "border-b border-border", children: t.map((w, v) => /* @__PURE__ */ r("td", { className: "px-6 py-4", children: /* @__PURE__ */ r("div", { className: "h-4 bg-secondary rounded animate-pulse" }) }, v)) }, k)) })
   ] }) }) }) : /* @__PURE__ */ r(
     g.div,
     {
@@ -3892,7 +3892,7 @@ function Vt({
       transition: { duration: 0.3 },
       className: u("border border-border rounded-lg overflow-hidden", l),
       children: /* @__PURE__ */ r("div", { className: "overflow-x-auto", children: /* @__PURE__ */ d("table", { className: "w-full", children: [
-        /* @__PURE__ */ r("thead", { className: "border-b border-border", children: /* @__PURE__ */ r("tr", { children: t.map((h, N) => /* @__PURE__ */ r(
+        /* @__PURE__ */ r("thead", { className: "border-b border-border", children: /* @__PURE__ */ r("tr", { children: t.map((h, k) => /* @__PURE__ */ r(
           "th",
           {
             className: u(
@@ -3906,31 +3906,31 @@ function Vt({
               h.sortable && /* @__PURE__ */ r("span", { className: "text-primary/50 hover:text-primary transition-colors", children: n === h.key ? i === "asc" ? /* @__PURE__ */ r(nr, { className: "w-4 h-4" }) : /* @__PURE__ */ r(ir, { className: "w-4 h-4" }) : /* @__PURE__ */ r(lr, { className: "w-4 h-4" }) })
             ] })
           },
-          N
+          k
         )) }) }),
-        /* @__PURE__ */ r("tbody", { children: y.map((h, N) => /* @__PURE__ */ r(
+        /* @__PURE__ */ r("tbody", { children: y.map((h, k) => /* @__PURE__ */ r(
           g.tr,
           {
             initial: { opacity: 0, y: 10 },
             animate: { opacity: 1, y: 0 },
-            transition: { duration: 0.2, delay: N * 0.05 },
+            transition: { duration: 0.2, delay: k * 0.05 },
             onClick: () => o && o(h),
             className: u(
               "border-b border-border transition-colors",
               o && "cursor-pointer hover:bg-secondary"
             ),
-            children: t.map((k, w) => /* @__PURE__ */ r(
+            children: t.map((w, v) => /* @__PURE__ */ r(
               "td",
               {
                 className: u(
                   "px-6 py-4 text-sm text-foreground/70",
-                  k.width
+                  w.width
                 ),
-                style: k.width ? { width: k.width } : void 0,
-                title: k.truncate && !k.render ? String(h[k.key] ?? "") : void 0,
-                children: k.truncate && !k.render ? /* @__PURE__ */ r("div", { className: "truncate", children: String(h[k.key] ?? "") }) : k.render ? k.render(h) : String(h[k.key] ?? "")
+                style: w.width ? { width: w.width } : void 0,
+                title: w.truncate && !w.render ? String(h[w.key] ?? "") : void 0,
+                children: w.truncate && !w.render ? /* @__PURE__ */ r("div", { className: "truncate", children: String(h[w.key] ?? "") }) : w.render ? w.render(h) : String(h[w.key] ?? "")
               },
-              w
+              v
             ))
           },
           s(h)
@@ -4060,7 +4060,7 @@ const Wt = ({
     success: "bg-success text-white",
     danger: "bg-error text-white",
     warning: "bg-warning text-white"
-  }, N = () => {
+  }, k = () => {
     o && o.length > 0 ? m(!i) : t && t();
   };
   return /* @__PURE__ */ d("div", { className: u(x[l], "z-50", c), children: [
@@ -4071,34 +4071,44 @@ const Wt = ({
         animate: { opacity: 1 },
         exit: { opacity: 0 },
         className: "absolute bottom-20 right-0 flex flex-col gap-3 mb-2",
-        children: o.map((k, w) => /* @__PURE__ */ d(
+        children: o.map((w, v) => /* @__PURE__ */ d(
           g.div,
           {
             initial: { opacity: 0, y: 20, scale: 0.8 },
             animate: { opacity: 1, y: 0, scale: 1 },
             exit: { opacity: 0, y: 20, scale: 0.8 },
-            transition: { delay: w * 0.05 },
+            transition: { delay: v * 0.05 },
             className: "flex items-center gap-3",
             children: [
-              /* @__PURE__ */ r("span", { className: "bg-background border border-border rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap shadow-lg", children: k.label }),
+              /* @__PURE__ */ r(
+                "span",
+                {
+                  className: u(
+                    "bg-background border border-border rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap shadow-lg",
+                    w.labelClassName
+                  ),
+                  style: w.labelStyle,
+                  children: w.label
+                }
+              ),
               /* @__PURE__ */ r(
                 g.button,
                 {
                   whileHover: { scale: 1.1 },
                   whileTap: { scale: 0.9 },
                   onClick: () => {
-                    k.onClick(), m(!1);
+                    w.onClick(), m(!1);
                   },
                   className: u(
                     "w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition-all",
-                    h[k.variant || "primary"]
+                    h[w.variant || "primary"]
                   ),
-                  children: k.icon
+                  children: w.icon
                 }
               )
             ]
           },
-          w
+          v
         ))
       }
     ) }),
@@ -4107,7 +4117,7 @@ const Wt = ({
       {
         whileTap: { scale: n ? 1 : 0.9 },
         whileHover: { scale: n ? 1 : 1.05 },
-        onClick: N,
+        onClick: k,
         disabled: n,
         className: u(
           "z-30 rounded-full p-4 transition-all duration-200",
@@ -4575,28 +4585,28 @@ const Xt = ({
   disabled: o,
   className: s
 }) => {
-  const [l, n] = D(!1), [c, i] = D(!1), [m, x] = D(0), [y, h] = D(null), N = H(null), k = H([]), w = H(null), M = async () => {
+  const [l, n] = D(!1), [c, i] = D(!1), [m, x] = D(0), [y, h] = D(null), k = H(null), w = H([]), v = H(null), M = async () => {
     try {
       const S = await navigator.mediaDevices.getUserMedia({ audio: !0 }), O = new MediaRecorder(S);
-      N.current = O, k.current = [], O.ondataavailable = (f) => {
-        f.data.size > 0 && k.current.push(f.data);
+      k.current = O, w.current = [], O.ondataavailable = (f) => {
+        f.data.size > 0 && w.current.push(f.data);
       }, O.onstop = () => {
-        const f = new Blob(k.current, { type: "audio/webm" }), C = URL.createObjectURL(f);
+        const f = new Blob(w.current, { type: "audio/webm" }), C = URL.createObjectURL(f);
         h(C), e(f), S.getTracks().forEach((A) => A.stop());
-      }, O.start(), n(!0), x(0), w.current = setInterval(() => {
+      }, O.start(), n(!0), x(0), v.current = setInterval(() => {
         x((f) => f >= a ? (T(), f) : f + 1);
       }, 1e3);
     } catch (S) {
       console.error("Error accessing microphone:", S);
     }
   }, j = () => {
-    N.current?.state === "recording" && (N.current.pause(), i(!0), w.current && clearInterval(w.current));
+    k.current?.state === "recording" && (k.current.pause(), i(!0), v.current && clearInterval(v.current));
   }, L = () => {
-    N.current?.state === "paused" && (N.current.resume(), i(!1), w.current = setInterval(() => {
+    k.current?.state === "paused" && (k.current.resume(), i(!1), v.current = setInterval(() => {
       x((S) => Math.min(S + 1, a));
     }, 1e3));
   }, T = () => {
-    N.current && (N.current.stop(), n(!1), i(!1), w.current && (clearInterval(w.current), w.current = null));
+    k.current && (k.current.stop(), n(!1), i(!1), v.current && (clearInterval(v.current), v.current = null));
   }, F = () => {
     h(null), x(0);
   }, P = (S) => {