import { ComponentPropsWithoutRef } from 'react';
import { LayoutUtilProps } from '../../types';
/**
 * Props for the Tab component
 * @extends Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag">
 * @extends LayoutUtilProps
 */
export type TabProps = Omit<ComponentPropsWithoutRef<"div">, "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag"> & LayoutUtilProps & {
    /**
     * The index of the tab that should be active by default.
     * Use for uncontrolled usage. For controlled usage, use `index` instead.
     * @default 0
     */
    defaultIndex?: number;
    /**
     * The index of the currently active tab.
     * Use for controlled usage. For uncontrolled usage, use `defaultIndex` instead.
     */
    index?: number;
    /**
     * Callback fired when the active tab changes.
     * Use with `index` for controlled usage.
     * @param index The index of the newly active tab
     */
    onIndexChange?: (index: number) => void;
    /**
     * Whether the tabs should fill the available width.
     * @default false
     */
    fill?: boolean;
};
/**
 * Tab component for organizing content into multiple sections with navigation.
 *
 * Features:
 * - Keyboard navigation support (arrow keys, Enter, Space)
 * - Accessible with proper ARIA roles and attributes
 * - Smooth animations and transitions
 * - RTL language support
 * - Automatic focus management
 * - Scroll behavior for overflow tabs
 * - Compound component pattern with Tab.Button, Tab.List, and Tab.Panel
 * - Supports controlled state via `index` and `onIndexChange` props
 * - Supports layout utilities for positioning and spacing
 *
 * @example
 * // Uncontrolled
 * <Tab defaultIndex={0}>
 *   <Tab.List>
 *     <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
 *     <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
 *   </Tab.List>
 *   <Tab.Panel id="panel1">Content for first tab</Tab.Panel>
 *   <Tab.Panel id="panel2">Content for second tab</Tab.Panel>
 * </Tab>
 *
 * @example
 * // Controlled
 * <Tab index={activeIndex} onIndexChange={setActiveIndex}>
 *   <Tab.List>
 *     <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
 *     <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
 *   </Tab.List>
 *   <Tab.Panel id="panel1">Content for first tab</Tab.Panel>
 *   <Tab.Panel id="panel2">Content for second tab</Tab.Panel>
 * </Tab>
 */
export declare const Tab: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & LayoutUtilProps & {
    /**
     * The index of the tab that should be active by default.
     * Use for uncontrolled usage. For controlled usage, use `index` instead.
     * @default 0
     */
    defaultIndex?: number;
    /**
     * The index of the currently active tab.
     * Use for controlled usage. For uncontrolled usage, use `defaultIndex` instead.
     */
    index?: number;
    /**
     * Callback fired when the active tab changes.
     * Use with `index` for controlled usage.
     * @param index The index of the newly active tab
     */
    onIndexChange?: (index: number) => void;
    /**
     * Whether the tabs should fill the available width.
     * @default false
     */
    fill?: boolean;
} & import('react').RefAttributes<HTMLDivElement>> & {
    /**
     * TabButton component for individual tab navigation buttons.
     *
     * Features:
     * - Automatic ARIA attributes for accessibility
     * - Visual indicator for active state
     * - Keyboard navigation support
     * - Smooth animations with reduced motion support
     * - Proper focus management
     * - RTL language support
     * - Automatic tracking ID generation for analytics
     *
     * @example
     * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
     *   First Tab
     * </Tab.Button>
     */
    Button: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "disabled" | "onClick"> & {
        id: string;
        controls: string;
        onClick?: (e: import('react').MouseEvent<HTMLButtonElement>, index?: number) => void;
    } & import('../..').DataTrackingId & import('react').RefAttributes<HTMLButtonElement>>;
    /**
     * TabList component for containing and managing tab buttons.
     *
     * Features:
     * - Horizontal scrolling for overflow tabs
     * - Navigation arrows for overflow content
     * - RTL language support
     * - Automatic overflow detection
     * - Proper ARIA roles for accessibility
     * - Smooth scrolling behavior
     * - Visual indicator positioning
     *
     * @example
     * <Tab.List>
     *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
     *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
     *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
     * </Tab.List>
     */
    List: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
    /**
     * TabPanel component for displaying tab content.
     *
     * Features:
     * - Automatic visibility based on active tab
     * - Smooth fade animations
     * - Proper ARIA attributes for accessibility
     * - Automatic association with tab buttons
     * - Focus management
     * - Layout animations
     *
     * @example
     * <Tab.Panel id="panel1">
     *   <h2>First Tab Content</h2>
     *   <p>This is the content for the first tab.</p>
     * </Tab.Panel>
     */
    Panel: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart"> & {
        id: string;
    } & import('react').RefAttributes<HTMLDivElement>>;
};