siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Navbar/Navbar.tsx

@@ -1,755 +0,0 @@
-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>
-  );
-};