@alfadocs/ui-kit 0.1.9 → 0.2.0

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

@@ -1,410 +0,0 @@
-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