@alfadocs/ui-kit-debug 1.80.0 → 1.81.0

package/dist/_chunks/{multi-select-BOad3za9.js → multi-select-IOVnOGlP.js}

@@ -1,18 +1,18 @@
 import { jsx as r, jsxs as b, Fragment as Ze } from "react/jsx-runtime";
-import { forwardRef as et, useContext as tt, useState as D, useRef as y, useId as st, useMemo as R, useEffect as X, useCallback as pe } from "react";
+import { forwardRef as et, useContext as tt, useState as D, useRef as y, useId as st, useMemo as R, useEffect as W, useCallback as fe } from "react";
 import * as q from "@radix-ui/react-popover";
 import { _ as c } from "./index-4xgbg-sn.js";
-import { c as be } from "./index-D2ZczOXr.js";
+import { c as ve } from "./index-D2ZczOXr.js";
 import { useTranslation as rt } from "react-i18next";
 import { u as nt, F as it, b as at } from "./form-field-context-DtiROUJV.js";
-import { T as fe } from "./tooltip-uEBdD1-5.js";
+import { T as he } from "./tooltip-uEBdD1-5.js";
 import { c as ot } from "./compose-refs-C0k0tdqF.js";
 import { u as lt } from "./use-controllable-state-BiY4xTzM.js";
 import { u as M } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
 import { g as dt } from "./group-options-BvKhQ3xb.js";
-import { b as ve } from "./menu-row-BAr8bx1I.js";
+import { b as ye } from "./menu-row-BAr8bx1I.js";
 import { O as ct, a as ut, o as mt, b as pt, c as ft } from "./option-row-Dc7BrbK8.js";
-import { b as J, c as ht } from "./input-surface-iBmxVBfr.js";
+import { b as X, c as ht } from "./input-surface-iBmxVBfr.js";
 import { u as gt } from "./registry-DvAUVLHh.js";
 import { X as bt } from "./x-B5YnXwCz.js";
 import { C as vt } from "./check-DrFSN__t.js";
@@ -129,7 +129,7 @@ const yt = {
       description: "Each option emits its value as data-option-id."
     }
   }
