import { FC, ReactNode } from 'react';
/**
 * Tab Item Interface
 *
 * Represents a single tab in the tab navigation.
 */
export interface TabItem {
    /** Unique identifier for the tab */
    id: string;
    /** Tab label */
    label: string;
    /** Optional icon */
    icon?: ReactNode;
    /** Optional badge (notification count, etc.) */
    badge?: string | number;
    /** Whether tab is disabled */
    disabled?: boolean;
    /** Click handler for tab */
    onClick?: () => void;
}
/**
 * Tabs Props Interface
 *
 * Generic tab navigation component that accepts all data via props.
 * No dependencies on routing libraries - pure presentation component.
 */
export interface TabsProps {
    /** Array of tab items */
    items: TabItem[];
    /** Currently active tab ID */
    activeTabId: string;
    /** Tab change handler */
    onTabChange: (tabId: string) => void;
    /** Visual variant */
    variant?: 'default' | 'underline' | 'pills';
    /** Size variant */
    size?: 'sm' | 'md' | 'lg';
    /** Whether tabs should fill container width */
    fullWidth?: boolean;
    /** Additional CSS classes */
    className?: string;
}
/**
 * Tabs Component
 *
 * Generic tab navigation for app shells. Pure presentation component
 * that accepts all data via props.
 *
 * Features:
 * - Multiple visual variants (default, underline, pills)
 * - Active state indication
 * - Icon and badge support
 * - Disabled tabs
 * - Keyboard navigation (arrow keys)
 * - Accessible tab navigation
 *
 * Uses semantic tokens for styling, which must be provided by the shell.
 *
 * @example
 * ```tsx
 * <Tabs
 *   items={[
 *     { id: 'overview', label: 'Overview', icon: <HomeIcon /> },
 *     { id: 'activity', label: 'Activity', badge: 5 },
 *     { id: 'settings', label: 'Settings' }
 *   ]}
 *   activeTabId={currentTab}
 *   onTabChange={setCurrentTab}
 *   variant="underline"
 * />
 * ```
 */
export declare const Tabs: FC<TabsProps>;
//# sourceMappingURL=Tabs.d.ts.map