import React from 'react';
import type { NavigationBarProps } from './NavigationBar.types';
/**
 * NavigationBar del sistema de diseño Siesa
 *
 * **Componente de navegación inferior (Bottom Navigation Bar) para móvil.**
 * Permite al usuario navegar entre vistas principales de la aplicación.
 * Diseñado para contener 3-5 ítems de navegación.
 *
 * **🔄 Navegación Responsive:**
 * El NavigationRail (navegación lateral vertical) se convierte en NavigationBar
 * (navegación inferior horizontal) cuando la pantalla es móvil. Esta es una
 * práctica recomendada de UX para aprovechar mejor el espacio en diferentes
 * dispositivos:
 * - **Desktop/Tablet**: Usar NavigationRail (lateral)
 * - **Mobile**: Usar NavigationBar (inferior)
 *
 * **Características:**
 * - Soporta hasta 5 ítems de navegación (recomendado: 3-5)
 * - Cada ítem tiene icono + label
 * - Indicador visual de ítem activo (fondo azul claro)
 * - Estados: active, hover, disabled
 * - Dark mode completo
 * - Accesibilidad con ARIA labels
 *
 * **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
 * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
 * - Iconos de 16x16px según especificaciones de Figma
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico (Label XXSmall)
 * @see docs/spacing.md - Sistema de espaciado
 * @see NavigationRail - Componente de navegación lateral para desktop
 *
 * @example
 * ```tsx
 * const items = [
 *   { id: 'home', icon: <HomeIcon />, label: 'Inicio', active: true },
 *   { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
 *   { id: 'profile', icon: <ProfileIcon />, label: 'Perfil' },
 * ];
 *
 * <NavigationBar
 *   items={items}
 *   activeItemId="home"
 *   onItemClick={(id) => console.log('Clicked:', id)}
 * />
 * ```
 *
 * @example
 * // Patrón responsive: NavigationRail en desktop, NavigationBar en mobile
 * ```tsx
 * function ResponsiveNav() {
 *   return (
 *     <>
 *       // NavigationRail para desktop/tablet
 *       <div className="hidden md:block">
 *         <NavigationRail items={items} />
 *       </div>
 *
 *       // NavigationBar para móvil
 *       <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
 *         <NavigationBar items={items} />
 *       </div>
 *     </>
 *   );
 * }
 * ```
 */
export declare const NavigationBar: React.FC<NavigationBarProps>;
//# sourceMappingURL=NavigationBar.d.ts.map