@alfadocs/ui-kit 0.17.0 → 0.17.2

package/dist/_chunks/{multi-select-DooDzQIp.js → multi-select-CyspR5ZF.js}

@@ -1,14 +1,15 @@
 import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import { forwardRef as Me, useContext as Pe, useState as L, useRef as k, useMemo as O, useEffect as Q, useCallback as je, useLayoutEffect as $e } from "react";
-import * as z from "@radix-ui/react-popover";
+import { forwardRef as qe, useContext as Me, useState as K, useRef as I, useMemo as F, useEffect as U, useCallback as Pe, useLayoutEffect as je } from "react";
+import * as D from "@radix-ui/react-popover";
 import { _ as u } from "./index-4xgbg-sn.js";
-import { c as ue } from "./index-D2ZczOXr.js";
-import { useTranslation as Be } from "react-i18next";
-import { u as Ke, F as Ue } from "./form-field-context-B3APVHKx.js";
-import { T as de } from "./tooltip-DHik5yRI.js";
-import { c as Qe } from "./compose-refs-C0k0tdqF.js";
+import { c as de } from "./index-D2ZczOXr.js";
+import { useTranslation as $e } from "react-i18next";
+import { u as Be, F as Ke } from "./form-field-context-B3APVHKx.js";
+import { T as oe } from "./tooltip-DHik5yRI.js";
+import { c as Ue } from "./compose-refs-C0k0tdqF.js";
+import { u as Qe } from "./use-controllable-state-BiY4xTzM.js";
 import { g as Ye } from "./group-options-BvKhQ3xb.js";
-import { b as Y, c as Ge } from "./input-surface-xyERuLU_.js";
+import { b as Q, c as Ge } from "./input-surface-xyERuLU_.js";
 import { u as He } from "./registry-C9nwlNyL.js";
 import { X as Xe } from "./x-CCcI3eJp.js";
 import { C as Je } from "./check-DPdL_Sm7.js";
@@ -83,7 +84,7 @@ const We = {
       description: "Each option emits its value as data-option-id."
     }
   }
