import { TNode, Value } from '@tempots/dom';
import { ControlSize, ButtonVariant } from '../../theme';
import { ThemeColorName } from '../../../tokens';
export interface TabItem<T extends string> {
    /** Unique identifier for the tab */
    key: T;
    /** Tab label content */
    label: TNode;
    /** Tab content to display when active */
    content: () => TNode;
    /** Whether the tab is disabled */
    disabled?: Value<boolean>;
    /** ARIA label for accessibility */
    ariaLabel?: Value<string>;
}
export type TabsDirection = 'horizontal' | 'vertical';
export interface TabsOptions<T extends string> {
    /** Array of tab items */
    items: TabItem<T>[];
    /** Currently active tab key */
    value: Value<T>;
    /** Callback when tab changes */
    onChange?: (key: T) => void;
    /** Size of the tabs */
    size?: Value<ControlSize>;
    /** Visual variant */
    variant?: Value<ButtonVariant>;
    /** Color used by certain variants (e.g., filled) */
    color?: Value<ThemeColorName>;
    /** Whether tabs are disabled */
    disabled?: Value<boolean>;
    /** Orientation of the tabs */
    orientation?: Value<TabsDirection>;
    /** Whether to show tab content */
    showContent?: Value<boolean>;
    /** ARIA label for the tab list */
    ariaLabel?: Value<string>;
}
/**
 * Tabs component that provides tabbed navigation with content panels.
 * Follows WAI-ARIA tabs pattern with proper keyboard navigation and accessibility.
 *
 * @example
 * ```typescript
 * const activeTab = prop('tab1')
 *
 * Tabs({
 *   items: [
 *     { key: 'tab1', label: 'First Tab', content: html.div('Content 1') },
 *     { key: 'tab2', label: 'Second Tab', content: html.div('Content 2') },
 *   ],
 *   value: activeTab,
 *   onChange: activeTab.set
 * })
 * ```
 */
export declare function Tabs<T extends string>(options: TabsOptions<T>): TNode;
