@alfadocs/ui-kit 1.47.1 → 1.48.0

package/dist/_chunks/combobox-DnSdYssy.js

@@ -1,522 +0,0 @@
-import { jsx as t, jsxs as R } from "react/jsx-runtime";
-import { forwardRef as Ke, useContext as Oe, useMemo as U, useState as re, useRef as g, useEffect as F, useCallback as Te } from "react";
-import * as E from "@radix-ui/react-popover";
-import { R as $e, _ as u, P as Be } from "./index-4xgbg-sn.js";
-import { c as V } from "./index-D2ZczOXr.js";
-import { useTranslation as Ue } from "react-i18next";
-import { u as He, F as Ge } from "./form-field-context-B3APVHKx.js";
-import { c as Me } from "./compose-refs-C0k0tdqF.js";
-import { n as H } from "./normalize-diacritics-BNGbFNlJ.js";
-import { g as Le } from "./group-options-BvKhQ3xb.js";
-import { u as Xe } from "./use-controllable-state-BiY4xTzM.js";
-import { u as We } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { I as Je, a as G, d as M, c as Ye } from "./input-surface-xyERuLU_.js";
-import { u as Ze } from "./registry-DvAUVLHh.js";
-import { X as Qe } from "./x-B5YnXwCz.js";
-import { C as et } from "./check-DrFSN__t.js";
-const tt = {
-  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: (s) => s.getValue()
-    },
-    query: {
-      type: "string",
-      descriptionKey: "ui.agent.combobox.state.query",
-      description: "Current filter query in the combobox input.",
-      read: (s) => s.getQuery()
-    },
-    isOpen: {
-      type: "boolean",
-      descriptionKey: "ui.agent.combobox.state.isOpen",
-      description: "True when the option list is visible.",
-      read: (s) => s.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: (s, n) => {
-        s.setValue(n.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: (s, n) => {
-        s.setQuery(n.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: (s) => {
-        s.clear();
-      }
-    },
-    open: {
-      safety: "read",
-      idempotent: !0,
-      descriptionKey: "ui.agent.combobox.actions.open",
-      description: "Open the option list.",
-      invoke: (s) => {
-        s.open();
-      }
-    },
-    close: {
-      safety: "read",
-      idempotent: !0,
-      descriptionKey: "ui.agent.combobox.actions.close",
-      description: "Close the option list.",
-      invoke: (s) => {
-        s.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."
-    }
-  }
-}, st = 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"
-    }
-  }
-), ot = V(
-  [
-    "ds:group ds:relative ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:w-full",
-    Ye
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: `${G.sm} ${M.sm}`,
-        md: `${G.md} ${M.md}`,
-        lg: `${G.lg} ${M.lg}`
-      },
-      tone: Je
-    },
-    defaultVariants: {
-      size: "md",
-      tone: "default"
-    }
-  }
-), rt = 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(" ")
-), ie = 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",
-    "ds:data-[highlighted]:bg-muted ds:data-[highlighted]:text-foreground",
-    "ds:data-[highlighted]:border-s-2 ds:data-[highlighted]:border-s-primary",
-    "ds:aria-selected:bg-muted",
-    "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"
-    }
-  }
-), it = [
-  "ds:ps-3 ds:pe-3 ds:py-1.5",
-  "type-eyebrow ds:text-muted-foreground"
-].join(" "), at = "ds:max-h-[18rem] ds:overflow-y-auto ds:p-[var(--spacing-xs)]", nt = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", dt = {
-  sm: "ds:size-3.5",
-  md: "ds:size-4",
-  lg: "ds:size-5"
-};
-function lt({
-  search: s,
-  label: n,
-  iconClass: C,
-  size: j,
-  onSelect: A
-}) {
-  return Be((q) => q.filtered.count) > 0 ? null : /* @__PURE__ */ R(
-    u.Item,
-    {
-      value: `__combobox-create__${s}`,
-      keywords: [],
-      forceMount: !0,
-      onSelect: () => A(s),
-      className: ie({ size: j }),
-      children: [
-        /* @__PURE__ */ t(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: `ds:inline-flex ds:items-center ds:justify-center ${C}`
-          }
-        ),
-        /* @__PURE__ */ t("span", { className: "ds:flex-1 ds:truncate", children: n })
-      ]
-    }
-  );
-}
-const ae = Ke(
-  function({
-    options: n,
-    value: C,
-    defaultValue: j,
-    onValueChange: A,
-    placeholder: L,
-    clearable: q = !1,
-    disabled: ne,
-    readOnly: de,
-    required: le,
-    name: ce,
-    id: D,
-    size: x = "md",
-    tone: ue = "default",
-    filter: P,
-    allowCreate: me = !1,
-    onCreate: k,
-    open: X,
-    onOpenChange: m,
-    onQueryChange: r,
-    emptyMessage: pe,
-    className: fe,
-    "aria-label": W,
-    "aria-invalid": be,
-    "aria-describedby": ve,
-    autoComplete: he
-  }, ge) {
-    const { t: y } = Ue(), v = He(), S = Oe(Ge) !== null, [xe, w] = Xe({
-      value: C,
-      defaultValue: j ?? "",
-      onChange: A
-    }), p = xe ?? "", K = U(
-      () => n.find((e) => e.value === p),
-      [n, p]
-    ), N = (K == null ? void 0 : K.label) ?? "", [f, d] = re(N), [ye, J] = re(!1), I = X !== void 0, l = I ? X : ye, z = g(!1), _ = g(null), Y = g(null);
-    We(() => {
-      var e;
-      (e = _.current) == null || e.setAttribute("aria-expanded", String(l));
-    }), F(() => {
-      l || d(N);
-    }, [N, l]);
-    const Se = D ?? (S ? v.id : void 0), O = (S ? v.disabled : !1) || !!ne, h = !!de, Ne = (S ? v.required : !1) || !!le, Z = S ? v.invalid : !!be, ze = Z ? "error" : ue, Re = S && v.describedBy ? v.describedBy : ve, Q = L ?? y("inputs.combobox.placeholder", "Search…"), we = U(
-      () => (e, o, a) => {
-        if (z.current) return 1;
-        const b = H(e), i = H(o), B = a == null ? void 0 : a.map(H);
-        return P ? P(b, i) : $e(
-          b,
-          i,
-          B
-        );
-      },
-      [P]
-    ), ee = (e) => {
-      w(e);
-    }, c = (e) => {
-      I || J(e), m == null || m(e);
-    }, Ie = (e) => {
-      const o = n.find((a) => a.value === e);
-      ee(e), d((o == null ? void 0 : o.label) ?? ""), c(!1);
-    }, _e = (e) => {
-      k == null || k(e), c(!1);
-    }, Fe = (e) => {
-      h || (d(e), z.current || r == null || r(e), !l && e.length > 0 && !z.current && c(!0));
-    }, Ee = () => {
-      !O && !h && c(!0);
-    }, Ve = () => {
-      z.current = !0;
-    }, Ce = () => {
-      var o;
-      if (z.current = !1, h) return;
-      const e = ((o = _.current) == null ? void 0 : o.value) ?? "";
-      d(e), r == null || r(e), e.length > 0 && c(!0);
-    }, je = (e) => {
-      e.nativeEvent.isComposing || e.key === "Escape" && l && (e.preventDefault(), c(!1), d(N));
-    }, Ae = (e) => {
-      var o;
-      e.preventDefault(), e.stopPropagation(), ee(""), d(""), r == null || r(""), c(!0), (o = _.current) == null || o.focus();
-    }, qe = (e) => {
-      h && e || (c(e), e || d(N));
-    }, te = g(p);
-    F(() => {
-      te.current = p;
-    }, [p]);
-    const se = g(f);
-    F(() => {
-      se.current = f;
-    }, [f]);
-    const oe = g(l);
-    F(() => {
-      oe.current = l;
-    }, [l]);
-    const T = Te(
-      (e) => {
-        I || J(e), m == null || m(e);
-      },
-      [I, m]
-    ), De = U(
-      () => ({
-        getValue: () => te.current || null,
-        getQuery: () => se.current,
-        getIsOpen: () => oe.current,
-        setValue: (e) => {
-          const o = e ?? "";
-          w(o);
-          const a = n.find((b) => b.value === o);
-          d((a == null ? void 0 : a.label) ?? "");
-        },
-        setQuery: (e) => {
-          d(e), r == null || r(e);
-        },
-        clear: () => {
-          w(""), d(""), r == null || r("");
-        },
-        open: () => T(!0),
-        close: () => T(!1)
-      }),
-      [w, n, T, r]
-    );
-    Ze(tt, De, D);
-    const Pe = q && !!p && !O && !h, ke = Le(n), $ = dt[x];
-    return /* @__PURE__ */ t(E.Root, { open: l, onOpenChange: qe, children: /* @__PURE__ */ R(
-      u,
-      {
-        filter: we,
-        shouldFilter: !0,
-        loop: !0,
-        label: W ?? Q,
-        className: "ds:w-full",
-        children: [
-          /* @__PURE__ */ t(E.Anchor, { asChild: !0, children: /* @__PURE__ */ R(
-            "div",
-            {
-              ref: Y,
-              className: ot({
-                size: x,
-                tone: ze,
-                className: fe
-              }),
-              "data-component": "combobox",
-              "data-component-id": D,
-              children: [
-                /* @__PURE__ */ t(
-                  u.Input,
-                  {
-                    ref: Me(ge, _),
-                    value: f,
-                    onValueChange: Fe,
-                    id: Se,
-                    name: ce,
-                    placeholder: Q,
-                    disabled: O,
-                    readOnly: h,
-                    required: Ne,
-                    autoComplete: he,
-                    "aria-describedby": Re,
-                    "aria-invalid": Z || void 0,
-                    onFocus: Ee,
-                    onKeyDown: je,
-                    onCompositionStart: Ve,
-                    onCompositionEnd: Ce,
-                    className: st({ size: x })
-                  }
-                ),
-                Pe ? /* @__PURE__ */ t(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": y("inputs.combobox.clear", "Clear selection"),
-                    onClick: Ae,
-                    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"
-                    ].join(" "),
-                    children: /* @__PURE__ */ t(Qe, { "aria-hidden": "true", className: "ds:size-3.5" })
-                  }
-                ) : null
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ t(E.Portal, { forceMount: !0, children: /* @__PURE__ */ t(
-            E.Content,
-            {
-              forceMount: !0,
-              hidden: !l,
-              "aria-label": W ?? y("inputs.combobox.popupLabel", "Options"),
-              onOpenAutoFocus: (e) => e.preventDefault(),
-              onCloseAutoFocus: (e) => e.preventDefault(),
-              onInteractOutside: (e) => {
-                var a;
-                const o = e.target;
-                o && ((a = Y.current) != null && a.contains(o)) && e.preventDefault();
-              },
-              sideOffset: 4,
-              align: "start",
-              className: rt(),
-              children: /* @__PURE__ */ R(u.List, { className: at, children: [
-                /* @__PURE__ */ t(u.Empty, { className: nt, children: /* @__PURE__ */ t("div", { role: "option", "aria-selected": !1, "aria-disabled": "true", children: pe ?? y("inputs.combobox.empty", "No results found") }) }),
-                ke.map(({ group: e, items: o }, a) => {
-                  const b = o.map((i) => {
-                    const B = i.value === p;
-                    return /* @__PURE__ */ R(
-                      u.Item,
-                      {
-                        value: i.value,
-                        "data-option-id": i.value,
-                        keywords: [i.label],
-                        disabled: i.disabled,
-                        onSelect: Ie,
-                        className: ie({ size: x }),
-                        children: [
-                          /* @__PURE__ */ t(
-                            "span",
-                            {
-                              "aria-hidden": "true",
-                              className: `ds:inline-flex ds:items-center ds:justify-center ${$}`,
-                              children: B ? /* @__PURE__ */ t(et, { className: $ }) : null
-                            }
-                          ),
-                          i.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__ */ t(
-                              "span",
-                              {
-                                "aria-hidden": "true",
-                                className: "ds:inline-flex ds:items-center ds:shrink-0",
-                                children: i.startAdornment
-                              }
-                            )
-                          ) : null,
-                          /* @__PURE__ */ t("span", { className: "ds:flex-1 ds:truncate", children: i.label }),
-                          i.description ? /* @__PURE__ */ t("span", { className: "type-meta ds:text-muted-foreground", children: i.description }) : null,
-                          i.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__ */ t("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: i.endContent })
-                          ) : null
-                        ]
-                      },
-                      i.value
-                    );
-                  });
-                  return e ? /* @__PURE__ */ t(
-                    u.Group,
-                    {
-                      heading: /* @__PURE__ */ t("span", { className: it, children: e }),
-                      children: b
-                    },
-                    `group-${e}`
-                  ) : /* @__PURE__ */ t(u.Group, { children: b }, `group-${a}`);
-                }),
-                me && f.length > 0 ? /* @__PURE__ */ t(
-                  lt,
-                  {
-                    search: f,
-                    label: y("inputs.combobox.create", 'Create "{{value}}"', {
-                      value: f
-                    }),
-                    iconClass: $,
-                    size: x,
-                    onSelect: _e
-                  }
-                ) : null
-              ] })
-            }
-          ) })
-        ]
-      }
-    ) });
-  }
-);
-ae.displayName = "Combobox";
-const wt = ae;
-export {
-  wt as C,
-  rt as a,
-  st as b,
-  tt as c,
-  ie as d,
-  ot as e
-};
-//# sourceMappingURL=combobox-DnSdYssy.js.map