@alfadocs/ui-kit 0.70.0 → 0.72.0

package/dist/_chunks/{multi-select-BdHHDrRN.js → multi-select-D5QLBJM1.js}

@@ -1,19 +1,19 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import { jsx as r, jsxs as w } from "react/jsx-runtime";
 import { forwardRef as Ke, useContext as Me, useState as B, useRef as I, useMemo as V, useEffect as U, useCallback as je } from "react";
 import * as q from "@radix-ui/react-popover";
 import { _ as u } from "./index-4xgbg-sn.js";
 import { c as le } from "./index-D2ZczOXr.js";
 import { useTranslation as Pe } from "react-i18next";
 import { u as $e, F as Be } from "./form-field-context-B3APVHKx.js";
-import { T as oe } from "./tooltip-DvmfrNvB.js";
+import { T as ie } from "./tooltip-DvmfrNvB.js";
 import { c as Ue } from "./compose-refs-C0k0tdqF.js";
 import { u as Qe } from "./use-controllable-state-BiY4xTzM.js";
 import { u as Ye } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
 import { g as Ge } from "./group-options-BvKhQ3xb.js";
 import { b as Q, c as He } from "./input-surface-xyERuLU_.js";
 import { u as Xe } from "./registry-DvAUVLHh.js";
-import { X as Je } from "./x-CCcI3eJp.js";
-import { C as We } from "./check-DPdL_Sm7.js";
+import { X as Je } from "./x-B5YnXwCz.js";
+import { C as We } from "./check-DrFSN__t.js";
 const Ze = {
   id: "multi-select",
   // Persisted multi-choice (selection state + set_selection) → select_multiple,
@@ -144,7 +144,7 @@ const Ze = {
     },
     defaultVariants: { size: "md" }
   }
