import type { ChangeEvent, HTMLProps, ReactNode } from 'react';
export type TSelectSize = 'sm' | 'md' | 'lg';
export type TSelectStatus = 'default' | 'error' | 'success';
export type TSelectVariant = 'inline' | 'outline';
export type TSelectValue = string | number | (string | number)[];
export type TSelectOptionTopLeft = {
    top: number;
    left: number;
    width: number;
};
export type TSelectOption = {
    label: string;
    value: string | number;
};
export type TSelectOptionProps = {
    /** Set the SelectOption's active option(s) */
    activeOption?: TSelectValue;
    /** Set the SelectOption's opened or closed state */
    isOpen?: boolean;
    /** Set the SelectOption's `onChange` function */
    onChangeSearch?: (search: string, e?: ChangeEvent<HTMLInputElement>) => void;
    /** Set the SelectOption's function when clear up the search input */
    onClearSearch?: (search?: string) => void;
    /** Set the SelectOption's `onClick` function */
    onClick?: (value: TSelectOption) => void;
    /** Set the SelectOption's option class name */
    optionClassName?: string;
    /** Set the SelectOption's options */
    options: TSelectOption[];
    /** Set the SelectOption search's placeholder */
    searchPlaceholder?: string;
    /** Set the SelectOption's search input value */
    searchValue?: string;
    /** Make the SelectOption's option to be searchable */
    searchable?: boolean;
    /** Set the SelectOption's size */
    size?: TSelectSize;
} & Omit<HTMLProps<HTMLDivElement>, 'size' | 'onClick'>;
export type TSelectProps = {
    /** Set the Select to have full width */
    block?: boolean;
    /** Set the Select's caption. Have a certain icon according to the Select's status */
    caption?: ReactNode;
    /** Set the Select to be disabled */
    disabled?: boolean;
    /** Set the Select's hint */
    hint?: ReactNode;
    /** Set the Select's label */
    label?: ReactNode;
    /** Set the Select's be able to selects multiple options */
    multiple?: boolean;
    /** Set the Select's `onChange` function */
    onChange?: (value: TSelectValue) => void;
    /** Set the SelectOption's `onChange` function */
    onChangeSearch?: (search: string, e?: ChangeEvent<HTMLInputElement>) => void;
    /** Set the SelectOption's function when clear up the search input */
    onClearSearch?: (search?: string) => void;
    /** Set the Select's option */
    optionClassName?: string;
    /** Set the Select's list options */
    options: TSelectOption[];
    /** Set the Select's options wrapper class name */
    optionsWrapperClassName?: string;
    /** Set the Select's placeholder */
    placeholder?: string;
    /** Make the Select's options to be searchable */
    searchable?: boolean;
    /** Set the Select's search option placeholder */
    searchPlaceholder?: string;
    /** Set the Select's search option input value */
    searchValue?: string;
    /** Set the Select's size */
    size?: TSelectSize;
    /** Set the Select's status. This status affects the icon that is shown in caption when the caption is provided */
    status?: TSelectStatus;
    /** Set the Select's value */
    value?: TSelectValue;
    /** Set the Select's variant */
    variant?: TSelectVariant;
} & Omit<HTMLProps<HTMLInputElement>, 'size' | 'onChange' | 'readonly' | 'value'>;