@alfadocs/ui-kit 0.68.0 → 0.69.0

package/dist/_chunks/{autocomplete-CcCFlVf-.js → autocomplete-DOeGouCL.js}

@@ -1,62 +1,83 @@
-import { jsx as o, jsxs as _ } from "react/jsx-runtime";
-import { forwardRef as We, useId as Ye, useState as $, useRef as c, useCallback as D, useEffect as R, useMemo as G } from "react";
+import { jsx as n, jsxs as E } from "react/jsx-runtime";
+import { forwardRef as We, useId as Ye, useState as $, useRef as c, useCallback as D, useEffect as R, useMemo as L } from "react";
 import { _ as f } from "./index-4xgbg-sn.js";
-import * as T from "@radix-ui/react-popover";
-import { c as A } from "./index-D2ZczOXr.js";
+import * as F from "@radix-ui/react-popover";
+import { c as T } from "./index-D2ZczOXr.js";
 import { useTranslation as Ze } from "react-i18next";
 import { S as pe } from "./spinner-hbwuKwMf.js";
 import { u as et } from "./form-field-context-B3APVHKx.js";
 import { u as tt } from "./use-controllable-state-BiY4xTzM.js";
 import { g as st } from "./group-options-BvKhQ3xb.js";
-import { I as nt, a as S, b as K, c as ot } from "./input-surface-xyERuLU_.js";
-import { u as at } from "./use-debounced-callback-BisrB-Fq.js";
-import { u as rt } from "./registry-nPAVE19X.js";
+import { I as ot, a as Q, b as G, c as nt } from "./input-surface-xyERuLU_.js";
+import { u as at } from "./registry-DvAUVLHh.js";
+import { u as rt } from "./use-debounced-callback-BisrB-Fq.js";
 const it = {
   id: "autocomplete",
-  capabilities: ["filter", "pick", "open", "close"],
+  capabilities: ["select_single", "filter", "open", "close"],
   state: {
     value: {
       type: "string | null",
+      descriptionKey: "ui.agent.autocomplete.state.value",
       description: "Currently-selected option value, or null when nothing is committed.",
       read: (s) => s.getValue()
     },
     query: {
       type: "string",
+      descriptionKey: "ui.agent.autocomplete.state.query",
       description: "Current free-text query in the input.",
       read: (s) => s.getQuery()
     },
     isOpen: {
       type: "boolean",
+      descriptionKey: "ui.agent.autocomplete.state.isOpen",
       description: "True when the suggestion list is visible.",
       read: (s) => s.getIsOpen()
     }
   },
   actions: {
     set_value: {
-      safety: "read",
+      safety: "write",
       argsType: "{ value: string | null }",
+      argsSchema: {
+        type: "object",
+        properties: { value: { type: ["string", "null"] } },
+        required: ["value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.setValue",
       description: "Set the committed value programmatically.",
-      invoke: (s, l) => {
-        s.setValue(l.value);
+      invoke: (s, u) => {
+        s.setValue(u.value);
       }
     },
     apply_filter: {
       safety: "read",
       argsType: "{ query: string }",
+      argsSchema: {
+        type: "object",
+        properties: { query: { type: "string" } },
+        required: ["query"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.applyFilter",
       description: "Set the input query, which filters the suggestion list.",
-      invoke: (s, l) => {
-        s.setQuery(l.query);
+      invoke: (s, u) => {
+        s.setQuery(u.query);
       }
     },
     clear: {
-      safety: "read",
-      description: "Clear the value and the query.",
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.clear",
+      description: "Clear the committed value and the query. Discards the typed input.",
       invoke: (s) => {
         s.clear();
       }
     },
     open: {
       safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.open",
       description: "Open the suggestion list.",
       invoke: (s) => {
         s.open();
@@ -64,6 +85,8 @@ const it = {
     },
     close: {
       safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.close",
       description: "Close the suggestion list.",
       invoke: (s) => {
         s.close();
@@ -82,20 +105,20 @@ const it = {
       description: "Each suggestion emits its value as data-option-id."
     }
   }
-}, dt = A(
-  ["ds:flex ds:w-full ds:items-center", ot].join(" "),
+}, dt = T(
+  ["ds:flex ds:w-full ds:items-center", nt].join(" "),
   {
     variants: {
       size: {
-        sm: `${S.sm} ${K.sm}`,
-        md: `${S.md} ${K.md}`,
-        lg: `${S.lg} ${K.lg}`
+        sm: `${Q.sm} ${G.sm}`,
+        md: `${Q.md} ${G.md}`,
+        lg: `${Q.lg} ${G.lg}`
       },
-      tone: nt
+      tone: ot
     },
     defaultVariants: { size: "md", tone: "default" }
   }
-), lt = A(
+), ut = T(
   [
     "ds:flex-1 ds:min-w-0 ds:bg-transparent ds:text-foreground",
     "ds:placeholder:text-muted-foreground",
@@ -110,7 +133,7 @@ const it = {
     },
     defaultVariants: { hasStart: !1, hasEnd: !1 }
   }
-), ut = A(
+), lt = T(
   [
     "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-background",
@@ -121,7 +144,7 @@ const it = {
     "ds:data-[state=closed]:zoom-out-95",
     "ds:motion-reduce:animate-none"
   ].join(" ")
-), me = A(
+), me = T(
   [
     "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
     "ds:ps-3 ds:pe-3 ds:py-2 ds:text-[length:var(--font-size-sm)] ds:text-foreground",
@@ -137,72 +160,72 @@ const it = {
   "ds:[&_[cmdk-group-heading]]:type-eyebrow",
   "ds:[&_[cmdk-group-heading]]:text-muted-foreground"
 ].join(" "), X = "ds:inline-flex ds:items-center ds:shrink-0 ds:text-muted-foreground ds:[&_svg]:size-4";
-function J(s, l, F) {
-  return `${s}-${l}-${F}`;
+function J(s, u, A) {
+  return `${s}-${u}-${A}`;
 }
-function ge(s, l) {
-  return `${s}:${l}`;
+function ge(s, u) {
+  return `${s}:${u}`;
 }
 const ct = We(
   function({
-    loadOptions: l,
-    debounceMs: F = 250,
+    loadOptions: u,
+    debounceMs: A = 250,
     value: he,
     defaultValue: ve,
-    onChange: be,
-    onSelect: u,
+    onChange: ye,
+    onSelect: l,
     recents: v,
     onRecentSelect: B,
-    snapOnBlur: ye = !1,
+    snapOnBlur: be = !1,
     size: we = "md",
     tone: Ce = "default",
     startAdornment: M,
-    endAdornment: P,
+    endAdornment: q,
     placeholder: W,
-    disabled: ke,
-    readOnly: b,
-    required: xe,
+    disabled: xe,
+    readOnly: y,
+    required: ke,
     name: Ve,
-    id: z,
+    id: K,
     className: Re,
     "aria-label": Y
-  }, k) {
-    const { t: y, i18n: Ne } = Ze(), x = et(), Ie = Ye(), g = z ?? x.id ?? Ie, Z = `${g}-listbox`, Ee = `${g}-live`, h = !!(x.disabled || ke), _e = !!(x.required || xe), ee = x.invalid, $e = ee ? "error" : Ce ?? "default", De = x.describedBy || void 0, [Te, te] = tt({
+  }, x) {
+    const { t: b, i18n: Ne } = Ze(), k = et(), Ie = Ye(), g = K ?? k.id ?? Ie, Z = `${g}-listbox`, _e = `${g}-live`, h = !!(k.disabled || xe), Ee = !!(k.required || ke), ee = k.invalid, $e = ee ? "error" : Ce ?? "default", De = k.describedBy || void 0, [Fe, te] = tt({
       value: he,
       defaultValue: ve ?? "",
-      onChange: be
-    }), r = Te ?? "", [i, d] = $(!1), [w, se] = $([]), [V, j] = $(!1), [p, Ae] = $(""), N = c(!1), U = c(null), q = c(r), ne = c(/* @__PURE__ */ new Map()), oe = c(/* @__PURE__ */ new Map()), H = c(null), L = c(null), Fe = D(
+      onChange: ye
+    }), r = Fe ?? "", [i, d] = $(!1), [w, se] = $([]), [V, P] = $(!1), [p, Te] = $(""), N = c(!1), j = c(null), z = c(r), oe = c(/* @__PURE__ */ new Map()), ne = c(/* @__PURE__ */ new Map()), U = c(null), O = c(null), Ae = D(
       (e) => {
-        H.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
+        U.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
       },
-      [k]
+      [x]
     ), ae = Ne.language;
     R(() => {
       const e = /* @__PURE__ */ new Map();
       for (const t of w) e.set(t.value, t);
-      ne.current = e;
+      oe.current = e;
     }, [w]), R(() => {
       const e = /* @__PURE__ */ new Map();
       if (v) for (const t of v) e.set(t.value, t);
-      oe.current = e;
+      ne.current = e;
     }, [v]);
     const Be = D(
       (e) => {
-        var n;
-        if (h || b || N.current) return;
-        (n = U.current) == null || n.abort();
+        var o;
+        if (h || y || N.current) return;
+        (o = j.current) == null || o.abort();
         const t = new AbortController();
-        U.current = t, q.current = e, j(!0), l(e, { signal: t.signal, locale: ae }).then((a) => {
-          t.signal.aborted || q.current === e && (se(a), j(!1));
+        j.current = t, z.current = e, P(!0), u(e, { signal: t.signal, locale: ae }).then((a) => {
+          t.signal.aborted || z.current === e && (se(a), P(!1));
         }).catch((a) => {
-          t.signal.aborted || a && typeof a == "object" && "name" in a && a.name === "AbortError" || q.current === e && (se([]), j(!1));
+          t.signal.aborted || a && typeof a == "object" && "name" in a && a.name === "AbortError" || z.current === e && (se([]), P(!1));
         });
       },
-      [h, b, l, ae]
-    ), C = at(Be, F);
+      [h, y, u, ae]
+    ), C = rt(Be, A);
     R(() => () => {
       var e;
-      C.cancel(), (e = U.current) == null || e.abort();
+      C.cancel(), (e = j.current) == null || e.abort();
     }, [C]);
     const m = D(
       (e) => {
@@ -211,32 +234,32 @@ const ct = We(
       [te]
     ), re = D(
       (e) => {
-        const [t, n] = e.split(":");
-        if (!n || t !== "recent" && t !== "option") return null;
-        const ce = (t === "recent" ? oe.current : ne.current).get(n);
+        const [t, o] = e.split(":");
+        if (!o || t !== "recent" && t !== "option") return null;
+        const ce = (t === "recent" ? ne.current : oe.current).get(o);
         return ce ? { kind: t, option: ce } : null;
       },
       []
     ), Me = (e) => {
-      m(e), !(h || b) && (i || d(!0), !N.current && C(e));
-    }, Pe = (e) => {
+      m(e), !(h || y) && (i || d(!0), !N.current && C(e));
+    }, qe = (e) => {
       N.current = !0;
-    }, ze = (e) => {
+    }, Ke = (e) => {
       N.current = !1;
       const t = e.currentTarget.value;
       C(t);
+    }, Pe = (e) => {
+      h || y || (d(!0), r && C(r));
     }, je = (e) => {
-      h || b || (d(!0), r && C(r));
-    }, Ue = (e) => {
       const t = e.relatedTarget;
-      if (!(t && L.current && L.current.contains(t))) {
-        if (ye && p) {
-          const n = re(p);
-          n && (m(n.option.label), u == null || u(n.option));
+      if (!(t && O.current && O.current.contains(t))) {
+        if (be && p) {
+          const o = re(p);
+          o && (m(o.option.label), l == null || l(o.option));
         }
         d(!1);
       }
-    }, qe = (e) => {
+    }, ze = (e) => {
       if (!e.nativeEvent.isComposing) {
         if (e.key === "Escape") {
           i && (e.preventDefault(), e.stopPropagation(), d(!1));
@@ -248,39 +271,39 @@ const ct = We(
         }
         if (e.key === "Tab" && i && p) {
           const t = re(p);
-          t && (m(t.option.label), u == null || u(t.option), d(!1));
+          t && (m(t.option.label), l == null || l(t.option), d(!1));
         }
       }
     }, ie = (e, t) => {
-      var n;
-      m(t.label), e === "recent" ? B == null || B(t) : u == null || u(t), d(!1), (n = H.current) == null || n.focus();
-    }, O = (e) => {
+      var o;
+      m(t.label), e === "recent" ? B == null || B(t) : l == null || l(t), d(!1), (o = U.current) == null || o.focus();
+    }, S = (e) => {
       e.preventDefault();
-    }, I = !!(v && v.length > 0) && r.length === 0, He = G(
+    }, I = !!(v && v.length > 0) && r.length === 0, Ue = L(
       () => st(w),
       [w]
-    ), Le = !!M, Oe = !!P || V, Qe = dt({
+    ), Oe = !!M, Se = !!q || V, He = dt({
       size: we,
       tone: $e,
       className: Re
-    }), Ge = G(() => {
+    }), Le = L(() => {
       if (!p) return;
       const [e, t] = p.split(":");
       if (!(!t || e !== "recent" && e !== "option"))
         return J(g, e, t);
-    }, [p, g]), E = w.length > 0, de = !I && !E && !V && r.length > 0, le = V && !E, Se = I || E || de || le, Q = c(r);
+    }, [p, g]), _ = w.length > 0, de = !I && !_ && !V && r.length > 0, ue = V && !_, Qe = I || _ || de || ue, H = c(r);
     R(() => {
-      Q.current = r;
+      H.current = r;
     }, [r]);
-    const ue = c(i);
+    const le = c(i);
     R(() => {
-      ue.current = i;
+      le.current = i;
     }, [i]);
-    const Ke = G(
+    const Ge = L(
       () => ({
-        getValue: () => Q.current || null,
-        getQuery: () => Q.current,
-        getIsOpen: () => ue.current,
+        getValue: () => H.current || null,
+        getQuery: () => H.current,
+        getIsOpen: () => le.current,
         setValue: (e) => {
           m(e ?? "");
         },
@@ -299,67 +322,67 @@ const ct = We(
       }),
       [m]
     );
-    rt(it, Ke, z);
-    const Xe = w.length, Je = V ? y("common.loading", "Loading…") : i && r.length > 0 ? y("inputs.autocomplete.results", {
+    at(it, Ge, K);
+    const Xe = w.length, Je = V ? b("common.loading", "Loading…") : i && r.length > 0 ? b("inputs.autocomplete.results", {
       count: Xe,
       defaultValue: "{{count}} results"
     }) : "";
-    return /* @__PURE__ */ o(
+    return /* @__PURE__ */ n(
       f,
       {
         shouldFilter: !1,
         value: p,
-        onValueChange: Ae,
+        onValueChange: Te,
         label: Y ?? W,
         className: "ds:w-full",
-        children: /* @__PURE__ */ _(
-          T.Root,
+        children: /* @__PURE__ */ E(
+          F.Root,
           {
-            open: i && !h && !b && Se,
+            open: i && !h && !y && Qe,
             children: [
-              /* @__PURE__ */ o(T.Anchor, { asChild: !0, children: /* @__PURE__ */ _(
+              /* @__PURE__ */ n(F.Anchor, { asChild: !0, children: /* @__PURE__ */ E(
                 "div",
                 {
-                  className: Qe,
+                  className: He,
                   "data-component": "autocomplete",
-                  "data-component-id": z,
+                  "data-component-id": K,
                   "data-disabled": h || void 0,
                   children: [
-                    M ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: `${X} ds:ps-3`, children: M }) : null,
-                    /* @__PURE__ */ o(
+                    M ? /* @__PURE__ */ n("span", { "aria-hidden": "true", className: `${X} ds:ps-3`, children: M }) : null,
+                    /* @__PURE__ */ n(
                       f.Input,
                       {
-                        ref: Fe,
+                        ref: Ae,
                         id: g,
                         name: Ve,
                         placeholder: W,
                         value: r,
                         onValueChange: Me,
-                        onFocus: je,
-                        onBlur: Ue,
-                        onKeyDown: qe,
-                        onCompositionStart: Pe,
-                        onCompositionEnd: ze,
+                        onFocus: Pe,
+                        onBlur: je,
+                        onKeyDown: ze,
+                        onCompositionStart: qe,
+                        onCompositionEnd: Ke,
                         disabled: h,
-                        readOnly: b,
-                        required: _e,
+                        readOnly: y,
+                        required: Ee,
                         role: "combobox",
                         "aria-autocomplete": "both",
                         "aria-expanded": i,
                         "aria-controls": i ? Z : void 0,
-                        "aria-activedescendant": Ge,
+                        "aria-activedescendant": Le,
                         "aria-describedby": De,
                         "aria-invalid": ee || void 0,
-                        "aria-label": Y ?? y("inputs.autocomplete.ariaLabel"),
+                        "aria-label": Y ?? b("inputs.autocomplete.ariaLabel"),
                         autoComplete: "off",
-                        className: lt({ hasStart: Le, hasEnd: Oe })
+                        className: ut({ hasStart: Oe, hasEnd: Se })
                       }
                     ),
-                    V ? /* @__PURE__ */ o("span", { className: `${X} ds:pe-3`, "aria-hidden": "true", children: /* @__PURE__ */ o(pe, { variant: "pulse", size: "sm" }) }) : P ? /* @__PURE__ */ o("span", { "aria-hidden": "true", className: `${X} ds:pe-3`, children: P }) : null,
-                    /* @__PURE__ */ o(
+                    V ? /* @__PURE__ */ n("span", { className: `${X} ds:pe-3`, "aria-hidden": "true", children: /* @__PURE__ */ n(pe, { variant: "pulse", size: "sm" }) }) : q ? /* @__PURE__ */ n("span", { "aria-hidden": "true", className: `${X} ds:pe-3`, children: q }) : null,
+                    /* @__PURE__ */ n(
                       "span",
                       {
-                        id: Ee,
+                        id: _e,
                         role: "status",
                         "aria-live": "polite",
                         "aria-atomic": "true",
@@ -370,10 +393,10 @@ const ct = We(
                   ]
                 }
               ) }),
-              /* @__PURE__ */ o(T.Portal, { forceMount: !0, children: /* @__PURE__ */ o(
-                T.Content,
+              /* @__PURE__ */ n(F.Portal, { forceMount: !0, children: /* @__PURE__ */ n(
+                F.Content,
                 {
-                  ref: L,
+                  ref: O,
                   forceMount: !0,
                   hidden: !i,
                   side: "bottom",
@@ -382,36 +405,37 @@ const ct = We(
                   onOpenAutoFocus: (e) => e.preventDefault(),
                   onCloseAutoFocus: (e) => e.preventDefault(),
                   onPointerDownOutside: (e) => {
-                    var n;
+                    var o;
                     const t = e.target;
-                    if (t && ((n = H.current) != null && n.contains(t))) {
+                    if (t && ((o = U.current) != null && o.contains(t))) {
                       e.preventDefault();
                       return;
                     }
                     d(!1);
                   },
                   onEscapeKeyDown: () => d(!1),
-                  onMouseDown: O,
-                  className: ut(),
-                  children: /* @__PURE__ */ _(
+                  onMouseDown: S,
+                  className: lt(),
+                  children: /* @__PURE__ */ E(
                     f.List,
                     {
                       id: Z,
                       className: "ds:max-h-[min(24rem,var(--radix-popover-content-available-height))] ds:overflow-auto ds:p-1",
                       children: [
-                        I ? /* @__PURE__ */ o(
+                        I ? /* @__PURE__ */ n(
                           f.Group,
                           {
-                            heading: y("inputs.autocomplete.recent", "Recent"),
+                            heading: b("inputs.autocomplete.recent", "Recent"),
                             className: fe,
-                            children: (v ?? []).map((e) => /* @__PURE__ */ o(
+                            children: (v ?? []).map((e) => /* @__PURE__ */ n(
                               f.Item,
                               {
                                 id: J(g, "recent", e.value),
+                                "data-option-id": e.value,
                                 value: ge("recent", e.value),
                                 disabled: e.disabled,
                                 onSelect: () => ie("recent", e),
-                                onMouseDown: O,
+                                onMouseDown: S,
                                 className: me(),
                                 children: e.label
                               },
@@ -419,34 +443,35 @@ const ct = We(
                             ))
                           }
                         ) : null,
-                        de ? /* @__PURE__ */ o("div", { className: "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: y("inputs.autocomplete.noResults", "No results") }) : null,
-                        le ? /* @__PURE__ */ _("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: [
-                          /* @__PURE__ */ o(pe, { variant: "pulse", size: "sm" }),
-                          /* @__PURE__ */ o("span", { children: y("common.loading", "Loading…") })
+                        de ? /* @__PURE__ */ n("div", { className: "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: b("inputs.autocomplete.noResults", "No results") }) : null,
+                        ue ? /* @__PURE__ */ E("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: [
+                          /* @__PURE__ */ n(pe, { variant: "pulse", size: "sm" }),
+                          /* @__PURE__ */ n("span", { children: b("common.loading", "Loading…") })
                         ] }) : null,
-                        !I && E ? He.map((e, t) => {
-                          const n = e.items.map((a) => /* @__PURE__ */ o(
+                        !I && _ ? Ue.map((e, t) => {
+                          const o = e.items.map((a) => /* @__PURE__ */ n(
                             f.Item,
                             {
                               id: J(g, "option", a.value),
+                              "data-option-id": a.value,
                               value: ge("option", a.value),
                               disabled: a.disabled,
                               onSelect: () => ie("option", a),
-                              onMouseDown: O,
+                              onMouseDown: S,
                               className: me(),
                               children: a.label
                             },
                             `option-${a.value}`
                           ));
-                          return e.group ? /* @__PURE__ */ o(
+                          return e.group ? /* @__PURE__ */ n(
                             f.Group,
                             {
                               heading: e.group,
                               className: fe,
-                              children: n
+                              children: o
                             },
                             `group-${e.group}`
-                          ) : /* @__PURE__ */ o(f.Group, { children: n }, `group-${t}`);
+                          ) : /* @__PURE__ */ n(f.Group, { children: o }, `group-${t}`);
                         }) : null
                       ]
                     }
@@ -466,4 +491,4 @@ export {
   it as a,
   dt as b
 };
-//# sourceMappingURL=autocomplete-CcCFlVf-.js.map
+//# sourceMappingURL=autocomplete-DOeGouCL.js.map