-), ie = le(
+), oe = le(
   [
     "ds:inline-flex ds:items-center ds:gap-1",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
@@ -196,7 +196,7 @@ const Ze = {
   "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(" "), nt = "__ui-multiselect-select-all__", ot = "__ui-multiselect-clear-all__", de = Ke(
+].join(" "), nt = "__ui-multiselect-select-all__", it = "__ui-multiselect-clear-all__", de = Ke(
   function({
     options: c,
     value: ce,
@@ -227,30 +227,30 @@ const Ze = {
       value: ce,
       defaultValue: ue ?? [],
       onChange: pe
-    }), r = ye ?? [], [k, m] = B(!1), [f, K] = B(""), S = I(null), w = I([]), H = I(null), Se = Ue(be, H), h = y && b.disabled || !!fe, we = y && b.required, X = y && b.invalid, xe = y && b.describedBy ? b.describedBy : void 0, Ie = L ?? (y ? b.id : void 0), ke = V(() => {
+    }), n = ye ?? [], [k, m] = B(!1), [f, K] = B(""), S = I(null), x = I([]), H = I(null), Se = Ue(be, H), h = y && b.disabled || !!fe, xe = y && b.required, X = y && b.invalid, we = y && b.describedBy ? b.describedBy : void 0, Ie = L ?? (y ? b.id : void 0), ke = V(() => {
       const e = /* @__PURE__ */ new Map();
       for (const t of c) e.set(t.value, t.label);
       return e;
-    }, [c]), J = typeof v == "number" && r.length >= v, C = (e) => {
+    }, [c]), J = typeof v == "number" && n.length >= v, C = (e) => {
       z(e);
     }, Ce = (e) => {
-      if (r.includes(e)) {
-        C(r.filter((t) => t !== e));
+      if (n.includes(e)) {
+        C(n.filter((t) => t !== e));
         return;
       }
-      J || C([...r, e]);
+      J || C([...n, e]);
     }, M = (e) => {
-      const t = r.filter((s, o) => o !== e);
+      const t = n.filter((s, o) => o !== e);
       return C(t), t;
     }, Ae = () => {
       const e = c.filter((s) => !s.disabled).map((s) => s.value), t = typeof v == "number" ? v : e.length;
       C(e.slice(0, t));
     }, Ne = () => {
       C([]);
-    }, W = I(r);
+    }, W = I(n);
     U(() => {
-      W.current = r;
-    }, [r]);
+      W.current = n;
+    }, [n]);
     const Z = I(f);
     U(() => {
       Z.current = f;
@@ -288,22 +288,22 @@ const Ze = {
     ), Te = (e) => {
       var o;
       const t = e.currentTarget;
-      if (e.key === "Backspace" && f === "" && r.length > 0) {
+      if (e.key === "Backspace" && f === "" && n.length > 0) {
         e.preventDefault();
-        const i = r.length - 1, d = M(i).length - 1;
+        const i = n.length - 1, d = M(i).length - 1;
         d >= 0 && requestAnimationFrame(() => {
           var g;
-          (g = w.current[d]) == null || g.focus();
+          (g = x.current[d]) == null || g.focus();
         });
         return;
       }
       const s = t.selectionStart === 0 && t.selectionEnd === 0;
-      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && r.length > 0) {
+      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && n.length > 0) {
         const i = document.dir === "rtl" || t.dir === "rtl";
         if (i && e.key === "ArrowRight" || !i && e.key === "ArrowLeft") {
           e.preventDefault();
-          const d = r.length - 1;
-          (o = w.current[d]) == null || o.focus();
+          const d = n.length - 1;
+          (o = x.current[d]) == null || o.focus();
         }
         return;
       }
@@ -327,7 +327,7 @@ const Ze = {
         const ze = Math.min(e, F.length - 1);
         requestAnimationFrame(() => {
           var _;
-          (_ = w.current[ze]) == null || _.focus();
+          (_ = x.current[ze]) == null || _.focus();
         });
         return;
       }
@@ -335,11 +335,11 @@ const Ze = {
       if (t.key === o) {
         t.preventDefault();
         const F = Math.max(0, e - 1);
-        (l = w.current[F]) == null || l.focus();
+        (l = x.current[F]) == null || l.focus();
         return;
       }
       if (t.key === i) {
-        t.preventDefault(), e < r.length - 1 ? (d = w.current[e + 1]) == null || d.focus() : (g = S.current) == null || g.focus();
+        t.preventDefault(), e < n.length - 1 ? (d = x.current[e + 1]) == null || d.focus() : (g = S.current) == null || g.focus();
         return;
       }
       t.key === "Escape" && (m(!1), (N = S.current) == null || N.focus());
@@ -367,8 +367,8 @@ const Ze = {
       t();
       const s = new ResizeObserver(t);
       return s.observe(e), () => s.disconnect();
-    }, [r.length, R]);
-    const E = r.map((e) => ({
+    }, [n.length, R]);
+    const E = n.map((e) => ({
       value: e,
       label: ke.get(e) ?? e
     })), re = T === Number.POSITIVE_INFINITY || T >= E.length, Fe = re ? E : E.slice(0, T), ne = re ? [] : E.slice(T), A = ne.length, Ve = (e) => {
@@ -381,13 +381,13 @@ const Ze = {
         m(!1);
         return;
       }
-      m(e), e || (K(""), O == null || O(r));
+      m(e), e || (K(""), O == null || O(n));
     }, Oe = Y || G, De = p("inputs.multiSelect.selected", {
-      count: r.length,
-      defaultValue: `${r.length} selected`
+      count: n.length,
+      defaultValue: `${n.length} selected`
     }), { onClick: $, ...Le } = ve;
-    return /* @__PURE__ */ n(u, { shouldFilter: !1, label: De, children: /* @__PURE__ */ x(q.Root, { open: k, onOpenChange: qe, children: [
-      /* @__PURE__ */ n(q.Anchor, { asChild: !0, children: /* @__PURE__ */ x(
+    return /* @__PURE__ */ r(u, { shouldFilter: !1, label: De, children: /* @__PURE__ */ w(q.Root, { open: k, onOpenChange: qe, children: [
+      /* @__PURE__ */ r(q.Anchor, { asChild: !0, children: /* @__PURE__ */ w(
         "div",
         {
           ref: Se,
@@ -403,20 +403,20 @@ const Ze = {
           children: [
             Fe.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(
+              /* @__PURE__ */ w(
                 "span",
                 {
                   ref: (s) => {
-                    w.current[t] = s;
+                    x.current[t] = s;
                   },
                   tabIndex: h ? -1 : 0,
                   "data-ui-chip": "true",
-                  className: ie({ size: R }),
+                  className: oe({ size: R }),
                   onKeyDown: Ee(t),
                   "aria-label": e.label,
                   children: [
-                    /* @__PURE__ */ n("span", { children: e.label }),
-                    /* @__PURE__ */ n(
+                    /* @__PURE__ */ r("span", { children: e.label }),
+                    /* @__PURE__ */ r(
                       "button",
                       {
                         type: "button",
@@ -434,7 +434,7 @@ const Ze = {
                           });
                         },
                         className: tt,
-                        children: /* @__PURE__ */ n(Je, { "aria-hidden": "true", className: "ds:size-3.5" })
+                        children: /* @__PURE__ */ r(Je, { "aria-hidden": "true", className: "ds:size-3.5" })
                       }
                     )
                   ]
@@ -442,22 +442,22 @@ const Ze = {
                 e.value
               )
             )),
-            A > 0 ? /* @__PURE__ */ n(
-              oe,
+            A > 0 ? /* @__PURE__ */ r(
+              ie,
               {
                 label: ne.map((e) => e.label).join(", "),
                 delayDuration: 200,
-                children: /* @__PURE__ */ n(
+                children: /* @__PURE__ */ r(
                   "span",
                   {
-                    className: ie({ size: R }),
+                    className: oe({ size: R }),
                     tabIndex: 0,
                     role: "button",
                     "aria-label": p("inputs.multiSelect.overflow", {
                       count: A,
                       defaultValue: `+${A} more`
                     }),
-                    children: /* @__PURE__ */ n("span", { children: p("inputs.multiSelect.overflow", {
+                    children: /* @__PURE__ */ r("span", { children: p("inputs.multiSelect.overflow", {
                       count: A,
                       defaultValue: `+${A} more`
                     }) })
@@ -465,7 +465,7 @@ const Ze = {
                 )
               }
             ) : null,
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ r(
               u.Input,
               {
                 ref: S,
@@ -475,12 +475,12 @@ const Ze = {
                 onFocus: () => {
                   h || m(!0);
                 },
-                placeholder: r.length === 0 ? te : "",
+                placeholder: n.length === 0 ? te : "",
                 id: Ie,
                 "aria-label": y ? void 0 : he,
-                "aria-describedby": xe,
+                "aria-describedby": we,
                 "aria-invalid": X || void 0,
-                "aria-required": we || void 0,
+                "aria-required": xe || void 0,
                 disabled: h,
                 className: [
                   "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
@@ -492,7 +492,7 @@ const Ze = {
           ]
         }
       ) }),
-      /* @__PURE__ */ n(q.Portal, { children: /* @__PURE__ */ n(
+      /* @__PURE__ */ r(q.Portal, { children: /* @__PURE__ */ r(
         q.Content,
         {
           onOpenAutoFocus: (e) => e.preventDefault(),
@@ -500,7 +500,7 @@ const Ze = {
           align: "start",
           sideOffset: 4,
           className: st,
-          children: /* @__PURE__ */ x(
+          children: /* @__PURE__ */ w(
             u.List,
             {
               role: "listbox",
@@ -508,8 +508,8 @@ const Ze = {
               "aria-label": te,
               className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
               children: [
-                Oe ? /* @__PURE__ */ x(u.Group, { children: [
-                  Y ? /* @__PURE__ */ n(
+                Oe ? /* @__PURE__ */ w(u.Group, { children: [
+                  Y ? /* @__PURE__ */ r(
                     u.Item,
                     {
                       value: nt,
@@ -518,20 +518,20 @@ const Ze = {
                       children: p("inputs.multiSelect.selectAll", "Select all")
                     }
                   ) : null,
-                  G ? /* @__PURE__ */ n(
+                  G ? /* @__PURE__ */ r(
                     u.Item,
                     {
-                      value: ot,
+                      value: it,
                       onSelect: Ne,
                       className: ae,
                       children: p("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: p("inputs.multiSelect.noOptions", "No options found") }),
+                /* @__PURE__ */ r(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: p("inputs.multiSelect.noOptions", "No options found") }),
                 Re.map(({ group: e, items: t }, s) => {
                   const o = t.map((i) => {
-                    const l = r.includes(i.value), d = !l && J, g = !!i.disabled || d, N = /* @__PURE__ */ x(
+                    const l = n.includes(i.value), d = !l && J, g = !!i.disabled || d, N = /* @__PURE__ */ w(
                       u.Item,
                       {
                         value: i.value,
@@ -544,25 +544,37 @@ const Ze = {
                         "aria-disabled": g || void 0,
                         className: rt,
                         children: [
-                          /* @__PURE__ */ n(
+                          /* @__PURE__ */ r(
                             "span",
                             {
                               className: [
-                                "ds:inline-flex ds:items-center ds:justify-center ds:me-2 ds:shrink-0",
+                                "ds:inline-flex ds:items-center ds:justify-center ds:me-[var(--spacing-xs)] ds:shrink-0",
                                 "ds:size-4 ds:rounded-[var(--radius-sm)] ds:border ds:border-border",
                                 l ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
                               ].join(" "),
                               "aria-hidden": "true",
-                              children: l ? /* @__PURE__ */ n(We, { className: "ds:size-3.5" }) : null
+                              children: l ? /* @__PURE__ */ r(We, { className: "ds:size-3.5" }) : null
                             }
                           ),
-                          /* @__PURE__ */ n("span", { className: "ds:flex-1 ds:text-start", children: i.label })
+                          i.startAdornment ? (
+                            // Decorative by contract — the accessible name comes
+                            // from the option label.
+                            /* @__PURE__ */ r(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:inline-flex ds:items-center ds:shrink-0 ds:me-[var(--spacing-xs)]",
+                                children: i.startAdornment
+                              }
+                            )
+                          ) : null,
+                          /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-start", children: i.label })
                         ]
                       },
                       i.value
                     );
-                    return d ? /* @__PURE__ */ n(
-                      oe,
+                    return d ? /* @__PURE__ */ r(
+                      ie,
                       {
                         label: p("inputs.multiSelect.maxReached", {
                           count: v,
@@ -574,7 +586,7 @@ const Ze = {
                       i.value
                     ) : N;
                   });
-                  return e ? /* @__PURE__ */ n(
+                  return e ? /* @__PURE__ */ r(
                     u.Group,
                     {
                       heading: e,
@@ -582,7 +594,7 @@ const Ze = {
                       children: o
                     },
                     `group-${e}`
-                  ) : /* @__PURE__ */ n(u.Group, { children: o }, `group-${s}`);
+                  ) : /* @__PURE__ */ r(u.Group, { children: o }, `group-${s}`);
                 })
               ]
             }
@@ -593,10 +605,10 @@ const Ze = {
   }
 );
 de.displayName = "MultiSelect";
-const wt = de;
+const xt = de;
 export {
-  wt as M,
+  xt as M,
   et as a,
   Ze as m
 };
-//# sourceMappingURL=multi-select-BdHHDrRN.js.map
+//# sourceMappingURL=multi-select-D5QLBJM1.js.map