siesa-ui-kit 1.0.4 → 1.0.6

package/src/components/Tabs/Tabs.tsx

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

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

@@ -1,127 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

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