siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,810 +1,810 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Navbar } from './Navbar';
-
-const meta = {
-  title: 'Siesa UI Kit/Navbar',
-  component: Navbar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: `
-Barra de navegación principal del sistema con soporte responsive y dark mode completo.
-
-**Características principales:**
-- 4 variantes: \`responsive\` (default), \`desktop\`, \`tablet\`, \`mobile\`
-- Dark mode completo con tokens del sistema
-- Focus rings adaptativos para accesibilidad
-- Botón de navegación con sombra button-inset
-- Badge de ambiente con componente Badge (color yellow)
-- Badges de notificación con token error-content
-- Dropdown de usuario con avatar, nombre y email
-- Soporte para Logo Siesa en trailing (solo desktop)
-
-**Tamaños según Figma:**
-- Desktop: 1360x64px
-- Tablet: 1024x64px
-- Mobile: 428x40px
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    productName: {
-      control: 'text',
-      description: 'Nombre del producto mostrado después del logo (solo desktop/tablet)',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Nombre Producto' },
-        category: 'Contenido',
-      },
-    },
-    environmentBadge: {
-      control: 'text',
-      description: 'Texto del badge de ambiente (en mobile muestra "Pruebas")',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    variant: {
-      control: 'select',
-      options: ['responsive', 'desktop', 'tablet', 'mobile'],
-      description: 'Modo de visualización del navbar',
-      table: {
-        type: { summary: "'responsive' | 'desktop' | 'tablet' | 'mobile'" },
-        defaultValue: { summary: 'responsive' },
-        category: 'Apariencia',
-      },
-    },
-    userDropdown: {
-      control: 'object',
-      description: 'Datos del dropdown de usuario (avatar, nombre, email)',
-      table: {
-        type: { summary: 'UserDropdownProps' },
-        category: 'Contenido',
-      },
-    },
-    notifications: {
-      control: 'object',
-      description: 'Configuración de badges de notificación (cart: number, bell: boolean)',
-      table: {
-        type: { summary: 'NotificationsProps' },
-        category: 'Estado',
-      },
-    },
-    showBusinessLogo: {
-      control: 'boolean',
-      description: 'Mostrar Business Logo en el leading (lado izquierdo)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Logos',
-      },
-    },
-    showSiesaLogoLeading: {
-      control: 'boolean',
-      description: 'Mostrar Logo de Siesa en el leading (lado izquierdo)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-        category: 'Logos',
-      },
-    },
-    showSiesaLogoTrailing: {
-      control: 'boolean',
-      description: 'Mostrar Logo de Siesa en el trailing (lado derecho)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Logos',
-      },
-    },
-    hideActionButtons: {
-      control: 'boolean',
-      description: 'Ocultar botones de acción (carrito, notificaciones, búsqueda)',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Apariencia',
-      },
-    },
-  },
-} satisfies Meta<typeof Navbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Avatar de ejemplo para las stories
-const avatarExample = 'https://i.pravatar.cc/150?img=3';
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    productName: 'Mi Producto',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Juan Pérez',
-      email: 'juan@ejemplo.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'responsive',
-    showBusinessLogo: false,
-    showSiesaLogoLeading: true,
-    showSiesaLogoTrailing: false,
-  },
-};
-
-// ============================================
-// 2. VARIANTES DE DISPOSITIVO
-// ============================================
-export const Desktop: Story = {
-  args: {
-    productName: 'Sistema de Gestión',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'María García',
-      email: 'maria@miempresa.com',
-    },
-    notifications: {
-      cart: 12,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: false,
-    showSiesaLogoLeading: true,
-    showSiesaLogoTrailing: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Versión desktop completa (1360x64px) con Siesa Logo en el leading y nombre de producto.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="min-w-[1360px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-export const Tablet: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Carlos López',
-      email: 'carlos@ejemplo.com',
-    },
-    notifications: {
-      cart: 8,
-      bell: true,
-    },
-    variant: 'tablet',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Versión tablet (1024x64px) con elementos reducidos. Similar a desktop pero sin el logo Siesa en trailing y con tamaños de logo más pequeños.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="w-[1024px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-export const Mobile: Story = {
-  args: {
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Ana Martínez',
-      email: 'ana@ejemplo.com',
-    },
-    notifications: {
-      cart: 99,
-      bell: true,
-    },
-    variant: 'mobile',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Versión mobile (428x40px) simplificada: logo Siesa icono (30x30), badge "Pruebas", botón búsqueda, botones acción, y avatar circular.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="max-w-[428px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 3. ESTADOS DE NOTIFICACIONES
-// ============================================
-export const ConNotificaciones: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Ana Martínez',
-      email: 'ana@miempresa.com',
-    },
-    notifications: {
-      cart: 25,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con notificaciones activas: cart con número (25) y bell con dot.',
-      },
-    },
-  },
-};
-
-export const SinNotificaciones: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Pedro Sánchez',
-      email: 'pedro@miempresa.com',
-    },
-    notifications: {
-      cart: 0,
-      bell: false,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar sin notificaciones visibles.',
-      },
-    },
-  },
-};
-
-export const MuchasNotificaciones: Story = {
-  args: {
-    productName: 'Sistema de Ventas',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Laura Rodríguez',
-      email: 'laura@ejemplo.com',
-    },
-    notifications: {
-      cart: 150,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Cuando cart > 99, muestra "+99" para mantener el badge compacto.',
-      },
-    },
-  },
-};
-
-// ============================================
-// 4. VARIANTES DE CONTENIDO
-// ============================================
-export const SinBadgeDeAmbiente: Story = {
-  args: {
-    productName: 'Plataforma Corporativa',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Roberto Díaz',
-      email: 'roberto@miempresa.com',
-    },
-    notifications: {
-      cart: 3,
-      bell: false,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar para ambiente de producción sin badge de ambiente.',
-      },
-    },
-  },
-};
-
-export const SoloElementosEsenciales: Story = {
-  args: {
-    productName: 'Portal Web',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Sofía Torres',
-      email: 'sofia@ejemplo.com',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con solo los elementos esenciales: logo, nombre y dropdown.',
-      },
-    },
-  },
-};
-
-export const NombreProductoLargo: Story = {
-  args: {
-    productName: 'Sistema Integrado de Gestión Empresarial Avanzada',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Diego Fernández',
-      email: 'diego@miempresa.com',
-    },
-    notifications: {
-      cart: 7,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo con nombre de producto largo para verificar comportamiento de truncado.',
-      },
-    },
-  },
-};
-
-export const ConRolEnLugarDeEmail: Story = {
-  args: {
-    productName: 'Panel de Administración',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Admin User',
-      role: 'Administrador',
-    },
-    notifications: {
-      cart: 0,
-      bell: true,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Dropdown mostrando rol en lugar de email.',
-      },
-    },
-  },
-};
-
-// ============================================
-// 5. HANDLERS DE EVENTOS
-// ============================================
-export const ConHandlers: Story = {
-  args: {
-    productName: 'Sistema con Handlers',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Test',
-      email: 'test@ejemplo.com',
-      onMenuClick: () => alert('Dropdown de usuario clickeado'),
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    onNavigationClick: () => alert('Botón de navegación clickeado'),
-    onSearchClick: () => alert('Botón de búsqueda clickeado'),
-    onCartClick: () => alert('Carrito clickeado'),
-    onNotificationsClick: () => alert('Notificaciones clickeado'),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con todos los handlers de eventos configurados. Haz click en cada elemento para ver las alertas.',
-      },
-    },
-  },
-};
-
-// ============================================
-// 6. DARK MODE
-// ============================================
-export const DarkMode: Story = {
-  args: {
-    productName: 'Sistema Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'María García',
-      email: 'maria@miempresa.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'responsive',
-  },
-  parameters: {
-    backgrounds: { default: 'dark' },
-    docs: {
-      description: {
-        story: `
-Navbar en dark mode con todos los tokens adaptativos:
-- Fondo: \`dark:bg-dark-bg-primary\`
-- Texto primario: \`dark:text-dark-content-primary\`
-- Texto secundario: \`dark:text-content-secondary\`
-- Bordes: \`dark:bg-dark-border-primary\`
-- Botón navegación: \`dark:bg-dark-bg-inverse\`
-- Hover: \`dark:hover:bg-dark-bg-secondary\`
-- Focus ring: \`dark:focus:ring-dark-border-custom\`
-        `,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="dark">
-        <div className="bg-dark-bg-primary p-6">
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-};
-
-export const DarkModeDesktop: Story = {
-  args: {
-    productName: 'Dashboard Ejecutivo',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Administrador',
-      email: 'admin@miempresa.com',
-    },
-    notifications: {
-      cart: 15,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: true,
-    showSiesaLogoLeading: false,
-    showSiesaLogoTrailing: true,
-  },
-  parameters: {
-    backgrounds: { default: 'dark' },
-    docs: {
-      description: {
-        story: 'Versión desktop con Business Logo en el leading y Siesa Logo en el trailing (dark mode).',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="dark">
-        <div className="bg-dark-bg-primary p-6 min-w-[1360px]">
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-};
-
-export const DarkModeMobile: Story = {
-  args: {
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Mobile',
-      email: 'mobile@ejemplo.com',
-    },
-    notifications: {
-      cart: 10,
-      bell: true,
-    },
-    variant: 'mobile',
-  },
-  parameters: {
-    backgrounds: { default: 'dark' },
-    docs: {
-      description: {
-        story: 'Versión mobile en dark mode.',
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="dark">
-        <div className="bg-dark-bg-primary p-6 max-w-[428px]">
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-};
-
-// ============================================
-// 7. COMPARACIÓN VARIANTES
-// ============================================
-export const ComparacionVariantes: Story = {
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Desktop */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Versión Desktop (1360x64px)
-        </h3>
-        <div className="border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden min-w-[1360px]">
-          <Navbar
-            productName="Sistema Empresarial"
-            environmentBadge="Ambiente de Pruebas"
-            userDropdown={{
-              avatar: avatarExample,
-              name: 'Usuario Desktop',
-              email: 'usuario@ejemplo.com',
-            }}
-            notifications={{
-              cart: 10,
-              bell: true,
-            }}
-            variant="desktop"
-            showBusinessLogo={true}
-            showSiesaLogoLeading={false}
-            showSiesaLogoTrailing={true}
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Business Logo en leading + Siesa Logo en trailing.
-        </p>
-      </div>
-
-      {/* Tablet */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Versión Tablet (1024x64px)
-        </h3>
-        <div className="w-[1024px] border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
-          <Navbar
-            productName="Sistema Empresarial"
-            environmentBadge="Ambiente de Pruebas"
-            userDropdown={{
-              avatar: avatarExample,
-              name: 'Usuario Tablet',
-              email: 'usuario@ejemplo.com',
-            }}
-            notifications={{
-              cart: 10,
-              bell: true,
-            }}
-            variant="tablet"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Similar a desktop pero con logos más pequeños y sin logo Siesa trailing.
-        </p>
-      </div>
-
-      {/* Mobile */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Versión Mobile (428x40px)
-        </h3>
-        <div className="max-w-[428px] border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
-          <Navbar
-            productName="Sistema Empresarial"
-            environmentBadge="Ambiente de Pruebas"
-            userDropdown={{
-              avatar: avatarExample,
-              name: 'Usuario Mobile',
-              email: 'usuario@ejemplo.com',
-            }}
-            notifications={{
-              cart: 10,
-              bell: true,
-            }}
-            variant="mobile"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
-          Versión compacta: logo icono (30x30px), badge "Pruebas", botón búsqueda y avatar circular.
-        </p>
-      </div>
-
-      {/* Consejos */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <p className="text-xs text-content-primary dark:text-dark-content-primary">
-          <strong>Especificaciones Figma:</strong>
-          <br />• Desktop: 1360x64px - Todos los elementos visibles
-          <br />• Tablet: 1024x64px - Sin logo Siesa trailing
-          <br />• Mobile: 428x40px - Logo icono, badge corto, avatar circular
-          <br />• Variante responsive se adapta automáticamente usando breakpoints md: y lg:
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 8. ESTADOS DE FOCUS
-// ============================================
-export const EstadosFocus: Story = {
-  render: () => (
-    <div className="space-y-6 p-6">
-      <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-        Estados de Focus Adaptativos
-      </h3>
-      <div className="border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
-        <Navbar
-          productName="Plataforma de Gestión"
-          environmentBadge="Ambiente de Pruebas"
-          userDropdown={{
-            avatar: avatarExample,
-            name: 'Juan Pérez',
-            email: 'juan@ejemplo.com',
-          }}
-          notifications={{
-            cart: 3,
-            bell: true,
-          }}
-        />
-      </div>
-      <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-        <p className="text-xs text-content-primary dark:text-dark-content-primary">
-          <strong>Focus States:</strong>
-          <br />• Usa Tab para navegar por los elementos interactivos
-          <br />• Todos los botones tienen focus rings adaptativos:
-          <br />  - Light: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">focus:ring-primary-custom-400</code>
-          <br />  - Dark: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">dark:focus:ring-dark-border-custom</code>
-          <br />• Focus ring-offset respeta el color de fondo:
-          <br />  - Light: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">focus:ring-offset-2</code>
-          <br />  - Dark: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">dark:focus:ring-offset-dark-bg-primary</code>
-          <br />• Active state con <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">scale-95</code> para feedback visual
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 9. EJEMPLO COMPLETO CON LAYOUT
-// ============================================
-export const EjemploCompleto: Story = {
-  render: () => (
-    <div className="min-h-screen bg-background-secondary dark:bg-dark-bg-primary">
-      {/* Navbar fijo */}
-      <div className="sticky top-0 z-50 bg-background-primary dark:bg-dark-bg-primary border-b border-border-primary dark:border-dark-border-primary">
-        <Navbar
-          productName="Dashboard Ejecutivo"
-          environmentBadge="Ambiente de Pruebas"
-          userDropdown={{
-            avatar: avatarExample,
-            name: 'Administrador',
-            email: 'admin@miempresa.com',
-          }}
-          notifications={{
-            cart: 15,
-            bell: true,
-          }}
-        />
-      </div>
-
-      {/* Contenido de ejemplo */}
-      <div className="max-w-7xl mx-auto p-6">
-        <div className="bg-background-primary dark:bg-dark-bg-primary p-6 rounded-2xl border border-border-primary dark:border-dark-border-primary shadow-base">
-          <h2 className="text-content-primary dark:text-dark-content-primary font-bold text-2xl mb-4">
-            Contenido Principal
-          </h2>
-          <p className="text-content-secondary dark:text-content-secondary mb-4">
-            Este es un ejemplo de cómo el Navbar se integra con el resto de la aplicación.
-            La barra de navegación se mantiene fija en la parte superior y el contenido
-            fluye naturalmente debajo de ella.
-          </p>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
-            {[1, 2, 3].map((i) => (
-              <div
-                key={i}
-                className="p-4 rounded-lg border border-border-primary dark:border-dark-border-primary bg-background-secondary dark:bg-dark-bg-secondary"
-              >
-                <h3 className="font-bold text-content-primary dark:text-dark-content-primary mb-2">
-                  Card {i}
-                </h3>
-                <p className="text-sm text-content-secondary dark:text-content-secondary">
-                  Contenido de ejemplo para demostrar la integración.
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 10. CON BUSINESS LOGO (Siesa Logo va al trailing)
-// ============================================
-export const ConBusinessLogo: Story = {
-  args: {
-    productName: 'Portal Empresarial',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Test',
-      email: 'test@ejemplo.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: true,
-    showSiesaLogoLeading: false,
-    showSiesaLogoTrailing: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con Business Logo en el leading y Siesa Logo en el trailing. Usa esta configuración cuando quieras mostrar el logo del cliente/negocio.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="min-w-[1360px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
-
-// ============================================
-// 11. CON BUSINESS LOGO + SIESA LOGO EN LEADING
-// ============================================
-export const ConBusinessLogoYSiesaLeading: Story = {
-  args: {
-    productName: '',
-    environmentBadge: 'Ambiente de Pruebas',
-    userDropdown: {
-      avatar: avatarExample,
-      name: 'Usuario Test',
-      email: 'test@ejemplo.com',
-    },
-    notifications: {
-      cart: 5,
-      bell: true,
-    },
-    variant: 'desktop',
-    showBusinessLogo: true,
-    showSiesaLogoLeading: true,
-    showSiesaLogoTrailing: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Navbar con Botón + Business Logo + Siesa Logo en el leading. Esta variante muestra ambos logos juntos en el lado izquierdo.',
-      },
-    },
-  },
-  render: (args) => (
-    <div className="min-w-[1360px]">
-      <Navbar {...args} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Navbar } from './Navbar';
+
+const meta = {
+  title: 'Siesa UI Kit/Navbar',
+  component: Navbar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+Barra de navegación principal del sistema con soporte responsive y dark mode completo.
+
+**Características principales:**
+- 4 variantes: \`responsive\` (default), \`desktop\`, \`tablet\`, \`mobile\`
+- Dark mode completo con tokens del sistema
+- Focus rings adaptativos para accesibilidad
+- Botón de navegación con sombra button-inset
+- Badge de ambiente con componente Badge (color yellow)
+- Badges de notificación con token error-content
+- Dropdown de usuario con avatar, nombre y email
+- Soporte para Logo Siesa en trailing (solo desktop)
+
+**Tamaños según Figma:**
+- Desktop: 1360x64px
+- Tablet: 1024x64px
+- Mobile: 428x40px
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    productName: {
+      control: 'text',
+      description: 'Nombre del producto mostrado después del logo (solo desktop/tablet)',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Nombre Producto' },
+        category: 'Contenido',
+      },
+    },
+    environmentBadge: {
+      control: 'text',
+      description: 'Texto del badge de ambiente (en mobile muestra "Pruebas")',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    variant: {
+      control: 'select',
+      options: ['responsive', 'desktop', 'tablet', 'mobile'],
+      description: 'Modo de visualización del navbar',
+      table: {
+        type: { summary: "'responsive' | 'desktop' | 'tablet' | 'mobile'" },
+        defaultValue: { summary: 'responsive' },
+        category: 'Apariencia',
+      },
+    },
+    userDropdown: {
+      control: 'object',
+      description: 'Datos del dropdown de usuario (avatar, nombre, email)',
+      table: {
+        type: { summary: 'UserDropdownProps' },
+        category: 'Contenido',
+      },
+    },
+    notifications: {
+      control: 'object',
+      description: 'Configuración de badges de notificación (cart: number, bell: boolean)',
+      table: {
+        type: { summary: 'NotificationsProps' },
+        category: 'Estado',
+      },
+    },
+    showBusinessLogo: {
+      control: 'boolean',
+      description: 'Mostrar Business Logo en el leading (lado izquierdo)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Logos',
+      },
+    },
+    showSiesaLogoLeading: {
+      control: 'boolean',
+      description: 'Mostrar Logo de Siesa en el leading (lado izquierdo)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Logos',
+      },
+    },
+    showSiesaLogoTrailing: {
+      control: 'boolean',
+      description: 'Mostrar Logo de Siesa en el trailing (lado derecho)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Logos',
+      },
+    },
+    hideActionButtons: {
+      control: 'boolean',
+      description: 'Ocultar botones de acción (carrito, notificaciones, búsqueda)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Apariencia',
+      },
+    },
+  },
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Avatar de ejemplo para las stories
+const avatarExample = 'https://i.pravatar.cc/150?img=3';
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    productName: 'Mi Producto',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Juan Pérez',
+      email: 'juan@ejemplo.com',
+    },
+    notifications: {
+      cart: 5,
+      bell: true,
+    },
+    variant: 'responsive',
+    showBusinessLogo: false,
+    showSiesaLogoLeading: true,
+    showSiesaLogoTrailing: false,
+  },
+};
+
+// ============================================
+// 2. VARIANTES DE DISPOSITIVO
+// ============================================
+export const Desktop: Story = {
+  args: {
+    productName: 'Sistema de Gestión',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'María García',
+      email: 'maria@miempresa.com',
+    },
+    notifications: {
+      cart: 12,
+      bell: true,
+    },
+    variant: 'desktop',
+    showBusinessLogo: false,
+    showSiesaLogoLeading: true,
+    showSiesaLogoTrailing: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Versión desktop completa (1360x64px) con Siesa Logo en el leading y nombre de producto.',
+      },
+    },
+  },
+  render: (args) => (
+    <div className="min-w-[1360px]">
+      <Navbar {...args} />
+    </div>
+  ),
+};
+
+export const Tablet: Story = {
+  args: {
+    productName: 'Portal Empresarial',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Carlos López',
+      email: 'carlos@ejemplo.com',
+    },
+    notifications: {
+      cart: 8,
+      bell: true,
+    },
+    variant: 'tablet',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Versión tablet (1024x64px) con elementos reducidos. Similar a desktop pero sin el logo Siesa en trailing y con tamaños de logo más pequeños.',
+      },
+    },
+  },
+  render: (args) => (
+    <div className="w-[1024px]">
+      <Navbar {...args} />
+    </div>
+  ),
+};
+
+export const Mobile: Story = {
+  args: {
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Ana Martínez',
+      email: 'ana@ejemplo.com',
+    },
+    notifications: {
+      cart: 99,
+      bell: true,
+    },
+    variant: 'mobile',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Versión mobile (428x40px) simplificada: logo Siesa icono (30x30), badge "Pruebas", botón búsqueda, botones acción, y avatar circular.',
+      },
+    },
+  },
+  render: (args) => (
+    <div className="max-w-[428px]">
+      <Navbar {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 3. ESTADOS DE NOTIFICACIONES
+// ============================================
+export const ConNotificaciones: Story = {
+  args: {
+    productName: 'Portal Empresarial',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Ana Martínez',
+      email: 'ana@miempresa.com',
+    },
+    notifications: {
+      cart: 25,
+      bell: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navbar con notificaciones activas: cart con número (25) y bell con dot.',
+      },
+    },
+  },
+};
+
+export const SinNotificaciones: Story = {
+  args: {
+    productName: 'Portal Empresarial',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Pedro Sánchez',
+      email: 'pedro@miempresa.com',
+    },
+    notifications: {
+      cart: 0,
+      bell: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navbar sin notificaciones visibles.',
+      },
+    },
+  },
+};
+
+export const MuchasNotificaciones: Story = {
+  args: {
+    productName: 'Sistema de Ventas',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Laura Rodríguez',
+      email: 'laura@ejemplo.com',
+    },
+    notifications: {
+      cart: 150,
+      bell: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cuando cart > 99, muestra "+99" para mantener el badge compacto.',
+      },
+    },
+  },
+};
+
+// ============================================
+// 4. VARIANTES DE CONTENIDO
+// ============================================
+export const SinBadgeDeAmbiente: Story = {
+  args: {
+    productName: 'Plataforma Corporativa',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Roberto Díaz',
+      email: 'roberto@miempresa.com',
+    },
+    notifications: {
+      cart: 3,
+      bell: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navbar para ambiente de producción sin badge de ambiente.',
+      },
+    },
+  },
+};
+
+export const SoloElementosEsenciales: Story = {
+  args: {
+    productName: 'Portal Web',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Sofía Torres',
+      email: 'sofia@ejemplo.com',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navbar con solo los elementos esenciales: logo, nombre y dropdown.',
+      },
+    },
+  },
+};
+
+export const NombreProductoLargo: Story = {
+  args: {
+    productName: 'Sistema Integrado de Gestión Empresarial Avanzada',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Diego Fernández',
+      email: 'diego@miempresa.com',
+    },
+    notifications: {
+      cart: 7,
+      bell: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo con nombre de producto largo para verificar comportamiento de truncado.',
+      },
+    },
+  },
+};
+
+export const ConRolEnLugarDeEmail: Story = {
+  args: {
+    productName: 'Panel de Administración',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Admin User',
+      role: 'Administrador',
+    },
+    notifications: {
+      cart: 0,
+      bell: true,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dropdown mostrando rol en lugar de email.',
+      },
+    },
+  },
+};
+
+// ============================================
+// 5. HANDLERS DE EVENTOS
+// ============================================
+export const ConHandlers: Story = {
+  args: {
+    productName: 'Sistema con Handlers',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Usuario Test',
+      email: 'test@ejemplo.com',
+      onMenuClick: () => alert('Dropdown de usuario clickeado'),
+    },
+    notifications: {
+      cart: 5,
+      bell: true,
+    },
+    onNavigationClick: () => alert('Botón de navegación clickeado'),
+    onSearchClick: () => alert('Botón de búsqueda clickeado'),
+    onCartClick: () => alert('Carrito clickeado'),
+    onNotificationsClick: () => alert('Notificaciones clickeado'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navbar con todos los handlers de eventos configurados. Haz click en cada elemento para ver las alertas.',
+      },
+    },
+  },
+};
+
+// ============================================
+// 6. DARK MODE
+// ============================================
+export const DarkMode: Story = {
+  args: {
+    productName: 'Sistema Empresarial',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'María García',
+      email: 'maria@miempresa.com',
+    },
+    notifications: {
+      cart: 5,
+      bell: true,
+    },
+    variant: 'responsive',
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: `
+Navbar en dark mode con todos los tokens adaptativos:
+- Fondo: \`dark:bg-dark-bg-primary\`
+- Texto primario: \`dark:text-dark-content-primary\`
+- Texto secundario: \`dark:text-content-secondary\`
+- Bordes: \`dark:bg-dark-border-primary\`
+- Botón navegación: \`dark:bg-dark-bg-inverse\`
+- Hover: \`dark:hover:bg-dark-bg-secondary\`
+- Focus ring: \`dark:focus:ring-dark-border-custom\`
+        `,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="dark">
+        <div className="bg-dark-bg-primary p-6">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export const DarkModeDesktop: Story = {
+  args: {
+    productName: 'Dashboard Ejecutivo',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Administrador',
+      email: 'admin@miempresa.com',
+    },
+    notifications: {
+      cart: 15,
+      bell: true,
+    },
+    variant: 'desktop',
+    showBusinessLogo: true,
+    showSiesaLogoLeading: false,
+    showSiesaLogoTrailing: true,
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'Versión desktop con Business Logo en el leading y Siesa Logo en el trailing (dark mode).',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="dark">
+        <div className="bg-dark-bg-primary p-6 min-w-[1360px]">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+
+export const DarkModeMobile: Story = {
+  args: {
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Usuario Mobile',
+      email: 'mobile@ejemplo.com',
+    },
+    notifications: {
+      cart: 10,
+      bell: true,
+    },
+    variant: 'mobile',
+  },
+  parameters: {
+    backgrounds: { default: 'dark' },
+    docs: {
+      description: {
+        story: 'Versión mobile en dark mode.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="dark">
+        <div className="bg-dark-bg-primary p-6 max-w-[428px]">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+};
+
+// ============================================
+// 7. COMPARACIÓN VARIANTES
+// ============================================
+export const ComparacionVariantes: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Desktop */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Versión Desktop (1360x64px)
+        </h3>
+        <div className="border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden min-w-[1360px]">
+          <Navbar
+            productName="Sistema Empresarial"
+            environmentBadge="Ambiente de Pruebas"
+            userDropdown={{
+              avatar: avatarExample,
+              name: 'Usuario Desktop',
+              email: 'usuario@ejemplo.com',
+            }}
+            notifications={{
+              cart: 10,
+              bell: true,
+            }}
+            variant="desktop"
+            showBusinessLogo={true}
+            showSiesaLogoLeading={false}
+            showSiesaLogoTrailing={true}
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Business Logo en leading + Siesa Logo en trailing.
+        </p>
+      </div>
+
+      {/* Tablet */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Versión Tablet (1024x64px)
+        </h3>
+        <div className="w-[1024px] border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
+          <Navbar
+            productName="Sistema Empresarial"
+            environmentBadge="Ambiente de Pruebas"
+            userDropdown={{
+              avatar: avatarExample,
+              name: 'Usuario Tablet',
+              email: 'usuario@ejemplo.com',
+            }}
+            notifications={{
+              cart: 10,
+              bell: true,
+            }}
+            variant="tablet"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Similar a desktop pero con logos más pequeños y sin logo Siesa trailing.
+        </p>
+      </div>
+
+      {/* Mobile */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Versión Mobile (428x40px)
+        </h3>
+        <div className="max-w-[428px] border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
+          <Navbar
+            productName="Sistema Empresarial"
+            environmentBadge="Ambiente de Pruebas"
+            userDropdown={{
+              avatar: avatarExample,
+              name: 'Usuario Mobile',
+              email: 'usuario@ejemplo.com',
+            }}
+            notifications={{
+              cart: 10,
+              bell: true,
+            }}
+            variant="mobile"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary mt-2">
+          Versión compacta: logo icono (30x30px), badge "Pruebas", botón búsqueda y avatar circular.
+        </p>
+      </div>
+
+      {/* Consejos */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-content-primary dark:text-dark-content-primary">
+          <strong>Especificaciones Figma:</strong>
+          <br />• Desktop: 1360x64px - Todos los elementos visibles
+          <br />• Tablet: 1024x64px - Sin logo Siesa trailing
+          <br />• Mobile: 428x40px - Logo icono, badge corto, avatar circular
+          <br />• Variante responsive se adapta automáticamente usando breakpoints md: y lg:
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 8. ESTADOS DE FOCUS
+// ============================================
+export const EstadosFocus: Story = {
+  render: () => (
+    <div className="space-y-6 p-6">
+      <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+        Estados de Focus Adaptativos
+      </h3>
+      <div className="border border-border-primary dark:border-dark-border-primary rounded-lg overflow-hidden">
+        <Navbar
+          productName="Plataforma de Gestión"
+          environmentBadge="Ambiente de Pruebas"
+          userDropdown={{
+            avatar: avatarExample,
+            name: 'Juan Pérez',
+            email: 'juan@ejemplo.com',
+          }}
+          notifications={{
+            cart: 3,
+            bell: true,
+          }}
+        />
+      </div>
+      <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+        <p className="text-xs text-content-primary dark:text-dark-content-primary">
+          <strong>Focus States:</strong>
+          <br />• Usa Tab para navegar por los elementos interactivos
+          <br />• Todos los botones tienen focus rings adaptativos:
+          <br />  - Light: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">focus:ring-primary-custom-400</code>
+          <br />  - Dark: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">dark:focus:ring-dark-border-custom</code>
+          <br />• Focus ring-offset respeta el color de fondo:
+          <br />  - Light: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">focus:ring-offset-2</code>
+          <br />  - Dark: <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">dark:focus:ring-offset-dark-bg-primary</code>
+          <br />• Active state con <code className="px-1 bg-white dark:bg-dark-bg-primary rounded">scale-95</code> para feedback visual
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 9. EJEMPLO COMPLETO CON LAYOUT
+// ============================================
+export const EjemploCompleto: Story = {
+  render: () => (
+    <div className="min-h-screen bg-background-secondary dark:bg-dark-bg-primary">
+      {/* Navbar fijo */}
+      <div className="sticky top-0 z-50 bg-background-primary dark:bg-dark-bg-primary border-b border-border-primary dark:border-dark-border-primary">
+        <Navbar
+          productName="Dashboard Ejecutivo"
+          environmentBadge="Ambiente de Pruebas"
+          userDropdown={{
+            avatar: avatarExample,
+            name: 'Administrador',
+            email: 'admin@miempresa.com',
+          }}
+          notifications={{
+            cart: 15,
+            bell: true,
+          }}
+        />
+      </div>
+
+      {/* Contenido de ejemplo */}
+      <div className="max-w-7xl mx-auto p-6">
+        <div className="bg-background-primary dark:bg-dark-bg-primary p-6 rounded-2xl border border-border-primary dark:border-dark-border-primary shadow-base">
+          <h2 className="text-content-primary dark:text-dark-content-primary font-bold text-2xl mb-4">
+            Contenido Principal
+          </h2>
+          <p className="text-content-secondary dark:text-content-secondary mb-4">
+            Este es un ejemplo de cómo el Navbar se integra con el resto de la aplicación.
+            La barra de navegación se mantiene fija en la parte superior y el contenido
+            fluye naturalmente debajo de ella.
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
+            {[1, 2, 3].map((i) => (
+              <div
+                key={i}
+                className="p-4 rounded-lg border border-border-primary dark:border-dark-border-primary bg-background-secondary dark:bg-dark-bg-secondary"
+              >
+                <h3 className="font-bold text-content-primary dark:text-dark-content-primary mb-2">
+                  Card {i}
+                </h3>
+                <p className="text-sm text-content-secondary dark:text-content-secondary">
+                  Contenido de ejemplo para demostrar la integración.
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 10. CON BUSINESS LOGO (Siesa Logo va al trailing)
+// ============================================
+export const ConBusinessLogo: Story = {
+  args: {
+    productName: 'Portal Empresarial',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Usuario Test',
+      email: 'test@ejemplo.com',
+    },
+    notifications: {
+      cart: 5,
+      bell: true,
+    },
+    variant: 'desktop',
+    showBusinessLogo: true,
+    showSiesaLogoLeading: false,
+    showSiesaLogoTrailing: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navbar con Business Logo en el leading y Siesa Logo en el trailing. Usa esta configuración cuando quieras mostrar el logo del cliente/negocio.',
+      },
+    },
+  },
+  render: (args) => (
+    <div className="min-w-[1360px]">
+      <Navbar {...args} />
+    </div>
+  ),
+};
+
+// ============================================
+// 11. CON BUSINESS LOGO + SIESA LOGO EN LEADING
+// ============================================
+export const ConBusinessLogoYSiesaLeading: Story = {
+  args: {
+    productName: '',
+    environmentBadge: 'Ambiente de Pruebas',
+    userDropdown: {
+      avatar: avatarExample,
+      name: 'Usuario Test',
+      email: 'test@ejemplo.com',
+    },
+    notifications: {
+      cart: 5,
+      bell: true,
+    },
+    variant: 'desktop',
+    showBusinessLogo: true,
+    showSiesaLogoLeading: true,
+    showSiesaLogoTrailing: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Navbar con Botón + Business Logo + Siesa Logo en el leading. Esta variante muestra ambos logos juntos en el lado izquierdo.',
+      },
+    },
+  },
+  render: (args) => (
+    <div className="min-w-[1360px]">
+      <Navbar {...args} />
+    </div>
+  ),
+};