import { LucideIcon } from "lucide-react";
import { FocusEvent } from "react";
type MultiSelectProps = {
    name: string;
    options: {
        label: string;
        value: string;
    }[];
    id?: string;
    value?: string[];
    defaultValue?: string[];
    showAsterisk?: boolean;
    label?: string;
    errorMessage?: string;
    placeholder?: string;
    notFoundText?: string;
    className?: string;
    disabled?: boolean;
    readOnly?: boolean;
    isLoading?: boolean;
    isSearchable?: boolean;
    closeOnSelect?: boolean;
    onSearch?: (value: string) => void;
    onChange?: (value: string[]) => void;
    onFocus?: () => void;
    onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
    size?: "md" | "lg";
    variant?: "solid" | "outline" | "underline";
    prefix?: string | LucideIcon;
    leftIcon?: LucideIcon;
    optionMaxHeight?: number;
};
/**
 * MultiSelect component - used for selecting multiple options from a dropdown list with support for search, labels, and validation
 *
 * @param props - MultiSelect component properties
 * @param props.name - Required field name for form handling
 * @param props.options - Array of options with label and value properties
 * @param props.id - Optional unique identifier for the component
 * @param props.value - Controlled value array of selected option values
 * @param props.defaultValue - Default selected values. Default: []
 * @param props.showAsterisk - Whether to show asterisk on label for required fields
 * @param props.label - Optional label text to display above the multiselect
 * @param props.errorMessage - Error message to display below the multiselect
 * @param props.placeholder - Placeholder text when no options are selected. Default: "Selecione..."
 * @param props.notFoundText - Text to display when no options match search. Default: "Sem opções disponíveis"
 * @param props.className - Additional CSS classes to apply
 * @param props.disabled - Whether the multiselect is disabled. Default: false
 * @param props.readOnly - Whether the multiselect is read-only. Default: false
 * @param props.isLoading - Controls loading state with spinner. Default: false
 * @param props.isSearchable - Whether the multiselect supports search functionality. Default: false
 * @param props.closeOnSelect - Whether to close dropdown after selecting an option. Default: false
 * @param props.onSearch - Callback function called when search value changes
 * @param props.onChange - Callback function called when selected values change
 * @param props.onFocus - Callback function called when multiselect gains focus
 * @param props.onBlur - Callback function called when multiselect loses focus
 * @param props.size - MultiSelect size. Default: "md"
 * @param props.variant - Visual variant of the multiselect. Default: "solid"
 * @param props.prefix - Text or icon to display at the beginning of the multiselect
 * @param props.leftIcon - Optional icon to display on the left side
 * @param props.optionMaxHeight - Maximum height for the options dropdown
 *
 * @returns MultiSelect JSX element wrapped in FieldWrapper with optional label and error
 *
 * @example
 * ```tsx
 * // Basic multiselect
 * <MultiSelect
 *   name="categories"
 *   options={[
 *     { label: "Technology", value: "tech" },
 *     { label: "Design", value: "design" },
 *     { label: "Marketing", value: "marketing" }
 *   ]}
 * />
 *
 * // MultiSelect with label and validation
 * <MultiSelect
 *   name="skills"
 *   label="Select Skills"
 *   showAsterisk
 *   errorMessage="Please select at least one skill"
 *   options={skillOptions}
 *   placeholder="Choose your skills..."
 * />
 *
 * // Searchable multiselect with custom styling
 * <MultiSelect
 *   name="countries"
 *   label="Countries"
 *   isSearchable
 *   variant="outline"
 *   size="lg"
 *   leftIcon={GlobeIcon}
 *   options={countryOptions}
 *   notFoundText="No countries found"
 * />
 *
 * // Controlled multiselect with callbacks
 * <MultiSelect
 *   name="tags"
 *   label="Tags"
 *   value={selectedTags}
 *   onChange={setSelectedTags}
 *   onSearch={handleSearch}
 *   closeOnSelect={false}
 *   isLoading={isLoadingTags}
 *   options={tagOptions}
 * />
 *
 * // MultiSelect with prefix and custom behavior
 * <MultiSelect
 *   name="departments"
 *   label="Departments"
 *   prefix="Dept:"
 *   closeOnSelect={true}
 *   variant="underline"
 *   defaultValue={["hr", "it"]}
 *   options={departmentOptions}
 * />
 * ```
 */
declare function MultiSelect(props: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
export { MultiSelect };
//# sourceMappingURL=index.d.ts.map