@alfadocs/ui-kit 1.54.2 → 1.55.0

package/dist/_chunks/multi-select-BT23EnSA.js

@@ -0,0 +1,688 @@
+import { jsx as r, jsxs as b, Fragment as Je } from "react/jsx-runtime";
+import { forwardRef as Ze, useContext as et, useState as V, useRef as y, useId as tt, useMemo as D, useEffect as X, useCallback as me } from "react";
+import * as q from "@radix-ui/react-popover";
+import { _ as c } from "./index-4xgbg-sn.js";
+import { c as be } from "./index-D2ZczOXr.js";
+import { useTranslation as st } from "react-i18next";
+import { u as rt, F as nt, b as it } from "./form-field-context-DtiROUJV.js";
+import { T as fe } from "./tooltip-Cp-PLePW.js";
+import { c as at } from "./compose-refs-C0k0tdqF.js";
+import { u as ot } from "./use-controllable-state-BiY4xTzM.js";
+import { u as M } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { g as lt } from "./group-options-BvKhQ3xb.js";
+import { b as ve } from "./menu-row-BAr8bx1I.js";
+import { O as dt, a as ct, o as ut, b as pt, c as mt } from "./option-row-Dc7BrbK8.js";
+import { b as J, c as ft } from "./input-surface-iBmxVBfr.js";
+import { u as ht } from "./registry-DvAUVLHh.js";
+import { X as gt } from "./x-B5YnXwCz.js";
+import { C as bt } from "./check-DrFSN__t.js";
+const vt = {
+  id: "multi-select",
+  // Persisted multi-choice (selection state + set_selection) → select_multiple,
+  // plus type-to-filter and open/close of the option list.
+  capabilities: ["select_multiple", "filter", "open", "close"],
+  state: {
+    selection: {
+      type: "string[]",
+      descriptionKey: "ui.agent.multiSelect.state.selection",
+      description: "Values of currently-selected options.",
+      read: (o) => o.getSelection()
+    },
+    query: {
+      type: "string",
+      descriptionKey: "ui.agent.multiSelect.state.query",
+      description: "Current filter query.",
+      read: (o) => o.getQuery()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.multiSelect.state.isOpen",
+      description: "True when the option list is visible.",
+      read: (o) => o.getIsOpen()
+    }
+  },
+  actions: {
+    set_selection: {
+      // Persists the user's chosen options — reversible via the same UI.
+      safety: "write",
+      argsType: "{ values: string[] }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          values: {
+            type: "array",
+            items: { type: "string" },
+            description: "Option values to select (replaces the current selection)."
+          }
+        },
+        required: ["values"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.setSelection",
+      description: "Replace the current selection with the given list of values.",
+      examples: [
+        {
+          args: { values: ["a", "b"] },
+          note: 'Select exactly options "a" and "b".'
+        }
+      ],
+      invoke: (o, l) => {
+        o.setSelection(l.values);
+      }
+    },
+    clear_selection: {
+      // Discards the persisted selection — destructive (loses the choices).
+      safety: "destructive",
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.clearSelection",
+      description: "Clear the current selection.",
+      invoke: (o) => {
+        o.clearSelection();
+      }
+    },
+    apply_filter: {
+      // Pure ephemeral filter of the visible options — no persisted change.
+      safety: "read",
+      argsType: "{ query: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          query: { type: "string", description: "Filter text for the list." }
+        },
+        required: ["query"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.applyFilter",
+      description: "Set the filter query for the option list.",
+      invoke: (o, l) => {
+        o.setQuery(l.query);
+      }
+    },
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.open",
+      description: "Open the option list.",
+      invoke: (o) => {
+        o.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.multiSelect.actions.close",
+      description: "Close the option list.",
+      invoke: (o) => {
+        o.close();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "multi-select" },
+    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."
+    }
+  }
+}, yt = be(
+  [
+    "ds:inline-flex ds:flex-wrap ds:items-center ds:gap-1 ds:w-full",
+    ft,
+    "ds:aria-[invalid=true]:border-destructive",
+    "ds:aria-disabled:cursor-not-allowed ds:aria-disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: `ds:min-h-8 ds:ps-2 ds:pe-2 ds:py-1 ${J.sm}`,
+        md: `ds:min-h-[var(--min-target-size)] ds:ps-3 ds:pe-3 ds:py-1.5 ${J.md}`,
+        lg: `ds:min-h-12 ds:ps-4 ds:pe-4 ds:py-2 ${J.lg}`
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), he = be(
+  [
+    "ds:inline-flex ds:items-center ds:gap-1",
+    "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
+    "ds:text-foreground ds:select-none",
+    "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:forced-colors:focus-visible:outline-[CanvasText]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "ds:ps-2 ds:pe-1 ds:py-0.5 ds:text-[length:var(--font-size-xs)]",
+        md: "ds:ps-2 ds:pe-1 ds:py-0.5 ds:text-[length:var(--font-size-sm)]",
+        lg: "ds:ps-3 ds:pe-1.5 ds:py-1 ds:text-[length:var(--font-size-base)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), St = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "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",
+  'ds:relative ds:before:absolute ds:before:inset-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[""]'
+].join(" "), xt = [
+  "ds:z-[var(--z-dropdown)] ds:overflow-hidden",
+  // At least as wide as the field, at most as wide as the screen allows: a
+  // long option wraps or ends in an ellipsis instead of running off the
+  // edge. The floor gives way to the cap on a field wider than that.
+  "ds:min-w-[min(var(--radix-popover-trigger-width),var(--radix-popover-content-available-width))]",
+  "ds:max-w-[var(--radix-popover-content-available-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(" "), It = [
+  "ds:relative ds:flex ds:cursor-pointer ds:items-center",
+  "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
+  "ds:text-[var(--font-size-sm)] ds:text-foreground ds:outline-none ds:select-none",
+  ve.selected,
+  "ds:aria-[disabled=true]:pointer-events-none ds:aria-[disabled=true]:opacity-50",
+  "ds:data-[disabled=true]:pointer-events-none ds:data-[disabled=true]:opacity-50"
+].join(" "), ge = [
+  "ds:relative ds:flex ds:cursor-pointer ds:items-center",
+  "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
+  "ds:text-[var(--font-size-sm)] ds:font-medium ds:text-primary ds:outline-none ds:select-none",
+  ve.selected
+].join(" "), Nt = "__ui-multiselect-select-all__", wt = "__ui-multiselect-clear-all__", ye = Ze(
+  function({
+    options: l,
+    value: Se,
+    defaultValue: xe,
+    onChange: Ie,
+    onComplete: z,
+    placeholder: Ne,
+    maxSelections: I,
+    allowSelectAll: Z = !1,
+    allowClear: ee = !1,
+    filter: P,
+    size: R = "md",
+    disabled: we,
+    wrapOptionLabels: te = !1,
+    className: Ce,
+    id: j,
+    // Pull `aria-label` out of the div spread so it names the combobox
+    // INPUT (the interactive control) rather than the wrapper div. Lets a
+    // consumer give the trigger a meaningful name when there's no visible
+    // label or FormField (e.g. a data-table floating filter naming itself
+    // after its column). Untouched callers fall back to the placeholder.
+    // Inside a FormField the field's label names the input and this is
+    // ignored, so it can never override the visible text (WCAG 2.5.3).
+    "aria-label": se,
+    ...Ae
+  }, _e) {
+    const { t: u } = st("ui"), p = rt(), S = et(nt) !== null, [ke, K] = ot({
+      value: Se,
+      defaultValue: xe ?? [],
+      onChange: Ie
+    }), i = ke ?? [], [w, m] = V(!1), [f, B] = V(""), v = y(null), re = `${tt()}-count`, N = y([]), $ = y(null), Re = at(_e, $), x = S && p.disabled || !!we, Te = S && p.required, ne = S && p.invalid, Ee = S && p.describedBy ? p.describedBy : void 0, Oe = j ?? (S ? p.id : void 0);
+    it(p, v);
+    const Fe = D(() => {
+      const e = /* @__PURE__ */ new Map();
+      for (const t of l) e.set(t.value, t.label);
+      return e;
+    }, [l]), ie = typeof I == "number" && i.length >= I, C = (e) => {
+      K(e);
+    }, Le = (e) => {
+      if (i.includes(e)) {
+        C(i.filter((t) => t !== e));
+        return;
+      }
+      ie || C([...i, e]);
+    }, U = (e) => {
+      const t = i.filter((n, a) => a !== e);
+      return C(t), t;
+    }, Ve = () => {
+      const e = l.filter((n) => !n.disabled).map((n) => n.value), t = typeof I == "number" ? I : e.length;
+      C(e.slice(0, t));
+    }, De = () => {
+      C([]);
+    }, ae = y(i);
+    X(() => {
+      ae.current = i;
+    }, [i]);
+    const oe = y(f);
+    X(() => {
+      oe.current = f;
+    }, [f]);
+    const le = y(w);
+    X(() => {
+      le.current = w;
+    }, [w]);
+    const H = me(
+      (e) => {
+        K(e);
+      },
+      [K]
+    ), qe = D(
+      () => ({
+        getSelection: () => [...ae.current],
+        getQuery: () => oe.current,
+        getIsOpen: () => le.current,
+        setSelection: (e) => H(e),
+        clearSelection: () => H([]),
+        setQuery: (e) => B(e),
+        open: () => m(!0),
+        close: () => m(!1)
+      }),
+      [H]
+    );
+    ht(vt, qe, j);
+    const Y = Ne ?? u("inputs.multiSelect.placeholder", "Select…"), de = D(() => {
+      if (!f) return l;
+      const e = f.toLowerCase();
+      return l.filter((t) => P ? P(f, t) : t.label.toLowerCase().includes(e));
+    }, [l, f, P]), Me = D(
+      () => lt(de),
+      [de]
+    ), ze = (e) => {
+      var a;
+      const t = e.currentTarget;
+      if (e.key === "Backspace" && f === "" && i.length > 0) {
+        e.preventDefault();
+        const s = i.length - 1, d = U(s).length - 1;
+        d >= 0 && requestAnimationFrame(() => {
+          var g;
+          (g = N.current[d]) == null || g.focus();
+        });
+        return;
+      }
+      const n = t.selectionStart === 0 && t.selectionEnd === 0;
+      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && n && i.length > 0) {
+        const s = document.dir === "rtl" || t.dir === "rtl";
+        if (s && e.key === "ArrowRight" || !s && e.key === "ArrowLeft") {
+          e.preventDefault();
+          const d = i.length - 1;
+          (a = N.current[d]) == null || a.focus();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        m(!1);
+        return;
+      }
+      !w && (e.key === "ArrowDown" || e.key === "Enter") && m(!0);
+    }, Pe = (e) => (t) => {
+      var h, d, g, _;
+      if (t.key === "Backspace" || t.key === "Delete" || t.key === "Enter" || t.key === " ") {
+        t.preventDefault(), t.stopPropagation();
+        const L = U(e);
+        if (L.length === 0) {
+          requestAnimationFrame(() => {
+            var k;
+            return (k = v.current) == null ? void 0 : k.focus();
+          });
+          return;
+        }
+        const Xe = Math.min(e, L.length - 1);
+        requestAnimationFrame(() => {
+          var k;
+          (k = N.current[Xe]) == null || k.focus();
+        });
+        return;
+      }
+      const n = document.dir === "rtl", a = n ? "ArrowRight" : "ArrowLeft", s = n ? "ArrowLeft" : "ArrowRight";
+      if (t.key === a) {
+        t.preventDefault();
+        const L = Math.max(0, e - 1);
+        (h = N.current[L]) == null || h.focus();
+        return;
+      }
+      if (t.key === s) {
+        t.preventDefault(), e < i.length - 1 ? (d = N.current[e + 1]) == null || d.focus() : (g = v.current) == null || g.focus();
+        return;
+      }
+      t.key === "Escape" && (m(!1), (_ = v.current) == null || _.focus());
+    }, [T, G] = V(
+      Number.POSITIVE_INFINITY
+    ), [je, Ke] = V(0), ce = y(-1), E = me(() => {
+      G(Number.POSITIVE_INFINITY), Ke((e) => e + 1);
+    }, []);
+    M(() => {
+      const e = $.current;
+      if (!e) return;
+      const t = Array.from(
+        e.querySelectorAll('[data-ui-chip="true"]')
+      );
+      if (t.length === 0) {
+        G(Number.POSITIVE_INFINITY);
+        return;
+      }
+      const n = t[0].offsetTop;
+      let a = 0;
+      for (const s of t)
+        if (s.offsetTop === n) a++;
+        else break;
+      G(
+        a === t.length ? Number.POSITIVE_INFINITY : Math.max(1, a - 1)
+      );
+    }, [je]), M(() => {
+      E();
+    }, [i.length, R, E]), M(() => {
+      const e = $.current;
+      if (!e) return;
+      const t = new ResizeObserver((n) => {
+        var s;
+        const a = Math.round(
+          ((s = n[0]) == null ? void 0 : s.contentRect.width) ?? e.clientWidth
+        );
+        a !== ce.current && (ce.current = a, E());
+      });
+      return t.observe(e), () => t.disconnect();
+    }, [E]);
+    const O = i.map((e) => ({
+      value: e,
+      label: Fe.get(e) ?? e
+    })), ue = T === Number.POSITIVE_INFINITY || T >= O.length, Be = ue ? O : O.slice(0, T), pe = ue ? [] : O.slice(T), A = pe.length, $e = (e) => {
+      var n;
+      if (x) return;
+      const t = e.target;
+      t.closest('[data-ui-chip="true"]') || t.closest('[data-ui-chip-dismiss="true"]') || (m(!0), (n = v.current) == null || n.focus());
+    }, Ue = (e) => {
+      if (x) {
+        m(!1);
+        return;
+      }
+      m(e), e || (B(""), z == null || z(i));
+    }, He = Z || ee, Ye = u("inputs.multiSelect.selected", {
+      count: i.length,
+      defaultValue: `${i.length} selected`
+    }), Ge = S && p.label || se || Y, Qe = [re, Ee].filter(Boolean).join(" "), Q = S ? `${p.id}-label` : void 0, F = y(null);
+    M(() => {
+      const e = v.current;
+      if (!e) return;
+      const t = e.getAttribute("aria-labelledby");
+      if (Q) {
+        if (t === Q) return;
+        F.current = t, e.setAttribute("aria-labelledby", Q);
+      } else F.current !== null && (e.setAttribute("aria-labelledby", F.current), F.current = null);
+    });
+    const { onClick: W, ...We } = Ae;
+    return /* @__PURE__ */ r(c, { shouldFilter: !1, label: Ge, children: /* @__PURE__ */ b(q.Root, { open: w, onOpenChange: Ue, children: [
+      /* @__PURE__ */ r(q.Anchor, { asChild: !0, children: /* @__PURE__ */ b(
+        "div",
+        {
+          ref: Re,
+          className: yt({ size: R, className: Ce }),
+          "aria-disabled": x || void 0,
+          "aria-invalid": ne || void 0,
+          "data-component": "multi-select",
+          "data-component-id": j,
+          onClick: (e) => {
+            W == null || W(e), $e(e);
+          },
+          ...We,
+          children: [
+            Be.map((e, t) => (
+              // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- chip pill receives focus via roving tabindex; chip removal uses an inner button
+              /* @__PURE__ */ b(
+                "span",
+                {
+                  ref: (n) => {
+                    N.current[t] = n;
+                  },
+                  tabIndex: x ? -1 : 0,
+                  "data-ui-chip": "true",
+                  className: he({ size: R }),
+                  onKeyDown: Pe(t),
+                  "aria-label": e.label,
+                  children: [
+                    /* @__PURE__ */ r("span", { children: e.label }),
+                    /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        "data-ui-chip-dismiss": "true",
+                        "aria-label": u("inputs.multiSelect.remove", {
+                          label: e.label,
+                          defaultValue: `Remove ${e.label}`
+                        }),
+                        disabled: x,
+                        onClick: (n) => {
+                          n.stopPropagation(), U(t), requestAnimationFrame(() => {
+                            var a;
+                            return (a = v.current) == null ? void 0 : a.focus();
+                          });
+                        },
+                        className: St,
+                        children: /* @__PURE__ */ r(gt, { "aria-hidden": "true", className: "ds:size-3.5" })
+                      }
+                    )
+                  ]
+                },
+                e.value
+              )
+            )),
+            A > 0 ? /* @__PURE__ */ r(
+              fe,
+              {
+                label: pe.map((e) => e.label).join(", "),
+                delayDuration: 200,
+                children: /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: he({ size: R }),
+                    tabIndex: 0,
+                    role: "button",
+                    "aria-label": u("inputs.multiSelect.overflow", {
+                      count: A,
+                      defaultValue: `+${A} more`
+                    }),
+                    children: /* @__PURE__ */ r("span", { children: u("inputs.multiSelect.overflow", {
+                      count: A,
+                      defaultValue: `+${A} more`
+                    }) })
+                  }
+                )
+              }
+            ) : null,
+            /* @__PURE__ */ r(
+              c.Input,
+              {
+                ref: v,
+                value: f,
+                onValueChange: B,
+                onKeyDown: ze,
+                onFocus: () => {
+                  x || m(!0);
+                },
+                placeholder: i.length === 0 ? Y : "",
+                id: Oe,
+                "aria-describedby": Qe,
+                "aria-invalid": ne || void 0,
+                "aria-required": Te || void 0,
+                disabled: x,
+                className: [
+                  "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
+                  "ds:placeholder:text-muted-foreground ds:text-start",
+                  "ds:disabled:cursor-not-allowed"
+                ].join(" ")
+              }
+            ),
+            /* @__PURE__ */ r("span", { id: re, hidden: !0, children: Ye })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r(q.Portal, { children: /* @__PURE__ */ r(
+        q.Content,
+        {
+          "data-component": "multi-select-list",
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          align: "start",
+          sideOffset: 4,
+          collisionPadding: 8,
+          className: xt,
+          children: /* @__PURE__ */ b(
+            c.List,
+            {
+              role: "listbox",
+              "aria-multiselectable": "true",
+              "aria-label": Y,
+              className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
+              children: [
+                He ? /* @__PURE__ */ b(c.Group, { children: [
+                  Z ? /* @__PURE__ */ r(
+                    c.Item,
+                    {
+                      value: Nt,
+                      onSelect: Ve,
+                      className: ge,
+                      children: u("inputs.multiSelect.selectAll", "Select all")
+                    }
+                  ) : null,
+                  ee ? /* @__PURE__ */ r(
+                    c.Item,
+                    {
+                      value: wt,
+                      onSelect: De,
+                      className: ge,
+                      children: u("inputs.multiSelect.clearAll", "Clear all")
+                    }
+                  ) : null
+                ] }) : null,
+                /* @__PURE__ */ r(c.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: u("inputs.multiSelect.noOptions", "No options found") }),
+                Me.map(({ group: e, items: t }, n) => {
+                  const a = t.map((s) => {
+                    const h = i.includes(s.value), d = !h && ie, g = !!s.disabled || d, _ = /* @__PURE__ */ b(
+                      c.Item,
+                      {
+                        value: s.value,
+                        "data-option-id": s.value,
+                        disabled: g,
+                        onSelect: () => {
+                          g || Le(s.value);
+                        },
+                        "aria-selected": h,
+                        "aria-disabled": g || void 0,
+                        className: It,
+                        children: [
+                          /* @__PURE__ */ r(
+                            "span",
+                            {
+                              className: [
+                                "ds:inline-flex ds:items-center ds:justify-center ds:me-[var(--spacing-xs)] ds:shrink-0",
+                                "ds:size-4 ds:rounded-[var(--radius-sm)] ds:border",
+                                h ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background ds:border-[color:var(--control-border)]"
+                              ].join(" "),
+                              "aria-hidden": "true",
+                              children: h ? /* @__PURE__ */ r(bt, { className: "ds:size-3.5" }) : null
+                            }
+                          ),
+                          s.startAdornment ? (
+                            // Decorative by contract — the accessible name comes
+                            // from the option label.
+                            /* @__PURE__ */ r(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:inline-flex ds:items-center ds:shrink-0 ds:me-[var(--spacing-xs)]",
+                                children: s.startAdornment
+                              }
+                            )
+                          ) : null,
+                          s.description || te ? (
+                            // Stacked, as in Combobox: the label and its end
+                            // content on one row, the description under them.
+                            // The option's name reads in that order.
+                            /* @__PURE__ */ b("span", { className: dt, children: [
+                              /* @__PURE__ */ b("span", { className: ct, children: [
+                                /* @__PURE__ */ r(
+                                  "span",
+                                  {
+                                    className: ut({
+                                      wrap: te,
+                                      className: "ds:flex-1 ds:text-start"
+                                    }),
+                                    children: s.label
+                                  }
+                                ),
+                                s.endContent ? (
+                                  // Announced, as below.
+                                  /* @__PURE__ */ r("span", { className: pt, children: s.endContent })
+                                ) : null
+                              ] }),
+                              s.description ? /* @__PURE__ */ r(
+                                "span",
+                                {
+                                  className: mt({
+                                    tone: s.descriptionTone,
+                                    className: "ds:text-start"
+                                  }),
+                                  children: s.description
+                                }
+                              ) : null
+                            ] })
+                          ) : /* @__PURE__ */ b(Je, { children: [
+                            /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:min-w-0 ds:truncate ds:text-start", children: s.label }),
+                            s.endContent ? (
+                              // Deliberately NOT aria-hidden — unlike
+                              // `startAdornment`, this slot carries meaning
+                              // (a price, a count) and must reach the
+                              // option's accessible name. `ms-auto` pins it
+                              // to the inline-end and flips under RTL.
+                              /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:items-center ds:ms-auto ds:shrink-0 ds:ps-[var(--spacing-xs)]", children: s.endContent })
+                            ) : null
+                          ] })
+                        ]
+                      },
+                      s.value
+                    );
+                    return d ? /* @__PURE__ */ r(
+                      fe,
+                      {
+                        label: u("inputs.multiSelect.maxReached", {
+                          count: I,
+                          defaultValue: `Maximum ${I} selections`
+                        }),
+                        delayDuration: 200,
+                        children: _
+                      },
+                      s.value
+                    ) : _;
+                  });
+                  return e ? /* @__PURE__ */ r(
+                    c.Group,
+                    {
+                      heading: e,
+                      className: "ds:[&_[cmdk-group-heading]]:ps-2 ds:[&_[cmdk-group-heading]]:pe-2 ds:[&_[cmdk-group-heading]]:py-1 ds:[&_[cmdk-group-heading]]:type-eyebrow ds:[&_[cmdk-group-heading]]:text-muted-foreground",
+                      children: a
+                    },
+                    `group-${e}`
+                  ) : /* @__PURE__ */ r(c.Group, { children: a }, `group-${n}`);
+                })
+              ]
+            }
+          )
+        }
+      ) })
+    ] }) });
+  }
+);
+ye.displayName = "MultiSelect";
+const Kt = ye;
+export {
+  Kt as M,
+  yt as a,
+  vt as m
+};
+//# sourceMappingURL=multi-select-BT23EnSA.js.map