siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Tabs/Tabs.tsx

@@ -1,356 +1,356 @@
-import React, { useState } from 'react';
-import type { TabProps, TabsProps } from './Tabs.types';
-
-/**
- * Componente Tab individual del sistema de diseño Siesa
- *
- * Representa un único tab dentro de un grupo de tabs. Incluye soporte para:
- * - Estado activo/inactivo con indicador visual (línea inferior)
- * - Icono opcional a la izquierda del texto
- * - Badge de notificación con contador
- * - Estados hover, focus y disabled
- * - Dark mode completo
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * <Tab
- *   label="Inicio"
- *   active={true}
- *   icon={<HomeIcon />}
- *   badge={3}
- *   onClick={() => setActiveTab('home')}
- * />
- * ```
- */
-export const Tab: React.FC<TabProps> = ({
-  label,
-  active = false,
-  icon,
-  badge,
-  disabled = false,
-  onClick,
-  className = '',
-  ariaLabel,
-}) => {
-  // ===== CLASES BASE DEL BOTÓN =====
-  // El contenedor es relativo para posicionar el indicador absoluto
-  const baseClasses = `
-    relative
-    flex
-    flex-col
-    items-center
-    cursor-pointer
-    outline-none
-    transition-all
-    duration-150
-    p-0
-    border-0
-    bg-transparent
-  `;
-
-  // ===== CLASES DE FOCUS =====
-  // El focus outline se desactiva aquí, el shadow se aplica al Content div
-  const focusClasses = '';
-
-  // ===== CLASES DE DISABLED =====
-  const disabledClasses = disabled
-    ? 'opacity-50 cursor-not-allowed pointer-events-none'
-    : '';
-
-  // ===== CLASES DEL CONTENIDO INTERIOR =====
-  // El hover y focus background se aplica aquí
-  const contentBaseClasses = `
-    flex
-    items-center
-    justify-center
-    gap-1
-    p-2
-    rounded-lg
-    overflow-hidden
-    transition-all
-    duration-150
-    w-full
-  `;
-
-  // ===== CLASES DE ESTADO HOVER Y FOCUS PARA CONTENIDO =====
-  // Light: bg-[rgba(0,0,0,0.03)], Dark: bg-white/5
-  // Según Figma, tanto hover como focus tienen el background overlay
-  // El shadow de focus también se aplica aquí (al Content div), no al botón
-  const contentStateClasses = disabled
-    ? ''
-    : `
-      group-hover:bg-[rgba(0,0,0,0.03)]
-      group-focus-visible:bg-[rgba(0,0,0,0.03)]
-      group-focus-visible:shadow-lg
-      dark:group-hover:bg-white/5
-      dark:group-focus-visible:bg-white/5
-      dark:group-focus-visible:shadow-2xl
-    `;
-
-  // ===== CLASES DE TEXTO =====
-  // Activo: primary-custom-600 (#0e79fd), Inactivo: content-primary (#18181b)
-  const textClasses = active
-    ? `
-      text-primary-custom-600
-      dark:text-primary-custom-600
-    `
-    : `
-      text-content-primary
-      dark:text-dark-content-primary
-    `;
-
-  // ===== CLASES DE ICONO =====
-  // El icono hereda el color del texto
-  const iconClasses = `
-    w-3
-    h-3
-    flex-shrink-0
-  `;
-
-  // ===== CLASES DEL BADGE =====
-  // Activo: bg-primary-custom-600 (#0e79fd), Inactivo: bg-content-primary (#18181b)
-  const badgeClasses = active
-    ? `
-      bg-primary-custom-600
-      dark:bg-primary-custom-600
-    `
-    : `
-      bg-content-primary
-      dark:bg-dark-content-primary
-    `;
-
-  // ===== CLASES DEL INDICADOR INFERIOR =====
-  // Solo visible cuando está activo, 2px de alto, rounded-full
-  // Posicionado al fondo del contenedor de Tabs (alineado con el border)
-  const indicatorClasses = active
-    ? `
-      absolute
-      -bottom-2.5
-      left-0
-      right-0
-      h-0.5
-      rounded-full
-      bg-primary-custom-600
-      dark:bg-primary-custom-600
-      z-10
-    `
-    : 'hidden';
-
-  // ===== COMBINAR CLASES DEL BOTÓN =====
-  const finalClasses = [
-    baseClasses,
-    focusClasses,
-    disabledClasses,
-    'group', // Para usar group-hover y group-focus-visible
-    className,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== COMBINAR CLASES DEL CONTENIDO =====
-  const contentFinalClasses = [
-    contentBaseClasses,
-    contentStateClasses,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <button
-      type="button"
-      role="tab"
-      aria-selected={active}
-      aria-disabled={disabled}
-      aria-label={ariaLabel || label}
-      tabIndex={disabled ? -1 : 0}
-      className={finalClasses}
-      onClick={disabled ? undefined : onClick}
-      disabled={disabled}
-    >
-      {/* Contenido del Tab */}
-      <div className={contentFinalClasses}>
-        {/* Icono (opcional) */}
-        {icon && (
-          <span className={`${iconClasses} ${textClasses}`.trim()}>
-            {icon}
-          </span>
-        )}
-
-        {/* Texto */}
-        <span
-          className={`
-            text-sm
-            font-bold
-            leading-5
-            whitespace-nowrap
-            ${textClasses}
-          `
-            .replace(/\s+/g, ' ')
-            .trim()}
-        >
-          {label}
-        </span>
-
-        {/* Badge de notificación (opcional) */}
-        {badge !== undefined && badge > 0 && (
-          <span
-            className={`
-              flex
-              items-center
-              justify-center
-              h-3
-              min-w-[12px]
-              px-0.5
-              rounded-sm
-              text-xs
-              font-normal
-              leading-4
-              text-primary-inverse-content
-              dark:text-dark-bg-primary
-              ${badgeClasses}
-            `
-              .replace(/\s+/g, ' ')
-              .trim()}
-            aria-label={`${badge} notificaciones`}
-          >
-            {badge > 99 ? '99+' : badge}
-          </span>
-        )}
-      </div>
-
-      {/* Indicador inferior (línea activa) */}
-      <div className={indicatorClasses} />
-    </button>
-  );
-};
-
-/**
- * Componente Tabs contenedor del sistema de diseño Siesa
- *
- * Agrupa múltiples tabs permitiendo navegación entre diferentes secciones.
- * Soporta modo controlado (con activeId y onChange) y no controlado (con defaultActiveId).
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA roles y keyboard navigation
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * // Modo controlado
- * const [activeTab, setActiveTab] = useState('home');
- *
- * <Tabs
- *   items={[
- *     { id: 'home', label: 'Inicio', icon: <HomeIcon /> },
- *     { id: 'profile', label: 'Perfil', badge: 3 },
- *     { id: 'settings', label: 'Configuración' },
- *   ]}
- *   activeId={activeTab}
- *   onChange={setActiveTab}
- * />
- *
- * // Modo no controlado
- * <Tabs
- *   items={[...]}
- *   defaultActiveId="home"
- * />
- * ```
- */
-export const Tabs: React.FC<TabsProps> = ({
-  items,
-  activeId,
-  defaultActiveId,
-  onChange,
-  className = '',
-  fullWidth = false,
-  size = 'base',
-  showBorder = true,
-}) => {
-  // Estado interno para modo no controlado
-  const [internalActiveId, setInternalActiveId] = useState(
-    defaultActiveId || (items.length > 0 ? items[0].id : '')
-  );
-
-  // Determinar si es controlado o no controlado
-  const isControlled = activeId !== undefined;
-  const currentActiveId = isControlled ? activeId : internalActiveId;
-
-  // Handler para cambio de tab
-  const handleTabClick = (id: string) => {
-    if (!isControlled) {
-      setInternalActiveId(id);
-    }
-    onChange?.(id);
-  };
-
-  // ===== CLASES DE TAMAÑO =====
-  const sizeClasses = {
-    sm: 'gap-0',
-    base: 'gap-1',
-    lg: 'gap-2',
-  };
-
-  // ===== CLASES DEL CONTENEDOR =====
-  // El padding-bottom (pb-2.5 = 10px) deja espacio para el indicador del tab activo
-  // El border-b se dibuja debajo del padding, alineándose con el indicador
-  const containerClasses = `
-    flex
-    items-end
-    pb-2.5
-    ${sizeClasses[size]}
-    ${fullWidth ? 'w-full' : ''}
-    ${showBorder ? 'border-b border-border-primary dark:border-dark-border-primary' : ''}
-  `;
-
-  // ===== CLASES FULL WIDTH PARA ITEMS =====
-  const itemWidthClass = fullWidth ? 'flex-1' : '';
-
-  const finalClasses = [
-    containerClasses,
-    className,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <div
-      role="tablist"
-      aria-label="Pestañas de navegación"
-      className={finalClasses}
-    >
-      {items.map((item) => (
-        <Tab
-          key={item.id}
-          label={item.label}
-          active={currentActiveId === item.id}
-          icon={item.icon}
-          badge={item.badge}
-          disabled={item.disabled}
-          onClick={() => handleTabClick(item.id)}
-          className={itemWidthClass}
-        />
-      ))}
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import type { TabProps, TabsProps } from './Tabs.types';
+
+/**
+ * Componente Tab individual del sistema de diseño Siesa
+ *
+ * Representa un único tab dentro de un grupo de tabs. Incluye soporte para:
+ * - Estado activo/inactivo con indicador visual (línea inferior)
+ * - Icono opcional a la izquierda del texto
+ * - Badge de notificación con contador
+ * - Estados hover, focus y disabled
+ * - Dark mode completo
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Tab
+ *   label="Inicio"
+ *   active={true}
+ *   icon={<HomeIcon />}
+ *   badge={3}
+ *   onClick={() => setActiveTab('home')}
+ * />
+ * ```
+ */
+export const Tab: React.FC<TabProps> = ({
+  label,
+  active = false,
+  icon,
+  badge,
+  disabled = false,
+  onClick,
+  className = '',
+  ariaLabel,
+}) => {
+  // ===== CLASES BASE DEL BOTÓN =====
+  // El contenedor es relativo para posicionar el indicador absoluto
+  const baseClasses = `
+    relative
+    flex
+    flex-col
+    items-center
+    cursor-pointer
+    outline-none
+    transition-all
+    duration-150
+    p-0
+    border-0
+    bg-transparent
+  `;
+
+  // ===== CLASES DE FOCUS =====
+  // El focus outline se desactiva aquí, el shadow se aplica al Content div
+  const focusClasses = '';
+
+  // ===== CLASES DE DISABLED =====
+  const disabledClasses = disabled
+    ? 'opacity-50 cursor-not-allowed pointer-events-none'
+    : '';
+
+  // ===== CLASES DEL CONTENIDO INTERIOR =====
+  // El hover y focus background se aplica aquí
+  const contentBaseClasses = `
+    flex
+    items-center
+    justify-center
+    gap-1
+    p-2
+    rounded-lg
+    overflow-hidden
+    transition-all
+    duration-150
+    w-full
+  `;
+
+  // ===== CLASES DE ESTADO HOVER Y FOCUS PARA CONTENIDO =====
+  // Light: bg-[rgba(0,0,0,0.03)], Dark: bg-white/5
+  // Según Figma, tanto hover como focus tienen el background overlay
+  // El shadow de focus también se aplica aquí (al Content div), no al botón
+  const contentStateClasses = disabled
+    ? ''
+    : `
+      group-hover:bg-[rgba(0,0,0,0.03)]
+      group-focus-visible:bg-[rgba(0,0,0,0.03)]
+      group-focus-visible:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+      dark:group-hover:bg-white/5
+      dark:group-focus-visible:bg-white/5
+      dark:group-focus-visible:shadow-[0px_0px_0px_2px_#1e3a5f,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#0f6ae3]
+    `;
+
+  // ===== CLASES DE TEXTO =====
+  // Activo: primary-custom-600 (#0e79fd), Inactivo: content-primary (#18181b)
+  const textClasses = active
+    ? `
+      text-primary-custom-600
+      dark:text-primary-custom-600
+    `
+    : `
+      text-content-primary
+      dark:text-dark-content-primary
+    `;
+
+  // ===== CLASES DE ICONO =====
+  // El icono hereda el color del texto
+  const iconClasses = `
+    w-3
+    h-3
+    flex-shrink-0
+  `;
+
+  // ===== CLASES DEL BADGE =====
+  // Activo: bg-primary-custom-600 (#0e79fd), Inactivo: bg-content-primary (#18181b)
+  const badgeClasses = active
+    ? `
+      bg-primary-custom-600
+      dark:bg-primary-custom-600
+    `
+    : `
+      bg-content-primary
+      dark:bg-dark-content-primary
+    `;
+
+  // ===== CLASES DEL INDICADOR INFERIOR =====
+  // Solo visible cuando está activo, 2px de alto, rounded-full
+  // Posicionado al fondo del contenedor de Tabs (alineado con el border)
+  const indicatorClasses = active
+    ? `
+      absolute
+      -bottom-2.5
+      left-0
+      right-0
+      h-0.5
+      rounded-full
+      bg-primary-custom-600
+      dark:bg-primary-custom-600
+      z-10
+    `
+    : 'hidden';
+
+  // ===== COMBINAR CLASES DEL BOTÓN =====
+  const finalClasses = [
+    baseClasses,
+    focusClasses,
+    disabledClasses,
+    'group', // Para usar group-hover y group-focus-visible
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== COMBINAR CLASES DEL CONTENIDO =====
+  const contentFinalClasses = [
+    contentBaseClasses,
+    contentStateClasses,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      aria-disabled={disabled}
+      aria-label={ariaLabel || label}
+      tabIndex={disabled ? -1 : 0}
+      className={finalClasses}
+      onClick={disabled ? undefined : onClick}
+      disabled={disabled}
+    >
+      {/* Contenido del Tab */}
+      <div className={contentFinalClasses}>
+        {/* Icono (opcional) */}
+        {icon && (
+          <span className={`${iconClasses} ${textClasses}`.trim()}>
+            {icon}
+          </span>
+        )}
+
+        {/* Texto */}
+        <span
+          className={`
+            text-sm
+            font-bold
+            leading-5
+            whitespace-nowrap
+            ${textClasses}
+          `
+            .replace(/\s+/g, ' ')
+            .trim()}
+        >
+          {label}
+        </span>
+
+        {/* Badge de notificación (opcional) */}
+        {badge !== undefined && badge > 0 && (
+          <span
+            className={`
+              flex
+              items-center
+              justify-center
+              h-3
+              min-w-[12px]
+              px-0.5
+              rounded-sm
+              text-xs
+              font-normal
+              leading-4
+              text-primary-inverse-content
+              dark:text-dark-bg-primary
+              ${badgeClasses}
+            `
+              .replace(/\s+/g, ' ')
+              .trim()}
+            aria-label={`${badge} notificaciones`}
+          >
+            {badge > 99 ? '99+' : badge}
+          </span>
+        )}
+      </div>
+
+      {/* Indicador inferior (línea activa) */}
+      <div className={indicatorClasses} />
+    </button>
+  );
+};
+
+/**
+ * Componente Tabs contenedor del sistema de diseño Siesa
+ *
+ * Agrupa múltiples tabs permitiendo navegación entre diferentes secciones.
+ * Soporta modo controlado (con activeId y onChange) y no controlado (con defaultActiveId).
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA roles y keyboard navigation
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Modo controlado
+ * const [activeTab, setActiveTab] = useState('home');
+ *
+ * <Tabs
+ *   items={[
+ *     { id: 'home', label: 'Inicio', icon: <HomeIcon /> },
+ *     { id: 'profile', label: 'Perfil', badge: 3 },
+ *     { id: 'settings', label: 'Configuración' },
+ *   ]}
+ *   activeId={activeTab}
+ *   onChange={setActiveTab}
+ * />
+ *
+ * // Modo no controlado
+ * <Tabs
+ *   items={[...]}
+ *   defaultActiveId="home"
+ * />
+ * ```
+ */
+export const Tabs: React.FC<TabsProps> = ({
+  items,
+  activeId,
+  defaultActiveId,
+  onChange,
+  className = '',
+  fullWidth = false,
+  size = 'base',
+  showBorder = true,
+}) => {
+  // Estado interno para modo no controlado
+  const [internalActiveId, setInternalActiveId] = useState(
+    defaultActiveId || (items.length > 0 ? items[0].id : '')
+  );
+
+  // Determinar si es controlado o no controlado
+  const isControlled = activeId !== undefined;
+  const currentActiveId = isControlled ? activeId : internalActiveId;
+
+  // Handler para cambio de tab
+  const handleTabClick = (id: string) => {
+    if (!isControlled) {
+      setInternalActiveId(id);
+    }
+    onChange?.(id);
+  };
+
+  // ===== CLASES DE TAMAÑO =====
+  const sizeClasses = {
+    sm: 'gap-0',
+    base: 'gap-1',
+    lg: 'gap-2',
+  };
+
+  // ===== CLASES DEL CONTENEDOR =====
+  // El padding-bottom (pb-2.5 = 10px) deja espacio para el indicador del tab activo
+  // El border-b se dibuja debajo del padding, alineándose con el indicador
+  const containerClasses = `
+    flex
+    items-end
+    pb-2.5
+    ${sizeClasses[size]}
+    ${fullWidth ? 'w-full' : ''}
+    ${showBorder ? 'border-b border-border-primary dark:border-dark-border-primary' : ''}
+  `;
+
+  // ===== CLASES FULL WIDTH PARA ITEMS =====
+  const itemWidthClass = fullWidth ? 'flex-1' : '';
+
+  const finalClasses = [
+    containerClasses,
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <div
+      role="tablist"
+      aria-label="Pestañas de navegación"
+      className={finalClasses}
+    >
+      {items.map((item) => (
+        <Tab
+          key={item.id}
+          label={item.label}
+          active={currentActiveId === item.id}
+          icon={item.icon}
+          badge={item.badge}
+          disabled={item.disabled}
+          onClick={() => handleTabClick(item.id)}
+          className={itemWidthClass}
+        />
+      ))}
+    </div>
+  );
+};