import * as React from 'react';
import { ComponentSync } from '../../core/ComponentSync.js';
import './TS_Tabs.scss';
export type Tab = {
    title: React.ReactNode | (() => React.ReactNode);
    content: React.ReactNode | (() => React.ReactNode);
    uid: string;
    disabled?: boolean;
};
export type Props_Tabs = {
    id?: string;
    persistSelection?: boolean;
    selectedTabId?: string;
    tabs: Tab[];
    className?: string;
    tabsHeaderClass?: string;
    tabsContentClass?: string;
    /**
     * Called only after clicking on a tab. Not called when a default first tab is selected during render.
     * @param selected id of the selected tab.
     */
    onSelected?: (selectedTabId: string) => void;
    scrollToSelected?: boolean;
};
type State = {
    tabs: Tab[];
    selectedTabId?: string;
};
/**
 * Tabs made easy
 *
 *
 * <b>SCSS:</b>
 * ```scss
 * .ts-tabs {
 *   .ts-tabs__tabs-header {
 *     .ts-tabs__tab {}
 *     .ts-tabs__focusedTabId {}
 *     .unselectable {}
 *   }
 *
 *   .ts-tabs__content {}
 * }
 * ```
 */
export declare class TS_Tabs extends ComponentSync<Props_Tabs, State> {
    constructor(p: Props_Tabs);
    protected deriveStateFromProps(nextProps: Props_Tabs, state: State): State;
    componentDidUpdate(prevProps: Readonly<Props_Tabs>, prevState: Readonly<State>, snapshot?: any): void;
    private getStorageKey;
    selectOnClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, tab: Tab) => void;
    private scrollToSelectedTab;
    render(): "" | import("react/jsx-runtime").JSX.Element;
}
export {};