import React, { PureComponent } from 'react';
import { PickDefaultProps } from '../utils-typescript';
export interface TabsProps {
    /**
     * The id of the active tab, defaults to an empty string.
     */
    readonly activeTab?: string | number;
    /**
     * Callback when the active tab id changes.
     */
    readonly onActiveTabChange?: (activeTab: string | number) => void;
    /**
     * An optional className to render on the wrapping div.
     */
    readonly className?: string;
    /** @internal experimental api for now, only to be used in the Neos.Ui core */
    readonly vertical?: boolean;
    /**
     * The children panels to render.
     */
    readonly children: ReadonlyArray<React.ReactElement<any>>;
    /**
     * A css theme to be injected.
     */
    readonly theme?: TabsTheme;
}
interface TabsTheme extends TabMenuItemTheme {
    readonly 'tabs': string;
    readonly 'tabs--vertical': string;
    readonly 'tabs__content': string;
    readonly 'tabs__panel': string;
    readonly 'tabNavigation': string;
}
export declare const tabsDefaultProps: PickDefaultProps<TabsProps, 'activeTab'>;
interface TabsState {
    readonly activeTab: string | number;
}
export default class Tabs extends PureComponent<TabsProps> {
    static Panel: import("@friendsofreactjs/react-css-themr").ThemedComponentClass<import("./panel").PanelProps & {
        mapThemrProps?: import("@friendsofreactjs/react-css-themr").TMapThemrProps<import("./panel").PanelProps> | undefined;
        innerRef?: React.Ref<unknown> | undefined;
    }, {}>;
    state: TabsState;
    static defaultProps: Readonly<Required<Pick<TabsProps, "activeTab">>>;
    private updateActiveTab;
    UNSAFE_componentWillReceiveProps(newProps: TabsProps): void;
    getActiveTab(): string | number;
    renderMenuItems(): JSX.Element;
    private handleTabNavItemClick;
    renderPanels(): JSX.Element;
    render(): JSX.Element;
}
export interface TabMenuItemProps {
    /**
     * The index
     */
    index: number;
    /**
     * The identifier which will be handed over to the onClick handler.
     */
    id: string | number;
    /**
     * The title to render for the given Panel.
     */
    title?: string;
    /**
     * The click handler which will be called with the passed index as it's only argument.
     */
    onClick: (id: string | number) => void;
    /**
     * A boolean which controls if the rendered anchor is displayed as active or not.
     */
    isActive?: boolean;
    /**
     * An optional icon identifier, if one is passed, an Icon will be rendered besides the title.
     */
    icon?: string;
    /**
     * An optional tooltip for the given Panel.
     */
    tooltip?: string;
    theme?: TabMenuItemTheme;
}
interface TabMenuItemTheme {
    readonly 'tabNavigation__item': string;
    readonly 'tabNavigation__item--isActive': string;
    readonly 'tabNavigation__itemBtn': string;
    readonly 'tabNavigation__itemBtnIcon': string;
    readonly 'tabNavigation__itemBtnIcon--hasLabel': string;
}
export declare const tabMenuItemDefaultProps: PickDefaultProps<TabMenuItemProps, 'isActive'>;
export declare class TabMenuItem extends PureComponent<TabMenuItemProps> {
    static readonly defaultProps: Readonly<Required<Pick<TabMenuItemProps, "isActive">>>;
    render(): JSX.Element;
    private readonly handleClick;
}
export {};