siesa-ui-kit 1.0.4 → 1.0.6

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

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

package/src/components/Notification/Notification.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import type { NotificationProps } from './Notification.types';
-
-/**
- * Componente Notification del sistema de diseño Siesa
- *
- * Badge de notificación para indicar alertas, mensajes o notificaciones pendientes.
- * Puede mostrar un punto simple o un contador numérico con límite automático a 99+.
- *
- * **Especificaciones de Figma:**
- * - Badge con número: 27px × 13px (aprox), Label/XXSmall (10px Bold, line-height 12px)
- * - Badge simple (dot): 13px × 13px
- * - Color: `content-extensions-red` (#b91c1c) por defecto
- * - Border radius: Pill (rounded-full)
- * - Padding: 4px horizontal
- *
- * **Variantes:**
- * - Sin count: Muestra punto circular (dot)
- * - Con count: Muestra badge con número (máximo 99+)
- *
- * **Uso típico:**
- * - Como overlay en iconos o botones
- * - En elementos de menú o navegación
- * - Standalone para indicar estado
- *
- * @see docs/colors.md - Sistema de colores (token content-extensions-red)
- * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)
- * @see src/components/Button/Button.tsx - Referencia de badges en botones
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651
- *
- * @example
- * ```tsx
- * // Badge simple (punto)
- * <Notification />
- *
- * // Badge con número
- * <Notification count={5} />
- *
- * // Badge con muchos (muestra 99+)
- * <Notification count={150} />
- *
- * // Con color personalizado
- * <Notification count={3} color="green" />
- *
- * // Como overlay en botón
- * <button className="relative">
- *   <BellIcon />
- *   <Notification count={5} className="absolute -top-1 -right-1" />
- * </button>
- * ```
- */
-export const Notification: React.FC<NotificationProps> = ({
-  count,
-  color = 'red',
-  className = '',
-  ariaLabel,
-}) => {
-  // ===== MAPA DE COLORES =====
-  // Sistema de colores consistente con Button y Badge
-  const colorClasses: Record<string, { bg: string; text: string }> = {
-    zinc: { bg: 'bg-zinc-600', text: 'text-white' },
-    red: { bg: 'bg-content-extensions-red', text: 'text-white' },
-    orange: { bg: 'bg-orange-700', text: 'text-white' },
-    amber: { bg: 'bg-amber-700', text: 'text-white' },
-    yellow: { bg: 'bg-yellow-700', text: 'text-white' },
-    lime: { bg: 'bg-lime-700', text: 'text-white' },
-    green: { bg: 'bg-green-700', text: 'text-white' },
-    emerald: { bg: 'bg-emerald-700', text: 'text-white' },
-    teal: { bg: 'bg-teal-700', text: 'text-white' },
-    cyan: { bg: 'bg-cyan-700', text: 'text-white' },
-    sky: { bg: 'bg-sky-700', text: 'text-white' },
-    blue: { bg: 'bg-blue-700', text: 'text-white' },
-    indigo: { bg: 'bg-indigo-700', text: 'text-white' },
-    violet: { bg: 'bg-violet-700', text: 'text-white' },
-    purple: { bg: 'bg-purple-700', text: 'text-white' },
-    fuchsia: { bg: 'bg-fuchsia-700', text: 'text-white' },
-    pink: { bg: 'bg-pink-700', text: 'text-white' },
-    rose: { bg: 'bg-rose-700', text: 'text-white' },
-    primary: { bg: 'bg-primary-custom-600', text: 'text-white' },
-    secondary: { bg: 'bg-zinc-600', text: 'text-white' },
-    tertiary: { bg: 'bg-zinc-600', text: 'text-white' },
-  };
-
-  const colors = colorClasses[color] || colorClasses.red;
-
-  // ===== ARIA LABEL DINÁMICO =====
-  const dynamicAriaLabel = ariaLabel ||
-    (count !== undefined && count > 0
-      ? `${count} notificaci${count === 1 ? 'ón' : 'ones'}`
-      : 'Notificación pendiente');
-
-  // ===== BADGE CON NÚMERO =====
-  if (count !== undefined && count > 0) {
-    const displayCount = count > 99 ? '99+' : count.toString();
-
-    return (
-      <span
-        className={`
-          inline-flex
-          items-center
-          justify-center
-          min-w-[16px]
-          h-4
-          px-1
-          rounded-full
-          text-[10px]
-          font-bold
-          leading-none
-          ${colors.bg}
-          ${colors.text}
-          pointer-events-none
-          dark:${colors.bg}
-          dark:${colors.text}
-          ${className}
-        `
-          .trim()
-          .replace(/\s+/g, ' ')}
-        role="status"
-        aria-label={dynamicAriaLabel}
-      >
-        {displayCount}
-      </span>
-    );
-  }
-
-  // ===== BADGE SIMPLE (DOT) =====
-  return (
-    <span
-      className={`
-        inline-block
-        w-2
-        h-2
-        rounded-full
-        ${colors.bg}
-        pointer-events-none
-        dark:${colors.bg}
-        ${className}
-      `
-        .trim()
-        .replace(/\s+/g, ' ')}
-      role="status"
-      aria-label={dynamicAriaLabel}
-    />
-  );
-};