@alfadocs/ui-kit 0.1.9 → 0.2.0

package/dist/_chunks/{multi-select.agent-Do6CeQUT.js → multi-select-wqqrgjUQ.js}

@@ -1,34 +1,106 @@
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as Fe, useContext as De, useState as E, useRef as M, useMemo as P, useLayoutEffect as Le } from "react";
-import * as V from "@radix-ui/react-popover";
+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 { _ as u } from "./index-4xgbg-sn.js";
-import { c as oe } from "./index-D2ZczOXr.js";
-import { useTranslation as ze } from "react-i18next";
-import { u as Oe, F as qe } from "./form-field-context-94LwgYTQ.js";
-import { T as se } from "./tooltip-DHik5yRI.js";
-import { c as Me } from "./compose-refs-C0k0tdqF.js";
-import { g as Pe } from "./group-options-BvKhQ3xb.js";
-import { b as j, c as je } from "./input-surface-u4QB0lxe.js";
-import { X as $e } from "./x-CCcI3eJp.js";
-import { C as Be } from "./check-DPdL_Sm7.js";
-const Ke = oe(
+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 { g as Ye } from "./group-options-BvKhQ3xb.js";
+import { b as Y, c as Ge } from "./input-surface-u4QB0lxe.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";
+const We = {
+  id: "multi-select",
+  capabilities: ["select_multiple", "filter", "open", "close"],
+  state: {
+    selection: {
+      type: "string[]",
+      description: "Values of currently-selected options.",
+      read: (i) => i.getSelection()
+    },
+    query: {
+      type: "string",
+      description: "Current filter query.",
+      read: (i) => i.getQuery()
+    },
+    isOpen: {
+      type: "boolean",
+      description: "True when the option list is visible.",
+      read: (i) => i.getIsOpen()
+    }
+  },
+  actions: {
+    set_selection: {
+      safety: "read",
+      argsType: "{ values: string[] }",
+      description: "Replace the current selection with the given list of values.",
+      invoke: (i, c) => {
+        i.setSelection(c.values);
+      }
+    },
+    clear_selection: {
+      safety: "read",
+      description: "Clear the current selection.",
+      invoke: (i) => {
+        i.clearSelection();
+      }
+    },
+    apply_filter: {
+      safety: "read",
+      argsType: "{ query: string }",
+      description: "Set the filter query for the option list.",
+      invoke: (i, c) => {
+        i.setQuery(c.query);
+      }
+    },
+    open: {
+      safety: "read",
+      description: "Open the option list.",
+      invoke: (i) => {
+        i.open();
+      }
+    },
+    close: {
+      safety: "read",
+      description: "Close the option list.",
+      invoke: (i) => {
+        i.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "multi-select" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-option-id",
+      description: "Each option emits its value as data-option-id."
+    }
+  }
+}, Ze = ue(
   [
     "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-1 ds:w-full",
-    je,
+    Ge,
     "ds:aria-[invalid=true]:border-destructive",
     "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50"
   ],
   {
     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 ${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}`
       }
     },
     defaultVariants: { size: "md" }
   }
-), re = oe(
+), le = ue(
   [
     "ds:inline-flex ds:items-center ds:gap-1",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
@@ -48,7 +120,7 @@ const Ke = oe(
     },
     defaultVariants: { size: "md" }
   }
-), Ue = [
+), et = [
   "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
   "ds:rounded-[var(--radius-sm)]",
   "ds:text-muted-foreground ds:hover:text-foreground",
@@ -57,7 +129,7 @@ const Ke = oe(
   "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:size-4",
   'ds:relative ds:before:absolute ds:before:inset-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""]'
-].join(" "), Ye = [
+].join(" "), tt = [
   "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
   "ds:min-w-[var(--radix-popover-trigger-width)]",
   "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
@@ -68,258 +140,292 @@ const Ke = oe(
   "ds:data-[side=bottom]:slide-in-from-top-2",
   "ds:data-[side=top]:slide-in-from-bottom-2",
   "ds:motion-reduce:animate-none"
-].join(" "), Ge = [
+].join(" "), st = [
   "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",
   "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(" "), ne = [
+].join(" "), ce = [
   "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(" "), Qe = "__ui-multiselect-select-all__", He = "__ui-multiselect-clear-all__", ie = Fe(
+].join(" "), rt = "__ui-multiselect-select-all__", nt = "__ui-multiselect-clear-all__", fe = Me(
   function({
     options: c,
-    value: $,
-    defaultValue: de,
-    onChange: F,
-    onComplete: D,
-    placeholder: ae,
-    maxSelections: g,
-    allowSelectAll: B = !1,
-    allowClear: K = !1,
-    filter: L,
-    size: S = "md",
-    disabled: le,
-    className: ce,
-    id: U,
-    ...ue
-  }, fe) {
-    const { t: f } = ze(), v = Oe(), x = De(qe) !== null, [me, pe] = E(
-      de ?? []
-    ), Y = $ !== void 0, n = Y ? $ : me, [G, p] = E(!1), [b, Q] = E(""), y = M(null), w = M([]), H = M(null), he = Me(fe, H), h = x && v.disabled || !!le, ge = x && v.required, X = x && v.invalid, ve = x && v.describedBy ? v.describedBy : void 0, be = U ?? (x ? v.id : void 0), ye = P(() => {
+    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,
+    ...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(() => {
       const e = /* @__PURE__ */ new Map();
       for (const t of c) e.set(t.value, t.label);
       return e;
-    }, [c]), J = typeof g == "number" && n.length >= g, k = (e) => {
-      Y || pe(e), F == null || F(e);
-    }, we = (e) => {
-      if (n.includes(e)) {
-        k(n.filter((t) => t !== e));
+    }, [c]), ee = typeof b == "number" && r.length >= b, N = (e) => {
+      E || J(e), v == null || v(e);
+    }, Ae = (e) => {
+      if (r.includes(e)) {
+        N(r.filter((t) => t !== e));
         return;
       }
-      J || k([...n, e]);
-    }, z = (e) => {
-      const t = n.filter((s, o) => o !== e);
-      return k(t), t;
-    }, Ie = () => {
-      const e = c.filter((s) => !s.disabled).map((s) => s.value), t = typeof g == "number" ? g : e.length;
-      k(e.slice(0, t));
-    }, xe = () => {
-      k([]);
-    }, W = ae ?? f("ui.inputs.multiSelect.placeholder", "Select…"), Z = P(() => {
-      if (!b) return c;
-      const e = b.toLowerCase();
-      return c.filter((t) => L ? L(b, t) : t.label.toLowerCase().includes(e));
-    }, [c, b, L]), ke = P(
-      () => Pe(Z),
-      [Z]
-    ), Ne = (e) => {
+      ee || N([...r, e]);
+    }, $ = (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;
+    }, [r]);
+    const se = k(p);
+    Q(() => {
+      se.current = p;
+    }, [p]);
+    const re = k(A);
+    Q(() => {
+      re.current = A;
+    }, [A]);
+    const B = je(
+      (e) => {
+        E || J(e), v == null || v(e);
+      },
+      [E, v]
+    ), Re = O(
+      () => ({
+        getSelection: () => [...te.current],
+        getQuery: () => se.current,
+        getIsOpen: () => re.current,
+        setSelection: (e) => B(e),
+        clearSelection: () => B([]),
+        setQuery: (e) => j(e),
+        open: () => m(!0),
+        close: () => m(!1)
+      }),
+      [B]
+    );
+    He(We, Re, P);
+    const ne = pe ?? f("ui.inputs.multiSelect.placeholder", "Select…"), oe = O(() => {
+      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) => {
       var o;
       const t = e.currentTarget;
-      if (e.key === "Backspace" && b === "" && n.length > 0) {
+      if (e.key === "Backspace" && p === "" && r.length > 0) {
         e.preventDefault();
-        const d = n.length - 1, l = z(d).length - 1;
+        const a = r.length - 1, l = $(a).length - 1;
         l >= 0 && requestAnimationFrame(() => {
-          var m;
-          (m = w.current[l]) == null || m.focus();
+          var h;
+          (h = I.current[l]) == null || h.focus();
         });
         return;
       }
       const s = t.selectionStart === 0 && t.selectionEnd === 0;
-      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && n.length > 0) {
-        const d = document.dir === "rtl" || t.dir === "rtl";
-        if (d && e.key === "ArrowRight" || !d && e.key === "ArrowLeft") {
+      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && r.length > 0) {
+        const a = document.dir === "rtl" || t.dir === "rtl";
+        if (a && e.key === "ArrowRight" || !a && e.key === "ArrowLeft") {
           e.preventDefault();
-          const l = n.length - 1;
-          (o = w.current[l]) == null || o.focus();
+          const l = r.length - 1;
+          (o = I.current[l]) == null || o.focus();
         }
         return;
       }
       if (e.key === "Escape") {
-        p(!1);
+        m(!1);
         return;
       }
-      !G && (e.key === "ArrowDown" || e.key === "Enter") && p(!0);
-    }, Ae = (e) => (t) => {
-      var a, l, m, A;
+      !A && (e.key === "ArrowDown" || e.key === "Enter") && m(!0);
+    }, Ee = (e) => (t) => {
+      var d, l, h, R;
       if (t.key === "Backspace" || t.key === "Delete" || t.key === "Enter" || t.key === " ") {
         t.preventDefault(), t.stopPropagation();
-        const R = z(e);
-        if (R.length === 0) {
+        const D = $(e);
+        if (D.length === 0) {
           requestAnimationFrame(() => {
             var C;
-            return (C = y.current) == null ? void 0 : C.focus();
+            return (C = w.current) == null ? void 0 : C.focus();
           });
           return;
         }
-        const Ve = Math.min(e, R.length - 1);
+        const qe = Math.min(e, D.length - 1);
         requestAnimationFrame(() => {
           var C;
-          (C = w.current[Ve]) == null || C.focus();
+          (C = I.current[qe]) == null || C.focus();
         });
         return;
       }
-      const s = document.dir === "rtl", o = s ? "ArrowRight" : "ArrowLeft", d = s ? "ArrowLeft" : "ArrowRight";
+      const s = document.dir === "rtl", o = s ? "ArrowRight" : "ArrowLeft", a = s ? "ArrowLeft" : "ArrowRight";
       if (t.key === o) {
         t.preventDefault();
-        const R = Math.max(0, e - 1);
-        (a = w.current[R]) == null || a.focus();
+        const D = Math.max(0, e - 1);
+        (d = I.current[D]) == null || d.focus();
         return;
       }
-      if (t.key === d) {
-        t.preventDefault(), e < n.length - 1 ? (l = w.current[e + 1]) == null || l.focus() : (m = y.current) == null || m.focus();
+      if (t.key === a) {
+        t.preventDefault(), e < r.length - 1 ? (l = I.current[e + 1]) == null || l.focus() : (h = w.current) == null || h.focus();
         return;
       }
-      t.key === "Escape" && (p(!1), (A = y.current) == null || A.focus());
-    }, [_, O] = E(
+      t.key === "Escape" && (m(!1), (R = w.current) == null || R.focus());
+    }, [V, K] = L(
       Number.POSITIVE_INFINITY
     );
-    Le(() => {
-      const e = H.current;
+    $e(() => {
+      const e = W.current;
       if (!e) return;
       const t = () => {
         const o = Array.from(
           e.querySelectorAll('[data-ui-chip="true"]')
         );
         if (o.length === 0) {
-          O(Number.POSITIVE_INFINITY);
+          K(Number.POSITIVE_INFINITY);
           return;
         }
-        const d = o[0].offsetTop;
-        let a = 0;
+        const a = o[0].offsetTop;
+        let d = 0;
         for (const l of o)
-          if (l.offsetTop === d) a++;
+          if (l.offsetTop === a) d++;
           else break;
-        a === o.length ? O(Number.POSITIVE_INFINITY) : O(Math.max(1, a - 1));
+        d === o.length ? K(Number.POSITIVE_INFINITY) : K(Math.max(1, d - 1));
       };
       t();
       const s = new ResizeObserver(t);
       return s.observe(e), () => s.disconnect();
-    }, [n.length, S]);
-    const T = n.map((e) => ({
+    }, [r.length, T]);
+    const F = r.map((e) => ({
       value: e,
-      label: ye.get(e) ?? e
-    })), ee = _ === Number.POSITIVE_INFINITY || _ >= T.length, Ce = ee ? T : T.slice(0, _), te = ee ? [] : T.slice(_), N = te.length, Se = (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) => {
       var s;
-      if (h) return;
+      if (g) return;
       const t = e.target;
-      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (p(!0), (s = y.current) == null || s.focus());
-    }, _e = (e) => {
-      if (h) {
-        p(!1);
+      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (m(!0), (s = w.current) == null || s.focus());
+    }, De = (e) => {
+      if (g) {
+        m(!1);
         return;
       }
-      p(e), e || (Q(""), D == null || D(n));
-    }, Te = B || K, Re = f("ui.inputs.multiSelect.selected", {
-      count: n.length,
-      defaultValue: `${n.length} selected`
-    }), { onClick: q, ...Ee } = ue;
-    return /* @__PURE__ */ r(u, { shouldFilter: !1, label: Re, children: /* @__PURE__ */ I(V.Root, { open: G, onOpenChange: _e, children: [
-      /* @__PURE__ */ r(V.Anchor, { asChild: !0, children: /* @__PURE__ */ I(
+      m(e), e || (j(""), q == null || q(r));
+    }, Le = H || X, Oe = f("ui.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(
         "div",
         {
-          ref: he,
-          className: Ke({ size: S, className: ce }),
-          "aria-disabled": h || void 0,
-          "aria-invalid": X || void 0,
+          ref: we,
+          className: Ze({ size: T, className: ve }),
+          "aria-disabled": g || void 0,
+          "aria-invalid": Z || void 0,
           "data-component": "multi-select",
-          "data-component-id": U,
+          "data-component-id": P,
           onClick: (e) => {
-            q == null || q(e), Se(e);
+            U == null || U(e), Fe(e);
           },
-          ...Ee,
+          ...ze,
           children: [
-            Ce.map((e, t) => /* @__PURE__ */ I(
-              "span",
-              {
-                ref: (s) => {
-                  w.current[t] = s;
+            Ve.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;
+                  },
+                  tabIndex: g ? -1 : 0,
+                  "data-ui-chip": "true",
+                  className: le({ size: T }),
+                  onKeyDown: Ee(t),
+                  "aria-label": e.label,
+                  children: [
+                    /* @__PURE__ */ n("span", { children: e.label }),
+                    /* @__PURE__ */ n(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        "data-ui-chip-dismiss": "true",
+                        "aria-label": f("ui.inputs.multiSelect.remove", {
+                          label: e.label,
+                          defaultValue: `Remove ${e.label}`
+                        }),
+                        disabled: g,
+                        onClick: (s) => {
+                          s.stopPropagation(), $(t), requestAnimationFrame(() => {
+                            var o;
+                            return (o = w.current) == null ? void 0 : o.focus();
+                          });
+                        },
+                        className: et,
+                        children: /* @__PURE__ */ n(Xe, { "aria-hidden": "true", className: "ds:size-3.5" })
+                      }
+                    )
+                  ]
                 },
-                tabIndex: h ? -1 : 0,
-                "data-ui-chip": "true",
-                className: re({ size: S }),
-                onKeyDown: Ae(t),
-                "aria-label": e.label,
-                children: [
-                  /* @__PURE__ */ r("span", { children: e.label }),
-                  /* @__PURE__ */ r(
-                    "button",
-                    {
-                      type: "button",
-                      tabIndex: -1,
-                      "data-ui-chip-dismiss": "true",
-                      "aria-label": f("ui.inputs.multiSelect.remove", {
-                        label: e.label,
-                        defaultValue: `Remove ${e.label}`
-                      }),
-                      disabled: h,
-                      onClick: (s) => {
-                        s.stopPropagation(), z(t), requestAnimationFrame(() => {
-                          var o;
-                          return (o = y.current) == null ? void 0 : o.focus();
-                        });
-                      },
-                      className: Ue,
-                      children: /* @__PURE__ */ r($e, { "aria-hidden": "true", className: "ds:size-3.5" })
-                    }
-                  )
-                ]
-              },
-              e.value
+                e.value
+              )
             )),
-            N > 0 ? /* @__PURE__ */ r(
-              se,
+            _ > 0 ? /* @__PURE__ */ n(
+              de,
               {
-                label: te.map((e) => e.label).join(", "),
+                label: ae.map((e) => e.label).join(", "),
                 delayDuration: 200,
-                children: /* @__PURE__ */ r(
+                children: /* @__PURE__ */ n(
                   "span",
                   {
-                    className: re({ size: S }),
+                    className: le({ size: T }),
                     tabIndex: 0,
                     role: "button",
                     "aria-label": f("ui.inputs.multiSelect.overflow", {
-                      count: N,
-                      defaultValue: `+${N} more`
+                      count: _,
+                      defaultValue: `+${_} more`
                     }),
-                    children: /* @__PURE__ */ r("span", { children: f("ui.inputs.multiSelect.overflow", {
-                      count: N,
-                      defaultValue: `+${N} more`
+                    children: /* @__PURE__ */ n("span", { children: f("ui.inputs.multiSelect.overflow", {
+                      count: _,
+                      defaultValue: `+${_} more`
                     }) })
                   }
                 )
               }
             ) : null,
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ n(
               u.Input,
               {
-                ref: y,
-                value: b,
-                onValueChange: Q,
-                onKeyDown: Ne,
+                ref: w,
+                value: p,
+                onValueChange: j,
+                onKeyDown: Te,
                 onFocus: () => {
-                  h || p(!0);
+                  g || m(!0);
                 },
-                placeholder: n.length === 0 ? W : "",
-                id: be,
-                "aria-describedby": ve,
-                "aria-invalid": X || void 0,
-                "aria-required": ge || void 0,
-                disabled: h,
+                placeholder: r.length === 0 ? ne : "",
+                id: ke,
+                "aria-describedby": xe,
+                "aria-invalid": Z || void 0,
+                "aria-required": Ie || void 0,
+                disabled: g,
                 className: [
                   "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
                   "ds:placeholder:text-muted-foreground ds:text-start",
@@ -330,88 +436,88 @@ const Ke = oe(
           ]
         }
       ) }),
-      /* @__PURE__ */ r(V.Portal, { children: /* @__PURE__ */ r(
-        V.Content,
+      /* @__PURE__ */ n(z.Portal, { children: /* @__PURE__ */ n(
+        z.Content,
         {
           onOpenAutoFocus: (e) => e.preventDefault(),
           onCloseAutoFocus: (e) => e.preventDefault(),
           align: "start",
           sideOffset: 4,
-          className: Ye,
-          children: /* @__PURE__ */ I(
+          className: tt,
+          children: /* @__PURE__ */ x(
             u.List,
             {
               role: "listbox",
               "aria-multiselectable": "true",
-              "aria-label": W,
+              "aria-label": ne,
               className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
               children: [
-                Te ? /* @__PURE__ */ I(u.Group, { children: [
-                  B ? /* @__PURE__ */ r(
+                Le ? /* @__PURE__ */ x(u.Group, { children: [
+                  H ? /* @__PURE__ */ n(
                     u.Item,
                     {
-                      value: Qe,
-                      onSelect: Ie,
-                      className: ne,
+                      value: rt,
+                      onSelect: Ne,
+                      className: ce,
                       children: f("ui.inputs.multiSelect.selectAll", "Select all")
                     }
                   ) : null,
-                  K ? /* @__PURE__ */ r(
+                  X ? /* @__PURE__ */ n(
                     u.Item,
                     {
-                      value: He,
-                      onSelect: xe,
-                      className: ne,
+                      value: nt,
+                      onSelect: _e,
+                      className: ce,
                       children: f("ui.inputs.multiSelect.clearAll", "Clear all")
                     }
                   ) : null
                 ] }) : null,
-                /* @__PURE__ */ r(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: f("ui.inputs.multiSelect.noOptions", "No options found") }),
-                ke.map(({ group: e, items: t }, s) => {
-                  const o = t.map((d) => {
-                    const a = n.includes(d.value), l = !a && J, m = !!d.disabled || l, A = /* @__PURE__ */ I(
+                /* @__PURE__ */ n(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: f("ui.inputs.multiSelect.noOptions", "No options found") }),
+                Ce.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(
                       u.Item,
                       {
-                        value: d.value,
-                        disabled: m,
+                        value: a.value,
+                        disabled: h,
                         onSelect: () => {
-                          m || we(d.value);
+                          h || Ae(a.value);
                         },
-                        "aria-selected": a,
-                        "aria-disabled": m || void 0,
-                        className: Ge,
+                        "aria-selected": d,
+                        "aria-disabled": h || void 0,
+                        className: st,
                         children: [
-                          /* @__PURE__ */ r(
+                          /* @__PURE__ */ n(
                             "span",
                             {
                               className: [
                                 "ds:inline-flex ds:items-center ds:justify-center ds:me-2 ds:shrink-0",
                                 "ds:size-4 ds:rounded-[var(--radius-sm)] ds:border ds:border-border",
-                                a ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
+                                d ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
                               ].join(" "),
                               "aria-hidden": "true",
-                              children: a ? /* @__PURE__ */ r(Be, { className: "ds:size-3.5" }) : null
+                              children: d ? /* @__PURE__ */ n(Je, { className: "ds:size-3.5" }) : null
                             }
                           ),
-                          /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-start", children: d.label })
+                          /* @__PURE__ */ n("span", { className: "ds:flex-1 ds:text-start", children: a.label })
                         ]
                       },
-                      d.value
+                      a.value
                     );
-                    return l ? /* @__PURE__ */ r(
-                      se,
+                    return l ? /* @__PURE__ */ n(
+                      de,
                       {
                         label: f("ui.inputs.multiSelect.maxReached", {
-                          count: g,
-                          defaultValue: `Maximum ${g} selections`
+                          count: b,
+                          defaultValue: `Maximum ${b} selections`
                         }),
                         delayDuration: 200,
-                        children: A
+                        children: R
                       },
-                      d.value
-                    ) : A;
+                      a.value
+                    ) : R;
                   });
-                  return e ? /* @__PURE__ */ r(
+                  return e ? /* @__PURE__ */ n(
                     u.Group,
                     {
                       heading: e,
@@ -419,7 +525,7 @@ const Ke = oe(
                       children: o
                     },
                     `group-${e}`
-                  ) : /* @__PURE__ */ r(u.Group, { children: o }, `group-${s}`);
+                  ) : /* @__PURE__ */ n(u.Group, { children: o }, `group-${s}`);
                 })
               ]
             }
@@ -429,82 +535,11 @@ const Ke = oe(
     ] }) });
   }
 );
-ie.displayName = "MultiSelect";
-const at = ie, lt = {
-  id: "multi-select",
-  capabilities: ["select_multiple", "filter", "open", "close"],
-  state: {
-    selection: {
-      type: "string[]",
-      description: "Values of currently-selected options.",
-      read: (i) => i.getSelection()
-    },
-    query: {
-      type: "string",
-      description: "Current filter query.",
-      read: (i) => i.getQuery()
-    },
-    isOpen: {
-      type: "boolean",
-      description: "True when the option list is visible.",
-      read: (i) => i.getIsOpen()
-    }
-  },
-  actions: {
-    set_selection: {
-      safety: "read",
-      argsType: "{ values: string[] }",
-      description: "Replace the current selection with the given list of values.",
-      invoke: (i, c) => {
-        i.setSelection(c.values);
-      }
-    },
-    clear_selection: {
-      safety: "read",
-      description: "Clear the current selection.",
-      invoke: (i) => {
-        i.clearSelection();
-      }
-    },
-    apply_filter: {
-      safety: "read",
-      argsType: "{ query: string }",
-      description: "Set the filter query for the option list.",
-      invoke: (i, c) => {
-        i.setQuery(c.query);
-      }
-    },
-    open: {
-      safety: "read",
-      description: "Open the option list.",
-      invoke: (i) => {
-        i.open();
-      }
-    },
-    close: {
-      safety: "read",
-      description: "Close the option list.",
-      invoke: (i) => {
-        i.close();
-      }
-    }
-  },
-  domHooks: {
-    root: { attr: "data-component", value: "multi-select" },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop."
-    },
-    item: {
-      attr: "data-option-id",
-      description: "Each option emits its value as data-option-id."
-    }
-  }
-};
+fe.displayName = "MultiSelect";
+const bt = fe;
 export {
-  at as M,
-  Ke as a,
-  lt as m
+  bt as M,
+  Ze as a,
+  We as m
 };
-//# sourceMappingURL=multi-select.agent-Do6CeQUT.js.map
+//# sourceMappingURL=multi-select-wqqrgjUQ.js.map