import { ToolbarOverflowTypes, ToolbarSize } from './types';
import { ComponentPropsWithoutRef, ReactElement } from 'react';
import { LayoutUtilProps } from '../../../types';
/**
 * Props for the Toolbar component
 * @extends ComponentPropsWithoutRef<"div">
 * @extends LayoutUtilProps
 */
export type ToolbarProps = ComponentPropsWithoutRef<"div"> & LayoutUtilProps & {
    /**
     * Description of the content this toolbar is associated with, used for accessibility
     */
    associatedContent: string;
    /**
     * Orientation of the toolbar
     * @default horizontal
     */
    direction?: "vertical" | "horizontal";
    /**
     * How to handle overflow when items don't fit
     * @default wrap
     */
    overflow?: ToolbarOverflowTypes;
    /**
     * Additional items to display in the overflow menu
     */
    additionalItems?: ReactElement[];
    /**
     * Size of toolbar items
     * @default xsmall
     */
    size?: ToolbarSize;
};
/**
 * Toolbar component for grouping related interactive elements with anvil2 tracking.
 *
 * Features:
 * - Horizontal or vertical orientation
 * - Overflow handling with wrap or collapse behavior
 * - Keyboard navigation following ARIA best practices
 * - Screen reader announcements and accessibility
 * - Automatic overflow menu for collapsed items
 * - Support for buttons, toggles, selects, and links
 * - Layout utilities for positioning and spacing
 * - Context-based state management for child components
 * - Automatic tracking ID generation for analytics
 * - Integration with anvil2 tracking system
 *
 * @example
 * <Toolbar associatedContent="document editor" overflow="collapse">
 *   <Toolbar.Button icon={BoldIcon} aria-label="Bold" />
 *   <Toolbar.ButtonToggle icon={ItalicIcon} aria-label="Italic" />
 *   <Toolbar.Select
 *     items={fontOptions}
 *     selected="arial"
 *     accessibleLabel="Font family"
 *   />
 * </Toolbar>
 */
