siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Navbar/Navbar.tsx

@@ -1,755 +1,755 @@
-import React from 'react';
-import type { NavbarProps } from './Navbar.types';
-import { Badge } from '../Badge/Badge';
-import {
-  ShoppingCartIcon,
-  BellIcon,
-  MagnifyingGlassIcon,
-  ChevronDownIcon,
-  ExclamationTriangleIcon,
-  ArrowLeftStartOnRectangleIcon,
-} from './icons';
-
-/**
- * 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 const Navbar: React.FC<NavbarProps> = ({
-  logo,
-  productName = 'Nombre Producto',
-  environmentBadge,
-  userDropdown,
-  actions,
-  notifications,
-  className = '',
-  variant = 'responsive',
-  hideActionButtons = false,
-  leadingAction,
-  siesaLogo,
-  showBusinessLogo = false,
-  showSiesaLogoLeading = true,
-  showSiesaLogoTrailing = false,
-  onNavigationClick,
-  onSearchClick,
-  onCartClick,
-  onNotificationsClick,
-}) => {
-  // ===== CLASES COMUNES PARA BOTONES DE ACCIÓN =====
-  const actionButtonClasses = `
-    box-border
-    flex
-    flex-col
-    items-center
-    justify-center
-    p-1
-    relative
-    rounded-md
-    shrink-0
-    text-primary-custom-600
-    hover:bg-background-secondary
-    active:scale-95
-    focus:outline-none
-    focus:ring-2
-    focus:ring-primary-custom-400
-    focus:ring-offset-2
-    dark:text-primary-custom-600
-    dark:hover:bg-dark-bg-secondary
-    dark:active:scale-95
-    dark:focus:ring-dark-border-custom
-    dark:focus:ring-offset-dark-bg-primary
-    transition-all
-    duration-150
-  `;
-
-  // ===== CLASES PARA BOTÓN DE NAVEGACIÓN PRIMARIO =====
-  const navigationButtonClasses = `
-    bg-primary-custom-600
-    text-primary-inverse-content
-    border
-    border-primary-custom-600
-    shadow-button-inset
-    hover:bg-primary-custom-500
-    active:scale-95
-    focus:outline-none
-    focus:ring-2
-    focus:ring-primary-custom-400
-    focus:ring-offset-2
-    dark:bg-dark-bg-inverse
-    dark:text-dark-content-inverse
-    dark:border-dark-bg-inverse
-    dark:hover:bg-dark-bg-inverse/90
-    dark:active:scale-95
-    dark:focus:ring-dark-border-custom
-    dark:focus:ring-offset-dark-bg-primary
-    box-border
-    flex
-    flex-col
-    items-center
-    justify-center
-    p-3
-    relative
-    rounded-md
-    shrink-0
-    transition-all
-    duration-150
-  `;
-
-  // ===== HELPER: Es mobile (variante o responsive en mobile breakpoint) =====
-  const isMobile = variant === 'mobile';
-  const isDesktop = variant === 'desktop';
-  const isTablet = variant === 'tablet';
-  const isResponsive = variant === 'responsive';
-
-  // ===== BOTÓN DE NAVEGACIÓN =====
-  const NavigationButton = () => {
-    if (isMobile) return null;
-
-    const buttonContent = (
-      <div className="overflow-hidden relative shrink-0 w-4 h-4">
-        <ArrowLeftStartOnRectangleIcon />
-      </div>
-    );
-
-    if (isDesktop || isTablet) {
-      return (
-        <button
-          className={navigationButtonClasses}
-          aria-label="Volver"
-          onClick={onNavigationClick}
-        >
-          {buttonContent}
-        </button>
-      );
-    }
-
-    // Responsive: Solo visible en md: y superiores
-    return (
-      <button
-        className={`hidden md:flex ${navigationButtonClasses}`}
-        aria-label="Volver"
-        onClick={onNavigationClick}
-      >
-        {buttonContent}
-      </button>
-    );
-  };
-
-  // ===== BUSINESS LOGO (Logo del cliente/producto) =====
-  // Solo se muestra si showBusinessLogo es true
-  const BusinessLogo = () => {
-    if (isMobile || !showBusinessLogo) return null;
-
-    const logoContent = (
-      <img
-        src="/,Business Logo.png"
-        alt="Business Logo"
-        className="w-full h-full object-contain"
-      />
-    );
-
-    if (isDesktop) {
-      return (
-        <div className="overflow-hidden relative shrink-0 w-[168px] h-[30px]">
-          {logoContent}
-        </div>
-      );
-    }
-
-    if (isTablet) {
-      return (
-        <div className="overflow-hidden relative shrink-0 w-[140px] h-[25px]">
-          {logoContent}
-        </div>
-      );
-    }
-
-    // Responsive: Visible en md: con tamaño desktop, lg: con tamaño completo
-    return (
-      <div className="hidden md:block overflow-hidden relative shrink-0 w-[140px] lg:w-[168px] h-[25px] lg:h-[30px]">
-        {logoContent}
-      </div>
-    );
-  };
-
-  // ===== SIESA LOGO (Logo de Siesa - Leading) =====
-  // Se controla con showSiesaLogoLeading
-  // En mobile siempre se muestra el icono de Siesa en leading
-  const SiesaLogoLeading = () => {
-    const logoFull = (
-      <img
-        src="/.Siesa Logo.png"
-        alt="Siesa"
-        className="w-full h-full object-contain"
-      />
-    );
-
-    const logoMobile = (
-      <img
-        src="/siesa_logo_mobile.png"
-        alt="Siesa"
-        className="w-full h-full object-contain"
-      />
-    );
-
-    // En mobile siempre se muestra el icono de Siesa
-    if (isMobile) {
-      return (
-        <div className="overflow-hidden relative shrink-0 w-[30px] h-[30px]">
-          {logoMobile}
-        </div>
-      );
-    }
-
-    // En desktop/tablet: Se controla con showSiesaLogoLeading
-    if (!showSiesaLogoLeading) return null;
-
-    if (isDesktop) {
-      return (
-        <div className="overflow-hidden relative shrink-0 w-[120px] h-[30px]">
-          {logoFull}
-        </div>
-      );
-    }
-
-    if (isTablet) {
-      return (
-        <div className="overflow-hidden relative shrink-0 w-[100px] h-[25px]">
-          {logoFull}
-        </div>
-      );
-    }
-
-    // Responsive
-    return (
-      <>
-        {/* Mobile: Logo icono (30x30) - siempre visible */}
-        <div className="md:hidden overflow-hidden relative shrink-0 w-[30px] h-[30px]">
-          {logoMobile}
-        </div>
-        {/* Tablet/Desktop: Se controla con showSiesaLogoLeading */}
-        {showSiesaLogoLeading && (
-          <>
-            {/* Tablet: Logo completo (100x25) */}
-            <div className="hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]">
-              {logoFull}
-            </div>
-            {/* Desktop: Logo completo (120x30) */}
-            <div className="hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]">
-              {logoFull}
-            </div>
-          </>
-        )}
-      </>
-    );
-  };
-
-  // ===== SIESA LOGO (Trailing) =====
-  // Se controla con showSiesaLogoTrailing
-  const SiesaLogoTrailing = () => {
-    // Se controla con showSiesaLogoTrailing
-    if (!showSiesaLogoTrailing || isMobile) return null;
-
-    const logoFull = (
-      <img
-        src="/.Siesa Logo.png"
-        alt="Siesa"
-        className="w-full h-full object-contain"
-      />
-    );
-
-    if (isDesktop) {
-      return (
-        <div className="overflow-hidden relative shrink-0 w-[120px] h-[30px]">
-          {logoFull}
-        </div>
-      );
-    }
-
-    if (isTablet) {
-      return (
-        <div className="overflow-hidden relative shrink-0 w-[100px] h-[25px]">
-          {logoFull}
-        </div>
-      );
-    }
-
-    // Responsive: Visible en md: (tablet y desktop)
-    return (
-      <>
-        {/* Tablet: Logo completo (100x25) */}
-        <div className="hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]">
-          {logoFull}
-        </div>
-        {/* Desktop: Logo completo (120x30) */}
-        <div className="hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]">
-          {logoFull}
-        </div>
-      </>
-    );
-  };
-
-  // ===== DIVIDER COMPONENT =====
-  const Divider = ({ responsive = true }: { responsive?: boolean }) => {
-    const dividerContent = (
-      <div className="grow shrink-0 w-px min-h-px bg-border-primary dark:bg-dark-border-primary" />
-    );
-
-    if (isMobile) return null;
-
-    if (isDesktop || isTablet) {
-      return (
-        <div className="flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0">
-          {dividerContent}
-        </div>
-      );
-    }
-
-    // Responsive
-    if (responsive) {
-      return (
-        <div className="hidden md:flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0">
-          {dividerContent}
-        </div>
-      );
-    }
-
-    return null;
-  };
-
-  // ===== PRODUCT NAME =====
-  const ProductName = () => {
-    if (isMobile || !productName) return null;
-
-    const nameContent = (
-      <p className="font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap">
-        {productName}
-      </p>
-    );
-
-    if (isDesktop || isTablet) {
-      return nameContent;
-    }
-
-    // Responsive: Solo visible en md:
-    return (
-      <p className="hidden md:block font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap">
-        {productName}
-      </p>
-    );
-  };
-
-  // ===== ENVIRONMENT BADGE =====
-  const EnvironmentBadge = () => {
-    if (!environmentBadge) return null;
-
-    if (isMobile) {
-      return (
-        <Badge
-          color="yellow"
-          leftIcon={<ExclamationTriangleIcon />}
-          label="Pruebas"
-        />
-      );
-    }
-
-    if (isDesktop || isTablet) {
-      return (
-        <Badge
-          color="yellow"
-          leftIcon={<ExclamationTriangleIcon />}
-          label={environmentBadge}
-        />
-      );
-    }
-
-    // Responsive: Mostrar badge corto en mobile, completo en desktop
-    return (
-      <>
-        <div className="md:hidden">
-          <Badge
-            color="yellow"
-            leftIcon={<ExclamationTriangleIcon />}
-            label="Pruebas"
-          />
-        </div>
-        <div className="hidden md:block">
-          <Badge
-            color="yellow"
-            leftIcon={<ExclamationTriangleIcon />}
-            label={environmentBadge}
-          />
-        </div>
-      </>
-    );
-  };
-
-  // ===== SEARCH BUTTON (Solo mobile) =====
-  const SearchButton = () => {
-    if (hideActionButtons) return null;
-
-    if (isMobile) {
-      return (
-        <button
-          className={actionButtonClasses}
-          aria-label="Buscar"
-          onClick={onSearchClick}
-        >
-          <div className="overflow-hidden relative shrink-0 w-4 h-4">
-            <MagnifyingGlassIcon />
-          </div>
-        </button>
-      );
-    }
-
-    if (isResponsive) {
-      return (
-        <button
-          className={`md:hidden ${actionButtonClasses}`}
-          aria-label="Buscar"
-          onClick={onSearchClick}
-        >
-          <div className="overflow-hidden relative shrink-0 w-4 h-4">
-            <MagnifyingGlassIcon />
-          </div>
-        </button>
-      );
-    }
-
-    return null;
-  };
-
-  // ===== CART BUTTON =====
-  const CartButton = () => {
-    if (hideActionButtons) return null;
-
-    return (
-      <div className="relative">
-        <button
-          className={actionButtonClasses}
-          aria-label="Carrito de compras"
-          onClick={onCartClick}
-        >
-          <div className="overflow-hidden relative shrink-0 w-4 h-4">
-            <ShoppingCartIcon />
-          </div>
-        </button>
-        {/* Badge de notificación con número */}
-        {notifications?.cart !== undefined && notifications.cart > 0 && (
-          <div className="absolute bg-error-content dark:bg-error-content flex flex-col gap-2.5 h-4 items-center justify-center left-[calc(50%+8px)] px-1 py-0 rounded-full top-[calc(50%-8px)] -translate-x-1/2 -translate-y-1/2 pointer-events-none min-w-[16px]">
-            <p className="font-bold leading-3 text-[10px] text-white text-center whitespace-nowrap">
-              {notifications.cart > 99 ? '+99' : notifications.cart}
-            </p>
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  // ===== NOTIFICATIONS BUTTON =====
-  const NotificationsButton = () => {
-    if (hideActionButtons) return null;
-
-    return (
-      <div className="relative">
-        <button
-          className={actionButtonClasses}
-          aria-label="Notificaciones"
-          onClick={onNotificationsClick}
-        >
-          <div className="overflow-hidden relative shrink-0 w-4 h-4">
-            <BellIcon />
-          </div>
-        </button>
-        {/* Badge de notificación dot */}
-        {notifications?.bell && (
-          <div className="absolute w-2 h-2 bg-error-content dark:bg-error-content rounded-full left-[calc(50%+4px)] top-[calc(50%-8px)] -translate-x-1/2 pointer-events-none" />
-        )}
-      </div>
-    );
-  };
-
-  // ===== USER DROPDOWN =====
-  const UserDropdown = () => {
-    if (!userDropdown) return null;
-
-    const dropdownButtonClasses = `
-      box-border
-      flex
-      items-center
-      justify-center
-      overflow-hidden
-      p-0
-      relative
-      shrink-0
-      hover:bg-background-secondary
-      active:scale-95
-      focus:outline-none
-      focus:ring-2
-      focus:ring-primary-custom-400
-      focus:ring-offset-2
-      dark:hover:bg-dark-bg-secondary
-      dark:active:scale-95
-      dark:focus:ring-dark-border-custom
-      dark:focus:ring-offset-dark-bg-primary
-      rounded-lg
-      transition-all
-      duration-150
-    `;
-
-    // Mobile: Solo avatar circular
-    if (isMobile) {
-      return (
-        <button
-          className={dropdownButtonClasses}
-          onClick={userDropdown.onMenuClick}
-          aria-label="Menú de usuario"
-        >
-          <div className="relative rounded-full shrink-0 w-8 h-8">
-            <img
-              alt={userDropdown.name}
-              className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full"
-              src={userDropdown.avatar}
-            />
-          </div>
-        </button>
-      );
-    }
-
-    // Desktop/Tablet: Avatar + info + chevron
-    const renderFullDropdown = () => (
-      <button
-        className={dropdownButtonClasses}
-        onClick={userDropdown.onMenuClick}
-        aria-label="Menú de usuario"
-      >
-        <div className="box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0">
-          <div className="flex gap-3 items-center justify-center relative shrink-0">
-            {/* Avatar */}
-            <div className="flex items-center justify-center relative shrink-0">
-              <div className="relative rounded-md shrink-0 w-10 h-10">
-                <img
-                  alt={userDropdown.name}
-                  className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full"
-                  src={userDropdown.avatar}
-                />
-              </div>
-            </div>
-            {/* Nombre y email/rol */}
-            <div className="flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]">
-              <p className="leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal">
-                {userDropdown.name}
-              </p>
-              {(userDropdown.email || userDropdown.role) && (
-                <p className="leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis">
-                  {userDropdown.email || userDropdown.role}
-                </p>
-              )}
-            </div>
-          </div>
-          {/* Chevron down icon */}
-          <div className="overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary">
-            <ChevronDownIcon />
-          </div>
-        </div>
-      </button>
-    );
-
-    if (isDesktop || isTablet) {
-      return renderFullDropdown();
-    }
-
-    // Responsive
-    return (
-      <>
-        {/* Mobile: Solo avatar circular */}
-        <button
-          className={`md:hidden ${dropdownButtonClasses}`}
-          onClick={userDropdown.onMenuClick}
-          aria-label="Menú de usuario"
-        >
-          <div className="relative rounded-full shrink-0 w-8 h-8">
-            <img
-              alt={userDropdown.name}
-              className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full"
-              src={userDropdown.avatar}
-            />
-          </div>
-        </button>
-        {/* Desktop/Tablet: Avatar + info + chevron */}
-        <button
-          className={`hidden md:flex ${dropdownButtonClasses}`}
-          onClick={userDropdown.onMenuClick}
-          aria-label="Menú de usuario"
-        >
-          <div className="box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0">
-            <div className="flex gap-3 items-center justify-center relative shrink-0">
-              {/* Avatar */}
-              <div className="flex items-center justify-center relative shrink-0">
-                <div className="relative rounded-md shrink-0 w-10 h-10">
-                  <img
-                    alt={userDropdown.name}
-                    className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full"
-                    src={userDropdown.avatar}
-                  />
-                </div>
-              </div>
-              {/* Nombre y email/rol */}
-              <div className="flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]">
-                <p className="leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal">
-                  {userDropdown.name}
-                </p>
-                {(userDropdown.email || userDropdown.role) && (
-                  <p className="leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis">
-                    {userDropdown.email || userDropdown.role}
-                  </p>
-                )}
-              </div>
-            </div>
-            {/* Chevron down icon */}
-            <div className="overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary">
-              <ChevronDownIcon />
-            </div>
-          </div>
-        </button>
-      </>
-    );
-  };
-
-  // ===== CLASES BASE DEL NAVBAR =====
-  const baseClasses = `
-    box-border
-    flex
-    gap-8
-    items-center
-    px-4
-    py-1
-    relative
-    w-full
-    bg-background-primary
-    dark:bg-dark-bg-primary
-  `;
-
-  // ===== CLASES PARA VARIANTES DE ALTURA =====
-  const variantClasses = {
-    responsive: 'h-[40px] md:h-16',
-    desktop: 'h-16',
-    tablet: 'h-16',
-    mobile: 'h-[40px]',
-  };
-
-  // ===== COMBINAR CLASES =====
-  const finalClasses = [baseClasses, variantClasses[variant], className]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <nav className={finalClasses}>
-      {/* ===== SECCIÓN LEADING (IZQUIERDA) ===== */}
-      <div className="flex gap-4 items-center relative shrink-0">
-        {/* Botón de navegación o acción leading personalizada (solo desktop/tablet) */}
-        {!isMobile && (leadingAction || <NavigationButton />)}
-
-        {/* Business Logo (logo del cliente) - solo cuando showBusinessLogo=true */}
-        {logo || <BusinessLogo />}
-
-        {/* Divider después de Business Logo - Solo cuando hay Business Logo Y hay Siesa Logo en leading */}
-        {showBusinessLogo && showSiesaLogoLeading && !isMobile && <Divider />}
-
-        {/* Siesa Logo en leading - Se controla con showSiesaLogoLeading */}
-        {siesaLogo || <SiesaLogoLeading />}
-
-        {/* Divider antes del nombre - Solo cuando hay Siesa Logo en leading y nombre de producto */}
-        {productName && showSiesaLogoLeading && !isMobile && <Divider />}
-
-        {/* Nombre del Producto - Solo desktop/tablet */}
-        <ProductName />
-      </div>
-
-      {/* ===== SECCIÓN TRAILING (DERECHA) ===== */}
-      <div className="flex gap-4 items-center justify-end grow min-h-px min-w-px relative shrink-0">
-        {/* Badge de Ambiente */}
-        <EnvironmentBadge />
-
-        {/* Botón de búsqueda - Solo mobile */}
-        <SearchButton />
-
-        {/* Botón de carrito de compras */}
-        <CartButton />
-
-        {/* Botón de notificaciones */}
-        <NotificationsButton />
-
-        {/* Divider antes del dropdown - Solo desktop/tablet */}
-        {userDropdown && !hideActionButtons && <Divider />}
-
-        {/* Dropdown de usuario */}
-        <UserDropdown />
-
-        {/* Divider antes del logo Siesa trailing - Solo cuando showSiesaLogoTrailing=true */}
-        {showSiesaLogoTrailing && userDropdown && !isMobile && <Divider />}
-
-        {/* Logo Siesa trailing - Solo desktop */}
-        <SiesaLogoTrailing />
-
-        {/* Actions adicionales */}
-        {actions && <div className="flex gap-2 items-center">{actions}</div>}
-      </div>
-    </nav>
-  );
-};
+import React from 'react';
+import type { NavbarProps } from './Navbar.types';
+import { Badge } from '../Badge/Badge';
+import {
+  ShoppingCartIcon,
+  BellIcon,
+  MagnifyingGlassIcon,
+  ChevronDownIcon,
+  ExclamationTriangleIcon,
+  ArrowLeftStartOnRectangleIcon,
+} from './icons';
+
+/**
+ * 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 const Navbar: React.FC<NavbarProps> = ({
+  logo,
+  productName = 'Nombre Producto',
+  environmentBadge,
+  userDropdown,
+  actions,
+  notifications,
+  className = '',
+  variant = 'responsive',
+  hideActionButtons = false,
+  leadingAction,
+  siesaLogo,
+  showBusinessLogo = false,
+  showSiesaLogoLeading = true,
+  showSiesaLogoTrailing = false,
+  onNavigationClick,
+  onSearchClick,
+  onCartClick,
+  onNotificationsClick,
+}) => {
+  // ===== CLASES COMUNES PARA BOTONES DE ACCIÓN =====
+  const actionButtonClasses = `
+    box-border
+    flex
+    flex-col
+    items-center
+    justify-center
+    p-1
+    relative
+    rounded-md
+    shrink-0
+    text-primary-custom-600
+    hover:bg-background-secondary
+    active:scale-95
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:text-primary-custom-600
+    dark:hover:bg-dark-bg-secondary
+    dark:active:scale-95
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    transition-all
+    duration-150
+  `;
+
+  // ===== CLASES PARA BOTÓN DE NAVEGACIÓN PRIMARIO =====
+  const navigationButtonClasses = `
+    bg-primary-custom-600
+    text-primary-inverse-content
+    border
+    border-primary-custom-600
+    shadow-button-inset
+    hover:bg-primary-custom-500
+    active:scale-95
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:bg-dark-bg-inverse
+    dark:text-dark-content-inverse
+    dark:border-dark-bg-inverse
+    dark:hover:bg-dark-bg-inverse/90
+    dark:active:scale-95
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    box-border
+    flex
+    flex-col
+    items-center
+    justify-center
+    p-3
+    relative
+    rounded-md
+    shrink-0
+    transition-all
+    duration-150
+  `;
+
+  // ===== HELPER: Es mobile (variante o responsive en mobile breakpoint) =====
+  const isMobile = variant === 'mobile';
+  const isDesktop = variant === 'desktop';
+  const isTablet = variant === 'tablet';
+  const isResponsive = variant === 'responsive';
+
+  // ===== BOTÓN DE NAVEGACIÓN =====
+  const NavigationButton = () => {
+    if (isMobile) return null;
+
+    const buttonContent = (
+      <div className="overflow-hidden relative shrink-0 w-4 h-4">
+        <ArrowLeftStartOnRectangleIcon />
+      </div>
+    );
+
+    if (isDesktop || isTablet) {
+      return (
+        <button
+          className={navigationButtonClasses}
+          aria-label="Volver"
+          onClick={onNavigationClick}
+        >
+          {buttonContent}
+        </button>
+      );
+    }
+
+    // Responsive: Solo visible en md: y superiores
+    return (
+      <button
+        className={`hidden md:flex ${navigationButtonClasses}`}
+        aria-label="Volver"
+        onClick={onNavigationClick}
+      >
+        {buttonContent}
+      </button>
+    );
+  };
+
+  // ===== BUSINESS LOGO (Logo del cliente/producto) =====
+  // Solo se muestra si showBusinessLogo es true
+  const BusinessLogo = () => {
+    if (isMobile || !showBusinessLogo) return null;
+
+    const logoContent = (
+      <img
+        src="/,Business Logo.png"
+        alt="Business Logo"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    if (isDesktop) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[168px] h-[30px]">
+          {logoContent}
+        </div>
+      );
+    }
+
+    if (isTablet) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[140px] h-[25px]">
+          {logoContent}
+        </div>
+      );
+    }
+
+    // Responsive: Visible en md: con tamaño desktop, lg: con tamaño completo
+    return (
+      <div className="hidden md:block overflow-hidden relative shrink-0 w-[140px] lg:w-[168px] h-[25px] lg:h-[30px]">
+        {logoContent}
+      </div>
+    );
+  };
+
+  // ===== SIESA LOGO (Logo de Siesa - Leading) =====
+  // Se controla con showSiesaLogoLeading
+  // En mobile siempre se muestra el icono de Siesa en leading
+  const SiesaLogoLeading = () => {
+    const logoFull = (
+      <img
+        src="/.Siesa Logo.png"
+        alt="Siesa"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    const logoMobile = (
+      <img
+        src="/siesa_logo_mobile.png"
+        alt="Siesa"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    // En mobile siempre se muestra el icono de Siesa
+    if (isMobile) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[30px] h-[30px]">
+          {logoMobile}
+        </div>
+      );
+    }
+
+    // En desktop/tablet: Se controla con showSiesaLogoLeading
+    if (!showSiesaLogoLeading) return null;
+
+    if (isDesktop) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    if (isTablet) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    // Responsive
+    return (
+      <>
+        {/* Mobile: Logo icono (30x30) - siempre visible */}
+        <div className="md:hidden overflow-hidden relative shrink-0 w-[30px] h-[30px]">
+          {logoMobile}
+        </div>
+        {/* Tablet/Desktop: Se controla con showSiesaLogoLeading */}
+        {showSiesaLogoLeading && (
+          <>
+            {/* Tablet: Logo completo (100x25) */}
+            <div className="hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+              {logoFull}
+            </div>
+            {/* Desktop: Logo completo (120x30) */}
+            <div className="hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+              {logoFull}
+            </div>
+          </>
+        )}
+      </>
+    );
+  };
+
+  // ===== SIESA LOGO (Trailing) =====
+  // Se controla con showSiesaLogoTrailing
+  const SiesaLogoTrailing = () => {
+    // Se controla con showSiesaLogoTrailing
+    if (!showSiesaLogoTrailing || isMobile) return null;
+
+    const logoFull = (
+      <img
+        src="/.Siesa Logo.png"
+        alt="Siesa"
+        className="w-full h-full object-contain"
+      />
+    );
+
+    if (isDesktop) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    if (isTablet) {
+      return (
+        <div className="overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+          {logoFull}
+        </div>
+      );
+    }
+
+    // Responsive: Visible en md: (tablet y desktop)
+    return (
+      <>
+        {/* Tablet: Logo completo (100x25) */}
+        <div className="hidden md:block lg:hidden overflow-hidden relative shrink-0 w-[100px] h-[25px]">
+          {logoFull}
+        </div>
+        {/* Desktop: Logo completo (120x30) */}
+        <div className="hidden lg:block overflow-hidden relative shrink-0 w-[120px] h-[30px]">
+          {logoFull}
+        </div>
+      </>
+    );
+  };
+
+  // ===== DIVIDER COMPONENT =====
+  const Divider = ({ responsive = true }: { responsive?: boolean }) => {
+    const dividerContent = (
+      <div className="grow shrink-0 w-px min-h-px bg-border-primary dark:bg-dark-border-primary" />
+    );
+
+    if (isMobile) return null;
+
+    if (isDesktop || isTablet) {
+      return (
+        <div className="flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0">
+          {dividerContent}
+        </div>
+      );
+    }
+
+    // Responsive
+    if (responsive) {
+      return (
+        <div className="hidden md:flex flex-col gap-2 h-8 items-start px-0 py-1 relative shrink-0">
+          {dividerContent}
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  // ===== PRODUCT NAME =====
+  const ProductName = () => {
+    if (isMobile || !productName) return null;
+
+    const nameContent = (
+      <p className="font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap">
+        {productName}
+      </p>
+    );
+
+    if (isDesktop || isTablet) {
+      return nameContent;
+    }
+
+    // Responsive: Solo visible en md:
+    return (
+      <p className="hidden md:block font-bold leading-7 text-xl text-content-primary dark:text-dark-content-primary tracking-[-0.5px] whitespace-nowrap">
+        {productName}
+      </p>
+    );
+  };
+
+  // ===== ENVIRONMENT BADGE =====
+  const EnvironmentBadge = () => {
+    if (!environmentBadge) return null;
+
+    if (isMobile) {
+      return (
+        <Badge
+          color="yellow"
+          leftIcon={<ExclamationTriangleIcon />}
+          label="Pruebas"
+        />
+      );
+    }
+
+    if (isDesktop || isTablet) {
+      return (
+        <Badge
+          color="yellow"
+          leftIcon={<ExclamationTriangleIcon />}
+          label={environmentBadge}
+        />
+      );
+    }
+
+    // Responsive: Mostrar badge corto en mobile, completo en desktop
+    return (
+      <>
+        <div className="md:hidden">
+          <Badge
+            color="yellow"
+            leftIcon={<ExclamationTriangleIcon />}
+            label="Pruebas"
+          />
+        </div>
+        <div className="hidden md:block">
+          <Badge
+            color="yellow"
+            leftIcon={<ExclamationTriangleIcon />}
+            label={environmentBadge}
+          />
+        </div>
+      </>
+    );
+  };
+
+  // ===== SEARCH BUTTON (Solo mobile) =====
+  const SearchButton = () => {
+    if (hideActionButtons) return null;
+
+    if (isMobile) {
+      return (
+        <button
+          className={actionButtonClasses}
+          aria-label="Buscar"
+          onClick={onSearchClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <MagnifyingGlassIcon />
+          </div>
+        </button>
+      );
+    }
+
+    if (isResponsive) {
+      return (
+        <button
+          className={`md:hidden ${actionButtonClasses}`}
+          aria-label="Buscar"
+          onClick={onSearchClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <MagnifyingGlassIcon />
+          </div>
+        </button>
+      );
+    }
+
+    return null;
+  };
+
+  // ===== CART BUTTON =====
+  const CartButton = () => {
+    if (hideActionButtons) return null;
+
+    return (
+      <div className="relative">
+        <button
+          className={actionButtonClasses}
+          aria-label="Carrito de compras"
+          onClick={onCartClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <ShoppingCartIcon />
+          </div>
+        </button>
+        {/* Badge de notificación con número */}
+        {notifications?.cart !== undefined && notifications.cart > 0 && (
+          <div className="absolute bg-error-content dark:bg-error-content flex flex-col gap-2.5 h-4 items-center justify-center left-[calc(50%+8px)] px-1 py-0 rounded-full top-[calc(50%-8px)] -translate-x-1/2 -translate-y-1/2 pointer-events-none min-w-[16px]">
+            <p className="font-bold leading-3 text-[10px] text-white text-center whitespace-nowrap">
+              {notifications.cart > 99 ? '+99' : notifications.cart}
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // ===== NOTIFICATIONS BUTTON =====
+  const NotificationsButton = () => {
+    if (hideActionButtons) return null;
+
+    return (
+      <div className="relative">
+        <button
+          className={actionButtonClasses}
+          aria-label="Notificaciones"
+          onClick={onNotificationsClick}
+        >
+          <div className="overflow-hidden relative shrink-0 w-4 h-4">
+            <BellIcon />
+          </div>
+        </button>
+        {/* Badge de notificación dot */}
+        {notifications?.bell && (
+          <div className="absolute w-2 h-2 bg-error-content dark:bg-error-content rounded-full left-[calc(50%+4px)] top-[calc(50%-8px)] -translate-x-1/2 pointer-events-none" />
+        )}
+      </div>
+    );
+  };
+
+  // ===== USER DROPDOWN =====
+  const UserDropdown = () => {
+    if (!userDropdown) return null;
+
+    const dropdownButtonClasses = `
+      box-border
+      flex
+      items-center
+      justify-center
+      overflow-hidden
+      p-0
+      relative
+      shrink-0
+      hover:bg-background-secondary
+      active:scale-95
+      focus:outline-none
+      focus:ring-2
+      focus:ring-primary-custom-400
+      focus:ring-offset-2
+      dark:hover:bg-dark-bg-secondary
+      dark:active:scale-95
+      dark:focus:ring-dark-border-custom
+      dark:focus:ring-offset-dark-bg-primary
+      rounded-lg
+      transition-all
+      duration-150
+    `;
+
+    // Mobile: Solo avatar circular
+    if (isMobile) {
+      return (
+        <button
+          className={dropdownButtonClasses}
+          onClick={userDropdown.onMenuClick}
+          aria-label="Menú de usuario"
+        >
+          <div className="relative rounded-full shrink-0 w-8 h-8">
+            <img
+              alt={userDropdown.name}
+              className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full"
+              src={userDropdown.avatar}
+            />
+          </div>
+        </button>
+      );
+    }
+
+    // Desktop/Tablet: Avatar + info + chevron
+    const renderFullDropdown = () => (
+      <button
+        className={dropdownButtonClasses}
+        onClick={userDropdown.onMenuClick}
+        aria-label="Menú de usuario"
+      >
+        <div className="box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0">
+          <div className="flex gap-3 items-center justify-center relative shrink-0">
+            {/* Avatar */}
+            <div className="flex items-center justify-center relative shrink-0">
+              <div className="relative rounded-md shrink-0 w-10 h-10">
+                <img
+                  alt={userDropdown.name}
+                  className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full"
+                  src={userDropdown.avatar}
+                />
+              </div>
+            </div>
+            {/* Nombre y email/rol */}
+            <div className="flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]">
+              <p className="leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal">
+                {userDropdown.name}
+              </p>
+              {(userDropdown.email || userDropdown.role) && (
+                <p className="leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis">
+                  {userDropdown.email || userDropdown.role}
+                </p>
+              )}
+            </div>
+          </div>
+          {/* Chevron down icon */}
+          <div className="overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary">
+            <ChevronDownIcon />
+          </div>
+        </div>
+      </button>
+    );
+
+    if (isDesktop || isTablet) {
+      return renderFullDropdown();
+    }
+
+    // Responsive
+    return (
+      <>
+        {/* Mobile: Solo avatar circular */}
+        <button
+          className={`md:hidden ${dropdownButtonClasses}`}
+          onClick={userDropdown.onMenuClick}
+          aria-label="Menú de usuario"
+        >
+          <div className="relative rounded-full shrink-0 w-8 h-8">
+            <img
+              alt={userDropdown.name}
+              className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-full w-full h-full"
+              src={userDropdown.avatar}
+            />
+          </div>
+        </button>
+        {/* Desktop/Tablet: Avatar + info + chevron */}
+        <button
+          className={`hidden md:flex ${dropdownButtonClasses}`}
+          onClick={userDropdown.onMenuClick}
+          aria-label="Menú de usuario"
+        >
+          <div className="box-border flex gap-3 items-center justify-center overflow-hidden px-3 py-2 relative rounded-lg shrink-0">
+            <div className="flex gap-3 items-center justify-center relative shrink-0">
+              {/* Avatar */}
+              <div className="flex items-center justify-center relative shrink-0">
+                <div className="relative rounded-md shrink-0 w-10 h-10">
+                  <img
+                    alt={userDropdown.name}
+                    className="absolute inset-0 max-w-none object-center object-cover pointer-events-none rounded-md w-full h-full"
+                    src={userDropdown.avatar}
+                  />
+                </div>
+              </div>
+              {/* Nombre y email/rol */}
+              <div className="flex flex-col gap-0.5 items-start justify-center relative shrink-0 w-[123px]">
+                <p className="leading-5 relative shrink-0 text-sm text-content-primary dark:text-dark-content-primary whitespace-nowrap font-normal">
+                  {userDropdown.name}
+                </p>
+                {(userDropdown.email || userDropdown.role) && (
+                  <p className="leading-4 min-w-full relative shrink-0 text-xs text-content-secondary dark:text-content-secondary w-min whitespace-nowrap overflow-hidden text-ellipsis">
+                    {userDropdown.email || userDropdown.role}
+                  </p>
+                )}
+              </div>
+            </div>
+            {/* Chevron down icon */}
+            <div className="overflow-hidden relative shrink-0 w-5 h-5 text-content-secondary dark:text-content-secondary">
+              <ChevronDownIcon />
+            </div>
+          </div>
+        </button>
+      </>
+    );
+  };
+
+  // ===== CLASES BASE DEL NAVBAR =====
+  const baseClasses = `
+    box-border
+    flex
+    gap-8
+    items-center
+    px-4
+    py-1
+    relative
+    w-full
+    bg-background-primary
+    dark:bg-dark-bg-primary
+  `;
+
+  // ===== CLASES PARA VARIANTES DE ALTURA =====
+  const variantClasses = {
+    responsive: 'h-[40px] md:h-16',
+    desktop: 'h-16',
+    tablet: 'h-16',
+    mobile: 'h-[40px]',
+  };
+
+  // ===== COMBINAR CLASES =====
+  const finalClasses = [baseClasses, variantClasses[variant], className]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <nav className={finalClasses}>
+      {/* ===== SECCIÓN LEADING (IZQUIERDA) ===== */}
+      <div className="flex gap-4 items-center relative shrink-0">
+        {/* Botón de navegación o acción leading personalizada (solo desktop/tablet) */}
+        {!isMobile && (leadingAction || <NavigationButton />)}
+
+        {/* Business Logo (logo del cliente) - solo cuando showBusinessLogo=true */}
+        {logo || <BusinessLogo />}
+
+        {/* Divider después de Business Logo - Solo cuando hay Business Logo Y hay Siesa Logo en leading */}
+        {showBusinessLogo && showSiesaLogoLeading && !isMobile && <Divider />}
+
+        {/* Siesa Logo en leading - Se controla con showSiesaLogoLeading */}
+        {siesaLogo || <SiesaLogoLeading />}
+
+        {/* Divider antes del nombre - Solo cuando hay Siesa Logo en leading y nombre de producto */}
+        {productName && showSiesaLogoLeading && !isMobile && <Divider />}
+
+        {/* Nombre del Producto - Solo desktop/tablet */}
+        <ProductName />
+      </div>
+
+      {/* ===== SECCIÓN TRAILING (DERECHA) ===== */}
+      <div className="flex gap-4 items-center justify-end grow min-h-px min-w-px relative shrink-0">
+        {/* Badge de Ambiente */}
+        <EnvironmentBadge />
+
+        {/* Botón de búsqueda - Solo mobile */}
+        <SearchButton />
+
+        {/* Botón de carrito de compras */}
+        <CartButton />
+
+        {/* Botón de notificaciones */}
+        <NotificationsButton />
+
+        {/* Divider antes del dropdown - Solo desktop/tablet */}
+        {userDropdown && !hideActionButtons && <Divider />}
+
+        {/* Dropdown de usuario */}
+        <UserDropdown />
+
+        {/* Divider antes del logo Siesa trailing - Solo cuando showSiesaLogoTrailing=true */}
+        {showSiesaLogoTrailing && userDropdown && !isMobile && <Divider />}
+
+        {/* Logo Siesa trailing - Solo desktop */}
+        <SiesaLogoTrailing />
+
+        {/* Actions adicionales */}
+        {actions && <div className="flex gap-2 items-center">{actions}</div>}
+      </div>
+    </nav>
+  );
+};