import { Select as SelectPrimitive } from '@base-ui/react/select'; import * as React from 'react'; import { type FieldProps } from '../_shared/index.js'; interface SelectRootProps extends Omit, 'value' | 'onValueChange' | 'items'> { /** * Optional custom trigger element that opens the select. * When provided, uses base-ui's render prop to prevent nested button hydration errors. * The trigger element will replace the default SelectTrigger entirely. * Note: You are responsible for rendering SelectValue inside your trigger to show the selected value. * * @example * * * * } * > * ... * */ trigger?: React.ReactElement; /** Controlled value. When provided, component is controlled. */ value?: string; /** Initial selected value for uncontrolled mode. */ defaultValue?: string; /** Callback when selected value changes */ onValueChange?: (value: string) => void; /** * Value→label map so Select.Value can display labels instead of raw values. * Auto-extracted from SelectItem children when omitted. */ items?: Record; } export type SelectPopupProps = SelectPrimitive.Popup.Props & Pick & { /** * DOM node to portal the popup into. Falls back to * `usePortalContainerOverride()` (which checks `PortalContainerProvider`), then to * the base-ui default (the document body). Use this to keep the popup * inside a landmark (e.g. `
`) for accessibility tooling that * flags floating content rendered on the document body. */ container?: HTMLElement | null; }; export type SelectGroupProps = SelectPrimitive.Group.Props; export type SelectItemProps = SelectPrimitive.Item.Props; export type SelectGroupLabelProps = SelectPrimitive.GroupLabel.Props; export type SelectScrollDownButtonProps = React.ComponentProps; export type SelectScrollUpButtonProps = React.ComponentProps; export type SelectSeparatorProps = SelectPrimitive.Separator.Props; export type SelectTriggerProps = SelectPrimitive.Trigger.Props & { /** Size variant matching Figma specs */ size?: 'xs' | 'sm' | 'md' | 'lg'; /** Shape variant */ shape?: 'rounded' | 'round'; /** Validation state */ state?: 'default' | 'success' | 'error'; /** Read-only mode renders as static text */ readOnly?: boolean; }; export interface SelectValueProps extends Omit { placeholder?: string; children?: React.ReactNode | ((value: string | null) => React.ReactNode); } export type SelectTriggerIconProps = React.HTMLAttributes; declare const SelectTriggerIcon: React.ForwardRefExoticComponent>; declare function SelectRoot({ trigger, value: controlledValue, defaultValue, onValueChange, items: itemsProp, children, open, defaultOpen, onOpenChange, onOpenChangeComplete, ...props }: SelectRootProps): React.JSX.Element; declare namespace SelectRoot { var displayName: string; } declare const SelectGroup: React.ForwardRefExoticComponent & React.RefAttributes>; declare const SelectValue: React.ForwardRefExoticComponent & React.RefAttributes>; declare const SelectTrigger: React.ForwardRefExoticComponent & React.RefAttributes>; declare const SelectPopup: React.ForwardRefExoticComponent & React.RefAttributes>; declare const SelectGroupLabel: React.ForwardRefExoticComponent & React.RefAttributes>; declare const SelectItem: React.ForwardRefExoticComponent & React.RefAttributes>; declare const SelectSeparator: React.ForwardRefExoticComponent & React.RefAttributes>; declare const SelectScrollUpButton: React.ForwardRefExoticComponent & React.RefAttributes, "ref"> & React.RefAttributes>; declare const SelectScrollDownButton: React.ForwardRefExoticComponent & React.RefAttributes, "ref"> & React.RefAttributes>; export interface SelectProps extends FieldProps, Pick { /** Placeholder text for the trigger */ placeholder?: string; /** Size variant matching Figma specs */ size?: 'xs' | 'sm' | 'md' | 'lg'; /** Shape variant */ shape?: 'rounded' | 'round'; /** Visual validation state from the Figma Select family */ state?: 'default' | 'success' | 'error'; /** Read-only mode renders as static text */ readOnly?: boolean; /** Controlled value */ value?: string; /** Initial selected value for uncontrolled mode */ defaultValue?: string; /** Callback when selected value changes */ onValueChange?: (value: string) => void; /** Whether the select is disabled */ disabled?: boolean; /** SelectItem children */ children: React.ReactNode; /** Additional class name for the trigger */ className?: string; /** Name attribute for form submission */ name?: string; } declare function Select({ placeholder, size, shape, state, readOnly, value, defaultValue, onValueChange, disabled, children, className, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest }: SelectProps): React.JSX.Element; declare namespace Select { var displayName: string; } /** * Compound Select for advanced usage (custom triggers, popups, etc.) * * @example * ```tsx * * * * * * Option 1 * * * ``` */ declare const SelectCompound: typeof SelectRoot & { Root: typeof SelectRoot; Group: React.ForwardRefExoticComponent & React.RefAttributes>; Value: React.ForwardRefExoticComponent & React.RefAttributes>; Trigger: React.ForwardRefExoticComponent & React.RefAttributes> & { Icon: React.ForwardRefExoticComponent>; }; Popup: React.ForwardRefExoticComponent & React.RefAttributes>; GroupLabel: React.ForwardRefExoticComponent & React.RefAttributes>; Item: React.ForwardRefExoticComponent & React.RefAttributes>; Separator: React.ForwardRefExoticComponent & React.RefAttributes>; ScrollUpButton: React.ForwardRefExoticComponent & React.RefAttributes, "ref"> & React.RefAttributes>; ScrollDownButton: React.ForwardRefExoticComponent & React.RefAttributes, "ref"> & React.RefAttributes>; }; export { Select, SelectCompound, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectTriggerIcon, SelectValue, };