siesa-ui-kit 1.0.4 → 1.0.5

package/src/components/Table/Table.tsx

@@ -1,688 +1,688 @@
-import React, { useState } from 'react';
-import type {
-  TableProps,
-  TableHeaderProps,
-  TableCellProps,
-  SortDirection,
-  PaginationProps,
-} from './Table.types';
-
-/**
- * Iconos para sort
- */
-const ChevronUpIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className="transition-transform"
-  >
-    <path
-      d="M12 10L8 6L4 10"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ChevronDownIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className="transition-transform"
-  >
-    <path
-      d="M4 6L8 10L12 6"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-/**
- * Iconos para paginación
- */
-const ArrowLeftIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M14 8H2M2 8L6.5 3.5M2 8L6.5 12.5"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ArrowRightIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M2 8H14M14 8L9.5 3.5M14 8L9.5 12.5"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-/**
- * TableHeader - Componente para el header de una columna
- */
-const TableHeader = <T,>({
-  column,
-  sortable,
-  sorted,
-  sortDirection,
-  onSort,
-}: TableHeaderProps<T>) => {
-  // Clases base del header
-  const baseClasses = `
-    flex
-    items-center
-    gap-3
-    px-6
-    py-2.5
-    min-h-[40px]
-    border-b
-    border-border-primary
-    dark:border-dark-border-primary
-    transition-colors
-    duration-150
-  `;
-
-  // Clases según sortable
-  const sortableClasses = sortable
-    ? `
-      cursor-pointer
-      hover:bg-background-secondary
-      dark:hover:bg-dark-bg-primary/50
-      select-none
-    `
-    : '';
-
-  // Clases de alineación
-  const alignClasses = {
-    left: 'justify-start',
-    center: 'justify-center',
-    right: 'justify-end',
-  };
-
-  const combinedClasses = [baseClasses, sortableClasses, alignClasses[column.align || 'left']]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <div
-      className={combinedClasses}
-      onClick={sortable ? onSort : undefined}
-      role={sortable ? 'button' : undefined}
-      tabIndex={sortable ? 0 : undefined}
-      onKeyDown={
-        sortable
-          ? (e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onSort();
-              }
-            }
-          : undefined
-      }
-      style={{ width: column.width }}
-    >
-      {/* Texto del header */}
-      <span
-        className="
-          text-sm
-          font-bold
-          text-content-secondary
-          dark:text-content-secondary
-          overflow-ellipsis
-          overflow-hidden
-          whitespace-nowrap
-        "
-      >
-        {column.header}
-      </span>
-
-      {/* Iconos de sort */}
-      {sortable && (
-        <span className="flex-shrink-0 text-content-secondary dark:text-content-secondary">
-          {sorted && sortDirection === 'asc' && <ChevronUpIcon />}
-          {sorted && sortDirection === 'desc' && <ChevronDownIcon />}
-          {!sorted && (
-            <div className="w-4 h-4" />
-          )}
-        </span>
-      )}
-    </div>
-  );
-};
-
-/**
- * TableCell - Componente para una celda de datos
- */
-const TableCell: React.FC<TableCellProps & { isStriped?: boolean; rowIndex?: number }> = ({
-  children,
-  align = 'left',
-  width,
-  isStriped = false,
-  rowIndex = 0,
-}) => {
-  // Clases de alineación
-  const alignClasses = {
-    left: 'justify-start text-left',
-    center: 'justify-center text-center',
-    right: 'justify-end text-right',
-  };
-
-  // Fondo zebra striping (filas pares tienen fondo)
-  const stripedBg = isStriped && rowIndex % 2 === 1
-    ? 'bg-background-secondary dark:bg-dark-bg-primary/30'
-    : '';
-
-  return (
-    <div
-      className={`
-        flex
-        flex-col
-        ${alignClasses[align]}
-        px-6
-        py-4
-        min-h-[56px]
-        border-b
-        border-border-secondary
-        dark:border-dark-border-primary
-        ${stripedBg}
-      `}
-      style={{ width }}
-    >
-      <span
-        className="
-          text-sm
-          text-content-primary
-          dark:text-dark-content-primary
-          overflow-ellipsis
-          overflow-hidden
-          w-full
-        "
-      >
-        {children}
-      </span>
-    </div>
-  );
-};
-
-
-/**
- * Pagination - Componente de paginación
- */
-const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  onPageChange,
-  previousLabel = 'Anterior',
-  nextLabel = 'Siguiente',
-}) => {
-  // Generar array de números de página para mostrar
-  const getPageNumbers = () => {
-    const pages: (number | string)[] = [];
-    const maxVisible = 7; // Máximo de botones visibles
-
-    if (totalPages <= maxVisible) {
-      // Si hay pocas páginas, mostrar todas
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      // Lógica para mostrar: 1 2 3 ... 65 66
-      pages.push(1);
-
-      if (currentPage <= 3) {
-        pages.push(2, 3);
-      } else if (currentPage >= totalPages - 2) {
-        pages.push('...');
-        pages.push(totalPages - 2, totalPages - 1);
-      } else {
-        pages.push('...');
-        pages.push(currentPage);
-        pages.push('...');
-      }
-
-      if (totalPages > 1) {
-        pages.push(totalPages);
-      }
-    }
-
-    return pages;
-  };
-
-  const pageNumbers = getPageNumbers();
-
-  return (
-    <div className="flex items-center justify-between w-full h-9">
-      {/* Botón Anterior */}
-      <button
-        onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        className="
-          flex
-          items-center
-          gap-3
-          px-3
-          py-2
-          rounded-md
-          text-sm
-          font-bold
-          text-primary-custom-600
-          dark:text-primary-custom-600
-          hover:bg-blue-50
-          dark:hover:bg-blue-900/20
-          disabled:opacity-50
-          disabled:cursor-not-allowed
-          transition-colors
-          duration-150
-        "
-      >
-        <ArrowLeftIcon />
-        <span>{previousLabel}</span>
-      </button>
-
-      {/* Números de página */}
-      <div className="flex items-center gap-0">
-        {pageNumbers.map((page, index) => {
-          if (page === '...') {
-            return (
-              <div
-                key={`ellipsis-${index}`}
-                className="
-                  flex
-                  items-center
-                  justify-center
-                  px-3
-                  py-2
-                  text-sm
-                  font-bold
-                  text-primary-custom-600
-                  dark:text-primary-custom-600
-                "
-              >
-                {page}
-              </div>
-            );
-          }
-
-          const isActive = page === currentPage;
-
-          return (
-            <button
-              key={page}
-              onClick={() => onPageChange(page as number)}
-              className={`
-                flex
-                items-center
-                justify-center
-                px-3
-                py-2
-                rounded-md
-                text-sm
-                font-bold
-                text-primary-custom-600
-                dark:text-primary-custom-600
-                transition-colors
-                duration-150
-                ${
-                  isActive
-                    ? 'bg-blue-100 dark:bg-blue-900/30'
-                    : 'hover:bg-blue-50 dark:hover:bg-blue-900/20'
-                }
-              `}
-            >
-              {page}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Botón Siguiente */}
-      <button
-        onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        className="
-          flex
-          items-center
-          gap-3
-          px-3
-          py-2
-          rounded-md
-          text-sm
-          font-bold
-          text-primary-custom-600
-          dark:text-primary-custom-600
-          hover:bg-blue-50
-          dark:hover:bg-blue-900/20
-          disabled:opacity-50
-          disabled:cursor-not-allowed
-          transition-colors
-          duration-150
-        "
-      >
-        <span>{nextLabel}</span>
-        <ArrowRightIcon />
-      </button>
-    </div>
-  );
-};
-
-/**
- * Table - Componente principal de tabla
- *
- * Características implementadas:
- * - Definición de columnas flexible con accessor y render custom
- * - Sorting en columnas (controlado o no controlado)
- * - Variantes: basic, fullWidth, striped, grid
- * - Dark mode completo en todos los estados
- * - Estados de loading y empty
- * - Filas clickeables
- * - Accesibilidad con roles y keyboard navigation
- *
- * 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 y generics
- * - Accesibilidad con ARIA labels y keyboard support
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Label/Small para headers, Paragraph/Small para cells)
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- *
- * @example
- * ```tsx
- * // Uso básico
- * <Table
- *   title="Usuarios"
- *   columns={[
- *     { header: 'Nombre', accessor: 'name' },
- *     { header: 'Email', accessor: 'email' },
- *     { header: 'Rol', accessor: 'role', sortable: true },
- *   ]}
- *   data={users}
- * />
- *
- * // Con render custom
- * <Table
- *   columns={[
- *     {
- *       header: 'Estado',
- *       accessor: 'status',
- *       render: (value) => (
- *         <Badge color={value === 'active' ? 'green' : 'red'}>
- *           {value}
- *         </Badge>
- *       ),
- *     },
- *   ]}
- *   data={data}
- * />
- *
- * // Variante striped
- * <Table
- *   variant="striped"
- *   columns={columns}
- *   data={data}
- * />
- * ```
- */
-export const Table = <T extends Record<string, any>>({
-  title,
-  columns,
-  data,
-  variant = 'basic',
-  showBorder = true,
-  showShadow = true,
-  // onRowClick, // TODO: Implement row click functionality
-  onSort,
-  sortColumn: externalSortColumn,
-  sortDirection: externalSortDirection,
-  fullWidth = false,
-  emptyMessage = 'No hay datos disponibles',
-  loading = false,
-  loadingRows = 5,
-  pagination,
-  className = '',
-  id,
-}: TableProps<T>) => {
-  // ===== ESTADO INTERNO DE SORT =====
-  const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);
-  const [internalSortDirection, setInternalSortDirection] = useState<SortDirection>(null);
-
-  // Usar sort externo si está controlado, sino usar interno
-  const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
-  const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
-
-  // ===== MANEJAR SORT =====
-  const handleSort = (columnAccessor: keyof T | string) => {
-    let newDirection: SortDirection = 'asc';
-
-    // Si ya está ordenado por esta columna, cambiar dirección
-    if (sortColumn === columnAccessor) {
-      if (sortDirection === 'asc') {
-        newDirection = 'desc';
-      } else if (sortDirection === 'desc') {
-        newDirection = null;
-      }
-    }
-
-    // Si sort es controlado, llamar callback
-    if (onSort) {
-      onSort(columnAccessor, newDirection);
-    } else {
-      // Sino, actualizar estado interno
-      setInternalSortColumn(newDirection ? columnAccessor : null);
-      setInternalSortDirection(newDirection);
-    }
-  };
-
-  // ===== OBTENER VALOR DE CELDA =====
-  const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {
-    if (typeof accessor === 'function') {
-      return accessor(row);
-    }
-    return row[accessor];
-  };
-
-  // ===== CLASES DEL CONTAINER =====
-  const containerBaseClasses = `
-    flex
-    flex-col
-    gap-4
-    bg-white
-    dark:bg-dark-bg-primary
-    rounded-xl
-    transition-all
-    duration-150
-  `;
-
-  const containerBorderClasses = showBorder
-    ? 'border border-border-primary dark:border-dark-border-primary'
-    : '';
-
-  const containerShadowClasses = showShadow ? 'shadow-base' : '';
-
-  const containerPaddingClasses = 'p-8';
-
-  const containerWidthClasses = fullWidth || variant === 'fullWidth' ? 'w-full' : '';
-
-  const containerClasses = [
-    containerBaseClasses,
-    containerBorderClasses,
-    containerShadowClasses,
-    containerPaddingClasses,
-    containerWidthClasses,
-    className,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES DE LA TABLA =====
-  const tableGridClasses = variant === 'grid'
-    ? `
-      border
-      border-border-primary
-      dark:border-dark-border-primary
-      rounded-lg
-      overflow-hidden
-    `
-    : '';
-
-  // ===== RENDER =====
-  return (
-    <div className={containerClasses} id={id}>
-      {/* Título opcional */}
-      {title && (
-        <div className="flex items-center justify-center w-full">
-          <h3
-            className="
-              text-base
-              font-bold
-              text-content-primary
-              dark:text-dark-content-primary
-              overflow-ellipsis
-              overflow-hidden
-              whitespace-nowrap
-            "
-          >
-            {title}
-          </h3>
-        </div>
-      )}
-
-      {/* Tabla */}
-      <div className={`flex w-full overflow-x-auto ${tableGridClasses}`}>
-        {/* Columnas */}
-        {columns.map((column, colIndex) => {
-          const accessor = typeof column.accessor === 'function'
-            ? `column_${colIndex}`
-            : String(column.accessor);
-
-          return (
-            <div key={accessor} className="flex flex-col flex-1 min-w-0">
-              {/* Header de la columna */}
-              <TableHeader
-                column={column}
-                sortable={column.sortable || false}
-                sorted={sortColumn === accessor}
-                sortDirection={sortColumn === accessor ? sortDirection : null}
-                onSort={() => handleSort(accessor)}
-              />
-
-              {/* Loading skeleton */}
-              {loading && (
-                <>
-                  {Array.from({ length: loadingRows }).map((_, rowIndex) => (
-                    <TableCell
-                      key={`loading-${rowIndex}`}
-                      align={column.align}
-                      width={column.width}
-                      isStriped={variant === 'striped'}
-                      rowIndex={rowIndex}
-                    >
-                      <div
-                        className="
-                          h-4
-                          bg-background-secondary
-                          dark:bg-dark-border-primary
-                          rounded
-                          animate-pulse
-                        "
-                      />
-                    </TableCell>
-                  ))}
-                </>
-              )}
-
-              {/* Datos reales */}
-              {!loading && data.length > 0 && (
-                <>
-                  {data.map((row, rowIndex) => {
-                    const value = getCellValue(row, column.accessor);
-                    const content = column.render
-                      ? column.render(value, row, rowIndex)
-                      : value;
-
-                    return (
-                      <TableCell
-                        key={rowIndex}
-                        align={column.align}
-                        width={column.width}
-                        isStriped={variant === 'striped'}
-                        rowIndex={rowIndex}
-                      >
-                        {content}
-                      </TableCell>
-                    );
-                  })}
-                </>
-              )}
-
-              {/* Estado empty */}
-              {!loading && data.length === 0 && colIndex === 0 && (
-                <div
-                  className="
-                    flex
-                    items-center
-                    justify-center
-                    px-6
-                    py-12
-                    text-sm
-                    text-content-secondary
-                    dark:text-content-secondary
-                  "
-                  style={{ gridColumn: `1 / ${columns.length + 1}` }}
-                >
-                  {emptyMessage}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Paginación */}
-      {pagination && (
-        <Pagination
-          currentPage={pagination.currentPage}
-          totalPages={pagination.totalPages}
-          onPageChange={pagination.onPageChange}
-          previousLabel={pagination.previousLabel}
-          nextLabel={pagination.nextLabel}
-        />
-      )}
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import type {
+  TableProps,
+  TableHeaderProps,
+  TableCellProps,
+  SortDirection,
+  PaginationProps,
+} from './Table.types';
+
+/**
+ * Iconos para sort
+ */
+const ChevronUpIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="transition-transform"
+  >
+    <path
+      d="M12 10L8 6L4 10"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className="transition-transform"
+  >
+    <path
+      d="M4 6L8 10L12 6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+/**
+ * Iconos para paginación
+ */
+const ArrowLeftIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 8H2M2 8L6.5 3.5M2 8L6.5 12.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const ArrowRightIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 8H14M14 8L9.5 3.5M14 8L9.5 12.5"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+/**
+ * TableHeader - Componente para el header de una columna
+ */
+const TableHeader = <T,>({
+  column,
+  sortable,
+  sorted,
+  sortDirection,
+  onSort,
+}: TableHeaderProps<T>) => {
+  // Clases base del header
+  const baseClasses = `
+    flex
+    items-center
+    gap-3
+    px-6
+    py-2.5
+    min-h-[40px]
+    border-b
+    border-border-primary
+    dark:border-dark-border-primary
+    transition-colors
+    duration-150
+  `;
+
+  // Clases según sortable
+  const sortableClasses = sortable
+    ? `
+      cursor-pointer
+      hover:bg-background-secondary
+      dark:hover:bg-dark-bg-primary/50
+      select-none
+    `
+    : '';
+
+  // Clases de alineación
+  const alignClasses = {
+    left: 'justify-start',
+    center: 'justify-center',
+    right: 'justify-end',
+  };
+
+  const combinedClasses = [baseClasses, sortableClasses, alignClasses[column.align || 'left']]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <div
+      className={combinedClasses}
+      onClick={sortable ? onSort : undefined}
+      role={sortable ? 'button' : undefined}
+      tabIndex={sortable ? 0 : undefined}
+      onKeyDown={
+        sortable
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onSort();
+              }
+            }
+          : undefined
+      }
+      style={{ width: column.width }}
+    >
+      {/* Texto del header */}
+      <span
+        className="
+          text-sm
+          font-bold
+          text-content-secondary
+          dark:text-content-secondary
+          overflow-ellipsis
+          overflow-hidden
+          whitespace-nowrap
+        "
+      >
+        {column.header}
+      </span>
+
+      {/* Iconos de sort */}
+      {sortable && (
+        <span className="flex-shrink-0 text-content-secondary dark:text-content-secondary">
+          {sorted && sortDirection === 'asc' && <ChevronUpIcon />}
+          {sorted && sortDirection === 'desc' && <ChevronDownIcon />}
+          {!sorted && (
+            <div className="w-4 h-4" />
+          )}
+        </span>
+      )}
+    </div>
+  );
+};
+
+/**
+ * TableCell - Componente para una celda de datos
+ */
+const TableCell: React.FC<TableCellProps & { isStriped?: boolean; rowIndex?: number }> = ({
+  children,
+  align = 'left',
+  width,
+  isStriped = false,
+  rowIndex = 0,
+}) => {
+  // Clases de alineación
+  const alignClasses = {
+    left: 'justify-start text-left',
+    center: 'justify-center text-center',
+    right: 'justify-end text-right',
+  };
+
+  // Fondo zebra striping (filas pares tienen fondo)
+  const stripedBg = isStriped && rowIndex % 2 === 1
+    ? 'bg-background-secondary dark:bg-dark-bg-primary/30'
+    : '';
+
+  return (
+    <div
+      className={`
+        flex
+        flex-col
+        ${alignClasses[align]}
+        px-6
+        py-4
+        min-h-[56px]
+        border-b
+        border-border-secondary
+        dark:border-dark-border-primary
+        ${stripedBg}
+      `}
+      style={{ width }}
+    >
+      <span
+        className="
+          text-sm
+          text-content-primary
+          dark:text-dark-content-primary
+          overflow-ellipsis
+          overflow-hidden
+          w-full
+        "
+      >
+        {children}
+      </span>
+    </div>
+  );
+};
+
+
+/**
+ * Pagination - Componente de paginación
+ */
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  previousLabel = 'Anterior',
+  nextLabel = 'Siguiente',
+}) => {
+  // Generar array de números de página para mostrar
+  const getPageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const maxVisible = 7; // Máximo de botones visibles
+
+    if (totalPages <= maxVisible) {
+      // Si hay pocas páginas, mostrar todas
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Lógica para mostrar: 1 2 3 ... 65 66
+      pages.push(1);
+
+      if (currentPage <= 3) {
+        pages.push(2, 3);
+      } else if (currentPage >= totalPages - 2) {
+        pages.push('...');
+        pages.push(totalPages - 2, totalPages - 1);
+      } else {
+        pages.push('...');
+        pages.push(currentPage);
+        pages.push('...');
+      }
+
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  return (
+    <div className="flex items-center justify-between w-full h-9">
+      {/* Botón Anterior */}
+      <button
+        onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        className="
+          flex
+          items-center
+          gap-3
+          px-3
+          py-2
+          rounded-md
+          text-sm
+          font-bold
+          text-primary-custom-600
+          dark:text-primary-custom-600
+          hover:bg-blue-50
+          dark:hover:bg-blue-900/20
+          disabled:opacity-50
+          disabled:cursor-not-allowed
+          transition-colors
+          duration-150
+        "
+      >
+        <ArrowLeftIcon />
+        <span>{previousLabel}</span>
+      </button>
+
+      {/* Números de página */}
+      <div className="flex items-center gap-0">
+        {pageNumbers.map((page, index) => {
+          if (page === '...') {
+            return (
+              <div
+                key={`ellipsis-${index}`}
+                className="
+                  flex
+                  items-center
+                  justify-center
+                  px-3
+                  py-2
+                  text-sm
+                  font-bold
+                  text-primary-custom-600
+                  dark:text-primary-custom-600
+                "
+              >
+                {page}
+              </div>
+            );
+          }
+
+          const isActive = page === currentPage;
+
+          return (
+            <button
+              key={page}
+              onClick={() => onPageChange(page as number)}
+              className={`
+                flex
+                items-center
+                justify-center
+                px-3
+                py-2
+                rounded-md
+                text-sm
+                font-bold
+                text-primary-custom-600
+                dark:text-primary-custom-600
+                transition-colors
+                duration-150
+                ${
+                  isActive
+                    ? 'bg-blue-100 dark:bg-blue-900/30'
+                    : 'hover:bg-blue-50 dark:hover:bg-blue-900/20'
+                }
+              `}
+            >
+              {page}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Botón Siguiente */}
+      <button
+        onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        className="
+          flex
+          items-center
+          gap-3
+          px-3
+          py-2
+          rounded-md
+          text-sm
+          font-bold
+          text-primary-custom-600
+          dark:text-primary-custom-600
+          hover:bg-blue-50
+          dark:hover:bg-blue-900/20
+          disabled:opacity-50
+          disabled:cursor-not-allowed
+          transition-colors
+          duration-150
+        "
+      >
+        <span>{nextLabel}</span>
+        <ArrowRightIcon />
+      </button>
+    </div>
+  );
+};
+
+/**
+ * Table - Componente principal de tabla
+ *
+ * Características implementadas:
+ * - Definición de columnas flexible con accessor y render custom
+ * - Sorting en columnas (controlado o no controlado)
+ * - Variantes: basic, fullWidth, striped, grid
+ * - Dark mode completo en todos los estados
+ * - Estados de loading y empty
+ * - Filas clickeables
+ * - Accesibilidad con roles y keyboard navigation
+ *
+ * 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 y generics
+ * - Accesibilidad con ARIA labels y keyboard support
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label/Small para headers, Paragraph/Small para cells)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ *
+ * @example
+ * ```tsx
+ * // Uso básico
+ * <Table
+ *   title="Usuarios"
+ *   columns={[
+ *     { header: 'Nombre', accessor: 'name' },
+ *     { header: 'Email', accessor: 'email' },
+ *     { header: 'Rol', accessor: 'role', sortable: true },
+ *   ]}
+ *   data={users}
+ * />
+ *
+ * // Con render custom
+ * <Table
+ *   columns={[
+ *     {
+ *       header: 'Estado',
+ *       accessor: 'status',
+ *       render: (value) => (
+ *         <Badge color={value === 'active' ? 'green' : 'red'}>
+ *           {value}
+ *         </Badge>
+ *       ),
+ *     },
+ *   ]}
+ *   data={data}
+ * />
+ *
+ * // Variante striped
+ * <Table
+ *   variant="striped"
+ *   columns={columns}
+ *   data={data}
+ * />
+ * ```
+ */
+export const Table = <T extends Record<string, any>>({
+  title,
+  columns,
+  data,
+  variant = 'basic',
+  showBorder = true,
+  showShadow = true,
+  // onRowClick, // TODO: Implement row click functionality
+  onSort,
+  sortColumn: externalSortColumn,
+  sortDirection: externalSortDirection,
+  fullWidth = false,
+  emptyMessage = 'No hay datos disponibles',
+  loading = false,
+  loadingRows = 5,
+  pagination,
+  className = '',
+  id,
+}: TableProps<T>) => {
+  // ===== ESTADO INTERNO DE SORT =====
+  const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);
+  const [internalSortDirection, setInternalSortDirection] = useState<SortDirection>(null);
+
+  // Usar sort externo si está controlado, sino usar interno
+  const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
+  const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
+
+  // ===== MANEJAR SORT =====
+  const handleSort = (columnAccessor: keyof T | string) => {
+    let newDirection: SortDirection = 'asc';
+
+    // Si ya está ordenado por esta columna, cambiar dirección
+    if (sortColumn === columnAccessor) {
+      if (sortDirection === 'asc') {
+        newDirection = 'desc';
+      } else if (sortDirection === 'desc') {
+        newDirection = null;
+      }
+    }
+
+    // Si sort es controlado, llamar callback
+    if (onSort) {
+      onSort(columnAccessor, newDirection);
+    } else {
+      // Sino, actualizar estado interno
+      setInternalSortColumn(newDirection ? columnAccessor : null);
+      setInternalSortDirection(newDirection);
+    }
+  };
+
+  // ===== OBTENER VALOR DE CELDA =====
+  const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {
+    if (typeof accessor === 'function') {
+      return accessor(row);
+    }
+    return row[accessor];
+  };
+
+  // ===== CLASES DEL CONTAINER =====
+  const containerBaseClasses = `
+    flex
+    flex-col
+    gap-4
+    bg-white
+    dark:bg-dark-bg-primary
+    rounded-xl
+    transition-all
+    duration-150
+  `;
+
+  const containerBorderClasses = showBorder
+    ? 'border border-border-primary dark:border-dark-border-primary'
+    : '';
+
+  const containerShadowClasses = showShadow ? 'shadow-base' : '';
+
+  const containerPaddingClasses = 'p-8';
+
+  const containerWidthClasses = fullWidth || variant === 'fullWidth' ? 'w-full' : '';
+
+  const containerClasses = [
+    containerBaseClasses,
+    containerBorderClasses,
+    containerShadowClasses,
+    containerPaddingClasses,
+    containerWidthClasses,
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== CLASES DE LA TABLA =====
+  const tableGridClasses = variant === 'grid'
+    ? `
+      border
+      border-border-primary
+      dark:border-dark-border-primary
+      rounded-lg
+      overflow-hidden
+    `
+    : '';
+
+  // ===== RENDER =====
+  return (
+    <div className={containerClasses} id={id}>
+      {/* Título opcional */}
+      {title && (
+        <div className="flex items-center justify-center w-full">
+          <h3
+            className="
+              text-base
+              font-bold
+              text-content-primary
+              dark:text-dark-content-primary
+              overflow-ellipsis
+              overflow-hidden
+              whitespace-nowrap
+            "
+          >
+            {title}
+          </h3>
+        </div>
+      )}
+
+      {/* Tabla */}
+      <div className={`flex w-full overflow-x-auto ${tableGridClasses}`}>
+        {/* Columnas */}
+        {columns.map((column, colIndex) => {
+          const accessor = typeof column.accessor === 'function'
+            ? `column_${colIndex}`
+            : String(column.accessor);
+
+          return (
+            <div key={accessor} className="flex flex-col flex-1 min-w-0">
+              {/* Header de la columna */}
+              <TableHeader
+                column={column}
+                sortable={column.sortable || false}
+                sorted={sortColumn === accessor}
+                sortDirection={sortColumn === accessor ? sortDirection : null}
+                onSort={() => handleSort(accessor)}
+              />
+
+              {/* Loading skeleton */}
+              {loading && (
+                <>
+                  {Array.from({ length: loadingRows }).map((_, rowIndex) => (
+                    <TableCell
+                      key={`loading-${rowIndex}`}
+                      align={column.align}
+                      width={column.width}
+                      isStriped={variant === 'striped'}
+                      rowIndex={rowIndex}
+                    >
+                      <div
+                        className="
+                          h-4
+                          bg-background-secondary
+                          dark:bg-dark-border-primary
+                          rounded
+                          animate-pulse
+                        "
+                      />
+                    </TableCell>
+                  ))}
+                </>
+              )}
+
+              {/* Datos reales */}
+              {!loading && data.length > 0 && (
+                <>
+                  {data.map((row, rowIndex) => {
+                    const value = getCellValue(row, column.accessor);
+                    const content = column.render
+                      ? column.render(value, row, rowIndex)
+                      : value;
+
+                    return (
+                      <TableCell
+                        key={rowIndex}
+                        align={column.align}
+                        width={column.width}
+                        isStriped={variant === 'striped'}
+                        rowIndex={rowIndex}
+                      >
+                        {content}
+                      </TableCell>
+                    );
+                  })}
+                </>
+              )}
+
+              {/* Estado empty */}
+              {!loading && data.length === 0 && colIndex === 0 && (
+                <div
+                  className="
+                    flex
+                    items-center
+                    justify-center
+                    px-6
+                    py-12
+                    text-sm
+                    text-content-secondary
+                    dark:text-content-secondary
+                  "
+                  style={{ gridColumn: `1 / ${columns.length + 1}` }}
+                >
+                  {emptyMessage}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Paginación */}
+      {pagination && (
+        <Pagination
+          currentPage={pagination.currentPage}
+          totalPages={pagination.totalPages}
+          onPageChange={pagination.onPageChange}
+          previousLabel={pagination.previousLabel}
+          nextLabel={pagination.nextLabel}
+        />
+      )}
+    </div>
+  );
+};