import React from 'react';
import type { TabProps, TabsProps } from './Tabs.types';
/**
 * Componente Tab individual del sistema de diseño Siesa
 *
 * Representa un único tab dentro de un grupo de tabs. Incluye soporte para:
 * - Estado activo/inactivo con indicador visual (línea inferior)
 * - Icono opcional a la izquierda del texto
 * - Badge de notificación con contador
 * - Estados hover, focus y disabled
 * - Dark mode completo
 *
 * Mejores prácticas implementadas:
 * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
 * - Dark mode con estrategia 'class' (darkMode: 'class')
 * - Tokens de color consistentes con la documentación
 * - Type safety con TypeScript estricto
 * - Accesibilidad con ARIA labels
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico
 * @see docs/spacing.md - Sistema de espaciado
 *
 * @example
 * ```tsx
 * <Tab
 *   label="Inicio"
 *   active={true}
 *   icon={<HomeIcon />}
 *   badge={3}
 *   onClick={() => setActiveTab('home')}
 * />
 * ```
 */
export declare const Tab: React.FC<TabProps>;
/**
 * Componente Tabs contenedor del sistema de diseño Siesa
 *
 * Agrupa múltiples tabs permitiendo navegación entre diferentes secciones.
 * Soporta modo controlado (con activeId y onChange) y no controlado (con defaultActiveId).
 *
 * Mejores prácticas implementadas:
 * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
 * - Dark mode con estrategia 'class' (darkMode: 'class')
 * - Tokens de color consistentes con la documentación
 * - Type safety con TypeScript estricto
 * - Accesibilidad con ARIA roles y keyboard navigation
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico
 * @see docs/spacing.md - Sistema de espaciado
 *
 * @example
 * ```tsx
 * // Modo controlado
 * const [activeTab, setActiveTab] = useState('home');
 *
 * <Tabs
 *   items={[
 *     { id: 'home', label: 'Inicio', icon: <HomeIcon /> },
 *     { id: 'profile', label: 'Perfil', badge: 3 },
 *     { id: 'settings', label: 'Configuración' },
 *   ]}
 *   activeId={activeTab}
 *   onChange={setActiveTab}
 * />
 *
 * // Modo no controlado
 * <Tabs
 *   items={[...]}
 *   defaultActiveId="home"
 * />
 * ```
 */
export declare const Tabs: React.FC<TabsProps>;
//# sourceMappingURL=Tabs.d.ts.map