import React from 'react';
import type { NavbarProps } from './Navbar.types';
/**
 * Componente Navbar del sistema de diseño Siesa
 * Basado en especificaciones de Figma con Tailwind CSS
 *
 * Barra de navegación principal con soporte completo para responsive y dark mode.
 * Incluye logo, nombre de producto, badge de ambiente, botones de acción y dropdown de usuario.
 *
 * **Variantes de dispositivo:**
 * - `responsive`: Se adapta automáticamente al viewport (por defecto)
 * - `desktop`: Versión completa (1360x64px) con todos los elementos
 * - `tablet`: Versión tablet (1024x64px) con elementos reducidos
 * - `mobile`: Versión simplificada (428x40px) con logo icono y avatar circular
 *
 * **Elementos incluidos:**
 * - Botón de navegación (solo desktop/tablet) - Usa shadow-button-inset
 * - Logo del negocio (solo desktop/tablet)
 * - Dividers verticales (solo desktop/tablet)
 * - Logo Siesa (completo en desktop/tablet, icono en mobile)
 * - Nombre del producto (solo desktop/tablet) - Heading/Tiny (20px Bold)
 * - Badge de ambiente con icono de advertencia (yellow)
 * - Botones de acción (search solo mobile, cart, notifications)
 * - Dropdown de usuario con avatar, nombre y email
 * - Logo Siesa trailing (solo desktop)
 *
 * **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 (NO colores hardcodeados)
 * - Focus rings adaptativos para light y dark mode
 * - Type safety con TypeScript estricto
 * - Responsive design con breakpoints md: y lg:
 * - Tipografía del sistema: Heading/Tiny, Paragraph/Small, Paragraph/Tiny
 * - Spacing del sistema (4px, 8px, 12px, 16px, 32px)
 *
 * @see docs/colors.md - Sistema de colores y tokens dark mode
 * @see docs/typography.md - Sistema tipográfico (Heading, Paragraph)
 * @see docs/spacing.md - Sistema de espaciado
 * @see docs/shadows.md - Sistema de sombras (button-inset)
 *
 * @example
 * ```tsx
 * <Navbar
 *   productName="Mi Producto"
 *   environmentBadge="Ambiente de Pruebas"
 *   userDropdown={{
 *     avatar: "/path/to/avatar.jpg",
 *     name: "Juan Pérez",
 *     email: "juan@ejemplo.com",
 *   }}
 *   notifications={{
 *     cart: 99,
 *     bell: true,
 *   }}
 *   onNavigationClick={() => router.back()}
 *   onCartClick={() => openCart()}
 *   onNotificationsClick={() => openNotifications()}
 * />
 * ```
 */
export declare const Navbar: React.FC<NavbarProps>;
//# sourceMappingURL=Navbar.d.ts.map