silver-ui 0.3.0 → 0.4.0

package/dist/{chunk-AADUJ6CN.js → chunk-LQIZSE3O.js}

@@ -1,134 +1,180 @@
-import { useSelectListbox, renderSelectListboxOptions } from './chunk-XVRQSTUF.js';
-import { Item } from './chunk-AMG3S252.js';
+import { useSelectListbox, renderSelectListboxOptions } from './chunk-N2TNBDQI.js';
+import { Item } from './chunk-QY6OMQW6.js';
 import { inputRecipe } from './chunk-3M23WX6K.js';
-import { getNecessity, Field } from './chunk-K6CQ45C2.js';
-import { Popover } from './chunk-7FY26X2V.js';
-import { Button } from './chunk-HLN3JQYD.js';
-import { Spinner } from './chunk-S54CKWKV.js';
+import { getNecessity, Field } from './chunk-RLOGQBFD.js';
+import { Popover } from './chunk-ZAX2UJBC.js';
+import { Button } from './chunk-2LABTS4P.js';
+import { Spinner } from './chunk-6ULCJ3XZ.js';
 import { Icon } from './chunk-7T3SWOY7.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { cx } from './chunk-PPNETWIP.js';
-import { css } from './chunk-OD4DHHZH.js';
 import { Check, X, ChevronDown } from 'lucide-react';
 import { useMemo, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var styles = {
-  wrapper: css({
-    cursor: "pointer"
-  }),
-  wrapperDisabled: css({
-    cursor: "not-allowed"
-  }),
-  trigger: 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"
+// src/components/Select/Select.recipe.ts
+var selectMenuRecipe = sva({
+  slots: [
+    "menu",
+    "search",
+    "option",
+    "optionContent",
+    "check",
+    "iconSlot",
+    "sectionHeading",
+    "divider"
+  ],
+  base: {
+    menu: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5",
+      maxH: "80",
+      overflowY: "auto",
+      p: "1"
+    },
+    search: {
+      w: "full",
+      px: "2",
+      py: "1",
+      borderWidth: "default",
+      borderStyle: "solid",
+      borderColor: "border.emphasized",
+      borderRadius: "md",
+      fontFamily: "body",
+      outline: "none",
+      _focus: {
+        borderColor: "primary"
+      }
+    },
+    option: {
+      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"
+      },
+      '&[aria-disabled="true"]': {
+        opacity: 0.5,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      },
+      "&[data-highlighted]": {
+        bg: "bg.subtle"
+      },
+      "&[data-selected]": {
+        fontWeight: "medium"
+      }
+    },
+    optionContent: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "2",
+      minW: 0
+    },
+    check: {
+      display: "inline-flex",
+      color: "primary"
+    },
+    iconSlot: {
+      display: "inline-flex",
+      alignItems: "center",
+      flexShrink: 0,
+      color: "fg.muted"
+    },
+    sectionHeading: {
+      px: "2",
+      py: "1",
+      color: "fg.muted",
+      fontFamily: "body",
+      fontSize: "sm",
+      fontWeight: "semibold"
+    },
+    divider: {
+      h: "1px",
+      bg: "border",
+      my: "1"
     }
-  }),
-  label: css({
-    flex: 1,
-    minW: 0,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }),
-  placeholder: css({
-    color: "fg.muted"
-  }),
-  iconSlot: css({
-    display: "inline-flex",
-    alignItems: "center",
-    flexShrink: 0,
-    color: "fg.muted"
-  }),
-  menu: css({
-    display: "flex",
-    flexDirection: "column",
-    gap: "0.5",
-    maxH: "80",
-    overflowY: "auto",
-    p: "1"
-  }),
-  search: css({
-    w: "full",
-    px: "2",
-    py: "1",
-    borderWidth: "default",
-    borderStyle: "solid",
-    borderColor: "border.emphasized",
-    borderRadius: "md",
-    fontFamily: "body",
-    outline: "none",
-    _focus: {
-      borderColor: "primary"
+  }
+});
+var selectTriggerRecipe = sva({
+  slots: ["wrapper", "trigger", "label"],
+  base: {
+    wrapper: {
+      cursor: "pointer"
+    },
+    trigger: {
+      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: {
+      flex: 1,
+      minW: 0,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
     }
-  }),
-  option: 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"
+  },
+  variants: {
+    isDisabled: {
+      true: { wrapper: { cursor: "not-allowed" } },
+      false: {}
     },
-    _disabled: {
-      opacity: 0.5,
-      cursor: "not-allowed"
+    isPlaceholder: {
+      true: { label: { color: "fg.muted" } },
+      false: {}
     }
-  }),
-  optionSelected: css({ fontWeight: "medium" }),
-  optionHighlighted: css({ bg: "bg.subtle" }),
-  optionContent: css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "2",
-    minW: 0
-  }),
-  check: css({
-    display: "inline-flex",
-    color: "primary"
-  }),
-  sectionHeading: css({
-    px: "2",
-    py: "1",
-    color: "fg.muted",
-    fontFamily: "body",
-    fontSize: "sm",
-    fontWeight: "semibold"
-  }),
-  divider: css({
-    h: "1px",
-    bg: "border",
-    my: "1"
-  })
-};
+  },
+  defaultVariants: {
+    isDisabled: false,
+    isPlaceholder: false
+  }
+});
+var selectOptionItemRecipe = sva({
+  slots: ["root", "icon"],
+  base: {
+    root: {
+      display: "flex",
+      minW: 0,
+      p: 0
+    },
+    icon: {
+      display: "inline-flex",
+      flexShrink: 0,
+      color: "fg.muted"
+    }
+  }
+});
 function Select({
   className,
   "data-testid": dataTestId,
@@ -205,39 +251,38 @@ function Select({
     () => selectableOptions.find((option) => option.value === value),
     [selectableOptions, value]
   );
+  const menuClasses = selectMenuRecipe();
   const renderOption = useCallback(
     (option) => {
       if (!filteredValues.has(option.value)) {
         return null;
       }
-      const isSelected = option.value === value;
-      const isHighlighted = option.value === highlightedValue;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          "aria-selected": isSelected,
-          className: 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__ */ jsx("span", { className: styles.optionContent, children: renderOptionProp == null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              option.icon != null ? /* @__PURE__ */ jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
-              option.label
-            ] }) : renderOptionProp(option) }),
-            isSelected ? /* @__PURE__ */ jsx("span", { className: styles.check, children: /* @__PURE__ */ jsx(Icon, { color: "accent", icon: Check, size: "sm" }) }) : null
-          ]
-        },
-        option.value
+      return (
+        // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events -- keyboard navigation is handled by the combobox input, not individual options
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "aria-disabled": option.isDisabled ?? void 0,
+            "aria-selected": option.value === value || void 0,
+            className: menuClasses.option,
+            "data-highlighted": option.value === highlightedValue ? "" : void 0,
+            "data-selected": option.value === value ? "" : void 0,
+            "data-value": option.value,
+            id: getOptionId(option.value),
+            onClick: option.isDisabled ? void 0 : handleOptionClick,
+            onMouseEnter: handleOptionMouseEnter,
+            role: "option",
+            tabIndex: option.value === highlightedValue ? 0 : -1,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: menuClasses.optionContent, children: renderOptionProp == null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                option.icon != null ? /* @__PURE__ */ jsx("span", { className: menuClasses.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: option.icon, size: "sm" }) }) : null,
+                option.label
+              ] }) : renderOptionProp(option) }),
+              option.value === value ? /* @__PURE__ */ jsx("span", { className: menuClasses.check, children: /* @__PURE__ */ jsx(Icon, { color: "accent", icon: Check, size: "sm" }) }) : null
+            ]
+          },
+          option.value
+        )
       );
     },
     [
@@ -246,16 +291,17 @@ function Select({
       handleOptionClick,
       handleOptionMouseEnter,
       highlightedValue,
+      menuClasses,
       renderOptionProp,
       value
     ]
   );
   const optionNodes = renderSelectListboxOptions({
-    dividerClassName: styles.divider,
+    dividerClassName: menuClasses.divider ?? "",
     inputId,
     options,
     renderOption,
-    sectionHeadingClassName: styles.sectionHeading
+    sectionHeadingClassName: menuClasses.sectionHeading ?? ""
   });
   const menu = /* @__PURE__ */ jsxs(Fragment, { children: [
     hasSearch ? /* @__PURE__ */ jsx(
@@ -265,7 +311,7 @@ function Select({
         "aria-autocomplete": "list",
         "aria-controls": listboxId,
         "aria-label": `Search ${label}`,
-        className: styles.search,
+        className: menuClasses.search,
         onChange: (event) => {
           setQuery(event.target.value);
           setHighlightedValue(null);
@@ -280,7 +326,7 @@ function Select({
       "div",
       {
         "aria-label": `${label} options`,
-        className: styles.menu,
+        className: menuClasses.menu,
         id: listboxId,
         role: "listbox",
         children: optionNodes
@@ -288,6 +334,10 @@ function Select({
     )
   ] });
   const necessity = getNecessity(isOptional, isRequired);
+  const triggerClasses = selectTriggerRecipe({
+    isDisabled: isInteractionDisabled,
+    isPlaceholder: selectedOption == null
+  });
   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__ */ jsxs(
@@ -299,8 +349,7 @@ function Select({
             status: status?.type,
             isDisabled
           }),
-          styles.wrapper,
-          isInteractionDisabled ? styles.wrapperDisabled : void 0
+          triggerClasses.wrapper
         ),
         onClick: () => {
           if (!isInteractionDisabled) {
@@ -309,7 +358,7 @@ function Select({
         },
         ref: triggerRef,
         children: [
-          startIcon != null ? /* @__PURE__ */ jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
+          startIcon != null ? /* @__PURE__ */ jsx("span", { className: menuClasses.iconSlot, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon: startIcon, size: "sm" }) }) : null,
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -320,7 +369,7 @@ function Select({
               "aria-expanded": isOpen,
               "aria-haspopup": "listbox",
               "aria-invalid": status?.type === "error" || void 0,
-              className: styles.trigger,
+              className: triggerClasses.trigger,
               "data-testid": dataTestId,
               disabled: isInteractionDisabled,
               id: inputId,
@@ -328,16 +377,7 @@ function Select({
               ref,
               role: "combobox",
               type: "button",
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cx(
-                    styles.label,
-                    selectedOption == null ? styles.placeholder : void 0
-                  ),
-                  children: selectedOption?.label ?? placeholder
-                }
-              )
+              children: /* @__PURE__ */ jsx("span", { className: triggerClasses.label, children: selectedOption?.label ?? placeholder })
             }
           ),
           isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null,
@@ -355,7 +395,7 @@ function Select({
               variant: "ghost"
             }
           ) : null,
-          /* @__PURE__ */ jsx("span", { className: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" }) })
+          /* @__PURE__ */ jsx("span", { className: menuClasses.iconSlot, children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown, size: "sm" }) })
         ]
       }
     )
@@ -394,18 +434,6 @@ function Select({
   );
 }
 Select.displayName = "Select";
-var styles2 = {
-  root: css({
-    display: "flex",
-    minW: 0,
-    p: 0
-  }),
-  icon: css({
-    display: "inline-flex",
-    flexShrink: 0,
-    color: "fg.muted"
-  })
-};
 function SelectOption({
   className,
   "data-testid": dataTestId,
@@ -416,17 +444,18 @@ function SelectOption({
   ref,
   style
 }) {
+  const classes = selectOptionItemRecipe();
   return /* @__PURE__ */ jsx(
     Item,
     {
       as: "span",
-      className: cx(styles2.root, className),
+      className: cx(classes.root, className),
       "data-testid": dataTestId,
       description,
       endContent,
       label,
       ref,
-      startContent: icon != null ? /* @__PURE__ */ jsx("span", { className: styles2.icon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon, size: "sm" }) }) : null,
+      startContent: icon != null ? /* @__PURE__ */ jsx("span", { className: classes.icon, children: /* @__PURE__ */ jsx(Icon, { color: "secondary", icon, size: "sm" }) }) : null,
       style
     }
   );
@@ -434,5 +463,5 @@ function SelectOption({
 SelectOption.displayName = "SelectOption";
 
 export { Select, SelectOption };
-//# sourceMappingURL=chunk-AADUJ6CN.js.map
-//# sourceMappingURL=chunk-AADUJ6CN.js.map
+//# sourceMappingURL=chunk-LQIZSE3O.js.map
+//# sourceMappingURL=chunk-LQIZSE3O.js.map

package/dist/chunk-LQIZSE3O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Select/Select.recipe.ts","../src/components/Select/Select.tsx","../src/components/Select/SelectOption.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-LQIZSE3O.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const selectMenuRecipe = sva({\n  slots: [\n    'menu',\n    'search',\n    'option',\n    'optionContent',\n    'check',\n    'iconSlot',\n    'sectionHeading',\n    'divider',\n  ],\n  base: {\n    menu: {\n      display: 'flex',\n      flexDirection: 'column',\n      gap: '0.5',\n      maxH: '80',\n      overflowY: 'auto',\n      p: '1',\n    },\n    search: {\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: {\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      '&[aria-disabled=\"true\"]': {\n        opacity: 0.5,\n        cursor: 'not-allowed',\n        pointerEvents: 'none',\n      },\n      '&[data-highlighted]': {\n        bg: 'bg.subtle',\n      },\n      '&[data-selected]': {\n        fontWeight: 'medium',\n      },\n    },\n    optionContent: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '2',\n      minW: 0,\n    },\n    check: {\n      display: 'inline-flex',\n      color: 'primary',\n    },\n    iconSlot: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      flexShrink: 0,\n      color: 'fg.muted',\n    },\n    sectionHeading: {\n      px: '2',\n      py: '1',\n      color: 'fg.muted',\n      fontFamily: 'body',\n      fontSize: 'sm',\n      fontWeight: 'semibold',\n    },\n    divider: {\n      h: '1px',\n      bg: 'border',\n      my: '1',\n    },\n  },\n});\n\nexport type SelectMenuVariants = RecipeVariantProps<typeof selectMenuRecipe>;\n\nexport const selectTriggerRecipe = sva({\n  slots: ['wrapper', 'trigger', 'label'],\n  base: {\n    wrapper: {\n      cursor: 'pointer',\n    },\n    trigger: {\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: {\n      flex: 1,\n      minW: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    },\n  },\n  variants: {\n    isDisabled: {\n      true: {wrapper: {cursor: 'not-allowed'}},\n      false: {},\n    },\n    isPlaceholder: {\n      true: {label: {color: 'fg.muted'}},\n      false: {},\n    },\n  },\n  defaultVariants: {\n    isDisabled: false,\n    isPlaceholder: false,\n  },\n});\n\nexport type SelectTriggerVariants = RecipeVariantProps<\n  typeof selectTriggerRecipe\n>;\n\nexport const selectOptionItemRecipe = sva({\n  slots: ['root', 'icon'],\n  base: {\n    root: {\n      display: 'flex',\n      minW: 0,\n      p: 0,\n    },\n    icon: {\n      display: 'inline-flex',\n      flexShrink: 0,\n      color: 'fg.muted',\n    },\n  },\n});\n\nexport type SelectOptionItemVariants = RecipeVariantProps<\n  typeof selectOptionItemRecipe\n>;\n","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 {cx} from '../../internal/cx';\nimport {\n  renderSelectListboxOptions,\n  useSelectListbox,\n  type SelectListboxOptionData,\n} from '../../internal/useSelectListbox';\nimport {Button} from '../Button';\nimport {\n  Field,\n  getNecessity,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {inputRecipe} from '../Field/inputStyles';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Popover} from '../Popover';\nimport {Spinner} from '../Spinner';\nimport {selectMenuRecipe, selectTriggerRecipe} from './Select.recipe';\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\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 menuClasses = selectMenuRecipe();\n\n  const renderOption = useCallback(\n    (option: SelectOptionData): ReactNode => {\n      if (!filteredValues.has(option.value)) {\n        return null;\n      }\n      return (\n        // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events -- keyboard navigation is handled by the combobox input, not individual options\n        <div\n          aria-disabled={option.isDisabled ?? undefined}\n          aria-selected={option.value === value || undefined}\n          className={menuClasses.option}\n          data-highlighted={option.value === highlightedValue ? '' : undefined}\n          data-selected={option.value === value ? '' : undefined}\n          data-value={option.value}\n          id={getOptionId(option.value)}\n          key={option.value}\n          onClick={option.isDisabled ? undefined : handleOptionClick}\n          onMouseEnter={handleOptionMouseEnter}\n          role=\"option\"\n          tabIndex={option.value === highlightedValue ? 0 : -1}>\n          <span className={menuClasses.optionContent}>\n            {renderOptionProp == null ? (\n              <>\n                {option.icon != null ? (\n                  <span className={menuClasses.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          {option.value === value ? (\n            <span className={menuClasses.check}>\n              <Icon color=\"accent\" icon={Check} size=\"sm\" />\n            </span>\n          ) : null}\n        </div>\n      );\n    },\n    [\n      filteredValues,\n      getOptionId,\n      handleOptionClick,\n      handleOptionMouseEnter,\n      highlightedValue,\n      menuClasses,\n      renderOptionProp,\n      value,\n    ],\n  );\n\n  const optionNodes = renderSelectListboxOptions({\n    dividerClassName: menuClasses.divider ?? '',\n    inputId,\n    options,\n    renderOption,\n    sectionHeadingClassName: menuClasses.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={menuClasses.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={menuClasses.menu}\n        id={listboxId}\n        role=\"listbox\">\n        {optionNodes}\n      </div>\n    </>\n  );\n\n  const necessity = getNecessity(isOptional, isRequired);\n  const triggerClasses = selectTriggerRecipe({\n    isDisabled: isInteractionDisabled,\n    isPlaceholder: selectedOption == null,\n  });\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        triggerClasses.wrapper,\n      )}\n      onClick={() => {\n        if (!isInteractionDisabled) {\n          setIsOpen(currentIsOpen => !currentIsOpen);\n        }\n      }}\n      ref={triggerRef}>\n      {startIcon != null ? (\n        <span className={menuClasses.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={triggerClasses.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 className={triggerClasses.label}>\n          {selectedOption?.label ?? placeholder}\n        </span>\n      </button>\n      {isLoading ? <Spinner size=\"sm\" /> : null}\n      {hasClear && selectedOption != null && !isDisabled ? (\n        <Button\n          icon={X}\n          isIconOnly\n          label={`Clear ${label}`}\n          onClick={event => {\n            event.stopPropagation();\n            onChange(null);\n          }}\n          size=\"sm\"\n          variant=\"ghost\"\n        />\n      ) : null}\n      <span className={menuClasses.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 {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Item} from '../Item';\nimport {selectOptionItemRecipe} from './Select.recipe';\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\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  const classes = selectOptionItemRecipe();\n\n  return (\n    <Item\n      as=\"span\"\n      className={cx(classes.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={classes.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"]}