siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Notification/Notification.stories.tsx

@@ -1,513 +1,513 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Notification } from './Notification';
-
-const meta = {
-  title: 'Siesa UI Kit/Notification',
-  component: Notification,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Badge de notificación para mostrar alertas, mensajes o notificaciones pendientes. Puede mostrar un punto simple o un contador numérico con límite automático a 99+. Ideal para usar como overlay en iconos o botones.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    count: {
-      control: 'number',
-      description: 'Número de notificaciones (undefined = punto simple, 1-99 = número exacto, 100+ = "99+")',
-    },
-    color: {
-      control: 'select',
-      options: ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'zinc', 'primary'],
-      description: 'Color del badge (default: red)',
-    },
-    className: {
-      control: 'text',
-      description: 'Clases CSS adicionales para posicionamiento',
-    },
-    ariaLabel: {
-      control: 'text',
-      description: 'Label para accesibilidad (se genera automáticamente si no se especifica)',
-    },
-  },
-} satisfies Meta<typeof Notification>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    count: 5,
-    color: 'red',
-  },
-};
-
-// ============================================
-// 2. VARIANTES BÁSICAS
-// ============================================
-export const VariantesBasicas: Story = {
-  name: 'Variantes Básicas',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Badge Simple (Dot) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Badge Simple (Dot)
-        </h3>
-        <div className="flex items-center gap-6">
-          <div className="flex flex-col items-center gap-2">
-            <Notification />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Default (sin count)</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={0} />
-            <span className="text-xs text-gray-500 dark:text-gray-300">count={0}</span>
-          </div>
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Punto rojo de 8px × 8px para indicar notificaciones sin especificar cantidad
-        </p>
-      </div>
-
-      {/* Badge con Número */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Badge con Número
-        </h3>
-        <div className="flex items-center gap-6">
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={1} />
-            <span className="text-xs text-gray-500 dark:text-gray-300">1</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={5} />
-            <span className="text-xs text-gray-500 dark:text-gray-300">5</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={12} />
-            <span className="text-xs text-gray-500 dark:text-gray-300">12</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={99} />
-            <span className="text-xs text-gray-500 dark:text-gray-300">99</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={150} />
-            <span className="text-xs text-gray-500 dark:text-gray-300">99+ (150)</span>
-          </div>
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Badge de 16px altura con número. Límite automático a &quot;99+&quot; para valores ≥ 100
-        </p>
-      </div>
-
-      <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>💡 Especificaciones:</strong>
-          <br />• Badge simple: 8px × 8px (w-2 h-2), rounded-full
-          <br />• Badge con número: 16px altura, 10px Bold, padding horizontal 4px
-          <br />• Límite automático: números ≥ 100 muestran &quot;99+&quot;
-          <br />• Color default: content-extensions-red (#b91c1c)
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. RANGOS DE CONTEO
-// ============================================
-export const RangosDeConteo: Story = {
-  name: 'Rangos de Conteo',
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Pocas Notificaciones (1-9)
-        </h3>
-        <div className="flex gap-4">
-          <Notification count={1} />
-          <Notification count={3} />
-          <Notification count={5} />
-          <Notification count={9} />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Badge angosto para números de un dígito
-        </p>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Muchas Notificaciones (10-99)
-        </h3>
-        <div className="flex gap-4">
-          <Notification count={10} />
-          <Notification count={25} />
-          <Notification count={50} />
-          <Notification count={99} />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Badge se expande automáticamente para dos dígitos
-        </p>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Demasiadas Notificaciones (100+)
-        </h3>
-        <div className="flex gap-4">
-          <Notification count={100} />
-          <Notification count={250} />
-          <Notification count={500} />
-          <Notification count={999} />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Todos muestran &quot;99+&quot; para mantener badge compacto
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. COLORES
-// ============================================
-export const Colores: Story = {
-  name: 'Colores',
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Badge con Número - Colores Disponibles
-        </h3>
-        <div className="flex flex-wrap items-center gap-6">
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={5} color="red" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Red (default)</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={8} color="orange" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Orange</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={3} color="yellow" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Yellow</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={12} color="green" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Green</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={7} color="blue" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Blue</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={15} color="purple" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Purple</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={2} color="zinc" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Zinc</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification count={9} color="primary" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Primary</span>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Badge Simple - Colores Disponibles
-        </h3>
-        <div className="flex flex-wrap items-center gap-6">
-          <div className="flex flex-col items-center gap-2">
-            <Notification color="red" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Red</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification color="orange" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Orange</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification color="green" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Green</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification color="blue" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Blue</span>
-          </div>
-          <div className="flex flex-col items-center gap-2">
-            <Notification color="purple" />
-            <span className="text-xs text-gray-500 dark:text-gray-300">Purple</span>
-          </div>
-        </div>
-      </div>
-
-      <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>💡 Uso recomendado:</strong>
-          <br />• <strong>Red:</strong> Errores, alertas críticas
-          <br />• <strong>Orange:</strong> Advertencias importantes
-          <br />• <strong>Yellow:</strong> Avisos, atención requerida
-          <br />• <strong>Green:</strong> Confirmaciones, éxitos
-          <br />• <strong>Blue:</strong> Información general
-          <br />• <strong>Purple:</strong> Especiales o premium
-          <br />• <strong>Zinc:</strong> Neutras
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. DARK MODE
-// ============================================
-export const DarkMode: Story = {
-  name: 'Dark Mode',
-  parameters: {
-    backgrounds: {
-      default: 'dark',
-    },
-  },
-  render: () => (
-    <div className="dark bg-dark-bg-primary p-8 rounded-lg space-y-8">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-dark-content-primary">
-          Badge Simple en Dark Mode
-        </h3>
-        <div className="flex gap-6">
-          <Notification />
-          <Notification color="orange" />
-          <Notification color="green" />
-          <Notification color="blue" />
-        </div>
-        <p className="text-xs text-gray-400 mt-4">
-          Punto de 8px mantiene visibilidad en fondos oscuros
-        </p>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-dark-content-primary">
-          Badge con Número en Dark Mode
-        </h3>
-        <div className="flex gap-6">
-          <Notification count={3} />
-          <Notification count={12} color="orange" />
-          <Notification count={25} color="green" />
-          <Notification count={99} color="blue" />
-        </div>
-        <p className="text-xs text-gray-400 mt-4">
-          Badge con contraste óptimo: colores mantienen intensidad en dark mode
-        </p>
-      </div>
-
-      <div className="mt-6 p-4 bg-blue-900/20 border border-blue-800 rounded-lg">
-        <p className="text-xs text-gray-300">
-          <strong>✨ Dark Mode:</strong>
-          <br />• Colores mantienen intensidad (ej: content-extensions-red #b91c1c)
-          <br />• Texto siempre blanco para máximo contraste
-          <br />• Sin bordes en badge simple
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. COMO OVERLAY
-// ============================================
-export const ComoOverlay: Story = {
-  name: 'Como Overlay',
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Overlay en Botón
-        </h3>
-        <div className="flex gap-6">
-          <button className="relative p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
-            <svg className="w-6 h-6 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-            </svg>
-            <Notification count={5} className="absolute -top-1 -right-1" />
-          </button>
-
-          <button className="relative p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
-            <svg className="w-6 h-6 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-            </svg>
-            <Notification className="absolute -top-1 -right-1" />
-          </button>
-
-          <button className="relative p-3 bg-primary-custom-600 text-white rounded-lg hover:bg-primary-custom-500 transition-colors">
-            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-            </svg>
-            <Notification count={12} className="absolute -top-1 -right-1" />
-          </button>
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Usa <code className="px-1 bg-gray-100 dark:bg-gray-700">className=&quot;absolute -top-1 -right-1&quot;</code> para posicionar
-        </p>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Overlay en Avatar
-        </h3>
-        <div className="flex gap-6">
-          <div className="relative">
-            <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white font-bold">
-              JD
-            </div>
-            <Notification count={3} className="absolute -top-1 -right-1" />
-          </div>
-
-          <div className="relative">
-            <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold">
-              AS
-            </div>
-            <Notification className="absolute -top-1 -right-1" />
-          </div>
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Badge como indicador de estado en avatares
-        </p>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          En Barra de Navegación
-        </h3>
-        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-          <div className="flex items-center justify-between">
-            <span className="text-sm font-medium text-gray-700 dark:text-white">Mi App</span>
-            <div className="flex items-center gap-4">
-              <button className="relative p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors">
-                <svg className="w-5 h-5 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                </svg>
-                <Notification count={7} className="absolute top-0 right-0" />
-              </button>
-              <button className="relative p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors">
-                <svg className="w-5 h-5 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                </svg>
-                <Notification count={2} className="absolute top-0 right-0" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <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>💡 Posicionamiento:</strong>
-          <br />• Envuelve el elemento en <code className="px-1 bg-white dark:bg-gray-700">relative</code>
-          <br />• Agrega badge con <code className="px-1 bg-white dark:bg-gray-700">absolute -top-1 -right-1</code>
-          <br />• Ajusta offset según necesites (top-0, -top-2, etc.)
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 7. CASOS DE USO REALES
-// ============================================
-export const CasosDeUso: Story = {
-  name: 'Casos de Uso Reales',
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Menú Lateral */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Menú Lateral con Notificaciones
-        </h3>
-        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 w-64">
-          <div className="space-y-2">
-            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
-              <span className="text-sm text-gray-700 dark:text-white">Dashboard</span>
-            </div>
-            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
-              <span className="text-sm text-gray-700 dark:text-white">Notificaciones</span>
-              <Notification count={12} />
-            </div>
-            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
-              <span className="text-sm text-gray-700 dark:text-white">Mensajes</span>
-              <Notification count={5} />
-            </div>
-            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
-              <span className="text-sm text-gray-700 dark:text-white">Configuración</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Lista de Tareas */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Lista de Tareas con Prioridades
-        </h3>
-        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
-          <div className="flex items-center gap-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded cursor-pointer">
-            <Notification color="red" />
-            <div className="flex-1">
-              <p className="text-sm font-medium text-gray-700 dark:text-white">Urgente: Revisar servidor</p>
-              <p className="text-xs text-gray-500 dark:text-gray-400">Prioridad alta</p>
-            </div>
-          </div>
-          <div className="flex items-center gap-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded cursor-pointer">
-            <Notification color="orange" />
-            <div className="flex-1">
-              <p className="text-sm font-medium text-gray-700 dark:text-white">Advertencia: Actualización disponible</p>
-              <p className="text-xs text-gray-500 dark:text-gray-400">Prioridad media</p>
-            </div>
-          </div>
-          <div className="flex items-center gap-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded cursor-pointer">
-            <Notification color="blue" />
-            <div className="flex-1">
-              <p className="text-sm font-medium text-gray-700 dark:text-white">Info: Nuevo feature disponible</p>
-              <p className="text-xs text-gray-500 dark:text-gray-400">Prioridad baja</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Tabs con Contadores */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Tabs con Contadores
-        </h3>
-        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
-          <div className="flex border-b border-gray-200 dark:border-gray-700">
-            <button className="flex items-center gap-2 px-4 py-3 border-b-2 border-primary-custom-600 text-sm font-medium text-primary-custom-600">
-              Pendientes
-              <Notification count={8} />
-            </button>
-            <button className="flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
-              En Progreso
-              <Notification count={3} color="blue" />
-            </button>
-            <button className="flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
-              Completados
-            </button>
-          </div>
-          <div className="p-4">
-            <p className="text-sm text-gray-600 dark:text-gray-300">
-              Contenido de la pestaña seleccionada
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Notification } from './Notification';
+
+const meta = {
+  title: 'Siesa UI Kit/Notification',
+  component: Notification,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Badge de notificación para mostrar alertas, mensajes o notificaciones pendientes. Puede mostrar un punto simple o un contador numérico con límite automático a 99+. Ideal para usar como overlay en iconos o botones.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    count: {
+      control: 'number',
+      description: 'Número de notificaciones (undefined = punto simple, 1-99 = número exacto, 100+ = "99+")',
+    },
+    color: {
+      control: 'select',
+      options: ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'zinc', 'primary'],
+      description: 'Color del badge (default: red)',
+    },
+    className: {
+      control: 'text',
+      description: 'Clases CSS adicionales para posicionamiento',
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Label para accesibilidad (se genera automáticamente si no se especifica)',
+    },
+  },
+} satisfies Meta<typeof Notification>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    count: 5,
+    color: 'red',
+  },
+};
+
+// ============================================
+// 2. VARIANTES BÁSICAS
+// ============================================
+export const VariantesBasicas: Story = {
+  name: 'Variantes Básicas',
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Badge Simple (Dot) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badge Simple (Dot)
+        </h3>
+        <div className="flex items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <Notification />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Default (sin count)</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={0} />
+            <span className="text-xs text-gray-500 dark:text-gray-300">count={0}</span>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Punto rojo de 8px × 8px para indicar notificaciones sin especificar cantidad
+        </p>
+      </div>
+
+      {/* Badge con Número */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badge con Número
+        </h3>
+        <div className="flex items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={1} />
+            <span className="text-xs text-gray-500 dark:text-gray-300">1</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={5} />
+            <span className="text-xs text-gray-500 dark:text-gray-300">5</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={12} />
+            <span className="text-xs text-gray-500 dark:text-gray-300">12</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={99} />
+            <span className="text-xs text-gray-500 dark:text-gray-300">99</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={150} />
+            <span className="text-xs text-gray-500 dark:text-gray-300">99+ (150)</span>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Badge de 16px altura con número. Límite automático a &quot;99+&quot; para valores ≥ 100
+        </p>
+      </div>
+
+      <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>💡 Especificaciones:</strong>
+          <br />• Badge simple: 8px × 8px (w-2 h-2), rounded-full
+          <br />• Badge con número: 16px altura, 10px Bold, padding horizontal 4px
+          <br />• Límite automático: números ≥ 100 muestran &quot;99+&quot;
+          <br />• Color default: content-extensions-red (#b91c1c)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. RANGOS DE CONTEO
+// ============================================
+export const RangosDeConteo: Story = {
+  name: 'Rangos de Conteo',
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Pocas Notificaciones (1-9)
+        </h3>
+        <div className="flex gap-4">
+          <Notification count={1} />
+          <Notification count={3} />
+          <Notification count={5} />
+          <Notification count={9} />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Badge angosto para números de un dígito
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Muchas Notificaciones (10-99)
+        </h3>
+        <div className="flex gap-4">
+          <Notification count={10} />
+          <Notification count={25} />
+          <Notification count={50} />
+          <Notification count={99} />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Badge se expande automáticamente para dos dígitos
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Demasiadas Notificaciones (100+)
+        </h3>
+        <div className="flex gap-4">
+          <Notification count={100} />
+          <Notification count={250} />
+          <Notification count={500} />
+          <Notification count={999} />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Todos muestran &quot;99+&quot; para mantener badge compacto
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. COLORES
+// ============================================
+export const Colores: Story = {
+  name: 'Colores',
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badge con Número - Colores Disponibles
+        </h3>
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={5} color="red" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Red (default)</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={8} color="orange" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Orange</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={3} color="yellow" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Yellow</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={12} color="green" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Green</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={7} color="blue" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Blue</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={15} color="purple" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Purple</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={2} color="zinc" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Zinc</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification count={9} color="primary" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Primary</span>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Badge Simple - Colores Disponibles
+        </h3>
+        <div className="flex flex-wrap items-center gap-6">
+          <div className="flex flex-col items-center gap-2">
+            <Notification color="red" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Red</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification color="orange" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Orange</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification color="green" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Green</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification color="blue" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Blue</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Notification color="purple" />
+            <span className="text-xs text-gray-500 dark:text-gray-300">Purple</span>
+          </div>
+        </div>
+      </div>
+
+      <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>💡 Uso recomendado:</strong>
+          <br />• <strong>Red:</strong> Errores, alertas críticas
+          <br />• <strong>Orange:</strong> Advertencias importantes
+          <br />• <strong>Yellow:</strong> Avisos, atención requerida
+          <br />• <strong>Green:</strong> Confirmaciones, éxitos
+          <br />• <strong>Blue:</strong> Información general
+          <br />• <strong>Purple:</strong> Especiales o premium
+          <br />• <strong>Zinc:</strong> Neutras
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. DARK MODE
+// ============================================
+export const DarkMode: Story = {
+  name: 'Dark Mode',
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  render: () => (
+    <div className="dark bg-dark-bg-primary p-8 rounded-lg space-y-8">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-dark-content-primary">
+          Badge Simple en Dark Mode
+        </h3>
+        <div className="flex gap-6">
+          <Notification />
+          <Notification color="orange" />
+          <Notification color="green" />
+          <Notification color="blue" />
+        </div>
+        <p className="text-xs text-gray-400 mt-4">
+          Punto de 8px mantiene visibilidad en fondos oscuros
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-dark-content-primary">
+          Badge con Número en Dark Mode
+        </h3>
+        <div className="flex gap-6">
+          <Notification count={3} />
+          <Notification count={12} color="orange" />
+          <Notification count={25} color="green" />
+          <Notification count={99} color="blue" />
+        </div>
+        <p className="text-xs text-gray-400 mt-4">
+          Badge con contraste óptimo: colores mantienen intensidad en dark mode
+        </p>
+      </div>
+
+      <div className="mt-6 p-4 bg-blue-900/20 border border-blue-800 rounded-lg">
+        <p className="text-xs text-gray-300">
+          <strong>✨ Dark Mode:</strong>
+          <br />• Colores mantienen intensidad (ej: content-extensions-red #b91c1c)
+          <br />• Texto siempre blanco para máximo contraste
+          <br />• Sin bordes en badge simple
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. COMO OVERLAY
+// ============================================
+export const ComoOverlay: Story = {
+  name: 'Como Overlay',
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Overlay en Botón
+        </h3>
+        <div className="flex gap-6">
+          <button className="relative p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+            <svg className="w-6 h-6 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+            <Notification count={5} className="absolute -top-1 -right-1" />
+          </button>
+
+          <button className="relative p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+            <svg className="w-6 h-6 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+            </svg>
+            <Notification className="absolute -top-1 -right-1" />
+          </button>
+
+          <button className="relative p-3 bg-primary-custom-600 text-white rounded-lg hover:bg-primary-custom-500 transition-colors">
+            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+            </svg>
+            <Notification count={12} className="absolute -top-1 -right-1" />
+          </button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Usa <code className="px-1 bg-gray-100 dark:bg-gray-700">className=&quot;absolute -top-1 -right-1&quot;</code> para posicionar
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Overlay en Avatar
+        </h3>
+        <div className="flex gap-6">
+          <div className="relative">
+            <div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center text-white font-bold">
+              JD
+            </div>
+            <Notification count={3} className="absolute -top-1 -right-1" />
+          </div>
+
+          <div className="relative">
+            <div className="w-12 h-12 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold">
+              AS
+            </div>
+            <Notification className="absolute -top-1 -right-1" />
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Badge como indicador de estado en avatares
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          En Barra de Navegación
+        </h3>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-gray-700 dark:text-white">Mi App</span>
+            <div className="flex items-center gap-4">
+              <button className="relative p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors">
+                <svg className="w-5 h-5 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+                </svg>
+                <Notification count={7} className="absolute top-0 right-0" />
+              </button>
+              <button className="relative p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors">
+                <svg className="w-5 h-5 text-gray-700 dark:text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+                <Notification count={2} className="absolute top-0 right-0" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <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>💡 Posicionamiento:</strong>
+          <br />• Envuelve el elemento en <code className="px-1 bg-white dark:bg-gray-700">relative</code>
+          <br />• Agrega badge con <code className="px-1 bg-white dark:bg-gray-700">absolute -top-1 -right-1</code>
+          <br />• Ajusta offset según necesites (top-0, -top-2, etc.)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. CASOS DE USO REALES
+// ============================================
+export const CasosDeUso: Story = {
+  name: 'Casos de Uso Reales',
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Menú Lateral */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Menú Lateral con Notificaciones
+        </h3>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 w-64">
+          <div className="space-y-2">
+            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
+              <span className="text-sm text-gray-700 dark:text-white">Dashboard</span>
+            </div>
+            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
+              <span className="text-sm text-gray-700 dark:text-white">Notificaciones</span>
+              <Notification count={12} />
+            </div>
+            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
+              <span className="text-sm text-gray-700 dark:text-white">Mensajes</span>
+              <Notification count={5} />
+            </div>
+            <div className="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">
+              <span className="text-sm text-gray-700 dark:text-white">Configuración</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Lista de Tareas */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Lista de Tareas con Prioridades
+        </h3>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
+          <div className="flex items-center gap-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded cursor-pointer">
+            <Notification color="red" />
+            <div className="flex-1">
+              <p className="text-sm font-medium text-gray-700 dark:text-white">Urgente: Revisar servidor</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">Prioridad alta</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded cursor-pointer">
+            <Notification color="orange" />
+            <div className="flex-1">
+              <p className="text-sm font-medium text-gray-700 dark:text-white">Advertencia: Actualización disponible</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">Prioridad media</p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3 p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded cursor-pointer">
+            <Notification color="blue" />
+            <div className="flex-1">
+              <p className="text-sm font-medium text-gray-700 dark:text-white">Info: Nuevo feature disponible</p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">Prioridad baja</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs con Contadores */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Tabs con Contadores
+        </h3>
+        <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
+          <div className="flex border-b border-gray-200 dark:border-gray-700">
+            <button className="flex items-center gap-2 px-4 py-3 border-b-2 border-primary-custom-600 text-sm font-medium text-primary-custom-600">
+              Pendientes
+              <Notification count={8} />
+            </button>
+            <button className="flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+              En Progreso
+              <Notification count={3} color="blue" />
+            </button>
+            <button className="flex items-center gap-2 px-4 py-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
+              Completados
+            </button>
+          </div>
+          <div className="p-4">
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Contenido de la pestaña seleccionada
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};