@alfadocs/ui-kit 1.53.0 → 1.54.0

package/dist/_chunks/{select-Br88h070.js → select-DHPmASkG.js}

@@ -1,18 +1,19 @@
-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 Ie } from "./form-field-context-B3APVHKx.js";
-import { g as ze } from "./group-options-BvKhQ3xb.js";
-import { b as je } from "./menu-row-BAr8bx1I.js";
-import { C as ke } from "./chevron-up-umRGgtJA.js";
-import { C as W } from "./chevron-down-DWE7GSq9.js";
-import { C as Te } from "./check-DrFSN__t.js";
-import { u as Ve } from "./use-direction-Dp8h70PP.js";
-import { X as Re } from "./x-B5YnXwCz.js";
-const Be = {
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as p, useId as je, useContext as ke, useState as A, useRef as z, useEffect as Re, useMemo as Ve } from "react";
+import { u as Be } from "./registry-DvAUVLHh.js";
+import * as o from "@radix-ui/react-select";
+import { c as _ } from "./index-D2ZczOXr.js";
+import { useTranslation as Oe } from "react-i18next";
+import { u as De, F as Ee, a as Fe } from "./form-field-context-DtiROUJV.js";
+import { g as Ge } from "./group-options-BvKhQ3xb.js";
+import { u as Ae } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { b as _e } from "./menu-row-BAr8bx1I.js";
+import { C as Le } from "./chevron-up-umRGgtJA.js";
+import { C as ee } from "./chevron-down-DWE7GSq9.js";
+import { C as Ke } from "./check-DrFSN__t.js";
+import { u as Pe } from "./use-direction-Dp8h70PP.js";
+import { X as $e } from "./x-B5YnXwCz.js";
+const qe = {
   id: "select",
   // Persisted single choice (value state + set_value) → select_single + set_value,
   // plus open/close of the option list.
@@ -22,13 +23,13 @@ const Be = {
       type: "string",
       descriptionKey: "ui.agent.select.state.value",
       description: "Currently selected option value, or empty string when none.",
-      read: (s) => s.getValue()
+      read: (t) => t.getValue()
     },
     isOpen: {
       type: "boolean",
       descriptionKey: "ui.agent.select.state.isOpen",
       description: "Whether the option list is open.",
-      read: (s) => s.isOpen()
+      read: (t) => t.isOpen()
     }
   },
   actions: {
@@ -47,8 +48,8 @@ const Be = {
       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);
+      invoke: (t, a) => {
+        t.setValue(a.value);
       }
     },
     clear: {
@@ -57,8 +58,8 @@ const Be = {
       idempotent: !0,
       descriptionKey: "ui.agent.select.actions.clear",
       description: "Clear the current selection.",
-      invoke: (s) => {
-        s.clear();
+      invoke: (t) => {
+        t.clear();
       }
     },
     open: {
@@ -66,8 +67,8 @@ const Be = {
       idempotent: !0,
       descriptionKey: "ui.agent.select.actions.open",
       description: "Open the option list.",
-      invoke: (s) => {
-        s.open();
+      invoke: (t) => {
+        t.open();
       }
     },
     close: {
@@ -75,8 +76,8 @@ const Be = {
       idempotent: !0,
       descriptionKey: "ui.agent.select.actions.close",
       description: "Close the option list.",
-      invoke: (s) => {
-        s.close();
+      invoke: (t) => {
+        t.close();
       }
     }
   },
@@ -96,7 +97,7 @@ const Be = {
       description: "Stable opaque option value emitted on each rendered option."
     }
   }
-}, E = O(
+}, te = _(
   [
     "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",
@@ -126,7 +127,7 @@ const Be = {
       tone: "default"
     }
   }
-), Oe = O(
+), He = _(
   [
     "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
     "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
@@ -138,12 +139,12 @@ const Be = {
     "ds:data-[side=top]:slide-in-from-bottom-2",
     "ds:motion-reduce:animate-none"
   ].join(" ")
-), De = O(
+), We = _(
   [
     "ds:relative ds:flex ds:cursor-pointer ds:items-center",
     "ds:rounded-[var(--radius-sm)]",
     "ds:text-foreground ds:outline-none ds:select-none",
-    je.highlighted,
+    _e.highlighted,
     "ds:data-[disabled]:pointer-events-none ds:data-[disabled]:opacity-50"
   ].join(" "),
   {
@@ -158,87 +159,87 @@ const Be = {
       size: "md"
     }
   }
-), Ge = [
+), Me = [
   "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 = {
+].join(" "), Ue = {
   sm: "ds:size-3.5",
   md: "ds:size-4",
   lg: "ds:size-5"
-}, Ke = {
+}, Xe = {
   sm: "ds:start-2",
   md: "ds:start-2",
   lg: "ds:start-3"
 };
-function Pe(...s) {
-  return (t) => {
-    for (const n of s)
-      n && (typeof n == "function" ? n(t) : n.current = t);
+function Je(...t) {
+  return (a) => {
+    for (const n of t)
+      n && (typeof n == "function" ? n(a) : n.current = a);
   };
 }
-const X = (s) => /* @__PURE__ */ e(a.Root, { ...s });
-X.displayName = "Select.Root";
-const J = r(
-  ({ size: s, tone: t, className: n, children: c, ...u }, i) => /* @__PURE__ */ e(
-    a.Trigger,
+const se = (t) => /* @__PURE__ */ e(o.Root, { ...t });
+se.displayName = "Select.Root";
+const ae = p(
+  ({ size: t, tone: a, className: n, children: i, ...m }, r) => /* @__PURE__ */ e(
+    o.Trigger,
     {
-      ref: i,
-      className: E({ size: s, tone: t, className: n }),
-      ...u,
-      children: c
+      ref: r,
+      className: te({ size: t, tone: a, className: n }),
+      ...m,
+      children: i
     }
   )
 );
-J.displayName = "Select.Trigger";
-const Q = r((s, t) => /* @__PURE__ */ e(a.Value, { ref: t, ...s }));
-Q.displayName = "Select.Value";
-const D = r(
+ae.displayName = "Select.Trigger";
+const ne = p((t, a) => /* @__PURE__ */ e(o.Value, { ref: a, ...t }));
+ne.displayName = "Select.Value";
+const L = p(
   ({
-    className: s,
-    children: t,
+    className: t,
+    children: a,
     position: n = "popper",
-    sideOffset: c = 4,
-    container: u,
-    ...i
-  }, S) => /* @__PURE__ */ e(a.Portal, { container: u ?? void 0, children: /* @__PURE__ */ l(
-    a.Content,
+    sideOffset: i = 4,
+    container: m,
+    ...r
+  }, S) => /* @__PURE__ */ e(o.Portal, { container: m ?? void 0, children: /* @__PURE__ */ u(
+    o.Content,
     {
       ref: S,
       position: n,
-      sideOffset: c,
+      sideOffset: i,
       "data-component": "select-content",
-      className: Oe({ className: s }),
-      ...i,
+      className: He({ className: t }),
+      ...r,
       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(ke, { "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" }) })
+        /* @__PURE__ */ e(o.ScrollUpButton, { className: "ds:flex ds:items-center ds:justify-center ds:h-6 ds:bg-background ds:cursor-default", children: /* @__PURE__ */ e(Le, { "aria-hidden": "true", className: "ds:size-4" }) }),
+        a,
+        /* @__PURE__ */ e(o.ScrollDownButton, { className: "ds:flex ds:items-center ds:justify-center ds:h-6 ds:bg-background ds:cursor-default", children: /* @__PURE__ */ e(ee, { "aria-hidden": "true", className: "ds:size-4" }) })
       ]
     }
   ) })
 );
-D.displayName = "Select.Content";
-const G = r(({ className: s, ...t }, n) => /* @__PURE__ */ e(
-  a.Viewport,
+L.displayName = "Select.Content";
+const K = p(({ className: t, ...a }, n) => /* @__PURE__ */ e(
+  o.Viewport,
   {
     ref: n,
-    className: ["ds:p-1", s].filter(Boolean).join(" "),
-    ...t
+    className: ["ds:p-1", t].filter(Boolean).join(" "),
+    ...a
   }
 ));
-G.displayName = "Select.Viewport";
-const F = r(
+K.displayName = "Select.Viewport";
+const P = p(
   ({
-    size: s = "md",
-    className: t,
+    size: t = "md",
+    className: a,
     children: n,
-    startAdornment: c,
-    endContent: u,
-    description: i,
+    startAdornment: i,
+    endContent: m,
+    description: r,
     ...S
-  }, C) => {
-    const I = Ke[s ?? "md"], z = Fe[s ?? "md"], h = ye(), p = i != null && i !== "", v = p ? "ds:group-data-[disabled]/select-item:opacity-50" : "", N = u ? (
+  }, T) => {
+    const j = Xe[t ?? "md"], N = Ue[t ?? "md"], h = je(), f = r != null && r !== "", b = f ? "ds:group-data-[disabled]/select-item:opacity-50" : "", w = m ? (
       // 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.
@@ -260,186 +261,218 @@ const F = r(
       // 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(
+      /* @__PURE__ */ e(o.ItemText, { asChild: !0, children: /* @__PURE__ */ u(
         "span",
         {
-          className: `ds:flex ds:flex-1 ds:min-w-0 ds:items-center ds:gap-[var(--spacing-sm)] ${v}`,
+          className: `ds:flex ds:flex-1 ds:min-w-0 ds:items-center ds:gap-[var(--spacing-sm)] ${b}`,
           children: [
             /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:truncate", children: n }),
-            /* @__PURE__ */ e("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: u })
+            /* @__PURE__ */ e("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0", children: m })
           ]
         }
       ) })
-    ) : p ? /* @__PURE__ */ e(a.ItemText, { asChild: !0, children: /* @__PURE__ */ e("span", { className: v, children: n }) }) : /* @__PURE__ */ e(a.ItemText, { children: n });
-    return /* @__PURE__ */ l(
-      a.Item,
+    ) : f ? /* @__PURE__ */ e(o.ItemText, { asChild: !0, children: /* @__PURE__ */ e("span", { className: b, children: n }) }) : /* @__PURE__ */ e(o.ItemText, { children: n });
+    return /* @__PURE__ */ u(
+      o.Item,
       {
-        ref: C,
-        "aria-describedby": p ? h : void 0,
-        className: De({
-          size: s,
-          className: p ? [
+        ref: T,
+        "aria-describedby": f ? h : void 0,
+        className: We({
+          size: t,
+          className: f ? [
             "ds:group/select-item ds:data-[disabled]:!opacity-100",
-            t
-          ].filter(Boolean).join(" ") : t
+            a
+          ].filter(Boolean).join(" ") : a
         }),
         ...S,
         children: [
           /* @__PURE__ */ e(
             "span",
             {
-              className: `ds:absolute ${I} ds:inline-flex ds:items-center ds:justify-center ${v}`,
+              className: `ds:absolute ${j} ds:inline-flex ds:items-center ds:justify-center ${b}`,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ e(a.ItemIndicator, { children: /* @__PURE__ */ e(Te, { className: z }) })
+              children: /* @__PURE__ */ e(o.ItemIndicator, { children: /* @__PURE__ */ e(Ke, { className: N }) })
             }
           ),
-          c ? (
+          i ? (
             // 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
+                className: `ds:inline-flex ds:items-center ds:shrink-0 ds:me-[var(--spacing-xs)] ${b}`,
+                children: i
               }
             )
           ) : 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,
+          f ? /* @__PURE__ */ u("span", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:py-[var(--spacing-xs)]", children: [
+            w,
             /* @__PURE__ */ e(
               "span",
               {
                 id: h,
                 className: "type-meta ds:text-muted-foreground",
-                children: i
+                children: r
               }
             )
-          ] }) : N
+          ] }) : w
         ]
       }
     );
   }
 );
-F.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 K = r(({ className: s, ...t }, n) => /* @__PURE__ */ e(
-  a.Label,
+P.displayName = "Select.Item";
+const oe = p((t, a) => /* @__PURE__ */ e(o.ItemText, { ref: a, ...t }));
+oe.displayName = "Select.ItemText";
+const de = p((t, a) => /* @__PURE__ */ e(o.Group, { ref: a, ...t }));
+de.displayName = "Select.Group";
+const $ = p(({ className: t, ...a }, n) => /* @__PURE__ */ e(
+  o.Label,
   {
     ref: n,
-    className: [Ge, s].filter(Boolean).join(" "),
-    ...t
+    className: [Me, t].filter(Boolean).join(" "),
+    ...a
   }
 ));
-K.displayName = "Select.Label";
-const ee = r(({ className: s, ...t }, n) => /* @__PURE__ */ e(
-  a.Separator,
+$.displayName = "Select.Label";
+const ie = p(({ className: t, ...a }, n) => /* @__PURE__ */ e(
+  o.Separator,
   {
     ref: n,
-    className: ["ds:my-1 ds:h-px ds:bg-border", s].filter(Boolean).join(" "),
-    ...t
+    className: ["ds:my-1 ds:h-px ds:bg-border", t].filter(Boolean).join(" "),
+    ...a
   }
 ));
-ee.displayName = "Select.Separator";
-const se = r(function({
-  options: t,
+ie.displayName = "Select.Separator";
+const Qe = "ds-select-detached", Ye = /* @__PURE__ */ new Set([
+  "data-component",
+  "data-component-id",
+  "data-state",
+  "data-placeholder",
+  "data-disabled",
+  "aria-expanded",
+  "aria-controls"
+]);
+function Ze(t) {
+  const a = {};
+  for (const [n, i] of Object.entries(t))
+    i === void 0 || Ye.has(n) || (n.startsWith("data-") || n.startsWith("aria-")) && (a[n] = i);
+  return a;
+}
+const re = p(function({
+  options: a,
   value: n,
-  defaultValue: c,
-  onValueChange: u,
-  placeholder: i,
+  defaultValue: i,
+  onValueChange: m,
+  placeholder: r,
   clearable: S = !1,
-  disabled: C,
-  required: I,
-  name: z,
+  disabled: T,
+  required: j,
+  name: N,
   id: h,
-  size: p = "md",
-  tone: v = "default",
-  className: N,
-  container: te,
-  "aria-label": P,
-  "aria-describedby": ae,
-  adornmentInTrigger: ne = !1,
-  showDescriptions: oe = !1
-}, de) {
-  var L;
-  const { t: j } = we("ui"), b = Ce(), f = xe(Ie) !== null, [ie, w] = M(
-    n ?? c ?? ""
-  ), y = n !== void 0, x = y ? n : ie, [k, T] = M(!1), $ = U(x);
-  $.current = x;
-  const re = h ?? (f ? b.id : void 0), A = (f ? b.disabled : !1) || !!C, le = (f ? b.required : !1) || !!I, q = f ? b.invalid : !1, ce = q ? "error" : v, ue = [f ? b.describedBy : void 0, ae].filter(Boolean).join(" ") || void 0, H = ne ? (L = t.find((o) => o.value === x)) == null ? void 0 : L.startAdornment : void 0, V = U(null), pe = Pe(de, V), me = Ve(V), d = u, fe = (o) => {
-    y || w(o), d == null || d(o);
-  }, ge = (o) => {
-    var g;
-    o.preventDefault(), o.stopPropagation(), y || w(""), d == null || d(""), (g = V.current) == null || g.focus();
-  }, R = i ?? j("inputs.select.placeholder", "Select…"), he = S && !!x && !A, ve = ze(t), be = Se(
+  size: f = "md",
+  tone: b = "default",
+  className: w,
+  container: le,
+  "aria-label": q,
+  "aria-describedby": ce,
+  adornmentInTrigger: ue = !1,
+  showDescriptions: pe = !1,
+  ...me
+}, fe) {
+  var Y;
+  const { t: k } = Oe("ui"), y = De(), v = ke(Ee) !== null, [ge, C] = A(
+    n ?? i ?? ""
+  ), x = n !== void 0, l = x ? n : ge, [R, V] = A(!1), H = z(l);
+  H.current = l;
+  const he = Fe(y, h), ve = h ?? (v ? he : void 0), B = (v ? y.disabled : !1) || !!T, O = (v ? y.required : !1) || !!j, W = v ? y.invalid : !1, be = W ? "error" : b, ye = [v ? y.describedBy : void 0, ce].filter(Boolean).join(" ") || void 0, M = ue ? (Y = a.find((s) => s.value === l)) == null ? void 0 : Y.startAdornment : void 0, I = z(null), xe = Je(fe, I), Se = Pe(I), [Ne, Ie] = A(!0);
+  Ae(() => {
+    var s;
+    l === "" && Ie(!!((s = I.current) != null && s.closest("form")));
+  });
+  const D = l === "" && Ne, U = z(null), E = z(l !== "");
+  Re(() => {
+    var s;
+    if (l !== "") {
+      E.current = !0;
+      return;
+    }
+    E.current && (E.current = !1, (s = U.current) == null || s.dispatchEvent(new Event("change", { bubbles: !0 })));
+  }, [l]);
+  const d = m, X = (s) => {
+    x || C(s), d == null || d(s);
+  }, we = (s) => {
+    var c;
+    s.preventDefault(), s.stopPropagation(), x || C(""), d == null || d(""), (c = I.current) == null || c.focus();
+  }, F = r ?? k("inputs.select.placeholder", "Select…"), Ce = S && !!l && !B, J = q ?? (v ? void 0 : F), Q = !q && v ? `${y.id}-label` : void 0, ze = Ge(a), Te = Ve(
     () => ({
-      getValue: () => $.current,
-      setValue: (o) => {
-        const g = t.find((B) => B.value === o);
-        !g || g.disabled || (y || w(o), d == null || d(o));
+      getValue: () => H.current,
+      setValue: (s) => {
+        const c = a.find((G) => G.value === s);
+        !c || c.disabled || (x || C(s), d == null || d(s));
       },
       clear: () => {
-        y || w(""), d == null || d("");
+        x || C(""), d == null || d("");
       },
-      open: () => T(!0),
-      close: () => T(!1),
-      isOpen: () => k
+      open: () => V(!0),
+      close: () => V(!1),
+      isOpen: () => R
     }),
-    [d, y, k, t]
+    [d, x, R, a]
   );
-  return Ne(Be, be, h), /* @__PURE__ */ l(
-    a.Root,
+  return Be(qe, Te, h), /* @__PURE__ */ u(
+    o.Root,
     {
-      value: x === "" ? void 0 : x,
-      onValueChange: fe,
-      open: k,
-      onOpenChange: T,
-      disabled: A,
-      required: le,
-      name: z,
-      dir: me,
+      value: l,
+      onValueChange: X,
+      open: R,
+      onOpenChange: V,
+      disabled: B,
+      required: O,
+      name: D ? void 0 : N,
+      form: D ? Qe : void 0,
+      dir: Se,
       children: [
-        /* @__PURE__ */ l(
-          a.Trigger,
+        /* @__PURE__ */ u(
+          o.Trigger,
           {
-            ref: pe,
-            id: re,
-            "aria-label": P ?? (f ? void 0 : R),
-            "aria-labelledby": !P && f ? `${b.id}-label` : void 0,
-            "aria-describedby": ue,
-            "aria-invalid": q || void 0,
+            ref: xe,
+            id: ve,
+            "aria-label": J,
+            "aria-labelledby": Q,
+            "aria-describedby": ye,
+            "aria-invalid": W || void 0,
+            ...Ze(me),
             "data-component": "select",
             "data-component-id": h,
-            className: E({
-              size: p,
-              tone: ce,
-              className: N
+            className: te({
+              size: f,
+              tone: be,
+              className: w
             }),
             children: [
-              H ? /* @__PURE__ */ l("span", { className: "ds:flex ds:min-w-0 ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+              M ? /* @__PURE__ */ u("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: H
+                    children: M
                   }
                 ),
-                /* @__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(
+                /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:truncate ds:text-start", children: /* @__PURE__ */ e(o.Value, { placeholder: F }) })
+              ] }) : /* @__PURE__ */ e("span", { className: "ds:min-w-0 ds:truncate ds:text-start", children: /* @__PURE__ */ e(o.Value, { placeholder: F }) }),
+              /* @__PURE__ */ u("span", { className: "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                Ce ? /* @__PURE__ */ e(
                   "button",
                   {
                     type: "button",
-                    "aria-label": j("inputs.select.clear", "Clear selection"),
-                    onClick: ge,
-                    onPointerDown: (o) => o.stopPropagation(),
-                    onKeyDown: (o) => {
-                      (o.key === "Enter" || o.key === " ") && o.stopPropagation();
+                    "aria-label": k("inputs.select.clear", "Clear selection"),
+                    onClick: we,
+                    onPointerDown: (s) => s.stopPropagation(),
+                    onKeyDown: (s) => {
+                      (s.key === "Enter" || s.key === " ") && s.stopPropagation();
                     },
                     className: [
                       "ds:inline-flex ds:items-center ds:justify-center ds:rounded-[var(--radius-sm)]",
@@ -449,11 +482,11 @@ const se = r(function({
                       "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
                       "ds:size-4"
                     ].join(" "),
-                    children: /* @__PURE__ */ e(Re, { "aria-hidden": "true", className: "ds:size-3.5" })
+                    children: /* @__PURE__ */ e($e, { "aria-hidden": "true", className: "ds:size-3.5" })
                   }
                 ) : null,
-                /* @__PURE__ */ e(a.Icon, { asChild: !0, children: /* @__PURE__ */ e(
-                  W,
+                /* @__PURE__ */ e(o.Icon, { asChild: !0, children: /* @__PURE__ */ e(
+                  ee,
                   {
                     "aria-hidden": "true",
                     className: [
@@ -467,55 +500,87 @@ const se = r(function({
             ]
           }
         ),
-        /* @__PURE__ */ e(D, { container: te, children: /* @__PURE__ */ e(G, { 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: o, items: g }, B) => {
-          const _ = g.map((m) => /* @__PURE__ */ e(
-            F,
+        D && (N !== void 0 || O) ? /* @__PURE__ */ u(
+          "select",
+          {
+            ref: U,
+            "data-component": "select-field",
+            "aria-hidden": !0,
+            tabIndex: -1,
+            "aria-label": J,
+            "aria-labelledby": Q,
+            name: N,
+            required: O,
+            disabled: B,
+            value: "",
+            onChange: (s) => {
+              var c;
+              s.target.value !== "" && (document.activeElement === s.target && ((c = I.current) == null || c.focus()), X(s.target.value));
+            },
+            className: "ds:sr-only",
+            children: [
+              /* @__PURE__ */ e("option", { value: "" }),
+              a.map((s) => /* @__PURE__ */ e(
+                "option",
+                {
+                  value: s.value,
+                  disabled: s.disabled,
+                  children: s.label
+                },
+                s.value
+              ))
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ e(L, { container: le, children: /* @__PURE__ */ e(K, { children: a.length === 0 ? /* @__PURE__ */ e("div", { className: "ds:ps-8 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", children: k("inputs.select.noOptions", "No options") }) : ze.map(({ group: s, items: c }, G) => {
+          const Z = c.map((g) => /* @__PURE__ */ e(
+            P,
             {
-              value: m.value,
-              disabled: m.disabled,
-              size: p,
-              "data-option-id": m.value,
-              startAdornment: m.startAdornment,
-              endContent: m.endContent,
-              description: oe ? m.description : void 0,
-              children: m.label
+              value: g.value,
+              disabled: g.disabled,
+              size: f,
+              "data-option-id": g.value,
+              startAdornment: g.startAdornment,
+              endContent: g.endContent,
+              description: pe ? g.description : void 0,
+              children: g.label
             },
-            m.value
+            g.value
           ));
-          return o ? /* @__PURE__ */ l(a.Group, { children: [
-            /* @__PURE__ */ e(K, { children: o }),
-            _
-          ] }, `group-${o}`) : /* @__PURE__ */ e(a.Group, { children: _ }, `group-${B}`);
+          return s ? /* @__PURE__ */ u(o.Group, { children: [
+            /* @__PURE__ */ e($, { children: s }),
+            Z
+          ] }, `group-${s}`) : /* @__PURE__ */ e(o.Group, { children: Z }, `group-${G}`);
         }) }) })
       ]
     }
   );
 });
-se.displayName = "Select";
-const $e = Object.assign(se, {
-  Root: X,
-  Trigger: J,
-  Value: Q,
-  Content: D,
-  Viewport: G,
-  Item: F,
-  ItemText: Y,
-  Group: Z,
-  Label: K,
-  Separator: ee
-}), Ze = $e;
+re.displayName = "Select";
+const et = Object.assign(re, {
+  Root: se,
+  Trigger: ae,
+  Value: ne,
+  Content: L,
+  Viewport: K,
+  Item: P,
+  ItemText: oe,
+  Group: de,
+  Label: $,
+  Separator: ie
+}), gt = et;
 export {
-  Ze as S,
-  D as a,
-  Z as b,
-  F as c,
-  Y as d,
-  K as e,
-  X as f,
-  ee as g,
-  J as h,
-  Q as i,
-  G as j,
-  E as s
+  gt as S,
+  L as a,
+  de as b,
+  P as c,
+  oe as d,
+  $ as e,
+  se as f,
+  ie as g,
+  ae as h,
+  ne as i,
+  K as j,
+  te as s
 };
-//# sourceMappingURL=select-Br88h070.js.map
+//# sourceMappingURL=select-DHPmASkG.js.map