import { ReactNode } from 'react';
export interface TabItem {
    id: string;
    label: string;
    content: ReactNode;
    /**
     * Trailing node rendered next to the tab label: a count pill, a status
     * badge, whatever the consumer's vocabulary calls for.
     *
     * This used to sit beside a `tag` prop that took one of four fixed names,
     * required / recommended / beta / experimental, and rendered a Badge for
     * it. Those are one product's guide vocabulary, and the arrangement had
     * already split across the boundary: the badge variant lived here while the
     * label text had to be passed in from the consumer's locale bundle. A
     * consumer that wants that badge renders it here, and owns both halves.
     */
    labelExtra?: ReactNode;
    /**
     * Optional leading node rendered before the tab label (e.g. an icon).
     * Useful when migrating segmented controls that prefix the label with
     * an SVG glyph (e.g. ImportExportDialog source toggle: File / Paste / URL).
     */
    labelPrefix?: ReactNode;
    /** Assign this tab to a group (used with the `groups` prop) */
    groupId?: string;
}
export interface TabGroupMeta {
    id: string;
    label: string;
}
export type TabOverflowMode = "dropdown" | "menu";
/**
 * Visual variant of the tab bar.
 *
 * - `"underlined"` (default): pill container with raised active tab and scroll
 *   arrows; used for primary page-level navigation that may overflow.
 * - `"segmented"`: gray-background segmented control with raised active tab;
 *   intended for short, fixed-arity in-page mode toggles.
 * - `"compact"`: smaller segmented control with reduced padding; used where
 *   the tab bar shares a row with other controls (e.g. StatisticsPage).
 */
export type TabVariant = "underlined" | "segmented" | "compact";
export interface TabsProps {
    tabs: TabItem[];
    /** Group definitions for organizing tabs with separators and labels */
    groups?: TabGroupMeta[];
    defaultTab?: string;
    activeTab?: string;
    onTabChange?: (tabId: string) => void;
    className?: string;
    panelClassName?: string;
    ariaLabel?: string;
    /** Show scroll arrows and overflow controls (default: true) */
    showOverflowControls?: boolean;
    /** Show group labels in the tab bar and overflow menu (default: true) */
    showGroupLabels?: boolean;
    /**
     * Overflow strategy for small screens:
     * - "dropdown": mobile dropdown trigger (< 480px) — default when no groups
     * - "menu": overflow menu button (< 768px) — default when groups are provided
     */
    overflowMode?: TabOverflowMode;
    /**
     * Visual variant. Defaults to `"underlined"` (the original Tabs look).
     * Use `"segmented"` for iOS-style pill toggles, `"compact"` for a smaller
     * variant suitable for in-header use alongside other controls.
     */
    variant?: TabVariant;
    /**
     * When using `variant="segmented"` or `"compact"`, make each tab fill the
     * container evenly (flex: 1 per tab). Useful for short, equal-arity mode
     * toggles like the Models page tab bar. Defaults to false.
     */
    fillContainer?: boolean;
    /**
     * Render the tab panel (the active tab's `content`) below the tab list.
     * Defaults to true. Set to false when the consumer manages its own panel
     * rendering outside the Tabs component (e.g. pages that interleave panels
     * with other in-header elements).
     *
     * When false, each `TabItem.content` is ignored — the consumer is expected
     * to inspect `activeTab` / `onTabChange` and render its own panel.
     */
    renderPanel?: boolean;
    /** Accessible label for the overflow-menu trigger button. Default: "More tabs" */
    moreTabsLabel?: string;
    /** Accessible label for the mobile dropdown trigger. Default: "Select tab" */
    selectTabLabel?: string;
    /** Accessible label for the left scroll-arrow button. Default: "Scroll left" */
    scrollLeftLabel?: string;
    /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
    scrollRightLabel?: string;
}
export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, }: TabsProps): import("react").JSX.Element;