siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/Tabs/Tabs.tsx

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

package/src/components/Tabs/Tabs.types.ts

@@ -0,0 +1,127 @@
+import type { ReactNode } from 'react';
+
+/**
+ * Configuración de un item de Tab individual
+ */
+export interface TabItem {
+  /**
+   * Identificador único del tab
+   */
+  id: string;
+
+  /**
+   * Texto a mostrar en el tab
+   */
+  label: string;
+
+  /**
+   * Icono a mostrar a la izquierda del texto (opcional)
+   */
+  icon?: ReactNode;
+
+  /**
+   * Número de notificaciones a mostrar en el badge (opcional)
+   */
+  badge?: number;
+
+  /**
+   * Si el tab está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Props del componente Tab individual (interno)
+ */
+export interface TabProps {
+  /**
+   * Texto a mostrar en el tab
+   */
+  label: string;
+
+  /**
+   * Si el tab está activo/seleccionado
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Icono a mostrar a la izquierda del texto (opcional)
+   */
+  icon?: ReactNode;
+
+  /**
+   * Número de notificaciones a mostrar en el badge (opcional)
+   */
+  badge?: number;
+
+  /**
+   * Si el tab está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Función callback ejecutada al hacer click
+   */
+  onClick?: () => void;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Etiqueta accesible para lectores de pantalla
+   */
+  ariaLabel?: string;
+}
+
+/**
+ * Props del componente Tabs (contenedor)
+ */
+export interface TabsProps {
+  /**
+   * Lista de tabs a mostrar
+   */
+  items: TabItem[];
+
+  /**
+   * ID del tab actualmente seleccionado
+   */
+  activeId?: string;
+
+  /**
+   * ID del tab seleccionado por defecto (para componente no controlado)
+   */
+  defaultActiveId?: string;
+
+  /**
+   * Callback ejecutado cuando cambia el tab seleccionado
+   */
+  onChange?: (id: string) => void;
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+
+  /**
+   * Si los tabs deben ocupar todo el ancho disponible
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Tamaño de los tabs
+   * @default 'base'
+   */
+  size?: 'sm' | 'base' | 'lg';
+
+  /**
+   * Si se muestra la línea inferior del contenedor de tabs
+   * @default true
+   */
+  showBorder?: boolean;
+}

package/src/components/Tabs/icons.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+/**
+ * Icono de check (Heroicons Micro 16x16)
+ * Usado como icono de ejemplo en los tabs
+ */
+export const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de inicio/home (Heroicons Micro 16x16)
+ */
+export const HomeIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M8.543 2.232a.75.75 0 0 0-1.085 0l-5.25 5.5A.75.75 0 0 0 2.75 9H4v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 1 1 2 0v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V9h1.25a.75.75 0 0 0 .543-1.268l-5.25-5.5Z"
+    />
+  </svg>
+);
+
+/**
+ * Icono de usuario (Heroicons Micro 16x16)
+ */
+export const UserIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
+    />
+  </svg>
+);
+
+/**
+ * Icono de configuración/engranaje (Heroicons Micro 16x16)
+ */
+export const CogIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M6.455 1.45A.5.5 0 0 1 6.952 1h2.096a.5.5 0 0 1 .497.45l.186 1.858a4.996 4.996 0 0 1 1.466.848l1.703-.769a.5.5 0 0 1 .639.206l1.047 1.814a.5.5 0 0 1-.14.656l-1.517 1.09a5.026 5.026 0 0 1 0 1.694l1.516 1.09a.5.5 0 0 1 .141.656l-1.047 1.814a.5.5 0 0 1-.639.206l-1.703-.768c-.433.36-.928.649-1.466.847l-.186 1.858a.5.5 0 0 1-.497.45H6.952a.5.5 0 0 1-.497-.45l-.186-1.858a4.993 4.993 0 0 1-1.466-.848l-1.703.769a.5.5 0 0 1-.639-.206l-1.047-1.814a.5.5 0 0 1 .14-.656l1.517-1.09a5.033 5.033 0 0 1 0-1.694l-1.516-1.09a.5.5 0 0 1-.141-.656L2.46 3.593a.5.5 0 0 1 .639-.206l1.703.769c.433-.36.928-.65 1.466-.848l.186-1.858ZM8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de campana/notificaciones (Heroicons Micro 16x16)
+ */
+export const BellIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.294.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-4 9a1 1 0 0 1-1-1h2a1 1 0 0 1-1 1Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de documento (Heroicons Micro 16x16)
+ */
+export const DocumentIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 2a1.5 1.5 0 0 0-1.5 1.5v9A1.5 1.5 0 0 0 4 14h8a1.5 1.5 0 0 0 1.5-1.5V6.621a1.5 1.5 0 0 0-.44-1.06L9.94 2.439A1.5 1.5 0 0 0 8.878 2H4Zm1 5.75A.75.75 0 0 1 5.75 7h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 5 7.75Zm0 3a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+/**
+ * Icono de gráfico/estadísticas (Heroicons Micro 16x16)
+ */
+export const ChartIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M13 6.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5ZM10 4a.5.5 0 0 1 .5.5v7.5a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 10 4ZM7 8a.5.5 0 0 1 .5.5V12a.5.5 0 0 1-1 0V8.5A.5.5 0 0 1 7 8ZM4 10.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0v-1a.5.5 0 0 1 .5-.5Z"
+    />
+  </svg>
+);

package/src/components/Tabs/index.ts

@@ -0,0 +1,11 @@
+export { Tabs, Tab } from './Tabs';
+export type { TabsProps, TabProps, TabItem } from './Tabs.types';
+export {
+  CheckIcon,
+  HomeIcon,
+  UserIcon,
+  CogIcon,
+  BellIcon,
+  DocumentIcon,
+  ChartIcon,
+} from './icons';