import { SlotsToClasses, MultiSelectSlots } from '@trail-ui/theme';
import react__default, { ForwardedRef, ReactElement } from 'react';
import { LozengeProps } from '../lozenge/lozenge.js';
import 'react/jsx-runtime';

type BaseOption = {
    label: string;
    value: string;
    lozengeColor?: LozengeProps['color'];
    lozengeVariant?: LozengeProps['variant'];
    lozengeSize?: LozengeProps['size'];
    [key: string]: any;
};
interface MultiSelectProps<T extends string | BaseOption> {
    /**
     * @property {T[]} options - The list of options available for selection.
     */
    options: T[];
    /**
     * @property {string} [label] - An optional label for the MultiSelect component.
     * @default 'Select items'
     */
    label?: string;
    /**
     * @property {string} [id] - An optional id for the MultiSelect 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: T[]) => void;
    /**
     * @property {() => void} [onBlur] - A callback function that is called when the MultiSelect component loses focus.
     */
    onBlur?: () => void;
    /**
     * @property {T[]} [defaultValue] - An optional array of default selected items.
     */
    defaultValue?: T[];
    /**
     * @property {SlotsToClasses<MultiSelectSlots>} [classNames] - An optional object of classes to style the MultiSelect component.
     */
    classNames?: SlotsToClasses<MultiSelectSlots>;
    /**
     * @property {number} [maxTags] - The maximum number of tags to display before showing a '+n more' tag.
     * @default 4
     */
    maxTags?: number;
    /**
     * @property {string} [errorMessage] - An optional error message to display below the MultiSelect component.
     */
    errorMessage?: string;
    /**
     * @property {string} [description] - An optional description to display below the MultiSelect 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 MultiSelect component is required.
     */
    isRequired?: boolean;
    /**
     * @property {boolean} [isDisabled] - Whether the MultiSelect component is disabled.
     */
    isDisabled?: boolean;
    /**
     * @property {boolean} [isInvalid] - Whether the MultiSelect component is invalid.
     */
    isInvalid?: boolean;
    /**
     * @property {string} [name] - The name of the form field
     */
    name?: string;
    /**
     * @property {T[]} [value] - The controlled value of the component
     */
    value?: T[];
    /**
     * @property {string} [form] - The id of the form this field belongs to
     */
    form?: string;
    /**
     * @property {string} [color] - The color of the tags
     */
    color?: string;
}
declare const _MultiSelect: <T extends string | BaseOption>(props: MultiSelectProps<T> & {
    ref?: ForwardedRef<HTMLDivElement>;
}) => ReactElement;

export { _MultiSelect as MultiSelect, MultiSelectProps };