silver-ui 0.1.0

package/dist/chunk-6NIFOTUZ.cjs

@@ -0,0 +1,439 @@
+'use strict';
+
+var chunkKYDRDJRM_cjs = require('./chunk-KYDRDJRM.cjs');
+var chunkYMC56K6R_cjs = require('./chunk-YMC56K6R.cjs');
+var chunkI6IGTQLG_cjs = require('./chunk-I6IGTQLG.cjs');
+var chunkWSAZHUB3_cjs = require('./chunk-WSAZHUB3.cjs');
+var chunk2WP6NYYY_cjs = require('./chunk-2WP6NYYY.cjs');
+var chunkPHFEQG4E_cjs = require('./chunk-PHFEQG4E.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var styles = {
+  wrapper: chunkAZDWQGAX_cjs.css({
+    cursor: "pointer"
+  }),
+  wrapperDisabled: chunkAZDWQGAX_cjs.css({
+    cursor: "not-allowed"
+  }),
+  trigger: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "2",
+    flex: 1,
+    minW: 0,
+    p: 0,
+    borderWidth: 0,
+    bg: "transparent",
+    color: "inherit",
+    cursor: "pointer",
+    fontFamily: "body",
+    outline: "none",
+    textAlign: "start",
+    _disabled: {
+      cursor: "not-allowed"
+    }
+  }),
+  label: chunkAZDWQGAX_cjs.css({
+    flex: 1,
+    minW: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }),
+  placeholder: chunkAZDWQGAX_cjs.css({
+    color: "fg.muted"
+  }),
+  iconSlot: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
+    color: "fg.muted"
+  }),
+  menu: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5",
+    maxH: "80",
+    overflowY: "auto",
+    p: "1"
+  }),
+  search: chunkAZDWQGAX_cjs.css({
+    boxSizing: "border-box",
+    w: "full",
+    px: "2",
+    py: "1",
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "border.emphasized",
+    borderRadius: "md",
+    fontFamily: "body",
+    outline: "none",
+    _focus: {
+      borderColor: "primary"
+    }
+  }),
+  option: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "2",
+    w: "full",
+    px: "2",
+    py: "2",
+    borderWidth: 0,
+    borderRadius: "md",
+    bg: "transparent",
+    color: "fg",
+    cursor: "pointer",
+    fontFamily: "body",
+    textAlign: "start",
+    _hover: { bg: "bg.subtle" },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffsetTight"
+    },
+    _disabled: {
+      opacity: 0.5,
+      cursor: "not-allowed"
+    }
+  }),
+  optionSelected: chunkAZDWQGAX_cjs.css({ fontWeight: "medium" }),
+  optionHighlighted: chunkAZDWQGAX_cjs.css({ bg: "bg.subtle" }),
+  optionContent: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "2",
+    minW: 0
+  }),
+  check: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    color: "primary"
+  }),
+  sectionHeading: chunkAZDWQGAX_cjs.css({
+    px: "2",
+    py: "1",
+    color: "fg.muted",
+    fontFamily: "body",
+    fontSize: "sm",
+    fontWeight: "semibold"
+  }),
+  divider: chunkAZDWQGAX_cjs.css({
+    h: "1px",
+    bg: "border",
+    my: "1"
+  })
+};
+function Select({
+  className,
+  "data-testid": dataTestId,
+  description,
+  hasClear = false,
+  hasSearch = false,
+  isDisabled = false,
+  isLabelHidden = false,
+  isLoading = false,
+  isOptional,
+  isRequired,
+  label,
+  labelIcon,
+  labelTooltip,
+  onChange,
+  options,
+  placeholder = "Select...",
+  ref,
+  renderOption: renderOptionProp,
+  searchPlaceholder = "Search...",
+  size = "md",
+  startIcon,
+  status,
+  style,
+  value
+}) {
+  const selectedValues = react.useMemo(
+    () => value == null ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([value]),
+    [value]
+  );
+  const commitOption = react.useCallback(
+    (option) => {
+      if (option.isDisabled) {
+        return false;
+      }
+      onChange(option.value);
+      return true;
+    },
+    [onChange]
+  );
+  const {
+    activeDescendantId,
+    describedBy,
+    descriptionID,
+    filteredValues,
+    getOptionId,
+    handleKeyboardNavigation,
+    handleOptionClick,
+    handleOptionMouseEnter,
+    highlightedValue,
+    inputId,
+    isInteractionDisabled,
+    isOpen,
+    listboxId,
+    query,
+    selectableOptions,
+    setHighlightedValue,
+    setIsOpen,
+    setQuery,
+    statusMessageID,
+    triggerRef
+  } = chunkKYDRDJRM_cjs.useSelectListbox({
+    clearQueryOnCommit: true,
+    closeOnCommit: true,
+    description,
+    isDisabled,
+    isLoading,
+    onCommitOption: commitOption,
+    options,
+    selectedValues,
+    status
+  });
+  const selectedOption = react.useMemo(
+    () => selectableOptions.find((option) => option.value === value),
+    [selectableOptions, value]
+  );
+  const renderOption = react.useCallback(
+    (option) => {
+      if (!filteredValues.has(option.value)) {
+        return null;
+      }
+      const isSelected = option.value === value;
+      const isHighlighted = option.value === highlightedValue;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          "aria-selected": isSelected,
+          className: chunkSPDVNY2Z_cjs.cx(
+            styles.option,
+            isSelected ? styles.optionSelected : void 0,
+            isHighlighted ? styles.optionHighlighted : void 0
+          ),
+          "data-value": option.value,
+          disabled: option.isDisabled,
+          id: getOptionId(option.value),
+          onClick: handleOptionClick,
+          onMouseEnter: handleOptionMouseEnter,
+          role: "option",
+          tabIndex: isHighlighted ? 0 : -1,
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.optionContent, children: renderOptionProp == null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              option.icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
+              option.label
+            ] }) : renderOptionProp(option) }),
+            isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.check, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "accent", icon: lucideReact.Check, size: "sm" }) }) : null
+          ]
+        },
+        option.value
+      );
+    },
+    [
+      filteredValues,
+      getOptionId,
+      handleOptionClick,
+      handleOptionMouseEnter,
+      highlightedValue,
+      renderOptionProp,
+      value
+    ]
+  );
+  const optionNodes = chunkKYDRDJRM_cjs.renderSelectListboxOptions({
+    dividerClassName: styles.divider,
+    inputId,
+    options,
+    renderOption,
+    sectionHeadingClassName: styles.sectionHeading
+  });
+  const menu = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "aria-activedescendant": activeDescendantId,
+        "aria-autocomplete": "list",
+        "aria-controls": listboxId,
+        "aria-label": `Search ${label}`,
+        className: styles.search,
+        onChange: (event) => {
+          setQuery(event.target.value);
+          setHighlightedValue(null);
+        },
+        onKeyDown: handleKeyboardNavigation,
+        placeholder: searchPlaceholder,
+        type: "search",
+        value: query
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-label": `${label} options`,
+        className: styles.menu,
+        id: listboxId,
+        role: "listbox",
+        children: optionNodes
+      }
+    )
+  ] });
+  const necessity = { isOptional, isRequired };
+  const trigger = (
+    // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events, jsx-a11y-x/no-static-element-interactions -- mouse clicks anywhere on the visual input delegate to the inner combobox button; keyboard handling stays on that button.
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkSPDVNY2Z_cjs.cx(
+          chunkI6IGTQLG_cjs.inputRecipe({
+            size,
+            status: status?.type,
+            isDisabled
+          }),
+          styles.wrapper,
+          isInteractionDisabled ? styles.wrapperDisabled : void 0
+        ),
+        onClick: () => {
+          if (!isInteractionDisabled) {
+            setIsOpen((currentIsOpen) => !currentIsOpen);
+          }
+        },
+        ref: triggerRef,
+        children: [
+          startIcon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              "aria-activedescendant": activeDescendantId,
+              "aria-busy": isLoading || void 0,
+              "aria-controls": listboxId,
+              "aria-describedby": describedBy,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-invalid": status?.type === "error" || void 0,
+              className: styles.trigger,
+              "data-testid": dataTestId,
+              disabled: isInteractionDisabled,
+              id: inputId,
+              onKeyDown: handleKeyboardNavigation,
+              ref,
+              role: "combobox",
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: chunkSPDVNY2Z_cjs.cx(
+                    styles.label,
+                    selectedOption == null ? styles.placeholder : void 0
+                  ),
+                  children: selectedOption?.label ?? placeholder
+                }
+              )
+            }
+          ),
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(chunk2WP6NYYY_cjs.Spinner, { size: "sm" }) : null,
+          hasClear && selectedOption != null && !isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              "aria-label": `Clear ${label}`,
+              className: chunkI6IGTQLG_cjs.inputStyles.clearButton,
+              onClick: (event) => {
+                event.stopPropagation();
+                onChange(null);
+              },
+              type: "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.X, size: "sm" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { icon: lucideReact.ChevronDown, size: "sm" }) })
+        ]
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    chunkI6IGTQLG_cjs.Field,
+    {
+      className,
+      description,
+      descriptionID,
+      inputId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      status: status == null ? void 0 : { ...status, messageID: statusMessageID },
+      style,
+      children: [
+        trigger,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkWSAZHUB3_cjs.Popover,
+          {
+            anchorRef: triggerRef,
+            content: menu,
+            hasAutoFocus: hasSearch,
+            hasCloseButton: false,
+            isEnabled: false,
+            isOpen,
+            onOpenChange: setIsOpen
+          }
+        )
+      ]
+    }
+  );
+}
+Select.displayName = "Select";
+var styles2 = {
+  root: chunkAZDWQGAX_cjs.css({
+    display: "flex",
+    minW: 0,
+    p: 0
+  }),
+  icon: chunkAZDWQGAX_cjs.css({
+    display: "inline-flex",
+    flexShrink: 0,
+    color: "fg.muted"
+  })
+};
+function SelectOption({
+  className,
+  "data-testid": dataTestId,
+  description,
+  endContent,
+  icon,
+  label,
+  ref,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkYMC56K6R_cjs.Item,
+    {
+      as: "span",
+      className: chunkSPDVNY2Z_cjs.cx(styles2.root, className),
+      "data-testid": dataTestId,
+      description,
+      endContent,
+      label,
+      ref,
+      startContent: icon != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles2.icon, children: /* @__PURE__ */ jsxRuntime.jsx(chunkPHFEQG4E_cjs.Icon, { color: "secondary", icon, size: "sm" }) }) : null,
+      style
+    }
+  );
+}
+SelectOption.displayName = "SelectOption";
+
+exports.Select = Select;
+exports.SelectOption = SelectOption;
+//# sourceMappingURL=chunk-6NIFOTUZ.cjs.map
+//# sourceMappingURL=chunk-6NIFOTUZ.cjs.map

