siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,552 +1,552 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Dropdown } from './Dropdown';
-import { UserIcon, CogIcon, BellIcon, CreditCardIcon } from './icons';
-
-/**
- * Dropdown - Componente de menú desplegable del sistema de diseño Siesa
- *
- * Componente dropdown completo con menú desplegable, items, headings y dividers.
- * Implementado con React, TypeScript y Tailwind CSS siguiendo pixel-perfect las
- * especificaciones de Figma.
- *
- * **Características:**
- * - Múltiples tipos de items (con iconos, descripciones, shortcuts)
- * - Headings y dividers para organizar el menú
- * - Estados: Default, Hover, Focus, Disabled
- * - Cierre automático al hacer click fuera
- * - Soporte para teclado (Escape para cerrar)
- * - Dark mode completo
- */
-const meta = {
-  title: 'Siesa UI Kit/Dropdown',
-  component: Dropdown,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Menú desplegable con soporte para items, headings, dividers y múltiples estados. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'icon-only'],
-      description: 'Variante visual del dropdown',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'default' },
-        category: 'Apariencia',
-      },
-    },
-    children: {
-      control: 'text',
-      description: 'Texto del botón trigger',
-      table: {
-        type: { summary: 'ReactNode' },
-        category: 'Contenido',
-      },
-    },
-    placeholder: {
-      control: 'text',
-      description: 'Placeholder cuando no hay children',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Options' },
-        category: 'Contenido',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el dropdown',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    items: {
-      description: 'Array de items del menú',
-      table: {
-        type: { summary: 'DropdownItemProps[]' },
-        category: 'Contenido',
-      },
-    },
-  },
-} satisfies Meta<typeof Dropdown>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    variant: 'default',
-    placeholder: 'Opciones',
-    items: [
-      { children: 'Cuenta', icon: <UserIcon /> },
-      { children: 'Notificaciones', icon: <BellIcon /> },
-      { children: 'Facturación', icon: <CreditCardIcon /> },
-      { isDivider: true },
-      { isHeading: true, children: 'Mis eventos' },
-      { children: 'Próximos eventos' },
-      { children: 'Eventos pasados' },
-    ],
-  },
-};
-
-// ============================================
-// 2. VARIANTES
-// ============================================
-export const Variantes: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Default Variant */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Por Defecto (con texto)
-        </h3>
-        <Dropdown
-          variant="default"
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Botón con texto + ícono de chevron
-        </p>
-      </div>
-
-      {/* Icon Only Variant */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Solo Ícono
-        </h3>
-        <Dropdown
-          variant="icon-only"
-          items={[
-            { children: 'Cuenta', icon: <UserIcon /> },
-            { children: 'Configuración', icon: <CogIcon /> },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Solo ícono de chevron (36x36px) - ideal para espacios reducidos
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. TIPOS DE MENÚ
-// ============================================
-export const TodosLosTiposDeMenu: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Basic */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Básico
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Notificaciones' },
-            { children: 'Facturación' },
-            { isDivider: true },
-            { isHeading: true, children: 'Mis eventos' },
-            { children: 'Próximos eventos' },
-            { children: 'Eventos pasados' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Menú básico con items, dividers y headings
-        </p>
-      </div>
-
-      {/* With Icons */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Iconos
-        </h3>
-        <Dropdown
-          placeholder="Acciones"
-          items={[
-            { children: 'Cuenta', icon: <UserIcon /> },
-            { children: 'Configuración', icon: <CogIcon /> },
-            { children: 'Notificaciones', icon: <BellIcon /> },
-            { isDivider: true },
-            { children: 'Facturación', icon: <CreditCardIcon /> },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Items con iconos a la izquierda
-        </p>
-      </div>
-
-      {/* With Shortcuts */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Atajos de Teclado
-        </h3>
-        <Dropdown
-          placeholder="Editar"
-          items={[
-            { children: 'Deshacer', shortcut: '⌘ Z' },
-            { children: 'Rehacer', shortcut: '⌘ ⇧ Z' },
-            { isDivider: true },
-            { children: 'Cortar', shortcut: '⌘ X' },
-            { children: 'Copiar', shortcut: '⌘ C' },
-            { children: 'Pegar', shortcut: '⌘ V' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Items con shortcuts de teclado
-        </p>
-      </div>
-
-      {/* With Description */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Descripción
-        </h3>
-        <Dropdown
-          placeholder="Configuración"
-          items={[
-            {
-              children: 'Perfil',
-              icon: <UserIcon />,
-              description: 'Administra tu perfil público',
-            },
-            {
-              children: 'Configuración',
-              icon: <CogIcon />,
-              description: 'Configura las preferencias de la app',
-            },
-            {
-              children: 'Facturación',
-              icon: <CreditCardIcon />,
-              description: 'Métodos de pago y facturas',
-            },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Items con descripciones secundarias
-        </p>
-      </div>
-
-      {/* With Menu Header */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Encabezados de Menú
-        </h3>
-        <Dropdown
-          placeholder="Cuenta"
-          items={[
-            { isHeading: true, children: 'Cuenta' },
-            { children: 'Perfil', icon: <UserIcon /> },
-            { children: 'Configuración', icon: <CogIcon /> },
-            { isDivider: true },
-            { isHeading: true, children: 'Preferencias' },
-            { children: 'Notificaciones', icon: <BellIcon /> },
-            { children: 'Facturación', icon: <CreditCardIcon /> },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Menú con múltiples secciones y headers
-        </p>
-      </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">
-        <p className="text-xs text-gray-600 dark:text-gray-300">
-          <strong>💡 Consejos:</strong>
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">isDivider: true</code> para
-          separadores
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">isHeading: true</code> para
-          encabezados
-          <br />• Agrega <code className="px-1 bg-white dark:bg-gray-700">description</code> para
-          texto secundario
-          <br />• Agrega <code className="px-1 bg-white dark:bg-gray-700">shortcut</code> para
-          atajos de teclado
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. ESTADOS
-// ============================================
-export const Estados: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Default */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Por Defecto
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Estado normal del dropdown
-        </p>
-      </div>
-
-      {/* Hover */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Hover
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Pasa el mouse sobre el botón para ver el efecto hover
-        </p>
-      </div>
-
-      {/* Focus */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Focus
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Haz click en el botón para ver el focus ring
-        </p>
-      </div>
-
-      {/* Disabled */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Deshabilitado
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          disabled
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración' },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Dropdown deshabilitado (no interactivo)
-        </p>
-      </div>
-
-      {/* Item Disabled */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Con Item Deshabilitado
-        </h3>
-        <Dropdown
-          placeholder="Opciones"
-          items={[
-            { children: 'Cuenta' },
-            { children: 'Configuración', disabled: true },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Item individual deshabilitado
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. EJEMPLOS DE USO
-// ============================================
-export const EjemplosDeUso: Story = {
-  args: {
-    items: [],
-  },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* User Menu */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Menú de Usuario
-        </h3>
-        <Dropdown
-          placeholder="Juan Pérez"
-          items={[
-            { children: 'Perfil', icon: <UserIcon />, description: 'Ver tu perfil' },
-            {
-              children: 'Configuración',
-              icon: <CogIcon />,
-              description: 'Administra tu cuenta',
-              shortcut: '⌘ ,',
-            },
-            { isDivider: true },
-            { children: 'Cerrar sesión' },
-          ]}
-        />
-      </div>
-
-      {/* Edit Menu */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Menú de Edición
-        </h3>
-        <Dropdown
-          placeholder="Editar"
-          items={[
-            { children: 'Deshacer', shortcut: '⌘ Z' },
-            { children: 'Rehacer', shortcut: '⌘ ⇧ Z' },
-            { isDivider: true },
-            { children: 'Cortar', shortcut: '⌘ X' },
-            { children: 'Copiar', shortcut: '⌘ C' },
-            { children: 'Pegar', shortcut: '⌘ V' },
-            { isDivider: true },
-            { children: 'Seleccionar todo', shortcut: '⌘ A' },
-          ]}
-        />
-      </div>
-
-      {/* View Menu */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Menú de Vista
-        </h3>
-        <Dropdown
-          placeholder="Vista"
-          items={[
-            { isHeading: true, children: 'Diseño' },
-            { children: 'Mostrar barra lateral', shortcut: '⌘ B' },
-            { children: 'Mostrar barra de herramientas', shortcut: '⌘ T' },
-            { isDivider: true },
-            { isHeading: true, children: 'Apariencia' },
-            { children: 'Modo claro' },
-            { children: 'Modo oscuro' },
-            { children: 'Automático' },
-          ]}
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. CONTROLLED VS UNCONTROLLED
-// ============================================
-export const Controlado: Story = {
-  args: {
-    items: [],
-  },
-  render: () => {
-    const [open, setOpen] = React.useState(false);
-
-    return (
-      <div className="space-y-4 p-6">
-        <h3 className="text-sm font-bold text-gray-700 dark:text-white">
-          Dropdown Controlado
-        </h3>
-        <div className="flex items-center gap-4">
-          <Dropdown
-            placeholder="Controlado"
-            open={open}
-            onOpenChange={setOpen}
-            items={[
-              { children: 'Cuenta' },
-              { children: 'Configuración' },
-              { children: 'Cerrar sesión' },
-            ]}
-          />
-          <button
-            onClick={() => setOpen(!open)}
-            className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-white rounded-md text-sm font-bold"
-          >
-            Alternar Dropdown
-          </button>
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300">
-          Estado: {open ? 'Abierto' : 'Cerrado'}
-        </p>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 7. WITH CALLBACKS
-// ============================================
-export const ConCallbacks: Story = {
-  args: {
-    items: [],
-  },
-  render: () => {
-    const [lastAction, setLastAction] = React.useState('Ninguna');
-
-    return (
-      <div className="space-y-4 p-6">
-        <h3 className="text-sm font-bold text-gray-700 dark:text-white">
-          Con Callbacks
-        </h3>
-        <Dropdown
-          placeholder="Acciones"
-          onOpenChange={(open) => setLastAction(open ? 'Abierto' : 'Cerrado')}
-          items={[
-            {
-              children: 'Editar',
-              onClick: () => setLastAction('Editar clickeado'),
-            },
-            {
-              children: 'Duplicar',
-              onClick: () => setLastAction('Duplicar clickeado'),
-            },
-            {
-              children: 'Eliminar',
-              onClick: () => setLastAction('Eliminar clickeado'),
-            },
-          ]}
-        />
-        <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
-          <p className="text-sm text-gray-700 dark:text-white">
-            Última acción: <strong>{lastAction}</strong>
-          </p>
-        </div>
-      </div>
-    );
-  },
-};
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from './Dropdown';
+import { UserIcon, CogIcon, BellIcon, CreditCardIcon } from './icons';
+
+/**
+ * Dropdown - Componente de menú desplegable del sistema de diseño Siesa
+ *
+ * Componente dropdown completo con menú desplegable, items, headings y dividers.
+ * Implementado con React, TypeScript y Tailwind CSS siguiendo pixel-perfect las
+ * especificaciones de Figma.
+ *
+ * **Características:**
+ * - Múltiples tipos de items (con iconos, descripciones, shortcuts)
+ * - Headings y dividers para organizar el menú
+ * - Estados: Default, Hover, Focus, Disabled
+ * - Cierre automático al hacer click fuera
+ * - Soporte para teclado (Escape para cerrar)
+ * - Dark mode completo
+ */
+const meta = {
+  title: 'Siesa UI Kit/Dropdown',
+  component: Dropdown,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Menú desplegable con soporte para items, headings, dividers y múltiples estados. Diseñado para mantener consistencia visual y funcional en toda la aplicación.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'icon-only'],
+      description: 'Variante visual del dropdown',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'default' },
+        category: 'Apariencia',
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Texto del botón trigger',
+      table: {
+        type: { summary: 'ReactNode' },
+        category: 'Contenido',
+      },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder cuando no hay children',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'Options' },
+        category: 'Contenido',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el dropdown',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    items: {
+      description: 'Array de items del menú',
+      table: {
+        type: { summary: 'DropdownItemProps[]' },
+        category: 'Contenido',
+      },
+    },
+  },
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    variant: 'default',
+    placeholder: 'Opciones',
+    items: [
+      { children: 'Cuenta', icon: <UserIcon /> },
+      { children: 'Notificaciones', icon: <BellIcon /> },
+      { children: 'Facturación', icon: <CreditCardIcon /> },
+      { isDivider: true },
+      { isHeading: true, children: 'Mis eventos' },
+      { children: 'Próximos eventos' },
+      { children: 'Eventos pasados' },
+    ],
+  },
+};
+
+// ============================================
+// 2. VARIANTES
+// ============================================
+export const Variantes: Story = {
+  args: {
+    items: [],
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Default Variant */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Por Defecto (con texto)
+        </h3>
+        <Dropdown
+          variant="default"
+          placeholder="Opciones"
+          items={[
+            { children: 'Cuenta' },
+            { children: 'Configuración' },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Botón con texto + ícono de chevron
+        </p>
+      </div>
+
+      {/* Icon Only Variant */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Solo Ícono
+        </h3>
+        <Dropdown
+          variant="icon-only"
+          items={[
+            { children: 'Cuenta', icon: <UserIcon /> },
+            { children: 'Configuración', icon: <CogIcon /> },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo ícono de chevron (36x36px) - ideal para espacios reducidos
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. TIPOS DE MENÚ
+// ============================================
+export const TodosLosTiposDeMenu: Story = {
+  args: {
+    items: [],
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Basic */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Básico
+        </h3>
+        <Dropdown
+          placeholder="Opciones"
+          items={[
+            { children: 'Cuenta' },
+            { children: 'Notificaciones' },
+            { children: 'Facturación' },
+            { isDivider: true },
+            { isHeading: true, children: 'Mis eventos' },
+            { children: 'Próximos eventos' },
+            { children: 'Eventos pasados' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Menú básico con items, dividers y headings
+        </p>
+      </div>
+
+      {/* With Icons */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Con Iconos
+        </h3>
+        <Dropdown
+          placeholder="Acciones"
+          items={[
+            { children: 'Cuenta', icon: <UserIcon /> },
+            { children: 'Configuración', icon: <CogIcon /> },
+            { children: 'Notificaciones', icon: <BellIcon /> },
+            { isDivider: true },
+            { children: 'Facturación', icon: <CreditCardIcon /> },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Items con iconos a la izquierda
+        </p>
+      </div>
+
+      {/* With Shortcuts */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Con Atajos de Teclado
+        </h3>
+        <Dropdown
+          placeholder="Editar"
+          items={[
+            { children: 'Deshacer', shortcut: '⌘ Z' },
+            { children: 'Rehacer', shortcut: '⌘ ⇧ Z' },
+            { isDivider: true },
+            { children: 'Cortar', shortcut: '⌘ X' },
+            { children: 'Copiar', shortcut: '⌘ C' },
+            { children: 'Pegar', shortcut: '⌘ V' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Items con shortcuts de teclado
+        </p>
+      </div>
+
+      {/* With Description */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Con Descripción
+        </h3>
+        <Dropdown
+          placeholder="Configuración"
+          items={[
+            {
+              children: 'Perfil',
+              icon: <UserIcon />,
+              description: 'Administra tu perfil público',
+            },
+            {
+              children: 'Configuración',
+              icon: <CogIcon />,
+              description: 'Configura las preferencias de la app',
+            },
+            {
+              children: 'Facturación',
+              icon: <CreditCardIcon />,
+              description: 'Métodos de pago y facturas',
+            },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Items con descripciones secundarias
+        </p>
+      </div>
+
+      {/* With Menu Header */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Con Encabezados de Menú
+        </h3>
+        <Dropdown
+          placeholder="Cuenta"
+          items={[
+            { isHeading: true, children: 'Cuenta' },
+            { children: 'Perfil', icon: <UserIcon /> },
+            { children: 'Configuración', icon: <CogIcon /> },
+            { isDivider: true },
+            { isHeading: true, children: 'Preferencias' },
+            { children: 'Notificaciones', icon: <BellIcon /> },
+            { children: 'Facturación', icon: <CreditCardIcon /> },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Menú con múltiples secciones y headers
+        </p>
+      </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">
+        <p className="text-xs text-gray-600 dark:text-gray-300">
+          <strong>💡 Consejos:</strong>
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">isDivider: true</code> para
+          separadores
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">isHeading: true</code> para
+          encabezados
+          <br />• Agrega <code className="px-1 bg-white dark:bg-gray-700">description</code> para
+          texto secundario
+          <br />• Agrega <code className="px-1 bg-white dark:bg-gray-700">shortcut</code> para
+          atajos de teclado
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. ESTADOS
+// ============================================
+export const Estados: Story = {
+  args: {
+    items: [],
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Default */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Por Defecto
+        </h3>
+        <Dropdown
+          placeholder="Opciones"
+          items={[
+            { children: 'Cuenta' },
+            { children: 'Configuración' },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Estado normal del dropdown
+        </p>
+      </div>
+
+      {/* Hover */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Hover
+        </h3>
+        <Dropdown
+          placeholder="Opciones"
+          items={[
+            { children: 'Cuenta' },
+            { children: 'Configuración' },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Pasa el mouse sobre el botón para ver el efecto hover
+        </p>
+      </div>
+
+      {/* Focus */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Focus
+        </h3>
+        <Dropdown
+          placeholder="Opciones"
+          items={[
+            { children: 'Cuenta' },
+            { children: 'Configuración' },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Haz click en el botón para ver el focus ring
+        </p>
+      </div>
+
+      {/* Disabled */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Deshabilitado
+        </h3>
+        <Dropdown
+          placeholder="Opciones"
+          disabled
+          items={[
+            { children: 'Cuenta' },
+            { children: 'Configuración' },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Dropdown deshabilitado (no interactivo)
+        </p>
+      </div>
+
+      {/* Item Disabled */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Con Item Deshabilitado
+        </h3>
+        <Dropdown
+          placeholder="Opciones"
+          items={[
+            { children: 'Cuenta' },
+            { children: 'Configuración', disabled: true },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Item individual deshabilitado
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. EJEMPLOS DE USO
+// ============================================
+export const EjemplosDeUso: Story = {
+  args: {
+    items: [],
+  },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* User Menu */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Menú de Usuario
+        </h3>
+        <Dropdown
+          placeholder="Juan Pérez"
+          items={[
+            { children: 'Perfil', icon: <UserIcon />, description: 'Ver tu perfil' },
+            {
+              children: 'Configuración',
+              icon: <CogIcon />,
+              description: 'Administra tu cuenta',
+              shortcut: '⌘ ,',
+            },
+            { isDivider: true },
+            { children: 'Cerrar sesión' },
+          ]}
+        />
+      </div>
+
+      {/* Edit Menu */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Menú de Edición
+        </h3>
+        <Dropdown
+          placeholder="Editar"
+          items={[
+            { children: 'Deshacer', shortcut: '⌘ Z' },
+            { children: 'Rehacer', shortcut: '⌘ ⇧ Z' },
+            { isDivider: true },
+            { children: 'Cortar', shortcut: '⌘ X' },
+            { children: 'Copiar', shortcut: '⌘ C' },
+            { children: 'Pegar', shortcut: '⌘ V' },
+            { isDivider: true },
+            { children: 'Seleccionar todo', shortcut: '⌘ A' },
+          ]}
+        />
+      </div>
+
+      {/* View Menu */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Menú de Vista
+        </h3>
+        <Dropdown
+          placeholder="Vista"
+          items={[
+            { isHeading: true, children: 'Diseño' },
+            { children: 'Mostrar barra lateral', shortcut: '⌘ B' },
+            { children: 'Mostrar barra de herramientas', shortcut: '⌘ T' },
+            { isDivider: true },
+            { isHeading: true, children: 'Apariencia' },
+            { children: 'Modo claro' },
+            { children: 'Modo oscuro' },
+            { children: 'Automático' },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. CONTROLLED VS UNCONTROLLED
+// ============================================
+export const Controlado: Story = {
+  args: {
+    items: [],
+  },
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <div className="space-y-4 p-6">
+        <h3 className="text-sm font-bold text-gray-700 dark:text-white">
+          Dropdown Controlado
+        </h3>
+        <div className="flex items-center gap-4">
+          <Dropdown
+            placeholder="Controlado"
+            open={open}
+            onOpenChange={setOpen}
+            items={[
+              { children: 'Cuenta' },
+              { children: 'Configuración' },
+              { children: 'Cerrar sesión' },
+            ]}
+          />
+          <button
+            onClick={() => setOpen(!open)}
+            className="px-4 py-2 bg-primary-custom-600 dark:bg-dark-bg-inverse text-white rounded-md text-sm font-bold"
+          >
+            Alternar Dropdown
+          </button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300">
+          Estado: {open ? 'Abierto' : 'Cerrado'}
+        </p>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 7. WITH CALLBACKS
+// ============================================
+export const ConCallbacks: Story = {
+  args: {
+    items: [],
+  },
+  render: () => {
+    const [lastAction, setLastAction] = React.useState('Ninguna');
+
+    return (
+      <div className="space-y-4 p-6">
+        <h3 className="text-sm font-bold text-gray-700 dark:text-white">
+          Con Callbacks
+        </h3>
+        <Dropdown
+          placeholder="Acciones"
+          onOpenChange={(open) => setLastAction(open ? 'Abierto' : 'Cerrado')}
+          items={[
+            {
+              children: 'Editar',
+              onClick: () => setLastAction('Editar clickeado'),
+            },
+            {
+              children: 'Duplicar',
+              onClick: () => setLastAction('Duplicar clickeado'),
+            },
+            {
+              children: 'Eliminar',
+              onClick: () => setLastAction('Eliminar clickeado'),
+            },
+          ]}
+        />
+        <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+          <p className="text-sm text-gray-700 dark:text-white">
+            Última acción: <strong>{lastAction}</strong>
+          </p>
+        </div>
+      </div>
+    );
+  },
+};