/**
 * @file MultiSelector.tsx
 * @input Uses React, StyleX, usePopover, useTooltip, CheckboxInput, Field, Badge, Icon, InputGroupContext
 * @output Exports MultiSelector component
 * @position Core implementation; consumed by index.ts
 *
 * SYNC: When modified, update:
 * - /packages/core/src/MultiSelector/MultiSelector.doc.mjs
 * - /packages/core/src/MultiSelector/MultiSelector.test.tsx
 * - /packages/core/src/MultiSelector/index.ts
 * - /apps/storybook/stories/InputGroup.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/MultiSelector/ (showcase blocks)
 */
import React, { type ReactNode } from 'react';
import { type IconType } from '../Icon';
import { type FieldStatusVariant } from '../Field';
import type { MultiSelectorOptionType, MultiSelectorOptionData, MultiSelectorStatus } from './types';
import type { BaseProps } from '../BaseProps';
import type { SizeValue } from '../utils/types';
export type MultiSelectorSize = 'sm' | 'md' | 'lg';
export type MultiSelectorVariant = 'input' | 'ghost';
export type MultiSelectorStatusType = 'warning' | 'error' | 'success';
export type { MultiSelectorStatus };
export interface MultiSelectorProps<T extends MultiSelectorOptionType = MultiSelectorOptionType> extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
    /**
     * Label text for the multi-selector (always rendered for accessibility).
     */
    label: string;
    /**
     * Whether to visually hide the label (still accessible to screen readers).
     * @default false
     */
    isLabelHidden?: boolean;
    /**
     * Description text displayed between the label and selector.
     */
    description?: string;
    /**
     * Whether the field is optional. Mutually exclusive with isRequired.
     * @default false
     */
    isOptional?: boolean;
    /**
     * Whether the field is required. Mutually exclusive with isOptional.
     * @default false
     */
    isRequired?: boolean;
    /**
     * Whether the selector is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Explains why the selector is disabled. When set together with
     * `isDisabled`, the selector shows a tooltip with this text on hover and
     * keyboard focus, and the trigger stays focusable (via `aria-disabled`)
     * so the reason is discoverable by keyboard and assistive technology.
     * Activation stays blocked.
     *
     * Use this instead of wrapping a disabled selector in `Tooltip` — disabled
     * controls don't emit the pointer events an external tooltip needs.
     *
     * @example
     * ```
     * <MultiSelector
     *   label="Columns"
     *   options={columns}
     *   value={selected}
     *   onChange={setSelected}
     *   isDisabled
     *   disabledMessage="Select a table first"
     * />
     * ```
     */
    disabledMessage?: string;
    /**
     * The options to display in the selector.
     * Can be strings, objects, dividers, or sections.
     */
    options: T[];
    /**
     * The currently selected values.
     */
    value: string[];
    /**
     * The HTML name attribute for form submissions. When set, hidden inputs
     * carry one entry per selected value under this name, matching how a
     * native multi-select serializes.
     */
    htmlName?: string;
    /**
     * Callback when selection changes.
     */
    onChange: (value: string[]) => void;
    /**
     * Async action on change. Fires after onChange.
     */
    changeAction?: (value: string[]) => void | Promise<void>;
    /**
     * Whether the selector is in a loading state.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Placeholder text when no value is selected.
     * @default 'Select...'
     */
    placeholder?: string;
    /**
     * The size of the selector.
     * @default 'md'
     */
    size?: MultiSelectorSize;
    /**
     * Visual style of the selector trigger.
     * - 'input': bordered input-style trigger for forms
     * - 'ghost': borderless trigger matching ghost buttons, for toolbars
     * @default 'input'
     */
    variant?: MultiSelectorVariant;
    /**
     * Status indicator for the selector.
     */
    status?: MultiSelectorStatus;
    /**
     * How the status message is placed relative to the input.
     * - 'attached': message overlaps directly below the bordered input (input variant only)
     * - 'detached': message floats below as a separate element with spacing
     * - 'tooltip': message is exposed from the on-field status icon
     * @default 'attached' for input selectors; 'detached' for ghost selectors
     */
    statusVariant?: FieldStatusVariant;
    /**
     * Width of the field. Numbers are treated as pixels, strings are used as-is
     * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
     * stay aligned, unlike setting width via `xstyle`/`className`/`style`.
     */
    width?: SizeValue;
    /**
     * Tooltip text to display in an info icon at the end of the label.
     */
    labelTooltip?: string;
    /**
     * Icon displayed at the start of the selector trigger.
     */
    startIcon?: ReactNode | IconType;
    /**
     * Whether to show a clear button when values are selected.
     * When clicked, resets the value to an empty array and returns focus to the trigger.
     * @default false
     */
    hasClear?: boolean;
    /**
     * Whether to show a "Select all" checkbox.
     * @default false
     */
    hasSelectAll?: boolean;
    /**
     * Label for the select-all checkbox.
     * @default 'Select all'
     */
    selectAllLabel?: string;
    /**
     * Whether to show a search input.
     * @default false
     */
    hasSearch?: boolean;
    /**
     * Placeholder text for the search input.
     * @default 'Search...'
     */
    searchPlaceholder?: string;
    /**
     * How to display selected items in the trigger.
     * - 'count': "3 selected"
     * - 'labels': "Name, Email, +3"
     * - 'badges': [Name] [Email] +2
     * @default 'count'
     */
    triggerDisplay?: 'count' | 'labels' | 'badges';
    /**
     * Maximum number of badges to show before showing "+N".
     * Only used when triggerDisplay is 'badges'.
     * @default 3
     */
    maxBadges?: number;
    /**
     * Custom render function for options.
     * Only called for selectable options (not dividers/sections or the select-all row).
     */
    renderOption?: (option: MultiSelectorOptionData) => ReactNode;
    /**
     * Whether the dropdown starts open on mount.
     * Useful for showcases and previews.
     * @default false
     */
    isDefaultOpen?: boolean;
    /**
     * Test ID for testing frameworks.
     */
    'data-testid'?: string;
}
/**
 * A multi-select dropdown component with checkboxes for choosing
 * multiple items from a list of options.
 *
 * @example
 * ```
 * <MultiSelector
 *   label="Columns"
 *   options={['Name', 'Email', 'Role', 'Status']}
 *   value={selectedColumns}
 *   onChange={setSelectedColumns}
 *   hasSelectAll
 * />
 * ```
 */
export declare function MultiSelector<T extends MultiSelectorOptionType>({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, options, value, onChange, changeAction, isLoading, placeholder: placeholderFromProps, size: sizeProp, variant, status, statusVariant, labelTooltip, startIcon, hasClear, hasSelectAll, selectAllLabel: selectAllLabelFromProps, hasSearch, searchPlaceholder: searchPlaceholderFromProps, triggerDisplay, maxBadges, renderOption, isDefaultOpen, 'data-testid': testId, htmlName, width, xstyle, className, style, }: MultiSelectorProps<T>): React.JSX.Element;
export declare namespace MultiSelector {
    var displayName: string;
}
//# sourceMappingURL=MultiSelector.d.ts.map