/**
 * Composite is a component that may contain navigable items represented by
 * Composite.Item. It's inspired by the WAI-ARIA Composite Role and implements
 * all the keyboard navigation mechanisms to ensure that there's only one
 * tab stop for the whole Composite element. This means that it can behave as
 * a roving tabindex or aria-activedescendant container.
 *
 * @see https://ariakit.org/components/composite
 */
/**
 * External dependencies
 */
import * as Ariakit from '@ariakit/react';
/**
 * Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
 * role, which provides a single tab stop on the page and arrow key navigation
 * through the focusable descendants.
 *
 * @example
 * ```jsx
 * import { Composite } from '@wordpress/components';
 *
 * <Composite>
 *   <Composite.Item>Item 1</Composite.Item>
 *   <Composite.Item>Item 2</Composite.Item>
 * </Composite>
 * ```
 */
export declare const Composite: import("react").ForwardRefExoticComponent<{
    activeId?: Ariakit.CompositeStoreProps["activeId"];
    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
    orientation?: Ariakit.CompositeStoreProps["orientation"];
    rtl?: Ariakit.CompositeStoreProps["rtl"];
} & {
    render?: Ariakit.CompositeProps["render"];
    focusable?: Ariakit.CompositeProps["focusable"];
    disabled?: Ariakit.CompositeProps["disabled"];
    accessibleWhenDisabled?: Ariakit.CompositeProps["accessibleWhenDisabled"];
    onFocusVisible?: Ariakit.CompositeProps["onFocusVisible"];
    children?: Ariakit.CompositeProps["children"];
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | keyof {
    activeId?: Ariakit.CompositeStoreProps["activeId"];
    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
    orientation?: Ariakit.CompositeStoreProps["orientation"];
    rtl?: Ariakit.CompositeStoreProps["rtl"];
}> & import("react").RefAttributes<HTMLDivElement>> & {
    /**
     * Renders a group element for composite items.
     *
     * @example
     * ```jsx
     * import { Composite } from '@wordpress/components';
     *
     * <Composite>
     *   <Composite.Group>
     *     <Composite.GroupLabel>Label</Composite.GroupLabel>
     *     <Composite.Item>Item 1</Composite.Item>
     *     <Composite.Item>Item 2</Composite.Item>
     *   </CompositeGroup>
     * </Composite>
     * ```
     */
    Group: import("react").ForwardRefExoticComponent<import("./types").CompositeGroupProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeGroupProps> & import("react").RefAttributes<HTMLDivElement>> & {
        displayName: string;
    };
    /**
     * Renders a label in a composite group. This component must be wrapped with
     * `Composite.Group` so the `aria-labelledby` prop is properly set on the
     * composite group element.
     *
     * @example
     * ```jsx
     * import { Composite } from '@wordpress/components';
     *
     * <Composite>
     *   <Composite.Group>
     *     <Composite.GroupLabel>Label</Composite.GroupLabel>
     *     <Composite.Item>Item 1</Composite.Item>
     *     <Composite.Item>Item 2</Composite.Item>
     *   </CompositeGroup>
     * </Composite>
     * ```
     */
    GroupLabel: import("react").ForwardRefExoticComponent<import("./types").CompositeGroupLabelProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeGroupLabelProps> & import("react").RefAttributes<HTMLDivElement>> & {
        displayName: string;
    };
    /**
     * Renders a composite item.
     *
     * @example
     * ```jsx
     * import { Composite } from '@wordpress/components';
     *
     * <Composite>
     *   <Composite.Item>Item 1</Composite.Item>
     *   <Composite.Item>Item 2</Composite.Item>
     *   <Composite.Item>Item 3</Composite.Item>
     * </Composite>
     * ```
     */
    Item: import("react").ForwardRefExoticComponent<import("./types").CompositeItemProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "as" | keyof import("./types").CompositeItemProps> & import("react").RefAttributes<HTMLButtonElement>> & {
        displayName: string;
    };
    /**
     * Renders a composite row. Wrapping `Composite.Item` elements within
     * `Composite.Row` will create a two-dimensional composite widget, such as a
     * grid.
     *
     * @example
     * ```jsx
     * import { Composite } from '@wordpress/components';
     *
     * <Composite>
     *   <Composite.Row>
     *     <Composite.Item>Item 1.1</Composite.Item>
     *     <Composite.Item>Item 1.2</Composite.Item>
     *     <Composite.Item>Item 1.3</Composite.Item>
     *   </Composite.Row>
     *   <Composite.Row>
     *     <Composite.Item>Item 2.1</Composite.Item>
     *     <Composite.Item>Item 2.2</Composite.Item>
     *     <Composite.Item>Item 2.3</Composite.Item>
     *   </Composite.Row>
     * </Composite>
     * ```
     */
    Row: import("react").ForwardRefExoticComponent<import("./types").CompositeRowProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeRowProps> & import("react").RefAttributes<HTMLDivElement>> & {
        displayName: string;
    };
    /**
     * Renders an element in a composite widget that receives focus on mouse move
     * and loses focus to the composite base element on mouse leave. This should
     * be combined with the `Composite.Item` component.
     *
     * @example
     * ```jsx
     * import { Composite } from '@wordpress/components';
     *
     * <Composite>
     *   <Composite.Hover render={ <Composite.Item /> }>
     *     Item 1
     *   </Composite.Hover>
     *   <Composite.Hover render={ <Composite.Item /> }>
     *     Item 2
     *   </Composite.Hover>
     * </Composite>
     * ```
     */
    Hover: import("react").ForwardRefExoticComponent<import("./types").CompositeHoverProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeHoverProps> & import("react").RefAttributes<HTMLDivElement>> & {
        displayName: string;
    };
    /**
     * Renders a component that adds typeahead functionality to composite
     * components. Hitting printable character keys will move focus to the next
     * composite item that begins with the input characters.
     *
     * @example
     * ```jsx
     * import { Composite } from '@wordpress/components';
     *
     * <Composite render={ <CompositeTypeahead /> }>
     *   <Composite.Item>Item 1</Composite.Item>
     *   <Composite.Item>Item 2</Composite.Item>
     * </Composite>
     * ```
     */
    Typeahead: import("react").ForwardRefExoticComponent<import("./types").CompositeTypeaheadProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeTypeaheadProps> & import("react").RefAttributes<HTMLDivElement>> & {
        displayName: string;
    };
    /**
     * The React context used by the composite components. It can be used by
     * to access the composite store, and to forward the context when composite
     * sub-components are rendered across portals (ie. `SlotFill` components)
     * that would not otherwise forward the context to the `Fill` children.
     *
     * @example
     * ```jsx
     * import { Composite } from '@wordpress/components';
     * import { useContext } from '@wordpress/element';
     *
     * const compositeContext = useContext( Composite.Context );
     * ```
     */
    Context: import("react").Context<import("./types").CompositeContextProps> & {
        displayName: string;
    };
};
//# sourceMappingURL=index.d.ts.map