@alfadocs/ui-kit 1.30.0 → 1.32.0

package/dist/_chunks/select-CLSUnKjF.js

@@ -0,0 +1,520 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as r, useId as ye, useContext as xe, useState as M, useRef as U, useMemo as Se } from "react";
+import { u as Ne } from "./registry-DvAUVLHh.js";
+import * as a from "@radix-ui/react-select";
+import { c as O } from "./index-D2ZczOXr.js";
+import { useTranslation as we } from "react-i18next";
+import { u as Ce, F as ze } from "./form-field-context-B3APVHKx.js";
+import { g as Ie } from "./group-options-BvKhQ3xb.js";
+import { C as je } from "./chevron-up-umRGgtJA.js";
+import { C as W } from "./chevron-down-DWE7GSq9.js";
+import { C as ke } from "./check-DrFSN__t.js";
+import { u as Te } from "./use-direction-Dp8h70PP.js";
+import { X as Ve } from "./x-B5YnXwCz.js";
+const Re = {
+  id: "select",
+  // Persisted single choice (value state + set_value) → select_single + set_value,
+  // plus open/close of the option list.
+  capabilities: ["select_single", "set_value", "open", "close"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.select.state.value",
+      description: "Currently selected option value, or empty string when none.",
+      read: (s) => s.getValue()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.select.state.isOpen",
+      description: "Whether the option list is open.",
+      read: (s) => s.isOpen()
+    }
+  },
+  actions: {
+    set_value: {
+      // Persists the chosen option — reversible by selecting another value.
+      safety: "write",
+      argsType: "{ value: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          value: { type: "string", description: "Option value to select." }
+        },
+        required: ["value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.select.actions.setValue",
+      description: "Select the option with the given value. A value that is not among the options, or belongs to a disabled option, is ignored and the selection stays as it was.",
+      examples: [{ args: { value: "it" }, note: 'Select the "it" option.' }],
+      invoke: (s, t) => {
+        s.setValue(t.value);
+      }
+    },
+    clear: {
+      // Discards the persisted choice — destructive (loses the selection).
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.select.actions.clear",
+      description: "Clear the current selection.",
+      invoke: (s) => {
+        s.clear();
+      }
+    },
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.select.actions.open",
+      description: "Open the option list.",
+      invoke: (s) => {
+        s.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.select.actions.close",
+      description: "Close the option list.",
+      invoke: (s) => {
+        s.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "select",
+      description: "Marks the Select trigger."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-option-id",
+      description: "Stable opaque option value emitted on each rendered option."
+    }
+  }
+}, E = O(
+  [
+    "ds:group ds:inline-flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:w-full",
+    "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-input",
+    "ds:shadow-[var(--shadow-input)]",
+    "ds:text-foreground ds:placeholder:text-muted-foreground",
+    "ds:data-[placeholder]:text-muted-foreground",
+    "ds:transition-[colors,box-shadow] 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:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:h-8 ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-base)]",
+        lg: "ds:h-12 ds:ps-4 ds:pe-4 ds:text-[length:var(--font-size-lg)]"
+      },
+      tone: {
+        default: "",
+        error: "ds:border-destructive ds:focus-visible:outline-destructive"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "default"
+    }
+  }
+), Be = O(
+  [
+    "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
+    "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(" ")
+), Oe = O(
+  [
+    "ds:relative ds:flex ds:cursor-pointer ds:items-center",
+    "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-[disabled]:pointer-events-none ds:data-[disabled]:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:min-h-8 ds:ps-8 ds:pe-3 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:min-h-[var(--min-target-size)] ds:ps-8 ds:pe-3 ds:text-[length:var(--font-size-base)]",
+        lg: "ds:min-h-12 ds:ps-10 ds:pe-4 ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), De = [
+  "ds:ps-8 ds:pe-3 ds:py-1.5",
+  "type-eyebrow ds:text-muted-foreground",
+  "ds:sticky ds:top-0 ds:bg-background"
+].join(" "), Fe = {
+  sm: "ds:size-3.5",
+  md: "ds:size-4",
+  lg: "ds:size-5"
+}, Ke = {
+  sm: "ds:start-2",
+  md: "ds:start-2",
+  lg: "ds:start-3"
+};
+function Pe(...s) {
+  return (t) => {
+    for (const d of s)
+      d && (typeof d == "function" ? d(t) : d.current = t);
+  };
+}
+const X = (s) => /* @__PURE__ */ e(a.Root, { ...s });
+X.displayName = "Select.Root";
+const J = r(
+  ({ size: s, tone: t, className: d, children: c, ...u }, i) => /* @__PURE__ */ e(
+    a.Trigger,
+    {
+      ref: i,
+      className: E({ size: s, tone: t, className: d }),
+      ...u,
+      children: c
+    }
+  )
+);
+J.displayName = "Select.Trigger";
+const Q = r((s, t) => /* @__PURE__ */ e(a.Value, { ref: t, ...s }));
+Q.displayName = "Select.Value";
+const D = r(
+  ({
+    className: s,
+    children: t,
+    position: d = "popper",
+    sideOffset: c = 4,
+    container: u,
+    ...i
+  }, S) => /* @__PURE__ */ e(a.Portal, { container: u ?? void 0, children: /* @__PURE__ */ l(
+    a.Content,
+    {
+      ref: S,
+      position: d,
+      sideOffset: c,
+      "data-component": "select-content",
+      className: Be({ className: s }),
+      ...i,
+      children: [
+        /* @__PURE__ */ e(a.ScrollUpButton, { className: "ds:flex ds:items-center ds:justify-center ds:h-6 ds:bg-background ds:cursor-default", children: /* @__PURE__ */ e(je, { "aria-hidden": "true", className: "ds:size-4" }) }),
+        t,
+        /* @__PURE__ */ e(a.ScrollDownButton, { className: "ds:flex ds:items-center ds:justify-center ds:h-6 ds:bg-background ds:cursor-default", children: /* @__PURE__ */ e(W, { "aria-hidden": "true", className: "ds:size-4" }) })
+      ]
+    }
+  ) })
+);
+D.displayName = "Select.Content";
+const F = r(({ className: s, ...t }, d) => /* @__PURE__ */ e(
+  a.Viewport,
+  {
+    ref: d,
+    className: ["ds:p-1", s].filter(Boolean).join(" "),
+    ...t
+  }
+));
+F.displayName = "Select.Viewport";
+const K = r(
+  ({
+    size: s = "md",
+    className: t,
+    children: d,
+    startAdornment: c,
+    endContent: u,
+    description: i,
+    ...S
+  }, C) => {
+    const z = Ke[s ?? "md"], I = Fe[s ?? "md"], h = ye(), p = i != null && i !== "", v = p ? "ds:group-data-[disabled]/select-item:opacity-50" : "", N = u ? (
+      // Radix points the item's `aria-labelledby` at `ItemText`, so
+      // anything rendered outside it is dropped from the accessible
+      // name — a price there would be visible but never announced.
+      // It therefore goes INSIDE `ItemText`, wrapped in a flex row so
+      // `ms-auto` still pins it to the inline-end (and flips in RTL).
+      //
+      // The trade-off is deliberate: Radix mirrors `ItemText` into the
+      // closed trigger, so the selected item's trailing content shows
+      // there too. For the case this exists for — a price — that reads
+      // as a feature, not a leak. The wrapper is rendered ONLY when
+      // `endContent` is supplied, so every existing item keeps its
+      // previous DOM exactly.
+      //
+      // `asChild` is required, not stylistic. `SelectItemText`
+      // destructures `className` and `style` off its props and never
+      // applies them, so styling it directly is silently discarded.
+      // It must also GROW: as a plain flex item of the row it sizes to
+      // its content, leaving `ms-auto` no free space to absorb, and the
+      // chip would sit against the label instead of the row's end —
+      // the ragged column this change exists to remove. `asChild` makes
+      // our own span become the ItemText element, so `flex-1` lands.
+      /* @__PURE__ */ e(a.ItemText, { asChild: !0, children: /* @__PURE__ */ l(
+        "span",
+        {
+          className: `ds:flex ds:flex-1 ds:min-w-0 ds:items-center ds:gap-[var(--spacing-sm)] ${v}`,
+          children: [
+            /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:truncate", children: d }),
+            /* @__PURE__ */ e("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: u })
+          ]
+        }
+      ) })
+    ) : p ? /* @__PURE__ */ e(a.ItemText, { asChild: !0, children: /* @__PURE__ */ e("span", { className: v, children: d }) }) : /* @__PURE__ */ e(a.ItemText, { children: d });
+    return /* @__PURE__ */ l(
+      a.Item,
+      {
+        ref: C,
+        "aria-describedby": p ? h : void 0,
+        className: Oe({
+          size: s,
+          className: p ? [
+            "ds:group/select-item ds:data-[disabled]:!opacity-100",
+            t
+          ].filter(Boolean).join(" ") : t
+        }),
+        ...S,
+        children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: `ds:absolute ${z} ds:inline-flex ds:items-center ds:justify-center ${v}`,
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(ke, { className: I }) })
+            }
+          ),
+          c ? (
+            // Decorative by contract — accessible name comes from the item text.
+            /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: `ds:inline-flex ds:items-center ds:shrink-0 ds:me-[var(--spacing-xs)] ${v}`,
+                children: c
+              }
+            )
+          ) : null,
+          p ? /* @__PURE__ */ l("span", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:py-[var(--spacing-xs)]", children: [
+            N,
+            /* @__PURE__ */ e(
+              "span",
+              {
+                id: h,
+                className: "type-meta ds:text-muted-foreground",
+                children: i
+              }
+            )
+          ] }) : N
+        ]
+      }
+    );
+  }
+);
+K.displayName = "Select.Item";
+const Y = r((s, t) => /* @__PURE__ */ e(a.ItemText, { ref: t, ...s }));
+Y.displayName = "Select.ItemText";
+const Z = r((s, t) => /* @__PURE__ */ e(a.Group, { ref: t, ...s }));
+Z.displayName = "Select.Group";
+const P = r(({ className: s, ...t }, d) => /* @__PURE__ */ e(
+  a.Label,
+  {
+    ref: d,
+    className: [De, s].filter(Boolean).join(" "),
+    ...t
+  }
+));
+P.displayName = "Select.Label";
+const ee = r(({ className: s, ...t }, d) => /* @__PURE__ */ e(
+  a.Separator,
+  {
+    ref: d,
+    className: ["ds:my-1 ds:h-px ds:bg-border", s].filter(Boolean).join(" "),
+    ...t
+  }
+));
+ee.displayName = "Select.Separator";
+const se = r(function({
+  options: t,
+  value: d,
+  defaultValue: c,
+  onValueChange: u,
+  placeholder: i,
+  clearable: S = !1,
+  disabled: C,
+  required: z,
+  name: I,
+  id: h,
+  size: p = "md",
+  tone: v = "default",
+  className: N,
+  container: te,
+  "aria-label": $,
+  "aria-describedby": ae,
+  adornmentInTrigger: de = !1,
+  showDescriptions: ne = !1
+}, oe) {
+  var _;
+  const { t: j } = we(), b = Ce(), f = xe(ze) !== null, [ie, w] = M(
+    d ?? c ?? ""
+  ), y = d !== void 0, x = y ? d : ie, [k, T] = M(!1), A = U(x);
+  A.current = x;
+  const re = h ?? (f ? b.id : void 0), G = (f ? b.disabled : !1) || !!C, le = (f ? b.required : !1) || !!z, q = f ? b.invalid : !1, ce = q ? "error" : v, ue = [f ? b.describedBy : void 0, ae].filter(Boolean).join(" ") || void 0, L = de ? (_ = t.find((n) => n.value === x)) == null ? void 0 : _.startAdornment : void 0, V = U(null), pe = Pe(oe, V), me = Te(V), o = u, fe = (n) => {
+    y || w(n), o == null || o(n);
+  }, ge = (n) => {
+    var g;
+    n.preventDefault(), n.stopPropagation(), y || w(""), o == null || o(""), (g = V.current) == null || g.focus();
+  }, R = i ?? j("inputs.select.placeholder", "Select…"), he = S && !!x && !G, ve = Ie(t), be = Se(
+    () => ({
+      getValue: () => A.current,
+      setValue: (n) => {
+        const g = t.find((B) => B.value === n);
+        !g || g.disabled || (y || w(n), o == null || o(n));
+      },
+      clear: () => {
+        y || w(""), o == null || o("");
+      },
+      open: () => T(!0),
+      close: () => T(!1),
+      isOpen: () => k
+    }),
+    [o, y, k, t]
+  );
+  return Ne(Re, be, h), /* @__PURE__ */ l(
+    a.Root,
+    {
+      value: x === "" ? void 0 : x,
+      onValueChange: fe,
+      open: k,
+      onOpenChange: T,
+      disabled: G,
+      required: le,
+      name: I,
+      dir: me,
+      children: [
+        /* @__PURE__ */ l(
+          a.Trigger,
+          {
+            ref: pe,
+            id: re,
+            "aria-label": $ ?? (f ? void 0 : R),
+            "aria-labelledby": !$ && f ? `${b.id}-label` : void 0,
+            "aria-describedby": ue,
+            "aria-invalid": q || void 0,
+            "data-component": "select",
+            "data-component-id": h,
+            className: E({
+              size: p,
+              tone: ce,
+              className: N
+            }),
+            children: [
+              L ? /* @__PURE__ */ l("span", { className: "ds:flex ds:min-w-0 ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-select-trigger-adornment": "",
+                    className: "ds:inline-flex ds:shrink-0 ds:items-center",
+                    children: L
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:truncate ds:text-start", children: /* @__PURE__ */ e(a.Value, { placeholder: R }) })
+              ] }) : /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:truncate ds:text-start", children: /* @__PURE__ */ e(a.Value, { placeholder: R }) }),
+              /* @__PURE__ */ l("span", { className: "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                he ? /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": j("inputs.select.clear", "Clear selection"),
+                    onClick: ge,
+                    onPointerDown: (n) => n.stopPropagation(),
+                    onKeyDown: (n) => {
+                      (n.key === "Enter" || n.key === " ") && n.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__ */ e(Ve, { "aria-hidden": "true", className: "ds:size-3.5" })
+                  }
+                ) : null,
+                /* @__PURE__ */ e(a.Icon, { asChild: !0, children: /* @__PURE__ */ e(
+                  W,
+                  {
+                    "aria-hidden": "true",
+                    className: [
+                      "ds:size-4 ds:shrink-0 ds:text-muted-foreground",
+                      "ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+                      "ds:group-data-[state=open]:rotate-180"
+                    ].join(" ")
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(D, { container: te, children: /* @__PURE__ */ e(F, { children: t.length === 0 ? /* @__PURE__ */ e("div", { className: "ds:ps-8 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: j("inputs.select.noOptions", "No options") }) : ve.map(({ group: n, items: g }, B) => {
+          const H = g.map((m) => /* @__PURE__ */ e(
+            K,
+            {
+              value: m.value,
+              disabled: m.disabled,
+              size: p,
+              "data-option-id": m.value,
+              startAdornment: m.startAdornment,
+              endContent: m.endContent,
+              description: ne ? m.description : void 0,
+              children: m.label
+            },
+            m.value
+          ));
+          return n ? /* @__PURE__ */ l(a.Group, { children: [
+            /* @__PURE__ */ e(P, { children: n }),
+            H
+          ] }, `group-${n}`) : /* @__PURE__ */ e(a.Group, { children: H }, `group-${B}`);
+        }) }) })
+      ]
+    }
+  );
+});
+se.displayName = "Select";
+const $e = Object.assign(se, {
+  Root: X,
+  Trigger: J,
+  Value: Q,
+  Content: D,
+  Viewport: F,
+  Item: K,
+  ItemText: Y,
+  Group: Z,
+  Label: P,
+  Separator: ee
+}), Qe = $e;
+export {
+  Qe as S,
+  D as a,
+  Z as b,
+  K as c,
+  Y as d,
+  P as e,
+  X as f,
+  ee as g,
+  J as h,
+  Q as i,
+  F as j,
+  E as s
+};
+//# sourceMappingURL=select-CLSUnKjF.js.map