import React, { type ReactNode } from 'react';
import type { RenderProps } from '../../util/utility-types';
import type { Align } from '../../util/variant-types';
import { type IconName } from '../Icon';
export type TabGroupProps = {
    /**
     * Reference to another element that describes the purpose of the set of tabs.
     */
    'aria-labelledby'?: string;
    /**
     * Calls back with the active index
     */
    onChange?: (index: number) => void;
    /**
     * Child node(s) that can be nested inside component
     */
    children?: ReactNode;
    /**
     * CSS class names that can be appended to the component.
     */
    className?: string;
    /**
     * HTML id for the component
     */
    id?: string;
    /**
     * Passed down to initially set the activeIndex state
     */
    activeIndex?: number;
    /**
     * Alignment of the tabs, when there is additional space available (not full width)
     */
    align?: Align;
    /**
     * Whether the divider line (separating tabs from content) is visible.
     *
     * **Default is `"true"`**.
     */
    hasDivider?: boolean;
    /**
     *
     */
    isSticky?: boolean;
    /**
     * Control how the indidivual tabs take up the available space.
     *
     * **Default is `"auto"`**.
     */
    tabWidth?: 'auto' | 'full';
    /**
     * Controls whether we are using the default or inverted pallet for this component
     *
     * **Default is `"default"`**.
     */
    variant?: 'default' | 'inverse';
};
export type TabProps = {
    /**
     * aria-labelledby attribute that associates a tab panel with its accompanying tab title
     */
    'aria-labelledby'?: string;
    /**
     * Child node(s) that can be nested inside component
     */
    children?: ReactNode;
    /**
     * CSS class names that can be appended to the component.
     */
    className?: string;
    /**
     * HTML id for the component
     */
    id?: string;
    /**
     * Number passed down from Tabs to show the active index state of Tabs
     */
    activeIndex?: number;
    /**
     * Text used to label the tab in the tab list
     */
    title: string;
    /**
     * Icon name from the defined set of EDS icons
     *
     * **NOTE**: this cannot be used with `illustration`.
     */
    icon?: IconName;
    /**
     * Illustration to appear above the tab text
     *
     * **NOTE**: this cannot be used with `icon`
     */
    illustration?: ReactNode;
};
type TabButtonProps = RenderProps<TabContextArgs>;
export type TabContextArgs = {
    isActive: boolean;
    title: string;
};
/**
 * `import {TabGroup} from "@chanzuckerberg/eds";`
 *
 * List of of links where each link toggles open associated information in a tab panel.
 *
 * Individual tabs allow for a simple text tab header using the `title` prop on each `<Tab>` instance.
 * For a more custom tabs, you can use an additonal `<Tab.Button>` sub-component with a render prop exposing `active` and `title`.
 */
export declare const TabGroup: {
    ({ activeIndex, align, "aria-labelledby": ariaLabelledBy, children, className, hasDivider, isSticky, onChange, tabWidth, variant, ...other }: TabGroupProps): React.JSX.Element;
    displayName: string;
    Tab: {
        ({ "aria-labelledby": ariaLabelledBy, children, className, icon, id, illustration, title, ...other }: TabProps): React.JSX.Element;
        displayName: string;
        Button: {
            (props: TabButtonProps): React.JSX.Element;
            displayName: string;
        };
    };
};
/**
 * `import {Tab} from "@chanzuckerberg/eds";`
 *
 * Individual tab within the Tabs component.
 * - Use the `title` prop for text-only tab headers
 * - For more custom tab headers use `<Tab.Button>` which uses a render prop with state information
 */
export declare const Tab: {
    ({ "aria-labelledby": ariaLabelledBy, children, className, icon, id, illustration, title, ...other }: TabProps): React.JSX.Element;
    displayName: string;
    Button: {
        (props: TabButtonProps): React.JSX.Element;
        displayName: string;
    };
};
export {};