import { type ReactNode } from "react"; export interface SelectOption { value: V; /** "GPT-6 Sol", "Member", "Oslo time". */ label: string; /** One sentence: what picking it means. */ description?: ReactNode | undefined; /** * Quiet detail shown after the label in the menu and the trigger. For * models this is the payment source ("Codex plan"); for time zones the * offset; for people the email. */ meta?: string | undefined; /** A 20px avatar or 16px icon before the label. */ leading?: ReactNode | undefined; disabled?: boolean | undefined; /** Why it can't be picked and who can fix it. Replaces the description. */ disabledReason?: string | undefined; /** Consecutive options with the same group get one quiet heading. */ group?: string | undefined; /** Extra words the combobox search matches. */ keywords?: string[] | undefined; } /** * - `menu` (default): a popover list with title, description and meta, and a * check on the selected option. * - `native`: the browser's select, restyled; the chosen option's description * shows under it. * - `combobox`: the menu with a search field, for long or remote lists. */ export type SelectMenuVariant = "native" | "menu" | "combobox"; export interface SelectMenuProps { options: ReadonlyArray>; value?: V | null | undefined; defaultValue?: V | null | undefined; onValueChange?: ((value: V) => void) | undefined; variant?: SelectMenuVariant | undefined; /** Shown while nothing is chosen. */ placeholder?: string | undefined; /** `md` is 36px for forms, `sm` is 32px for rows. Native is always 32px. */ size?: "sm" | "md" | undefined; disabled?: boolean | undefined; /** Why the whole control is disabled and who can change it. Shown under it. */ disabledReason?: ReactNode | undefined; /** Options are loading: the trigger shows a spinner and can't open. */ loading?: boolean | undefined; /** "Loading models…". */ loadingLabel?: string | undefined; /** The value is wrong; pair it with a message through `aria-describedby`. */ invalid?: boolean | undefined; /** Shown in the menu when there are no options at all. */ emptyMessage?: ReactNode | undefined; /** Show the meta text in the trigger too (default true). */ showMetaInTrigger?: boolean | undefined; /** Native only: show the chosen option's description under the select (default true). */ showSelectedDescription?: boolean | undefined; /** Combobox: "Search time zones". */ searchPlaceholder?: string | undefined; /** Combobox: called on every keystroke, for remote search. */ onSearchChange?: ((query: string) => void) | undefined; /** Combobox: set false when `options` already come filtered from the server. */ filterLocally?: boolean | undefined; /** Combobox: the remote search is running. */ searching?: boolean | undefined; /** Menu alignment against the trigger. */ align?: "start" | "end" | undefined; id?: string | undefined; name?: string | undefined; "aria-label"?: string | undefined; "aria-labelledby"?: string | undefined; "aria-describedby"?: string | undefined; /** Trigger classes, usually a width: "w-60". */ className?: string | undefined; /** Classes on the popover panel. */ menuClassName?: string | undefined; } /** Words in the query must all appear in the option's label, meta, description or keywords. */ export declare function filterSelectOptions(options: ReadonlyArray>, query: string): SelectOption[]; /** The next enabled option index from `from` in `direction`, wrapping around. */ export declare function nextEnabledIndex(options: ReadonlyArray>, from: number, direction: 1 | -1): number; /** * Typeahead: the first enabled option after `from` whose label starts with * `buffer`. Repeating one letter cycles through options starting with it. */ export declare function typeaheadIndex(options: ReadonlyArray>, buffer: string, from: number): number; /** * The inline reason under a disabled control: a lock and one sentence. (The * tooltip version for buttons is `DisabledReason` in `disabled-reason.tsx`.) */ export declare function InlineDisabledReason({ id, children }: { id?: string; children: ReactNode; }): import("react").JSX.Element; export interface SelectMenuPanelProps { options: ReadonlyArray>; value: V | null; /** The keyboard or pointer position. */ activeIndex?: number | undefined; onActiveIndexChange?: ((index: number) => void) | undefined; onSelect?: ((value: V) => void) | undefined; listboxId?: string | undefined; /** Option ids are `${idPrefix}-${index}`. */ idPrefix?: string | undefined; "aria-label"?: string | undefined; "aria-labelledby"?: string | undefined; /** Content above the list, for example the search field. */ header?: ReactNode | undefined; loading?: boolean | undefined; loadingLabel?: string | undefined; /** Shown when `options` is empty. */ emptyMessage?: ReactNode | undefined; /** * Renders the panel in place, not as a popover, for previews and docs. It * is inert and hidden from assistive technology. */ preview?: boolean | undefined; className?: string | undefined; } /** * The option list. Every option shows its label, meta (for example the * payment source) and description; the selected one gets the menu check on * the right (menu-styles.ts), hover and keyboard focus the `hover` wash. */ export declare function SelectMenuPanel({ options, value, activeIndex, onActiveIndexChange, onSelect, listboxId, idPrefix, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, header, loading, loadingLabel, emptyMessage, preview, className, }: SelectMenuPanelProps): import("react").JSX.Element; /** Choose one of many from a popover list. Options show description and payer. */ export declare function MenuSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, size, disabled: disabledProp, disabledReason, loading, loadingLabel, invalid: invalidProp, emptyMessage, showMetaInTrigger, align, id: idProp, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedByProp, className, menuClassName, }: Omit, "variant">): import("react").JSX.Element; /** A searchable popover list, for long or remote lists (people, time zones, repositories). */ export declare function ComboboxSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, size, disabled: disabledProp, disabledReason, loading, loadingLabel, invalid: invalidProp, emptyMessage, showMetaInTrigger, searchPlaceholder, onSearchChange, filterLocally, searching, align, id: idProp, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedByProp, className, menuClassName, }: Omit, "variant">): import("react").JSX.Element; /** A static, inert combobox panel for previews and docs. */ export declare function ComboboxPanelPreview({ options, value, query, searchPlaceholder, activeValue, className, }: { options: ReadonlyArray>; value: V | null; query?: string | undefined; searchPlaceholder?: string | undefined; activeValue?: V | undefined; className?: string | undefined; }): import("react").JSX.Element; /** Native text for an option: the label, its meta, and "unavailable" when disabled. */ export declare function nativeOptionText(option: SelectOption): string; /** The browser's select at 32px, with the chosen option's description under it. */ export declare function NativeSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder, disabled: disabledProp, disabledReason, loading, loadingLabel, invalid: invalidProp, showSelectedDescription, id: idProp, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedByProp, className, }: Omit, "variant">): import("react").JSX.Element; /** * Choose one of many. `menu` is the default; `combobox` is for long or remote * lists whichever default is picked; `native` keeps the browser's select. * Menus for actions stay in `DropdownMenu`. */ export declare function SelectMenu({ variant, ...props }: SelectMenuProps): import("react").JSX.Element; /** The error line under a select, matching the choice cards error. */ export declare function SelectError({ id, children }: { id?: string; children: ReactNode; }): import("react").JSX.Element;