import { SlotsToClasses, MultiSelectSlots } from '@trail-ui/theme';
import react__default from 'react';

type BaseOption = {
    label: string;
    value: string;
    [key: string]: any;
};
interface CustomSelectProps {
    /**
     * @property {BaseOption[]} options - The list of options available for selection.
     */
    options: BaseOption[];
    /**
     * @property {string | number} [value] - The controlled value of the component
     */
    value: string | number;
    /**
     * @property {string} [label] - An optional label for the Select component.
     * @default 'Select items'
     */
    label?: string;
    /**
     * @property {string} [id] - An optional id for the Select component.
     */
    id?: string;
    /**
     * @property {string} [labelKey] - The key to use for the label of each option.
     */
    labelKey?: string;
    /**
     * @property {string} [valueKey] - The key to use for the value of each option.
     */
    valueKey?: string;
    /**
     * @param selectedItems  - A callback function that is called when the selected items change.
     * @returns
     */
    onChange: (selectedItems: string | number) => void;
    /**
     * @property {() => void} [onBlur] - A callback function that is called when the Select component loses focus.
     */
    onBlur?: () => void;
    /**
     * @property {BaseOption} [defaultValue] - An optional array of default selected items.
     */
    defaultValue?: BaseOption;
    /**
     * @property {SlotsToClasses<MultiSelectSlots>} [classNames] - An optional object of classes to style the Select component.
     */
    classNames?: SlotsToClasses<MultiSelectSlots>;
    /**
     * @property {string} [errorMessage] - An optional error message to display below the Select component.
     */
    errorMessage?: string;
    /**
     * @property {string} [description] - An optional description to display below the Select component.
     */
    description?: string;
    /**
     * @property {string} [placeholder] - An optional placeholder to display in the input field.
     */
    placeholder?: string;
    /**
     * @property {React.ReactNode} [errorIcon] - An optional icon to display next to the error message.
     */
    errorIcon?: react__default.ReactNode;
    /**
     * @property {string} [errorId] - The id of the error message for accessibility.
     */
    errorId?: string;
    /**
     * @property {boolean} [isRequired] - Whether the Select component is required.
     */
    isRequired?: boolean;
    /**
     * @property {boolean} [isDisabled] - Whether the Select component is disabled.
     */
    isDisabled?: boolean;
    /**
     * @property {boolean} [isInvalid] - Whether the Select component is invalid.
     */
    isInvalid?: boolean;
    /**
     * @property {string} [name] - The name of the form field
     */
    name?: string;
    /**
     * @property {string} [form] - The id of the form this field belongs to
     */
    form?: string;
    /**
     * @property {number} [maxOptionsBeforeConversionToComboBox] - the component will behave as select component if the options.length is less than this value and as a combox once the value exceeds this number
     * note - the isCombox property overrides the behaviour of this feild
     * @default 6
     */
    maxOptionsBeforeConversionToComboBox?: number;
    /**
     * @property {boolean} [isCombobox] - if set to true the components behaves as a combobox, if set to false it will behave as a listbox, if no value is passed it will act as a select if the options.length is less than maxOptionsBeforeConversionToComboBox and as a comboxbox after that
     * @default undefined
     */
    isCombobox?: boolean;
}
declare const CustomSelect: react__default.ForwardRefExoticComponent<CustomSelectProps & react__default.RefAttributes<HTMLDivElement>>;

export { BaseOption, CustomSelectProps, CustomSelect as default };