package/dist/chunk-6NIFOTUZ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/Select.tsx","../src/components/Select/SelectOption.tsx"],"names":["css","useMemo","useCallback","useSelectListbox","jsxs","cx","jsx","Fragment","Icon","Check","renderSelectListboxOptions","inputRecipe","Spinner","inputStyles","X","ChevronDown","Field","Popover","styles","Item"],"mappings":";;;;;;;;;;;;;;AA6KA,IAAM,MAAA,GAAS;AAAA,EACb,SAASA,qBAAA,CAAI;AAAA,IACX,MAAA,EAAQ;AAAA,GACT,CAAA;AAAA,EACD,iBAAiBA,qBAAA,CAAI;AAAA,IACnB,MAAA,EAAQ;AAAA,GACT,CAAA;AAAA,EACD,SAASA,qBAAA,CAAI;AAAA,IACX,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,eAAA;AAAA,IAChB,GAAA,EAAK,GAAA;AAAA,IACL,IAAA,EAAM,CAAA;AAAA,IACN,IAAA,EAAM,CAAA;AAAA,IACN,CAAA,EAAG,CAAA;AAAA,IACH,WAAA,EAAa,CAAA;AAAA,IACb,EAAA,EAAI,aAAA;AAAA,IACJ,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQ,SAAA;AAAA,IACR,UAAA,EAAY,MAAA;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,SAAA,EAAW,OAAA;AAAA,IACX,SAAA,EAAW;AAAA,MACT,MAAA,EAAQ;AAAA;AACV,GACD,CAAA;AAAA,EACD,OAAOA,qBAAA,CAAI;AAAA,IACT,IAAA,EAAM,CAAA;AAAA,IACN,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,UAAA;AAAA,IACd,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,aAAaA,qBAAA,CAAI;AAAA,IACf,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,UAAUA,qBAAA,CAAI;AAAA,IACZ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,UAAA,EAAY,CAAA;AAAA,IACZ,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,MAAMA,qBAAA,CAAI;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,GAAA,EAAK,KAAA;AAAA,IACL,IAAA,EAAM,IAAA;AAAA,IACN,SAAA,EAAW,MAAA;AAAA,IACX,CAAA,EAAG;AAAA,GACJ,CAAA;AAAA,EACD,QAAQA,qBAAA,CAAI;AAAA,IACV,SAAA,EAAW,YAAA;AAAA,IACX,CAAA,EAAG,MAAA;AAAA,IACH,EAAA,EAAI,GAAA;AAAA,IACJ,EAAA,EAAI,GAAA;AAAA,IACJ,WAAA,EAAa,SAAA;AAAA,IACb,WAAA,EAAa,OAAA;AAAA,IACb,WAAA,EAAa,mBAAA;AAAA,IACb,YAAA,EAAc,IAAA;AAAA,IACd,UAAA,EAAY,MAAA;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,MAAA,EAAQ;AAAA,MACN,WAAA,EAAa;AAAA;AACf,GACD,CAAA;AAAA,EACD,QAAQA,qBAAA,CAAI;AAAA,IACV,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,eAAA;AAAA,IAChB,GAAA,EAAK,GAAA;AAAA,IACL,CAAA,EAAG,MAAA;AAAA,IACH,EAAA,EAAI,GAAA;AAAA,IACJ,EAAA,EAAI,GAAA;AAAA,IACJ,WAAA,EAAa,CAAA;AAAA,IACb,YAAA,EAAc,IAAA;AAAA,IACd,EAAA,EAAI,aAAA;AAAA,IACJ,KAAA,EAAO,IAAA;AAAA,IACP,MAAA,EAAQ,SAAA;AAAA,IACR,UAAA,EAAY,MAAA;AAAA,IACZ,SAAA,EAAW,OAAA;AAAA,IACX,MAAA,EAAQ,EAAC,EAAA,EAAI,WAAA,EAAW;AAAA,IACxB,aAAA,EAAe;AAAA,MACb,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,SAAA;AAAA,MACd,aAAA,EAAe;AAAA,KACjB;AAAA,IACA,SAAA,EAAW;AAAA,MACT,OAAA,EAAS,GAAA;AAAA,MACT,MAAA,EAAQ;AAAA;AACV,GACD,CAAA;AAAA,EACD,cAAA,EAAgBA,qBAAA,CAAI,EAAC,UAAA,EAAY,UAAS,CAAA;AAAA,EAC1C,iBAAA,EAAmBA,qBAAA,CAAI,EAAC,EAAA,EAAI,aAAY,CAAA;AAAA,EACxC,eAAeA,qBAAA,CAAI;AAAA,IACjB,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,GAAA;AAAA,IACL,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,OAAOA,qBAAA,CAAI;AAAA,IACT,OAAA,EAAS,aAAA;AAAA,IACT,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,gBAAgBA,qBAAA,CAAI;AAAA,IAClB,EAAA,EAAI,GAAA;AAAA,IACJ,EAAA,EAAI,GAAA;AAAA,IACJ,KAAA,EAAO,UAAA;AAAA,IACP,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,SAASA,qBAAA,CAAI;AAAA,IACX,CAAA,EAAG,KAAA;AAAA,IACH,EAAA,EAAI,QAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACL;AACH,CAAA;AAKO,SAAS,MAAA,CAAO;AAAA,EACrB,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,aAAA,GAAgB,KAAA;AAAA,EAChB,SAAA,GAAY,KAAA;AAAA,EACZ,UAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA,GAAc,WAAA;AAAA,EACd,GAAA;AAAA,EACA,YAAA,EAAc,gBAAA;AAAA,EACd,iBAAA,GAAoB,WAAA;AAAA,EACpB,IAAA,GAAO,IAAA;AAAA,EACP,SAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,cAAA,GAAiBC,aAAA;AAAA,IACrB,MAAO,KAAA,IAAS,IAAA,mBAAO,IAAI,GAAA,qBAAgB,IAAI,GAAA,CAAI,CAAC,KAAK,CAAC,CAAA;AAAA,IAC1D,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAAC,MAAA,KAAsC;AACrC,MAAA,IAAI,OAAO,UAAA,EAAY;AACrB,QAAA,OAAO,KAAA;AAAA,MACT;AAEA,MAAA,QAAA,CAAS,OAAO,KAAK,CAAA;AACrB,MAAA,OAAO,IAAA;AAAA,IACT,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM;AAAA,IACJ,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA,sBAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,iBAAA;AAAA,IACA,mBAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACEC,kCAAA,CAAiB;AAAA,IACnB,kBAAA,EAAoB,IAAA;AAAA,IACpB,aAAA,EAAe,IAAA;AAAA,IACf,WAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA,EAAgB,YAAA;AAAA,IAChB,OAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,cAAA,GAAiBF,aAAA;AAAA,IACrB,MAAM,iBAAA,CAAkB,IAAA,CAAK,CAAA,MAAA,KAAU,MAAA,CAAO,UAAU,KAAK,CAAA;AAAA,IAC7D,CAAC,mBAAmB,KAAK;AAAA,GAC3B;AAEA,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAAC,MAAA,KAAwC;AACvC,MAAA,IAAI,CAAC,cAAA,CAAe,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA,EAAG;AACrC,QAAA,OAAO,IAAA;AAAA,MACT;AACA,MAAA,MAAM,UAAA,GAAa,OAAO,KAAA,KAAU,KAAA;AACpC,MAAA,MAAM,aAAA,GAAgB,OAAO,KAAA,KAAU,gBAAA;AACvC,MAAA,uBACEE,eAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,eAAA,EAAe,UAAA;AAAA,UACf,SAAA,EAAWC,oBAAA;AAAA,YACT,MAAA,CAAO,MAAA;AAAA,YACP,UAAA,GAAa,OAAO,cAAA,GAAiB,MAAA;AAAA,YACrC,aAAA,GAAgB,OAAO,iBAAA,GAAoB;AAAA,WAC7C;AAAA,UACA,cAAY,MAAA,CAAO,KAAA;AAAA,UACnB,UAAU,MAAA,CAAO,UAAA;AAAA,UACjB,EAAA,EAAI,WAAA,CAAY,MAAA,CAAO,KAAK,CAAA;AAAA,UAE5B,OAAA,EAAS,iBAAA;AAAA,UACT,YAAA,EAAc,sBAAA;AAAA,UACd,IAAA,EAAK,QAAA;AAAA,UACL,QAAA,EAAU,gBAAgB,CAAA,GAAI,EAAA;AAAA,UAC9B,IAAA,EAAK,QAAA;AAAA,UACL,QAAA,EAAA;AAAA,4BAAAC,cAAA,CAAC,UAAK,SAAA,EAAW,MAAA,CAAO,aAAA,EACrB,QAAA,EAAA,gBAAA,IAAoB,uBACnBF,eAAA,CAAAG,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,cAAA,MAAA,CAAO,QAAQ,IAAA,mBACdD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,QAAA,EACtB,QAAA,kBAAAA,cAAA,CAACE,sBAAA,EAAA,EAAK,KAAA,EAAM,aAAY,IAAA,EAAM,MAAA,CAAO,MAAM,IAAA,EAAK,IAAA,EAAK,GACvD,CAAA,GACE,IAAA;AAAA,cACH,MAAA,CAAO;AAAA,aAAA,EACV,CAAA,GAEA,gBAAA,CAAiB,MAAM,CAAA,EAE3B,CAAA;AAAA,YACC,UAAA,mBACCF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,KAAA,EACtB,QAAA,kBAAAA,cAAA,CAACE,sBAAA,EAAA,EAAK,KAAA,EAAM,UAAS,IAAA,EAAMC,iBAAA,EAAO,IAAA,EAAK,IAAA,EAAK,GAC9C,CAAA,GACE;AAAA;AAAA,SAAA;AAAA,QAxBC,MAAA,CAAO;AAAA,OAyBd;AAAA,IAEJ,CAAA;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,cAAcC,4CAAA,CAA2B;AAAA,IAC7C,kBAAkB,MAAA,CAAO,OAAA;AAAA,IACzB,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,yBAAyB,MAAA,CAAO;AAAA,GACjC,CAAA;AAED,EAAA,MAAM,uBACJN,eAAA,CAAAG,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,SAAA,mBACCD,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,uBAAA,EAAuB,kBAAA;AAAA,QACvB,mBAAA,EAAkB,MAAA;AAAA,QAClB,eAAA,EAAe,SAAA;AAAA,QACf,YAAA,EAAY,UAAU,KAAK,CAAA,CAAA;AAAA,QAC3B,WAAW,MAAA,CAAO,MAAA;AAAA,QAClB,UAAU,CAAA,KAAA,KAAS;AACjB,UAAA,QAAA,CAAS,KAAA,CAAM,OAAO,KAAK,CAAA;AAC3B,UAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,QAC1B,CAAA;AAAA,QACA,SAAA,EAAW,wBAAA;AAAA,QACX,WAAA,EAAa,iBAAA;AAAA,QACb,IAAA,EAAK,QAAA;AAAA,QACL,KAAA,EAAO;AAAA;AAAA,KACT,GACE,IAAA;AAAA,oBACJA,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,GAAG,KAAK,CAAA,QAAA,CAAA;AAAA,QACpB,WAAW,MAAA,CAAO,IAAA;AAAA,QAClB,EAAA,EAAI,SAAA;AAAA,QACJ,IAAA,EAAK,SAAA;AAAA,QACJ,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAGF,EAAA,MAAM,SAAA,GAA4B,EAAC,UAAA,EAAY,UAAA,EAAU;AAEzD,EAAA,MAAM,OAAA;AAAA;AAAA,oBAEJF,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,oBAAA;AAAA,UACTM,6BAAA,CAAY;AAAA,YACV,IAAA;AAAA,YACA,QAAQ,MAAA,EAAQ,IAAA;AAAA,YAChB;AAAA,WACD,CAAA;AAAA,UACD,MAAA,CAAO,OAAA;AAAA,UACP,qBAAA,GAAwB,OAAO,eAAA,GAAkB;AAAA,SACnD;AAAA,QACA,SAAS,MAAM;AACb,UAAA,IAAI,CAAC,qBAAA,EAAuB;AAC1B,YAAA,SAAA,CAAU,CAAA,aAAA,KAAiB,CAAC,aAAa,CAAA;AAAA,UAC3C;AAAA,QACF,CAAA;AAAA,QACA,GAAA,EAAK,UAAA;AAAA,QACJ,QAAA,EAAA;AAAA,UAAA,SAAA,IAAa,IAAA,mBACZL,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAO,QAAA,EACtB,QAAA,kBAAAA,cAAA,CAACE,sBAAA,EAAA,EAAK,KAAA,EAAM,aAAY,IAAA,EAAM,SAAA,EAAW,IAAA,EAAK,IAAA,EAAK,GACrD,CAAA,GACE,IAAA;AAAA,0BACJF,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,uBAAA,EAAuB,kBAAA;AAAA,cACvB,aAAW,SAAA,IAAa,MAAA;AAAA,cACxB,eAAA,EAAe,SAAA;AAAA,cACf,kBAAA,EAAkB,WAAA;AAAA,cAClB,eAAA,EAAe,MAAA;AAAA,cACf,eAAA,EAAc,SAAA;AAAA,cACd,cAAA,EAAc,MAAA,EAAQ,IAAA,KAAS,OAAA,IAAW,MAAA;AAAA,cAC1C,WAAW,MAAA,CAAO,OAAA;AAAA,cAClB,aAAA,EAAa,UAAA;AAAA,cACb,QAAA,EAAU,qBAAA;AAAA,cACV,EAAA,EAAI,OAAA;AAAA,cACJ,SAAA,EAAW,wBAAA;AAAA,cACX,GAAA;AAAA,cACA,IAAA,EAAK,UAAA;AAAA,cACL,IAAA,EAAK,QAAA;AAAA,cACL,QAAA,kBAAAA,cAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAWD,oBAAA;AAAA,oBACT,MAAA,CAAO,KAAA;AAAA,oBACP,cAAA,IAAkB,IAAA,GAAO,MAAA,CAAO,WAAA,GAAc;AAAA,mBAChD;AAAA,kBACC,0BAAgB,KAAA,IAAS;AAAA;AAAA;AAC5B;AAAA,WACF;AAAA,UACC,SAAA,mBAAYC,cAAA,CAACM,yBAAA,EAAA,EAAQ,IAAA,EAAK,MAAK,CAAA,GAAK,IAAA;AAAA,UACpC,QAAA,IAAY,cAAA,IAAkB,IAAA,IAAQ,CAAC,UAAA,mBACtCN,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAY,SAAS,KAAK,CAAA,CAAA;AAAA,cAC1B,WAAWO,6BAAA,CAAY,WAAA;AAAA,cACvB,SAAS,CAAA,KAAA,KAAS;AAChB,gBAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,gBAAA,QAAA,CAAS,IAAI,CAAA;AAAA,cACf,CAAA;AAAA,cACA,IAAA,EAAK,QAAA;AAAA,cACL,QAAA,kBAAAP,cAAA,CAACE,sBAAA,EAAA,EAAK,IAAA,EAAMM,aAAA,EAAG,MAAK,IAAA,EAAK;AAAA;AAAA,WAC3B,GACE,IAAA;AAAA,0BACJR,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,QAAA,EACtB,QAAA,kBAAAA,cAAA,CAACE,sBAAA,EAAA,EAAK,IAAA,EAAMO,uBAAA,EAAa,IAAA,EAAK,IAAA,EAAK,CAAA,EACrC;AAAA;AAAA;AAAA;AACF,GAAA;AAGF,EAAA,uBACEX,eAAA;AAAA,IAACY,uBAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,KAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA,EACE,UAAU,IAAA,GAAO,MAAA,GAAY,EAAC,GAAG,MAAA,EAAQ,WAAW,eAAA,EAAe;AAAA,MAErE,KAAA;AAAA,MACC,QAAA,EAAA;AAAA,QAAA,OAAA;AAAA,wBACDV,cAAA;AAAA,UAACW,yBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,YACX,OAAA,EAAS,IAAA;AAAA,YACT,YAAA,EAAc,SAAA;AAAA,YACd,cAAA,EAAgB,KAAA;AAAA,YAChB,SAAA,EAAW,KAAA;AAAA,YACX,MAAA;AAAA,YACA,YAAA,EAAc;AAAA;AAAA;AAChB;AAAA;AAAA,GACF;AAEJ;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;AC/gBrB,IAAMC,OAAAA,GAAS;AAAA,EACb,MAAMlB,qBAAA,CAAI;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,IAAA,EAAM,CAAA;AAAA,IACN,CAAA,EAAG;AAAA,GACJ,CAAA;AAAA,EACD,MAAMA,qBAAA,CAAI;AAAA,IACR,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,CAAA;AAAA,IACZ,KAAA,EAAO;AAAA,GACR;AACH,CAAA;AAKO,SAAS,YAAA,CAAa;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA,EAAyC;AACvC,EAAA,uBACEM,cAAAA;AAAA,IAACa,sBAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,MAAA;AAAA,MACH,SAAA,EAAWd,oBAAA,CAAGa,OAAAA,CAAO,IAAA,EAAM,SAAS,CAAA;AAAA,MACpC,aAAA,EAAa,UAAA;AAAA,MACb,WAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,cACE,IAAA,IAAQ,IAAA,mBACNZ,cAAAA,CAAC,MAAA,EAAA,EAAK,WAAWY,OAAAA,CAAO,IAAA,EACtB,QAAA,kBAAAZ,cAAAA,CAACE,0BAAK,KAAA,EAAM,WAAA,EAAY,MAAY,IAAA,EAAK,IAAA,EAAK,GAChD,CAAA,GACE,IAAA;AAAA,MAEN;AAAA;AAAA,GACF;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-6NIFOTUZ.cjs","sourcesContent":["import {Check, ChevronDown, X} from 'lucide-react';\nimport {\n  useCallback,\n  useMemo,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {\n  renderSelectListboxOptions,\n  useSelectListbox,\n  type SelectListboxOptionData,\n} from '../../internal/useSelectListbox';\nimport {\n  Field,\n  inputRecipe,\n  inputStyles,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Popover} from '../Popover';\nimport {Spinner} from '../Spinner';\n\nexport interface SelectOptionData extends SelectListboxOptionData {\n  /**\n   * Icon displayed before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Whether the option is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Option label. Defaults to `value`.\n   */\n  label?: string;\n  /**\n   * Option value.\n   */\n  value: string;\n}\n\nexport interface SelectDivider {\n  /**\n   * Discriminator identifying a divider entry.\n   */\n  type: 'divider';\n}\n\nexport interface SelectSection {\n  /**\n   * Options within this section.\n   */\n  options: ReadonlyArray<SelectOptionData>;\n  /**\n   * Optional heading text for the section.\n   */\n  title?: string;\n  /**\n   * Discriminator identifying a section entry.\n   */\n  type: 'section';\n}\n\nexport type SelectOptionDefinition =\n  | SelectDivider\n  | SelectOptionData\n  | SelectSection\n  | string;\n\nexport type SelectProps = {\n  /**\n   * Additional CSS class names applied to the trigger wrapper.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the combobox button.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether to show a clear button when a value is selected.\n   * @default false\n   */\n  hasClear?: boolean;\n  /**\n   * Whether to show search input in the dropdown.\n   * @default false\n   */\n  hasSearch?: boolean;\n  /**\n   * Whether the selector is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the selector is loading.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Called when selection changes.\n   */\n  onChange: (value: string | null) => void;\n  /**\n   * Options to display.\n   */\n  options: ReadonlyArray<SelectOptionDefinition>;\n  /**\n   * Placeholder shown when no option is selected.\n   * @default 'Select...'\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the combobox button.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Custom render function for selectable options.\n   */\n  renderOption?: (option: SelectOptionData) => ReactNode;\n  /**\n   * Search input placeholder.\n   * @default 'Search...'\n   */\n  searchPlaceholder?: string;\n  /**\n   * Select size.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Start icon rendered in the trigger.\n   */\n  startIcon?: IconComponent;\n  /**\n   * Validation status displayed below the selector.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the trigger wrapper.\n   */\n  style?: CSSProperties;\n  /**\n   * Selected option value.\n   */\n  value: string | null;\n} & FieldNecessity;\n\nconst styles = {\n  wrapper: css({\n    cursor: 'pointer',\n  }),\n  wrapperDisabled: css({\n    cursor: 'not-allowed',\n  }),\n  trigger: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '2',\n    flex: 1,\n    minW: 0,\n    p: 0,\n    borderWidth: 0,\n    bg: 'transparent',\n    color: 'inherit',\n    cursor: 'pointer',\n    fontFamily: 'body',\n    outline: 'none',\n    textAlign: 'start',\n    _disabled: {\n      cursor: 'not-allowed',\n    },\n  }),\n  label: css({\n    flex: 1,\n    minW: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  placeholder: css({\n    color: 'fg.muted',\n  }),\n  iconSlot: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    flexShrink: 0,\n    color: 'fg.muted',\n  }),\n  menu: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '0.5',\n    maxH: '80',\n    overflowY: 'auto',\n    p: '1',\n  }),\n  search: css({\n    boxSizing: 'border-box',\n    w: 'full',\n    px: '2',\n    py: '1',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border.emphasized',\n    borderRadius: 'md',\n    fontFamily: 'body',\n    outline: 'none',\n    _focus: {\n      borderColor: 'primary',\n    },\n  }),\n  option: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '2',\n    w: 'full',\n    px: '2',\n    py: '2',\n    borderWidth: 0,\n    borderRadius: 'md',\n    bg: 'transparent',\n    color: 'fg',\n    cursor: 'pointer',\n    fontFamily: 'body',\n    textAlign: 'start',\n    _hover: {bg: 'bg.subtle'},\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffsetTight',\n    },\n    _disabled: {\n      opacity: 0.5,\n      cursor: 'not-allowed',\n    },\n  }),\n  optionSelected: css({fontWeight: 'medium'}),\n  optionHighlighted: css({bg: 'bg.subtle'}),\n  optionContent: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '2',\n    minW: 0,\n  }),\n  check: css({\n    display: 'inline-flex',\n    color: 'primary',\n  }),\n  sectionHeading: css({\n    px: '2',\n    py: '1',\n    color: 'fg.muted',\n    fontFamily: 'body',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n  }),\n  divider: css({\n    h: '1px',\n    bg: 'border',\n    my: '1',\n  }),\n} as const;\n\n/**\n * Single-select dropdown field.\n */\nexport function Select({\n  className,\n  'data-testid': dataTestId,\n  description,\n  hasClear = false,\n  hasSearch = false,\n  isDisabled = false,\n  isLabelHidden = false,\n  isLoading = false,\n  isOptional,\n  isRequired,\n  label,\n  labelIcon,\n  labelTooltip,\n  onChange,\n  options,\n  placeholder = 'Select...',\n  ref,\n  renderOption: renderOptionProp,\n  searchPlaceholder = 'Search...',\n  size = 'md',\n  startIcon,\n  status,\n  style,\n  value,\n}: SelectProps): React.JSX.Element {\n  const selectedValues = useMemo(\n    () => (value == null ? new Set<string>() : new Set([value])),\n    [value],\n  );\n\n  const commitOption = useCallback(\n    (option: SelectOptionData): boolean => {\n      if (option.isDisabled) {\n        return false;\n      }\n\n      onChange(option.value);\n      return true;\n    },\n    [onChange],\n  );\n\n  const {\n    activeDescendantId,\n    describedBy,\n    descriptionID,\n    filteredValues,\n    getOptionId,\n    handleKeyboardNavigation,\n    handleOptionClick,\n    handleOptionMouseEnter,\n    highlightedValue,\n    inputId,\n    isInteractionDisabled,\n    isOpen,\n    listboxId,\n    query,\n    selectableOptions,\n    setHighlightedValue,\n    setIsOpen,\n    setQuery,\n    statusMessageID,\n    triggerRef,\n  } = useSelectListbox({\n    clearQueryOnCommit: true,\n    closeOnCommit: true,\n    description,\n    isDisabled,\n    isLoading,\n    onCommitOption: commitOption,\n    options,\n    selectedValues,\n    status,\n  });\n\n  const selectedOption = useMemo(\n    () => selectableOptions.find(option => option.value === value),\n    [selectableOptions, value],\n  );\n\n  const renderOption = useCallback(\n    (option: SelectOptionData): ReactNode => {\n      if (!filteredValues.has(option.value)) {\n        return null;\n      }\n      const isSelected = option.value === value;\n      const isHighlighted = option.value === highlightedValue;\n      return (\n        <button\n          aria-selected={isSelected}\n          className={cx(\n            styles.option,\n            isSelected ? styles.optionSelected : undefined,\n            isHighlighted ? styles.optionHighlighted : undefined,\n          )}\n          data-value={option.value}\n          disabled={option.isDisabled}\n          id={getOptionId(option.value)}\n          key={option.value}\n          onClick={handleOptionClick}\n          onMouseEnter={handleOptionMouseEnter}\n          role=\"option\"\n          tabIndex={isHighlighted ? 0 : -1}\n          type=\"button\">\n          <span className={styles.optionContent}>\n            {renderOptionProp == null ? (\n              <>\n                {option.icon != null ? (\n                  <span className={styles.iconSlot}>\n                    <Icon color=\"secondary\" icon={option.icon} size=\"sm\" />\n                  </span>\n                ) : null}\n                {option.label}\n              </>\n            ) : (\n              renderOptionProp(option)\n            )}\n          </span>\n          {isSelected ? (\n            <span className={styles.check}>\n              <Icon color=\"accent\" icon={Check} size=\"sm\" />\n            </span>\n          ) : null}\n        </button>\n      );\n    },\n    [\n      filteredValues,\n      getOptionId,\n      handleOptionClick,\n      handleOptionMouseEnter,\n      highlightedValue,\n      renderOptionProp,\n      value,\n    ],\n  );\n\n  const optionNodes = renderSelectListboxOptions({\n    dividerClassName: styles.divider,\n    inputId,\n    options,\n    renderOption,\n    sectionHeadingClassName: styles.sectionHeading,\n  });\n\n  const menu = (\n    <>\n      {hasSearch ? (\n        <input\n          aria-activedescendant={activeDescendantId}\n          aria-autocomplete=\"list\"\n          aria-controls={listboxId}\n          aria-label={`Search ${label}`}\n          className={styles.search}\n          onChange={event => {\n            setQuery(event.target.value);\n            setHighlightedValue(null);\n          }}\n          onKeyDown={handleKeyboardNavigation}\n          placeholder={searchPlaceholder}\n          type=\"search\"\n          value={query}\n        />\n      ) : null}\n      <div\n        aria-label={`${label} options`}\n        className={styles.menu}\n        id={listboxId}\n        role=\"listbox\">\n        {optionNodes}\n      </div>\n    </>\n  );\n\n  const necessity: FieldNecessity = {isOptional, isRequired};\n\n  const trigger = (\n    // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events, jsx-a11y-x/no-static-element-interactions -- mouse clicks anywhere on the visual input delegate to the inner combobox button; keyboard handling stays on that button.\n    <div\n      className={cx(\n        inputRecipe({\n          size,\n          status: status?.type,\n          isDisabled,\n        }),\n        styles.wrapper,\n        isInteractionDisabled ? styles.wrapperDisabled : undefined,\n      )}\n      onClick={() => {\n        if (!isInteractionDisabled) {\n          setIsOpen(currentIsOpen => !currentIsOpen);\n        }\n      }}\n      ref={triggerRef}>\n      {startIcon != null ? (\n        <span className={styles.iconSlot}>\n          <Icon color=\"secondary\" icon={startIcon} size=\"sm\" />\n        </span>\n      ) : null}\n      <button\n        aria-activedescendant={activeDescendantId}\n        aria-busy={isLoading || undefined}\n        aria-controls={listboxId}\n        aria-describedby={describedBy}\n        aria-expanded={isOpen}\n        aria-haspopup=\"listbox\"\n        aria-invalid={status?.type === 'error' || undefined}\n        className={styles.trigger}\n        data-testid={dataTestId}\n        disabled={isInteractionDisabled}\n        id={inputId}\n        onKeyDown={handleKeyboardNavigation}\n        ref={ref}\n        role=\"combobox\"\n        type=\"button\">\n        <span\n          className={cx(\n            styles.label,\n            selectedOption == null ? styles.placeholder : undefined,\n          )}>\n          {selectedOption?.label ?? placeholder}\n        </span>\n      </button>\n      {isLoading ? <Spinner size=\"sm\" /> : null}\n      {hasClear && selectedOption != null && !isDisabled ? (\n        <button\n          aria-label={`Clear ${label}`}\n          className={inputStyles.clearButton}\n          onClick={event => {\n            event.stopPropagation();\n            onChange(null);\n          }}\n          type=\"button\">\n          <Icon icon={X} size=\"sm\" />\n        </button>\n      ) : null}\n      <span className={styles.iconSlot}>\n        <Icon icon={ChevronDown} size=\"sm\" />\n      </span>\n    </div>\n  );\n\n  return (\n    <Field\n      className={className}\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }\n      style={style}>\n      {trigger}\n      <Popover\n        anchorRef={triggerRef}\n        content={menu}\n        hasAutoFocus={hasSearch}\n        hasCloseButton={false}\n        isEnabled={false}\n        isOpen={isOpen}\n        onOpenChange={setIsOpen}\n      />\n    </Field>\n  );\n}\n\nSelect.displayName = 'Select';\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Item} from '../Item';\n\nexport interface SelectOptionProps {\n  /**\n   * Additional CSS class names applied to the option layout.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the option layout.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text displayed below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Trailing content.\n   */\n  endContent?: ReactNode;\n  /**\n   * Icon displayed before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Primary label.\n   */\n  label: ReactNode;\n  /**\n   * Ref forwarded to the layout root.\n   */\n  ref?: Ref<HTMLSpanElement>;\n  /**\n   * Inline styles applied to the layout root.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  root: css({\n    display: 'flex',\n    minW: 0,\n    p: 0,\n  }),\n  icon: css({\n    display: 'inline-flex',\n    flexShrink: 0,\n    color: 'fg.muted',\n  }),\n} as const;\n\n/**\n * Helper layout for custom Select option rendering.\n */\nexport function SelectOption({\n  className,\n  'data-testid': dataTestId,\n  description,\n  endContent,\n  icon,\n  label,\n  ref,\n  style,\n}: SelectOptionProps): React.JSX.Element {\n  return (\n    <Item\n      as=\"span\"\n      className={cx(styles.root, className)}\n      data-testid={dataTestId}\n      description={description}\n      endContent={endContent}\n      label={label}\n      ref={ref}\n      startContent={\n        icon != null ? (\n          <span className={styles.icon}>\n            <Icon color=\"secondary\" icon={icon} size=\"sm\" />\n          </span>\n        ) : null\n      }\n      style={style}\n    />\n  );\n}\n\nSelectOption.displayName = 'SelectOption';\n"]}

package/dist/chunk-6SHL7FYO.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+// src/internal/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    const cleanups = [];
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        const cleanup = ref(value);
+        if (typeof cleanup === "function") {
+          cleanups.push(cleanup);
+        }
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    }
+    if (cleanups.length > 0) {
+      return () => {
+        for (const cleanup of cleanups) {
+          cleanup();
+        }
+      };
+    }
+  };
+}
+
+exports.mergeRefs = mergeRefs;
+//# sourceMappingURL=chunk-6SHL7FYO.cjs.map
+//# sourceMappingURL=chunk-6SHL7FYO.cjs.map

