@alfadocs/ui-kit 0.1.7 → 0.1.9

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

@@ -1,34 +1,34 @@
-import { jsx as r, jsxs as w } from "react/jsx-runtime";
-import { forwardRef as Fe, useContext as Ve, useState as T, useRef as M, useMemo as j, useLayoutEffect as De } from "react";
-import * as E from "@radix-ui/react-popover";
-import { _ as l } from "./index-4xgbg-sn.js";
-import { c as re } from "./index-D2ZczOXr.js";
-import { useTranslation as Le } from "react-i18next";
-import { u as ze, F as Oe } from "./form-field-context-94LwgYTQ.js";
-import { T as ee } from "./tooltip-DHik5yRI.js";
+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 { _ 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 je } from "./group-options-BvKhQ3xb.js";
-import { b as P, c as Pe } from "./input-surface-u4QB0lxe.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 qe } from "./check-DPdL_Sm7.js";
-const Be = re(
+import { C as Be } from "./check-DPdL_Sm7.js";
+const Ke = oe(
   [
     "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-1 ds:w-full",
-    Pe,
+    je,
     "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 ${P.sm}`,
-        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${P.md}`,
-        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${P.lg}`
+        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}`
       }
     },
     defaultVariants: { size: "md" }
   }
-), te = re(
+), re = oe(
   [
     "ds:inline-flex ds:items-center ds:gap-1",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
@@ -48,7 +48,7 @@ const Be = re(
     },
     defaultVariants: { size: "md" }
   }
-), Ke = [
+), Ue = [
   "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 +57,7 @@ const Be = re(
   "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(" "), Ue = [
+].join(" "), Ye = [
   "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,189 +68,190 @@ const Be = re(
   "ds:data-[side=bottom]:slide-in-from-top-2",
   "ds:data-[side=top]:slide-in-from-bottom-2",
   "ds:motion-reduce:animate-none"
-].join(" "), Ye = [
+].join(" "), Ge = [
   "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(" "), se = [
+].join(" "), ne = [
   "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(" "), Ge = "__ui-multiselect-select-all__", He = "__ui-multiselect-clear-all__", ne = Fe(
+].join(" "), Qe = "__ui-multiselect-select-all__", He = "__ui-multiselect-clear-all__", ie = Fe(
   function({
-    options: p,
+    options: c,
     value: $,
-    defaultValue: oe,
+    defaultValue: de,
     onChange: F,
-    onComplete: V,
-    placeholder: ie,
-    maxSelections: h,
-    allowSelectAll: q = !1,
-    allowClear: B = !1,
-    filter: D,
-    size: C = "md",
-    disabled: de,
-    className: ae,
-    id: le,
+    onComplete: D,
+    placeholder: ae,
+    maxSelections: g,
+    allowSelectAll: B = !1,
+    allowClear: K = !1,
+    filter: L,
+    size: S = "md",
+    disabled: le,
+    className: ce,
+    id: U,
     ...ue
-  }, ce) {
-    const { t: u } = Le(), b = ze(), x = Ve(Oe) !== null, [me, fe] = T(
-      oe ?? []
-    ), K = $ !== void 0, n = K ? $ : me, [U, m] = T(!1), [g, Y] = T(""), v = M(null), y = M([]), G = M(null), pe = Me(ce, G), f = x && b.disabled || !!de, he = x && b.required, H = x && b.invalid, be = x && b.describedBy ? b.describedBy : void 0, ge = le ?? (x ? b.id : void 0), ve = j(() => {
+  }, 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(() => {
       const e = /* @__PURE__ */ new Map();
-      for (const t of p) e.set(t.value, t.label);
+      for (const t of c) e.set(t.value, t.label);
       return e;
-    }, [p]), X = typeof h == "number" && n.length >= h, I = (e) => {
-      K || fe(e), F == null || F(e);
-    }, ye = (e) => {
+    }, [c]), J = typeof g == "number" && n.length >= g, k = (e) => {
+      Y || pe(e), F == null || F(e);
+    }, we = (e) => {
       if (n.includes(e)) {
-        I(n.filter((t) => t !== e));
+        k(n.filter((t) => t !== e));
         return;
       }
-      X || I([...n, e]);
-    }, L = (e) => {
+      J || k([...n, e]);
+    }, z = (e) => {
       const t = n.filter((s, o) => o !== e);
-      return I(t), t;
-    }, we = () => {
-      const e = p.filter((s) => !s.disabled).map((s) => s.value), t = typeof h == "number" ? h : e.length;
-      I(e.slice(0, t));
+      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 = () => {
-      I([]);
-    }, Q = ie ?? u("ui.inputs.multiSelect.placeholder", "Select…"), J = j(() => {
-      if (!g) return p;
-      const e = g.toLowerCase();
-      return p.filter((t) => D ? D(g, t) : t.label.toLowerCase().includes(e));
-    }, [p, g, D]), Ie = j(
-      () => je(J),
-      [J]
+      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) => {
       var o;
       const t = e.currentTarget;
-      if (e.key === "Backspace" && g === "" && n.length > 0) {
+      if (e.key === "Backspace" && b === "" && n.length > 0) {
         e.preventDefault();
-        const i = n.length - 1, a = L(i).length - 1;
-        a >= 0 && requestAnimationFrame(() => {
-          var c;
-          (c = y.current[a]) == null || c.focus();
+        const d = n.length - 1, l = z(d).length - 1;
+        l >= 0 && requestAnimationFrame(() => {
+          var m;
+          (m = w.current[l]) == null || m.focus();
         });
         return;
       }
       const s = t.selectionStart === 0 && t.selectionEnd === 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") {
+        const d = document.dir === "rtl" || t.dir === "rtl";
+        if (d && e.key === "ArrowRight" || !d && e.key === "ArrowLeft") {
           e.preventDefault();
-          const a = n.length - 1;
-          (o = y.current[a]) == null || o.focus();
+          const l = n.length - 1;
+          (o = w.current[l]) == null || o.focus();
         }
         return;
       }
       if (e.key === "Escape") {
-        m(!1);
+        p(!1);
         return;
       }
-      !U && (e.key === "ArrowDown" || e.key === "Enter") && m(!0);
+      !G && (e.key === "ArrowDown" || e.key === "Enter") && p(!0);
     }, Ae = (e) => (t) => {
-      var d, a, c, A;
+      var a, l, m, A;
       if (t.key === "Backspace" || t.key === "Delete" || t.key === "Enter" || t.key === " ") {
         t.preventDefault(), t.stopPropagation();
-        const R = L(e);
+        const R = z(e);
         if (R.length === 0) {
           requestAnimationFrame(() => {
-            var k;
-            return (k = v.current) == null ? void 0 : k.focus();
+            var C;
+            return (C = y.current) == null ? void 0 : C.focus();
           });
           return;
         }
-        const Ee = Math.min(e, R.length - 1);
+        const Ve = Math.min(e, R.length - 1);
         requestAnimationFrame(() => {
-          var k;
-          (k = y.current[Ee]) == null || k.focus();
+          var C;
+          (C = w.current[Ve]) == null || C.focus();
         });
         return;
       }
-      const s = document.dir === "rtl", o = s ? "ArrowRight" : "ArrowLeft", i = s ? "ArrowLeft" : "ArrowRight";
+      const s = document.dir === "rtl", o = s ? "ArrowRight" : "ArrowLeft", d = s ? "ArrowLeft" : "ArrowRight";
       if (t.key === o) {
         t.preventDefault();
         const R = Math.max(0, e - 1);
-        (d = y.current[R]) == null || d.focus();
+        (a = w.current[R]) == null || a.focus();
         return;
       }
-      if (t.key === i) {
-        t.preventDefault(), e < n.length - 1 ? (a = y.current[e + 1]) == null || a.focus() : (c = v.current) == null || c.focus();
+      if (t.key === d) {
+        t.preventDefault(), e < n.length - 1 ? (l = w.current[e + 1]) == null || l.focus() : (m = y.current) == null || m.focus();
         return;
       }
-      t.key === "Escape" && (m(!1), (A = v.current) == null || A.focus());
-    }, [_, z] = T(
+      t.key === "Escape" && (p(!1), (A = y.current) == null || A.focus());
+    }, [_, O] = E(
       Number.POSITIVE_INFINITY
     );
-    De(() => {
-      const e = G.current;
+    Le(() => {
+      const e = H.current;
       if (!e) return;
       const t = () => {
         const o = Array.from(
           e.querySelectorAll('[data-ui-chip="true"]')
         );
         if (o.length === 0) {
-          z(Number.POSITIVE_INFINITY);
+          O(Number.POSITIVE_INFINITY);
           return;
         }
-        const i = o[0].offsetTop;
-        let d = 0;
-        for (const a of o)
-          if (a.offsetTop === i) d++;
+        const d = o[0].offsetTop;
+        let a = 0;
+        for (const l of o)
+          if (l.offsetTop === d) a++;
           else break;
-        d === o.length ? z(Number.POSITIVE_INFINITY) : z(Math.max(1, d - 1));
+        a === o.length ? O(Number.POSITIVE_INFINITY) : O(Math.max(1, a - 1));
       };
       t();
       const s = new ResizeObserver(t);
       return s.observe(e), () => s.disconnect();
-    }, [n.length, C]);
-    const S = n.map((e) => ({
+    }, [n.length, S]);
+    const T = n.map((e) => ({
       value: e,
-      label: ve.get(e) ?? e
-    })), W = _ === Number.POSITIVE_INFINITY || _ >= S.length, ke = W ? S : S.slice(0, _), Z = W ? [] : S.slice(_), N = Z.length, Ce = (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) => {
       var s;
-      if (f) return;
+      if (h) return;
       const t = e.target;
-      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (m(!0), (s = v.current) == null || s.focus());
+      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (p(!0), (s = y.current) == null || s.focus());
     }, _e = (e) => {
-      if (f) {
-        m(!1);
+      if (h) {
+        p(!1);
         return;
       }
-      m(e), e || (Y(""), V == null || V(n));
-    }, Se = q || B, Re = u("ui.inputs.multiSelect.selected", {
+      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: O, ...Te } = ue;
-    return /* @__PURE__ */ r(l, { shouldFilter: !1, label: Re, children: /* @__PURE__ */ w(E.Root, { open: U, onOpenChange: _e, children: [
-      /* @__PURE__ */ r(E.Anchor, { asChild: !0, children: /* @__PURE__ */ w(
+    }), { 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(
         "div",
         {
-          ref: pe,
-          className: Be({ size: C, className: ae }),
-          "aria-disabled": f || void 0,
-          "aria-invalid": H || void 0,
+          ref: he,
+          className: Ke({ size: S, className: ce }),
+          "aria-disabled": h || void 0,
+          "aria-invalid": X || void 0,
           "data-component": "multi-select",
+          "data-component-id": U,
           onClick: (e) => {
-            O == null || O(e), Ce(e);
+            q == null || q(e), Se(e);
           },
-          ...Te,
+          ...Ee,
           children: [
-            ke.map((e, t) => /* @__PURE__ */ w(
+            Ce.map((e, t) => /* @__PURE__ */ I(
               "span",
               {
                 ref: (s) => {
-                  y.current[t] = s;
+                  w.current[t] = s;
                 },
-                tabIndex: f ? -1 : 0,
+                tabIndex: h ? -1 : 0,
                 "data-ui-chip": "true",
-                className: te({ size: C }),
+                className: re({ size: S }),
                 onKeyDown: Ae(t),
                 "aria-label": e.label,
                 children: [
@@ -261,18 +262,18 @@ const Be = re(
                       type: "button",
                       tabIndex: -1,
                       "data-ui-chip-dismiss": "true",
-                      "aria-label": u("ui.inputs.multiSelect.remove", {
+                      "aria-label": f("ui.inputs.multiSelect.remove", {
                         label: e.label,
                         defaultValue: `Remove ${e.label}`
                       }),
-                      disabled: f,
+                      disabled: h,
                       onClick: (s) => {
-                        s.stopPropagation(), L(t), requestAnimationFrame(() => {
+                        s.stopPropagation(), z(t), requestAnimationFrame(() => {
                           var o;
-                          return (o = v.current) == null ? void 0 : o.focus();
+                          return (o = y.current) == null ? void 0 : o.focus();
                         });
                       },
-                      className: Ke,
+                      className: Ue,
                       children: /* @__PURE__ */ r($e, { "aria-hidden": "true", className: "ds:size-3.5" })
                     }
                   )
@@ -281,21 +282,21 @@ const Be = re(
               e.value
             )),
             N > 0 ? /* @__PURE__ */ r(
-              ee,
+              se,
               {
-                label: Z.map((e) => e.label).join(", "),
+                label: te.map((e) => e.label).join(", "),
                 delayDuration: 200,
                 children: /* @__PURE__ */ r(
                   "span",
                   {
-                    className: te({ size: C }),
+                    className: re({ size: S }),
                     tabIndex: 0,
                     role: "button",
-                    "aria-label": u("ui.inputs.multiSelect.overflow", {
+                    "aria-label": f("ui.inputs.multiSelect.overflow", {
                       count: N,
                       defaultValue: `+${N} more`
                     }),
-                    children: /* @__PURE__ */ r("span", { children: u("ui.inputs.multiSelect.overflow", {
+                    children: /* @__PURE__ */ r("span", { children: f("ui.inputs.multiSelect.overflow", {
                       count: N,
                       defaultValue: `+${N} more`
                     }) })
@@ -304,21 +305,21 @@ const Be = re(
               }
             ) : null,
             /* @__PURE__ */ r(
-              l.Input,
+              u.Input,
               {
-                ref: v,
-                value: g,
-                onValueChange: Y,
+                ref: y,
+                value: b,
+                onValueChange: Q,
                 onKeyDown: Ne,
                 onFocus: () => {
-                  f || m(!0);
+                  h || p(!0);
                 },
-                placeholder: n.length === 0 ? Q : "",
-                id: ge,
-                "aria-describedby": be,
-                "aria-invalid": H || void 0,
-                "aria-required": he || void 0,
-                disabled: f,
+                placeholder: n.length === 0 ? W : "",
+                id: be,
+                "aria-describedby": ve,
+                "aria-invalid": X || void 0,
+                "aria-required": ge || void 0,
+                disabled: h,
                 className: [
                   "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
                   "ds:placeholder:text-muted-foreground ds:text-start",
@@ -329,56 +330,56 @@ const Be = re(
           ]
         }
       ) }),
-      /* @__PURE__ */ r(E.Portal, { children: /* @__PURE__ */ r(
-        E.Content,
+      /* @__PURE__ */ r(V.Portal, { children: /* @__PURE__ */ r(
+        V.Content,
         {
           onOpenAutoFocus: (e) => e.preventDefault(),
           onCloseAutoFocus: (e) => e.preventDefault(),
           align: "start",
           sideOffset: 4,
-          className: Ue,
-          children: /* @__PURE__ */ w(
-            l.List,
+          className: Ye,
+          children: /* @__PURE__ */ I(
+            u.List,
             {
               role: "listbox",
               "aria-multiselectable": "true",
-              "aria-label": Q,
+              "aria-label": W,
               className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
               children: [
-                Se ? /* @__PURE__ */ w(l.Group, { children: [
-                  q ? /* @__PURE__ */ r(
-                    l.Item,
+                Te ? /* @__PURE__ */ I(u.Group, { children: [
+                  B ? /* @__PURE__ */ r(
+                    u.Item,
                     {
-                      value: Ge,
-                      onSelect: we,
-                      className: se,
-                      children: u("ui.inputs.multiSelect.selectAll", "Select all")
+                      value: Qe,
+                      onSelect: Ie,
+                      className: ne,
+                      children: f("ui.inputs.multiSelect.selectAll", "Select all")
                     }
                   ) : null,
-                  B ? /* @__PURE__ */ r(
-                    l.Item,
+                  K ? /* @__PURE__ */ r(
+                    u.Item,
                     {
                       value: He,
                       onSelect: xe,
-                      className: se,
-                      children: u("ui.inputs.multiSelect.clearAll", "Clear all")
+                      className: ne,
+                      children: f("ui.inputs.multiSelect.clearAll", "Clear all")
                     }
                   ) : null
                 ] }) : null,
-                /* @__PURE__ */ r(l.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: u("ui.inputs.multiSelect.noOptions", "No options found") }),
-                Ie.map(({ group: e, items: t }, s) => {
-                  const o = t.map((i) => {
-                    const d = n.includes(i.value), a = !d && X, c = !!i.disabled || a, A = /* @__PURE__ */ w(
-                      l.Item,
+                /* @__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(
+                      u.Item,
                       {
-                        value: i.value,
-                        disabled: c,
+                        value: d.value,
+                        disabled: m,
                         onSelect: () => {
-                          c || ye(i.value);
+                          m || we(d.value);
                         },
-                        "aria-selected": d,
-                        "aria-disabled": c || void 0,
-                        className: Ye,
+                        "aria-selected": a,
+                        "aria-disabled": m || void 0,
+                        className: Ge,
                         children: [
                           /* @__PURE__ */ r(
                             "span",
@@ -386,39 +387,39 @@ const Be = re(
                               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",
-                                d ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
+                                a ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
                               ].join(" "),
                               "aria-hidden": "true",
-                              children: d ? /* @__PURE__ */ r(qe, { className: "ds:size-3.5" }) : null
+                              children: a ? /* @__PURE__ */ r(Be, { className: "ds:size-3.5" }) : null
                             }
                           ),
-                          /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-start", children: i.label })
+                          /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-start", children: d.label })
                         ]
                       },
-                      i.value
+                      d.value
                     );
-                    return a ? /* @__PURE__ */ r(
-                      ee,
+                    return l ? /* @__PURE__ */ r(
+                      se,
                       {
-                        label: u("ui.inputs.multiSelect.maxReached", {
-                          count: h,
-                          defaultValue: `Maximum ${h} selections`
+                        label: f("ui.inputs.multiSelect.maxReached", {
+                          count: g,
+                          defaultValue: `Maximum ${g} selections`
                         }),
                         delayDuration: 200,
                         children: A
                       },
-                      i.value
+                      d.value
                     ) : A;
                   });
                   return e ? /* @__PURE__ */ r(
-                    l.Group,
+                    u.Group,
                     {
                       heading: e,
                       className: "ds:[&_[cmdk-group-heading]]:ps-2 ds:[&_[cmdk-group-heading]]:pe-2 ds:[&_[cmdk-group-heading]]:py-1 ds:[&_[cmdk-group-heading]]:type-eyebrow ds:[&_[cmdk-group-heading]]:text-muted-foreground",
                       children: o
                     },
                     `group-${e}`
-                  ) : /* @__PURE__ */ r(l.Group, { children: o }, `group-${s}`);
+                  ) : /* @__PURE__ */ r(u.Group, { children: o }, `group-${s}`);
                 })
               ]
             }
@@ -428,14 +429,73 @@ const Be = re(
     ] }) });
   }
 );
-ne.displayName = "MultiSelect";
-const at = ne, lt = {
+ie.displayName = "MultiSelect";
+const at = ie, lt = {
   id: "multi-select",
   capabilities: ["select_multiple", "filter", "open", "close"],
-  state: {},
-  actions: {},
+  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."
@@ -444,7 +504,7 @@ const at = ne, lt = {
 };
 export {
   at as M,
-  Be as a,
+  Ke as a,
   lt as m
 };
-//# sourceMappingURL=multi-select.agent-CNsyW3n9.js.map
+//# sourceMappingURL=multi-select.agent-Do6CeQUT.js.map