@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/combobox.agent-CAvUkkIe.js

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