-}, St = be(
+}, St = ve(
   [
     "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-1 ds:w-full",
     ht,
@@ -139,14 +139,14 @@ const yt = {
   {
     variants: {
       size: {
-        sm: `ds:min-h-8 ds:ps-2 ds:pe-2 ds:py-1 ${J.sm}`,
-        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${J.md}`,
-        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${J.lg}`
+        sm: `ds:min-h-8 ds:ps-2 ds:pe-2 ds:py-1 ${X.sm}`,
+        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${X.md}`,
+        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${X.lg}`
       }
     },
     defaultVariants: { size: "md" }
   }
-), he = be(
+), ge = ve(
   [
     "ds:inline-flex ds:items-center ds:gap-1",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
@@ -194,30 +194,30 @@ const yt = {
   "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:text-foreground ds:outline-none ds:select-none",
-  ve.selected,
+  ye.selected,
   "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(" "), ge = [
+].join(" "), be = [
   "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",
-  ve.selected
-].join(" "), wt = "__ui-multiselect-select-all__", Ct = "__ui-multiselect-clear-all__", ye = et(
+  ye.selected
+].join(" "), wt = "__ui-multiselect-select-all__", Ct = "__ui-multiselect-clear-all__", Se = et(
   function({
     options: l,
-    value: Se,
-    defaultValue: xe,
-    onChange: Ie,
+    value: xe,
+    defaultValue: Ie,
+    onChange: Ne,
     onComplete: z,
-    placeholder: Ne,
+    placeholder: we,
     maxSelections: I,
-    allowSelectAll: Z = !1,
-    allowClear: ee = !1,
+    allowSelectAll: J = !1,
+    allowClear: Z = !1,
     filter: P,
     size: T = "md",
-    disabled: we,
-    wrapOptionLabels: te = !1,
-    className: Ce,
+    disabled: Ce,
+    wrapOptionLabels: ee = !1,
+    className: Ae,
     id: j,
     // Pull `aria-label` out of the div spread so it names the combobox
     // INPUT (the interactive control) rather than the wrapper div. Lets a
@@ -226,61 +226,61 @@ const yt = {
     // after its column). Untouched callers fall back to the placeholder.
     // Inside a FormField the field's label names the input and this is
     // ignored, so it can never override the visible text (WCAG 2.5.3).
-    "aria-label": se,
-    ...Ae
-  }, _e) {
-    const { t: u } = rt("ui"), m = nt(), S = tt(it) !== null, [ke, B] = lt({
-      value: Se,
-      defaultValue: xe ?? [],
-      onChange: Ie
-    }), i = ke ?? [], [w, p] = D(!1), [f, K] = D(""), v = y(null), re = `${st()}-count`, N = y([]), $ = y(null), Re = ot(_e, $), x = S && m.disabled || !!we, Te = S && m.required, ne = S && m.invalid, Ee = S && m.describedBy ? m.describedBy : void 0, Oe = j ?? (S ? m.id : void 0);
+    "aria-label": te,
+    ..._e
+  }, ke) {
+    const { t: u } = rt("ui"), m = nt(), S = tt(it) !== null, [Re, B] = lt({
+      value: xe,
+      defaultValue: Ie ?? [],
+      onChange: Ne
+    }), i = Re ?? [], [w, p] = D(!1), [f, K] = D(""), v = y(null), se = `${st()}-count`, N = y([]), $ = y(null), Te = ot(ke, $), x = S && m.disabled || !!Ce, Ee = S && m.required, re = S && m.invalid, Oe = S && m.describedBy ? m.describedBy : void 0, Fe = j ?? (S ? m.id : void 0);
     at(m, v);
-    const Fe = R(() => {
+    const Ve = R(() => {
       const e = /* @__PURE__ */ new Map();
       for (const t of l) e.set(t.value, t.label);
       return e;
-    }, [l]), Ve = R(() => {
+    }, [l]), Le = R(() => {
       const e = /* @__PURE__ */ new Map();
       for (const t of l) e.set(t.value, t.dir);
       return e;
-    }, [l]), ie = typeof I == "number" && i.length >= I, C = (e) => {
+    }, [l]), ne = typeof I == "number" && i.length >= I, C = (e) => {
       B(e);
-    }, Le = (e) => {
+    }, De = (e) => {
       if (i.includes(e)) {
         C(i.filter((t) => t !== e));
         return;
       }
-      ie || C([...i, e]);
+      ne || C([...i, e]);
     }, U = (e) => {
       const t = i.filter((n, a) => a !== e);
       return C(t), t;
-    }, De = () => {
+    }, qe = () => {
       const e = l.filter((n) => !n.disabled).map((n) => n.value), t = typeof I == "number" ? I : e.length;
       C(e.slice(0, t));
-    }, qe = () => {
+    }, Me = () => {
       C([]);
-    }, ae = y(i);
-    X(() => {
-      ae.current = i;
+    }, ie = y(i);
+    W(() => {
+      ie.current = i;
     }, [i]);
-    const oe = y(f);
-    X(() => {
-      oe.current = f;
+    const ae = y(f);
+    W(() => {
+      ae.current = f;
     }, [f]);
-    const le = y(w);
-    X(() => {
-      le.current = w;
+    const oe = y(w);
+    W(() => {
+      oe.current = w;
     }, [w]);
-    const H = pe(
+    const H = fe(
       (e) => {
         B(e);
       },
       [B]
-    ), Me = R(
+    ), ze = R(
       () => ({
-        getSelection: () => [...ae.current],
-        getQuery: () => oe.current,
-        getIsOpen: () => le.current,
+        getSelection: () => [...ie.current],
+        getQuery: () => ae.current,
+        getIsOpen: () => oe.current,
         setSelection: (e) => H(e),
         clearSelection: () => H([]),
         setQuery: (e) => K(e),
@@ -289,15 +289,15 @@ const yt = {
       }),
       [H]
     );
-    gt(yt, Me, j);
-    const Y = Ne ?? u("inputs.multiSelect.placeholder", "Select…"), de = R(() => {
+    gt(yt, ze, j);
+    const le = we ?? u("inputs.multiSelect.placeholder", "Select…"), de = R(() => {
       if (!f) return l;
       const e = f.toLowerCase();
       return l.filter((t) => P ? P(f, t) : t.label.toLowerCase().includes(e));
-    }, [l, f, P]), ze = R(
+    }, [l, f, P]), Pe = R(
       () => dt(de),
       [de]
-    ), Pe = (e) => {
+    ), je = (e) => {
       var a;
       const t = e.currentTarget;
       if (e.key === "Backspace" && f === "" && i.length > 0) {
@@ -324,7 +324,7 @@ const yt = {
         return;
       }
       !w && (e.key === "ArrowDown" || e.key === "Enter") && p(!0);
-    }, je = (e) => (t) => {
+    }, Be = (e) => (t) => {
       var h, d, g, _;
       if (t.key === "Backspace" || t.key === "Delete" || t.key === "Enter" || t.key === " ") {
         t.preventDefault(), t.stopPropagation();
@@ -355,10 +355,10 @@ const yt = {
         return;
       }
       t.key === "Escape" && (p(!1), (_ = v.current) == null || _.focus());
-    }, [E, G] = D(
+    }, [E, Y] = D(
       Number.POSITIVE_INFINITY
-    ), [Be, Ke] = D(0), ce = y(-1), O = pe(() => {
-      G(Number.POSITIVE_INFINITY), Ke((e) => e + 1);
+    ), [Ke, $e] = D(0), ce = y(-1), O = fe(() => {
+      Y(Number.POSITIVE_INFINITY), $e((e) => e + 1);
     }, []);
     M(() => {
       const e = $.current;
@@ -367,7 +367,7 @@ const yt = {
         e.querySelectorAll('[data-ui-chip="true"]')
       );
       if (t.length === 0) {
-        G(Number.POSITIVE_INFINITY);
+        Y(Number.POSITIVE_INFINITY);
         return;
       }
       const n = t[0].offsetTop;
@@ -375,10 +375,10 @@ const yt = {
       for (const s of t)
         if (s.offsetTop === n) a++;
         else break;
-      G(
+      Y(
         a === t.length ? Number.POSITIVE_INFINITY : Math.max(1, a - 1)
       );
-    }, [Be]), M(() => {
+    }, [Ke]), M(() => {
       O();
     }, [i.length, T, O]), M(() => {
       const e = $.current;
@@ -394,48 +394,48 @@ const yt = {
     }, [O]);
     const F = i.map((e) => ({
       value: e,
-      label: Fe.get(e) ?? e
-    })), ue = E === Number.POSITIVE_INFINITY || E >= F.length, $e = ue ? F : F.slice(0, E), me = ue ? [] : F.slice(E), A = me.length, Ue = (e) => {
+      label: Ve.get(e) ?? e
+    })), ue = E === Number.POSITIVE_INFINITY || E >= F.length, Ue = ue ? F : F.slice(0, E), me = ue ? [] : F.slice(E), A = me.length, He = (e) => {
       var n;
       if (x) return;
       const t = e.target;
       t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (p(!0), (n = v.current) == null || n.focus());
-    }, He = (e) => {
+    }, Ye = (e) => {
       if (x) {
         p(!1);
         return;
       }
       p(e), e || (K(""), z == null || z(i));
-    }, Ye = Z || ee, Ge = u("inputs.multiSelect.selected", {
+    }, Ge = J || Z, Qe = u("inputs.multiSelect.selected", {
       count: i.length,
       defaultValue: `${i.length} selected`
-    }), Qe = S && m.label || se || Y, We = [re, Ee].filter(Boolean).join(" "), Q = S ? `${m.id}-label` : void 0, V = y(null);
+    }), pe = S && m.label || te || le, We = [se, Oe].filter(Boolean).join(" "), G = S ? `${m.id}-label` : void 0, V = y(null);
     M(() => {
       const e = v.current;
       if (!e) return;
       const t = e.getAttribute("aria-labelledby");
-      if (Q) {
-        if (t === Q) return;
-        V.current = t, e.setAttribute("aria-labelledby", Q);
+      if (G) {
+        if (t === G) return;
+        V.current = t, e.setAttribute("aria-labelledby", G);
       } else V.current !== null && (e.setAttribute("aria-labelledby", V.current), V.current = null);
     });
-    const { onClick: W, ...Xe } = Ae;
-    return /* @__PURE__ */ r(c, { shouldFilter: !1, label: Qe, children: /* @__PURE__ */ b(q.Root, { open: w, onOpenChange: He, children: [
+    const { onClick: Q, ...Xe } = _e;
+    return /* @__PURE__ */ r(c, { shouldFilter: !1, label: pe, children: /* @__PURE__ */ b(q.Root, { open: w, onOpenChange: Ye, children: [
       /* @__PURE__ */ r(q.Anchor, { asChild: !0, children: /* @__PURE__ */ b(
         "div",
         {
-          ref: Re,
-          className: St({ size: T, className: Ce }),
+          ref: Te,
+          className: St({ size: T, className: Ae }),
           "aria-disabled": x || void 0,
-          "aria-invalid": ne || void 0,
+          "aria-invalid": re || void 0,
           "data-component": "multi-select",
           "data-component-id": j,
           onClick: (e) => {
-            W == null || W(e), Ue(e);
+            Q == null || Q(e), He(e);
           },
           ...Xe,
           children: [
-            $e.map((e, t) => (
+            Ue.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__ */ b(
                 "span",
@@ -445,11 +445,11 @@ const yt = {
                   },
                   tabIndex: x ? -1 : 0,
                   "data-ui-chip": "true",
-                  className: he({ size: T }),
-                  onKeyDown: je(t),
+                  className: ge({ size: T }),
+                  onKeyDown: Be(t),
                   "aria-label": e.label,
                   children: [
-                    /* @__PURE__ */ r("span", { dir: Ve.get(e.value), children: e.label }),
+                    /* @__PURE__ */ r("span", { dir: Le.get(e.value), children: e.label }),
                     /* @__PURE__ */ r(
                       "button",
                       {
@@ -477,14 +477,14 @@ const yt = {
               )
             )),
             A > 0 ? /* @__PURE__ */ r(
-              fe,
+              he,
               {
                 label: me.map((e) => e.label).join(", "),
                 delayDuration: 200,
                 children: /* @__PURE__ */ r(
                   "span",
                   {
-                    className: he({ size: T }),
+                    className: ge({ size: T }),
                     tabIndex: 0,
                     role: "button",
                     "aria-label": u("inputs.multiSelect.overflow", {
@@ -505,15 +505,15 @@ const yt = {
                 ref: v,
                 value: f,
                 onValueChange: K,
-                onKeyDown: Pe,
+                onKeyDown: je,
                 onFocus: () => {
                   x || p(!0);
                 },
-                placeholder: i.length === 0 ? Y : "",
-                id: Oe,
+                placeholder: i.length === 0 ? le : "",
+                id: Fe,
                 "aria-describedby": We,
-                "aria-invalid": ne || void 0,
-                "aria-required": Te || void 0,
+                "aria-invalid": re || void 0,
+                "aria-required": Ee || void 0,
                 disabled: x,
                 className: [
                   "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
@@ -522,7 +522,7 @@ const yt = {
                 ].join(" ")
               }
             ),
-            /* @__PURE__ */ r("span", { id: re, hidden: !0, children: Ge })
+            /* @__PURE__ */ r("span", { id: se, hidden: !0, children: Qe })
           ]
         }
       ) }),
@@ -541,40 +541,40 @@ const yt = {
             {
               role: "listbox",
               "aria-multiselectable": "true",
-              "aria-label": Y,
+              label: pe,
               className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
               children: [
-                Ye ? /* @__PURE__ */ b(c.Group, { children: [
-                  Z ? /* @__PURE__ */ r(
+                Ge ? /* @__PURE__ */ b(c.Group, { children: [
+                  J ? /* @__PURE__ */ r(
                     c.Item,
                     {
                       value: wt,
-                      onSelect: De,
-                      className: ge,
+                      onSelect: qe,
+                      className: be,
                       children: u("inputs.multiSelect.selectAll", "Select all")
                     }
                   ) : null,
-                  ee ? /* @__PURE__ */ r(
+                  Z ? /* @__PURE__ */ r(
                     c.Item,
                     {
                       value: Ct,
-                      onSelect: qe,
-                      className: ge,
+                      onSelect: Me,
+                      className: be,
                       children: u("inputs.multiSelect.clearAll", "Clear all")
                     }
                   ) : null
                 ] }) : null,
                 /* @__PURE__ */ r(c.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: u("inputs.multiSelect.noOptions", "No options found") }),
-                ze.map(({ group: e, items: t }, n) => {
+                Pe.map(({ group: e, items: t }, n) => {
                   const a = t.map((s) => {
-                    const h = i.includes(s.value), d = !h && ie, g = !!s.disabled || d, _ = /* @__PURE__ */ b(
+                    const h = i.includes(s.value), d = !h && ne, g = !!s.disabled || d, _ = /* @__PURE__ */ b(
                       c.Item,
                       {
                         value: s.value,
                         "data-option-id": s.value,
                         disabled: g,
                         onSelect: () => {
-                          g || Le(s.value);
+                          g || De(s.value);
                         },
                         "aria-selected": h,
                         "aria-disabled": g || void 0,
@@ -604,7 +604,7 @@ const yt = {
                               }
                             )
                           ) : null,
-                          s.description || te ? (
+                          s.description || ee ? (
                             // Stacked, as in Combobox: the label and its end
                             // content on one row, the description under them.
                             // The option's name reads in that order.
@@ -615,7 +615,7 @@ const yt = {
                                   {
                                     dir: s.dir,
                                     className: mt({
-                                      wrap: te,
+                                      wrap: ee,
                                       className: "ds:flex-1 ds:text-start"
                                     }),
                                     children: s.label
@@ -660,7 +660,7 @@ const yt = {
                       s.value
                     );
                     return d ? /* @__PURE__ */ r(
-                      fe,
+                      he,
                       {
                         label: u("inputs.multiSelect.maxReached", {
                           count: I,
@@ -690,11 +690,11 @@ const yt = {
     ] }) });
   }
 );
-ye.displayName = "MultiSelect";
-const Kt = ye;
+Se.displayName = "MultiSelect";
+const Kt = Se;
 export {
   Kt as M,
   St as a,
   yt as m
 };
-//# sourceMappingURL=multi-select-BOad3za9.js.map
+//# sourceMappingURL=multi-select-IOVnOGlP.js.map