@mci-ui/mci-ui 0.0.87 → 0.0.89

package/dist/shared/ui/mciPicker/MciPicker.js

@@ -8,7 +8,7 @@ import _e from "../mciInput/MciInput.js";
 import { toSafeDate as D, formatDateByPattern as qe, isDateOutsideBounds as Ge, normalizeDate as F, isSameCalendarDay as He, parseDateFromInput as he, formatManualDateInput as Je, getCalendarDays as Qe, shiftYear as Ue, shiftMonth as Xe } from "./mci-picker.utils.js";
 const Ze = $e(
   ({
-    type: s = "date",
+    type: o = "date",
     value: T,
     onChange: u,
     placeholder: K,
@@ -29,38 +29,38 @@ const Ze = $e(
     align: V = "auto"
   }, ve) => {
     const [f, W] = w(!1), [re, p] = w(
-      s === "range" ? [null, null] : null
-    ), [I, R] = w([null, null]), [m, b] = w(/* @__PURE__ */ new Date()), [le, Y] = w(y), [we, _] = w(0), [j, d] = w(""), [q, se] = w(!1), [G, oe] = w(V), E = Te(null), g = de(() => {
+      o === "range" ? [null, null] : null
+    ), [I, R] = w([null, null]), [m, b] = w(/* @__PURE__ */ new Date()), [le, Y] = w(y), [we, _] = w(0), [j, d] = w(""), [q, oe] = w(!1), [G, se] = w(V), E = Te(null), g = de(() => {
       const e = T !== void 0 ? T : re;
-      if (s === "date") return D(e);
+      if (o === "date") return D(e);
       const t = e;
       return [D(t[0]), D(t[1])];
-    }, [T, re, s]), H = We[xe], c = N(
+    }, [T, re, o]), H = We[xe], c = N(
       (e) => qe(e, k),
       [k]
     ), S = N(
       (e) => Ge(e, M, ee),
       [M, ee]
     ), C = de(() => {
-      if (s === "date") return c(g);
+      if (o === "date") return c(g);
       const [e, t] = g;
       return !e && !t ? "" : e && t ? `${c(e)} - ${c(t)}` : e ? `${c(e)} - ...` : "...";
-    }, [s, g, c]);
+    }, [o, g, c]);
     $(() => {
       (!f && !q || j === "" && C !== "") && d(C);
     }, [C, f, j, q]), $(() => {
       if (f)
-        if (s === "range") {
+        if (o === "range") {
           const e = g;
           R(e), e[0] ? b(e[0]) : e[1] ? b(e[1]) : b(/* @__PURE__ */ new Date());
         } else {
           const e = g;
           b(e || /* @__PURE__ */ new Date());
         }
-    }, [f, s, g]), $(() => {
+    }, [f, o, g]), $(() => {
       if (f && V === "auto" && E.current) {
         const e = E.current.getBoundingClientRect(), t = window.innerWidth - e.right, n = e.left;
-        t < 300 && n > 300 ? oe("right") : oe("left");
+        t < 300 && n > 300 ? se("right") : se("left");
       }
     }, [f, V]);
     const x = N(() => {
@@ -75,9 +75,9 @@ const Ze = $e(
         };
     }, [f, J, Q]);
     const De = () => {
-      se(!0), !(A || f) && (s === "range" || !te) && (W(!0), Y(y));
+      oe(!0), !(A || f) && (o === "range" || !te) && (W(!0), Y(y));
     }, ye = () => {
-      if (se(!1), s !== "date") return;
+      if (oe(!1), o !== "date") return;
       const e = j.trim();
       if (!e) {
         p(null), u?.(null);
@@ -91,69 +91,69 @@ const Ze = $e(
       }
       d(C);
     }, Ie = (e) => {
-      if (s !== "date") return;
+      if (o !== "date") return;
       const t = e.target.value, n = Je(t), i = n.replace(/\D/g, "");
       if (!(i.length >= 1 && Number.parseInt(i[0] ?? "0", 10) > 3)) {
         if (i.length >= 2) {
-          const o = Number.parseInt(i.slice(0, 2), 10);
-          if (o < 1 || o > 31) return;
+          const s = Number.parseInt(i.slice(0, 2), 10);
+          if (s < 1 || s > 31) return;
         }
         if (!(i.length >= 3 && Number.parseInt(i[2] ?? "0", 10) > 1)) {
           if (i.length >= 4) {
-            const o = Number.parseInt(i.slice(2, 4), 10);
-            if (o < 1 || o > 12) return;
+            const s = Number.parseInt(i.slice(2, 4), 10);
+            if (s < 1 || s > 12) return;
           }
           if (d(n), n.length === 10) {
-            const o = he(n);
-            o && !S(o) && (p(o), u?.(o), b(o));
+            const s = he(n);
+            s && !S(s) && (p(s), u?.(s), b(s));
           } else n === "" && (p(null), u?.(null));
         }
       }
     }, Ce = N(() => {
-      const e = s === "range" ? [null, null] : null;
+      const e = o === "range" ? [null, null] : null;
       p(e), R([null, null]), u?.(e), d("");
-    }, [s, u]), ze = N(
+    }, [o, u]), ze = N(
       (e) => {
         if (S(e)) return;
         const t = F(e);
-        if (s === "date")
+        if (o === "date")
           p(t), u?.(t), d(c(t)), x();
         else {
           const [n, i] = I;
           if (!n && !i || n && i)
             R([t, null]), d(`${c(t)} - ...`);
           else if (n && !i) {
-            const o = t < n ? [t, n] : [n, t];
-            R(o), p(o), u?.(o);
-            const [z, v] = o;
+            const s = t < n ? [t, n] : [n, t];
+            R(s), p(s), u?.(s);
+            const [z, v] = s;
             d(`${c(z)} - ${c(v)}`), x();
           }
         }
       },
-      [s, I, S, u, x, c]
+      [o, I, S, u, x, c]
     ), Fe = N((e) => {
       const t = new Date(m.getFullYear(), e, 1);
-      b(t), y === "month" && s === "date" ? (p(t), u?.(t), d(c(t)), x()) : Y("day");
-    }, [m, y, u, x, s, c]), Ye = N((e) => {
+      b(t), y === "month" && o === "date" ? (p(t), u?.(t), d(c(t)), x()) : Y("day");
+    }, [m, y, u, x, o, c]), Ye = N((e) => {
       const t = new Date(e, m.getMonth(), 1);
-      b(t), y === "year" && s === "date" ? (p(t), u?.(t), d(c(t)), x()) : Y("month");
-    }, [m, y, u, x, s, c]), ae = (e) => {
+      b(t), y === "year" && o === "date" ? (p(t), u?.(t), d(c(t)), x()) : Y("month");
+    }, [m, y, u, x, o, c]), ae = (e) => {
       b((t) => Xe(t, e));
     }, L = (e) => {
       b((t) => Ue(t, e));
     }, O = N((e, t) => He(e, t), []), Ae = (e) => {
       const t = F(e);
-      if (s === "date") return g && O(t, g);
+      if (o === "date") return g && O(t, g);
       const [n] = I[0] ? I : g;
       return D(n) && O(t, D(n));
     }, Se = (e) => {
-      if (s !== "range") return !1;
+      if (o !== "range") return !1;
       const t = F(e), [, n] = I[1] ? I : g;
       return D(n) && O(t, D(n));
     }, Re = (e) => {
-      if (s !== "range") return !1;
-      const t = F(e), [n, i] = I[0] ? I : g, o = D(n), z = D(i);
-      return o && !z ? !1 : o && z && t > F(o) && t < F(z);
+      if (o !== "range") return !1;
+      const t = F(e), [n, i] = I[0] ? I : g, s = D(n), z = D(i);
+      return s && !z ? !1 : s && z && t > F(s) && t < F(z);
     }, ie = (e, t, n) => {
       const i = Qe(e);
       return /* @__PURE__ */ h("div", { className: "w-[300px] p-2 select-none", children: [
@@ -165,7 +165,7 @@ const Ze = $e(
                 onClick: () => L(-1),
                 type: "button",
                 className: a(
-                  "rounded p-1 transition-colors",
+                  "cursor-pointer rounded p-1 transition-colors",
                   l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
                 ),
                 children: /* @__PURE__ */ r(Pe, { size: 18 })
@@ -177,7 +177,7 @@ const Ze = $e(
                 onClick: () => ae(-1),
                 type: "button",
                 className: a(
-                  "rounded p-1 transition-colors",
+                  "cursor-pointer rounded p-1 transition-colors",
                   l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
                 ),
                 children: /* @__PURE__ */ r(X, { size: 18 })
@@ -224,7 +224,7 @@ const Ze = $e(
                 onClick: () => ae(1),
                 type: "button",
                 className: a(
-                  "rounded p-1 transition-colors",
+                  "cursor-pointer rounded p-1 transition-colors",
                   l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
                 ),
                 children: /* @__PURE__ */ r(Z, { size: 18 })
@@ -236,7 +236,7 @@ const Ze = $e(
                 onClick: () => L(1),
                 type: "button",
                 className: a(
-                  "rounded p-1 transition-colors",
+                  "cursor-pointer rounded p-1 transition-colors",
                   l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
                 ),
                 children: /* @__PURE__ */ r(Be, { size: 18 })
@@ -251,19 +251,19 @@ const Ze = $e(
               "mb-1 grid grid-cols-7 text-center text-[11px] font-bold uppercase",
               l ? "text-blue-500" : "text-blue-600"
             ),
-            children: H.weekdaysShort.map((o) => /* @__PURE__ */ r("div", { className: "py-1", children: o }, o))
+            children: H.weekdaysShort.map((s) => /* @__PURE__ */ r("div", { className: "py-1", children: s }, s))
           }
         ),
-        /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-y-1 relative", children: i.map((o, z) => {
-          const v = o.date, ue = S(v), P = Ae(v), B = Se(v), Le = Re(v);
+        /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-y-1 relative", children: i.map((s, z) => {
+          const v = s.date, ue = S(v), P = Ae(v), B = Se(v), Le = Re(v);
           return /* @__PURE__ */ r(
             "div",
             {
               className: a(
                 "relative flex h-10 items-center justify-center",
                 Le && (l ? "bg-blue-500/15" : "bg-blue-50"),
-                P && s === "range" && B ? l ? "rounded-full bg-blue-500" : "rounded-full bg-blue-50" : P && s === "range" ? l ? "rounded-l-full bg-gradient-to-r from-transparent to-blue-500/15" : "rounded-l-full bg-gradient-to-r from-transparent to-blue-50" : "",
-                B && s === "range" ? l ? "rounded-r-full bg-gradient-to-l from-transparent to-blue-500/15" : "rounded-r-full bg-gradient-to-l from-transparent to-blue-50" : ""
+                P && o === "range" && B ? l ? "rounded-full bg-blue-500" : "rounded-full bg-blue-50" : P && o === "range" ? l ? "rounded-l-full bg-gradient-to-r from-transparent to-blue-500/15" : "rounded-l-full bg-gradient-to-r from-transparent to-blue-50" : "",
+                B && o === "range" ? l ? "rounded-r-full bg-gradient-to-l from-transparent to-blue-500/15" : "rounded-r-full bg-gradient-to-l from-transparent to-blue-50" : ""
               ),
               children: /* @__PURE__ */ r(
                 "button",
@@ -273,7 +273,7 @@ const Ze = $e(
                   disabled: ue,
                   className: a(
                     "z-10 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-sm font-medium transition-all",
-                    o.isCurrentMonth ? l ? "text-neutral-50" : "text-slate-700" : l ? "text-neutral-100/40" : "text-slate-300",
+                    s.isCurrentMonth ? l ? "text-neutral-50" : "text-slate-700" : l ? "text-neutral-100/40" : "text-slate-300",
                     ue && "cursor-not-allowed opacity-20",
                     P || B ? "bg-blue-600 text-white shadow-md shadow-blue-200 hover:bg-blue-700" : l ? "hover:bg-neutral-300 hover:text-white" : "hover:bg-blue-50",
                     O(v, /* @__PURE__ */ new Date()) && !P && !B && (l ? "border border-blue-500 text-blue-500" : "border border-blue-600 text-blue-600")
@@ -294,7 +294,7 @@ const Ze = $e(
             type: "button",
             onClick: () => L(-1),
             className: a(
-              "rounded p-1",
+              "cursor-pointer rounded p-1",
               l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
             ),
             children: /* @__PURE__ */ r(X, { size: 20 })
@@ -307,7 +307,7 @@ const Ze = $e(
             type: "button",
             onClick: () => L(1),
             className: a(
-              "rounded p-1",
+              "cursor-pointer rounded p-1",
               l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
             ),
             children: /* @__PURE__ */ r(Z, { size: 20 })
@@ -325,7 +325,7 @@ const Ze = $e(
               type: "button",
               onClick: () => _((n) => n - 1),
               className: a(
-                "rounded p-1",
+                "cursor-pointer rounded p-1",
                 l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
               ),
               children: /* @__PURE__ */ r(X, { size: 20 })
@@ -342,7 +342,7 @@ const Ze = $e(
               type: "button",
               onClick: () => _((n) => n + 1),
               className: a(
-                "rounded p-1",
+                "cursor-pointer rounded p-1",
                 l ? "text-neutral-100 hover:bg-neutral-300 hover:text-white" : "text-slate-500 hover:bg-slate-100"
               ),
               children: /* @__PURE__ */ r(Z, { size: 20 })
@@ -385,10 +385,10 @@ const Ze = $e(
           required: me,
           error: ge,
           darkMode: l,
-          maxLength: s === "date" ? 10 : void 0,
+          maxLength: o === "date" ? 10 : void 0,
           onFocus: De,
           onBlur: ye,
-          readOnly: !te || s === "range",
+          readOnly: !te || o === "range",
           showClearButton: pe,
           onClear: Ce
         }
@@ -407,8 +407,8 @@ const Ze = $e(
           style: { width: "max-content" },
           onMouseDown: (e) => e.stopPropagation(),
           children: le === "day" ? /* @__PURE__ */ h(U, { children: [
-            ie(m, !0, s !== "range"),
-            s === "range" && /* @__PURE__ */ r("div", { className: a(
+            ie(m, !0, o !== "range"),
+            o === "range" && /* @__PURE__ */ r("div", { className: a(
               "hidden border-l md:block",
               l ? "border-neutral-200" : "border-slate-100"
             ), children: ie(new Date(m.getFullYear(), m.getMonth() + 1, 1), !1, !0) })

package/dist/shared/ui/mciSelect/MciSelect.js

@@ -1,9 +1,9 @@
 import { jsxs as _, jsx as a } from "react/jsx-runtime";
 import { AltArrowDown as st } from "@solar-icons/react";
 import ot from "../../../assets/icons/close.svg.js";
-import { forwardRef as ct, useState as w, useRef as G, useMemo as O, useCallback as h, useEffect as J } from "react";
+import { forwardRef as ct, useState as w, useRef as G, useMemo as O, useCallback as p, useEffect as J } from "react";
 import { useClickOutside as it, useEscapeKey as ut, cn as s } from "../../lib/utils.js";
-import { getFilteredOptions as ft, getSelectStateStyles as mt, getSelectIconColor as ht, SELECT_SIZES as pt } from "./mci-select.utils.js";
+import { getFilteredOptions as ft, getSelectStateStyles as mt, getSelectIconColor as pt, SELECT_SIZES as ht } from "./mci-select.utils.js";
 const xt = ct(
   ({
     label: U,
@@ -14,7 +14,7 @@ const xt = ct(
     size: l = "base",
     darkMode: e = !1,
     error: o,
-    disabled: r = !1,
+    disabled: n = !1,
     required: Q = !1,
     value: m,
     onChange: b,
@@ -22,45 +22,45 @@ const xt = ct(
     onBlur: y,
     className: X,
     clearable: Y = !1,
-    searchable: p = !1,
+    searchable: h = !1,
     onSearch: N,
     name: k
   }, z) => {
-    const [n, S] = w(!1), [i, F] = w(!1), [M, $] = w(""), [T, x] = w(""), [C, u] = w(-1), H = G(null), K = G(null), d = m !== void 0 ? m : M, Z = L.find((t) => t.value === d), E = d !== "" && d !== void 0, D = Y && E && !r, I = !!(v && R === "right"), c = pt[l], tt = O(() => I && D ? l === "sm" || l === "md" ? "pr-16" : "pr-20" : I || D ? l === "sm" ? "pr-11" : l === "md" ? "pr-12" : "pr-14" : l === "sm" ? "pr-8" : l === "md" ? "pr-9" : "pr-10", [I, D, l]), f = O(() => ft(L, T, p, !!N), [L, T, p, N]), q = h(() => {
+    const [r, S] = w(!1), [i, F] = w(!1), [M, $] = w(""), [T, x] = w(""), [C, u] = w(-1), H = G(null), K = G(null), g = m !== void 0 ? m : M, Z = L.find((t) => t.value === g), E = g !== "" && g !== void 0, D = Y && E && !n, I = !!(v && R === "right"), c = ht[l], tt = O(() => I && D ? l === "sm" || l === "md" ? "pr-16" : "pr-20" : I || D ? l === "sm" ? "pr-11" : l === "md" ? "pr-12" : "pr-14" : l === "sm" ? "pr-8" : l === "md" ? "pr-9" : "pr-10", [I, D, l]), f = O(() => ft(L, T, h, !!N), [L, T, h, N]), q = p(() => {
       S(!1), F(!1), x(""), u(-1), y?.();
     }, [y]), { handleClick: V } = it(H, q), { handleEscape: j } = ut(q);
     J(() => {
-      if (n)
+      if (r)
         return document.addEventListener("mousedown", V), document.addEventListener("keydown", j), () => {
           document.removeEventListener("mousedown", V), document.removeEventListener("keydown", j);
         };
-    }, [n, V, j]), J(() => {
-      n && p && K.current && K.current.focus();
-    }, [n, p]);
-    const et = h(() => {
-      r || (S((t) => !t), n ? (x(""), u(-1)) : (F(!0), W?.()));
-    }, [r, n, W]), P = h(
+    }, [r, V, j]), J(() => {
+      r && h && K.current && K.current.focus();
+    }, [r, h]);
+    const et = p(() => {
+      n || (S((t) => !t), r ? (x(""), u(-1)) : (F(!0), W?.()));
+    }, [n, r, W]), P = p(
       (t) => {
         m === void 0 && $(t), b?.(t), S(!1), F(!1), x(""), u(-1), y?.();
       },
       [m, b, y]
-    ), nt = h(
+    ), nt = p(
       (t) => {
-        if (!r) {
-          if (!n && (t.key === "ArrowDown" || t.key === "ArrowUp" || t.key === "Enter")) {
+        if (!n) {
+          if (!r && (t.key === "ArrowDown" || t.key === "ArrowUp" || t.key === "Enter")) {
             t.preventDefault(), S(!0);
             return;
           }
-          if (n)
+          if (r)
             switch (t.key) {
               case "ArrowDown":
                 t.preventDefault(), u(
-                  (g) => g < f.length - 1 ? g + 1 : 0
+                  (d) => d < f.length - 1 ? d + 1 : 0
                 );
                 break;
               case "ArrowUp":
                 t.preventDefault(), u(
-                  (g) => g > 0 ? g - 1 : f.length - 1
+                  (d) => d > 0 ? d - 1 : f.length - 1
                 );
                 break;
               case "Enter":
@@ -69,23 +69,23 @@ const xt = ct(
             }
         }
       },
-      [n, f, C, r, P]
-    ), rt = h(
+      [r, f, C, n, P]
+    ), rt = p(
       (t) => {
-        t.stopPropagation(), !r && (m === void 0 && $(""), b?.(""), x(""), u(-1));
+        t.stopPropagation(), !n && (m === void 0 && $(""), b?.(""), x(""), u(-1));
       },
-      [m, b, r]
-    ), lt = h(
+      [m, b, n]
+    ), lt = p(
       (t) => {
         x(t), N?.(t), u(0);
       },
       [N]
     ), at = O(
-      () => mt(r, o, e),
-      [o, r, e]
+      () => mt(n, o, e),
+      [o, n, e]
     ), B = O(
-      () => ht(r, o, n, i, e),
-      [r, o, n, i, e]
+      () => pt(n, o, r, i, e),
+      [n, o, r, i, e]
     );
     return /* @__PURE__ */ _("div", { className: s("w-full", X), ref: z, children: [
       U && /* @__PURE__ */ _(
@@ -114,22 +114,23 @@ const xt = ct(
               "div",
               {
                 role: "combobox",
-                "aria-expanded": n,
+                "aria-expanded": r,
                 "aria-haspopup": "listbox",
                 "aria-controls": `${k}-listbox`,
-                "aria-disabled": r,
-                tabIndex: r ? -1 : 0,
+                "aria-disabled": n,
+                tabIndex: n ? -1 : 0,
                 onClick: et,
                 className: s(
                   "flex w-full items-center border font-normal transition-all duration-300 ease-in-out",
+                  n ? "cursor-not-allowed" : "cursor-pointer",
                   l === "base" ? "rounded-xl" : "rounded-lg",
                   c.container,
                   v && R === "left" ? c.iconPaddingLeft : c.padding,
                   tt,
                   at,
-                  e && !r && (i || n) && !o && "border-blue-500 shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))] text-white",
-                  e && !r && (i || n) && o && "border-red-500 shadow-[0_0_0_2px_rgba(231,0,11,0.25)]",
-                  !e && !r && i && "shadow-blue border-blue-600"
+                  e && !n && (i || r) && !o && "border-blue-500 shadow-[0_0_0_2px_var(--opacity-25,rgba(21,93,252,0.25))] text-white",
+                  e && !n && (i || r) && o && "border-red-500 shadow-[0_0_0_2px_rgba(231,0,11,0.25)]",
+                  !e && !n && i && "shadow-blue border-blue-600"
                 ),
                 children: [
                   v && /* @__PURE__ */ a(
@@ -143,7 +144,7 @@ const xt = ct(
                       children: v
                     }
                   ),
-                  p && n ? /* @__PURE__ */ a(
+                  h && r ? /* @__PURE__ */ a(
                     "input",
                     {
                       ref: K,
@@ -163,9 +164,9 @@ const xt = ct(
                       title: Z?.label || A,
                       className: s(
                         "block min-w-0 flex-1 truncate select-none",
-                        !E && !r && (e ? "text-neutral-100" : "text-slate-400"),
-                        e && E && (i || n) && "text-white",
-                        e && E && !i && !n && "text-neutral-50"
+                        !E && !n && (e ? "text-neutral-100" : "text-slate-400"),
+                        e && E && (i || r) && "text-white",
+                        e && E && !i && !r && "text-neutral-50"
                       ),
                       children: Z?.label || A
                     }
@@ -190,7 +191,7 @@ const xt = ct(
                       className: s(
                         "absolute top-1/2 -translate-y-1/2 pointer-events-none transition-all duration-300",
                         l === "sm" ? "right-2" : "right-3",
-                        n && "rotate-180",
+                        r && "rotate-180",
                         B
                       ),
                       children: /* @__PURE__ */ a(st, { className: c.iconSize })
@@ -199,7 +200,7 @@ const xt = ct(
                 ]
               }
             ),
-            n && !r && /* @__PURE__ */ a(
+            r && !n && /* @__PURE__ */ a(
               "div",
               {
                 id: `${k}-listbox`,
@@ -216,12 +217,12 @@ const xt = ct(
                   "div",
                   {
                     role: "option",
-                    "aria-selected": d === t.value,
+                    "aria-selected": g === t.value,
                     onClick: () => P(t.value),
                     title: t.label,
                     className: s(
                       "cursor-pointer truncate rounded-sm px-3 py-2 font-normal transition-colors",
-                      d === t.value ? e ? "bg-neutral-300 text-white" : "bg-slate-100" : e ? "hover:bg-neutral-300 hover:text-white" : "hover:bg-slate-100"
+                      g === t.value ? e ? "bg-neutral-300 text-white" : "bg-slate-100" : e ? "hover:bg-neutral-300 hover:text-white" : "hover:bg-slate-100"
                     ),
                     children: t.label
                   },