@alfadocs/ui-kit 1.52.0 → 1.54.0

package/dist/_chunks/combobox-Iel8y3u6.js

@@ -1,578 +0,0 @@
-import { jsx as s, jsxs as I } from "react/jsx-runtime";
-import { forwardRef as We, useContext as Xe, useMemo as G, useState as L, useRef as p, useEffect as E, useCallback as Je } from "react";
-import * as F from "@radix-ui/react-popover";
-import { R as Ye, _ as g, P as Ze } from "./index-4xgbg-sn.js";
-import { c as V } from "./index-D2ZczOXr.js";
-import { useTranslation as Qe } from "react-i18next";
-import { u as et, F as tt } from "./form-field-context-B3APVHKx.js";
-import { c as st } from "./compose-refs-C0k0tdqF.js";
-import { n as W } from "./normalize-diacritics-BNGbFNlJ.js";
-import { g as ot } from "./group-options-BvKhQ3xb.js";
-import { b as rt } from "./menu-row-BAr8bx1I.js";
-import { u as nt } from "./use-controllable-state-BiY4xTzM.js";
-import { u as X } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { I as it, a as J, d as Y, c as at } from "./input-surface-xyERuLU_.js";
-import { u as lt } from "./registry-DvAUVLHh.js";
-import { X as dt } from "./x-B5YnXwCz.js";
-import { C as ct } from "./check-DrFSN__t.js";
-const ut = {
-  id: "combobox",
-  // 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: (r) => r.getValue()
-    },
-    query: {
-      type: "string",
-      descriptionKey: "ui.agent.combobox.state.query",
-      description: "Current filter query in the combobox input.",
-      read: (r) => r.getQuery()
-    },
-    isOpen: {
-      type: "boolean",
-      descriptionKey: "ui.agent.combobox.state.isOpen",
-      description: "True when the option list is visible.",
-      read: (r) => r.getIsOpen()
-    }
-  },
-  actions: {
-    set_value: {
-      // 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: (r, l) => {
-        r.setValue(l.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: (r, l) => {
-        r.setQuery(l.query);
-      }
-    },
-    clear_selection: {
-      // Discards the persisted choice — destructive (loses the selection).
-      safety: "destructive",
-      idempotent: !0,
-      descriptionKey: "ui.agent.combobox.actions.clearSelection",
-      description: "Clear the current selection.",
-      invoke: (r) => {
-        r.clear();
-      }
-    },
-    open: {
-      safety: "read",
-      idempotent: !0,
-      descriptionKey: "ui.agent.combobox.actions.open",
-      description: "Open the option list.",
-      invoke: (r) => {
-        r.open();
-      }
-    },
-    close: {
-      safety: "read",
-      idempotent: !0,
-      descriptionKey: "ui.agent.combobox.actions.close",
-      description: "Close the option list.",
-      invoke: (r) => {
-        r.close();
-      }
-    }
-  },
-  domHooks: {
-    root: { attr: "data-component", value: "combobox" },
-    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."
-    }
-  }
-}, ft = V(
-  [
-    "ds:peer ds:w-full ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
-    "ds:outline-none ds:border-0",
-    "ds:disabled:cursor-not-allowed"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: "ds:text-[length:var(--font-size-sm)]",
-        md: "ds:text-[length:var(--font-size-base)]",
-        lg: "ds:text-[length:var(--font-size-lg)]"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-), mt = V(
-  [
-    "ds:group ds:relative ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:w-full",
-    at
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: `${J.sm} ${Y.sm}`,
-        md: `${J.md} ${Y.md}`,
-        lg: `${J.lg} ${Y.lg}`
-      },
-      tone: it
-    },
-    defaultVariants: {
-      size: "md",
-      tone: "default"
-    }
-  }
-), pt = V(
-  [
-    "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",
-    "ds:shadow-[var(--shadow-lg)]",
-    "ds:animate-in ds:fade-in ds:zoom-in-95",
-    "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out",
-    "ds:data-[state=closed]:zoom-out-95",
-    "ds:data-[side=bottom]:slide-in-from-top-2",
-    "ds:data-[side=top]:slide-in-from-bottom-2",
-    "ds:motion-reduce:animate-none"
-  ].join(" ")
-), ue = V(
-  [
-    "ds:relative ds:flex ds:cursor-pointer ds:items-center ds:gap-[var(--spacing-sm)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:text-foreground ds:outline-none ds:select-none",
-    rt.selected,
-    "ds:aria-disabled:pointer-events-none ds:aria-disabled:opacity-50"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: "ds:min-h-8 ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-sm)]",
-        md: "ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-base)]",
-        lg: "ds:min-h-12 ds:ps-4 ds:pe-4 ds:text-[length:var(--font-size-lg)]"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-), bt = [
-  "ds:ps-3 ds:pe-3 ds:py-1.5",
-  "type-eyebrow ds:text-muted-foreground"
-].join(" "), vt = "ds:max-h-[18rem] ds:overflow-y-auto ds:p-[var(--spacing-xs)]", ht = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", gt = {
-  sm: "ds:size-3.5",
-  md: "ds:size-4",
-  lg: "ds:size-5"
-};
-function xt({
-  search: r,
-  label: l,
-  iconClass: j,
-  size: H,
-  onSelect: P
-}) {
-  return Ze(($) => $.filtered.count) > 0 ? null : /* @__PURE__ */ I(
-    g.Item,
-    {
-      value: `__combobox-create__${r}`,
-      keywords: [],
-      forceMount: !0,
-      onSelect: () => P(r),
-      className: ue({ size: H }),
-      children: [
-        /* @__PURE__ */ s(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: `ds:inline-flex ds:items-center ds:justify-center ${j}`
-          }
-        ),
-        /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:truncate", children: l })
-      ]
-    }
-  );
-}
-const fe = We(
-  function({
-    options: l,
-    value: j,
-    defaultValue: H,
-    onValueChange: P,
-    placeholder: Z,
-    clearable: $ = !1,
-    disabled: me,
-    readOnly: pe,
-    required: be,
-    name: ve,
-    id: q,
-    size: R = "md",
-    tone: he = "default",
-    filter: T,
-    allowCreate: ge = !1,
-    onCreate: O,
-    open: Q,
-    onOpenChange: x,
-    onQueryChange: a,
-    emptyMessage: xe,
-    className: ye,
-    "aria-label": ee,
-    "aria-invalid": Re,
-    "aria-describedby": Se,
-    autoComplete: Ne
-  }, we) {
-    const { t: S } = Qe("ui"), y = et(), N = Xe(tt) !== null, [ke, z] = nt({
-      value: j,
-      defaultValue: H ?? "",
-      onChange: P
-    }), b = ke ?? "", B = G(
-      () => l.find((e) => e.value === b),
-      [l, b]
-    ), c = (B == null ? void 0 : B.label) ?? "", [u, f] = L(c), [Ee, te] = L(!1), _ = Q !== void 0, n = _ ? Q : Ee, w = p(!1), C = c !== "" && u === c, D = p(null), se = p(null), oe = p(null), [Ie, ze] = L(0), re = p(!1);
-    X(() => {
-      if (!re.current) {
-        re.current = !0;
-        return;
-      }
-      C && ze((e) => e + 1);
-    }, [C]);
-    const A = p(!1);
-    E(() => {
-      A.current = !1;
-    }, [u, n]);
-    const U = p(!1);
-    X(() => {
-      if (!n || !C || !b) return;
-      const e = oe.current, t = e == null ? void 0 : e.querySelector(
-        `[data-option-id="${CSS.escape(b)}"]`
-      );
-      if (!e || !t) return;
-      const i = e.getBoundingClientRect(), m = t.getBoundingClientRect(), o = e.offsetHeight > 0 ? i.height / e.offsetHeight : 1, h = (m.top - i.top) / (o || 1), Le = m.height / (o || 1);
-      e.scrollTop += h - (e.clientHeight - Le) / 2, U.current = !0;
-      try {
-        t.dispatchEvent(new PointerEvent("pointermove", { bubbles: !0 }));
-      } finally {
-        U.current = !1;
-      }
-    }, [n]), X(() => {
-      var e;
-      (e = D.current) == null || e.setAttribute("aria-expanded", String(n));
-    }), E(() => {
-      n || f(c);
-    }, [c, n]);
-    const _e = q ?? (N ? y.id : void 0), k = (N ? y.disabled : !1) || !!me, v = !!pe, Ce = (N ? y.required : !1) || !!be, ne = N ? y.invalid : !!Re, De = ne ? "error" : he, Ae = N && y.describedBy ? y.describedBy : Se, ie = Z ?? S("inputs.combobox.placeholder", "Search…"), Fe = G(
-      () => (e, t, i) => {
-        if (w.current || c !== "" && t === c) return 1;
-        const m = W(e), o = W(t), h = i == null ? void 0 : i.map(W);
-        return T ? T(
-          m,
-          o,
-          (h == null ? void 0 : h[0]) ?? ""
-        ) : Ye(
-          m,
-          o,
-          h
-        );
-      },
-      [T, c]
-    ), ae = (e) => {
-      z(e);
-    }, d = (e) => {
-      _ || te(e), x == null || x(e);
-    }, Ve = (e) => {
-      const t = l.find((i) => i.value === e);
-      ae(e), f((t == null ? void 0 : t.label) ?? ""), d(!1);
-    }, je = (e) => {
-      O == null || O(e), d(!1);
-    }, He = (e) => {
-      v || (f(e), w.current || a == null || a(e), !n && e.length > 0 && !w.current && d(!0));
-    }, Pe = () => {
-      !k && !v && d(!0);
-    }, $e = () => {
-      !n && !k && !v && d(!0);
-    }, qe = () => {
-      w.current = !0;
-    }, Te = () => {
-      var t;
-      if (w.current = !1, v) return;
-      const e = ((t = D.current) == null ? void 0 : t.value) ?? "";
-      f(e), a == null || a(e), e.length > 0 && d(!0);
-    }, Oe = (e) => {
-      if (!e.nativeEvent.isComposing) {
-        if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !n && !k && !v) {
-          e.preventDefault(), d(!0);
-          return;
-        }
-        if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End" || /* cmdk's own Ctrl+N, J, P and K move the highlight too. */
-        e.ctrlKey && ["n", "j", "p", "k"].includes(e.key)) && (A.current = !0), e.key === "Enter" && (!n || !A.current && (C || u === ""))) {
-          e.preventDefault(), n && d(!1);
-          return;
-        }
-        e.key === "Escape" && n && (e.preventDefault(), d(!1), f(c));
-      }
-    }, Be = (e) => {
-      var t;
-      e.preventDefault(), e.stopPropagation(), ae(""), f(""), a == null || a(""), d(!0), (t = D.current) == null || t.focus();
-    }, Ue = (e) => {
-      v && e || (d(e), e || f(c));
-    }, le = p(b);
-    E(() => {
-      le.current = b;
-    }, [b]);
-    const de = p(u);
-    E(() => {
-      de.current = u;
-    }, [u]);
-    const ce = p(n);
-    E(() => {
-      ce.current = n;
-    }, [n]);
-    const K = Je(
-      (e) => {
-        _ || te(e), x == null || x(e);
-      },
-      [_, x]
-    ), Ke = G(
-      () => ({
-        getValue: () => le.current || null,
-        getQuery: () => de.current,
-        getIsOpen: () => ce.current,
-        setValue: (e) => {
-          const t = e ?? "";
-          z(t);
-          const i = l.find((m) => m.value === t);
-          f((i == null ? void 0 : i.label) ?? "");
-        },
-        setQuery: (e) => {
-          f(e), a == null || a(e);
-        },
-        clear: () => {
-          z(""), f(""), a == null || a("");
-        },
-        open: () => K(!0),
-        close: () => K(!1)
-      }),
-      [z, l, K, a]
-    );
-    lt(ut, Ke, q);
-    const Me = $ && !!b && !k && !v, Ge = ot(l), M = gt[R];
-    return /* @__PURE__ */ s(F.Root, { open: n, onOpenChange: Ue, children: /* @__PURE__ */ I(
-      g,
-      {
-        filter: Fe,
-        shouldFilter: !0,
-        loop: !0,
-        label: ee ?? ie,
-        className: "ds:w-full",
-        children: [
-          /* @__PURE__ */ s(F.Anchor, { asChild: !0, children: /* @__PURE__ */ I(
-            "div",
-            {
-              ref: se,
-              className: mt({
-                size: R,
-                tone: De,
-                className: ye
-              }),
-              "data-component": "combobox",
-              "data-component-id": q,
-              children: [
-                /* @__PURE__ */ s(
-                  g.Input,
-                  {
-                    ref: st(we, D),
-                    value: u,
-                    onValueChange: He,
-                    id: _e,
-                    name: ve,
-                    placeholder: ie,
-                    disabled: k,
-                    readOnly: v,
-                    required: Ce,
-                    autoComplete: Ne,
-                    "aria-describedby": Ae,
-                    "aria-invalid": ne || void 0,
-                    onFocus: Pe,
-                    onClick: $e,
-                    onKeyDown: Oe,
-                    onCompositionStart: qe,
-                    onCompositionEnd: Te,
-                    className: ft({ size: R })
-                  }
-                ),
-                Me ? /* @__PURE__ */ s(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": S("inputs.combobox.clear", "Clear selection"),
-                    onClick: Be,
-                    onPointerDown: (e) => e.stopPropagation(),
-                    className: [
-                      "ds:inline-flex ds:items-center ds:justify-center ds:rounded-[var(--radius-sm)]",
-                      "ds:text-muted-foreground ds:hover:text-foreground",
-                      "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-                      "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-                      "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-                      "ds:size-4 ds:shrink-0",
-                      /* A 24px hit area with no visual change. */
-                      "ds:relative ds:before:absolute ds:before:inset-[calc(var(--spacing-xs)*-1)] ds:before:content-['']"
-                    ].join(" "),
-                    children: /* @__PURE__ */ s(dt, { "aria-hidden": "true", className: "ds:size-3.5" })
-                  }
-                ) : null
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ s(F.Portal, { forceMount: !0, children: /* @__PURE__ */ s(
-            F.Content,
-            {
-              forceMount: !0,
-              hidden: !n,
-              "aria-label": ee ?? S("inputs.combobox.popupLabel", "Options"),
-              onOpenAutoFocus: (e) => e.preventDefault(),
-              onCloseAutoFocus: (e) => e.preventDefault(),
-              onInteractOutside: (e) => {
-                var i;
-                const t = e.target;
-                t && ((i = se.current) != null && i.contains(t)) && e.preventDefault();
-              },
-              sideOffset: 4,
-              align: "start",
-              className: pt(),
-              children: /* @__PURE__ */ I(
-                g.List,
-                {
-                  ref: oe,
-                  className: vt,
-                  onPointerMove: () => {
-                    U.current || (A.current = !0);
-                  },
-                  onMouseDown: (e) => e.preventDefault(),
-                  children: [
-                    /* @__PURE__ */ s(g.Empty, { className: ht, children: /* @__PURE__ */ s("div", { role: "option", "aria-selected": !1, "aria-disabled": "true", children: xe ?? S("inputs.combobox.empty", "No results found") }) }),
-                    Ge.map(({ group: e, items: t }, i) => {
-                      const m = t.map((o) => {
-                        const h = o.value === b;
-                        return /* @__PURE__ */ I(
-                          g.Item,
-                          {
-                            value: o.value,
-                            "data-option-id": o.value,
-                            keywords: [o.label],
-                            disabled: o.disabled,
-                            onSelect: Ve,
-                            className: ue({ size: R }),
-                            children: [
-                              /* @__PURE__ */ s(
-                                "span",
-                                {
-                                  "aria-hidden": "true",
-                                  className: `ds:inline-flex ds:items-center ds:justify-center ${M}`,
-                                  children: h ? /* @__PURE__ */ s(ct, { className: M }) : null
-                                }
-                              ),
-                              o.startAdornment ? (
-                                // Decorative by contract — the option's accessible
-                                // name comes from its label. Hide so a text-bearing
-                                // adornment can't leak into the computed name.
-                                /* @__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.description ? /* @__PURE__ */ s("span", { className: "type-meta ds:text-muted-foreground", children: o.description }) : null,
-                              o.endContent ? (
-                                // Deliberately NOT aria-hidden — unlike
-                                // `startAdornment`, this slot carries meaning
-                                // (a price, a count) and must reach the
-                                // option's accessible name. `ms-auto` pins it
-                                // to the inline-end and flips under RTL.
-                                /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: o.endContent })
-                              ) : null
-                            ]
-                          },
-                          `${o.value}\0${o.label}`
-                        );
-                      });
-                      return e ? /* @__PURE__ */ s(
-                        g.Group,
-                        {
-                          heading: /* @__PURE__ */ s("span", { className: bt, children: e }),
-                          children: m
-                        },
-                        `group-${e}`
-                      ) : /* @__PURE__ */ s(g.Group, { children: m }, `group-${i}`);
-                    }),
-                    ge && u.length > 0 ? /* @__PURE__ */ s(
-                      xt,
-                      {
-                        search: u,
-                        label: S("inputs.combobox.create", 'Create "{{value}}"', {
-                          value: u
-                        }),
-                        iconClass: M,
-                        size: R,
-                        onSelect: je
-                      }
-                    ) : null
-                  ]
-                },
-                Ie
-              )
-            }
-          ) })
-        ]
-      }
-    ) });
-  }
-);
-fe.displayName = "Combobox";
-const Ht = fe;
-export {
-  Ht as C,
-  pt as a,
-  ft as b,
-  ut as c,
-  ue as d,
-  mt as e
-};
-//# sourceMappingURL=combobox-Iel8y3u6.js.map