import { type PropsWithChildren } from "react";
export type SelectProps = UncontrolledMultipleSelectProps | UncontrolledSingleSelectProps | ControlledSingleSelectProps | ControlledMultipleSelectProps;
/**
 * @remarks Intentionally uses a native <select> element with options/optgroups under the hood.
 *          On mobile devices, it offers a better native select experience. And it's hard to get this right with a custom select component. We just style the top <select>.
 */
export interface BaseSelectProps extends PropsWithChildren {
    name?: string;
    size?: "small" | "medium" | "large";
    required?: boolean;
    disabled?: boolean;
    autoComplete?: string;
    autoFocus?: boolean;
}
export interface UncontrolledSingleSelectProps extends BaseSelectProps {
    multiple?: false | undefined;
    defaultValue?: string;
}
export interface UncontrolledMultipleSelectProps extends BaseSelectProps {
    multiple: true;
    defaultValue?: string[];
}
export interface ControlledSingleSelectProps extends UncontrolledSingleSelectProps {
    value: string;
    onChange: (value: string) => void;
}
export interface ControlledMultipleSelectProps extends UncontrolledMultipleSelectProps {
    value: string[];
    onChange: (value: readonly string[]) => void;
}
export declare const Select: import("react").NamedExoticComponent<SelectProps>;
export interface SelectOptionGroupProps extends PropsWithChildren {
    label: string;
    disabled?: boolean;
}
export declare const SelectOptionGroup: import("react").NamedExoticComponent<SelectOptionGroupProps>;
export interface SelectOptionProps extends PropsWithChildren {
    value: string;
    disabled?: boolean;
}
export declare const SelectOption: import("react").NamedExoticComponent<SelectOptionProps>;