saha-ui 1.22.9 → 1.22.10

package/dist/components/Select/index.js

@@ -1,63 +1,96 @@
-import { jsx as e, jsxs as h, Fragment as Oe } from "react/jsx-runtime";
-import { createContext as Ae, forwardRef as L, useState as O, useRef as $, useEffect as B, useCallback as Ve, useContext as T } from "react";
-import { createPortal as oe } from "react-dom";
-import { cn as d } from "../../lib/utils.js";
-import { useClickOutside as Le } from "../../hooks/useClickOutside.js";
-import { X as ie, ChevronDown as ce, Search as Pe, Check as de } from "lucide-react";
-import { selectTriggerVariants as ue, selectOptionVariants as M, selectMenuVariants as fe } from "./Select.styles.js";
-const P = Ae({}), pe = L(
+import { jsx as e, jsxs as b, Fragment as Le } from "react/jsx-runtime";
+import { createContext as Ve, forwardRef as D, useState as L, useRef as I, useCallback as O, useEffect as M, useContext as J } from "react";
+import { createPortal as me } from "react-dom";
+import { cn as p } from "../../lib/utils.js";
+import { useClickOutside as Re } from "../../hooks/useClickOutside.js";
+import { X as pe, ChevronDown as he, Search as Ie, Check as ge } from "lucide-react";
+import { selectTriggerVariants as ye, selectOptionVariants as ae, selectMenuVariants as we } from "./Select.styles.js";
+const U = Ve({
+  items: /* @__PURE__ */ new Map(),
+  registerItem: () => {
+  },
+  unregisterItem: () => {
+  },
+  triggerRef: null
+}), ve = D(
   ({
-    value: r,
-    defaultValue: u,
-    onValueChange: o,
-    open: l,
-    defaultOpen: s,
-    onOpenChange: n,
-    disabled: p = !1,
-    variant: v = "default",
-    size: m = "md",
-    children: b,
-    className: N,
-    multiple: f = !1,
-    closeOnSelect: S = !0,
-    clearable: q = !1,
-    name: y
-  }, D) => {
-    const [U, A] = O(u || (f ? [] : "")), [X, F] = O(
-      s || !1
-    ), w = r !== void 0 ? r : U, V = l !== void 0 ? l : X, G = f ? !1 : S, E = (g) => {
-      r === void 0 && A(g), o?.(g);
-    }, z = (g) => {
-      l === void 0 && F(g), n?.(g);
-    };
+    value: t,
+    defaultValue: o,
+    onValueChange: g,
+    open: n,
+    defaultOpen: h,
+    onOpenChange: v,
+    disabled: d = !1,
+    variant: u = "default",
+    size: f = "md",
+    children: i,
+    className: c,
+    multiple: s = !1,
+    closeOnSelect: y = !0,
+    clearable: k = !1,
+    name: x
+  }, X) => {
+    const [V, N] = L(o || (s ? [] : "")), [B, K] = L(
+      h || !1
+    ), [Z, E] = L(/* @__PURE__ */ new Map()), _ = I(null), C = t !== void 0 ? t : V, F = n !== void 0 ? n : B, G = s ? !1 : y, P = O(
+      (w) => {
+        t === void 0 && N(w), g?.(w);
+      },
+      [t, g]
+    ), Q = O(
+      (w) => {
+        n === void 0 && K(w), v?.(w);
+      },
+      [n, v]
+    ), W = O(
+      (w, z) => {
+        E((j) => {
+          const $ = new Map(j);
+          return $.set(w, z), $;
+        });
+      },
+      []
+    ), ee = O((w) => {
+      E((z) => {
+        const j = new Map(z);
+        return j.delete(w), j;
+      });
+    }, []), te = O(
+      (w) => {
+        w.stopPropagation(), P(s ? [] : "");
+      },
+      [s, P]
+    ), Y = s ? Array.isArray(C) && C.length > 0 : !!C;
     return /* @__PURE__ */ e(
-      P.Provider,
+      U.Provider,
       {
         value: {
-          value: w,
-          onValueChange: E,
-          open: V,
-          onOpenChange: z,
-          disabled: p,
-          variant: v,
-          size: m,
-          multiple: f,
-          closeOnSelect: G
+          value: C,
+          onValueChange: P,
+          open: F,
+          onOpenChange: Q,
+          disabled: d,
+          variant: u,
+          size: f,
+          multiple: s,
+          closeOnSelect: G,
+          items: Z,
+          registerItem: W,
+          unregisterItem: ee,
+          triggerRef: _
         },
-        children: /* @__PURE__ */ h("div", { ref: D, className: d("relative", N), children: [
-          b,
-          y && f && Array.isArray(w) && w.map((g) => /* @__PURE__ */ e("input", { type: "hidden", name: y, value: g }, g)),
-          y && !f && w && /* @__PURE__ */ e("input", { type: "hidden", name: y, value: String(w) }),
-          q && !p && (f ? Array.isArray(w) && w.length > 0 : !!w) && /* @__PURE__ */ e(
+        children: /* @__PURE__ */ b("div", { ref: X, className: p("relative", c), children: [
+          i,
+          x && s && Array.isArray(C) && C.map((w) => /* @__PURE__ */ e("input", { type: "hidden", name: x, value: w }, w)),
+          x && !s && C && /* @__PURE__ */ e("input", { type: "hidden", name: x, value: String(C) }),
+          k && !d && Y && /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: (g) => {
-                g.stopPropagation(), E(f ? [] : "");
-              },
-              className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-foreground/10 transition-colors",
+              onClick: te,
+              className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-foreground/10 transition-colors z-10",
               "aria-label": "Clear selection",
-              children: /* @__PURE__ */ e(ie, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ e(pe, { className: "w-4 h-4" })
             }
           )
         ] })
@@ -65,282 +98,289 @@ const P = Ae({}), pe = L(
     );
   }
 );
-pe.displayName = "SelectComposable";
-const me = L(
-  (r, u) => {
+ve.displayName = "SelectComposable";
+const xe = D(
+  (t, o) => {
     const {
-      label: o,
-      description: l,
-      placeholder: s = "Select an option...",
-      error: n,
-      helperText: p,
-      value: v,
-      defaultValue: m,
-      onChange: b,
-      options: N,
-      multiple: f = !1,
-      searchable: S = !1,
-      clearable: q = !1,
-      disabled: y = !1,
-      required: D = !1,
-      loading: U = !1,
-      variant: A = "default",
-      size: X = "md",
-      fullWidth: F = !0,
-      maxHeight: w = "300px",
-      maxSelections: V,
-      closeOnSelect: G = !0,
-      showCheckmarks: E = !0,
-      creatable: z = !1,
-      onCreateOption: g,
-      renderOption: Q,
-      renderValue: J,
-      icon: K,
-      clearIcon: he,
-      dropdownIcon: ve,
-      name: Z,
-      id: _,
-      className: ge,
-      menuClassName: ye,
-      optionClassName: ee
-    } = r, [x, j] = O(!1), [C, W] = O(""), [be, te] = O(m || (f ? [] : "")), [I, we] = O({
+      label: g,
+      description: n,
+      placeholder: h = "Select an option...",
+      error: v,
+      helperText: d,
+      value: u,
+      defaultValue: f,
+      onChange: i,
+      options: c = [],
+      multiple: s = !1,
+      searchable: y = !1,
+      clearable: k = !1,
+      disabled: x = !1,
+      required: X = !1,
+      loading: V = !1,
+      variant: N = "default",
+      size: B = "md",
+      fullWidth: K = !0,
+      maxHeight: Z = "300px",
+      maxSelections: E,
+      closeOnSelect: _ = !0,
+      showCheckmarks: C = !0,
+      creatable: F = !1,
+      onCreateOption: G,
+      renderOption: P,
+      renderValue: Q,
+      icon: W,
+      clearIcon: ee,
+      dropdownIcon: te,
+      name: Y,
+      id: w,
+      className: z,
+      menuClassName: j,
+      optionClassName: $
+    } = t, [S, q] = L(!1), [A, re] = L(""), [be, le] = L(f || (s ? [] : "")), [H, Ne] = L({
       top: 0,
       left: 0,
       width: 0
-    }), re = f ? !1 : G, R = v !== void 0, c = R ? v : be, ne = $(null), Y = $(null), H = $(null);
-    Le(ne, () => {
-      x && j(!1);
-    }), B(() => {
-      x && S && H.current && H.current.focus();
-    }, [x, S]), B(() => {
-      if (x && Y.current) {
-        const t = () => {
-          const i = Y.current?.getBoundingClientRect();
-          i && we({
-            top: i.bottom + window.scrollY,
-            left: i.left + window.scrollX,
-            width: i.width
+    }), oe = s ? !1 : _, T = u !== void 0, m = T ? u : be, ie = I(null), ne = I(null), se = I(null), ce = I(null);
+    Re(
+      ie,
+      () => {
+        S && q(!1);
+      },
+      [ce]
+    ), M(() => {
+      S && y && se.current && se.current.focus();
+    }, [S, y]), M(() => {
+      if (S && ne.current) {
+        const r = () => {
+          const l = ne.current?.getBoundingClientRect();
+          l && Ne({
+            top: l.bottom + window.scrollY,
+            left: l.left + window.scrollX,
+            width: l.width
           });
         };
-        return t(), window.addEventListener("scroll", t, !0), window.addEventListener("resize", t), () => {
-          window.removeEventListener("scroll", t, !0), window.removeEventListener("resize", t);
+        return r(), window.addEventListener("scroll", r, !0), window.addEventListener("resize", r), () => {
+          window.removeEventListener("scroll", r, !0), window.removeEventListener("resize", r);
         };
       }
-    }, [x]);
-    const ae = C ? N.filter(
-      (t) => t.label.toLowerCase().includes(C.toLowerCase()) || t.description?.toLowerCase().includes(C.toLowerCase())
-    ) : N, xe = ae.reduce(
-      (t, i) => {
-        const a = i.group || "default";
-        return t[a] || (t[a] = []), t[a].push(i), t;
+    }, [S]);
+    const de = A ? c.filter(
+      (r) => r.label.toLowerCase().includes(A.toLowerCase()) || r.description?.toLowerCase().includes(A.toLowerCase())
+    ) : c, Ce = de.reduce(
+      (r, l) => {
+        const a = l.group || "default";
+        return r[a] || (r[a] = []), r[a].push(l), r;
       },
       {}
-    ), le = Ve(
-      (t) => {
-        if (y) return;
-        let i;
-        if (f) {
-          const a = Array.isArray(c) ? c : [];
-          if (a.includes(t))
-            i = a.filter((k) => k !== t);
+    ), ue = O(
+      (r) => {
+        if (x) return;
+        let l;
+        if (s) {
+          const a = Array.isArray(m) ? m : [];
+          if (a.includes(r))
+            l = a.filter((R) => R !== r);
           else {
-            if (V && a.length >= V)
+            if (E && a.length >= E)
               return;
-            i = [...a, t];
+            l = [...a, r];
           }
         } else
-          i = t, re && j(!1);
-        R || te(i), b?.(i), S && W("");
+          l = r, oe && q(!1);
+        T || le(l), i && i(l), y && re("");
       },
       [
-        y,
-        f,
-        c,
-        V,
-        re,
-        R,
-        b,
-        S
+        x,
+        s,
+        m,
+        E,
+        oe,
+        T,
+        i,
+        y
       ]
-    ), Ne = (t) => {
-      t.stopPropagation();
-      const i = f ? [] : "";
-      R || te(i), b?.(i);
-    }, Ce = () => {
-      z && C && g && (g(C), W(""), j(!1));
-    }, Se = (t) => f && Array.isArray(c) ? c.includes(t) : c === t, ke = () => {
-      if (J)
-        return J(c);
-      if (f && Array.isArray(c) && c.length > 0) {
-        const t = N.filter(
-          (i) => c.includes(i.value)
+    ), Se = O(
+      (r) => {
+        r.stopPropagation();
+        const l = s ? [] : "";
+        T || le(l), i && i(l);
+      },
+      [s, T, i]
+    ), ke = () => {
+      F && A && G && (G(A), re(""), q(!1));
+    }, Ae = (r) => s && Array.isArray(m) ? m.includes(r) : m === r, Oe = () => {
+      if (Q)
+        return Q(m);
+      if (s && Array.isArray(m) && m.length > 0) {
+        const r = c.filter(
+          (l) => m.includes(l.value)
         );
-        return t.length === 1 ? t[0].label : `${t.length} selected`;
+        return r.length === 1 ? r[0].label : `${r.length} selected`;
       }
-      return !f && c ? N.find(
-        (i) => i.value === c
-      )?.label || c : s;
-    }, se = f ? Array.isArray(c) && c.length > 0 : !!c;
-    return /* @__PURE__ */ h("div", { ref: u, className: d("flex flex-col gap-2", ge), children: [
-      (o || l) && /* @__PURE__ */ h("div", { className: "flex flex-col gap-1", children: [
-        o && /* @__PURE__ */ e(
+      return !s && m ? c.find(
+        (l) => l.value === m
+      )?.label || m : h;
+    }, fe = s ? Array.isArray(m) && m.length > 0 : !!m;
+    return /* @__PURE__ */ b("div", { ref: o, className: p("flex flex-col gap-2", z), children: [
+      (g || n) && /* @__PURE__ */ b("div", { className: "flex flex-col gap-1", children: [
+        g && /* @__PURE__ */ e(
           "label",
           {
-            htmlFor: _,
-            className: d(
+            htmlFor: w,
+            className: p(
               "text-sm font-semibold text-foreground",
-              D && "after:content-['*'] after:ml-1 after:text-destructive"
+              X && "after:content-['*'] after:ml-1 after:text-destructive"
             ),
-            children: o
+            children: g
           }
         ),
-        l && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: l })
+        n && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: n })
       ] }),
-      /* @__PURE__ */ h("div", { ref: ne, className: "relative", children: [
-        /* @__PURE__ */ h(
+      /* @__PURE__ */ b("div", { ref: ie, className: "relative", children: [
+        /* @__PURE__ */ b(
           "button",
           {
-            ref: Y,
+            ref: ne,
             type: "button",
-            id: _,
-            onClick: () => !y && j(!x),
-            className: d(
-              ue({
-                variant: A,
-                size: X,
-                error: !!n,
-                fullWidth: F
+            id: w,
+            onClick: () => !x && q(!S),
+            className: p(
+              ye({
+                variant: N,
+                size: B,
+                error: !!v,
+                fullWidth: K
               })
             ),
-            disabled: y,
+            disabled: x,
             "aria-haspopup": "listbox",
-            "aria-expanded": x,
+            "aria-expanded": S,
             children: [
-              K && /* @__PURE__ */ e("span", { className: "shrink-0", children: K }),
+              W && /* @__PURE__ */ e("span", { className: "shrink-0", children: W }),
               /* @__PURE__ */ e(
                 "span",
                 {
-                  className: d(
+                  className: p(
                     "flex-1 text-left truncate",
-                    !se && "text-muted-foreground"
+                    !fe && "text-muted-foreground"
                   ),
-                  children: U ? "Loading..." : ke()
+                  children: V ? "Loading..." : Oe()
                 }
               ),
               /* @__PURE__ */ e(
                 "span",
                 {
-                  className: d(
+                  className: p(
                     "transition-transform duration-200",
-                    x && "rotate-180"
+                    S && "rotate-180"
                   ),
-                  children: ve || /* @__PURE__ */ e(ce, { className: "w-5 h-5" })
+                  children: te || /* @__PURE__ */ e(he, { className: "w-5 h-5" })
                 }
               )
             ]
           }
         ),
-        q && se && !y && /* @__PURE__ */ e(
+        k && fe && !x && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: (t) => {
-              t.stopPropagation(), Ne(t);
-            },
-            className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-foreground/10 transition-colors",
+            onClick: Se,
+            className: "absolute right-10 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-foreground/10 transition-colors z-10",
             "aria-label": "Clear selection",
-            children: he || /* @__PURE__ */ e(ie, { className: "w-4 h-4" })
+            children: ee || /* @__PURE__ */ e(pe, { className: "w-4 h-4" })
           }
         ),
-        x && !y && typeof window < "u" && oe(
-          /* @__PURE__ */ h(
+        S && !x && typeof window < "u" && me(
+          /* @__PURE__ */ b(
             "div",
             {
-              className: d(fe({ variant: A }), ye),
+              ref: ce,
+              className: p(we({ variant: N }), j),
               style: {
                 position: "absolute",
-                top: `${I.top}px`,
-                left: `${I.left}px`,
-                width: `${I.width}px`,
+                top: `${H.top}px`,
+                left: `${H.left}px`,
+                width: `${H.width}px`,
                 zIndex: 9999,
-                opacity: I.width > 0 ? 1 : 0,
+                opacity: H.width > 0 ? 1 : 0,
                 transition: "opacity 0.15s ease-out"
               },
               role: "listbox",
-              "aria-multiselectable": f,
+              "aria-multiselectable": s,
               children: [
-                S && /* @__PURE__ */ e("div", { className: "p-2 border-b-2 border-border/50", children: /* @__PURE__ */ h("div", { className: "relative", children: [
-                  /* @__PURE__ */ e(Pe, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+                y && /* @__PURE__ */ e("div", { className: "p-2 border-b-2 border-border/50", children: /* @__PURE__ */ b("div", { className: "relative", children: [
+                  /* @__PURE__ */ e(Ie, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
                   /* @__PURE__ */ e(
                     "input",
                     {
-                      ref: H,
+                      ref: se,
                       type: "text",
-                      value: C,
-                      onChange: (t) => W(t.target.value),
+                      value: A,
+                      onChange: (r) => re(r.target.value),
                       placeholder: "Search...",
                       className: "w-full pl-10 pr-4 py-2 bg-background/50 rounded-md border-2 border-border/50 focus:border-primary focus:outline-none transition-colors"
                     }
                   )
                 ] }) }),
-                /* @__PURE__ */ e("div", { className: "overflow-y-auto", style: { maxHeight: w }, children: ae.length === 0 ? /* @__PURE__ */ e("div", { className: "px-4 py-8 text-center text-muted-foreground", children: C ? /* @__PURE__ */ h(Oe, { children: [
+                /* @__PURE__ */ e("div", { className: "overflow-y-auto", style: { maxHeight: Z }, children: de.length === 0 ? /* @__PURE__ */ e("div", { className: "px-4 py-8 text-center text-muted-foreground", children: A ? /* @__PURE__ */ b(Le, { children: [
                   /* @__PURE__ */ e("p", { children: "No results found" }),
-                  z && /* @__PURE__ */ h(
+                  F && /* @__PURE__ */ b(
                     "button",
                     {
-                      onClick: Ce,
+                      type: "button",
+                      onClick: ke,
                       className: "mt-2 text-primary hover:underline",
                       children: [
                         'Create "',
-                        C,
+                        A,
                         '"'
                       ]
                     }
                   )
-                ] }) : "No options available" }) : Object.entries(xe).map(([t, i]) => /* @__PURE__ */ h("div", { children: [
-                  t !== "default" && /* @__PURE__ */ e("div", { className: "px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider bg-foreground/5", children: t }),
-                  i.map((a) => {
-                    const k = Se(a.value);
-                    return Q ? /* @__PURE__ */ e(
+                ] }) : "No options available" }) : Object.entries(Ce).map(([r, l]) => /* @__PURE__ */ b("div", { children: [
+                  r !== "default" && /* @__PURE__ */ e("div", { className: "px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider bg-foreground/5", children: r }),
+                  l.map((a) => {
+                    const R = Ae(a.value);
+                    return P ? /* @__PURE__ */ e(
                       "div",
                       {
-                        onClick: () => !a.disabled && le(a.value),
-                        className: d(
-                          M({
-                            variant: A,
+                        onClick: () => !a.disabled && ue(a.value),
+                        className: p(
+                          ae({
+                            variant: N,
                             disabled: a.disabled
                           }),
-                          ee
+                          $
                         ),
-                        "data-selected": k,
+                        "data-selected": R,
                         role: "option",
-                        "aria-selected": k,
-                        children: Q(a)
+                        "aria-selected": R,
+                        children: P(a)
                       },
                       a.value
-                    ) : /* @__PURE__ */ h(
+                    ) : /* @__PURE__ */ b(
                       "div",
                       {
-                        onClick: () => !a.disabled && le(a.value),
-                        className: d(
-                          M({
-                            variant: A,
+                        onClick: () => !a.disabled && ue(a.value),
+                        className: p(
+                          ae({
+                            variant: N,
                             disabled: a.disabled
                           }),
-                          ee
+                          $
                         ),
-                        "data-selected": k,
+                        "data-selected": R,
                         role: "option",
-                        "aria-selected": k,
+                        "aria-selected": R,
                         children: [
-                          E && /* @__PURE__ */ e(
+                          C && /* @__PURE__ */ e(
                             "span",
                             {
-                              className: d(
+                              className: p(
                                 "shrink-0 w-5 h-5 flex items-center justify-center",
-                                k ? "opacity-100" : "opacity-0"
+                                R ? "opacity-100" : "opacity-0"
                               ),
-                              children: /* @__PURE__ */ e(de, { className: "w-4 h-4" })
+                              children: /* @__PURE__ */ e(ge, { className: "w-4 h-4" })
                             }
                           ),
                           a.avatar && /* @__PURE__ */ e(
@@ -352,7 +392,7 @@ const me = L(
                             }
                           ),
                           a.icon && /* @__PURE__ */ e("span", { className: "shrink-0", children: a.icon }),
-                          /* @__PURE__ */ h("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ b("div", { className: "flex-1 min-w-0", children: [
                             /* @__PURE__ */ e("div", { className: "font-medium truncate", children: a.label }),
                             a.description && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground truncate", children: a.description })
                           ] })
@@ -361,60 +401,65 @@ const me = L(
                       a.value
                     );
                   })
-                ] }, t)) })
+                ] }, r)) })
               ]
             }
           ),
           document.body
         )
       ] }),
-      Z && /* @__PURE__ */ e(
+      Y && /* @__PURE__ */ e(
         "input",
         {
           type: "hidden",
-          name: Z,
-          value: Array.isArray(c) ? c.join(",") : c
+          name: Y,
+          value: Array.isArray(m) ? m.join(",") : m
         }
       ),
-      n && /* @__PURE__ */ e("p", { className: "text-sm text-destructive font-medium", children: n }),
-      !n && p && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: p })
+      v && /* @__PURE__ */ e("p", { className: "text-sm text-destructive font-medium", children: v }),
+      !v && d && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: d })
     ] });
   }
 );
-me.displayName = "SelectPropsBase";
-const Ee = L((r, u) => !r.options && r.children ? /* @__PURE__ */ e(pe, { ...r, ref: u }) : /* @__PURE__ */ e(me, { ...r, ref: u }));
+xe.displayName = "SelectPropsBase";
+const Ee = D((t, o) => !t.options && t.children ? /* @__PURE__ */ e(ve, { ...t, ref: o }) : /* @__PURE__ */ e(xe, { ...t, ref: o }));
 Ee.displayName = "Select";
-const ze = L(
-  ({ children: r, className: u, ...o }, l) => {
-    const s = T(P);
-    return /* @__PURE__ */ h(
+const Pe = D(
+  ({ children: t, className: o, ...g }, n) => {
+    const h = J(U), v = I(null), d = O(
+      (y) => {
+        v.current = y, typeof n == "function" ? n(y) : n && (n.current = y), h.triggerRef && (h.triggerRef.current = y);
+      },
+      [n, h.triggerRef]
+    ), { disabled: u, onOpenChange: f, open: i, variant: c, size: s } = h;
+    return /* @__PURE__ */ b(
       "button",
       {
-        ref: l,
+        ref: d,
         type: "button",
-        onClick: () => !s.disabled && s.onOpenChange?.(!s.open),
-        disabled: s.disabled,
-        className: d(
-          ue({
-            variant: s.variant,
-            size: s.size,
+        onClick: () => !u && f?.(!i),
+        disabled: u,
+        className: p(
+          ye({
+            variant: c,
+            size: s,
             fullWidth: !0
           }),
           "justify-between",
-          u
+          o
         ),
         "aria-haspopup": "listbox",
-        "aria-expanded": s.open,
+        "aria-expanded": i,
         "data-select-trigger": "true",
-        ...o,
+        ...g,
         children: [
-          r,
+          t,
           /* @__PURE__ */ e(
-            ce,
+            he,
             {
-              className: d(
+              className: p(
                 "h-4 w-4 opacity-50 transition-transform duration-200",
-                s.open && "rotate-180"
+                i && "rotate-180"
               )
             }
           )
@@ -423,147 +468,161 @@ const ze = L(
     );
   }
 );
-ze.displayName = "SelectTrigger";
-const je = ({ placeholder: r, className: u }) => {
-  const o = T(P), l = o.value;
-  let s = r;
-  o.multiple && Array.isArray(l) ? l.length === 0 ? s = r : l.length === 1 ? s = l[0] : s = `${l.length} selected` : !o.multiple && l && (s = l);
-  const n = !(Array.isArray(l) ? l.length === 0 : !l);
+Pe.displayName = "SelectTrigger";
+const ze = ({ placeholder: t, className: o }) => {
+  const g = J(U), { value: n, multiple: h, items: v } = g, d = (i) => v.get(i)?.label || i;
+  let u = t;
+  h && Array.isArray(n) ? n.length === 0 ? u = t : n.length === 1 ? u = d(n[0]) : u = `${n.length} selected` : !h && n && typeof n == "string" && (u = d(n));
+  const f = Array.isArray(n) ? n.length > 0 : !!n;
   return /* @__PURE__ */ e(
     "span",
     {
-      className: d(
+      className: p(
         "block truncate text-left",
-        !n && "text-muted-foreground",
-        u
+        !f && "text-muted-foreground",
+        o
       ),
-      children: s
+      children: u
     }
   );
 };
-je.displayName = "SelectValue";
-const Ie = ({ children: r, className: u }) => {
-  const o = T(P), l = $(null), [s, n] = O({ top: 0, left: 0, width: 0 });
-  return B(() => {
-    if (!o.open) return;
-    const p = (v) => {
-      const m = v.target;
-      l.current?.contains(m) || document.querySelector('[data-select-trigger="true"]')?.contains(m) || o.onOpenChange?.(!1);
+ze.displayName = "SelectValue";
+const je = ({ children: t, className: o }) => {
+  const g = J(U), n = I(null), [h, v] = L({ top: 0, left: 0, width: 0 }), { open: d, onOpenChange: u, triggerRef: f, variant: i } = g;
+  return M(() => {
+    if (!d) return;
+    const c = (y) => {
+      const k = y.target;
+      n.current?.contains(k) || f?.current?.contains(k) || u?.(!1);
+    }, s = setTimeout(() => {
+      document.addEventListener("mousedown", c);
+    }, 0);
+    return () => {
+      clearTimeout(s), document.removeEventListener("mousedown", c);
     };
-    return document.addEventListener("mousedown", p), () => document.removeEventListener("mousedown", p);
-  }, [o]), B(() => {
-    if (o.open) {
-      const p = document.querySelector(
-        '[aria-haspopup="listbox"][aria-expanded="true"]'
-      );
-      if (p) {
-        const v = () => {
-          const m = p.getBoundingClientRect();
-          n({
-            top: m.bottom + window.scrollY,
-            left: m.left + window.scrollX,
-            width: m.width
-          });
-        };
-        return v(), window.addEventListener("scroll", v, !0), window.addEventListener("resize", v), () => {
-          window.removeEventListener("scroll", v, !0), window.removeEventListener("resize", v);
-        };
-      }
-    }
-  }, [o.open]), !o.open || typeof window > "u" ? null : oe(
+  }, [d, u, f]), M(() => {
+    if (!d || !f?.current) return;
+    const c = () => {
+      const s = f?.current?.getBoundingClientRect();
+      s && v({
+        top: s.bottom + window.scrollY,
+        left: s.left + window.scrollX,
+        width: s.width
+      });
+    };
+    return c(), window.addEventListener("scroll", c, !0), window.addEventListener("resize", c), () => {
+      window.removeEventListener("scroll", c, !0), window.removeEventListener("resize", c);
+    };
+  }, [d, f]), !d || typeof window > "u" ? null : me(
     /* @__PURE__ */ e(
       "div",
       {
-        ref: l,
-        className: d(
-          fe({ variant: o.variant }),
-          u
-        ),
+        ref: n,
+        className: p(we({ variant: i }), o),
         style: {
           position: "absolute",
-          top: `${s.top}px`,
-          left: `${s.left}px`,
-          width: `${s.width}px`,
+          top: `${h.top}px`,
+          left: `${h.left}px`,
+          width: `${h.width}px`,
           zIndex: 9999,
-          opacity: s.width > 0 ? 1 : 0,
+          opacity: h.width > 0 ? 1 : 0,
           transition: "opacity 0.15s ease-out"
         },
         role: "listbox",
-        children: /* @__PURE__ */ e("div", { className: "overflow-y-auto max-h-[300px]", children: r })
+        children: /* @__PURE__ */ e("div", { className: "overflow-y-auto max-h-[300px]", children: t })
       }
     ),
     document.body
   );
 };
-Ie.displayName = "SelectContent";
-const Re = L(
-  ({ value: r, children: u, disabled: o, className: l }, s) => {
-    const n = T(P), p = n.multiple ? Array.isArray(n.value) && n.value.includes(r) : n.value === r;
-    return /* @__PURE__ */ h(
+je.displayName = "SelectContent";
+const Be = D(
+  ({ value: t, children: o, disabled: g, className: n }, h) => {
+    const v = J(U), {
+      registerItem: d,
+      multiple: u,
+      value: f,
+      onValueChange: i,
+      closeOnSelect: c,
+      onOpenChange: s,
+      disabled: y,
+      variant: k
+    } = v;
+    M(() => {
+      d(t, {
+        value: t,
+        label: o,
+        disabled: g
+      });
+    }, [t, o, g, d]);
+    const x = u ? Array.isArray(f) && f.includes(t) : f === t;
+    return /* @__PURE__ */ b(
       "div",
       {
-        ref: s,
+        ref: h,
         onClick: () => {
-          if (!(o || n.disabled))
-            if (n.multiple) {
-              const m = Array.isArray(n.value) ? n.value : [];
-              let b;
-              m.includes(r) ? b = m.filter((N) => N !== r) : b = [...m, r], n.onValueChange?.(b), n.closeOnSelect && n.onOpenChange?.(!1);
+          if (!(g || y)) {
+            if (u) {
+              const V = Array.isArray(f) ? f : [];
+              let N;
+              V.includes(t) ? N = V.filter((B) => B !== t) : N = [...V, t], i?.(N);
             } else
-              n.onValueChange?.(r), n.closeOnSelect && n.onOpenChange?.(!1);
+              i?.(t);
+            c && s?.(!1);
+          }
         },
-        className: d(
-          M({
-            variant: n.variant,
-            disabled: o || n.disabled
+        className: p(
+          ae({
+            variant: k,
+            disabled: g || y
           }),
           "flex items-center gap-2 cursor-pointer",
-          l
+          n
         ),
-        "data-selected": p,
+        "data-selected": x,
         role: "option",
-        "aria-selected": p,
+        "aria-selected": x,
         children: [
           /* @__PURE__ */ e(
             "span",
             {
-              className: d(
+              className: p(
                 "shrink-0 w-5 h-5 flex items-center justify-center",
-                p ? "opacity-100" : "opacity-0"
+                x ? "opacity-100" : "opacity-0"
               ),
-              children: /* @__PURE__ */ e(de, { className: "w-4 h-4" })
+              children: /* @__PURE__ */ e(ge, { className: "w-4 h-4" })
             }
           ),
-          /* @__PURE__ */ e("span", { className: "flex-1", children: u })
+          /* @__PURE__ */ e("span", { className: "flex-1", children: o })
         ]
       }
     );
   }
 );
-Re.displayName = "SelectItem";
-const $e = ({ children: r, className: u }) => /* @__PURE__ */ e("div", { className: d("py-1", u), children: r });
+Be.displayName = "SelectItem";
+const $e = ({ children: t, className: o }) => /* @__PURE__ */ e("div", { className: p("py-1", o), children: t });
 $e.displayName = "SelectGroup";
-const Be = ({ children: r, className: u }) => /* @__PURE__ */ e(
+const Te = ({ children: t, className: o }) => /* @__PURE__ */ e(
   "div",
   {
-    className: d(
+    className: p(
       "px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
-      u
+      o
     ),
-    children: r
+    children: t
   }
 );
-Be.displayName = "SelectLabel";
-const Te = ({ className: r }) => /* @__PURE__ */ e("div", { className: d("h-px bg-border my-1", r) });
-Te.displayName = "SelectSeparator";
+Te.displayName = "SelectLabel";
+const Me = ({ className: t }) => /* @__PURE__ */ e("div", { className: p("h-px bg-border my-1", t) });
+Me.displayName = "SelectSeparator";
 export {
   Ee as Select,
-  Ie as SelectContent,
+  je as SelectContent,
   $e as SelectGroup,
-  Re as SelectItem,
-  Be as SelectLabel,
-  Te as SelectSeparator,
-  ze as SelectTrigger,
-  je as SelectValue,
+  Be as SelectItem,
+  Te as SelectLabel,
+  Me as SelectSeparator,
+  Pe as SelectTrigger,
+  ze as SelectValue,
   Ee as default
 };