import { ReactElement } from "react";
import { GroupBase } from "react-select";
import { BaseOptionType } from "../SelectField/FormFieldSelectAdapter";
import { MultiSelectFieldProps } from "./FormFieldSelectAdapterMulti";
/**
 * The `<MultiSelectField>` component allows selecting multiple options from a dropdown list.
 * It wraps the select input with FormGroup for consistent form styling including label,
 * help text, and validation.
 *
 * ### When to use
 * - Selecting multiple items from a predefined list (tags, categories, permissions)
 * - When users need to see and manage all selected items
 * - Filtering by multiple criteria
 *
 * ### When not to use
 * - Single selection - use `SelectField` instead
 * - Very long lists - consider a searchable/async variant
 * - Binary choices - use `Checkbox` or `ToggleSwitchOption` instead
 *
 * @example Basic usage
 * ```tsx
 * import { MultiSelectField } from "@trackunit/react-form-components";
 *
 * const options = [
 *   { value: "read", label: "Read" },
 *   { value: "write", label: "Write" },
 *   { value: "delete", label: "Delete" },
 * ];
 *
 * <MultiSelectField
 *   label="Permissions"
 *   options={options}
 *   value={selectedPermissions}
 *   onChange={(selected) => setSelectedPermissions(selected)}
 * />
 * ```
 * @example With placeholder and help text
 * ```tsx
 * import { MultiSelectField } from "@trackunit/react-form-components";
 *
 * <MultiSelectField
 *   label="Categories"
 *   options={categoryOptions}
 *   value={selectedCategories}
 *   onChange={(selected) => setSelectedCategories(selected)}
 *   placeholder="Select categories..."
 *   helpText="Select all that apply"
 * />
 * ```
 * @example With validation
 * ```tsx
 * import { MultiSelectField } from "@trackunit/react-form-components";
 *
 * <MultiSelectField
 *   label="Required Tags"
 *   options={tagOptions}
 *   value={selectedTags}
 *   onChange={(selected) => setSelectedTags(selected)}
 *   required
 *   errorMessage={selectedTags.length === 0 ? "Select at least one tag" : undefined}
 * />
 * ```
 * @param {MultiSelectFieldProps} props - The props for the MultiSelectField component
 * @returns {ReactElement} MultiSelectField component
 */
export declare const MultiSelectField: {
    <TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>>({ ref, ...props }: MultiSelectFieldProps<TOption, TIsAsync, TGroup>): ReactElement;
    displayName: string;
};