import type { ReactNode } from "react";
import type { DateRange as ReactDayPickerDateRange } from "react-day-picker";
export interface FilterOption {
    label: string;
    value: string;
}
export interface FilterConfig {
    label: string;
    options: FilterOption[];
    value: string[];
    onChange: (value: string[]) => void;
    multiple?: boolean;
}
export interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: ReactNode;
    /** Layout variant: horizontal (default) for toolbars, vertical for side panels, compact for single button dropdown */
    variant?: "horizontal" | "vertical" | "compact";
}
/**
 * FilterToolbar - A flexible toolbar component for filtering collections with
 * intelligent responsive layout.
 *
 * @example Horizontal variant (default)
 * ```tsx
 * <FilterToolbar>
 *   <FilterToolbarTitle>Products</FilterToolbarTitle>
 *   <FilterToolbarSearch />
 *   <FilterGroup>...</FilterGroup>
 * </FilterToolbar>
 * ```
 *
 * @example Vertical variant for side panels
 * ```tsx
 * <FilterToolbar variant="vertical">
 *   <FilterToolbarTitle>Products</FilterToolbarTitle>
 *   <FilterToolbarSearch />
 *   <FilterGroup>...</FilterGroup>
 * </FilterToolbar>
 * ```
 *
 * @example Compact variant with single button dropdown
 * ```tsx
 * <FilterToolbar variant="compact">
 *   <FilterToolbarTitle>Products</FilterToolbarTitle>
 *   <FilterToolbarSearch />
 *   <FilterGroup>...</FilterGroup>
 * </FilterToolbar>
 * ```
 */
export declare const FilterToolbar: import("react").ForwardRefExoticComponent<FilterToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
export type FilterToolbarTitleProps = React.HTMLAttributes<HTMLDivElement>;
/**
 * FilterToolbarTitle - Displays a title for the filtered collection.
 */
export declare const FilterToolbarTitle: import("react").ForwardRefExoticComponent<FilterToolbarTitleProps & import("react").RefAttributes<HTMLDivElement>>;
export interface FilterToolbarSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
    /** Callback fired when search value changes (debounced) */
    onSearch?: (value: string) => void;
    /** Debounce delay in milliseconds (default: 300ms) */
    debounceMs?: number;
    /** Custom width for the search input. Defaults to 200px on desktop, full width on mobile */
    width?: string | number;
}
/**
 * FilterToolbarSearch - A search input component with built-in debouncing.
 */
export declare const FilterToolbarSearch: import("react").ForwardRefExoticComponent<FilterToolbarSearchProps & import("react").RefAttributes<HTMLInputElement>>;
export interface FilterGroupProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Manually specify the active filter count. If not provided, will be calculated from children */
    activeCount?: number;
    /** Callback fired when "Clear All" is clicked */
    onClearAll?: () => void;
}
/**
 * FilterGroup - Container for filter components with responsive behavior.
 *
 * On mobile (horizontal variant), shows a single filter button that opens a popover.
 * On desktop (horizontal variant), shows individual filter buttons inline.
 * On compact variant, shows a single filter button with popover on all screen sizes.
 * On vertical variant, shows filters stacked vertically with full width.
 */
export declare const FilterGroup: import("react").ForwardRefExoticComponent<FilterGroupProps & import("react").RefAttributes<HTMLDivElement>>;
export interface FilterProps {
    /** Label for the filter */
    label: string;
    /** Available filter options */
    options: FilterOption[];
    /** Currently selected values */
    value: string[];
    /** Callback fired when selection changes */
    onChange: (value: string[]) => void;
    /** Whether multiple selections are allowed (default: true) */
    multiple?: boolean;
    /** Display variant for vertical mode: checkbox (default), toggle, or pills */
    displayVariant?: "checkbox" | "toggle" | "pills";
    /** Maximum number of options to show initially (vertical variant only) */
    maxVisibleOptions?: number;
    /** Whether the filter section starts expanded (vertical variant only, default: true) */
    defaultOpen?: boolean;
}
/**
 * Filter - An individual filter component with responsive behavior.
 *
 * On mobile (horizontal variant), renders as part of the filters popover.
 * On desktop (horizontal variant), renders as a button with a dropdown popover.
 * On compact variant, renders as part of the filters popover (all screen sizes).
 * On vertical variant, renders as collapsible section with various display options.
 */
export declare const Filter: import("react").ForwardRefExoticComponent<FilterProps & import("react").RefAttributes<HTMLDivElement>>;
/**
 * FilterToolbarButtons - Container for action buttons.
 */
export declare const FilterToolbarButtons: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
export interface FilterToolbarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    /** Visual priority of the action (affects button variant) */
    priority?: "primary" | "secondary";
    /** Icon to display on the left side of the button */
    leftIcon?: ReactNode;
    /** Icon to display on the right side of the button */
    rightIcon?: ReactNode;
}
/**
 * FilterToolbarButton - An action button component for the toolbar.
 *
 * **IMPORTANT**: This component IS ALREADY A BUTTON. Do not wrap Button components inside it.
 *
 * ❌ INCORRECT:
 * ```tsx
 * <FilterToolbarButton>
 *   <Button>Click me</Button>  // NO! Creates nested buttons
 * </FilterToolbarButton>
 * ```
 *
 * ✅ CORRECT:
 * ```tsx
 * <FilterToolbarButton
 *   priority="primary"
 *   leftIcon={<Plus />}
 *   onClick={handleClick}
 * >
 *   Click me  // Just text content
 * </FilterToolbarButton>
 * ```
 *
 * @example
 * ```tsx
 * <FilterToolbarButtons>
 *   <FilterToolbarButton
 *     priority="primary"
 *     leftIcon={<Plus className="h-4 w-4" />}
 *     onClick={() => addItem()}
 *   >
 *     Add Item
 *   </FilterToolbarButton>
 * </FilterToolbarButtons>
 * ```
 */
export declare const FilterToolbarButton: import("react").ForwardRefExoticComponent<FilterToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
/**
 * FilterToolbarAnnouncer - Provides screen reader announcements
 * for filter state changes.
 *
 * @internal
 */
export declare const FilterToolbarAnnouncer: ({ filterCount, }: {
    filterCount: number;
}) => import("react/jsx-runtime").JSX.Element;
export type DateRange = ReactDayPickerDateRange;
export interface FilterDateRangeProps {
    /** Label for the date range filter */
    label: string;
    /** Currently selected date range */
    value?: DateRange;
    /** Callback fired when date range changes */
    onChange: (range: DateRange | undefined) => void;
    /** Placeholder text when no date is selected */
    placeholder?: string;
    /** Whether the filter section starts expanded (vertical variant only, default: true) */
    defaultOpen?: boolean;
}
/**
 * FilterDateRange - A date range filter component for the FilterToolbar.
 *
 * On mobile (horizontal variant), renders as part of the filters popover.
 * On desktop (horizontal variant), renders as a button with a calendar dropdown.
 * On compact variant, renders as part of the filters popover (all screen sizes).
 * On vertical variant, renders as collapsible section with date range picker.
 *
 * @example
 * ```tsx
 * const [dateRange, setDateRange] = useState<DateRange | undefined>();
 *
 * <FilterGroup>
 *   <FilterDateRange
 *     label="Date Range"
 *     value={dateRange}
 *     onChange={setDateRange}
 *   />
 * </FilterGroup>
 * ```
 */
export declare const FilterDateRange: import("react").ForwardRefExoticComponent<FilterDateRangeProps & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=filter-toolbar.d.ts.map