siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/NavigationRail/NavigationRail.stories.tsx

@@ -1,417 +1,417 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NavigationRail } from './NavigationRail';
-import { NavigationBar } from '../NavigationBar';
-
-// Iconos de ejemplo (SVG inline)
-const HomeIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2 6L8 2L14 6V13C14 13.2652 13.8946 13.5196 13.7071 13.7071C13.5196 13.8946 13.2652 14 13 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V6Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M6 14V8H10V14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
-const SearchIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M15 15L11.35 11.35" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
-const BellIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 5.33333C12 4.27247 11.5786 3.25505 10.8284 2.50491C10.0783 1.75476 9.06087 1.33333 8 1.33333C6.93913 1.33333 5.92172 1.75476 5.17157 2.50491C4.42143 3.25505 4 4.27247 4 5.33333C4 10 2 11.3333 2 11.3333H14C14 11.3333 12 10 12 5.33333Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M9.15333 14C9.03614 14.2021 8.86791 14.3698 8.6655 14.4864C8.46309 14.6029 8.2336 14.6643 8 14.6643C7.7664 14.6643 7.53691 14.6029 7.3345 14.4864C7.13209 14.3698 6.96386 14.2021 6.84667 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
-const UserIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M13.3333 14V12.6667C13.3333 11.9594 13.0524 11.2811 12.5523 10.781C12.0522 10.281 11.3739 10 10.6667 10H5.33333C4.62609 10 3.94781 10.281 3.44772 10.781C2.94762 11.2811 2.66667 11.9594 2.66667 12.6667V14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M8 7.33333C9.47276 7.33333 10.6667 6.13943 10.6667 4.66667C10.6667 3.19391 9.47276 2 8 2C6.52724 2 5.33333 3.19391 5.33333 4.66667C5.33333 6.13943 6.52724 7.33333 8 7.33333Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
-const SettingsIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-    <path d="M12.9333 10C12.8444 10.2148 12.82 10.4504 12.8627 10.6792C12.9054 10.908 13.0135 11.1201 13.1733 11.2867L13.2067 11.32C13.3353 11.4485 13.4369 11.6012 13.5056 11.7691C13.5743 11.937 13.6087 12.1167 13.6087 12.2983C13.6087 12.48 13.5743 12.6597 13.5056 12.8276C13.4369 12.9955 13.3353 13.1482 13.2067 13.2767C13.0781 13.4053 12.9254 13.5069 12.7575 13.5756C12.5897 13.6443 12.4099 13.6787 12.2283 13.6787C12.0467 13.6787 11.867 13.6443 11.6991 13.5756C11.5312 13.5069 11.3785 13.4053 11.25 13.2767L11.2167 13.2433C11.05 13.0835 10.8379 12.9754 10.6092 12.9327C10.3804 12.89 10.1447 12.9144 9.93 13.0033C9.72 13.0878 9.53926 13.2308 9.41051 13.4153C9.28176 13.5998 9.21094 13.8177 9.20667 14.0417V14.1667C9.20667 14.5203 9.06619 14.8594 8.81614 15.1095C8.56609 15.3595 8.22703 15.5 7.87333 15.5C7.51964 15.5 7.18058 15.3595 6.93053 15.1095C6.68048 14.8594 6.54 14.5203 6.54 14.1667V14.1167C6.52954 13.8851 6.44911 13.662 6.30909 13.4758C6.16906 13.2896 5.9756 13.149 5.75333 13.0717C5.53867 12.9828 5.30299 12.9584 5.07422 13.0011C4.84546 13.0437 4.63335 13.1519 4.46667 13.3117L4.43333 13.345C4.30482 13.4736 4.1521 13.5752 3.98423 13.6439C3.81636 13.7126 3.63663 13.747 3.455 13.747C3.27337 13.747 3.09364 13.7126 2.92577 13.6439C2.7579 13.5752 2.60518 13.4736 2.47667 13.345C2.34807 13.2165 2.24649 13.0638 2.17779 12.8959C2.10909 12.728 2.07471 12.5483 2.07471 12.3667C2.07471 12.185 2.10909 12.0053 2.17779 11.8374C2.24649 11.6696 2.34807 11.5168 2.47667 11.3883L2.51 11.355C2.66976 11.1883 2.77792 10.9762 2.82064 10.7475C2.86336 10.5187 2.83896 10.283 2.75 10.0683C2.66554 9.85835 2.52254 9.67761 2.33804 9.54886C2.15354 9.42011 1.93564 9.34929 1.71167 9.345H1.58667C1.23297 9.345 0.893913 9.20452 0.643864 8.95447C0.393815 8.70442 0.253333 8.36536 0.253333 8.01167C0.253333 7.65797 0.393815 7.31891 0.643864 7.06886C0.893913 6.81881 1.23297 6.67833 1.58667 6.67833H1.63667C1.86832 6.66787 2.09135 6.58744 2.27757 6.44742C2.46378 6.30739 2.60436 6.11393 2.68167 5.89167C2.77061 5.677 2.79501 5.44133 2.75229 5.21256C2.70957 4.9838 2.60141 4.77169 2.44167 4.605L2.40833 4.57167C2.27973 4.44316 2.17815 4.29044 2.10945 4.12257C2.04075 3.9547 2.00637 3.77497 2.00637 3.59333C2.00637 3.4117 2.04075 3.23197 2.10945 3.0641C2.17815 2.89623 2.27973 2.74351 2.40833 2.615C2.53685 2.4864 2.68957 2.38482 2.85744 2.31612C3.02531 2.24742 3.20504 2.21304 3.38667 2.21304C3.5683 2.21304 3.74803 2.24742 3.9159 2.31612C4.08377 2.38482 4.23649 2.4864 4.365 2.615L4.39833 2.64833C4.56502 2.8081 4.77713 2.91626 5.00589 2.95898C5.23466 3.0017 5.47033 2.9773 5.685 2.88833H5.75333C5.96329 2.80387 6.14403 2.66088 6.27278 2.47638C6.40153 2.29187 6.47235 2.07398 6.47667 1.85V1.725C6.47667 1.3713 6.61715 1.03224 6.8672 0.78219C7.11725 0.532141 7.45631 0.391663 7.81 0.391663C8.1637 0.391663 8.50276 0.532141 8.75281 0.78219C9.00286 1.03224 9.14333 1.3713 9.14333 1.725V1.775C9.14766 1.99898 9.21848 2.21687 9.34723 2.40138C9.47598 2.58588 9.65672 2.72887 9.86667 2.81333C10.0813 2.9023 10.317 2.9267 10.5458 2.88398C10.7746 2.84126 10.9867 2.7331 11.1533 2.57333L11.1867 2.54C11.3152 2.4114 11.4679 2.30982 11.6358 2.24112C11.8036 2.17242 11.9834 2.13804 12.165 2.13804C12.3466 2.13804 12.5264 2.17242 12.6942 2.24112C12.8621 2.30982 13.0148 2.4114 13.1433 2.54C13.2719 2.66851 13.3735 2.82123 13.4422 2.9891C13.5109 3.15697 13.5453 3.3367 13.5453 3.51833C13.5453 3.69996 13.5109 3.87969 13.4422 4.04756C13.3735 4.21543 13.2719 4.36816 13.1433 4.49667L13.11 4.53C12.9502 4.69669 12.8421 4.9088 12.7994 5.13756C12.7566 5.36633 12.781 5.602 12.87 5.81667V5.885C12.9545 6.09496 13.0975 6.2757 13.282 6.40445C13.4665 6.5332 13.6844 6.60402 13.9083 6.60833H14.0333C14.387 6.60833 14.7261 6.74881 14.9761 6.99886C15.2262 7.24891 15.3667 7.58797 15.3667 7.94167C15.3667 8.29536 15.2262 8.63442 14.9761 8.88447C14.7261 9.13452 14.387 9.275 14.0333 9.275H13.9833C13.7594 9.27933 13.5415 9.35015 13.357 9.4789C13.1725 9.60765 13.0295 9.78838 12.945 9.99833" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
-const PlusIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8 3V13M3 8H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </svg>
-);
-
-// Data de ejemplo
-const sampleItems = [
-  { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true },
-  { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
-  { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 5 },
-  { id: 'profile', icon: <UserIcon />, label: 'Perfil' },
-  { id: 'settings', icon: <SettingsIcon />, label: 'Configuración' },
-];
-
-const meta = {
-  title: 'Siesa UI Kit/NavigationRail',
-  component: NavigationRail,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component: 'Barra de navegación vertical (rail) para aplicaciones. Proporciona acceso rápido a destinos principales mediante iconos y labels.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    alignment: {
-      control: 'select',
-      options: ['top', 'center', 'bottom'],
-      description: 'Alineación vertical de los items de navegación',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'top' },
-        category: 'Apariencia',
-      },
-    },
-    showFab: {
-      control: 'boolean',
-      description: 'Mostrar botón FAB (Floating Action Button) en la parte superior',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Contenido',
-      },
-    },
-    items: {
-      control: 'object',
-      description: 'Array de items de navegación a mostrar',
-      table: {
-        type: { summary: 'NavigationRailItemProps[]' },
-        category: 'Contenido',
-      },
-    },
-    selectedId: {
-      control: 'text',
-      description: 'ID del item seleccionado actualmente',
-      table: {
-        type: { summary: 'string' },
-        category: 'Estado',
-      },
-    },
-    fabIcon: {
-      control: false,
-      description: 'Icono del botón FAB',
-      table: {
-        type: { summary: 'ReactNode' },
-        category: 'Contenido',
-      },
-    },
-    onFabClick: {
-      action: 'FAB clicked',
-      description: 'Handler para click en el FAB',
-      table: {
-        type: { summary: '() => void' },
-        category: 'Comportamiento',
-      },
-    },
-    onItemSelect: {
-      action: 'item selected',
-      description: 'Handler cuando se selecciona un item',
-      table: {
-        type: { summary: '(id: string) => void' },
-        category: 'Comportamiento',
-      },
-    },
-  },
-} satisfies Meta<typeof NavigationRail>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    items: sampleItems,
-    alignment: 'top',
-    showFab: false,
-    selectedId: 'home',
-  },
-  render: (args) => (
-    <div className="bg-bg-primary dark:bg-dark-bg-primary">
-      <NavigationRail {...args} fabIcon={<PlusIcon />} />
-    </div>
-  ),
-};
-
-// ============================================
-// 2. ALINEACIONES
-// ============================================
-export const Alineaciones: Story = {
-  args: { items: [] },
-  render: () => (
-    <div className="flex gap-8 p-6 bg-bg-primary dark:bg-dark-bg-primary">
-      {/* Alineación Top */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-sm font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-          Arriba (Top)
-        </h3>
-        <div className="h-[600px] border border-border-primary dark:border-dark-border-primary rounded-lg">
-          <NavigationRail
-            items={sampleItems}
-            alignment="top"
-            selectedId="home"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          Items alineados en la parte superior
-        </p>
-      </div>
-
-      {/* Alineación Center */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-sm font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-          Centro (Center)
-        </h3>
-        <div className="h-[600px] border border-border-primary dark:border-dark-border-primary rounded-lg">
-          <NavigationRail
-            items={sampleItems}
-            alignment="center"
-            selectedId="search"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          Items centrados verticalmente
-        </p>
-      </div>
-
-      {/* Alineación Bottom */}
-      <div className="flex flex-col gap-4">
-        <h3 className="text-sm font-bold mb-2 text-content-primary dark:text-dark-content-primary">
-          Abajo (Bottom)
-        </h3>
-        <div className="h-[600px] border border-border-primary dark:border-dark-border-primary rounded-lg">
-          <NavigationRail
-            items={sampleItems}
-            alignment="bottom"
-            selectedId="settings"
-          />
-        </div>
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          Items alineados en la parte inferior
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. CON BOTÓN FAB
-// ============================================
-export const ConBotonFAB: Story = {
-  args: { items: [] },
-  render: () => (
-    <div className="bg-bg-primary dark:bg-dark-bg-primary">
-      <NavigationRail
-        items={sampleItems}
-        alignment="top"
-        showFab
-        fabIcon={<PlusIcon />}
-        onFabClick={() => console.log('FAB clicked')}
-        fabAriaLabel="Crear nuevo"
-        selectedId="home"
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 4. CON BADGES Y NOTIFICACIONES
-// ============================================
-export const ConBadges: Story = {
-  args: { items: [] },
-  render: () => (
-    <div className="bg-bg-primary dark:bg-dark-bg-primary">
-      <NavigationRail
-        items={[
-          { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true },
-          { id: 'search', icon: <SearchIcon />, label: 'Buscar', badge: true },
-          { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 5 },
-          { id: 'messages', icon: <UserIcon />, label: 'Mensajes', badgeCount: 123 },
-          { id: 'settings', icon: <SettingsIcon />, label: 'Configuración' },
-        ]}
-        alignment="top"
-        selectedId="home"
-      />
-    </div>
-  ),
-};
-
-// ============================================
-// 5. ESTADOS DE ITEMS
-// ============================================
-export const EstadosDeItems: Story = {
-  args: { items: [] },
-  render: () => (
-    <div className="space-y-8 p-6 bg-bg-primary dark:bg-dark-bg-primary">
-      {/* Estados normales */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
-          Estados Normales
-        </h3>
-        <div className="h-[500px] border border-border-primary dark:border-dark-border-primary rounded-lg inline-block">
-          <NavigationRail
-            items={[
-              { id: 'normal', icon: <HomeIcon />, label: 'Normal' },
-              { id: 'selected', icon: <SearchIcon />, label: 'Seleccionado', selected: true },
-              { id: 'hover', icon: <BellIcon />, label: 'Hover', badge: true },
-              { id: 'disabled', icon: <UserIcon />, label: 'Deshabilitado', disabled: true },
-            ]}
-            alignment="top"
-          />
-        </div>
-      </div>
-
-      {/* Tips */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg max-w-2xl">
-        <p className="text-xs text-content-secondary dark:text-content-secondary">
-          <strong className="text-content-primary dark:text-dark-content-primary">💡 Estados:</strong>
-          <br />• <strong>Normal</strong>: Icono gris, sin fondo
-          <br />• <strong>Hover</strong>: Icono azul, fondo azul claro
-          <br />• <strong>Seleccionado</strong>: Icono azul, fondo azul claro con overlay
-          <br />• <strong>Deshabilitado</strong>: Opacidad reducida, no interactivo
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. EJEMPLO COMPLETO
-// ============================================
-export const EjemploCompleto: Story = {
-  args: { items: [] },
-  render: () => (
-    <div className="flex h-screen bg-bg-primary dark:bg-dark-bg-primary">
-      {/* Navigation Rail */}
-      <NavigationRail
-        items={[
-          { id: 'dashboard', icon: <HomeIcon />, label: 'Dashboard', selected: true },
-          { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
-          { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 12 },
-          { id: 'profile', icon: <UserIcon />, label: 'Perfil' },
-          { id: 'settings', icon: <SettingsIcon />, label: 'Configuración' },
-        ]}
-        alignment="top"
-        showFab
-        fabIcon={<PlusIcon />}
-        onFabClick={() => console.log('Create new')}
-        selectedId="dashboard"
-      />
-
-      {/* Contenido principal */}
-      <div className="flex-1 p-8">
-        <div className="max-w-4xl">
-          <h1 className="text-4xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-4">
-            Dashboard
-          </h1>
-          <p className="text-content-secondary dark:text-content-secondary mb-8">
-            Ejemplo de aplicación con Navigation Rail lateral. La navegación proporciona
-            acceso rápido a las secciones principales mediante iconos y labels descriptivos.
-          </p>
-
-          {/* Cards de ejemplo */}
-          <div className="grid grid-cols-2 gap-6">
-            {[1, 2, 3, 4].map((item) => (
-              <div
-                key={item}
-                className="p-6 border border-border-primary dark:border-dark-border-primary rounded-2xl bg-white dark:bg-dark-bg-primary shadow-base"
-              >
-                <h3 className="text-xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-2">
-                  Card {item}
-                </h3>
-                <p className="text-sm text-content-secondary dark:text-content-secondary">
-                  Contenido de ejemplo para la card {item}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 7. VISTA RESPONSIVE (RAIL → BAR)
-// ============================================
-export const VistaResponsive: Story = {
-  args: { items: [] },
-  render: () => {
-    const responsiveItems = [
-      { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true, active: true },
-      { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
-      { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 3 },
-      { id: 'profile', icon: <UserIcon />, label: 'Perfil' },
-    ];
-
-    return (
-      <div className="min-h-screen flex bg-bg-primary dark:bg-dark-bg-primary">
-        {/* NavigationRail para desktop/tablet */}
-        <div className="hidden md:block">
-          <NavigationRail
-            items={responsiveItems}
-            alignment="top"
-            selectedId="home"
-            showFab
-            fabIcon={<PlusIcon />}
-            onFabClick={() => console.log('FAB clicked')}
-          />
-        </div>
-
-        {/* Contenido principal */}
-        <div className="flex-1 p-6 md:p-8 pb-24 md:pb-8">
-          <div className="max-w-4xl mx-auto">
-            <h1 className="text-3xl md:text-4xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-4">
-              Dashboard
-            </h1>
-            <p className="text-content-secondary dark:text-content-secondary mb-8">
-              Ejemplo de aplicación con navegación responsive. En desktop se usa NavigationRail
-              lateral, en mobile se usa NavigationBar inferior.
-            </p>
-
-            {/* Cards de ejemplo */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
-              {[1, 2, 3, 4].map((item) => (
-                <div
-                  key={item}
-                  className="p-4 md:p-6 border border-border-primary dark:border-dark-border-primary rounded-2xl bg-white dark:bg-dark-bg-primary shadow-base"
-                >
-                  <h3 className="text-lg md:text-xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-2">
-                    Card {item}
-                  </h3>
-                  <p className="text-sm text-content-secondary dark:text-content-secondary">
-                    Contenido de ejemplo para la card {item}
-                  </p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-
-        {/* NavigationBar para móvil */}
-        <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
-          <NavigationBar
-            items={responsiveItems}
-            activeItemId="home"
-            onItemClick={(id) => console.log('Item clicked:', id)}
-          />
-        </div>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { NavigationRail } from './NavigationRail';
+import { NavigationBar } from '../NavigationBar';
+
+// Iconos de ejemplo (SVG inline)
+const HomeIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 6L8 2L14 6V13C14 13.2652 13.8946 13.5196 13.7071 13.7071C13.5196 13.8946 13.2652 14 13 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V6Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M6 14V8H10V14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const SearchIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 13C10.3137 13 13 10.3137 13 7C13 3.68629 10.3137 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M15 15L11.35 11.35" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const BellIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 5.33333C12 4.27247 11.5786 3.25505 10.8284 2.50491C10.0783 1.75476 9.06087 1.33333 8 1.33333C6.93913 1.33333 5.92172 1.75476 5.17157 2.50491C4.42143 3.25505 4 4.27247 4 5.33333C4 10 2 11.3333 2 11.3333H14C14 11.3333 12 10 12 5.33333Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M9.15333 14C9.03614 14.2021 8.86791 14.3698 8.6655 14.4864C8.46309 14.6029 8.2336 14.6643 8 14.6643C7.7664 14.6643 7.53691 14.6029 7.3345 14.4864C7.13209 14.3698 6.96386 14.2021 6.84667 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const UserIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.3333 14V12.6667C13.3333 11.9594 13.0524 11.2811 12.5523 10.781C12.0522 10.281 11.3739 10 10.6667 10H5.33333C4.62609 10 3.94781 10.281 3.44772 10.781C2.94762 11.2811 2.66667 11.9594 2.66667 12.6667V14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M8 7.33333C9.47276 7.33333 10.6667 6.13943 10.6667 4.66667C10.6667 3.19391 9.47276 2 8 2C6.52724 2 5.33333 3.19391 5.33333 4.66667C5.33333 6.13943 6.52724 7.33333 8 7.33333Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    <path d="M12.9333 10C12.8444 10.2148 12.82 10.4504 12.8627 10.6792C12.9054 10.908 13.0135 11.1201 13.1733 11.2867L13.2067 11.32C13.3353 11.4485 13.4369 11.6012 13.5056 11.7691C13.5743 11.937 13.6087 12.1167 13.6087 12.2983C13.6087 12.48 13.5743 12.6597 13.5056 12.8276C13.4369 12.9955 13.3353 13.1482 13.2067 13.2767C13.0781 13.4053 12.9254 13.5069 12.7575 13.5756C12.5897 13.6443 12.4099 13.6787 12.2283 13.6787C12.0467 13.6787 11.867 13.6443 11.6991 13.5756C11.5312 13.5069 11.3785 13.4053 11.25 13.2767L11.2167 13.2433C11.05 13.0835 10.8379 12.9754 10.6092 12.9327C10.3804 12.89 10.1447 12.9144 9.93 13.0033C9.72 13.0878 9.53926 13.2308 9.41051 13.4153C9.28176 13.5998 9.21094 13.8177 9.20667 14.0417V14.1667C9.20667 14.5203 9.06619 14.8594 8.81614 15.1095C8.56609 15.3595 8.22703 15.5 7.87333 15.5C7.51964 15.5 7.18058 15.3595 6.93053 15.1095C6.68048 14.8594 6.54 14.5203 6.54 14.1667V14.1167C6.52954 13.8851 6.44911 13.662 6.30909 13.4758C6.16906 13.2896 5.9756 13.149 5.75333 13.0717C5.53867 12.9828 5.30299 12.9584 5.07422 13.0011C4.84546 13.0437 4.63335 13.1519 4.46667 13.3117L4.43333 13.345C4.30482 13.4736 4.1521 13.5752 3.98423 13.6439C3.81636 13.7126 3.63663 13.747 3.455 13.747C3.27337 13.747 3.09364 13.7126 2.92577 13.6439C2.7579 13.5752 2.60518 13.4736 2.47667 13.345C2.34807 13.2165 2.24649 13.0638 2.17779 12.8959C2.10909 12.728 2.07471 12.5483 2.07471 12.3667C2.07471 12.185 2.10909 12.0053 2.17779 11.8374C2.24649 11.6696 2.34807 11.5168 2.47667 11.3883L2.51 11.355C2.66976 11.1883 2.77792 10.9762 2.82064 10.7475C2.86336 10.5187 2.83896 10.283 2.75 10.0683C2.66554 9.85835 2.52254 9.67761 2.33804 9.54886C2.15354 9.42011 1.93564 9.34929 1.71167 9.345H1.58667C1.23297 9.345 0.893913 9.20452 0.643864 8.95447C0.393815 8.70442 0.253333 8.36536 0.253333 8.01167C0.253333 7.65797 0.393815 7.31891 0.643864 7.06886C0.893913 6.81881 1.23297 6.67833 1.58667 6.67833H1.63667C1.86832 6.66787 2.09135 6.58744 2.27757 6.44742C2.46378 6.30739 2.60436 6.11393 2.68167 5.89167C2.77061 5.677 2.79501 5.44133 2.75229 5.21256C2.70957 4.9838 2.60141 4.77169 2.44167 4.605L2.40833 4.57167C2.27973 4.44316 2.17815 4.29044 2.10945 4.12257C2.04075 3.9547 2.00637 3.77497 2.00637 3.59333C2.00637 3.4117 2.04075 3.23197 2.10945 3.0641C2.17815 2.89623 2.27973 2.74351 2.40833 2.615C2.53685 2.4864 2.68957 2.38482 2.85744 2.31612C3.02531 2.24742 3.20504 2.21304 3.38667 2.21304C3.5683 2.21304 3.74803 2.24742 3.9159 2.31612C4.08377 2.38482 4.23649 2.4864 4.365 2.615L4.39833 2.64833C4.56502 2.8081 4.77713 2.91626 5.00589 2.95898C5.23466 3.0017 5.47033 2.9773 5.685 2.88833H5.75333C5.96329 2.80387 6.14403 2.66088 6.27278 2.47638C6.40153 2.29187 6.47235 2.07398 6.47667 1.85V1.725C6.47667 1.3713 6.61715 1.03224 6.8672 0.78219C7.11725 0.532141 7.45631 0.391663 7.81 0.391663C8.1637 0.391663 8.50276 0.532141 8.75281 0.78219C9.00286 1.03224 9.14333 1.3713 9.14333 1.725V1.775C9.14766 1.99898 9.21848 2.21687 9.34723 2.40138C9.47598 2.58588 9.65672 2.72887 9.86667 2.81333C10.0813 2.9023 10.317 2.9267 10.5458 2.88398C10.7746 2.84126 10.9867 2.7331 11.1533 2.57333L11.1867 2.54C11.3152 2.4114 11.4679 2.30982 11.6358 2.24112C11.8036 2.17242 11.9834 2.13804 12.165 2.13804C12.3466 2.13804 12.5264 2.17242 12.6942 2.24112C12.8621 2.30982 13.0148 2.4114 13.1433 2.54C13.2719 2.66851 13.3735 2.82123 13.4422 2.9891C13.5109 3.15697 13.5453 3.3367 13.5453 3.51833C13.5453 3.69996 13.5109 3.87969 13.4422 4.04756C13.3735 4.21543 13.2719 4.36816 13.1433 4.49667L13.11 4.53C12.9502 4.69669 12.8421 4.9088 12.7994 5.13756C12.7566 5.36633 12.781 5.602 12.87 5.81667V5.885C12.9545 6.09496 13.0975 6.2757 13.282 6.40445C13.4665 6.5332 13.6844 6.60402 13.9083 6.60833H14.0333C14.387 6.60833 14.7261 6.74881 14.9761 6.99886C15.2262 7.24891 15.3667 7.58797 15.3667 7.94167C15.3667 8.29536 15.2262 8.63442 14.9761 8.88447C14.7261 9.13452 14.387 9.275 14.0333 9.275H13.9833C13.7594 9.27933 13.5415 9.35015 13.357 9.4789C13.1725 9.60765 13.0295 9.78838 12.945 9.99833" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+const PlusIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 3V13M3 8H13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+);
+
+// Data de ejemplo
+const sampleItems = [
+  { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true },
+  { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
+  { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 5 },
+  { id: 'profile', icon: <UserIcon />, label: 'Perfil' },
+  { id: 'settings', icon: <SettingsIcon />, label: 'Configuración' },
+];
+
+const meta = {
+  title: 'Siesa UI Kit/NavigationRail',
+  component: NavigationRail,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Barra de navegación vertical (rail) para aplicaciones. Proporciona acceso rápido a destinos principales mediante iconos y labels.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    alignment: {
+      control: 'select',
+      options: ['top', 'center', 'bottom'],
+      description: 'Alineación vertical de los items de navegación',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'top' },
+        category: 'Apariencia',
+      },
+    },
+    showFab: {
+      control: 'boolean',
+      description: 'Mostrar botón FAB (Floating Action Button) en la parte superior',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Contenido',
+      },
+    },
+    items: {
+      control: 'object',
+      description: 'Array de items de navegación a mostrar',
+      table: {
+        type: { summary: 'NavigationRailItemProps[]' },
+        category: 'Contenido',
+      },
+    },
+    selectedId: {
+      control: 'text',
+      description: 'ID del item seleccionado actualmente',
+      table: {
+        type: { summary: 'string' },
+        category: 'Estado',
+      },
+    },
+    fabIcon: {
+      control: false,
+      description: 'Icono del botón FAB',
+      table: {
+        type: { summary: 'ReactNode' },
+        category: 'Contenido',
+      },
+    },
+    onFabClick: {
+      action: 'FAB clicked',
+      description: 'Handler para click en el FAB',
+      table: {
+        type: { summary: '() => void' },
+        category: 'Comportamiento',
+      },
+    },
+    onItemSelect: {
+      action: 'item selected',
+      description: 'Handler cuando se selecciona un item',
+      table: {
+        type: { summary: '(id: string) => void' },
+        category: 'Comportamiento',
+      },
+    },
+  },
+} satisfies Meta<typeof NavigationRail>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    items: sampleItems,
+    alignment: 'top',
+    showFab: false,
+    selectedId: 'home',
+  },
+  render: (args) => (
+    <div className="bg-bg-primary dark:bg-dark-bg-primary">
+      <NavigationRail {...args} fabIcon={<PlusIcon />} />
+    </div>
+  ),
+};
+
+// ============================================
+// 2. ALINEACIONES
+// ============================================
+export const Alineaciones: Story = {
+  args: { items: [] },
+  render: () => (
+    <div className="flex gap-8 p-6 bg-bg-primary dark:bg-dark-bg-primary">
+      {/* Alineación Top */}
+      <div className="flex flex-col gap-4">
+        <h3 className="text-sm font-bold mb-2 text-content-primary dark:text-dark-content-primary">
+          Arriba (Top)
+        </h3>
+        <div className="h-[600px] border border-border-primary dark:border-dark-border-primary rounded-lg">
+          <NavigationRail
+            items={sampleItems}
+            alignment="top"
+            selectedId="home"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary">
+          Items alineados en la parte superior
+        </p>
+      </div>
+
+      {/* Alineación Center */}
+      <div className="flex flex-col gap-4">
+        <h3 className="text-sm font-bold mb-2 text-content-primary dark:text-dark-content-primary">
+          Centro (Center)
+        </h3>
+        <div className="h-[600px] border border-border-primary dark:border-dark-border-primary rounded-lg">
+          <NavigationRail
+            items={sampleItems}
+            alignment="center"
+            selectedId="search"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary">
+          Items centrados verticalmente
+        </p>
+      </div>
+
+      {/* Alineación Bottom */}
+      <div className="flex flex-col gap-4">
+        <h3 className="text-sm font-bold mb-2 text-content-primary dark:text-dark-content-primary">
+          Abajo (Bottom)
+        </h3>
+        <div className="h-[600px] border border-border-primary dark:border-dark-border-primary rounded-lg">
+          <NavigationRail
+            items={sampleItems}
+            alignment="bottom"
+            selectedId="settings"
+          />
+        </div>
+        <p className="text-xs text-content-secondary dark:text-content-secondary">
+          Items alineados en la parte inferior
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. CON BOTÓN FAB
+// ============================================
+export const ConBotonFAB: Story = {
+  args: { items: [] },
+  render: () => (
+    <div className="bg-bg-primary dark:bg-dark-bg-primary">
+      <NavigationRail
+        items={sampleItems}
+        alignment="top"
+        showFab
+        fabIcon={<PlusIcon />}
+        onFabClick={() => console.log('FAB clicked')}
+        fabAriaLabel="Crear nuevo"
+        selectedId="home"
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 4. CON BADGES Y NOTIFICACIONES
+// ============================================
+export const ConBadges: Story = {
+  args: { items: [] },
+  render: () => (
+    <div className="bg-bg-primary dark:bg-dark-bg-primary">
+      <NavigationRail
+        items={[
+          { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true },
+          { id: 'search', icon: <SearchIcon />, label: 'Buscar', badge: true },
+          { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 5 },
+          { id: 'messages', icon: <UserIcon />, label: 'Mensajes', badgeCount: 123 },
+          { id: 'settings', icon: <SettingsIcon />, label: 'Configuración' },
+        ]}
+        alignment="top"
+        selectedId="home"
+      />
+    </div>
+  ),
+};
+
+// ============================================
+// 5. ESTADOS DE ITEMS
+// ============================================
+export const EstadosDeItems: Story = {
+  args: { items: [] },
+  render: () => (
+    <div className="space-y-8 p-6 bg-bg-primary dark:bg-dark-bg-primary">
+      {/* Estados normales */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estados Normales
+        </h3>
+        <div className="h-[500px] border border-border-primary dark:border-dark-border-primary rounded-lg inline-block">
+          <NavigationRail
+            items={[
+              { id: 'normal', icon: <HomeIcon />, label: 'Normal' },
+              { id: 'selected', icon: <SearchIcon />, label: 'Seleccionado', selected: true },
+              { id: 'hover', icon: <BellIcon />, label: 'Hover', badge: true },
+              { id: 'disabled', icon: <UserIcon />, label: 'Deshabilitado', disabled: true },
+            ]}
+            alignment="top"
+          />
+        </div>
+      </div>
+
+      {/* Tips */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg max-w-2xl">
+        <p className="text-xs text-content-secondary dark:text-content-secondary">
+          <strong className="text-content-primary dark:text-dark-content-primary">💡 Estados:</strong>
+          <br />• <strong>Normal</strong>: Icono gris, sin fondo
+          <br />• <strong>Hover</strong>: Icono azul, fondo azul claro
+          <br />• <strong>Seleccionado</strong>: Icono azul, fondo azul claro con overlay
+          <br />• <strong>Deshabilitado</strong>: Opacidad reducida, no interactivo
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. EJEMPLO COMPLETO
+// ============================================
+export const EjemploCompleto: Story = {
+  args: { items: [] },
+  render: () => (
+    <div className="flex h-screen bg-bg-primary dark:bg-dark-bg-primary">
+      {/* Navigation Rail */}
+      <NavigationRail
+        items={[
+          { id: 'dashboard', icon: <HomeIcon />, label: 'Dashboard', selected: true },
+          { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
+          { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 12 },
+          { id: 'profile', icon: <UserIcon />, label: 'Perfil' },
+          { id: 'settings', icon: <SettingsIcon />, label: 'Configuración' },
+        ]}
+        alignment="top"
+        showFab
+        fabIcon={<PlusIcon />}
+        onFabClick={() => console.log('Create new')}
+        selectedId="dashboard"
+      />
+
+      {/* Contenido principal */}
+      <div className="flex-1 p-8">
+        <div className="max-w-4xl">
+          <h1 className="text-4xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-4">
+            Dashboard
+          </h1>
+          <p className="text-content-secondary dark:text-content-secondary mb-8">
+            Ejemplo de aplicación con Navigation Rail lateral. La navegación proporciona
+            acceso rápido a las secciones principales mediante iconos y labels descriptivos.
+          </p>
+
+          {/* Cards de ejemplo */}
+          <div className="grid grid-cols-2 gap-6">
+            {[1, 2, 3, 4].map((item) => (
+              <div
+                key={item}
+                className="p-6 border border-border-primary dark:border-dark-border-primary rounded-2xl bg-white dark:bg-dark-bg-primary shadow-base"
+              >
+                <h3 className="text-xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-2">
+                  Card {item}
+                </h3>
+                <p className="text-sm text-content-secondary dark:text-content-secondary">
+                  Contenido de ejemplo para la card {item}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. VISTA RESPONSIVE (RAIL → BAR)
+// ============================================
+export const VistaResponsive: Story = {
+  args: { items: [] },
+  render: () => {
+    const responsiveItems = [
+      { id: 'home', icon: <HomeIcon />, label: 'Inicio', selected: true, active: true },
+      { id: 'search', icon: <SearchIcon />, label: 'Buscar' },
+      { id: 'notifications', icon: <BellIcon />, label: 'Notificaciones', badgeCount: 3 },
+      { id: 'profile', icon: <UserIcon />, label: 'Perfil' },
+    ];
+
+    return (
+      <div className="min-h-screen flex bg-bg-primary dark:bg-dark-bg-primary">
+        {/* NavigationRail para desktop/tablet */}
+        <div className="hidden md:block">
+          <NavigationRail
+            items={responsiveItems}
+            alignment="top"
+            selectedId="home"
+            showFab
+            fabIcon={<PlusIcon />}
+            onFabClick={() => console.log('FAB clicked')}
+          />
+        </div>
+
+        {/* Contenido principal */}
+        <div className="flex-1 p-6 md:p-8 pb-24 md:pb-8">
+          <div className="max-w-4xl mx-auto">
+            <h1 className="text-3xl md:text-4xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-4">
+              Dashboard
+            </h1>
+            <p className="text-content-secondary dark:text-content-secondary mb-8">
+              Ejemplo de aplicación con navegación responsive. En desktop se usa NavigationRail
+              lateral, en mobile se usa NavigationBar inferior.
+            </p>
+
+            {/* Cards de ejemplo */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
+              {[1, 2, 3, 4].map((item) => (
+                <div
+                  key={item}
+                  className="p-4 md:p-6 border border-border-primary dark:border-dark-border-primary rounded-2xl bg-white dark:bg-dark-bg-primary shadow-base"
+                >
+                  <h3 className="text-lg md:text-xl font-bold tracking-tighter text-content-primary dark:text-dark-content-primary mb-2">
+                    Card {item}
+                  </h3>
+                  <p className="text-sm text-content-secondary dark:text-content-secondary">
+                    Contenido de ejemplo para la card {item}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* NavigationBar para móvil */}
+        <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
+          <NavigationBar
+            items={responsiveItems}
+            activeItemId="home"
+            onItemClick={(id) => console.log('Item clicked:', id)}
+          />
+        </div>
+      </div>
+    );
+  },
+};