package/dist/chunk-6SHL7FYO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/mergeRefs.ts"],"names":[],"mappings":";;;AAEO,SAAS,aAAgB,IAAA,EAA8C;AAC5E,EAAA,OAAO,CAAC,KAAA,KAAoB;AAC1B,IAAA,MAAM,WAA2B,EAAC;AAClC,IAAA,KAAA,MAAW,OAAO,IAAA,EAAM;AACtB,MAAA,IAAI,OAAO,QAAQ,UAAA,EAAY;AAC7B,QAAA,MAAM,OAAA,GAAU,IAAI,KAAK,CAAA;AACzB,QAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,UAAA,QAAA,CAAS,KAAK,OAAO,CAAA;AAAA,QACvB;AAAA,MACF,CAAA,MAAA,IAAW,OAAO,IAAA,EAAM;AACtB,QAAC,IAA4B,OAAA,GAAU,KAAA;AAAA,MACzC;AAAA,IACF;AACA,IAAA,IAAI,QAAA,CAAS,SAAS,CAAA,EAAG;AACvB,MAAA,OAAO,MAAM;AACX,QAAA,KAAA,MAAW,WAAW,QAAA,EAAU;AAC9B,UAAA,OAAA,EAAQ;AAAA,QACV;AAAA,MACF,CAAA;AAAA,IACF;AAAA,EACF,CAAA;AACF","file":"chunk-6SHL7FYO.cjs","sourcesContent":["import type {Ref, RefCallback} from 'react';\n\nexport function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> {\n  return (value: T | null) => {\n    const cleanups: (() => void)[] = [];\n    for (const ref of refs) {\n      if (typeof ref === 'function') {\n        const cleanup = ref(value);\n        if (typeof cleanup === 'function') {\n          cleanups.push(cleanup);\n        }\n      } else if (ref != null) {\n        (ref as {current: T | null}).current = value;\n      }\n    }\n    if (cleanups.length > 0) {\n      return () => {\n        for (const cleanup of cleanups) {\n          cleanup();\n        }\n      };\n    }\n  };\n}\n"]}