@alfadocs/ui-kit 0.67.1 → 0.69.0

package/dist/_chunks/{combobox-BC-DFx8G.js → combobox-Clum7gJ1.js}

@@ -1,58 +1,90 @@
-import { jsx as o, jsxs as N } from "react/jsx-runtime";
-import { forwardRef as je, useContext as Ae, useMemo as U, useState as oe, useRef as g, useEffect as w, useCallback as Te } from "react";
+import { jsx as o, jsxs as S } from "react/jsx-runtime";
+import { forwardRef as De, useContext as Pe, useMemo as B, useState as oe, useRef as h, useEffect as I, useCallback as Ae } from "react";
 import * as _ from "@radix-ui/react-popover";
-import { R as $e, _ as c, P as ke } from "./index-4xgbg-sn.js";
-import { c as E } from "./index-D2ZczOXr.js";
-import { useTranslation as Oe } from "react-i18next";
-import { u as qe, F as Be } from "./form-field-context-B3APVHKx.js";
-import { c as Ue } from "./compose-refs-C0k0tdqF.js";
-import { n as H } from "./normalize-diacritics-BNGbFNlJ.js";
-import { g as He } from "./group-options-BvKhQ3xb.js";
-import { u as Ge } from "./use-controllable-state-BiY4xTzM.js";
-import { u as Me } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { I as Le, a as G, d as M, c as Qe } from "./input-surface-xyERuLU_.js";
-import { u as Ke } from "./registry-nPAVE19X.js";
+import { R as Ke, _ as c, P as Oe } from "./index-4xgbg-sn.js";
+import { c as F } from "./index-D2ZczOXr.js";
+import { useTranslation as Te } from "react-i18next";
+import { u as $e, F as ke } from "./form-field-context-B3APVHKx.js";
+import { c as Be } from "./compose-refs-C0k0tdqF.js";
+import { n as U } from "./normalize-diacritics-BNGbFNlJ.js";
+import { g as Ue } from "./group-options-BvKhQ3xb.js";
+import { u as He } from "./use-controllable-state-BiY4xTzM.js";
+import { u as Ge } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { I as Me, a as H, d as G, c as Le } from "./input-surface-xyERuLU_.js";
+import { u as Qe } from "./registry-DvAUVLHh.js";
 import { X as Xe } from "./x-CCcI3eJp.js";
 import { C as We } from "./check-DPdL_Sm7.js";
 const Je = {
   id: "combobox",
-  capabilities: ["select_single", "pick", "filter", "open", "close"],
+  // Persisted single choice (value state + set_value) → select_single + set_value,
+  // plus type-to-filter and open/close of the option list.
+  capabilities: ["select_single", "set_value", "filter", "open", "close"],
   state: {
     value: {
       type: "string | null",
+      descriptionKey: "ui.agent.combobox.state.value",
       description: "Currently-selected option value, or null when nothing is selected.",
       read: (t) => t.getValue()
     },
     query: {
       type: "string",
+      descriptionKey: "ui.agent.combobox.state.query",
       description: "Current filter query in the combobox input.",
       read: (t) => t.getQuery()
     },
     isOpen: {
       type: "boolean",
+      descriptionKey: "ui.agent.combobox.state.isOpen",
       description: "True when the option list is visible.",
       read: (t) => t.getIsOpen()
     }
   },
   actions: {
     set_value: {
-      safety: "read",
+      // Persists the user's chosen option — reversible via the same UI.
+      safety: "write",
       argsType: "{ value: string | null }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          value: {
+            type: ["string", "null"],
+            description: "Option value to select, or null to clear."
+          }
+        },
+        required: ["value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.setValue",
       description: "Set the selected value programmatically.",
+      examples: [{ args: { value: "it" }, note: 'Select the "it" option.' }],
       invoke: (t, r) => {
         t.setValue(r.value);
       }
     },
     apply_filter: {
+      // Pure ephemeral filter of the visible options — no persisted change.
       safety: "read",
       argsType: "{ query: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          query: { type: "string", description: "Filter text for the list." }
+        },
+        required: ["query"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.applyFilter",
       description: "Set the filter query for the option list.",
       invoke: (t, r) => {
         t.setQuery(r.query);
       }
     },
     clear_selection: {
-      safety: "read",
+      // Discards the persisted choice — destructive (loses the selection).
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.clearSelection",
       description: "Clear the current selection.",
       invoke: (t) => {
         t.clear();
@@ -60,6 +92,8 @@ const Je = {
     },
     open: {
       safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.open",
       description: "Open the option list.",
       invoke: (t) => {
         t.open();
@@ -67,6 +101,8 @@ const Je = {
     },
     close: {
       safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.combobox.actions.close",
       description: "Close the option list.",
       invoke: (t) => {
         t.close();
@@ -85,7 +121,7 @@ const Je = {
       description: "Each option emits its value as data-option-id."
     }
   }
-}, Ye = E(
+}, Ye = F(
   [
     "ds:peer ds:w-full ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
     "ds:outline-none ds:border-0",
@@ -103,26 +139,26 @@ const Je = {
       size: "md"
     }
   }
-), Ze = E(
+), Ze = F(
   [
     "ds:group ds:relative ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:w-full",
-    Qe
+    Le
   ].join(" "),
   {
     variants: {
       size: {
-        sm: `${G.sm} ${M.sm}`,
-        md: `${G.md} ${M.md}`,
-        lg: `${G.lg} ${M.lg}`
+        sm: `${H.sm} ${G.sm}`,
+        md: `${H.md} ${G.md}`,
+        lg: `${H.lg} ${G.lg}`
       },
-      tone: Le
+      tone: Me
     },
     defaultVariants: {
       size: "md",
       tone: "default"
     }
   }
-), et = E(
+), et = F(
   [
     "ds:z-[var(--z-popover)] ds:overflow-hidden ds:w-[var(--radix-popover-trigger-width)]",
     "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
@@ -134,7 +170,7 @@ const Je = {
     "ds:data-[side=top]:slide-in-from-bottom-2",
     "ds:motion-reduce:animate-none"
   ].join(" ")
-), ne = E(
+), ne = F(
   [
     "ds:relative ds:flex ds:cursor-pointer ds:items-center ds:gap-[var(--spacing-sm)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -167,24 +203,24 @@ const Je = {
 function rt({
   search: t,
   label: r,
-  iconClass: F,
+  iconClass: E,
   size: V,
-  onSelect: D
+  onSelect: j
 }) {
-  return ke((P) => P.filtered.count) > 0 ? null : /* @__PURE__ */ N(
+  return Oe((q) => q.filtered.count) > 0 ? null : /* @__PURE__ */ S(
     c.Item,
     {
       value: `__combobox-create__${t}`,
       keywords: [],
       forceMount: !0,
-      onSelect: () => D(t),
+      onSelect: () => j(t),
       className: ne({ size: V }),
       children: [
         /* @__PURE__ */ o(
           "span",
           {
             "aria-hidden": "true",
-            className: `ds:inline-flex ds:items-center ds:justify-center ${F}`
+            className: `ds:inline-flex ds:items-center ds:justify-center ${E}`
           }
         ),
         /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: r })
@@ -192,171 +228,171 @@ function rt({
     }
   );
 }
-const re = je(
+const re = De(
   function({
     options: r,
-    value: F,
+    value: E,
     defaultValue: V,
-    onValueChange: D,
-    placeholder: L,
-    clearable: P = !1,
+    onValueChange: j,
+    placeholder: M,
+    clearable: q = !1,
     disabled: ae,
     readOnly: ie,
     required: de,
     name: le,
-    id: j,
+    id: D,
     size: v = "md",
     tone: ce = "default",
-    filter: A,
+    filter: P,
     allowCreate: ue = !1,
-    onCreate: T,
-    open: Q,
+    onCreate: A,
+    open: L,
     onOpenChange: u,
     emptyMessage: me,
-    className: fe,
-    "aria-label": K
-  }, pe) {
-    const { t: x } = Oe(), b = qe(), y = Ae(Be) !== null, [be, z] = Ge({
-      value: F,
+    className: pe,
+    "aria-label": Q
+  }, fe) {
+    const { t: y } = Te(), b = $e(), x = Pe(ke) !== null, [be, N] = He({
+      value: E,
       defaultValue: V ?? "",
-      onChange: D
-    }), m = be ?? "", $ = U(
+      onChange: j
+    }), m = be ?? "", K = B(
       () => r.find((e) => e.value === m),
       [r, m]
-    ), C = ($ == null ? void 0 : $.label) ?? "", [f, i] = oe(C), [he, X] = oe(!1), S = Q !== void 0, d = S ? Q : he, R = g(!1), I = g(null), W = g(null);
-    Me(() => {
+    ), C = (K == null ? void 0 : K.label) ?? "", [p, i] = oe(C), [ge, X] = oe(!1), z = L !== void 0, d = z ? L : ge, R = h(!1), w = h(null), W = h(null);
+    Ge(() => {
       var e;
-      (e = I.current) == null || e.setAttribute("aria-expanded", String(d));
-    }), w(() => {
+      (e = w.current) == null || e.setAttribute("aria-expanded", String(d));
+    }), I(() => {
       d || i(C);
     }, [C, d]);
-    const ge = j ?? (y ? b.id : void 0), k = (y ? b.disabled : !1) || !!ae, h = !!ie, ve = (y ? b.required : !1) || !!de, J = y ? b.invalid : !1, xe = J ? "error" : ce, ye = y && b.describedBy ? b.describedBy : void 0, Y = L ?? x("inputs.combobox.placeholder", "Search…"), Ce = U(
+    const he = D ?? (x ? b.id : void 0), O = (x ? b.disabled : !1) || !!ae, g = !!ie, ve = (x ? b.required : !1) || !!de, J = x ? b.invalid : !1, ye = J ? "error" : ce, xe = x && b.describedBy ? b.describedBy : void 0, Y = M ?? y("inputs.combobox.placeholder", "Search…"), Ce = B(
       () => (e, s, n) => {
         if (R.current) return 1;
-        const p = H(e), a = H(s), B = n == null ? void 0 : n.map(H);
-        return A ? A(p, a) : $e(
-          p,
+        const f = U(e), a = U(s), k = n == null ? void 0 : n.map(U);
+        return P ? P(f, a) : Ke(
+          f,
           a,
-          B
+          k
         );
       },
-      [A]
+      [P]
     ), Z = (e) => {
-      z(e);
+      N(e);
     }, l = (e) => {
-      S || X(e), u == null || u(e);
-    }, Ne = (e) => {
+      z || X(e), u == null || u(e);
+    }, Se = (e) => {
       const s = r.find((n) => n.value === e);
       Z(e), i((s == null ? void 0 : s.label) ?? ""), l(!1);
+    }, Ne = (e) => {
+      A == null || A(e), l(!1);
     }, ze = (e) => {
-      T == null || T(e), l(!1);
-    }, Se = (e) => {
-      h || (i(e), !d && e.length > 0 && !R.current && l(!0));
+      g || (i(e), !d && e.length > 0 && !R.current && l(!0));
     }, Re = () => {
-      !k && !h && l(!0);
-    }, Ie = () => {
-      R.current = !0;
+      !O && !g && l(!0);
     }, we = () => {
+      R.current = !0;
+    }, Ie = () => {
       var s;
-      if (R.current = !1, h) return;
-      const e = ((s = I.current) == null ? void 0 : s.value) ?? "";
+      if (R.current = !1, g) return;
+      const e = ((s = w.current) == null ? void 0 : s.value) ?? "";
       i(e), e.length > 0 && l(!0);
     }, _e = (e) => {
       e.nativeEvent.isComposing || e.key === "Escape" && d && (e.preventDefault(), l(!1), i(C));
-    }, Ee = (e) => {
-      var s;
-      e.preventDefault(), e.stopPropagation(), Z(""), i(""), l(!0), (s = I.current) == null || s.focus();
     }, Fe = (e) => {
-      h && e || (l(e), e || i(C));
-    }, ee = g(m);
-    w(() => {
+      var s;
+      e.preventDefault(), e.stopPropagation(), Z(""), i(""), l(!0), (s = w.current) == null || s.focus();
+    }, Ee = (e) => {
+      g && e || (l(e), e || i(C));
+    }, ee = h(m);
+    I(() => {
       ee.current = m;
     }, [m]);
-    const te = g(f);
-    w(() => {
-      te.current = f;
-    }, [f]);
-    const se = g(d);
-    w(() => {
+    const te = h(p);
+    I(() => {
+      te.current = p;
+    }, [p]);
+    const se = h(d);
+    I(() => {
       se.current = d;
     }, [d]);
-    const O = Te(
+    const T = Ae(
       (e) => {
-        S || X(e), u == null || u(e);
+        z || X(e), u == null || u(e);
       },
-      [S, u]
-    ), Ve = U(
+      [z, u]
+    ), Ve = B(
       () => ({
         getValue: () => ee.current || null,
         getQuery: () => te.current,
         getIsOpen: () => se.current,
         setValue: (e) => {
           const s = e ?? "";
-          z(s);
-          const n = r.find((p) => p.value === s);
+          N(s);
+          const n = r.find((f) => f.value === s);
           i((n == null ? void 0 : n.label) ?? "");
         },
         setQuery: (e) => {
           i(e);
         },
         clear: () => {
-          z(""), i("");
+          N(""), i("");
         },
-        open: () => O(!0),
-        close: () => O(!1)
+        open: () => T(!0),
+        close: () => T(!1)
       }),
-      [z, r, O]
+      [N, r, T]
     );
-    Ke(Je, Ve, j);
-    const De = P && !!m && !k && !h, Pe = He(r), q = nt[v];
-    return /* @__PURE__ */ o(_.Root, { open: d, onOpenChange: Fe, children: /* @__PURE__ */ N(
+    Qe(Je, Ve, D);
+    const je = q && !!m && !O && !g, qe = Ue(r), $ = nt[v];
+    return /* @__PURE__ */ o(_.Root, { open: d, onOpenChange: Ee, children: /* @__PURE__ */ S(
       c,
       {
         filter: Ce,
         shouldFilter: !0,
         loop: !0,
-        label: K ?? Y,
+        label: Q ?? Y,
         className: "ds:w-full",
         children: [
-          /* @__PURE__ */ o(_.Anchor, { asChild: !0, children: /* @__PURE__ */ N(
+          /* @__PURE__ */ o(_.Anchor, { asChild: !0, children: /* @__PURE__ */ S(
             "div",
             {
               ref: W,
               className: Ze({
                 size: v,
-                tone: xe,
-                className: fe
+                tone: ye,
+                className: pe
               }),
               "data-component": "combobox",
-              "data-component-id": j,
+              "data-component-id": D,
               children: [
                 /* @__PURE__ */ o(
                   c.Input,
                   {
-                    ref: Ue(pe, I),
-                    value: f,
-                    onValueChange: Se,
-                    id: ge,
+                    ref: Be(fe, w),
+                    value: p,
+                    onValueChange: ze,
+                    id: he,
                     name: le,
                     placeholder: Y,
-                    disabled: k,
-                    readOnly: h,
+                    disabled: O,
+                    readOnly: g,
                     required: ve,
-                    "aria-describedby": ye,
+                    "aria-describedby": xe,
                     "aria-invalid": J || void 0,
                     onFocus: Re,
                     onKeyDown: _e,
-                    onCompositionStart: Ie,
-                    onCompositionEnd: we,
+                    onCompositionStart: we,
+                    onCompositionEnd: Ie,
                     className: Ye({ size: v })
                   }
                 ),
-                De ? /* @__PURE__ */ o(
+                je ? /* @__PURE__ */ o(
                   "button",
                   {
                     type: "button",
-                    "aria-label": x("inputs.combobox.clear", "Clear selection"),
-                    onClick: Ee,
+                    "aria-label": y("inputs.combobox.clear", "Clear selection"),
+                    onClick: Fe,
                     onPointerDown: (e) => e.stopPropagation(),
                     className: [
                       "ds:inline-flex ds:items-center ds:justify-center ds:rounded-[var(--radius-sm)]",
@@ -377,7 +413,7 @@ const re = je(
             {
               forceMount: !0,
               hidden: !d,
-              "aria-label": K ?? x("inputs.combobox.popupLabel", "Options"),
+              "aria-label": Q ?? y("inputs.combobox.popupLabel", "Options"),
               onOpenAutoFocus: (e) => e.preventDefault(),
               onCloseAutoFocus: (e) => e.preventDefault(),
               onInteractOutside: (e) => {
@@ -388,26 +424,27 @@ const re = je(
               sideOffset: 4,
               align: "start",
               className: et(),
-              children: /* @__PURE__ */ N(c.List, { className: st, children: [
-                /* @__PURE__ */ o(c.Empty, { className: ot, children: me ?? x("inputs.combobox.empty", "No results found") }),
-                Pe.map(({ group: e, items: s }, n) => {
-                  const p = s.map((a) => {
-                    const B = a.value === m;
-                    return /* @__PURE__ */ N(
+              children: /* @__PURE__ */ S(c.List, { className: st, children: [
+                /* @__PURE__ */ o(c.Empty, { className: ot, children: me ?? y("inputs.combobox.empty", "No results found") }),
+                qe.map(({ group: e, items: s }, n) => {
+                  const f = s.map((a) => {
+                    const k = a.value === m;
+                    return /* @__PURE__ */ S(
                       c.Item,
                       {
                         value: a.value,
+                        "data-option-id": a.value,
                         keywords: [a.label],
                         disabled: a.disabled,
-                        onSelect: Ne,
+                        onSelect: Se,
                         className: ne({ size: v }),
                         children: [
                           /* @__PURE__ */ o(
                             "span",
                             {
                               "aria-hidden": "true",
-                              className: `ds:inline-flex ds:items-center ds:justify-center ${q}`,
-                              children: B ? /* @__PURE__ */ o(We, { className: q }) : null
+                              className: `ds:inline-flex ds:items-center ds:justify-center ${$}`,
+                              children: k ? /* @__PURE__ */ o(We, { className: $ }) : null
                             }
                           ),
                           /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: a.label }),
@@ -421,21 +458,21 @@ const re = je(
                     c.Group,
                     {
                       heading: /* @__PURE__ */ o("span", { className: tt, children: e }),
-                      children: p
+                      children: f
                     },
                     `group-${e}`
-                  ) : /* @__PURE__ */ o(c.Group, { children: p }, `group-${n}`);
+                  ) : /* @__PURE__ */ o(c.Group, { children: f }, `group-${n}`);
                 }),
-                ue && f.length > 0 ? /* @__PURE__ */ o(
+                ue && p.length > 0 ? /* @__PURE__ */ o(
                   rt,
                   {
-                    search: f,
-                    label: x("inputs.combobox.create", 'Create "{{value}}"', {
-                      value: f
+                    search: p,
+                    label: y("inputs.combobox.create", 'Create "{{value}}"', {
+                      value: p
                     }),
-                    iconClass: q,
+                    iconClass: $,
                     size: v,
-                    onSelect: ze
+                    onSelect: Ne
                   }
                 ) : null
               ] })
@@ -456,4 +493,4 @@ export {
   ne as d,
   Ze as e
 };
-//# sourceMappingURL=combobox-BC-DFx8G.js.map
+//# sourceMappingURL=combobox-Clum7gJ1.js.map