siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Notification/Notification.tsx

@@ -1,145 +1,145 @@
-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}
-    />
-  );
-};
+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}
+    />
+  );
+};

package/src/components/Notification/Notification.types.ts

@@ -1,142 +1,142 @@
-/**
- * Props del componente Notification
- *
- * Badge de notificación para mostrar alertas, mensajes o notificaciones pendientes.
- * Alineado pixel-perfect con el diseño de Figma.
- *
- * @see src/components/Notification/Notification.tsx - Implementación del componente
- * @see docs/colors.md - Sistema de colores (token content-extensions-red)
- * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651
- *
- * @example
- * ```tsx
- * // Badge simple (punto)
- * const simpleProps: NotificationProps = {};
- *
- * // Badge con número
- * const withCountProps: NotificationProps = {
- *   count: 5,
- *   color: 'red',
- * };
- *
- * // Como overlay
- * <button className="relative">
- *   <Icon />
- *   <Notification count={3} className="absolute -top-1 -right-1" />
- * </button>
- * ```
- */
-export interface NotificationProps {
-  /**
-   * Número de notificaciones a mostrar
-   *
-   * **Comportamiento:**
-   * - `undefined`: Muestra badge simple (punto rojo de 8px)
-   * - `1-99`: Muestra el número exacto en el badge
-   * - `100+`: Muestra "99+" en el badge
-   * - `0` o menor: Muestra badge simple (punto)
-   *
-   * **Nota:** El badge ajusta su ancho automáticamente según el contenido,
-   * con un mínimo de 16px y padding de 4px horizontal.
-   *
-   * @example
-   * ```tsx
-   * <Notification />              // Punto rojo simple
-   * <Notification count={5} />    // Muestra "5"
-   * <Notification count={99} />   // Muestra "99"
-   * <Notification count={150} />  // Muestra "99+"
-   * <Notification count={0} />    // Punto rojo simple
-   * ```
-   *
-   * @see src/components/Notification/Notification.tsx:93-123 - Renderizado con número
-   */
-  count?: number;
-
-  /**
-   * Color del badge
-   *
-   * Define el color de fondo del badge. Permite personalizar según el contexto
-   * o tipo de notificación.
-   *
-   * **Colores disponibles:**
-   * - `red` (default): Notificaciones de error, alertas críticas
-   * - `orange`: Advertencias importantes
-   * - `yellow`: Avisos, atención requerida
-   * - `green`: Notificaciones positivas, éxito
-   * - `blue`: Información general
-   * - `purple`: Notificaciones especiales o premium
-   * - `zinc`: Notificaciones neutras
-   * - Y 15+ colores adicionales de Tailwind
-   *
-   * **Nota:** El texto siempre será blanco para mantener contraste adecuado.
-   *
-   * @default 'red'
-   *
-   * @example
-   * ```tsx
-   * <Notification count={5} color="red" />      // Error/Crítico
-   * <Notification count={2} color="orange" />   // Advertencia
-   * <Notification count={8} color="green" />    // Éxito
-   * <Notification count={3} color="blue" />     // Info
-   * <Notification count={1} color="purple" />   // Especial
-   * ```
-   *
-   * @see src/components/Button/Button.tsx:220-244 - Referencia de colores
-   */
-  color?: 'zinc' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' |
-          'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' |
-          'purple' | 'fuchsia' | 'pink' | 'rose' | 'primary' | 'secondary' | 'tertiary';
-
-  /**
-   * Clases CSS adicionales para posicionamiento o personalización
-   *
-   * Útil para posicionar el badge como overlay usando absolute positioning.
-   *
-   * **Advertencia:** Evita sobrescribir tamaños, colores o formas core del badge.
-   * Usa solo para posicionamiento, márgenes o efectos adicionales.
-   *
-   * @example
-   * ```tsx
-   * // Como overlay en botón
-   * <button className="relative">
-   *   <BellIcon />
-   *   <Notification count={5} className="absolute -top-1 -right-1" />
-   * </button>
-   *
-   * // Con margen personalizado
-   * <Notification count={3} className="ml-2" />
-   *
-   * // Con sombra adicional
-   * <Notification count={7} className="shadow-lg" />
-   * ```
-   */
-  className?: string;
-
-  /**
-   * Label de accesibilidad (ARIA) personalizado
-   *
-   * Si no se proporciona, se genera automáticamente:
-   * - Con count: "{count} notificación(es)"
-   * - Sin count: "Notificación pendiente"
-   *
-   * **Mejores prácticas:**
-   * - Describe el tipo de notificación si es específico
-   * - Incluye contexto relevante para screen readers
-   * - Mantén el texto conciso pero descriptivo
-   *
-   * @example
-   * ```tsx
-   * // Auto-generado (recomendado)
-   * <Notification count={5} />
-   * // → aria-label="5 notificaciones"
-   *
-   * // Personalizado
-   * <Notification count={3} ariaLabel="3 mensajes no leídos" />
-   * <Notification ariaLabel="Nueva alerta de seguridad" />
-   * ```
-   *
-   * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
-   */
-  ariaLabel?: string;
-}
+/**
+ * Props del componente Notification
+ *
+ * Badge de notificación para mostrar alertas, mensajes o notificaciones pendientes.
+ * Alineado pixel-perfect con el diseño de Figma.
+ *
+ * @see src/components/Notification/Notification.tsx - Implementación del componente
+ * @see docs/colors.md - Sistema de colores (token content-extensions-red)
+ * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651
+ *
+ * @example
+ * ```tsx
+ * // Badge simple (punto)
+ * const simpleProps: NotificationProps = {};
+ *
+ * // Badge con número
+ * const withCountProps: NotificationProps = {
+ *   count: 5,
+ *   color: 'red',
+ * };
+ *
+ * // Como overlay
+ * <button className="relative">
+ *   <Icon />
+ *   <Notification count={3} className="absolute -top-1 -right-1" />
+ * </button>
+ * ```
+ */
+export interface NotificationProps {
+  /**
+   * Número de notificaciones a mostrar
+   *
+   * **Comportamiento:**
+   * - `undefined`: Muestra badge simple (punto rojo de 8px)
+   * - `1-99`: Muestra el número exacto en el badge
+   * - `100+`: Muestra "99+" en el badge
+   * - `0` o menor: Muestra badge simple (punto)
+   *
+   * **Nota:** El badge ajusta su ancho automáticamente según el contenido,
+   * con un mínimo de 16px y padding de 4px horizontal.
+   *
+   * @example
+   * ```tsx
+   * <Notification />              // Punto rojo simple
+   * <Notification count={5} />    // Muestra "5"
+   * <Notification count={99} />   // Muestra "99"
+   * <Notification count={150} />  // Muestra "99+"
+   * <Notification count={0} />    // Punto rojo simple
+   * ```
+   *
+   * @see src/components/Notification/Notification.tsx:93-123 - Renderizado con número
+   */
+  count?: number;
+
+  /**
+   * Color del badge
+   *
+   * Define el color de fondo del badge. Permite personalizar según el contexto
+   * o tipo de notificación.
+   *
+   * **Colores disponibles:**
+   * - `red` (default): Notificaciones de error, alertas críticas
+   * - `orange`: Advertencias importantes
+   * - `yellow`: Avisos, atención requerida
+   * - `green`: Notificaciones positivas, éxito
+   * - `blue`: Información general
+   * - `purple`: Notificaciones especiales o premium
+   * - `zinc`: Notificaciones neutras
+   * - Y 15+ colores adicionales de Tailwind
+   *
+   * **Nota:** El texto siempre será blanco para mantener contraste adecuado.
+   *
+   * @default 'red'
+   *
+   * @example
+   * ```tsx
+   * <Notification count={5} color="red" />      // Error/Crítico
+   * <Notification count={2} color="orange" />   // Advertencia
+   * <Notification count={8} color="green" />    // Éxito
+   * <Notification count={3} color="blue" />     // Info
+   * <Notification count={1} color="purple" />   // Especial
+   * ```
+   *
+   * @see src/components/Button/Button.tsx:220-244 - Referencia de colores
+   */
+  color?: 'zinc' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' |
+          'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' |
+          'purple' | 'fuchsia' | 'pink' | 'rose' | 'primary' | 'secondary' | 'tertiary';
+
+  /**
+   * Clases CSS adicionales para posicionamiento o personalización
+   *
+   * Útil para posicionar el badge como overlay usando absolute positioning.
+   *
+   * **Advertencia:** Evita sobrescribir tamaños, colores o formas core del badge.
+   * Usa solo para posicionamiento, márgenes o efectos adicionales.
+   *
+   * @example
+   * ```tsx
+   * // Como overlay en botón
+   * <button className="relative">
+   *   <BellIcon />
+   *   <Notification count={5} className="absolute -top-1 -right-1" />
+   * </button>
+   *
+   * // Con margen personalizado
+   * <Notification count={3} className="ml-2" />
+   *
+   * // Con sombra adicional
+   * <Notification count={7} className="shadow-lg" />
+   * ```
+   */
+  className?: string;
+
+  /**
+   * Label de accesibilidad (ARIA) personalizado
+   *
+   * Si no se proporciona, se genera automáticamente:
+   * - Con count: "{count} notificación(es)"
+   * - Sin count: "Notificación pendiente"
+   *
+   * **Mejores prácticas:**
+   * - Describe el tipo de notificación si es específico
+   * - Incluye contexto relevante para screen readers
+   * - Mantén el texto conciso pero descriptivo
+   *
+   * @example
+   * ```tsx
+   * // Auto-generado (recomendado)
+   * <Notification count={5} />
+   * // → aria-label="5 notificaciones"
+   *
+   * // Personalizado
+   * <Notification count={3} ariaLabel="3 mensajes no leídos" />
+   * <Notification ariaLabel="Nueva alerta de seguridad" />
+   * ```
+   *
+   * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
+   */
+  ariaLabel?: string;
+}