impact-nova 1.6.3 → 1.6.4

package/dist/components/ui/select/select.js

@@ -20,7 +20,7 @@ const Ot = (ge) => {
     defaultValue: Me,
     onChange: u,
     isMulti: f,
-    isDisabled: A,
+    isDisabled: V,
     isLoading: C,
     isClearable: ze = !0,
     isSearchable: q = !0,
@@ -38,7 +38,7 @@ const Ot = (ge) => {
     isRequired: _e,
     error: Se,
     helperText: ye,
-    id: V,
+    id: N,
     className: qe,
     parentClassName: Be,
     onMenuScrollToBottom: se,
@@ -61,14 +61,14 @@ const Ot = (ge) => {
     trim: Ze,
     filterOption: et,
     enableSubMenus: S = !1,
-    enableGroups: N = !1,
+    enableGroups: k = !1,
     fetchError: R,
     onRefetch: Oe,
     menuWidth: tt,
     onClearAll: Ae,
     onFocus: lt,
     onBlur: nt
-  } = ge, { t: K } = Pt(), ie = Le ?? K("select.placeholder"), [b, Ce] = _(He), [E, Y] = _(""), [Ie, re] = _(void 0), [d, v] = _(Me || (f ? [] : null)), [st, ae] = _(null), U = -2, [k, I] = _(-1), oe = G(!1), ce = G(null), ue = G(null), it = G(null), W = G(null), de = G(null);
+  } = ge, { t: K } = Pt(), ie = Le ?? K("select.placeholder"), [b, Ce] = _(He), [E, Y] = _(""), [Ie, re] = _(void 0), [d, v] = _(Me || (f ? [] : null)), [st, ae] = _(null), U = -2, [D, I] = _(-1), oe = G(!1), ce = G(null), ue = G(null), it = G(null), W = G(null), de = G(null);
   M(() => {
     ne !== void 0 && v(ne);
   }, [ne]), M(() => {
@@ -79,7 +79,7 @@ const Ot = (ge) => {
       e && clearTimeout(e);
     };
   }, [b, q, B]);
-  const { flatOptions: p, isProcessing: P, totalOptionsCount: Te, workerSelectAll: rt } = Nt(z, E, {
+  const { flatOptions: p, isProcessing: A, totalOptionsCount: Te, workerSelectAll: rt } = Nt(z, E, {
     ignoreCase: Xe,
     ignoreAccents: Ye,
     matchFrom: Je,
@@ -87,7 +87,7 @@ const Ot = (ge) => {
     trim: Ze,
     filterOption: et,
     enableSubMenus: S,
-    enableGroups: N
+    enableGroups: k
   }), y = kt(d, f ?? !1), { stats: F, getGroupStats: fe } = Dt(
     p,
     Te,
@@ -95,7 +95,7 @@ const Ot = (ge) => {
     y,
     d,
     f ?? !1
-  ), D = mt({
+  ), P = mt({
     count: p.length,
     getScrollElement: () => W.current,
     estimateSize: () => 34,
@@ -105,33 +105,33 @@ const Ot = (ge) => {
     if (!b)
       re(void 0), I(-1);
     else if (oe.current) {
-      const e = !C && !P && !R && f && X && !h && p.length > 0;
+      const e = !C && !A && !R && f && X && !h && p.length > 0;
       I(e ? U : 0), oe.current = !1;
     }
   }, [b]), M(() => {
-    k !== -1 && I(0);
+    D !== -1 && I(0);
   }, [E]), M(() => {
     if (!b) return;
     const e = requestAnimationFrame(() => {
-      D.measure();
+      P.measure();
     });
     return () => cancelAnimationFrame(e);
-  }, [b, D]), M(() => {
-    if (b && be && !P && p.length > 0) {
+  }, [b, P]), M(() => {
+    if (b && be && !A && p.length > 0) {
       const e = p.findIndex((t) => f ? y.mode === "exclude" ? !y.set.has(t.value) : y.set.has(t.value) : d?.value === t.value);
       if (e !== -1) {
         const t = setTimeout(() => {
-          D.scrollToIndex(e, { align: "center" });
+          P.scrollToIndex(e, { align: "center" });
         }, 50);
         return () => clearTimeout(t);
       }
     }
-  }, [b, be, P, p.length, f, y.mode, y.set, d, D]);
+  }, [b, be, A, p.length, f, y.mode, y.set, d, P]);
   const H = G(null);
   M(() => {
     if (!W.current || !se) return;
     const e = () => {
-      if (C || P) return;
+      if (C || A) return;
       const { scrollTop: l, scrollHeight: s, clientHeight: n } = W.current;
       if (s - l - n <= 10) {
         if (H.current) return;
@@ -140,7 +140,7 @@ const Ot = (ge) => {
         }, 500);
       }
     }, t = W.current;
-    return t.addEventListener("scroll", e), !C && !P && e(), () => {
+    return t.addEventListener("scroll", e), !C && !A && e(), () => {
       t.removeEventListener("scroll", e), H.current && (clearTimeout(H.current), H.current = null);
     };
   }, [
@@ -148,10 +148,10 @@ const Ot = (ge) => {
     p.length,
     b,
     C,
-    P
+    A
   ]);
   const J = (e) => {
-    if (!A)
+    if (!V)
       if (Ce(e), e)
         We?.();
       else {
@@ -159,14 +159,14 @@ const Ot = (ge) => {
         ke?.(t, l), Y(""), ae(null);
       }
   }, Q = (e) => {
-    if (!(A || h || e.isDisabled || ("children" in e || "options" in e) && e.isParentSelectable === !1))
+    if (!(V || h || e.isDisabled || ("children" in e || "options" in e) && e.isParentSelectable === !1))
       if (f) {
         const l = d || [];
         if ("children" in e || "options" in e) {
           const n = Vt(
             e,
             S,
-            N
+            k
           ).filter((i) => !i.isDisabled);
           if (T(l)) {
             const i = l.excludedValues, r = n.every(
@@ -235,7 +235,7 @@ const Ot = (ge) => {
           option: e
         }), Fe && (Ce(!1), ke?.(e, void 0), Y(""));
   }, pe = async () => {
-    if (!(!f || A || h)) {
+    if (!(!f || V || h)) {
       if (z.length > 3e3) {
         try {
           const e = await rt(
@@ -351,7 +351,7 @@ const Ot = (ge) => {
       if (f) {
         const t = [], l = (n) => {
           for (const i of n) {
-            if (N && "options" in i) {
+            if (k && "options" in i) {
               l(
                 i.options
               );
@@ -375,7 +375,7 @@ const Ot = (ge) => {
           const n = (i) => {
             for (const r of i) {
               if (s) return;
-              if (N && "options" in r) {
+              if (k && "options" in r) {
                 if (n(
                   r.options
                 ), s) return;
@@ -408,58 +408,58 @@ const Ot = (ge) => {
     d
   ), Z = (e) => Ve ? Ve(e) : e.label, Ee = () => {
     const e = [];
-    return !C && !P && !R && f && X && !h && p.length > 0 && e.push(U), p.forEach((l, s) => {
+    return !C && !A && !R && f && X && !h && p.length > 0 && e.push(U), p.forEach((l, s) => {
       !l.isGroup && !(S && l.isSubmenuParent) && !l.isDisabled && e.push(s);
     }), e;
   }, ct = (e) => {
-    if (A || h) return;
+    if (V || h) return;
     if (!b) {
       (e.key === "Enter" || e.key === " " || e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), oe.current = !0, J(!0));
       return;
     }
     const t = Ee();
     if (t.length === 0) return;
-    const l = t.indexOf(k);
+    const l = t.indexOf(D);
     if (e.key === "ArrowDown") {
       e.preventDefault();
       const s = l < t.length - 1 ? l + 1 : 0, n = t[s];
-      I(n), n >= 0 && D.scrollToIndex(n, { align: "auto" });
+      I(n), n >= 0 && P.scrollToIndex(n, { align: "auto" });
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       const s = l > 0 ? l - 1 : t.length - 1, n = t[s];
-      I(n), n >= 0 && D.scrollToIndex(n, { align: "auto" });
+      I(n), n >= 0 && P.scrollToIndex(n, { align: "auto" });
     } else if (e.key === "Enter" || e.key === " ") {
-      if (e.preventDefault(), k === U)
+      if (e.preventDefault(), D === U)
         pe();
-      else if (k >= 0 && k < p.length) {
-        const s = p[k];
+      else if (D >= 0 && D < p.length) {
+        const s = p[D];
         s.isDisabled || Q(s);
       }
     } else if (e.key === "Escape")
       e.preventDefault(), J(!1), ce.current?.focus();
     else if (e.key === "Home")
-      e.preventDefault(), t.length > 0 && (I(t[0]), t[0] >= 0 && D.scrollToIndex(t[0], { align: "auto" }));
+      e.preventDefault(), t.length > 0 && (I(t[0]), t[0] >= 0 && P.scrollToIndex(t[0], { align: "auto" }));
     else if (e.key === "End" && (e.preventDefault(), t.length > 0)) {
       const s = t[t.length - 1];
-      I(s), s >= 0 && D.scrollToIndex(s, { align: "auto" });
+      I(s), s >= 0 && P.scrollToIndex(s, { align: "auto" });
     }
   }, ut = (e) => {
     const t = Ee();
     if (t.length === 0) return;
-    const l = t.indexOf(k);
+    const l = t.indexOf(D);
     if (e.key === "ArrowDown") {
       e.preventDefault();
       const s = l < t.length - 1 ? l + 1 : 0, n = t[s];
-      I(n), n >= 0 && D.scrollToIndex(n, { align: "auto" });
+      I(n), n >= 0 && P.scrollToIndex(n, { align: "auto" });
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       const s = l > 0 ? l - 1 : t.length - 1, n = t[s];
-      I(n), n >= 0 && D.scrollToIndex(n, { align: "auto" });
+      I(n), n >= 0 && P.scrollToIndex(n, { align: "auto" });
     } else if (e.key === "Enter") {
-      if (e.preventDefault(), k === U)
+      if (e.preventDefault(), D === U)
         pe();
-      else if (k >= 0 && k < p.length) {
-        const s = p[k];
+      else if (D >= 0 && D < p.length) {
+        const s = p[D];
         s.isDisabled || Q(s);
       }
     } else e.key === "Escape" && (e.preventDefault(), J(!1), ce.current?.focus());
@@ -467,10 +467,10 @@ const Ot = (ge) => {
     if (f) {
       const e = d || [];
       let t = 0;
-      return T(e) ? t = Te - e.excludedValues.length : w(e) && (t = e.length), t === 0 ? null : t === 1 && w(e) ? /* @__PURE__ */ a("span", { className: "text-[#1f2b4d] text-[14px] font-medium truncate min-w-0 block", children: Z(e[0]) }) : /* @__PURE__ */ a("span", { className: "text-[#1f2b4d] text-[14px] font-medium truncate min-w-0 block", children: K("select.selectedCount", { count: t }) });
+      return T(e) ? t = Te - e.excludedValues.length : w(e) && (t = e.length), t === 0 ? null : t === 1 && w(e) ? /* @__PURE__ */ a("span", { className: O("text-[14px] font-medium truncate min-w-0 block", V ? "text-disabled-foreground" : "text-[#1f2b4d]"), children: Z(e[0]) }) : /* @__PURE__ */ a("span", { className: O("text-[14px] font-medium truncate min-w-0 block", V ? "text-disabled-foreground" : "text-[#1f2b4d]"), children: K("select.selectedCount", { count: t }) });
     } else {
       const e = d;
-      return e ? /* @__PURE__ */ a("span", { className: "text-[#1f2b4d] text-[14px] font-medium truncate min-w-0 block", children: Z(e) }) : null;
+      return e ? /* @__PURE__ */ a("span", { className: O("text-[14px] font-medium truncate min-w-0 block", V ? "text-disabled-foreground" : "text-[#1f2b4d]"), children: Z(e) }) : null;
     }
   };
   return /* @__PURE__ */ g(
@@ -481,7 +481,7 @@ const Ot = (ge) => {
         De === "left" ? "w-fit flex-row items-center" : "w-full flex-col",
         Be
       ),
-      "data-testid": `select-${V || "default"}`,
+      "data-testid": `select-${N || "default"}`,
       "data-component": "select",
       children: [
         L && /* @__PURE__ */ g(
@@ -505,15 +505,15 @@ const Ot = (ge) => {
               ref: ce,
               className: O(
                 "relative h-[32px] w-full cursor-pointer rounded-[8px] border border-solid px-3 py-1 text-left shadow-sm sm:text-sm transition-all flex items-center overflow-hidden",
-                Se ? "border-[#e15554] focus:ring-[#e15554]" : "border-[#c3c8d4] hover:border-gray-400 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500",
-                A ? "bg-[#f2f4fb] cursor-not-allowed opacity-75" : "",
+                Se ? "border-[#e15554] focus-visible:ring-[#e15554]" : "border-[#c3c8d4] hover:border-gray-400 focus-visible:border-indigo-500 focus-visible:ring-1 focus-visible:ring-indigo-500",
+                V ? "bg-[#f2f4fb] cursor-not-allowed opacity-75" : "",
                 h ? "cursor-default  bg-[#f2f4fb]" : "",
                 b ? "ring-1 ring-indigo-500 border-indigo-500" : "",
-                !A && !h && "bg-white",
+                !V && !h && "bg-white",
                 qe
               ),
-              id: V,
-              tabIndex: A ? -1 : 0,
+              id: N,
+              tabIndex: V ? -1 : 0,
               onFocus: lt,
               onBlur: nt,
               role: "combobox",
@@ -521,7 +521,7 @@ const Ot = (ge) => {
               "aria-haspopup": "listbox",
               "aria-label": L ? String(L) : ie,
               "data-component": "select-trigger",
-              "data-disabled": A || void 0,
+              "data-disabled": V || void 0,
               "data-state": b ? "open" : "closed",
               onKeyDown: ct,
               children: /* @__PURE__ */ g("div", { className: "flex items-center justify-between w-full min-w-0 max-w-full", children: [
@@ -530,13 +530,13 @@ const Ot = (ge) => {
                   "div",
                   {
                     className: "flex-1 flex items-center overflow-hidden min-w-0 max-w-full",
-                    "data-testid": `select-value-${V || "default"}`,
+                    "data-testid": `select-value-${N || "default"}`,
                     children: [
                       dt() || /* @__PURE__ */ a(
                         "span",
                         {
                           className: "text-[#b4bac7] font-normal text-[14px] truncate min-w-0 block",
-                          "data-testid": `select-placeholder-${V || "default"}`,
+                          "data-testid": `select-placeholder-${N || "default"}`,
                           "data-has-value": !1,
                           children: ie
                         }
@@ -557,8 +557,8 @@ const Ot = (ge) => {
                     ]
                   }
                 ),
-                /* @__PURE__ */ a("div", { className: "flex items-center gap-1 text-gray-400 shrink-0", children: !b && (C || P) ? /* @__PURE__ */ a(gt, { size: "14px" }) : /* @__PURE__ */ g(pt, { children: [
-                  ze && !h && (f && (T(
+                /* @__PURE__ */ a("div", { className: "flex items-center gap-1 text-gray-400 shrink-0", children: !b && (C || A) ? /* @__PURE__ */ a(gt, { size: "14px" }) : /* @__PURE__ */ g(pt, { children: [
+                  ze && !h && !V && (f && (T(
                     d
                   ) && d.isAllSelected || w(d) && d.length > 0) || !f && d) && /* @__PURE__ */ a(
                     "div",
@@ -603,7 +603,7 @@ const Ot = (ge) => {
                 "z-50 overflow-hidden rounded-[12px] text-base shadow-[0px_1px_6px_0px_rgba(26,39,124,0.14)] focus:outline-none sm:text-sm flex flex-col border-none pointer-events-auto",
                 h ? "bg-[#f5f5f5]" : "bg-white"
               ),
-              "data-testid": `select-menu-${V || "default"}`,
+              "data-testid": `select-menu-${N || "default"}`,
               "data-component": "select-menu",
               children: [
                 /* @__PURE__ */ g(
@@ -619,7 +619,7 @@ const Ot = (ge) => {
                         "div",
                         {
                           className: "p-0",
-                          "data-testid": `select-search-container-${V || "default"}`,
+                          "data-testid": `select-search-container-${N || "default"}`,
                           children: /* @__PURE__ */ g("div", { className: "relative", children: [
                             /* @__PURE__ */ a("div", { className: "absolute inset-y-0 left-[12px] flex items-center pointer-events-none", children: /* @__PURE__ */ a(vt, { size: "14px", color: "#AFAFAF" }) }),
                             /* @__PURE__ */ a(
@@ -636,28 +636,28 @@ const Ot = (ge) => {
                                   E === "" && t !== "" ? ue.current && re(ue.current.offsetHeight) : t === "" && re(void 0), Y(t), Ue?.(t);
                                 },
                                 onClick: (e) => e.stopPropagation(),
-                                "data-testid": `select-search-input-${V || "default"}`
+                                "data-testid": `select-search-input-${N || "default"}`
                               }
                             )
                           ] })
                         }
                       ),
-                      !C && !P && !R && f && X && !h && p.length > 0 && /* @__PURE__ */ a(
+                      !C && !A && !R && f && X && !h && p.length > 0 && /* @__PURE__ */ a(
                         "div",
                         {
                           className: "pb-1",
-                          "data-testid": `select-select-all-container-${V || "default"}`,
+                          "data-testid": `select-select-all-container-${N || "default"}`,
                           children: /* @__PURE__ */ a(
                             "div",
                             {
                               className: O(
                                 "flex items-center justify-between cursor-pointer rounded-md hover:bg-gray-100 transition-colors py-[6px] px-3 w-full",
-                                k === U && "ring-2 ring-inset ring-primary bg-[#edf0ff]"
+                                D === U && "ring-2 ring-inset ring-primary bg-[#edf0ff]"
                               ),
                               onClick: pe,
                               role: "option",
                               "aria-selected": !1,
-                              "data-testid": `select-select-all-button-${V || "default"}`,
+                              "data-testid": `select-select-all-button-${N || "default"}`,
                               children: /* @__PURE__ */ g("div", { className: "flex items-center flex-1", children: [
                                 /* @__PURE__ */ a("div", { className: "pointer-events-none flex", children: /* @__PURE__ */ a(
                                   Ge,
@@ -668,17 +668,17 @@ const Ot = (ge) => {
                                       const l = x ? Math.min(e, x) : e;
                                       return t > 0 && t < l ? "indeterminate" : t >= l;
                                     })(),
-                                    disabled: A || h,
+                                    disabled: V || h,
                                     onChange: () => {
                                     },
-                                    "data-testid": `select-select-all-checkbox-${V || "default"}`
+                                    "data-testid": `select-select-all-checkbox-${N || "default"}`
                                   }
                                 ) }),
                                 /* @__PURE__ */ a(
                                   "span",
                                   {
                                     className: "text-sm font-medium text-gray-700",
-                                    "data-testid": `select-select-all-label-${V || "default"}`,
+                                    "data-testid": `select-select-all-label-${N || "default"}`,
                                     children: (() => {
                                       const { totalVisible: e, selectedVisible: t } = F, l = x ? Math.min(e, x) : e, s = e > 0 && t >= l;
                                       return K(s ? "select.unselectAll" : "select.selectAll");
@@ -716,7 +716,7 @@ const Ot = (ge) => {
                           children: "Refetch"
                         }
                       )
-                    ] }) : p.length === 0 && !C && !P ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: "No options found" }) : C || P ? /* @__PURE__ */ a("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((e, t) => /* @__PURE__ */ g(
+                    ] }) : p.length === 0 && !C && !A ? /* @__PURE__ */ a("div", { className: "flex items-center justify-center py-8 text-sm text-gray-500", children: "No options found" }) : C || A ? /* @__PURE__ */ a("div", { className: "px-1 py-1 space-y-1", children: Array.from({ length: 6 }).map((e, t) => /* @__PURE__ */ g(
                       "div",
                       {
                         className: "flex items-center gap-2 px-3 py-2 animate-pulse",
@@ -730,19 +730,19 @@ const Ot = (ge) => {
                       "div",
                       {
                         style: {
-                          height: `${D.getTotalSize()}px`,
+                          height: `${P.getTotalSize()}px`,
                           width: "100%",
                           position: "relative"
                         },
-                        children: D.getVirtualItems().map((e) => {
-                          const t = p[e.index], l = f ? y.mode === "exclude" ? !y.set.has(t.value) : y.set.has(t.value) : d?.value === t.value, s = d || [], n = f && x ? T(s) ? !1 : w(s) && s.length >= x : !1, i = t.isDisabled || n && !l && !(N && t.isGroup) && !(S && t.isSubmenuParent), r = N && t.isGroup || S && t.isSubmenuParent ? fe(t.original) : void 0, c = r?.selected || 0, o = r?.total || 0, m = c > 0 && c < o, ee = t.isParentSelectable !== !1, me = V || "default", te = String(t.value || ""), he = Z(
+                        children: P.getVirtualItems().map((e) => {
+                          const t = p[e.index], l = f ? y.mode === "exclude" ? !y.set.has(t.value) : y.set.has(t.value) : d?.value === t.value, s = d || [], n = f && x ? T(s) ? !1 : w(s) && s.length >= x : !1, i = t.isDisabled || n && !l && !(k && t.isGroup) && !(S && t.isSubmenuParent), r = k && t.isGroup || S && t.isSubmenuParent ? fe(t.original) : void 0, c = r?.selected || 0, o = r?.total || 0, m = c > 0 && c < o, ee = t.isParentSelectable !== !1, me = N || "default", te = String(t.value || ""), he = Z(
                             t
                           ), ft = typeof he == "string" ? he : te;
                           return /* @__PURE__ */ g(
                             "div",
                             {
                               "data-index": e.index,
-                              ref: D.measureElement,
+                              ref: P.measureElement,
                               className: "absolute left-0 w-full pb-[2px]",
                               style: {
                                 transform: `translateY(${e.start}px)`,
@@ -756,14 +756,14 @@ const Ot = (ge) => {
                                     className: O(
                                       "cursor-default select-none py-[6px] px-3 flex items-center justify-between transition-colors rounded-md",
                                       i ? "opacity-50 cursor-not-allowed bg-[#f5f5f5]" : h ? "cursor-default" : "hover:bg-gray-100 cursor-pointer",
-                                      l && !i && !(N && t.isGroup) && !(S && t.isSubmenuParent) ? "bg-[#edf0ff] text-[#1f2b4d]" : "text-[#1f2b4d]",
-                                      k === e.index && !i && "ring-2 ring-inset ring-primary bg-[#edf0ff]"
+                                      l && !i && !(k && t.isGroup) && !(S && t.isSubmenuParent) ? "bg-[#edf0ff] text-[#1f2b4d]" : "text-[#1f2b4d]",
+                                      D === e.index && !i && "ring-2 ring-inset ring-primary bg-[#edf0ff]"
                                     ),
                                     style: {
                                       paddingLeft: `${t.depth * 16 + 12}px`
                                     },
                                     onClick: () => {
-                                      i || (N && t.isGroup || S && t.isSubmenuParent) && !ee || Q(t);
+                                      i || (k && t.isGroup || S && t.isSubmenuParent) && !ee || Q(t);
                                     },
                                     onMouseEnter: ($) => {
                                       if (S && t.isSubmenuParent) {
@@ -790,7 +790,7 @@ const Ot = (ge) => {
                                       },
                                       t
                                     ) : /* @__PURE__ */ g("div", { className: "flex items-center flex-1 overflow-hidden", children: [
-                                      f && (N && t.isGroup || S && t.isSubmenuParent ? ee : !0) && /* @__PURE__ */ a(
+                                      f && (k && t.isGroup || S && t.isSubmenuParent ? ee : !0) && /* @__PURE__ */ a(
                                         Ge,
                                         {
                                           checked: m ? "indeterminate" : l,
@@ -799,7 +799,7 @@ const Ot = (ge) => {
                                           }
                                         }
                                       ),
-                                      ve && !(N && t.isGroup) && !(S && t.isSubmenuParent) ? /* @__PURE__ */ a(
+                                      ve && !(k && t.isGroup) && !(S && t.isSubmenuParent) ? /* @__PURE__ */ a(
                                         ht,
                                         {
                                           label: Z(
@@ -813,8 +813,8 @@ const Ot = (ge) => {
                                           {
                                             className: O(
                                               "block truncate",
-                                              N && t.isGroup ? "text-xs font-semibold text-gray-400 uppercase tracking-wider" : l && !(S && t.isSubmenuParent) ? "font-medium" : "font-normal",
-                                              !(N && t.isGroup) && "text-[14px]"
+                                              k && t.isGroup ? "text-xs font-semibold text-gray-400 uppercase tracking-wider" : l && !(S && t.isSubmenuParent) ? "font-medium" : "font-normal",
+                                              !(k && t.isGroup) && "text-[14px]"
                                             ),
                                             "data-testid": `select-option-label-${me}-${te}`,
                                             "data-state": l ? "checked" : "unchecked",
@@ -822,7 +822,7 @@ const Ot = (ge) => {
                                             children: he
                                           }
                                         ),
-                                        (N && t.isGroup || S && t.isSubmenuParent) && c > 0 && /* @__PURE__ */ a("span", { className: "inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800", children: c })
+                                        (k && t.isGroup || S && t.isSubmenuParent) && c > 0 && /* @__PURE__ */ a("span", { className: "inline-flex items-center justify-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800", children: c })
                                       ] }),
                                       S && t.isSubmenuParent && /* @__PURE__ */ a(
                                         $e,
@@ -847,7 +847,7 @@ const Ot = (ge) => {
                                     },
                                     getSelectedCount: ($) => fe($)?.selected || 0,
                                     handleSelect: Q,
-                                    id: V
+                                    id: N
                                   }
                                 )
                               ]

package/dist/components/ui/statistics-card.d.ts

@@ -33,17 +33,13 @@ interface StatisticsCardRootProps<T = StatisticsCardItem> extends React.HTMLAttr
 }
 declare const StatisticsCardRoot: React.ForwardRefExoticComponent<StatisticsCardRootProps<StatisticsCardItem> & React.RefAttributes<HTMLDivElement>>;
 declare const StatisticsCardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-interface StatisticsCardTitleProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-declare const StatisticsCardTitle: React.ForwardRefExoticComponent<StatisticsCardTitleProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 interface StatisticsCardTitleIconProps extends React.HTMLAttributes<HTMLDivElement> {
     icon: React.ReactNode;
     className?: string;
 }
 declare const StatisticsCardTitleIcon: React.ForwardRefExoticComponent<StatisticsCardTitleIconProps & React.RefAttributes<HTMLDivElement>>;
-interface StatisticsCardTitleTextProps extends React.HTMLAttributes<HTMLSpanElement> {
-}
-declare const StatisticsCardTitleText: React.ForwardRefExoticComponent<StatisticsCardTitleTextProps & React.RefAttributes<HTMLSpanElement>>;
+declare const StatisticsCardTitleText: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 interface StatisticsCardTitleTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     content: string;
     icon?: React.ReactNode;
@@ -73,9 +69,7 @@ interface StatisticsCardLegendItemProps extends React.HTMLAttributes<HTMLDivElem
     item?: StatisticsCardItem;
 }
 declare const StatisticsCardLegendItem: React.ForwardRefExoticComponent<StatisticsCardLegendItemProps & React.RefAttributes<HTMLDivElement>>;
-interface StatisticsCardSummaryProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-declare const StatisticsCardSummary: React.ForwardRefExoticComponent<StatisticsCardSummaryProps & React.RefAttributes<HTMLDivElement>>;
+declare const StatisticsCardSummary: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 interface StatisticsCardSummaryItemProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     count: number | string | React.ReactNode;
@@ -83,4 +77,4 @@ interface StatisticsCardSummaryItemProps extends React.HTMLAttributes<HTMLDivEle
 }
 declare const StatisticsCardSummaryItem: React.ForwardRefExoticComponent<StatisticsCardSummaryItemProps & React.RefAttributes<HTMLDivElement>>;
 export { StatisticsCardRoot, StatisticsCardHeader, StatisticsCardTitle, StatisticsCardTitleIcon, StatisticsCardTitleText, StatisticsCardTitleTooltip, StatisticsCardChart, StatisticsCardLegend, StatisticsCardLegendItem, StatisticsCardSummary, StatisticsCardSummaryItem, };
-export type { StatisticsCardRootProps, StatisticsCardTitleProps, StatisticsCardTitleIconProps, StatisticsCardTitleTextProps, StatisticsCardTitleTooltipProps, StatisticsCardChartProps, StatisticsCardLegendItemProps, StatisticsCardSummaryProps, StatisticsCardSummaryItemProps };
+export type { StatisticsCardRootProps, StatisticsCardTitleIconProps, StatisticsCardTitleTooltipProps, StatisticsCardChartProps, StatisticsCardLegendItemProps, StatisticsCardSummaryItemProps };

package/dist/components/ui/statistics-card.hooks.d.ts

@@ -83,6 +83,7 @@ export declare const useStatisticsChartPlotOptions: (items: StatisticsCardItem[]
             enabled: boolean;
         };
         showInLegend: boolean;
+        allowPointSelect: boolean;
         states: {
             hover: {
                 enabled: boolean;
@@ -134,6 +135,7 @@ export declare const useStatisticsChartOptions: (items: StatisticsCardItem[], on
                 enabled: boolean;
             };
             showInLegend: boolean;
+            allowPointSelect: boolean;
             states: {
                 hover: {
                     enabled: boolean;

package/dist/components/ui/statistics-card.hooks.js

@@ -1,17 +1,17 @@
 import * as a from "react";
 const f = (e) => {
-  const s = a.useMemo(
-    () => e.reduce((o, n) => o + n.value, 0),
+  const o = a.useMemo(
+    () => e.reduce((s, n) => s + n.value, 0),
     [e]
   ), t = a.useMemo(
-    () => e.reduce((o, n) => o + (n.checked ? n.value : 0), 0),
+    () => e.reduce((s, n) => s + (n.checked ? n.value : 0), 0),
     [e]
-  ), r = e.some((o) => o.checked);
-  return { total: s, checkedTotal: t, hasChecked: r };
-}, p = (e, s = 0.4) => {
-  const t = e.replace("#", ""), r = parseInt(t.substring(0, 2), 16), o = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
-  return `rgba(${r}, ${o}, ${n}, ${s})`;
-}, x = (e, s) => a.useMemo(
+  ), r = e.some((s) => s.checked);
+  return { total: o, checkedTotal: t, hasChecked: r };
+}, p = (e, o = 0.4) => {
+  const t = e.replace("#", ""), r = parseInt(t.substring(0, 2), 16), s = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
+  return `rgba(${r}, ${s}, ${n}, ${o})`;
+}, x = (e, o) => a.useMemo(
   () => [
     {
       type: "pie",
@@ -20,14 +20,14 @@ const f = (e) => {
       data: e.map((t) => ({
         name: t.label,
         y: t.value,
-        color: s ? t.checked ? t.borderColor : p(t.borderColor, 0.4) : t.borderColor
+        color: o ? t.checked ? t.borderColor : p(t.borderColor, 0.4) : t.borderColor
       }))
     }
   ],
-  [e, s]
-), y = (e, s, t, r) => a.useMemo(
-  () => e ?? String(s ? t : r),
-  [e, s, t, r]
+  [e, o]
+), y = (e, o, t, r) => a.useMemo(
+  () => e ?? String(o ? t : r),
+  [e, o, t, r]
 ), b = () => a.useMemo(
   () => ({
     enabled: !0,
@@ -51,16 +51,18 @@ const f = (e) => {
     }
   }),
   []
-), h = (e, s, t) => {
-  const r = t?.borderWidth ?? 2, o = t?.borderColor ?? "#F8F9FB", n = t?.borderRadius ?? 4, i = t?.enableHover ?? !0, l = t?.enableClick ?? !0;
+), h = (e, o, t) => {
+  const r = t?.borderWidth ?? 2, s = t?.borderColor ?? "#F8F9FB", n = t?.borderRadius ?? 4, i = t?.enableHover ?? !0, l = t?.enableClick ?? !0;
   return a.useMemo(
     () => ({
       pie: {
         borderWidth: r,
-        borderColor: o,
+        borderColor: s,
         borderRadius: n,
         dataLabels: { enabled: !1 },
         showInLegend: !1,
+        allowPointSelect: !1,
+        // Disable pull-out effect on click
         states: { hover: { enabled: i, brightness: 0.05 } },
         // Handle slice click to toggle corresponding legend item
         point: {
@@ -68,16 +70,16 @@ const f = (e) => {
             click: function() {
               if (!l) return;
               const u = this.name, c = e.findIndex((d) => d.label === u);
-              c !== -1 && s && s(c, !e[c].checked);
+              c !== -1 && o && o(c, !e[c].checked);
             }
           }
         }
       }
     }),
-    [e, s, r, o, n, i, l]
+    [e, o, r, s, n, i, l]
   );
-}, g = (e, s, t) => {
-  const r = b(), o = h(e, s, t);
+}, S = (e, o, t) => {
+  const r = b(), s = h(e, o, t);
   return a.useMemo(
     () => ({
       chart: {
@@ -85,15 +87,15 @@ const f = (e) => {
         spacing: [0, 0, 0, 0]
       },
       tooltip: r,
-      plotOptions: o
+      plotOptions: s
     }),
-    [r, o]
+    [r, s]
   );
 };
 export {
   f as useStatisticsChartData,
   y as useStatisticsChartLabel,
-  g as useStatisticsChartOptions,
+  S as useStatisticsChartOptions,
   h as useStatisticsChartPlotOptions,
   x as useStatisticsChartSeries,
   b as useStatisticsChartTooltip