import { type ReactNode } from 'react';
/**
 * Single tab descriptor consumed by {@link UnderlinedTabs}.
 *
 * `hidden` lets a parent gate a tab on permissions/feature flags without
 * destructuring the tab list — the tab is skipped in rendering and in keyboard
 * navigation.
 */
export interface UnderlinedTab<T extends string> {
    id: T;
    /**
     * Tab label. Accepts any ReactNode so pages can render compound labels
     * (e.g. text + a counter badge). When non-string, the parent is responsible
     * for accessible naming (e.g. visually-hidden text within the node).
     */
    label: ReactNode;
    icon?: ReactNode;
    hidden?: boolean;
}
export interface UnderlinedTabsProps<T extends string> {
    tabs: ReadonlyArray<UnderlinedTab<T>>;
    activeTab: T;
    onTabChange: (tab: T) => void;
    /** Accessible label for the tablist (announced by screen readers). */
    ariaLabel: string;
    /**
     * Optional extension content rendered at the end of the tablist
     * (typically a `<Slot>` from the extension system). It is rendered outside
     * the iteration so it does not interfere with keyboard navigation.
     */
    children?: ReactNode;
    className?: string;
}
/**
 * Shared "underlined" tabs component used by SmartStack detail pages.
 *
 * Visual contract:
 * - Container has a bottom border (`--border-color`); active tab overlaps it
 *   with `border-b-2 border-[var(--color-accent-600)]` and accented text.
 * - Inactive tabs use `text-[var(--text-secondary)]` and hover to
 *   `text-[var(--text-primary)]`.
 *
 * Accessibility contract:
 * - `role="tablist"` + `aria-label` on the container.
 * - `role="tab"` + `id="tab-{id}"` + `aria-selected` + `aria-controls="tabpanel-{id}"`
 *   on each button. Only the active tab has `tabIndex={0}` (roving tabindex).
 * - Keyboard nav: ArrowLeft/ArrowRight cycles through visible tabs and focuses
 *   the new tab; Home/End jump to first/last; activation moves focus and calls
 *   `onTabChange` so the URL/state stays in sync (manual activation pattern,
 *   compatible with the lazy data loading SmartStack uses on tab change).
 */
export declare function UnderlinedTabs<T extends string>({ tabs, activeTab, onTabChange, ariaLabel, children, className, }: UnderlinedTabsProps<T>): import("react/jsx-runtime").JSX.Element;
export interface TabPanelProps<T extends string> {
    activeTab: T;
    id: T;
    children: ReactNode;
    className?: string;
}
/**
 * Accessible panel companion to {@link UnderlinedTabs}.
 *
 * The panel is always mounted but uses the native `hidden` attribute when
 * inactive — React keeps its state across tab switches (useful for forms).
 * If a page needs to mount/unmount its panel content (lazy load, memory),
 * it can keep the conditional rendering pattern (`{activeTab === 'x' && ...}`)
 * but should still wrap the content in this component so the ARIA contract
 * (role=tabpanel, aria-labelledby) is met.
 */
export declare function TabPanel<T extends string>({ activeTab, id, children, className, }: TabPanelProps<T>): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=UnderlinedTabs.d.ts.map