@commercetools/nimbus 2.9.1 → 2.10.0

package/dist/chunks/select-6_4th9JF.es.js

@@ -0,0 +1,752 @@
+import { jsx as u, jsxs as I } from "react/jsx-runtime";
+import g, { useMemo as S, useRef as w, useCallback as W, useState as B, forwardRef as ie, useContext as j, Fragment as ne, createContext as q } from "react";
+import { e as E } from "./extract-style-props-D_NsrT_t.es.js";
+import { createSlotRecipeContext as se, useSlotRecipe as ce, chakra as H } from "@chakra-ui/react/styled-system";
+import { c as de, d as fe } from "./getItemCount-BEy-gD1d.es.js";
+import { $ as ue, a as be, b as $e, c as me, d as pe } from "./ListBox-BQGvhjf1.es.js";
+import { f as ge, g as ye } from "./CollectionBuilder-CbqLnlVI.es.js";
+import { $ as he } from "./useObjectRef-tuMEdnba.es.js";
+import { m as ve } from "./merge-refs-D-zSwpoh.es.js";
+import { Close as xe, Loop as Se, KeyboardArrowDown as Pe } from "@commercetools/nimbus-icons";
+import { $ as U, a as Ce } from "./Button-i3wfJjZy.es.js";
+import { q as Re, e as Fe, h as De, r as Ke, $ as Me } from "./Dialog-Dwy2_Ptk.es.js";
+import { $ as J, d as X, a as Q, b as Y, c as Ie, f as we, e as Be } from "./utils-BBrLCz2b.es.js";
+import { $ as Ee } from "./FieldError-DE-Ehcjp.es.js";
+import { $ as Ve } from "./Form-CXcEMuBf.es.js";
+import { $ as Oe } from "./intlStrings-DhlQ0Eoy.es.js";
+import { $ as Z } from "./Label-DVM33Itv.es.js";
+import { $ as T } from "./Text-DOcU1ycg.es.js";
+import { a as A, $ as ke, e as Ae } from "./mergeProps-Bcbq3GVJ.es.js";
+import { $ as z } from "./filterDOMProps-BBiQzGq3.es.js";
+import { $ as qe, a as Te } from "./utils-QxBoGDA9.es.js";
+import { f as ze } from "./useFocusVisible-DZMx0daa.es.js";
+import { $ as _e } from "./useCollator-BHtcueqX.es.js";
+import { $ as Ne } from "./useField-lGJsB_QJ.es.js";
+import { l as Le } from "./useCollection-BHV9RL7c.es.js";
+import { $ as Ge } from "./useFormReset-DEMt0iT5.es.js";
+import { a as We, $ as je } from "./useFormValidation-B4BrOn-T.es.js";
+import { a as He } from "./VisuallyHidden-CQtTsK1P.es.js";
+import { $ as Ue } from "./Hidden-QDfbcOVE.es.js";
+import { a as Je } from "./useListState-CCuYEVMA.es.js";
+import { $ as Xe, a as Qe } from "./useOverlayTriggerState-BIEvXItV.es.js";
+import { $ as Ye } from "./useControlledState-BO6rCKQt.es.js";
+import { $ as Ze } from "./useFocusRing-2PACod61.es.js";
+import { $ as et } from "./I18nProvider-BuwVdK1A.es.js";
+import { $ as tt } from "./useLocalizedStringFormatter-pZiuCYXV.es.js";
+import { n as M, u as lt } from "./normalize-messages-CeN1NEyM.es.js";
+import { I as at } from "./icon-button-DwOSMjvL.es.js";
+import { l as rt } from "./index-B5W9PQbq.es.js";
+import { F as k } from "./flex-BqxAMF-7.es.js";
+import { B as G } from "./box-DuBoAZvq.es.js";
+function ot(e = {}) {
+  let { locale: t } = et();
+  return S(() => new Intl.ListFormat(t, e), [
+    t,
+    e
+  ]);
+}
+const _ = /* @__PURE__ */ new WeakMap();
+function it(e, t, r) {
+  let { keyboardDelegate: l, isDisabled: a, isRequired: o, name: d, form: b, validationBehavior: i = "aria" } = e, v = _e({
+    usage: "search",
+    sensitivity: "base"
+  }), s = S(() => l || new de(t.collection, t.disabledKeys, r, v), [
+    l,
+    t.collection,
+    t.disabledKeys,
+    v,
+    r
+  ]), { menuTriggerProps: m, menuProps: c } = Re({
+    isDisabled: a,
+    type: "listbox"
+  }, t, r), $ = (h) => {
+    if (t.selectionManager.selectionMode !== "multiple")
+      switch (h.key) {
+        case "ArrowLeft": {
+          h.preventDefault();
+          let K = t.selectedKey != null ? s.getKeyAbove?.(t.selectedKey) : s.getFirstKey?.();
+          K && t.setSelectedKey(K);
+          break;
+        }
+        case "ArrowRight": {
+          h.preventDefault();
+          let K = t.selectedKey != null ? s.getKeyBelow?.(t.selectedKey) : s.getFirstKey?.();
+          K && t.setSelectedKey(K);
+          break;
+        }
+      }
+  }, { typeSelectProps: n } = Le({
+    keyboardDelegate: s,
+    selectionManager: t.selectionManager,
+    onTypeSelect(h) {
+      t.setSelectedKey(h);
+    }
+  }), { isInvalid: p, validationErrors: y, validationDetails: R } = t.displayValidation, { labelProps: C, fieldProps: f, descriptionProps: x, errorMessageProps: V } = Ne({
+    ...e,
+    labelElementType: "span",
+    isInvalid: p,
+    errorMessage: e.errorMessage || y
+  });
+  n.onKeyDown = n.onKeyDownCapture, delete n.onKeyDownCapture, t.selectionManager.selectionMode === "multiple" && (n = {});
+  let O = z(e, {
+    labelable: !0
+  }), P = A(n, m, f), D = ke();
+  return _.set(t, {
+    isDisabled: a,
+    isRequired: o,
+    name: d,
+    form: b,
+    validationBehavior: i
+  }), {
+    labelProps: {
+      ...C,
+      onClick: () => {
+        e.isDisabled || (r.current?.focus(), ze("keyboard"));
+      }
+    },
+    triggerProps: A(O, {
+      ...P,
+      isDisabled: a,
+      onKeyDown: Ae(P.onKeyDown, $, e.onKeyDown),
+      onKeyUp: e.onKeyUp,
+      "aria-labelledby": [
+        D,
+        P["aria-labelledby"],
+        P["aria-label"] && !P["aria-labelledby"] ? P.id : null
+      ].filter(Boolean).join(" "),
+      onFocus(h) {
+        t.isFocused || (e.onFocus && e.onFocus(h), e.onFocusChange && e.onFocusChange(!0), t.setFocused(!0));
+      },
+      onBlur(h) {
+        t.isOpen || (e.onBlur && e.onBlur(h), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      }
+    }),
+    valueProps: {
+      id: D
+    },
+    menuProps: {
+      ...c,
+      autoFocus: t.focusStrategy || !0,
+      shouldSelectOnPressUp: !0,
+      shouldFocusOnHover: !0,
+      disallowEmptySelection: !0,
+      linkBehavior: "selection",
+      onBlur: (h) => {
+        qe(h.currentTarget, h.relatedTarget) || (e.onBlur && e.onBlur(h), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      },
+      "aria-labelledby": [
+        f["aria-labelledby"],
+        P["aria-label"] && !f["aria-labelledby"] ? P.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps: x,
+    errorMessageProps: V,
+    isInvalid: p,
+    validationErrors: y,
+    validationDetails: R,
+    hiddenSelectProps: {
+      isDisabled: a,
+      name: d,
+      label: e.label,
+      state: t,
+      triggerRef: r,
+      form: b
+    }
+  };
+}
+function nt(e, t, r) {
+  let l = _.get(t) || {}, { autoComplete: a, name: o = l.name, form: d = l.form, isDisabled: b = l.isDisabled } = e, { validationBehavior: i, isRequired: v } = l, { visuallyHiddenProps: s } = He({
+    style: {
+      // Prevent page scrolling.
+      position: "fixed",
+      top: 0,
+      left: 0
+    }
+  });
+  Ge(e.selectRef, t.defaultValue, t.setValue), We({
+    validationBehavior: i,
+    focus: () => r.current?.focus()
+  }, t, e.selectRef);
+  let m = t.setValue, c = W(($) => {
+    let n = Te($);
+    n.multiple ? m(Array.from(n.selectedOptions, (p) => p.value)) : m($.currentTarget.value);
+  }, [
+    m
+  ]);
+  return {
+    containerProps: {
+      ...s,
+      "aria-hidden": !0,
+      // @ts-ignore
+      "data-react-aria-prevent-focus": !0,
+      // @ts-ignore
+      "data-a11y-ignore": "aria-hidden-focus"
+    },
+    inputProps: {
+      style: {
+        display: "none"
+      }
+    },
+    selectProps: {
+      tabIndex: -1,
+      autoComplete: a,
+      disabled: b,
+      multiple: t.selectionManager.selectionMode === "multiple",
+      required: i === "native" && v,
+      name: o,
+      form: d,
+      value: t.value ?? "",
+      onChange: c,
+      onInput: c
+    }
+  };
+}
+function st(e) {
+  let { state: t, triggerRef: r, label: l, name: a, form: o, isDisabled: d } = e, b = w(null), i = w(null), { containerProps: v, selectProps: s } = nt({
+    ...e,
+    selectRef: t.collection.size <= 300 ? b : i
+  }, t, r), m = Array.isArray(t.value) ? t.value : [
+    t.value
+  ];
+  if (t.collection.size <= 300) return /* @__PURE__ */ g.createElement("div", {
+    ...v,
+    "data-testid": "hidden-select-container"
+  }, /* @__PURE__ */ g.createElement("label", null, l, /* @__PURE__ */ g.createElement("select", {
+    ...s,
+    ref: b
+  }, /* @__PURE__ */ g.createElement("option", {
+    value: "",
+    label: " "
+  }, " "), [
+    ...t.collection.getKeys()
+  ].map((c) => {
+    let $ = t.collection.getItem(c);
+    if ($ && $.type === "item") return /* @__PURE__ */ g.createElement("option", {
+      key: $.key,
+      value: $.key
+    }, $.textValue);
+  }), t.collection.size === 0 && a && m.map((c, $) => /* @__PURE__ */ g.createElement("option", {
+    key: $,
+    value: c ?? ""
+  })))));
+  if (a) {
+    let c = _.get(t) || {}, { validationBehavior: $ } = c;
+    m.length === 0 && (m = [
+      null
+    ]);
+    let n = m.map((p, y) => {
+      let R = {
+        type: "hidden",
+        autoComplete: s.autoComplete,
+        name: a,
+        form: o,
+        disabled: d,
+        value: p ?? ""
+      };
+      return $ === "native" ? /* @__PURE__ */ g.createElement("input", {
+        key: y,
+        ...R,
+        ref: y === 0 ? i : null,
+        style: {
+          display: "none"
+        },
+        type: "text",
+        required: y === 0 ? s.required : !1,
+        onChange: () => {
+        }
+      }) : /* @__PURE__ */ g.createElement("input", {
+        key: y,
+        ...R,
+        ref: y === 0 ? i : null
+      });
+    });
+    return /* @__PURE__ */ g.createElement(g.Fragment, null, n);
+  }
+  return null;
+}
+function ct(e) {
+  let { selectionMode: t = "single", shouldCloseOnSelect: r = t === "single" } = e, l = Xe(e), [a, o] = B(null), d = S(() => e.defaultValue !== void 0 ? e.defaultValue : t === "single" ? e.defaultSelectedKey ?? null : [], [
+    e.defaultValue,
+    e.defaultSelectedKey,
+    t
+  ]), b = S(() => e.value !== void 0 ? e.value : t === "single" ? e.selectedKey : void 0, [
+    e.value,
+    e.selectedKey,
+    t
+  ]), [i, v] = Ye(b, d, e.onChange), s = t === "single" && Array.isArray(i) ? i[0] : i, m = (f) => {
+    if (t === "single") {
+      let x = Array.isArray(f) ? f[0] ?? null : f;
+      v(x), x !== s && e.onSelectionChange?.(x);
+    } else {
+      let x = [];
+      Array.isArray(f) ? x = f : f != null && (x = [
+        f
+      ]), v(x);
+    }
+  }, c = Je({
+    ...e,
+    selectionMode: t,
+    disallowEmptySelection: t === "single",
+    allowDuplicateSelectionEvents: !0,
+    selectedKeys: S(() => dt(s), [
+      s
+    ]),
+    onSelectionChange: (f) => {
+      if (f !== "all") {
+        if (t === "single") {
+          let x = f.values().next().value ?? null;
+          m(x);
+        } else m([
+          ...f
+        ]);
+        r && l.close(), p.commitValidation();
+      }
+    }
+  }), $ = c.selectionManager.firstSelectedKey, n = S(() => [
+    ...c.selectionManager.selectedKeys
+  ].map((f) => c.collection.getItem(f)).filter((f) => f != null), [
+    c.selectionManager.selectedKeys,
+    c.collection
+  ]), p = je({
+    ...e,
+    value: Array.isArray(s) && s.length === 0 ? null : s
+  }), [y, R] = B(!1), [C] = B(s);
+  return {
+    ...p,
+    ...c,
+    ...l,
+    value: s,
+    defaultValue: d ?? C,
+    setValue: m,
+    selectedKey: $,
+    setSelectedKey: m,
+    selectedItem: n[0] ?? null,
+    selectedItems: n,
+    defaultSelectedKey: e.defaultSelectedKey ?? (e.selectionMode === "single" ? C : null),
+    focusStrategy: a,
+    open(f = null) {
+      (c.collection.size !== 0 || e.allowsEmptyCollection) && (o(f), l.open());
+    },
+    toggle(f = null) {
+      (c.collection.size !== 0 || e.allowsEmptyCollection) && (o(f), l.toggle());
+    },
+    isFocused: y,
+    setFocused: R
+  };
+}
+function dt(e) {
+  if (e !== void 0)
+    return e === null ? [] : Array.isArray(e) ? e : [
+      e
+    ];
+}
+function ft(e) {
+  return e && e.__esModule ? e.default : e;
+}
+const N = /* @__PURE__ */ q(null), L = /* @__PURE__ */ q(null), ut = /* @__PURE__ */ ie(function(t, r) {
+  [t, r] = J(t, r, N);
+  let { children: l, isDisabled: a = !1, isInvalid: o = !1, isRequired: d = !1 } = t, b = S(() => typeof l == "function" ? l({
+    isOpen: !1,
+    isDisabled: a,
+    isInvalid: o,
+    isRequired: d,
+    isFocused: !1,
+    isFocusVisible: !1,
+    defaultChildren: null
+  }) : l, [
+    l,
+    a,
+    o,
+    d
+  ]);
+  return /* @__PURE__ */ g.createElement(ge, {
+    content: b
+  }, (i) => /* @__PURE__ */ g.createElement($t, {
+    props: t,
+    collection: i,
+    selectRef: r
+  }));
+}), bt = [
+  Z,
+  U,
+  T
+];
+function $t({ props: e, selectRef: t, collection: r }) {
+  let { validationBehavior: l } = X(Ve) || {}, a = e.validationBehavior ?? l ?? "native", o = ct({
+    ...e,
+    collection: r,
+    children: void 0,
+    validationBehavior: a
+  }), { isFocusVisible: d, focusProps: b } = Ze({
+    within: !0
+  }), i = w(null), [v, s] = Ie(!e["aria-label"] && !e["aria-labelledby"]), { labelProps: m, triggerProps: c, valueProps: $, menuProps: n, descriptionProps: p, errorMessageProps: y, hiddenSelectProps: R, ...C } = it({
+    ...we(e),
+    label: s,
+    validationBehavior: a
+  }, o, i), [f, x] = B(null), V = W(() => {
+    i.current && x(i.current.offsetWidth + "px");
+  }, [
+    i
+  ]);
+  Qe({
+    ref: i,
+    onResize: V
+  });
+  let O = S(() => ({
+    isOpen: o.isOpen,
+    isFocused: o.isFocused,
+    isFocusVisible: d,
+    isDisabled: e.isDisabled || !1,
+    isInvalid: C.isInvalid || !1,
+    isRequired: e.isRequired || !1
+  }), [
+    o.isOpen,
+    o.isFocused,
+    d,
+    e.isDisabled,
+    C.isInvalid,
+    e.isRequired
+  ]), P = Q({
+    ...e,
+    values: O,
+    defaultClassName: "react-aria-Select"
+  }), D = z(e, {
+    global: !0
+  });
+  delete D.id;
+  let h = w(null);
+  return /* @__PURE__ */ g.createElement(Be, {
+    values: [
+      [
+        N,
+        e
+      ],
+      [
+        L,
+        o
+      ],
+      [
+        ee,
+        $
+      ],
+      [
+        Z,
+        {
+          ...m,
+          ref: v,
+          elementType: "span"
+        }
+      ],
+      [
+        U,
+        {
+          ...c,
+          ref: i,
+          isPressed: o.isOpen,
+          autoFocus: e.autoFocus
+        }
+      ],
+      [
+        Fe,
+        o
+      ],
+      [
+        De,
+        {
+          trigger: "Select",
+          triggerRef: i,
+          scrollRef: h,
+          placement: "bottom start",
+          style: {
+            "--trigger-width": f
+          },
+          "aria-labelledby": n["aria-labelledby"],
+          clearContexts: bt
+        }
+      ],
+      [
+        ue,
+        {
+          ...n,
+          ref: h
+        }
+      ],
+      [
+        be,
+        o
+      ],
+      [
+        T,
+        {
+          slots: {
+            description: p,
+            errorMessage: y
+          }
+        }
+      ],
+      [
+        Ee,
+        C
+      ]
+    ]
+  }, /* @__PURE__ */ g.createElement(Y.div, {
+    ...A(D, P, b),
+    ref: t,
+    slot: e.slot || void 0,
+    "data-focused": o.isFocused || void 0,
+    "data-focus-visible": d || void 0,
+    "data-open": o.isOpen || void 0,
+    "data-disabled": e.isDisabled || void 0,
+    "data-invalid": C.isInvalid || void 0,
+    "data-required": e.isRequired || void 0
+  }, P.children, /* @__PURE__ */ g.createElement(st, {
+    ...R,
+    autoComplete: e.autoComplete
+  })));
+}
+const ee = /* @__PURE__ */ q(null), mt = /* @__PURE__ */ Ue(function(t, r) {
+  [t, r] = J(t, r, ee);
+  let l = j(L), { placeholder: a } = X(N), o = l.selectedItems.map((n) => {
+    let p = n.props?.children;
+    return typeof p == "function" && (p = p({
+      isHovered: !1,
+      isPressed: !1,
+      isSelected: !1,
+      isFocused: !1,
+      isFocusVisible: !1,
+      isDisabled: !1,
+      selectionMode: "single",
+      selectionBehavior: "toggle"
+    })), p;
+  }), d = ot(), b = S(() => l.selectedItems.map((n) => n?.textValue), [
+    l.selectedItems
+  ]), i = l.selectionManager.selectionMode, v = S(() => i === "single" ? b[0] ?? "" : d.format(b), [
+    i,
+    d,
+    b
+  ]), s = S(() => {
+    if (i === "single") return o[0];
+    let n = d.formatToParts(b);
+    if (n.length === 0) return null;
+    let p = 0;
+    return n.map((y) => y.type === "element" ? /* @__PURE__ */ g.createElement(ne, {
+      key: p
+    }, o[p++]) : y.value);
+  }, [
+    i,
+    d,
+    b,
+    o
+  ]), m = tt(ft(Oe), "react-aria-components"), c = Q({
+    ...t,
+    defaultChildren: s ?? a ?? m.format("selectPlaceholder"),
+    defaultClassName: "react-aria-SelectValue",
+    values: {
+      selectedItem: l.selectedItems[0]?.value ?? null,
+      selectedItems: S(() => l.selectedItems.map((n) => n.value ?? null), [
+        l.selectedItems
+      ]),
+      selectedText: v,
+      isPlaceholder: l.selectedItems.length === 0,
+      state: l
+    }
+  }), $ = z(t, {
+    global: !0
+  });
+  return /* @__PURE__ */ g.createElement(Y.span, {
+    ref: r,
+    ...$,
+    ...c,
+    "data-placeholder": l.selectedItems.length === 0 || void 0
+  }, /* @__PURE__ */ g.createElement(T.Provider, {
+    value: void 0
+  }, c.children));
+}), { withProvider: pt, withContext: F } = /* @__PURE__ */ se({
+  key: "nimbusSelect"
+}), gt = /* @__PURE__ */ pt(
+  "div",
+  "root"
+), yt = /* @__PURE__ */ F("div", "leadingElement"), ht = /* @__PURE__ */ F("button", "trigger"), vt = /* @__PURE__ */ F("span", "triggerLabel"), xt = /* @__PURE__ */ F("div", "options"), St = /* @__PURE__ */ F("div", "option"), Pt = /* @__PURE__ */ F("div", "optionGroup"), Ct = { clearSelection: "Clear selection" }, Rt = { clearSelection: "Auswahl löschen" }, Ft = { clearSelection: "Borrar selección" }, Dt = { clearSelection: "Effacer la sélection" }, Kt = { clearSelection: "Limpar seleção" }, Mt = {
+  en: /* @__PURE__ */ M(Ct),
+  de: /* @__PURE__ */ M(Rt),
+  es: /* @__PURE__ */ M(Ft),
+  "fr-FR": /* @__PURE__ */ M(Dt),
+  "pt-BR": /* @__PURE__ */ M(Kt)
+}, te = ({ isDisabled: e }) => {
+  const t = lt(Mt), r = j(L);
+  if (!r?.selectedKey)
+    return null;
+  const l = () => {
+    r?.setSelectedKey(null);
+  };
+  return /* @__PURE__ */ u(Ke, { children: /* @__PURE__ */ u(
+    at,
+    {
+      slot: null,
+      pointerEvents: e ? "none" : "all",
+      size: "2xs",
+      variant: "ghost",
+      isDisabled: e,
+      "aria-label": t.format("clearSelection"),
+      "aria-labelledby": "",
+      onPress: l,
+      children: /* @__PURE__ */ u(xe, {})
+    }
+  ) });
+};
+te.displayName = "Select.ClearButton";
+const le = function({
+  ref: t,
+  children: r,
+  leadingElement: l,
+  isLoading: a,
+  isDisabled: o,
+  isClearable: d = !0,
+  ...b
+}) {
+  const i = w(null), v = he(ve(i, t)), s = ce({ recipe: rt }), [m, c] = s.splitVariantProps(b), [$, n] = E(c), p = {
+    ...n,
+    isDisabled: a || o
+  };
+  return /* @__PURE__ */ u(gt, { asChild: !0, ref: v, ...m, ...$, children: /* @__PURE__ */ I(ut, { ...p, children: [
+    /* @__PURE__ */ I(H.div, { position: "relative", children: [
+      /* @__PURE__ */ u(ht, { zIndex: 0, asChild: !0, children: /* @__PURE__ */ I(Ce, { children: [
+        l && /* @__PURE__ */ u(yt, { asChild: !0, children: l }),
+        /* @__PURE__ */ u(vt, { asChild: !0, children: /* @__PURE__ */ u(mt, {}) })
+      ] }) }),
+      /* @__PURE__ */ I(
+        k,
+        {
+          position: "absolute",
+          top: "0",
+          bottom: "0",
+          zIndex: 1,
+          right: "400",
+          pointerEvents: "none",
+          children: [
+            d && /* @__PURE__ */ u(k, { width: "600", my: "auto", children: /* @__PURE__ */ u(te, { isDisabled: a || o }) }),
+            /* @__PURE__ */ u(k, { my: "auto", w: "600", h: "600", children: /* @__PURE__ */ u(G, { color: "neutral.9", asChild: !0, m: "auto", w: "400", h: "400", children: a ? /* @__PURE__ */ u(G, { asChild: !0, animation: "spin", animationDuration: "slowest", children: /* @__PURE__ */ u(Se, {}) }) : /* @__PURE__ */ u(Pe, {}) }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ u(Me, { children: r })
+  ] }) });
+};
+le.displayName = "Select.Root";
+const ae = (e) => {
+  const { ref: t, ...r } = e, [l, a] = E(r);
+  return /* @__PURE__ */ u(xt, { asChild: !0, ...l, children: /* @__PURE__ */ u($e, { ref: t, ...a }) });
+};
+ae.displayName = "Select.Options";
+const re = (e) => {
+  const { ref: t, ...r } = e, [l, a] = E(r);
+  return /* @__PURE__ */ u(St, { asChild: !0, ...l, children: /* @__PURE__ */ u(me, { ref: t, ...a }) });
+};
+re.displayName = "Select.Option";
+const oe = (e) => {
+  const { ref: t, label: r, items: l, children: a, ...o } = e, [d, b] = E(o);
+  if (l && typeof a != "function")
+    throw new Error(
+      'SelectOptionGroup: When "items" is provided, "children" must be a function'
+    );
+  return /* @__PURE__ */ u(H.section, { ...d, asChild: !0, children: /* @__PURE__ */ I(pe, { ref: t, ...b, children: [
+    /* @__PURE__ */ u(Pt, { asChild: !0, children: /* @__PURE__ */ u(fe, { children: r }) }),
+    l ? /* @__PURE__ */ u(ye, { items: l, children: (i) => typeof a == "function" ? a(i) : null }) : a
+  ] }) });
+};
+oe.displayName = "Select.OptionGroup";
+const pl = {
+  /**
+   * # Select.Root
+   *
+   * The root component that provides context and state management for the select.
+   * This component must wrap all select parts (Options, Option, etc.) and provides
+   * the select state, variant styling context, and selection management.
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Options placeholder="Choose...">
+   *     <Select.Option id="apple">Apple</Select.Option>
+   *     <Select.Option id="orange">Orange</Select.Option>
+   *   </Select.Options>
+   * </Select.Root>
+   * ```
+   */
+  Root: le,
+  /**
+   * # Select.Options
+   *
+   * The trigger button and dropdown container for select options.
+   * Displays the selected value and opens the options list when activated.
+   *
+   * This component handles the visual presentation of the select, including
+   * the trigger button, selected value display, dropdown icon, and the
+   * popover containing options.
+   *
+   * @example
+   * ```tsx
+   * <Select.Root>
+   *   <Select.Options
+   *     placeholder="Select fruit"
+   *     label="Favorite Fruit"
+   *   >
+   *     <Select.Option id="apple">Apple</Select.Option>
+   *     <Select.Option id="banana">Banana</Select.Option>
+   *   </Select.Options>
+   * </Select.Root>
+   * ```
+   */
+  Options: ae,
+  /**
+   * # Select.Option
+   *
+   * An individual selectable option within the select dropdown.
+   * Represents a single choice that can be selected by the user.
+   *
+   * Options automatically handle selection state, keyboard navigation,
+   * and visual feedback for hover and selection states.
+   *
+   * @example
+   * ```tsx
+   * <Select.Options>
+   *   <Select.Option id="red" textValue="Red">
+   *     🔴 Red
+   *   </Select.Option>
+   *   <Select.Option id="blue" textValue="Blue">
+   *     🔵 Blue
+   *   </Select.Option>
+   * </Select.Options>
+   * ```
+   */
+  Option: re,
+  /**
+   * # Select.OptionGroup
+   *
+   * A container for grouping related options with an optional label.
+   * Provides visual separation and semantic grouping of options.
+   *
+   * Option groups help organize large lists of options into logical
+   * categories with proper accessibility support.
+   *
+   * @example
+   * ```tsx
+   * <Select.Options>
+   *   <Select.OptionGroup label="Fruits">
+   *     <Select.Option id="apple">Apple</Select.Option>
+   *     <Select.Option id="banana">Banana</Select.Option>
+   *   </Select.OptionGroup>
+   *   <Select.OptionGroup label="Vegetables">
+   *     <Select.Option id="carrot">Carrot</Select.Option>
+   *     <Select.Option id="broccoli">Broccoli</Select.Option>
+   *   </Select.OptionGroup>
+   * </Select.Options>
+   * ```
+   */
+  OptionGroup: oe
+};
+export {
+  pl as S
+};
+//# sourceMappingURL=select-6_4th9JF.es.js.map