@alfadocs/ui-kit-debug 1.90.0 → 1.90.2

package/dist/_chunks/autocomplete-BXMcNoa3.js

@@ -0,0 +1,562 @@
+import { jsx as s, jsxs as R } from "react/jsx-runtime";
+import { forwardRef as at, useId as ot, useState as T, useRef as p, useCallback as V, useEffect as E, useMemo as Y } from "react";
+import { _ as g } from "./index-4xgbg-sn.js";
+import * as B from "@radix-ui/react-popover";
+import { c as P } from "./index-D2ZczOXr.js";
+import { useTranslation as rt } from "react-i18next";
+import { S as he } from "./spinner-CoflYlEx.js";
+import { u as it, b as lt } from "./form-field-context-DtiROUJV.js";
+import { u as dt } from "./use-controllable-state-BiY4xTzM.js";
+import { u as ve } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { g as ut } from "./group-options-BvKhQ3xb.js";
+import { b as ct } from "./menu-row-BAr8bx1I.js";
+import { I as pt, a as Z, b as ee, c as mt } from "./input-surface-iBmxVBfr.js";
+import { u as ft } from "./registry-DvAUVLHh.js";
+import { u as gt } from "./use-debounced-callback-BisrB-Fq.js";
+const ht = {
+  id: "autocomplete",
+  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: (a) => a.getValue()
+    },
+    query: {
+      type: "string",
+      descriptionKey: "ui.agent.autocomplete.state.query",
+      description: "Current free-text query in the input.",
+      read: (a) => a.getQuery()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.autocomplete.state.isOpen",
+      description: "True when the suggestion popup is visible. Open with no suggestions to show reads false.",
+      read: (a) => a.getIsOpen()
+    }
+  },
+  actions: {
+    set_value: {
+      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: (a, d) => {
+        a.setValue(d.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: (a, d) => {
+        a.setQuery(d.query);
+      }
+    },
+    clear: {
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.clear",
+      description: "Clear the committed value and the query. Discards the typed input.",
+      invoke: (a) => {
+        a.clear();
+      }
+    },
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.open",
+      description: "Open the suggestion list.",
+      invoke: (a) => {
+        a.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.autocomplete.actions.close",
+      description: "Close the suggestion list.",
+      invoke: (a) => {
+        a.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "autocomplete" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-option-id",
+      description: "Each suggestion emits its value as data-option-id."
+    }
+  }
+}, vt = P(
+  ["ds:flex ds:w-full ds:items-center", mt].join(" "),
+  {
+    variants: {
+      size: {
+        sm: `${Z.sm} ${ee.sm}`,
+        md: `${Z.md} ${ee.md}`,
+        lg: `${Z.lg} ${ee.lg}`
+      },
+      tone: pt
+    },
+    defaultVariants: { size: "md", tone: "default" }
+  }
+), bt = P(
+  [
+    "ds:flex-1 ds:min-w-0 ds:bg-transparent ds:text-foreground",
+    "ds:placeholder:text-muted-foreground",
+    "ds:outline-none ds:focus:outline-none ds:focus-visible:outline-none",
+    "ds:disabled:cursor-not-allowed",
+    "ds:read-only:cursor-default"
+  ].join(" "),
+  {
+    variants: {
+      hasStart: { true: "ds:ps-2", false: "ds:ps-3" },
+      hasEnd: { true: "ds:pe-2", false: "ds:pe-3" }
+    },
+    defaultVariants: { hasStart: !1, hasEnd: !1 }
+  }
+), yt = P(
+  [
+    "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
+    "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-background",
+    "ds:shadow-[var(--shadow-md)]",
+    "ds:w-[var(--radix-popover-trigger-width)]",
+    "ds:animate-in ds:fade-in ds:zoom-in-95",
+    "ds:motion-reduce:animate-none"
+  ].join(" ")
+), be = P(
+  [
+    "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",
+    "ds:rounded-[var(--radius-sm)] ds:select-none ds:cursor-pointer",
+    "ds:data-[disabled=true]:pointer-events-none ds:data-[disabled=true]:opacity-50",
+    // cmdk moves the selection on pointer move, so hover needs no tint.
+    ct.selected
+  ].join(" ")
+), ye = [
+  "ds:[&_[cmdk-group-heading]]:ps-3",
+  "ds:[&_[cmdk-group-heading]]:pe-3",
+  "ds:[&_[cmdk-group-heading]]:py-1.5",
+  "ds:[&_[cmdk-group-heading]]:type-eyebrow",
+  "ds:[&_[cmdk-group-heading]]:text-muted-foreground"
+].join(" "), te = "ds:inline-flex ds:items-center ds:shrink-0 ds:text-muted-foreground ds:[&_svg]:size-4";
+function se(a, d, q) {
+  return `${a}-${d}-${q}`;
+}
+function we(a, d) {
+  return `${a}:${d}`;
+}
+const wt = at(
+  function({
+    loadOptions: d,
+    debounceMs: q = 250,
+    value: Ce,
+    defaultValue: xe,
+    onChange: ke,
+    onSelect: u,
+    recents: w,
+    onRecentSelect: K,
+    snapOnBlur: Ne = !1,
+    size: Re = "md",
+    tone: Ve = "default",
+    startAdornment: M,
+    endAdornment: j,
+    placeholder: z,
+    disabled: Ae,
+    readOnly: C,
+    required: Ie,
+    name: Ee,
+    id: O,
+    className: _e,
+    "aria-label": U,
+    "aria-invalid": $e,
+    "aria-describedby": De,
+    autoComplete: H
+  }, A) {
+    const { t: h, i18n: Fe } = rt("ui"), c = it(), Te = ot(), v = O ?? c.id ?? Te, ne = `${v}-listbox`, Be = `${v}-live`, b = !!(c.disabled || Ae), Pe = !!(c.required || Ie), ae = c.invalid || !!$e, qe = ae ? "error" : Ve ?? "default", Ke = c.describedBy || De || void 0, [Me, oe] = dt({
+      value: Ce,
+      defaultValue: xe ?? "",
+      onChange: ke
+    }), r = Me ?? "", [x, i] = T(!1), [k, re] = T([]), [I, S] = T(!1), [m, je] = T(""), _ = p(!1), L = p(null), G = p(r), ie = p(/* @__PURE__ */ new Map()), le = p(/* @__PURE__ */ new Map()), y = p(null), $ = p(null);
+    lt(c, y);
+    const Q = H && H !== "off" ? H : void 0;
+    ve(() => {
+      var e;
+      Q && ((e = y.current) == null || e.setAttribute("autocomplete", Q));
+    });
+    const ze = V(
+      (e) => {
+        y.current = e, typeof A == "function" ? A(e) : A && (A.current = e);
+      },
+      [A]
+    ), de = Fe.language;
+    E(() => {
+      const e = /* @__PURE__ */ new Map();
+      for (const t of k) e.set(t.value, t);
+      ie.current = e;
+    }, [k]), E(() => {
+      const e = /* @__PURE__ */ new Map();
+      if (w) for (const t of w) e.set(t.value, t);
+      le.current = e;
+    }, [w]);
+    const Oe = V(
+      (e) => {
+        var n;
+        if (b || C || _.current) return;
+        (n = L.current) == null || n.abort();
+        const t = new AbortController();
+        L.current = t, G.current = e, S(!0), d(e, { signal: t.signal, locale: de }).then((o) => {
+          t.signal.aborted || G.current === e && (re(o), S(!1));
+        }).catch((o) => {
+          t.signal.aborted || o && typeof o == "object" && "name" in o && o.name === "AbortError" || G.current === e && (re([]), S(!1));
+        });
+      },
+      [b, C, d, de]
+    ), N = gt(Oe, q);
+    E(() => () => {
+      var e;
+      N.cancel(), (e = L.current) == null || e.abort();
+    }, [N]);
+    const f = V(
+      (e) => {
+        oe(e);
+      },
+      [oe]
+    ), ue = V(
+      (e) => {
+        const [t, n] = e.split(":");
+        if (!n || t !== "recent" && t !== "option") return null;
+        const ge = (t === "recent" ? le.current : ie.current).get(n);
+        return ge ? { kind: t, option: ge } : null;
+      },
+      []
+    ), Ue = (e) => {
+      f(e), !(b || C) && (Q && document.activeElement !== y.current || (x || i(!0), !_.current && N(e)));
+    }, He = (e) => {
+      _.current = !0;
+    }, Se = (e) => {
+      _.current = !1;
+      const t = e.currentTarget.value;
+      N(t);
+    }, Le = (e) => {
+      b || C || (i(!0), r && N(r));
+    }, Ge = (e) => {
+      const t = e.relatedTarget;
+      if (!(t && $.current && $.current.contains(t))) {
+        if (Ne && m) {
+          const n = ue(m);
+          n && (f(n.option.label), u == null || u(n.option));
+        }
+        i(!1);
+      }
+    }, Qe = (e) => {
+      if (!e.nativeEvent.isComposing) {
+        if (e.key === "Escape") {
+          x && (e.preventDefault(), e.stopPropagation(), i(!1));
+          return;
+        }
+        if (e.key === "ArrowDown" && !x) {
+          e.preventDefault(), i(!0), r && N(r);
+          return;
+        }
+        if (e.key === "Tab" && x && m) {
+          const t = ue(m);
+          t && (f(t.option.label), u == null || u(t.option), i(!1));
+        }
+      }
+    }, ce = (e, t) => {
+      var n;
+      f(t.label), e === "recent" ? K == null || K(t) : u == null || u(t), i(!1), (n = y.current) == null || n.focus();
+    }, W = (e) => {
+      e.preventDefault();
+    }, D = !!(w && w.length > 0) && r.length === 0, We = Y(
+      () => ut(k),
+      [k]
+    ), Xe = !!M, Je = !!j || I, Ye = vt({
+      size: Re,
+      tone: qe,
+      className: _e
+    }), Ze = Y(() => {
+      if (!m) return;
+      const [e, t] = m.split(":");
+      if (!(!t || e !== "recent" && e !== "option"))
+        return se(v, e, t);
+    }, [m, v]), F = k.length > 0, pe = !D && !F && !I && r.length > 0, me = I && !F, l = x && !b && !C && (D || F || pe || me), X = V(() => {
+      var n;
+      const e = y.current;
+      if (!e) return;
+      e.setAttribute("aria-expanded", String(l));
+      const t = (n = $.current) == null ? void 0 : n.querySelector("[cmdk-list]");
+      l && (t != null && t.id) ? e.setAttribute("aria-controls", t.id) : l || (e.removeAttribute("aria-controls"), e.removeAttribute("aria-activedescendant"));
+    }, [l]);
+    ve(X);
+    const et = V(
+      (e) => {
+        $.current = e, X();
+      },
+      [X]
+    ), J = p(r);
+    E(() => {
+      J.current = r;
+    }, [r]);
+    const fe = p(l);
+    E(() => {
+      fe.current = l;
+    }, [l]);
+    const tt = Y(
+      () => ({
+        getValue: () => J.current || null,
+        getQuery: () => J.current,
+        getIsOpen: () => fe.current,
+        setValue: (e) => {
+          f(e ?? "");
+        },
+        setQuery: (e) => {
+          f(e);
+        },
+        clear: () => {
+          f("");
+        },
+        open: () => {
+          i(!0);
+        },
+        close: () => {
+          i(!1);
+        }
+      }),
+      [f]
+    );
+    ft(ht, tt, O);
+    const st = k.length, nt = I ? h("common.loading", "Loading…") : x && r.length > 0 ? h("inputs.autocomplete.results", {
+      count: st,
+      defaultValue: "{{count}} results"
+    }) : "";
+    return /* @__PURE__ */ s(
+      g,
+      {
+        shouldFilter: !1,
+        value: m,
+        onValueChange: je,
+        label: U ?? (c.label || z),
+        className: "ds:w-full",
+        children: /* @__PURE__ */ R(B.Root, { open: l, children: [
+          /* @__PURE__ */ s(B.Anchor, { asChild: !0, children: /* @__PURE__ */ R(
+            "div",
+            {
+              className: Ye,
+              "data-component": "autocomplete",
+              "data-component-id": O,
+              "data-disabled": b || void 0,
+              children: [
+                M ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: `${te} ds:ps-3`, children: M }) : null,
+                /* @__PURE__ */ s(
+                  g.Input,
+                  {
+                    ref: ze,
+                    id: v,
+                    name: Ee,
+                    placeholder: z,
+                    value: r,
+                    onValueChange: Ue,
+                    onFocus: Le,
+                    onBlur: Ge,
+                    onKeyDown: Qe,
+                    onCompositionStart: He,
+                    onCompositionEnd: Se,
+                    disabled: b,
+                    readOnly: C,
+                    required: Pe,
+                    role: "combobox",
+                    "aria-autocomplete": "both",
+                    "aria-expanded": l,
+                    "aria-controls": l ? ne : void 0,
+                    "aria-activedescendant": Ze,
+                    "aria-describedby": Ke,
+                    "aria-invalid": ae || void 0,
+                    "aria-label": U ?? (c.label || h("inputs.autocomplete.ariaLabel")),
+                    autoComplete: "off",
+                    className: bt({ hasStart: Xe, hasEnd: Je })
+                  }
+                ),
+                I ? /* @__PURE__ */ s("span", { className: `${te} ds:pe-3`, "aria-hidden": "true", children: /* @__PURE__ */ s(he, { variant: "pulse", size: "sm" }) }) : j ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: `${te} ds:pe-3`, children: j }) : null,
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    id: Be,
+                    role: "status",
+                    "aria-live": "polite",
+                    "aria-atomic": "true",
+                    className: "ds:sr-only",
+                    children: nt
+                  }
+                )
+              ]
+            }
+          ) }),
+          l ? /* @__PURE__ */ s(B.Portal, { children: /* @__PURE__ */ s(
+            B.Content,
+            {
+              ref: et,
+              role: "presentation",
+              side: "bottom",
+              align: "start",
+              sideOffset: 4,
+              onOpenAutoFocus: (e) => e.preventDefault(),
+              onCloseAutoFocus: (e) => e.preventDefault(),
+              onPointerDownOutside: (e) => {
+                var n;
+                const t = e.target;
+                if (t && ((n = y.current) != null && n.contains(t))) {
+                  e.preventDefault();
+                  return;
+                }
+                i(!1);
+              },
+              onEscapeKeyDown: () => i(!1),
+              onMouseDown: W,
+              className: yt(),
+              children: /* @__PURE__ */ R(
+                g.List,
+                {
+                  id: ne,
+                  label: U ?? (c.label || z || h("inputs.autocomplete.ariaLabel")),
+                  className: "ds:max-h-[min(24rem,var(--radix-popover-content-available-height))] ds:overflow-auto ds:p-1",
+                  children: [
+                    D ? /* @__PURE__ */ s(
+                      g.Group,
+                      {
+                        heading: h("inputs.autocomplete.recent", "Recent"),
+                        className: ye,
+                        children: (w ?? []).map((e) => /* @__PURE__ */ R(
+                          g.Item,
+                          {
+                            id: se(v, "recent", e.value),
+                            "data-option-id": e.value,
+                            value: we("recent", e.value),
+                            disabled: e.disabled,
+                            onSelect: () => ce("recent", e),
+                            onMouseDown: W,
+                            className: be(),
+                            children: [
+                              e.startAdornment ? /* @__PURE__ */ s(
+                                "span",
+                                {
+                                  "aria-hidden": "true",
+                                  className: "ds:inline-flex ds:items-center ds:shrink-0",
+                                  children: e.startAdornment
+                                }
+                              ) : null,
+                              /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: e.label }),
+                              e.endContent ? (
+                                // Deliberately NOT aria-hidden — unlike
+                                // `startAdornment`, this slot carries meaning
+                                // and must reach the option's accessible name.
+                                /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: e.endContent })
+                              ) : null
+                            ]
+                          },
+                          `recent-${e.value}`
+                        ))
+                      }
+                    ) : null,
+                    pe ? /* @__PURE__ */ s(
+                      "div",
+                      {
+                        role: "option",
+                        "aria-disabled": "true",
+                        "aria-selected": "false",
+                        className: "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground",
+                        children: h("inputs.autocomplete.noResults", "No results")
+                      }
+                    ) : null,
+                    me ? /* @__PURE__ */ R(
+                      "div",
+                      {
+                        role: "option",
+                        "aria-disabled": "true",
+                        "aria-selected": "false",
+                        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__ */ s(he, { variant: "pulse", size: "sm" }),
+                          /* @__PURE__ */ s("span", { children: h("common.loading", "Loading…") })
+                        ]
+                      }
+                    ) : null,
+                    !D && F ? We.map((e, t) => {
+                      const n = e.items.map((o) => /* @__PURE__ */ R(
+                        g.Item,
+                        {
+                          id: se(v, "option", o.value),
+                          "data-option-id": o.value,
+                          value: we("option", o.value),
+                          disabled: o.disabled,
+                          onSelect: () => ce("option", o),
+                          onMouseDown: W,
+                          className: be(),
+                          children: [
+                            o.startAdornment ? /* @__PURE__ */ s(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:inline-flex ds:items-center ds:shrink-0",
+                                children: o.startAdornment
+                              }
+                            ) : null,
+                            /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: o.label }),
+                            o.endContent ? (
+                              // Deliberately NOT aria-hidden — unlike
+                              // `startAdornment`, this slot carries meaning
+                              // and must reach the option's accessible name.
+                              /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: o.endContent })
+                            ) : null
+                          ]
+                        },
+                        `option-${o.value}`
+                      ));
+                      return e.group ? /* @__PURE__ */ s(
+                        g.Group,
+                        {
+                          heading: e.group,
+                          className: ye,
+                          children: n
+                        },
+                        `group-${e.group}`
+                      ) : /* @__PURE__ */ s(g.Group, { children: n }, `group-${t}`);
+                    }) : null
+                  ]
+                }
+              )
+            }
+          ) }) : null
+        ] })
+      }
+    );
+  }
+), Ct = wt;
+Ct.displayName = "Autocomplete";
+export {
+  Ct as A,
+  ht as a,
+  vt as b
+};
+//# sourceMappingURL=autocomplete-BXMcNoa3.js.map