import { Command, CommandRoot } from "../Command/index.js";
import { ComponentProps, FC, HTMLAttributes } from "react";

//#region src/components/Select/Multiselect.d.ts
/**
 * Props interface for the main MultiSelect component
 *
 * @interface MultiSelectProps
 */
type MultiSelectProps = ComponentProps<typeof CommandRoot> & {
  /**
   * Array of selected values (controlled mode)
   * @example
   * ```tsx
   * const [selected, setSelected] = useState(['react', 'vue']);
   * <MultiSelect values={selected} onValueChange={setSelected} />
   * ```
   */
  values?: string[];
  /**
   * Default selected values for uncontrolled mode
   * @example
   * ```tsx
   * <MultiSelect defaultValues={['react']} />
   * ```
   */
  defaultValues?: string[];
  /**
   * Callback fired when selection changes
   * @param value - New array of selected values
   * @example
   * ```tsx
   * <MultiSelect onValueChange={(values) => console.log('Selected:', values)} />
   * ```
   */
  onValueChange?: (value: string[]) => void;
  /**
   * Whether keyboard navigation should loop through options
   * @default false
   * @example
   * ```tsx
   * <MultiSelect loop /> // Arrow keys wrap around at list boundaries
   * ```
   */
  loop?: boolean;
};
/**
 * MultiSelect - A comprehensive multi-selection dropdown component
 *
 * An advanced multi-select component that combines the functionality of a searchable dropdown
 * with the ability to select multiple values. Built on top of Command component primitives,
 * it provides filtering, keyboard navigation, and visual feedback through badges.
 *
 * ## Key Features
 * - **Multi-Selection**: Select multiple options with visual badge representation
 * - **Searchable**: Built-in filtering to quickly find options in large lists
 * - **Keyboard Navigation**: Full arrow key navigation with optional looping
 * - **Accessibility**: Screen reader support, ARIA attributes, and focus management
 * - **Flexible State**: Both controlled and uncontrolled usage patterns
 * - **Rich UI**: Customizable badges, icons, and content layout
 *
 * ## Use Cases
 * - Tag/category selection in forms
 * - Multi-user assignment interfaces
 * - Feature/permission selection
 * - Filter selection in search interfaces
 * - Any multi-choice selection requirement
 *
 * ## Architecture
 * The component follows a compound pattern similar to Select:
 * - `MultiSelect` (root): Manages state and provides context
 * - `MultiSelect.Trigger`: Container for input and selected badges
 * - `MultiSelect.Input`: Searchable input field with filtering
 * - `MultiSelect.Content`: Dropdown container for options
 * - `MultiSelect.List`: Options container with keyboard navigation
 * - `MultiSelect.Item`: Individual selectable options
 *
 * ## Accessibility
 * - **Keyboard Navigation**: Arrow keys, Enter to select, Backspace to remove
 * - **Screen Readers**: Proper ARIA labels and live region announcements
 * - **Focus Management**: Clear focus indicators and logical tab flow
 * - **Search**: Real-time filtering with screen reader announcements
 *
 * @example
 * Basic multi-select usage:
 * ```tsx
 * const [frameworks, setFrameworks] = useState<string[]>([]);
 *
 * <MultiSelect values={frameworks} onValueChange={setFrameworks}>
 *   <MultiSelect.Trigger>
 *     <MultiSelect.Input placeholder="Select frameworks..." />
 *   </MultiSelect.Trigger>
 *   <MultiSelect.Content>
 *     <MultiSelect.List>
 *       <MultiSelect.Item value="react">React</MultiSelect.Item>
 *       <MultiSelect.Item value="vue">Vue</MultiSelect.Item>
 *       <MultiSelect.Item value="svelte">Svelte</MultiSelect.Item>
 *     </MultiSelect.List>
 *   </MultiSelect.Content>
 * </MultiSelect>
 * ```
 *
 * @example
 * Advanced usage with keyboard looping:
 * ```tsx
 * <MultiSelect defaultValues={['react']} loop>
 *   <MultiSelect.Trigger>
 *     <MultiSelect.Input placeholder="Choose technologies..." />
 *   </MultiSelect.Trigger>
 *   <MultiSelect.Content>
 *     <MultiSelect.List>
 *       <MultiSelect.Item value="react">⚛️ React</MultiSelect.Item>
 *       <MultiSelect.Item value="vue">💚 Vue</MultiSelect.Item>
 *       <MultiSelect.Item value="angular">🔴 Angular</MultiSelect.Item>
 *     </MultiSelect.List>
 *   </MultiSelect.Content>
 * </MultiSelect>
 * ```
 *
 * @example
 * Form integration with validation:
 * ```tsx
 * <form>
 *   <MultiSelect
 *     values={selectedSkills}
 *     onValueChange={setSelectedSkills}
 *     required
 *   >
 *     <MultiSelect.Trigger className="min-h-[2.5rem]">
 *       <MultiSelect.Input placeholder="Select your skills..." />
 *     </MultiSelect.Trigger>
 *     <MultiSelect.Content>
 *       <MultiSelect.List>
 *         <MultiSelect.Item value="javascript">JavaScript</MultiSelect.Item>
 *         <MultiSelect.Item value="typescript">TypeScript</MultiSelect.Item>
 *         <MultiSelect.Item value="python">Python</MultiSelect.Item>
 *       </MultiSelect.List>
 *     </MultiSelect.Content>
 *   </MultiSelect>
 * </form>
 * ```
 */
declare const MultiSelectRoot: FC<MultiSelectProps>;
declare const MultiSelectTrigger: FC<HTMLAttributes<HTMLDivElement> & {
  getBadgeValue?: (value: string) => string;
  validationStyleEnabled?: boolean;
}>;
declare const MultiSelectInput: FC<ComponentProps<typeof Command.Input>>;
declare const MultiSelectContent: FC<HTMLAttributes<HTMLDivElement>>;
declare const MultiSelectList: typeof Command.List;
declare const MultiSelectItem: FC<{
  value: string;
} & ComponentProps<typeof Command.Item>>;
type MultiSelectType = typeof MultiSelectRoot & {
  Trigger: typeof MultiSelectTrigger;
  Input: typeof MultiSelectInput;
  Content: typeof MultiSelectContent;
  List: typeof MultiSelectList;
  Item: typeof MultiSelectItem;
};
/**
 *
 * Usage example:
 * ```jsx
 * <MultiSelect
 *   values={value}
 *   onValuesChange={setValue}
 *   loop
 * >
 *   <MultiSelect.Trigger>
 *     <MultiSelect.Input placeholder="Select your framework" />
 *   </MultiSelect.Trigger>
 *   <MultiSelect.Content>
 *     <MultiSelect.List>
 *       <MultiSelect.Item value={"React"}>React</MultiSelect.Item>
 *       <MultiSelect.Item value={"Vue"}>Vue</MultiSelect.Item>
 *       <MultiSelect.Item value={"Svelte"}>Svelte</MultiSelect.Item>
 *     </MultiSelect.List>
 *   </MultiSelect.Content>
 * </MultiSelect>
 * ```
 */
declare const MultiSelect: MultiSelectType;
//#endregion
export { MultiSelect };
//# sourceMappingURL=Multiselect.d.ts.map