export declare const Toolbar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
    /**
     * Description of the content this toolbar is associated with, used for accessibility
     */
    associatedContent: string;
    /**
     * Orientation of the toolbar
     * @default horizontal
     */
    direction?: "vertical" | "horizontal";
    /**
     * How to handle overflow when items don't fit
     * @default wrap
     */
    overflow?: ToolbarOverflowTypes;
    /**
     * Additional items to display in the overflow menu
     */
    additionalItems?: ReactElement[];
    /**
     * Size of toolbar items
     * @default xsmall
     */
    size?: ToolbarSize;
} & import('react').RefAttributes<HTMLDivElement>> & {
    /**
     * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Designed specifically for toolbar integration
     * - Consistent styling with other toolbar items
     * - Automatic tooltip for icon-only buttons
     * - Overflow menu support
     * - Accessibility enforcement for aria-labels
     * - Ghost and primary appearance options
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.Button icon={BoldIcon} aria-label="Bold text" />
     *
     * @example
     * <Toolbar.Button appearance="primary">
     *   Save
     * </Toolbar.Button>
     */
    Button: import('react').ForwardRefExoticComponent<import('./ToolbarButton').ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * ToolbarButtonToggle component for toggleable actions within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Toggle state management
     * - Designed specifically for toolbar integration
     * - Consistent styling with other toolbar items
     * - Overflow menu support
     * - Accessibility enforcement for aria-labels
     * - Ghost and primary appearance options
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.ButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
     */
    ButtonToggle: import('react').ForwardRefExoticComponent<import('./ToolbarButtonToggle').ToolbarButtonToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * ToolbarButtonLink component for link actions within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Link functionality with href support
     * - Designed specifically for toolbar integration
     * - Consistent styling with other toolbar items
     * - Overflow menu support
     * - Accessibility enforcement for aria-labels
     * - Ghost and primary appearance options
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.ButtonLink href="/help">
     *   Help
     * </Toolbar.ButtonLink>
     */
    ButtonLink: import('react').ForwardRefExoticComponent<import('./ToolbarButtonLink').ToolbarButtonLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
    /**
     * ToolbarSelect component provides a dropdown selector within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Dropdown menu with selectable options
     * - Controlled and uncontrolled usage patterns
     * - Automatic overflow menu integration
     * - Accessibility support with proper ARIA labels
     * - Ghost and primary appearance options
     * - Dropdown arrow icon indicator
     * - Listbox integration for keyboard navigation
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.Select
     *   items={fontOptions}
     *   selected="arial"
     *   accessibleLabel="Font family"
     *   onChange={(id) => setFont(id)}
     * />
     */
    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
        aiMark?: boolean | import('../../..').AiIconName;
        appearance?: import('../../..').ButtonAppearance;
        size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
        loading?: boolean;
    } & {
        children?: ComponentPropsWithoutRef<"button">["children"];
        icon?: import('../../..').IconProps["svg"] | {
            after: import('../../..').IconProps["svg"];
        } | {
            before: import('../../..').IconProps["svg"];
        };
    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
        aiMark?: boolean | import('../../..').AiIconName;
        appearance?: import('../../..').ButtonAppearance;
        size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
        loading?: boolean;
    } & {
        children?: never;
        icon?: import('../../..').IconProps["svg"];
    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
        appearance?: import('./types').ToolbarItemAppearance;
        onChange?: (optionId: string) => void;
        selected?: string;
        items: (Record<string, unknown> & {
            id: string;
        } & {
            label: string;
            disabled?: boolean;
        })[];
        accessibleLabel: string;
    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * FilterGroup component displays a group of filters with toggles and a clear button.
     * Also contains the FilterDrawer for additional filter options.
     *
     * Features:
     * - Renders filter toggles and popovers for all filter types
     * - Supports controlled and uncontrolled filtering
     * - Integrates with FilterDrawer for batch filter editing
     * - Provides a clear all filters button
     * - Handles overflow and hidden filters
     * - Shares filter state via context for child components
     * - Supports boolean, custom, single-select, multi-select, date, and date range filter types
     * - Date filters include calendar popup for easy selection
     * - Date range filters support start and end date selection
     *
     * @example
     * <Toolbar.Filters
     *   filters={filters}
     *   onFilterChange={handleFilter}
     *   controlledFiltering={true}
     * />
     */
    Filters: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
        filters: import('.').Filter[];
        onFilterChange?: (filters: import('.').Filter[]) => void;
        controlledFiltering?: boolean;
    } & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * ToolbarControlGroup component provides a flex container for grouping related toolbar controls.
     * Can be used for filters, buttons, or other toolbar items.
     *
     * Features:
     * - Groups related toolbar controls in a flex container
     * - Supports accessibility with aria-label
     * - Handles overflow and wrapping based on toolbar context
     * - Integrates with layout utilities for spacing and alignment
     *
     * @example
     * <Toolbar.ControlGroup aria-label="Formatting controls">
     *   <Toolbar.Button icon={BoldIcon} aria-label="Bold" />
     *   <Toolbar.Button icon={ItalicIcon} aria-label="Italic" />
     * </Toolbar.ControlGroup>
     */
    ControlGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
        "aria-label"?: string;
    } & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * ToolbarSearchField component renders a search field for use in toolbars.
     *
     * Features:
     * - Renders a search field styled for toolbar usage
     * - Supports all SearchField props except size
     * - Integrates with toolbar layouts and accessibility
     *
     * @example
     * <Toolbar.Search placeholder="Search..." />
     */
    Search: import('react').ForwardRefExoticComponent<import('./ToolbarSearchField').ToolbarSearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;
};
export declare const ToolbarElement: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
    /**
     * Description of the content this toolbar is associated with, used for accessibility
     */
    associatedContent: string;
    /**
     * Orientation of the toolbar
     * @default horizontal
     */
    direction?: "vertical" | "horizontal";
    /**
     * How to handle overflow when items don't fit
     * @default wrap
     */
    overflow?: ToolbarOverflowTypes;
    /**
     * Additional items to display in the overflow menu
     */
    additionalItems?: ReactElement[];
    /**
     * Size of toolbar items
     * @default xsmall
     */
    size?: ToolbarSize;
} & import('react').RefAttributes<HTMLDivElement>> & {
    /**
     * ToolbarButton component for standard clickable actions within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Designed specifically for toolbar integration
     * - Consistent styling with other toolbar items
     * - Automatic tooltip for icon-only buttons
     * - Overflow menu support
     * - Accessibility enforcement for aria-labels
     * - Ghost and primary appearance options
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.Button icon={BoldIcon} aria-label="Bold text" />
     *
     * @example
     * <Toolbar.Button appearance="primary">
     *   Save
     * </Toolbar.Button>
     */
    Button: import('react').ForwardRefExoticComponent<import('./ToolbarButton').ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * ToolbarButtonToggle component for toggleable actions within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Toggle state management
     * - Designed specifically for toolbar integration
     * - Consistent styling with other toolbar items
     * - Overflow menu support
     * - Accessibility enforcement for aria-labels
     * - Ghost and primary appearance options
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.ButtonToggle icon={BoldIcon} aria-label="Bold" checked={isBold} />
     */
    ButtonToggle: import('react').ForwardRefExoticComponent<import('./ToolbarButtonToggle').ToolbarButtonToggleProps & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * ToolbarButtonLink component for link actions within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Link functionality with href support
     * - Designed specifically for toolbar integration
     * - Consistent styling with other toolbar items
     * - Overflow menu support
     * - Accessibility enforcement for aria-labels
     * - Ghost and primary appearance options
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.ButtonLink href="/help">
     *   Help
     * </Toolbar.ButtonLink>
     */
    ButtonLink: import('react').ForwardRefExoticComponent<import('./ToolbarButtonLink').ToolbarButtonLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
    /**
     * ToolbarSelect component provides a dropdown selector within a toolbar with anvil2 tracking.
     *
     * Features:
     * - Dropdown menu with selectable options
     * - Controlled and uncontrolled usage patterns
     * - Automatic overflow menu integration
     * - Accessibility support with proper ARIA labels
     * - Ghost and primary appearance options
     * - Dropdown arrow icon indicator
     * - Listbox integration for keyboard navigation
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Toolbar.Select
     *   items={fontOptions}
     *   selected="arial"
     *   accessibleLabel="Font family"
     *   onChange={(id) => setFont(id)}
     * />
     */
    Select: import('react').ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
        aiMark?: boolean | import('../../..').AiIconName;
        appearance?: import('../../..').ButtonAppearance;
        size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
        loading?: boolean;
    } & {
        children?: ComponentPropsWithoutRef<"button">["children"];
        icon?: import('../../..').IconProps["svg"] | {
            after: import('../../..').IconProps["svg"];
        } | {
            before: import('../../..').IconProps["svg"];
        };
    } & import('react').RefAttributes<HTMLButtonElement>, "ref"> | Omit<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & LayoutUtilProps & import('../../..').DataTrackingId & {
        aiMark?: boolean | import('../../..').AiIconName;
        appearance?: import('../../..').ButtonAppearance;
        size?: Extract<import('../../..').Size, "xsmall" | "small" | "medium" | "large">;
        loading?: boolean;
    } & {
        children?: never;
        icon?: import('../../..').IconProps["svg"];
    } & import('react').RefAttributes<HTMLButtonElement>, "ref">, "onChange" | "appearance"> & {
        appearance?: import('./types').ToolbarItemAppearance;
        onChange?: (optionId: string) => void;
        selected?: string;
        items: (Record<string, unknown> & {
            id: string;
        } & {
            label: string;
            disabled?: boolean;
        })[];
        accessibleLabel: string;
    } & import('../../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * FilterGroup component displays a group of filters with toggles and a clear button.
     * Also contains the FilterDrawer for additional filter options.
     *
     * Features:
     * - Renders filter toggles and popovers for all filter types
     * - Supports controlled and uncontrolled filtering
     * - Integrates with FilterDrawer for batch filter editing
     * - Provides a clear all filters button
     * - Handles overflow and hidden filters
     * - Shares filter state via context for child components
     * - Supports boolean, custom, single-select, multi-select, date, and date range filter types
     * - Date filters include calendar popup for easy selection
     * - Date range filters support start and end date selection
     *
     * @example
     * <Toolbar.Filters
     *   filters={filters}
     *   onFilterChange={handleFilter}
     *   controlledFiltering={true}
     * />
     */
    Filters: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
        filters: import('.').Filter[];
        onFilterChange?: (filters: import('.').Filter[]) => void;
        controlledFiltering?: boolean;
    } & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * ToolbarControlGroup component provides a flex container for grouping related toolbar controls.
     * Can be used for filters, buttons, or other toolbar items.
     *
     * Features:
     * - Groups related toolbar controls in a flex container
     * - Supports accessibility with aria-label
     * - Handles overflow and wrapping based on toolbar context
     * - Integrates with layout utilities for spacing and alignment
     *
     * @example
     * <Toolbar.ControlGroup aria-label="Formatting controls">
     *   <Toolbar.Button icon={BoldIcon} aria-label="Bold" />
     *   <Toolbar.Button icon={ItalicIcon} aria-label="Italic" />
     * </Toolbar.ControlGroup>
     */
    ControlGroup: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & LayoutUtilProps & {
        "aria-label"?: string;
    } & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * ToolbarSearchField component renders a search field for use in toolbars.
     *
     * Features:
     * - Renders a search field styled for toolbar usage
     * - Supports all SearchField props except size
     * - Integrates with toolbar layouts and accessibility
     *
     * @example
     * <Toolbar.Search placeholder="Search..." />
     */
    Search: import('react').ForwardRefExoticComponent<import('./ToolbarSearchField').ToolbarSearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;
};