siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Pagination/Pagination.tsx

@@ -1,286 +1,286 @@
-import React, { useMemo } from 'react';
-import type { PaginationProps, PageButtonProps } from './Pagination.types';
-import { ArrowLeftIcon, ArrowRightIcon } from './icons';
-
-/**
- * Componente Pagination del sistema de diseño Siesa
- * Basado en especificaciones de Figma con Tailwind CSS
- *
- * 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
- * - Algoritmo de paginación inteligente
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Label Small)
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * <Pagination
- *   currentPage={1}
- *   totalPages={66}
- *   onPageChange={(page) => console.log(page)}
- * />
- * ```
- */
-export const Pagination: React.FC<PaginationProps> = ({
-  currentPage = 1,
-  totalPages,
-  onPageChange,
-  backText = 'Atrás',
-  nextText = 'Siguiente',
-  siblingCount = 1,
-  showBackButton = true,
-  showNextButton = true,
-  className = '',
-  ariaLabel = 'Paginación',
-}) => {
-  /**
-   * Genera el array de páginas a mostrar
-   * Algoritmo: [1] ... [currentPage-1] [currentPage] [currentPage+1] ... [totalPages]
-   */
-  const paginationRange = useMemo(() => {
-    const totalNumbers = siblingCount * 2 + 3; // Página actual + siblings + primera + última
-    const totalBlocks = totalNumbers + 2; // + 2 separadores "..."
-
-    // Si el total de páginas es menor que el total de bloques, mostrar todas
-    if (totalPages <= totalBlocks) {
-      return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-
-    const shouldShowLeftDots = leftSiblingIndex > 2;
-    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
-
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPages;
-
-    // No mostrar dots a la izquierda
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-      const leftItemCount = 3 + 2 * siblingCount;
-      const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
-      return [...leftRange, '...', totalPages];
-    }
-
-    // No mostrar dots a la derecha
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-      const rightItemCount = 3 + 2 * siblingCount;
-      const rightRange = Array.from(
-        { length: rightItemCount },
-        (_, i) => totalPages - rightItemCount + i + 1
-      );
-      return [firstPageIndex, '...', ...rightRange];
-    }
-
-    // Mostrar ambos dots
-    if (shouldShowLeftDots && shouldShowRightDots) {
-      const middleRange = Array.from(
-        { length: rightSiblingIndex - leftSiblingIndex + 1 },
-        (_, i) => leftSiblingIndex + i
-      );
-      return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];
-    }
-
-    return [];
-  }, [currentPage, totalPages, siblingCount]);
-
-  /**
-   * Handler para cambio de página
-   */
-  const handlePageChange = (page: number) => {
-    if (page >= 1 && page <= totalPages && page !== currentPage) {
-      onPageChange?.(page);
-    }
-  };
-
-  /**
-   * Componente interno: Botón de página
-   */
-  const PageButton: React.FC<PageButtonProps> = ({
-    page,
-    isActive = false,
-    disabled = false,
-    onClick,
-    ariaLabel: buttonAriaLabel,
-  }) => {
-    const isDots = page === '...';
-
-    // ===== CLASES BASE =====
-    const baseClasses = `
-      inline-flex
-      items-center
-      justify-center
-      gap-3
-      px-3
-      py-2
-      rounded-md
-      font-bold
-      text-sm
-      whitespace-nowrap
-      transition-all
-      duration-150
-    `;
-
-    // ===== CLASES DE ESTADO =====
-    const stateClasses = isDots
-      ? `
-          text-primary-custom-600
-          dark:text-primary-custom-600
-          cursor-default
-          pointer-events-none
-        `
-      : isActive
-      ? `
-          bg-primary-custom-100
-          text-primary-custom-600
-          dark:bg-primary-custom-100
-          dark:text-primary-custom-600
-        `
-      : `
-          text-primary-custom-600
-          hover:bg-primary-custom-100
-          active:scale-95
-          dark:text-primary-custom-600
-          dark:hover:bg-primary-custom-100
-          dark:active:scale-95
-        `;
-
-    // ===== CLASES DE DISABLED =====
-    const disabledClasses = disabled
-      ? `
-          opacity-50
-          cursor-not-allowed
-          pointer-events-none
-        `
-      : '';
-
-    // ===== COMBINAR CLASES =====
-    const buttonClasses = [baseClasses, stateClasses, disabledClasses]
-      .join(' ')
-      .replace(/\s+/g, ' ')
-      .trim();
-
-    return (
-      <button
-        type="button"
-        className={buttonClasses}
-        onClick={onClick}
-        disabled={disabled || isDots}
-        aria-label={buttonAriaLabel}
-        aria-current={isActive ? 'page' : undefined}
-      >
-        {page}
-      </button>
-    );
-  };
-
-  // ===== CLASES DEL CONTAINER =====
-  const containerClasses = `
-    inline-flex
-    items-center
-    justify-between
-    gap-0
-    ${className}
-  `
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <nav className={containerClasses} aria-label={ariaLabel} role="navigation">
-      {/* ===== BOTÓN BACK ===== */}
-      {showBackButton && (
-        <button
-          type="button"
-          className={`
-            inline-flex
-            items-center
-            justify-center
-            gap-3
-            px-3
-            py-2
-            rounded-md
-            font-bold
-            text-sm
-            text-primary-custom-600
-            hover:bg-primary-custom-100
-            active:scale-95
-            dark:text-primary-custom-600
-            dark:hover:bg-primary-custom-100
-            dark:active:scale-95
-            transition-all
-            duration-150
-            ${currentPage === 1 ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}
-          `
-            .replace(/\s+/g, ' ')
-            .trim()}
-          onClick={() => handlePageChange(currentPage - 1)}
-          disabled={currentPage === 1}
-          aria-label={`${backText} page`}
-        >
-          <ArrowLeftIcon className="w-4 h-4" />
-          {backText}
-        </button>
-      )}
-
-      {/* ===== NÚMEROS DE PÁGINA ===== */}
-      <div className="inline-flex items-center">
-        {paginationRange.map((page, index) => (
-          <PageButton
-            key={`${page}-${index}`}
-            page={page}
-            isActive={page === currentPage}
-            onClick={() => typeof page === 'number' && handlePageChange(page)}
-            ariaLabel={
-              typeof page === 'number' ? `Go to page ${page}` : `Page ${page}`
-            }
-          />
-        ))}
-      </div>
-
-      {/* ===== BOTÓN NEXT ===== */}
-      {showNextButton && (
-        <button
-          type="button"
-          className={`
-            inline-flex
-            items-center
-            justify-center
-            gap-3
-            px-3
-            py-2
-            rounded-md
-            font-bold
-            text-sm
-            text-primary-custom-600
-            hover:bg-primary-custom-100
-            active:scale-95
-            dark:text-primary-custom-600
-            dark:hover:bg-primary-custom-100
-            dark:active:scale-95
-            transition-all
-            duration-150
-            ${
-              currentPage === totalPages
-                ? 'opacity-50 cursor-not-allowed pointer-events-none'
-                : ''
-            }
-          `
-            .replace(/\s+/g, ' ')
-            .trim()}
-          onClick={() => handlePageChange(currentPage + 1)}
-          disabled={currentPage === totalPages}
-          aria-label={`${nextText} page`}
-        >
-          {nextText}
-          <ArrowRightIcon className="w-4 h-4" />
-        </button>
-      )}
-    </nav>
-  );
-};
+import React, { useMemo } from 'react';
+import type { PaginationProps, PageButtonProps } from './Pagination.types';
+import { ArrowLeftIcon, ArrowRightIcon } from './icons';
+
+/**
+ * Componente Pagination del sistema de diseño Siesa
+ * Basado en especificaciones de Figma con Tailwind CSS
+ *
+ * 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
+ * - Algoritmo de paginación inteligente
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label Small)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   currentPage={1}
+ *   totalPages={66}
+ *   onPageChange={(page) => console.log(page)}
+ * />
+ * ```
+ */
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage = 1,
+  totalPages,
+  onPageChange,
+  backText = 'Atrás',
+  nextText = 'Siguiente',
+  siblingCount = 1,
+  showBackButton = true,
+  showNextButton = true,
+  className = '',
+  ariaLabel = 'Paginación',
+}) => {
+  /**
+   * Genera el array de páginas a mostrar
+   * Algoritmo: [1] ... [currentPage-1] [currentPage] [currentPage+1] ... [totalPages]
+   */
+  const paginationRange = useMemo(() => {
+    const totalNumbers = siblingCount * 2 + 3; // Página actual + siblings + primera + última
+    const totalBlocks = totalNumbers + 2; // + 2 separadores "..."
+
+    // Si el total de páginas es menor que el total de bloques, mostrar todas
+    if (totalPages <= totalBlocks) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPages;
+
+    // No mostrar dots a la izquierda
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+      return [...leftRange, '...', totalPages];
+    }
+
+    // No mostrar dots a la derecha
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = Array.from(
+        { length: rightItemCount },
+        (_, i) => totalPages - rightItemCount + i + 1
+      );
+      return [firstPageIndex, '...', ...rightRange];
+    }
+
+    // Mostrar ambos dots
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = Array.from(
+        { length: rightSiblingIndex - leftSiblingIndex + 1 },
+        (_, i) => leftSiblingIndex + i
+      );
+      return [firstPageIndex, '...', ...middleRange, '...', lastPageIndex];
+    }
+
+    return [];
+  }, [currentPage, totalPages, siblingCount]);
+
+  /**
+   * Handler para cambio de página
+   */
+  const handlePageChange = (page: number) => {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      onPageChange?.(page);
+    }
+  };
+
+  /**
+   * Componente interno: Botón de página
+   */
+  const PageButton: React.FC<PageButtonProps> = ({
+    page,
+    isActive = false,
+    disabled = false,
+    onClick,
+    ariaLabel: buttonAriaLabel,
+  }) => {
+    const isDots = page === '...';
+
+    // ===== CLASES BASE =====
+    const baseClasses = `
+      inline-flex
+      items-center
+      justify-center
+      gap-3
+      px-3
+      py-2
+      rounded-md
+      font-bold
+      text-sm
+      whitespace-nowrap
+      transition-all
+      duration-150
+    `;
+
+    // ===== CLASES DE ESTADO =====
+    const stateClasses = isDots
+      ? `
+          text-primary-custom-600
+          dark:text-primary-custom-600
+          cursor-default
+          pointer-events-none
+        `
+      : isActive
+      ? `
+          bg-primary-custom-100
+          text-primary-custom-600
+          dark:bg-primary-custom-100
+          dark:text-primary-custom-600
+        `
+      : `
+          text-primary-custom-600
+          hover:bg-primary-custom-100
+          active:scale-95
+          dark:text-primary-custom-600
+          dark:hover:bg-primary-custom-100
+          dark:active:scale-95
+        `;
+
+    // ===== CLASES DE DISABLED =====
+    const disabledClasses = disabled
+      ? `
+          opacity-50
+          cursor-not-allowed
+          pointer-events-none
+        `
+      : '';
+
+    // ===== COMBINAR CLASES =====
+    const buttonClasses = [baseClasses, stateClasses, disabledClasses]
+      .join(' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+
+    return (
+      <button
+        type="button"
+        className={buttonClasses}
+        onClick={onClick}
+        disabled={disabled || isDots}
+        aria-label={buttonAriaLabel}
+        aria-current={isActive ? 'page' : undefined}
+      >
+        {page}
+      </button>
+    );
+  };
+
+  // ===== CLASES DEL CONTAINER =====
+  const containerClasses = `
+    inline-flex
+    items-center
+    justify-between
+    gap-0
+    ${className}
+  `
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <nav className={containerClasses} aria-label={ariaLabel} role="navigation">
+      {/* ===== BOTÓN BACK ===== */}
+      {showBackButton && (
+        <button
+          type="button"
+          className={`
+            inline-flex
+            items-center
+            justify-center
+            gap-3
+            px-3
+            py-2
+            rounded-md
+            font-bold
+            text-sm
+            text-primary-custom-600
+            hover:bg-primary-custom-100
+            active:scale-95
+            dark:text-primary-custom-600
+            dark:hover:bg-primary-custom-100
+            dark:active:scale-95
+            transition-all
+            duration-150
+            ${currentPage === 1 ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}
+          `
+            .replace(/\s+/g, ' ')
+            .trim()}
+          onClick={() => handlePageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          aria-label={`${backText} page`}
+        >
+          <ArrowLeftIcon className="w-4 h-4" />
+          {backText}
+        </button>
+      )}
+
+      {/* ===== NÚMEROS DE PÁGINA ===== */}
+      <div className="inline-flex items-center">
+        {paginationRange.map((page, index) => (
+          <PageButton
+            key={`${page}-${index}`}
+            page={page}
+            isActive={page === currentPage}
+            onClick={() => typeof page === 'number' && handlePageChange(page)}
+            ariaLabel={
+              typeof page === 'number' ? `Go to page ${page}` : `Page ${page}`
+            }
+          />
+        ))}
+      </div>
+
+      {/* ===== BOTÓN NEXT ===== */}
+      {showNextButton && (
+        <button
+          type="button"
+          className={`
+            inline-flex
+            items-center
+            justify-center
+            gap-3
+            px-3
+            py-2
+            rounded-md
+            font-bold
+            text-sm
+            text-primary-custom-600
+            hover:bg-primary-custom-100
+            active:scale-95
+            dark:text-primary-custom-600
+            dark:hover:bg-primary-custom-100
+            dark:active:scale-95
+            transition-all
+            duration-150
+            ${
+              currentPage === totalPages
+                ? 'opacity-50 cursor-not-allowed pointer-events-none'
+                : ''
+            }
+          `
+            .replace(/\s+/g, ' ')
+            .trim()}
+          onClick={() => handlePageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          aria-label={`${nextText} page`}
+        >
+          {nextText}
+          <ArrowRightIcon className="w-4 h-4" />
+        </button>
+      )}
+    </nav>
+  );
+};