@commercetools/nimbus 2.0.1 → 2.1.0

package/dist/chunks/select-DG6qOekv.es.js

@@ -0,0 +1,770 @@
+import { jsx as $, jsxs as B } from "react/jsx-runtime";
+import S, { useMemo as R, useRef as E, useCallback as X, useState as O, forwardRef as se, createContext as N, useContext as J, Fragment as de } from "react";
+import { e as k } from "./extract-style-props-DChosa6I.es.js";
+import { useSlotRecipe as ce, chakra as Q } from "@chakra-ui/react/styled-system";
+import { c as ue, d as fe } from "./Header-Bvo6aMcQ.es.js";
+import { $ as $e, a as be, b as me, c as pe, d as ve } from "./ListBox-C8TVMFFY.es.js";
+import { g as ye, c as ge } from "./CollectionBuilder-ZlIN4SR4.es.js";
+import { createSlotRecipeContext as he, mergeRefs as xe } from "@chakra-ui/react";
+import { Close as Pe, Loop as Se, KeyboardArrowDown as Ce } from "@commercetools/nimbus-icons";
+import { $ as Y, a as Re } from "./Button-BjcDZ5eb.es.js";
+import { q as De, e as Ie, i as Fe, r as Me, $ as Ke } from "./Dialog-DUbUCf4o.es.js";
+import { $ as Z, c as _, a as ee, b as Ve, f as Be, e as Ee } from "./utils-B6pV5ewr.es.js";
+import { $ as we } from "./FieldError-CXcEMuBf.es.js";
+import { $ as Oe } from "./Form-CXcEMuBf.es.js";
+import { $ as ke } from "./intlStrings-Cd44R5hT.es.js";
+import { $ as te } from "./Label-DIseLESi.es.js";
+import { $ as G } from "./Text-DOcU1ycg.es.js";
+import { $ as qe } from "./Hidden-X9vuhkMZ.es.js";
+import { $ as z, a as Ae, e as Te } from "./mergeProps-Dsl8k3Ig.es.js";
+import { $ as L } from "./filterDOMProps-BSVCO5jK.es.js";
+import { $ as ze, c as Ne } from "./OverlayArrow-BIjbCSXk.es.js";
+import { $ as Ge } from "./context-DW7UvQ8z.es.js";
+import { $ as Le } from "./useLocalizedStringFormatter-DaRRUvyV.es.js";
+import { a as je, $ as We } from "./useFormValidation-BCVLtR0U.es.js";
+import { $ as He } from "./useListState-BHLGQlP3.es.js";
+import { $ as Ue } from "./useControlledState-u436Wbp1.es.js";
+import { $ as Xe } from "./useFocusRing-FPt2Rwil.es.js";
+import { j as Je } from "./SelectionManager-bgcDT3lR.es.js";
+import { c as Qe } from "./useFocusVisible-B3HmFL2Q.es.js";
+import { $ as Ye } from "./useCollator-BjnMaGJd.es.js";
+import { $ as Ze } from "./useField-CHrpmkxe.es.js";
+import { $ as _e } from "./useFormReset-BGuIA_u2.es.js";
+import { a as et } from "./VisuallyHidden-BLRzeMsq.es.js";
+import { defineMessages as tt, useIntl as lt } from "react-intl";
+import { I as at } from "./icon-button-DgL7XNUZ.es.js";
+import { l as rt } from "./index-BEgCT-l6.es.js";
+import { $ as ot } from "./useObjectRef-CaJ5pgjX.es.js";
+import { Flex as T } from "@chakra-ui/react/flex";
+import { B as U } from "./box-DuBoAZvq.es.js";
+function it(e = {}) {
+  let { locale: t } = Ge();
+  return R(() => new Intl.ListFormat(t, e), [
+    t,
+    e
+  ]);
+}
+const j = /* @__PURE__ */ new WeakMap();
+function nt(e, t, a) {
+  let { keyboardDelegate: o, isDisabled: l, isRequired: b, name: m, form: r, validationBehavior: s = "aria" } = e, u = Ye({
+    usage: "search",
+    sensitivity: "base"
+  }), i = R(() => o || new ue(t.collection, t.disabledKeys, a, u), [
+    o,
+    t.collection,
+    t.disabledKeys,
+    u,
+    a
+  ]), { menuTriggerProps: d, menuProps: p } = De({
+    isDisabled: l,
+    type: "listbox"
+  }, t, a), v = (y) => {
+    if (t.selectionManager.selectionMode !== "multiple")
+      switch (y.key) {
+        case "ArrowLeft": {
+          var F, M;
+          y.preventDefault();
+          let V = t.selectedKey != null ? (F = i.getKeyAbove) === null || F === void 0 ? void 0 : F.call(i, t.selectedKey) : (M = i.getFirstKey) === null || M === void 0 ? void 0 : M.call(i);
+          V && t.setSelectedKey(V);
+          break;
+        }
+        case "ArrowRight": {
+          var q, A;
+          y.preventDefault();
+          let V = t.selectedKey != null ? (q = i.getKeyBelow) === null || q === void 0 ? void 0 : q.call(i, t.selectedKey) : (A = i.getFirstKey) === null || A === void 0 ? void 0 : A.call(i);
+          V && t.setSelectedKey(V);
+          break;
+        }
+      }
+  }, { typeSelectProps: c } = Je({
+    keyboardDelegate: i,
+    selectionManager: t.selectionManager,
+    onTypeSelect(y) {
+      t.setSelectedKey(y);
+    }
+  }), { isInvalid: x, validationErrors: C, validationDetails: f } = t.displayValidation, { labelProps: g, fieldProps: P, descriptionProps: n, errorMessageProps: D } = Ze({
+    ...e,
+    labelElementType: "span",
+    isInvalid: x,
+    errorMessage: e.errorMessage || C
+  });
+  c.onKeyDown = c.onKeyDownCapture, delete c.onKeyDownCapture, t.selectionManager.selectionMode === "multiple" && (c = {});
+  let I = L(e, {
+    labelable: !0
+  }), h = z(c, d, P), w = Ae();
+  return j.set(t, {
+    isDisabled: l,
+    isRequired: b,
+    name: m,
+    form: r,
+    validationBehavior: s
+  }), {
+    labelProps: {
+      ...g,
+      onClick: () => {
+        if (!e.isDisabled) {
+          var y;
+          (y = a.current) === null || y === void 0 || y.focus(), Qe("keyboard");
+        }
+      }
+    },
+    triggerProps: z(I, {
+      ...h,
+      isDisabled: l,
+      onKeyDown: Te(h.onKeyDown, v, e.onKeyDown),
+      onKeyUp: e.onKeyUp,
+      "aria-labelledby": [
+        w,
+        h["aria-labelledby"],
+        h["aria-label"] && !h["aria-labelledby"] ? h.id : null
+      ].filter(Boolean).join(" "),
+      onFocus(y) {
+        t.isFocused || (e.onFocus && e.onFocus(y), e.onFocusChange && e.onFocusChange(!0), t.setFocused(!0));
+      },
+      onBlur(y) {
+        t.isOpen || (e.onBlur && e.onBlur(y), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      }
+    }),
+    valueProps: {
+      id: w
+    },
+    menuProps: {
+      ...p,
+      autoFocus: t.focusStrategy || !0,
+      shouldSelectOnPressUp: !0,
+      shouldFocusOnHover: !0,
+      disallowEmptySelection: !0,
+      linkBehavior: "selection",
+      onBlur: (y) => {
+        y.currentTarget.contains(y.relatedTarget) || (e.onBlur && e.onBlur(y), e.onFocusChange && e.onFocusChange(!1), t.setFocused(!1));
+      },
+      "aria-labelledby": [
+        P["aria-labelledby"],
+        h["aria-label"] && !P["aria-labelledby"] ? h.id : null
+      ].filter(Boolean).join(" ")
+    },
+    descriptionProps: n,
+    errorMessageProps: D,
+    isInvalid: x,
+    validationErrors: C,
+    validationDetails: f,
+    hiddenSelectProps: {
+      isDisabled: l,
+      name: m,
+      label: e.label,
+      state: t,
+      triggerRef: a,
+      form: r
+    }
+  };
+}
+function st(e, t, a) {
+  let o = j.get(t) || {}, { autoComplete: l, name: b = o.name, form: m = o.form, isDisabled: r = o.isDisabled } = e, { validationBehavior: s, isRequired: u } = o, { visuallyHiddenProps: i } = et({
+    style: {
+      // Prevent page scrolling.
+      position: "fixed",
+      top: 0,
+      left: 0
+    }
+  });
+  _e(e.selectRef, t.defaultValue, t.setValue), je({
+    validationBehavior: s,
+    focus: () => {
+      var c;
+      return (c = a.current) === null || c === void 0 ? void 0 : c.focus();
+    }
+  }, t, e.selectRef);
+  let d = t.setValue, p = X((c) => {
+    c.target.multiple ? d(Array.from(c.target.selectedOptions, (x) => x.value)) : d(c.currentTarget.value);
+  }, [
+    d
+  ]);
+  var v;
+  return {
+    containerProps: {
+      ...i,
+      "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: l,
+      disabled: r,
+      multiple: t.selectionManager.selectionMode === "multiple",
+      required: s === "native" && u,
+      name: b,
+      form: m,
+      value: (v = t.value) !== null && v !== void 0 ? v : "",
+      onChange: p,
+      onInput: p
+    }
+  };
+}
+function dt(e) {
+  let { state: t, triggerRef: a, label: o, name: l, form: b, isDisabled: m } = e, r = E(null), s = E(null), { containerProps: u, selectProps: i } = st({
+    ...e,
+    selectRef: t.collection.size <= 300 ? r : s
+  }, t, a);
+  if (t.collection.size <= 300) return /* @__PURE__ */ S.createElement("div", {
+    ...u,
+    "data-testid": "hidden-select-container"
+  }, /* @__PURE__ */ S.createElement("label", null, o, /* @__PURE__ */ S.createElement("select", {
+    ...i,
+    ref: r
+  }, /* @__PURE__ */ S.createElement("option", null), [
+    ...t.collection.getKeys()
+  ].map((d) => {
+    let p = t.collection.getItem(d);
+    if (p && p.type === "item") return /* @__PURE__ */ S.createElement("option", {
+      key: p.key,
+      value: p.key
+    }, p.textValue);
+  }))));
+  if (l) {
+    let d = j.get(t) || {}, { validationBehavior: p } = d, v = Array.isArray(t.value) ? t.value : [
+      t.value
+    ];
+    v.length === 0 && (v = [
+      null
+    ]);
+    let c = v.map((x, C) => {
+      let f = {
+        type: "hidden",
+        autoComplete: i.autoComplete,
+        name: l,
+        form: b,
+        disabled: m,
+        value: x ?? ""
+      };
+      return p === "native" ? /* @__PURE__ */ S.createElement("input", {
+        key: C,
+        ...f,
+        ref: C === 0 ? s : null,
+        style: {
+          display: "none"
+        },
+        type: "text",
+        required: C === 0 ? i.required : !1,
+        onChange: () => {
+        }
+      }) : /* @__PURE__ */ S.createElement("input", {
+        key: C,
+        ...f,
+        ref: C === 0 ? s : null
+      });
+    });
+    return /* @__PURE__ */ S.createElement(S.Fragment, null, c);
+  }
+  return null;
+}
+function ct(e) {
+  let { selectionMode: t = "single" } = e, a = ze(e), [o, l] = O(null), b = R(() => {
+    var n;
+    return e.defaultValue !== void 0 ? e.defaultValue : t === "single" ? (n = e.defaultSelectedKey) !== null && n !== void 0 ? n : null : [];
+  }, [
+    e.defaultValue,
+    e.defaultSelectedKey,
+    t
+  ]), m = R(() => e.value !== void 0 ? e.value : t === "single" ? e.selectedKey : void 0, [
+    e.value,
+    e.selectedKey,
+    t
+  ]), [r, s] = Ue(m, b, e.onChange), u = t === "single" && Array.isArray(r) ? r[0] : r, i = (n) => {
+    if (t === "single") {
+      var D, I;
+      let h = Array.isArray(n) ? (I = n[0]) !== null && I !== void 0 ? I : null : n;
+      s(h), h !== u && ((D = e.onSelectionChange) === null || D === void 0 || D.call(e, h));
+    } else {
+      let h = [];
+      Array.isArray(n) ? h = n : n != null && (h = [
+        n
+      ]), s(h);
+    }
+  }, d = He({
+    ...e,
+    selectionMode: t,
+    disallowEmptySelection: t === "single",
+    allowDuplicateSelectionEvents: !0,
+    selectedKeys: R(() => ut(u), [
+      u
+    ]),
+    onSelectionChange: (n) => {
+      if (n !== "all") {
+        if (t === "single") {
+          var D;
+          let I = (D = n.values().next().value) !== null && D !== void 0 ? D : null;
+          i(I), a.close();
+        } else i([
+          ...n
+        ]);
+        c.commitValidation();
+      }
+    }
+  }), p = d.selectionManager.firstSelectedKey, v = R(() => [
+    ...d.selectionManager.selectedKeys
+  ].map((n) => d.collection.getItem(n)).filter((n) => n != null), [
+    d.selectionManager.selectedKeys,
+    d.collection
+  ]), c = We({
+    ...e,
+    value: Array.isArray(u) && u.length === 0 ? null : u
+  }), [x, C] = O(!1), [f] = O(u);
+  var g, P;
+  return {
+    ...c,
+    ...d,
+    ...a,
+    value: u,
+    defaultValue: b ?? f,
+    setValue: i,
+    selectedKey: p,
+    setSelectedKey: i,
+    selectedItem: (g = v[0]) !== null && g !== void 0 ? g : null,
+    selectedItems: v,
+    defaultSelectedKey: (P = e.defaultSelectedKey) !== null && P !== void 0 ? P : e.selectionMode === "single" ? f : null,
+    focusStrategy: o,
+    open(n = null) {
+      d.collection.size !== 0 && (l(n), a.open());
+    },
+    toggle(n = null) {
+      d.collection.size !== 0 && (l(n), a.toggle());
+    },
+    isFocused: x,
+    setFocused: C
+  };
+}
+function ut(e) {
+  if (e !== void 0)
+    return e === null ? [] : Array.isArray(e) ? e : [
+      e
+    ];
+}
+function ft(e) {
+  return e && e.__esModule ? e.default : e;
+}
+const W = /* @__PURE__ */ N(null), H = /* @__PURE__ */ N(null), $t = /* @__PURE__ */ se(function(t, a) {
+  [t, a] = Z(t, a, W);
+  let { children: o, isDisabled: l = !1, isInvalid: b = !1, isRequired: m = !1 } = t, r = R(() => typeof o == "function" ? o({
+    isOpen: !1,
+    isDisabled: l,
+    isInvalid: b,
+    isRequired: m,
+    isFocused: !1,
+    isFocusVisible: !1,
+    defaultChildren: null
+  }) : o, [
+    o,
+    l,
+    b,
+    m
+  ]);
+  return /* @__PURE__ */ S.createElement(ye, {
+    content: r
+  }, (s) => /* @__PURE__ */ S.createElement(mt, {
+    props: t,
+    collection: s,
+    selectRef: a
+  }));
+}), bt = [
+  te,
+  Y,
+  G
+];
+function mt({ props: e, selectRef: t, collection: a }) {
+  let { validationBehavior: o } = _(Oe) || {};
+  var l, b;
+  let m = (b = (l = e.validationBehavior) !== null && l !== void 0 ? l : o) !== null && b !== void 0 ? b : "native", r = ct({
+    ...e,
+    collection: a,
+    children: void 0,
+    validationBehavior: m
+  }), { isFocusVisible: s, focusProps: u } = Xe({
+    within: !0
+  }), i = E(null), [d, p] = Ve(!e["aria-label"] && !e["aria-labelledby"]), { labelProps: v, triggerProps: c, valueProps: x, menuProps: C, descriptionProps: f, errorMessageProps: g, hiddenSelectProps: P, ...n } = nt({
+    ...Be(e),
+    label: p,
+    validationBehavior: m
+  }, r, i), [D, I] = O(null), h = X(() => {
+    i.current && I(i.current.offsetWidth + "px");
+  }, [
+    i
+  ]);
+  Ne({
+    ref: i,
+    onResize: h
+  });
+  let w = R(() => ({
+    isOpen: r.isOpen,
+    isFocused: r.isFocused,
+    isFocusVisible: s,
+    isDisabled: e.isDisabled || !1,
+    isInvalid: n.isInvalid || !1,
+    isRequired: e.isRequired || !1
+  }), [
+    r.isOpen,
+    r.isFocused,
+    s,
+    e.isDisabled,
+    n.isInvalid,
+    e.isRequired
+  ]), y = ee({
+    ...e,
+    values: w,
+    defaultClassName: "react-aria-Select"
+  }), F = L(e, {
+    global: !0
+  });
+  delete F.id;
+  let M = E(null);
+  return /* @__PURE__ */ S.createElement(Ee, {
+    values: [
+      [
+        W,
+        e
+      ],
+      [
+        H,
+        r
+      ],
+      [
+        le,
+        x
+      ],
+      [
+        te,
+        {
+          ...v,
+          ref: d,
+          elementType: "span"
+        }
+      ],
+      [
+        Y,
+        {
+          ...c,
+          ref: i,
+          isPressed: r.isOpen,
+          autoFocus: e.autoFocus
+        }
+      ],
+      [
+        Ie,
+        r
+      ],
+      [
+        Fe,
+        {
+          trigger: "Select",
+          triggerRef: i,
+          scrollRef: M,
+          placement: "bottom start",
+          style: {
+            "--trigger-width": D
+          },
+          "aria-labelledby": C["aria-labelledby"],
+          clearContexts: bt
+        }
+      ],
+      [
+        $e,
+        {
+          ...C,
+          ref: M
+        }
+      ],
+      [
+        be,
+        r
+      ],
+      [
+        G,
+        {
+          slots: {
+            description: f,
+            errorMessage: g
+          }
+        }
+      ],
+      [
+        we,
+        n
+      ]
+    ]
+  }, /* @__PURE__ */ S.createElement("div", {
+    ...z(F, y, u),
+    ref: t,
+    slot: e.slot || void 0,
+    "data-focused": r.isFocused || void 0,
+    "data-focus-visible": s || void 0,
+    "data-open": r.isOpen || void 0,
+    "data-disabled": e.isDisabled || void 0,
+    "data-invalid": n.isInvalid || void 0,
+    "data-required": e.isRequired || void 0
+  }, y.children, /* @__PURE__ */ S.createElement(dt, {
+    ...P,
+    autoComplete: e.autoComplete
+  })));
+}
+const le = /* @__PURE__ */ N(null), pt = /* @__PURE__ */ qe(function(t, a) {
+  var o;
+  [t, a] = Z(t, a, le);
+  let l = J(H), { placeholder: b } = _(W), m = l.selectedItems.map((f) => {
+    var g;
+    let P = (g = f.props) === null || g === void 0 ? void 0 : g.children;
+    return typeof P == "function" && (P = P({
+      isHovered: !1,
+      isPressed: !1,
+      isSelected: !1,
+      isFocused: !1,
+      isFocusVisible: !1,
+      isDisabled: !1,
+      selectionMode: "single",
+      selectionBehavior: "toggle"
+    })), P;
+  }), r = it(), s = R(() => l.selectedItems.map((f) => f?.textValue), [
+    l.selectedItems
+  ]), u = l.selectionManager.selectionMode, i = R(() => {
+    var f;
+    return u === "single" ? (f = s[0]) !== null && f !== void 0 ? f : "" : r.format(s);
+  }, [
+    u,
+    r,
+    s
+  ]), d = R(() => {
+    if (u === "single") return m[0];
+    let f = r.formatToParts(s);
+    if (f.length === 0) return null;
+    let g = 0;
+    return f.map((P) => P.type === "element" ? /* @__PURE__ */ S.createElement(de, {
+      key: g
+    }, m[g++]) : P.value);
+  }, [
+    u,
+    r,
+    s,
+    m
+  ]), p = Le(ft(ke), "react-aria-components");
+  var v, c;
+  let x = ee({
+    ...t,
+    defaultChildren: (v = d ?? b) !== null && v !== void 0 ? v : p.format("selectPlaceholder"),
+    defaultClassName: "react-aria-SelectValue",
+    values: {
+      selectedItem: (c = (o = l.selectedItems[0]) === null || o === void 0 ? void 0 : o.value) !== null && c !== void 0 ? c : null,
+      selectedItems: R(() => l.selectedItems.map((f) => {
+        var g;
+        return (g = f.value) !== null && g !== void 0 ? g : null;
+      }), [
+        l.selectedItems
+      ]),
+      selectedText: i,
+      isPlaceholder: l.selectedItems.length === 0,
+      state: l
+    }
+  }), C = L(t, {
+    global: !0
+  });
+  return /* @__PURE__ */ S.createElement("span", {
+    ref: a,
+    ...C,
+    ...x,
+    "data-placeholder": l.selectedItems.length === 0 || void 0
+  }, /* @__PURE__ */ S.createElement(G.Provider, {
+    value: void 0
+  }, x.children));
+}), { withProvider: vt, withContext: K } = /* @__PURE__ */ he({
+  key: "select"
+}), yt = /* @__PURE__ */ vt(
+  "div",
+  "root"
+), gt = /* @__PURE__ */ K("div", "leadingElement"), ht = /* @__PURE__ */ K("button", "trigger"), xt = /* @__PURE__ */ K("span", "triggerLabel"), Pt = /* @__PURE__ */ K("div", "options"), St = /* @__PURE__ */ K("div", "option"), Ct = /* @__PURE__ */ K("div", "optionGroup"), Rt = /* @__PURE__ */ tt({
+  clearSelection: {
+    id: "Nimbus.Select.clearSelection",
+    description: "aria-label for select clear button",
+    defaultMessage: "Clear selection"
+  }
+}), ae = () => {
+  const e = J(H), t = lt();
+  if (!e?.selectedKey)
+    return null;
+  const a = () => {
+    e?.setSelectedKey(null);
+  };
+  return /* @__PURE__ */ $(Me, { children: /* @__PURE__ */ $(
+    at,
+    {
+      slot: null,
+      pointerEvents: "all",
+      size: "2xs",
+      variant: "ghost",
+      "aria-label": t.formatMessage(Rt.clearSelection),
+      "aria-labelledby": "",
+      onPress: a,
+      children: /* @__PURE__ */ $(Pe, {})
+    }
+  ) });
+};
+ae.displayName = "Select.ClearButton";
+const re = function({
+  ref: t,
+  children: a,
+  leadingElement: o,
+  isLoading: l,
+  isDisabled: b,
+  isClearable: m = !0,
+  ...r
+}) {
+  const s = E(null), u = ot(xe(s, t)), i = ce({ recipe: rt }), [d, p] = i.splitVariantProps(r), [v, c] = k(p), x = {
+    ...c,
+    isDisabled: l || b
+  };
+  return /* @__PURE__ */ $(yt, { asChild: !0, ref: u, ...d, ...v, children: /* @__PURE__ */ B($t, { ...x, children: [
+    /* @__PURE__ */ B(Q.div, { position: "relative", children: [
+      /* @__PURE__ */ $(ht, { zIndex: 0, asChild: !0, children: /* @__PURE__ */ B(Re, { children: [
+        o && /* @__PURE__ */ $(gt, { asChild: !0, children: o }),
+        /* @__PURE__ */ $(xt, { asChild: !0, children: /* @__PURE__ */ $(pt, {}) })
+      ] }) }),
+      /* @__PURE__ */ B(
+        T,
+        {
+          position: "absolute",
+          top: "0",
+          bottom: "0",
+          zIndex: 1,
+          right: "400",
+          pointerEvents: "none",
+          children: [
+            m && /* @__PURE__ */ $(T, { width: "600", my: "auto", children: /* @__PURE__ */ $(ae, {}) }),
+            /* @__PURE__ */ $(T, { my: "auto", w: "600", h: "600", children: /* @__PURE__ */ $(U, { color: "neutral.9", asChild: !0, m: "auto", w: "400", h: "400", children: l ? /* @__PURE__ */ $(U, { asChild: !0, animation: "spin", animationDuration: "slowest", children: /* @__PURE__ */ $(Se, {}) }) : /* @__PURE__ */ $(Ce, {}) }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ $(Ke, { children: a })
+  ] }) });
+};
+re.displayName = "Select.Root";
+const oe = (e) => {
+  const { ref: t, ...a } = e, [o, l] = k(a);
+  return /* @__PURE__ */ $(Pt, { asChild: !0, ...o, children: /* @__PURE__ */ $(me, { ref: t, ...l }) });
+};
+oe.displayName = "Select.Options";
+const ie = (e) => {
+  const { ref: t, ...a } = e, [o, l] = k(a);
+  return /* @__PURE__ */ $(St, { asChild: !0, ...o, children: /* @__PURE__ */ $(pe, { ref: t, ...l }) });
+};
+ie.displayName = "Select.Option";
+const ne = (e) => {
+  const { ref: t, label: a, items: o, children: l, ...b } = e, [m, r] = k(b);
+  if (o && typeof l != "function")
+    throw new Error(
+      'SelectOptionGroup: When "items" is provided, "children" must be a function'
+    );
+  return /* @__PURE__ */ $(Q.section, { ...m, asChild: !0, children: /* @__PURE__ */ B(ve, { ref: t, ...r, children: [
+    /* @__PURE__ */ $(Ct, { asChild: !0, children: /* @__PURE__ */ $(fe, { children: a }) }),
+    o ? /* @__PURE__ */ $(ge, { items: o, children: (s) => typeof l == "function" ? l(s) : null }) : l
+  ] }) });
+};
+ne.displayName = "Select.OptionGroup";
+const ul = {
+  /**
+   * # 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: re,
+  /**
+   * # 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: oe,
+  /**
+   * # 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: ie,
+  /**
+   * # 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: ne
+};
+export {
+  ul as S
+};
+//# sourceMappingURL=select-DG6qOekv.es.js.map