siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Button/Button.tsx

@@ -1,337 +1,337 @@
-import React from 'react';
-import type { ButtonProps } from './Button.types';
-
-/**
- * Componente Button del sistema de diseño Siesa
- *
- * Implementación pixel-perfect basada en Figma (node 4001-17240)
- * con soporte completo para todos los estados, tamaños y variantes.
- *
- * **Variantes (type):**
- * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)
- *   - Sombra interna para efecto de profundidad
- *   - Usar para acciones principales (Guardar, Enviar, Confirmar)
- * - `outline`: Botón secundario con borde (#93d1fd) y shadow-sm
- *   - Usar para acciones secundarias (Cancelar, Volver)
- * - `plain`: Botón terciario sin borde visible
- *   - Hover overlay sutil
- *   - Usar para acciones sutiles (Cerrar, Ver más, Links)
- *
- * **Tamaños (size):**
- * - `xs` (24px): Espacios muy compactos, inline actions. Padding: 8px h, 4px v
- * - `sm` (28px): Barras de herramientas, acciones secundarias. Padding: 8px h, 4px v
- * - `base` (32px): Tamaño estándar para la mayoría de casos. Padding: 10px h, 6px v
- * - `l` (36px): Botones destacados, CTAs. Padding: 12px h, 8px v
- * - `xl` (40px): Heroes, landing pages. Padding: 16px h, 8px v
- *
- * **Estados:**
- * - `default`: Estado normal con colores base
- * - `hover`: Overlay visual sutil (bg-primary-custom-500 para default)
- * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)
- * - `active`: Scale animation (scale-95) para feedback táctil
- * - `disabled`: Opacity 50% con pointer-events-none
- *
- * **Badges de notificación:**
- * - `badge`: Muestra un dot de notificación en la esquina superior derecha
- * - `badgeCount`: Muestra un badge con número (99+ para >99)
- * - `badgeColor`: Color del badge (por defecto: red - #b91c1c)
- *
- * **Especificaciones de Figma:**
- * - Border radius: 6px (rounded-md)
- * - Tipografía: Label Small (14px Bold) para sm/base/l/xl, Label Tiny (12px Bold) para xs
- * - Iconos: 16x16px en todos los tamaños
- * - Gap entre elementos: 8px (xs/sm/base), 12px (l/xl)
- *
- * **Dark Mode:**
- * Los botones invierten colores en dark mode:
- * - Default: fondo celeste claro (#bfe2fe), texto azul (#0e79fd), borde celeste (#93d1fd)
- * - Outline: texto celeste (#93d1fd), borde azul (#0f6ae3)
- * - Plain: texto celeste (#93d1fd), hover overlay blanco 20%
- * - Focus ring adaptativo con offset oscuro
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/shadows.md - Sistema de sombras (shadow-button-inset, shadow-sm)
- * @see docs/typography.md - Sistema tipográfico (Label Small/Tiny)
- * @see docs/spacing.md - Sistema de espaciado
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240 - Diseño Figma
- *
- * @example
- * ```tsx
- * // Botón primario con icono
- * <Button type="default" size="base" leftIcon={<SaveIcon />}>
- *   Guardar
- * </Button>
- *
- * // Botón secundario
- * <Button type="outline" size="base">
- *   Cancelar
- * </Button>
- *
- * // Botón solo icono para barra de herramientas
- * <Button type="plain" size="sm" iconOnly leftIcon={<CloseIcon />} ariaLabel="Cerrar" />
- *
- * // Botón con badge de notificación (dot)
- * <Button type="default" size="base" badge>
- *   Notificaciones
- * </Button>
- *
- * // Botón con badge contador
- * <Button type="default" size="base" badgeCount={5} badgeColor="red">
- *   Mensajes
- * </Button>
- * ```
- */
-export const Button: React.FC<ButtonProps> = ({
-  type = 'default',
-  size = 'base',
-  iconOnly = false,
-  leftIcon,
-  rightIcon,
-  children,
-  disabled = false,
-  className = '',
-  onClick,
-  htmlType = 'button',
-  fullWidth = false,
-  ariaLabel,
-  badge = false,
-  badgeCount,
-  badgeColor = 'red',
-  ...rest
-}) => {
-  // ===== CLASES DE TAMAÑO =====
-  const sizeClasses = {
-    xs: iconOnly ? 'h-6 w-6 p-1' : 'h-6 py-1 px-2 gap-2',
-    sm: iconOnly ? 'h-7 w-7 p-1.5' : 'h-7 py-1 px-2 gap-2',
-    base: iconOnly ? 'h-8 w-8 p-2' : 'h-8 py-1.5 px-2.5 gap-2',
-    l: iconOnly ? 'h-9 w-9 p-2.5' : 'h-9 py-2 px-3 gap-3',
-    xl: iconOnly ? 'h-10 w-10 p-3' : 'h-10 py-2 px-4 gap-3',
-  };
-
-  // ===== CLASES DE TAMAÑO DE ICONO =====
-  const iconSizeClasses = {
-    xs: 'w-4 h-4',
-    sm: 'w-4 h-4',
-    base: 'w-4 h-4',
-    l: 'w-4 h-4',
-    xl: 'w-4 h-4',
-  };
-
-  // ===== CLASES DE TAMAÑO DE TEXTO =====
-  // Usando el sistema de tipografía Label del design system (typography.md)
-  const textSizeClasses = {
-    xs: 'text-xs',   // Label Tiny - 12px
-    sm: 'text-sm',   // Label Small - 14px
-    base: 'text-sm', // Label Small - 14px (default para base)
-    l: 'text-sm',    // Label Small - 14px (corregido según Figma)
-    xl: 'text-sm',   // Label Small - 14px (corregido según Figma)
-  };
-
-  // ===== CLASES DE TIPO (Default, Outline, Plain) =====
-  // Especificaciones de Figma node 4001-17240
-  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
-  // Dark mode: Los botones invierten colores (fondo claro, texto oscuro)
-  // - Light: fondo #0e79fd (azul), texto #eff8ff (blanco)
-  // - Dark: fondo #bfe2fe (celeste claro), texto #0e79fd (azul)
-  const typeClasses = {
-    default: `
-      bg-primary-custom-600
-      text-primary-inverse-content
-      border
-      border-primary-inverse-border
-      shadow-button-inset
-      hover:bg-primary-custom-500
-      active:scale-95
-      transition-all
-      duration-150
-      dark:bg-dark-bg-inverse
-      dark:text-dark-content-inverse
-      dark:border-dark-border-inverse
-      dark:hover:bg-dark-bg-inverse/90
-    `,
-    outline: `
-      bg-transparent
-      text-primary-custom-600
-      border
-      border-primary-custom-300
-      shadow-sm
-      hover:bg-primary-custom-100
-      active:scale-95
-      transition-all
-      duration-150
-      dark:text-dark-content-custom
-      dark:border-dark-border-custom
-      dark:hover:bg-dark-bg-custom/20
-    `,
-    plain: `
-      bg-transparent
-      text-primary-custom-600
-      border
-      border-transparent
-      hover:bg-hover-overlay
-      active:scale-95
-      transition-all
-      duration-150
-      dark:text-dark-content-custom
-      dark:hover:bg-hover-overlay-dark
-    `,
-  };
-
-  // ===== CLASES BASE =====
-  // Especificaciones de Figma: Focus ring = 4px spread primary-custom-400 + 2px offset primary-custom-100
-  // Dark mode: Focus ring adaptativo con offset oscuro
-  const baseClasses = `
-    inline-flex
-    items-center
-    justify-center
-    rounded-md
-    font-bold
-    whitespace-nowrap
-    focus:outline-none
-    focus:ring-4
-    focus:ring-primary-custom-400
-    focus:ring-offset-2
-    focus:ring-offset-primary-custom-100
-    dark:focus:ring-dark-border-custom
-    dark:focus:ring-offset-dark-bg-primary
-    disabled:opacity-50
-    disabled:cursor-not-allowed
-    disabled:pointer-events-none
-  `;
-
-  // ===== CLASE FULL WIDTH =====
-  const widthClass = fullWidth ? 'w-full' : '';
-
-  // ===== COMBINAR TODAS LAS CLASES =====
-  const buttonClasses = [
-    baseClasses,
-    sizeClasses[size],
-    typeClasses[type],
-    widthClass,
-    className,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== RENDERIZAR ICONO =====
-  const renderIcon = (icon: React.ReactNode) => {
-    if (!icon) return null;
-    return (
-      <span className={`inline-flex items-center justify-center ${iconSizeClasses[size]}`}>
-        {icon}
-      </span>
-    );
-  };
-
-  // ===== RENDERIZAR CONTENIDO =====
-  const renderContent = () => {
-    // Si es iconOnly, solo mostrar leftIcon
-    if (iconOnly) {
-      return renderIcon(leftIcon);
-    }
-
-    // Si tiene texto y/o iconos
-    return (
-      <>
-        {leftIcon && renderIcon(leftIcon)}
-        {children && <span className={textSizeClasses[size]}>{children}</span>}
-        {rightIcon && renderIcon(rightIcon)}
-      </>
-    );
-  };
-
-  // ===== MAPA DE COLORES DE BADGE =====
-  // Basado en el componente Badge existente
-  const badgeColorClasses: Record<string, { bg: string; text: string }> = {
-    zinc: { bg: 'bg-zinc-600', text: 'text-white' },
-    red: { bg: 'bg-red-700', 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 badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;
-
-  // ===== RENDERIZAR BADGE =====
-  const renderBadge = () => {
-    // Si no hay badge ni badgeCount, no renderizar nada
-    if (!badge && badgeCount === undefined) return null;
-
-    // Si hay badgeCount, renderizar badge con número
-    if (badgeCount !== undefined) {
-      return (
-        <span
-          className={`
-            absolute
-            -top-1
-            -right-1
-            flex
-            items-center
-            justify-center
-            min-w-[16px]
-            h-4
-            px-1
-            rounded-full
-            text-[10px]
-            font-bold
-            leading-none
-            ${badgeColors.bg}
-            ${badgeColors.text}
-            pointer-events-none
-          `.trim().replace(/\s+/g, ' ')}
-          aria-label={`${badgeCount} notificaciones`}
-        >
-          {badgeCount > 99 ? '99+' : badgeCount}
-        </span>
-      );
-    }
-
-    // Si solo hay badge (sin número), renderizar dot
-    return (
-      <span
-        className={`
-          absolute
-          -top-1
-          -right-1
-          w-2
-          h-2
-          rounded-full
-          ${badgeColors.bg}
-          pointer-events-none
-        `.trim().replace(/\s+/g, ' ')}
-        aria-label="Notificación"
-      />
-    );
-  };
-
-  return (
-    <button
-      type={htmlType}
-      className={`${buttonClasses} ${(badge || badgeCount !== undefined) ? 'relative' : ''}`}
-      disabled={disabled}
-      onClick={onClick}
-      aria-label={ariaLabel}
-      {...rest}
-    >
-      {renderContent()}
-      {renderBadge()}
-    </button>
-  );
-};
+import React from 'react';
+import type { ButtonProps } from './Button.types';
+
+/**
+ * Componente Button del sistema de diseño Siesa
+ *
+ * Implementación pixel-perfect basada en Figma (node 4001-17240)
+ * con soporte completo para todos los estados, tamaños y variantes.
+ *
+ * **Variantes (type):**
+ * - `default`: Botón primario con fondo sólido (#0e79fd) y borde (#3c9bf6)
+ *   - Sombra interna para efecto de profundidad
+ *   - Usar para acciones principales (Guardar, Enviar, Confirmar)
+ * - `outline`: Botón secundario con borde (#93d1fd) y shadow-sm
+ *   - Usar para acciones secundarias (Cancelar, Volver)
+ * - `plain`: Botón terciario sin borde visible
+ *   - Hover overlay sutil
+ *   - Usar para acciones sutiles (Cerrar, Ver más, Links)
+ *
+ * **Tamaños (size):**
+ * - `xs` (24px): Espacios muy compactos, inline actions. Padding: 8px h, 4px v
+ * - `sm` (28px): Barras de herramientas, acciones secundarias. Padding: 8px h, 4px v
+ * - `base` (32px): Tamaño estándar para la mayoría de casos. Padding: 10px h, 6px v
+ * - `l` (36px): Botones destacados, CTAs. Padding: 12px h, 8px v
+ * - `xl` (40px): Heroes, landing pages. Padding: 16px h, 8px v
+ *
+ * **Estados:**
+ * - `default`: Estado normal con colores base
+ * - `hover`: Overlay visual sutil (bg-primary-custom-500 para default)
+ * - `focus`: Focus ring de 4px (#60b6fa) con offset de 2px (#dbeefe)
+ * - `active`: Scale animation (scale-95) para feedback táctil
+ * - `disabled`: Opacity 50% con pointer-events-none
+ *
+ * **Badges de notificación:**
+ * - `badge`: Muestra un dot de notificación en la esquina superior derecha
+ * - `badgeCount`: Muestra un badge con número (99+ para >99)
+ * - `badgeColor`: Color del badge (por defecto: red - #b91c1c)
+ *
+ * **Especificaciones de Figma:**
+ * - Border radius: 6px (rounded-md)
+ * - Tipografía: Label Small (14px Bold) para sm/base/l/xl, Label Tiny (12px Bold) para xs
+ * - Iconos: 16x16px en todos los tamaños
+ * - Gap entre elementos: 8px (xs/sm/base), 12px (l/xl)
+ *
+ * **Dark Mode:**
+ * Los botones invierten colores en dark mode:
+ * - Default: fondo celeste claro (#bfe2fe), texto azul (#0e79fd), borde celeste (#93d1fd)
+ * - Outline: texto celeste (#93d1fd), borde azul (#0f6ae3)
+ * - Plain: texto celeste (#93d1fd), hover overlay blanco 20%
+ * - Focus ring adaptativo con offset oscuro
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/shadows.md - Sistema de sombras (shadow-button-inset, shadow-sm)
+ * @see docs/typography.md - Sistema tipográfico (Label Small/Tiny)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4001-17240 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * // Botón primario con icono
+ * <Button type="default" size="base" leftIcon={<SaveIcon />}>
+ *   Guardar
+ * </Button>
+ *
+ * // Botón secundario
+ * <Button type="outline" size="base">
+ *   Cancelar
+ * </Button>
+ *
+ * // Botón solo icono para barra de herramientas
+ * <Button type="plain" size="sm" iconOnly leftIcon={<CloseIcon />} ariaLabel="Cerrar" />
+ *
+ * // Botón con badge de notificación (dot)
+ * <Button type="default" size="base" badge>
+ *   Notificaciones
+ * </Button>
+ *
+ * // Botón con badge contador
+ * <Button type="default" size="base" badgeCount={5} badgeColor="red">
+ *   Mensajes
+ * </Button>
+ * ```
+ */
+export const Button: React.FC<ButtonProps> = ({
+  type = 'default',
+  size = 'base',
+  iconOnly = false,
+  leftIcon,
+  rightIcon,
+  children,
+  disabled = false,
+  className = '',
+  onClick,
+  htmlType = 'button',
+  fullWidth = false,
+  ariaLabel,
+  badge = false,
+  badgeCount,
+  badgeColor = 'red',
+  ...rest
+}) => {
+  // ===== CLASES DE TAMAÑO =====
+  const sizeClasses = {
+    xs: iconOnly ? 'h-6 w-6 p-1' : 'h-6 py-1 px-2 gap-2',
+    sm: iconOnly ? 'h-7 w-7 p-1.5' : 'h-7 py-1 px-2 gap-2',
+    base: iconOnly ? 'h-8 w-8 p-2' : 'h-8 py-1.5 px-2.5 gap-2',
+    l: iconOnly ? 'h-9 w-9 p-2.5' : 'h-9 py-2 px-3 gap-3',
+    xl: iconOnly ? 'h-10 w-10 p-3' : 'h-10 py-2 px-4 gap-3',
+  };
+
+  // ===== CLASES DE TAMAÑO DE ICONO =====
+  const iconSizeClasses = {
+    xs: 'w-4 h-4',
+    sm: 'w-4 h-4',
+    base: 'w-4 h-4',
+    l: 'w-4 h-4',
+    xl: 'w-4 h-4',
+  };
+
+  // ===== CLASES DE TAMAÑO DE TEXTO =====
+  // Usando el sistema de tipografía Label del design system (typography.md)
+  const textSizeClasses = {
+    xs: 'text-xs',   // Label Tiny - 12px
+    sm: 'text-sm',   // Label Small - 14px
+    base: 'text-sm', // Label Small - 14px (default para base)
+    l: 'text-sm',    // Label Small - 14px (corregido según Figma)
+    xl: 'text-sm',   // Label Small - 14px (corregido según Figma)
+  };
+
+  // ===== CLASES DE TIPO (Default, Outline, Plain) =====
+  // Especificaciones de Figma node 4001-17240
+  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+  // Dark mode: Los botones invierten colores (fondo claro, texto oscuro)
+  // - Light: fondo #0e79fd (azul), texto #eff8ff (blanco)
+  // - Dark: fondo #bfe2fe (celeste claro), texto #0e79fd (azul)
+  const typeClasses = {
+    default: `
+      bg-primary-custom-600
+      text-primary-inverse-content
+      border
+      border-primary-inverse-border
+      shadow-button-inset
+      hover:bg-primary-custom-500
+      active:scale-95
+      transition-all
+      duration-150
+      dark:bg-dark-bg-inverse
+      dark:text-dark-content-inverse
+      dark:border-dark-border-inverse
+      dark:hover:bg-dark-bg-inverse/90
+    `,
+    outline: `
+      bg-transparent
+      text-primary-custom-600
+      border
+      border-primary-custom-300
+      shadow-sm
+      hover:bg-primary-custom-100
+      active:scale-95
+      transition-all
+      duration-150
+      dark:text-dark-content-custom
+      dark:border-dark-border-custom
+      dark:hover:bg-dark-bg-custom/20
+    `,
+    plain: `
+      bg-transparent
+      text-primary-custom-600
+      border
+      border-transparent
+      hover:bg-hover-overlay
+      active:scale-95
+      transition-all
+      duration-150
+      dark:text-dark-content-custom
+      dark:hover:bg-hover-overlay-dark
+    `,
+  };
+
+  // ===== CLASES BASE =====
+  // Especificaciones de Figma: Focus ring = 4px spread primary-custom-400 + 2px offset primary-custom-100
+  // Dark mode: Focus ring adaptativo con offset oscuro
+  const baseClasses = `
+    inline-flex
+    items-center
+    justify-center
+    rounded-md
+    font-bold
+    whitespace-nowrap
+    focus:outline-none
+    focus:ring-4
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    focus:ring-offset-primary-custom-100
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    disabled:opacity-50
+    disabled:cursor-not-allowed
+    disabled:pointer-events-none
+  `;
+
+  // ===== CLASE FULL WIDTH =====
+  const widthClass = fullWidth ? 'w-full' : '';
+
+  // ===== COMBINAR TODAS LAS CLASES =====
+  const buttonClasses = [
+    baseClasses,
+    sizeClasses[size],
+    typeClasses[type],
+    widthClass,
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== RENDERIZAR ICONO =====
+  const renderIcon = (icon: React.ReactNode) => {
+    if (!icon) return null;
+    return (
+      <span className={`inline-flex items-center justify-center ${iconSizeClasses[size]}`}>
+        {icon}
+      </span>
+    );
+  };
+
+  // ===== RENDERIZAR CONTENIDO =====
+  const renderContent = () => {
+    // Si es iconOnly, solo mostrar leftIcon
+    if (iconOnly) {
+      return renderIcon(leftIcon);
+    }
+
+    // Si tiene texto y/o iconos
+    return (
+      <>
+        {leftIcon && renderIcon(leftIcon)}
+        {children && <span className={textSizeClasses[size]}>{children}</span>}
+        {rightIcon && renderIcon(rightIcon)}
+      </>
+    );
+  };
+
+  // ===== MAPA DE COLORES DE BADGE =====
+  // Basado en el componente Badge existente
+  const badgeColorClasses: Record<string, { bg: string; text: string }> = {
+    zinc: { bg: 'bg-zinc-600', text: 'text-white' },
+    red: { bg: 'bg-red-700', 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 badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;
+
+  // ===== RENDERIZAR BADGE =====
+  const renderBadge = () => {
+    // Si no hay badge ni badgeCount, no renderizar nada
+    if (!badge && badgeCount === undefined) return null;
+
+    // Si hay badgeCount, renderizar badge con número
+    if (badgeCount !== undefined) {
+      return (
+        <span
+          className={`
+            absolute
+            -top-1
+            -right-1
+            flex
+            items-center
+            justify-center
+            min-w-[16px]
+            h-4
+            px-1
+            rounded-full
+            text-[10px]
+            font-bold
+            leading-none
+            ${badgeColors.bg}
+            ${badgeColors.text}
+            pointer-events-none
+          `.trim().replace(/\s+/g, ' ')}
+          aria-label={`${badgeCount} notificaciones`}
+        >
+          {badgeCount > 99 ? '99+' : badgeCount}
+        </span>
+      );
+    }
+
+    // Si solo hay badge (sin número), renderizar dot
+    return (
+      <span
+        className={`
+          absolute
+          -top-1
+          -right-1
+          w-2
+          h-2
+          rounded-full
+          ${badgeColors.bg}
+          pointer-events-none
+        `.trim().replace(/\s+/g, ' ')}
+        aria-label="Notificación"
+      />
+    );
+  };
+
+  return (
+    <button
+      type={htmlType}
+      className={`${buttonClasses} ${(badge || badgeCount !== undefined) ? 'relative' : ''}`}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      {...rest}
+    >
+      {renderContent()}
+      {renderBadge()}
+    </button>
+  );
+};