@alfadocs/ui-kit 0.1.10 → 0.2.0

package/dist/_chunks/combobox-DCNXqbC7.js

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