-}, Ze = ue(
+}, Ze = de(
   [
     "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-1 ds:w-full",
     Ge,
@@ -93,14 +94,14 @@ const We = {
   {
     variants: {
       size: {
-        sm: `ds:min-h-8 ds:ps-2 ds:pe-2 ds:py-1 ${Y.sm}`,
-        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${Y.md}`,
-        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${Y.lg}`
+        sm: `ds:min-h-8 ds:ps-2 ds:pe-2 ds:py-1 ${Q.sm}`,
+        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${Q.md}`,
+        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${Q.lg}`
       }
     },
     defaultVariants: { size: "md" }
   }
-), le = ue(
+), ie = de(
   [
     "ds:inline-flex ds:items-center ds:gap-1",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
@@ -147,98 +148,100 @@ const We = {
   "ds:data-[selected=true]:bg-muted ds:data-[selected=true]:text-foreground",
   "ds:aria-[disabled=true]:pointer-events-none ds:aria-[disabled=true]:opacity-50",
   "ds:data-[disabled=true]:pointer-events-none ds:data-[disabled=true]:opacity-50"
-].join(" "), ce = [
+].join(" "), ae = [
   "ds:relative ds:flex ds:cursor-pointer ds:items-center",
   "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
   "ds:text-[var(--font-size-sm)] ds:font-medium ds:text-primary ds:outline-none ds:select-none",
   "ds:data-[selected=true]:bg-muted"
-].join(" "), rt = "__ui-multiselect-select-all__", nt = "__ui-multiselect-clear-all__", fe = Me(
+].join(" "), rt = "__ui-multiselect-select-all__", nt = "__ui-multiselect-clear-all__", le = qe(
   function({
     options: c,
-    value: G,
-    defaultValue: me,
-    onChange: v,
-    onComplete: q,
-    placeholder: pe,
-    maxSelections: b,
-    allowSelectAll: H = !1,
-    allowClear: X = !1,
-    filter: M,
-    size: T = "md",
-    disabled: he,
-    className: ve,
-    id: P,
+    value: ce,
+    defaultValue: ue,
+    onChange: fe,
+    onComplete: L,
+    placeholder: me,
+    maxSelections: v,
+    allowSelectAll: Y = !1,
+    allowClear: G = !1,
+    filter: O,
+    size: R = "md",
+    disabled: pe,
+    className: he,
+    id: z,
     ...ge
-  }, be) {
-    const { t: f } = Be(), y = Ke(), S = Pe(Ue) !== null, [ye, J] = L(
-      me ?? []
-    ), E = G !== void 0, r = E ? G : ye, [A, m] = L(!1), [p, j] = L(""), w = k(null), I = k([]), W = k(null), we = Qe(be, W), g = S && y.disabled || !!he, Ie = S && y.required, Z = S && y.invalid, xe = S && y.describedBy ? y.describedBy : void 0, ke = P ?? (S ? y.id : void 0), Se = O(() => {
+  }, ve) {
+    const { t: f } = $e(), b = Be(), k = Me(Ke) !== null, [be, q] = Qe({
+      value: ce,
+      defaultValue: ue ?? [],
+      onChange: fe
+    }), r = be ?? [], [C, m] = K(!1), [p, M] = K(""), y = I(null), w = I([]), H = I(null), ye = Ue(ve, H), g = k && b.disabled || !!pe, we = k && b.required, X = k && b.invalid, xe = k && b.describedBy ? b.describedBy : void 0, Ie = z ?? (k ? b.id : void 0), ke = F(() => {
       const e = /* @__PURE__ */ new Map();
       for (const t of c) e.set(t.value, t.label);
       return e;
-    }, [c]), ee = typeof b == "number" && r.length >= b, N = (e) => {
-      E || J(e), v == null || v(e);
-    }, Ae = (e) => {
+    }, [c]), J = typeof v == "number" && r.length >= v, S = (e) => {
+      q(e);
+    }, Ce = (e) => {
       if (r.includes(e)) {
-        N(r.filter((t) => t !== e));
+        S(r.filter((t) => t !== e));
         return;
       }
-      ee || N([...r, e]);
-    }, $ = (e) => {
+      J || S([...r, e]);
+    }, P = (e) => {
       const t = r.filter((s, o) => o !== e);
-      return N(t), t;
-    }, Ne = () => {
-      const e = c.filter((s) => !s.disabled).map((s) => s.value), t = typeof b == "number" ? b : e.length;
-      N(e.slice(0, t));
-    }, _e = () => {
-      N([]);
-    }, te = k(r);
-    Q(() => {
-      te.current = r;
+      return S(t), t;
+    }, Se = () => {
+      const e = c.filter((s) => !s.disabled).map((s) => s.value), t = typeof v == "number" ? v : e.length;
+      S(e.slice(0, t));
+    }, Ae = () => {
+      S([]);
+    }, W = I(r);
+    U(() => {
+      W.current = r;
     }, [r]);
-    const se = k(p);
-    Q(() => {
-      se.current = p;
+    const Z = I(p);
+    U(() => {
+      Z.current = p;
     }, [p]);
-    const re = k(A);
-    Q(() => {
-      re.current = A;
-    }, [A]);
-    const B = je(
+    const ee = I(C);
+    U(() => {
+      ee.current = C;
+    }, [C]);
+    const j = Pe(
       (e) => {
-        E || J(e), v == null || v(e);
+        q(e);
       },
-      [E, v]
-    ), Re = O(
+      [q]
+    ), Ne = F(
       () => ({
-        getSelection: () => [...te.current],
-        getQuery: () => se.current,
-        getIsOpen: () => re.current,
-        setSelection: (e) => B(e),
-        clearSelection: () => B([]),
-        setQuery: (e) => j(e),
+        getSelection: () => [...W.current],
+        getQuery: () => Z.current,
+        getIsOpen: () => ee.current,
+        setSelection: (e) => j(e),
+        clearSelection: () => j([]),
+        setQuery: (e) => M(e),
         open: () => m(!0),
         close: () => m(!1)
       }),
-      [B]
+      [j]
     );
-    He(We, Re, P);
-    const ne = pe ?? f("inputs.multiSelect.placeholder", "Select…"), oe = O(() => {
+    He(We, Ne, z);
+    const te = me ?? f("inputs.multiSelect.placeholder", "Select…"), se = F(() => {
       if (!p) return c;
       const e = p.toLowerCase();
-      return c.filter((t) => M ? M(p, t) : t.label.toLowerCase().includes(e));
-    }, [c, p, M]), Ce = O(
-      () => Ye(oe),
-      [oe]
-    ), Te = (e) => {
+      return c.filter((t) => O ? O(p, t) : t.label.toLowerCase().includes(e));
+    }, [c, p, O]), _e = F(
+      () => Ye(se),
+      [se]
+    ), Re = (e) => {
       var o;
       const t = e.currentTarget;
       if (e.key === "Backspace" && p === "" && r.length > 0) {
         e.preventDefault();
-        const a = r.length - 1, l = $(a).length - 1;
+        const a = r.length - 1, l = P(a).length - 1;
         l >= 0 && requestAnimationFrame(() => {
           var h;
-          (h = I.current[l]) == null || h.focus();
+          (h = w.current[l]) == null || h.focus();
         });
         return;
       }
@@ -248,7 +251,7 @@ const We = {
         if (a && e.key === "ArrowRight" || !a && e.key === "ArrowLeft") {
           e.preventDefault();
           const l = r.length - 1;
-          (o = I.current[l]) == null || o.focus();
+          (o = w.current[l]) == null || o.focus();
         }
         return;
       }
@@ -256,50 +259,50 @@ const We = {
         m(!1);
         return;
       }
-      !A && (e.key === "ArrowDown" || e.key === "Enter") && m(!0);
-    }, Ee = (e) => (t) => {
-      var d, l, h, R;
+      !C && (e.key === "ArrowDown" || e.key === "Enter") && m(!0);
+    }, Te = (e) => (t) => {
+      var d, l, h, N;
       if (t.key === "Backspace" || t.key === "Delete" || t.key === "Enter" || t.key === " ") {
         t.preventDefault(), t.stopPropagation();
-        const D = $(e);
-        if (D.length === 0) {
+        const V = P(e);
+        if (V.length === 0) {
           requestAnimationFrame(() => {
-            var C;
-            return (C = w.current) == null ? void 0 : C.focus();
+            var _;
+            return (_ = y.current) == null ? void 0 : _.focus();
           });
           return;
         }
-        const qe = Math.min(e, D.length - 1);
+        const ze = Math.min(e, V.length - 1);
         requestAnimationFrame(() => {
-          var C;
-          (C = I.current[qe]) == null || C.focus();
+          var _;
+          (_ = w.current[ze]) == null || _.focus();
         });
         return;
       }
       const s = document.dir === "rtl", o = s ? "ArrowRight" : "ArrowLeft", a = s ? "ArrowLeft" : "ArrowRight";
       if (t.key === o) {
         t.preventDefault();
-        const D = Math.max(0, e - 1);
-        (d = I.current[D]) == null || d.focus();
+        const V = Math.max(0, e - 1);
+        (d = w.current[V]) == null || d.focus();
         return;
       }
       if (t.key === a) {
-        t.preventDefault(), e < r.length - 1 ? (l = I.current[e + 1]) == null || l.focus() : (h = w.current) == null || h.focus();
+        t.preventDefault(), e < r.length - 1 ? (l = w.current[e + 1]) == null || l.focus() : (h = y.current) == null || h.focus();
         return;
       }
-      t.key === "Escape" && (m(!1), (R = w.current) == null || R.focus());
-    }, [V, K] = L(
+      t.key === "Escape" && (m(!1), (N = y.current) == null || N.focus());
+    }, [T, $] = K(
       Number.POSITIVE_INFINITY
     );
-    $e(() => {
-      const e = W.current;
+    je(() => {
+      const e = H.current;
       if (!e) return;
       const t = () => {
         const o = Array.from(
           e.querySelectorAll('[data-ui-chip="true"]')
         );
         if (o.length === 0) {
-          K(Number.POSITIVE_INFINITY);
+          $(Number.POSITIVE_INFINITY);
           return;
         }
         const a = o[0].offsetTop;
@@ -307,57 +310,57 @@ const We = {
         for (const l of o)
           if (l.offsetTop === a) d++;
           else break;
-        d === o.length ? K(Number.POSITIVE_INFINITY) : K(Math.max(1, d - 1));
+        d === o.length ? $(Number.POSITIVE_INFINITY) : $(Math.max(1, d - 1));
       };
       t();
       const s = new ResizeObserver(t);
       return s.observe(e), () => s.disconnect();
-    }, [r.length, T]);
-    const F = r.map((e) => ({
+    }, [r.length, R]);
+    const E = r.map((e) => ({
       value: e,
-      label: Se.get(e) ?? e
-    })), ie = V === Number.POSITIVE_INFINITY || V >= F.length, Ve = ie ? F : F.slice(0, V), ae = ie ? [] : F.slice(V), _ = ae.length, Fe = (e) => {
+      label: ke.get(e) ?? e
+    })), re = T === Number.POSITIVE_INFINITY || T >= E.length, Ee = re ? E : E.slice(0, T), ne = re ? [] : E.slice(T), A = ne.length, Ve = (e) => {
       var s;
       if (g) return;
       const t = e.target;
-      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (m(!0), (s = w.current) == null || s.focus());
-    }, De = (e) => {
+      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (m(!0), (s = y.current) == null || s.focus());
+    }, Fe = (e) => {
       if (g) {
         m(!1);
         return;
       }
-      m(e), e || (j(""), q == null || q(r));
-    }, Le = H || X, Oe = f("inputs.multiSelect.selected", {
+      m(e), e || (M(""), L == null || L(r));
+    }, De = Y || G, Le = f("inputs.multiSelect.selected", {
       count: r.length,
       defaultValue: `${r.length} selected`
-    }), { onClick: U, ...ze } = ge;
-    return /* @__PURE__ */ n(u, { shouldFilter: !1, label: Oe, children: /* @__PURE__ */ x(z.Root, { open: A, onOpenChange: De, children: [
-      /* @__PURE__ */ n(z.Anchor, { asChild: !0, children: /* @__PURE__ */ x(
+    }), { onClick: B, ...Oe } = ge;
+    return /* @__PURE__ */ n(u, { shouldFilter: !1, label: Le, children: /* @__PURE__ */ x(D.Root, { open: C, onOpenChange: Fe, children: [
+      /* @__PURE__ */ n(D.Anchor, { asChild: !0, children: /* @__PURE__ */ x(
         "div",
         {
-          ref: we,
-          className: Ze({ size: T, className: ve }),
+          ref: ye,
+          className: Ze({ size: R, className: he }),
           "aria-disabled": g || void 0,
-          "aria-invalid": Z || void 0,
+          "aria-invalid": X || void 0,
           "data-component": "multi-select",
-          "data-component-id": P,
+          "data-component-id": z,
           onClick: (e) => {
-            U == null || U(e), Fe(e);
+            B == null || B(e), Ve(e);
           },
-          ...ze,
+          ...Oe,
           children: [
-            Ve.map((e, t) => (
+            Ee.map((e, t) => (
               // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- chip pill receives focus via roving tabindex; chip removal uses an inner button
               /* @__PURE__ */ x(
                 "span",
                 {
                   ref: (s) => {
-                    I.current[t] = s;
+                    w.current[t] = s;
                   },
                   tabIndex: g ? -1 : 0,
                   "data-ui-chip": "true",
-                  className: le({ size: T }),
-                  onKeyDown: Ee(t),
+                  className: ie({ size: R }),
+                  onKeyDown: Te(t),
                   "aria-label": e.label,
                   children: [
                     /* @__PURE__ */ n("span", { children: e.label }),
@@ -373,9 +376,9 @@ const We = {
                         }),
                         disabled: g,
                         onClick: (s) => {
-                          s.stopPropagation(), $(t), requestAnimationFrame(() => {
+                          s.stopPropagation(), P(t), requestAnimationFrame(() => {
                             var o;
-                            return (o = w.current) == null ? void 0 : o.focus();
+                            return (o = y.current) == null ? void 0 : o.focus();
                           });
                         },
                         className: et,
@@ -387,24 +390,24 @@ const We = {
                 e.value
               )
             )),
-            _ > 0 ? /* @__PURE__ */ n(
-              de,
+            A > 0 ? /* @__PURE__ */ n(
+              oe,
               {
-                label: ae.map((e) => e.label).join(", "),
+                label: ne.map((e) => e.label).join(", "),
                 delayDuration: 200,
                 children: /* @__PURE__ */ n(
                   "span",
                   {
-                    className: le({ size: T }),
+                    className: ie({ size: R }),
                     tabIndex: 0,
                     role: "button",
                     "aria-label": f("inputs.multiSelect.overflow", {
-                      count: _,
-                      defaultValue: `+${_} more`
+                      count: A,
+                      defaultValue: `+${A} more`
                     }),
                     children: /* @__PURE__ */ n("span", { children: f("inputs.multiSelect.overflow", {
-                      count: _,
-                      defaultValue: `+${_} more`
+                      count: A,
+                      defaultValue: `+${A} more`
                     }) })
                   }
                 )
@@ -413,18 +416,18 @@ const We = {
             /* @__PURE__ */ n(
               u.Input,
               {
-                ref: w,
+                ref: y,
                 value: p,
-                onValueChange: j,
-                onKeyDown: Te,
+                onValueChange: M,
+                onKeyDown: Re,
                 onFocus: () => {
                   g || m(!0);
                 },
-                placeholder: r.length === 0 ? ne : "",
-                id: ke,
+                placeholder: r.length === 0 ? te : "",
+                id: Ie,
                 "aria-describedby": xe,
-                "aria-invalid": Z || void 0,
-                "aria-required": Ie || void 0,
+                "aria-invalid": X || void 0,
+                "aria-required": we || void 0,
                 disabled: g,
                 className: [
                   "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
@@ -436,8 +439,8 @@ const We = {
           ]
         }
       ) }),
-      /* @__PURE__ */ n(z.Portal, { children: /* @__PURE__ */ n(
-        z.Content,
+      /* @__PURE__ */ n(D.Portal, { children: /* @__PURE__ */ n(
+        D.Content,
         {
           onOpenAutoFocus: (e) => e.preventDefault(),
           onCloseAutoFocus: (e) => e.preventDefault(),
@@ -449,39 +452,39 @@ const We = {
             {
               role: "listbox",
               "aria-multiselectable": "true",
-              "aria-label": ne,
+              "aria-label": te,
               className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
               children: [
-                Le ? /* @__PURE__ */ x(u.Group, { children: [
-                  H ? /* @__PURE__ */ n(
+                De ? /* @__PURE__ */ x(u.Group, { children: [
+                  Y ? /* @__PURE__ */ n(
                     u.Item,
                     {
                       value: rt,
-                      onSelect: Ne,
-                      className: ce,
+                      onSelect: Se,
+                      className: ae,
                       children: f("inputs.multiSelect.selectAll", "Select all")
                     }
                   ) : null,
-                  X ? /* @__PURE__ */ n(
+                  G ? /* @__PURE__ */ n(
                     u.Item,
                     {
                       value: nt,
-                      onSelect: _e,
-                      className: ce,
+                      onSelect: Ae,
+                      className: ae,
                       children: f("inputs.multiSelect.clearAll", "Clear all")
                     }
                   ) : null
                 ] }) : null,
                 /* @__PURE__ */ n(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: f("inputs.multiSelect.noOptions", "No options found") }),
-                Ce.map(({ group: e, items: t }, s) => {
+                _e.map(({ group: e, items: t }, s) => {
                   const o = t.map((a) => {
-                    const d = r.includes(a.value), l = !d && ee, h = !!a.disabled || l, R = /* @__PURE__ */ x(
+                    const d = r.includes(a.value), l = !d && J, h = !!a.disabled || l, N = /* @__PURE__ */ x(
                       u.Item,
                       {
                         value: a.value,
                         disabled: h,
                         onSelect: () => {
-                          h || Ae(a.value);
+                          h || Ce(a.value);
                         },
                         "aria-selected": d,
                         "aria-disabled": h || void 0,
@@ -505,17 +508,17 @@ const We = {
                       a.value
                     );
                     return l ? /* @__PURE__ */ n(
-                      de,
+                      oe,
                       {
                         label: f("inputs.multiSelect.maxReached", {
-                          count: b,
-                          defaultValue: `Maximum ${b} selections`
+                          count: v,
+                          defaultValue: `Maximum ${v} selections`
                         }),
                         delayDuration: 200,
-                        children: R
+                        children: N
                       },
                       a.value
-                    ) : R;
+                    ) : N;
                   });
                   return e ? /* @__PURE__ */ n(
                     u.Group,
@@ -535,11 +538,11 @@ const We = {
     ] }) });
   }
 );
-fe.displayName = "MultiSelect";
-const bt = fe;
+le.displayName = "MultiSelect";
+const yt = le;
 export {
-  bt as M,
+  yt as M,
   Ze as a,
   We as m
 };
-//# sourceMappingURL=multi-select-DooDzQIp.js.map
+//# sourceMappingURL=multi-select-CyspR5ZF.js.map