siesa-ui-kit 1.0.0 → 1.0.2

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,555 +1,555 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Pagination } from './Pagination';
-import { useState } from 'react';
-
-const meta = {
-  title: 'Siesa UI Kit/Pagination',
-  component: Pagination,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-El componente **Pagination** permite navegar entre múltiples páginas de contenido de manera intuitiva y accesible.
-        `,
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    currentPage: {
-      control: 'number',
-      description: 'Página actual (basada en 1)',
-      table: {
-        defaultValue: { summary: '1' },
-      },
-    },
-    totalPages: {
-      control: 'number',
-      description: 'Número total de páginas',
-    },
-    onPageChange: {
-      action: 'page-changed',
-      description: 'Callback cuando cambia la página',
-    },
-    backText: {
-      control: 'text',
-      description: 'Texto del botón "Atrás"',
-      table: {
-        defaultValue: { summary: 'Atrás' },
-      },
-    },
-    nextText: {
-      control: 'text',
-      description: 'Texto del botón "Siguiente"',
-      table: {
-        defaultValue: { summary: 'Siguiente' },
-      },
-    },
-    siblingCount: {
-      control: 'number',
-      description: 'Número de páginas visibles alrededor de la actual',
-      table: {
-        defaultValue: { summary: '1' },
-      },
-    },
-    showBackButton: {
-      control: 'boolean',
-      description: 'Si se muestra el botón "Atrás"',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-    showNextButton: {
-      control: 'boolean',
-      description: 'Si se muestra el botón "Siguiente"',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-  },
-} satisfies Meta<typeof Pagination>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  name: 'Playground',
-  args: {
-    currentPage: 1,
-    totalPages: 66,
-    backText: 'Atrás',
-    nextText: 'Siguiente',
-    siblingCount: 1,
-    showBackButton: true,
-    showNextButton: true,
-  },
-};
-
-// ============================================
-// 2. INTERACTIVE DEMO (CON ESTADO)
-// ============================================
-export const DemoInteractivo: Story = {
-  name: 'Demo Interactivo',
-  args: { totalPages: 66 },
-  render: () => {
-    const [currentPage, setCurrentPage] = useState(1);
-    const totalPages = 66;
-
-    return (
-      <div className="space-y-8 p-6">
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Demo Interactivo
-          </h3>
-          <Pagination
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={(page) => setCurrentPage(page)}
-          />
-          <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
-            Página actual: <strong>{currentPage}</strong> de <strong>{totalPages}</strong>
-          </p>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 3. DIFERENTES ESTADOS
-// ============================================
-export const DiferentesEstados: Story = {
-  name: 'Diferentes Estados',
-  args: { totalPages: 66 },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Primera página (Atrás deshabilitado) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Primera Página (Atrás deshabilitado)
-        </h3>
-        <Pagination currentPage={1} totalPages={66} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          El botón "Atrás" está deshabilitado en la primera página
-        </p>
-      </div>
-
-      {/* Página intermedia */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Página Intermedia
-        </h3>
-        <Pagination currentPage={5} totalPages={66} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Ambos botones activos, con puntos suspensivos en ambos lados
-        </p>
-      </div>
-
-      {/* Última página (Siguiente deshabilitado) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Última Página (Siguiente deshabilitado)
-        </h3>
-        <Pagination currentPage={66} totalPages={66} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          El botón "Siguiente" está deshabilitado en la última página
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. DIFERENTES CANTIDADES DE PÁGINAS
-// ============================================
-export const DiferentesConteosDePaginas: Story = {
-  name: 'Diferentes Cantidades de Páginas',
-  args: { totalPages: 100 },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Pocas páginas (sin puntos suspensivos) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Pocas Páginas (5 páginas)
-        </h3>
-        <Pagination currentPage={3} totalPages={5} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Se muestran todas las páginas sin separadores
-        </p>
-      </div>
-
-      {/* Páginas medias */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Páginas Medias (20 páginas)
-        </h3>
-        <Pagination currentPage={10} totalPages={20} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Separadores en ambos lados
-        </p>
-      </div>
-
-      {/* Muchas páginas */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Muchas Páginas (100 páginas)
-        </h3>
-        <Pagination currentPage={50} totalPages={100} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Algoritmo inteligente para mostrar páginas relevantes
-        </p>
-      </div>
-
-      {/* Solo 1 página */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Una Sola Página
-        </h3>
-        <Pagination currentPage={1} totalPages={1} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Ambos botones deshabilitados cuando solo hay una página
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. SIBLING COUNT
-// ============================================
-export const PaginasAdyacentes: Story = {
-  name: 'Páginas Adyacentes (siblingCount)',
-  args: { totalPages: 66 },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* siblingCount = 0 */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          siblingCount = 0
-        </h3>
-        <Pagination currentPage={10} totalPages={66} siblingCount={0} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Solo muestra la página actual (más compacto)
-        </p>
-      </div>
-
-      {/* siblingCount = 1 (predeterminado) */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          siblingCount = 1 (predeterminado)
-        </h3>
-        <Pagination currentPage={10} totalPages={66} siblingCount={1} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Muestra la página actual + 1 a cada lado
-        </p>
-      </div>
-
-      {/* siblingCount = 2 */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          siblingCount = 2
-        </h3>
-        <Pagination currentPage={10} totalPages={66} siblingCount={2} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Muestra la página actual + 2 a cada lado (más páginas visibles)
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. TEXTOS PERSONALIZADOS
-// ============================================
-export const TextosPersonalizados: Story = {
-  name: 'Textos Personalizados',
-  args: { totalPages: 66 },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Español */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Español (Predeterminado)
-        </h3>
-        <Pagination
-          currentPage={5}
-          totalPages={66}
-          backText="Atrás"
-          nextText="Siguiente"
-        />
-      </div>
-
-      {/* Inglés */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Inglés
-        </h3>
-        <Pagination currentPage={5} totalPages={66} backText="Back" nextText="Next" />
-      </div>
-
-      {/* Portugués */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Portugués
-        </h3>
-        <Pagination
-          currentPage={5}
-          totalPages={66}
-          backText="Voltar"
-          nextText="Próxima"
-        />
-      </div>
-
-      {/* Francés */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Francés
-        </h3>
-        <Pagination
-          currentPage={5}
-          totalPages={66}
-          backText="Précédent"
-          nextText="Suivant"
-        />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 7. SIN BOTONES ATRÁS/SIGUIENTE
-// ============================================
-export const SinBotonesAtrasAdelante: Story = {
-  name: 'Sin Botones Atrás/Siguiente',
-  args: { totalPages: 66 },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Sin botón Atrás */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Sin Botón "Atrás"
-        </h3>
-        <Pagination currentPage={5} totalPages={66} showBackButton={false} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Solo se muestran los números y el botón "Siguiente"
-        </p>
-      </div>
-
-      {/* Sin botón Siguiente */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Sin Botón "Siguiente"
-        </h3>
-        <Pagination currentPage={5} totalPages={66} showNextButton={false} backText="Atrás" nextText="Siguiente" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Solo se muestran el botón "Atrás" y los números
-        </p>
-      </div>
-
-      {/* Solo números */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Solo Números
-        </h3>
-        <Pagination
-          currentPage={5}
-          totalPages={66}
-          showBackButton={false}
-          showNextButton={false}
-          backText="Atrás"
-          nextText="Siguiente"
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Solo los números de página (más minimalista)
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 8. USO CON TABLA
-// ============================================
-export const WithTable: Story = {
-  name: 'Uso con Tabla',
-  args: { totalPages: 16 },
-  render: () => {
-    const [currentPage, setCurrentPage] = useState(1);
-    const itemsPerPage = 10;
-    const totalItems = 156;
-    const totalPages = Math.ceil(totalItems / itemsPerPage);
-
-    const startItem = (currentPage - 1) * itemsPerPage + 1;
-    const endItem = Math.min(currentPage * itemsPerPage, totalItems);
-
-    return (
-      <div className="space-y-6 p-6 max-w-4xl">
-        <div>
-          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-            Tabla con Paginación
-          </h3>
-
-          {/* Tabla simple */}
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-            <table className="w-full">
-              <thead className="bg-gray-50 dark:bg-gray-800">
-                <tr>
-                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
-                    ID
-                  </th>
-                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
-                    Nombre
-                  </th>
-                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
-                    Email
-                  </th>
-                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
-                    Estado
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-                {Array.from({ length: itemsPerPage }, (_, i) => {
-                  const itemId = startItem + i;
-                  if (itemId > totalItems) return null;
-                  return (
-                    <tr key={itemId} className="hover:bg-gray-50 dark:hover:bg-gray-800">
-                      <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
-                        #{itemId}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
-                        Usuario {itemId}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
-                        user{itemId}@example.com
-                      </td>
-                      <td className="px-4 py-3 text-sm">
-                        <span className="px-2 py-1 text-xs font-bold rounded bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
-                          Activo
-                        </span>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-
-          {/* Info y paginación */}
-          <div className="flex items-center justify-between mt-4">
-            <p className="text-xs text-gray-500 dark:text-gray-300">
-              Mostrando <strong>{startItem}</strong> a <strong>{endItem}</strong> de{' '}
-              <strong>{totalItems}</strong> resultados
-            </p>
-            <Pagination
-              currentPage={currentPage}
-              totalPages={totalPages}
-              onPageChange={setCurrentPage}
-              backText="Atrás"
-              nextText="Siguiente"
-            />
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 9. CONSEJOS Y TIPS
-// ============================================
-export const Tips: Story = {
-  name: 'Consejos y Buenas Prácticas',
-  args: { totalPages: 1 },
-  render: () => (
-    <div className="space-y-6 p-6 max-w-2xl">
-      <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
-          💡 Consejos de Uso
-        </h4>
-        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
-          <li>
-            • <strong>currentPage</strong> está basado en 1 (no en 0). La primera página
-            es 1, no 0.
-          </li>
-          <li>
-            • Usa <code className="px-1 bg-white dark:bg-gray-700">siblingCount=1</code>{' '}
-            para dispositivos móviles (más compacto).
-          </li>
-          <li>
-            • Usa <code className="px-1 bg-white dark:bg-gray-700">siblingCount=2</code>{' '}
-            para desktop (más páginas visibles).
-          </li>
-          <li>
-            • El algoritmo muestra siempre la primera y última página para facilitar la
-            navegación.
-          </li>
-          <li>
-            • Los separadores "..." indican que hay páginas ocultas entre los números
-            visibles.
-          </li>
-          <li>
-            • Puedes personalizar los textos de "Back" y "Next" para
-            internacionalización.
-          </li>
-          <li>
-            • Implementa <code className="px-1 bg-white dark:bg-gray-700">onPageChange</code>{' '}
-            para actualizar tu contenido cuando cambie la página.
-          </li>
-        </ul>
-      </div>
-
-      <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
-        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
-          ✅ Mejores Prácticas
-        </h4>
-        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
-          <li>
-            • Coloca la paginación al final del contenido (después de tablas o listas).
-          </li>
-          <li>
-            • Muestra información de contexto: "Mostrando X a Y de Z resultados".
-          </li>
-          <li>
-            • Considera agregar un selector de "items por página" junto a la
-            paginación.
-          </li>
-          <li>
-            • Mantén el scroll en la parte superior del contenido al cambiar de página.
-          </li>
-          <li>
-            • Usa loading states mientras se carga el nuevo contenido.
-          </li>
-        </ul>
-      </div>
-
-      <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
-          ⚠️ Evitar
-        </h4>
-        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
-          <li>
-            • No uses valores de <code className="px-1 bg-white dark:bg-gray-700">currentPage</code>{' '}
-            basados en 0 (puede causar confusión).
-          </li>
-          <li>
-            • No uses <code className="px-1 bg-white dark:bg-gray-700">siblingCount</code>{' '}
-            muy alto (hace la paginación muy larga).
-          </li>
-          <li>
-            • No olvides implementar <code className="px-1 bg-white dark:bg-gray-700">onPageChange</code>{' '}
-            (el componente no cambiará páginas solo).
-          </li>
-          <li>
-            • No uses paginación para muy pocas items (menos de 20). Considera mostrar
-            todo.
-          </li>
-        </ul>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+import { useState } from 'react';
+
+const meta = {
+  title: 'Siesa UI Kit/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+El componente **Pagination** permite navegar entre múltiples páginas de contenido de manera intuitiva y accesible.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    currentPage: {
+      control: 'number',
+      description: 'Página actual (basada en 1)',
+      table: {
+        defaultValue: { summary: '1' },
+      },
+    },
+    totalPages: {
+      control: 'number',
+      description: 'Número total de páginas',
+    },
+    onPageChange: {
+      action: 'page-changed',
+      description: 'Callback cuando cambia la página',
+    },
+    backText: {
+      control: 'text',
+      description: 'Texto del botón "Atrás"',
+      table: {
+        defaultValue: { summary: 'Atrás' },
+      },
+    },
+    nextText: {
+      control: 'text',
+      description: 'Texto del botón "Siguiente"',
+      table: {
+        defaultValue: { summary: 'Siguiente' },
+      },
+    },
+    siblingCount: {
+      control: 'number',
+      description: 'Número de páginas visibles alrededor de la actual',
+      table: {
+        defaultValue: { summary: '1' },
+      },
+    },
+    showBackButton: {
+      control: 'boolean',
+      description: 'Si se muestra el botón "Atrás"',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+    showNextButton: {
+      control: 'boolean',
+      description: 'Si se muestra el botón "Siguiente"',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  name: 'Playground',
+  args: {
+    currentPage: 1,
+    totalPages: 66,
+    backText: 'Atrás',
+    nextText: 'Siguiente',
+    siblingCount: 1,
+    showBackButton: true,
+    showNextButton: true,
+  },
+};
+
+// ============================================
+// 2. INTERACTIVE DEMO (CON ESTADO)
+// ============================================
+export const DemoInteractivo: Story = {
+  name: 'Demo Interactivo',
+  args: { totalPages: 66 },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = 66;
+
+    return (
+      <div className="space-y-8 p-6">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Demo Interactivo
+          </h3>
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={(page) => setCurrentPage(page)}
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-4">
+            Página actual: <strong>{currentPage}</strong> de <strong>{totalPages}</strong>
+          </p>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 3. DIFERENTES ESTADOS
+// ============================================
+export const DiferentesEstados: Story = {
+  name: 'Diferentes Estados',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Primera página (Atrás deshabilitado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Primera Página (Atrás deshabilitado)
+        </h3>
+        <Pagination currentPage={1} totalPages={66} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          El botón "Atrás" está deshabilitado en la primera página
+        </p>
+      </div>
+
+      {/* Página intermedia */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Página Intermedia
+        </h3>
+        <Pagination currentPage={5} totalPages={66} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Ambos botones activos, con puntos suspensivos en ambos lados
+        </p>
+      </div>
+
+      {/* Última página (Siguiente deshabilitado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Última Página (Siguiente deshabilitado)
+        </h3>
+        <Pagination currentPage={66} totalPages={66} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          El botón "Siguiente" está deshabilitado en la última página
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. DIFERENTES CANTIDADES DE PÁGINAS
+// ============================================
+export const DiferentesConteosDePaginas: Story = {
+  name: 'Diferentes Cantidades de Páginas',
+  args: { totalPages: 100 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Pocas páginas (sin puntos suspensivos) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Pocas Páginas (5 páginas)
+        </h3>
+        <Pagination currentPage={3} totalPages={5} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Se muestran todas las páginas sin separadores
+        </p>
+      </div>
+
+      {/* Páginas medias */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Páginas Medias (20 páginas)
+        </h3>
+        <Pagination currentPage={10} totalPages={20} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Separadores en ambos lados
+        </p>
+      </div>
+
+      {/* Muchas páginas */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Muchas Páginas (100 páginas)
+        </h3>
+        <Pagination currentPage={50} totalPages={100} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Algoritmo inteligente para mostrar páginas relevantes
+        </p>
+      </div>
+
+      {/* Solo 1 página */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Una Sola Página
+        </h3>
+        <Pagination currentPage={1} totalPages={1} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Ambos botones deshabilitados cuando solo hay una página
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. SIBLING COUNT
+// ============================================
+export const PaginasAdyacentes: Story = {
+  name: 'Páginas Adyacentes (siblingCount)',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* siblingCount = 0 */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          siblingCount = 0
+        </h3>
+        <Pagination currentPage={10} totalPages={66} siblingCount={0} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo muestra la página actual (más compacto)
+        </p>
+      </div>
+
+      {/* siblingCount = 1 (predeterminado) */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          siblingCount = 1 (predeterminado)
+        </h3>
+        <Pagination currentPage={10} totalPages={66} siblingCount={1} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Muestra la página actual + 1 a cada lado
+        </p>
+      </div>
+
+      {/* siblingCount = 2 */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          siblingCount = 2
+        </h3>
+        <Pagination currentPage={10} totalPages={66} siblingCount={2} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Muestra la página actual + 2 a cada lado (más páginas visibles)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. TEXTOS PERSONALIZADOS
+// ============================================
+export const TextosPersonalizados: Story = {
+  name: 'Textos Personalizados',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Español */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Español (Predeterminado)
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          backText="Atrás"
+          nextText="Siguiente"
+        />
+      </div>
+
+      {/* Inglés */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Inglés
+        </h3>
+        <Pagination currentPage={5} totalPages={66} backText="Back" nextText="Next" />
+      </div>
+
+      {/* Portugués */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Portugués
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          backText="Voltar"
+          nextText="Próxima"
+        />
+      </div>
+
+      {/* Francés */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Francés
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          backText="Précédent"
+          nextText="Suivant"
+        />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. SIN BOTONES ATRÁS/SIGUIENTE
+// ============================================
+export const SinBotonesAtrasAdelante: Story = {
+  name: 'Sin Botones Atrás/Siguiente',
+  args: { totalPages: 66 },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Sin botón Atrás */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Sin Botón "Atrás"
+        </h3>
+        <Pagination currentPage={5} totalPages={66} showBackButton={false} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo se muestran los números y el botón "Siguiente"
+        </p>
+      </div>
+
+      {/* Sin botón Siguiente */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Sin Botón "Siguiente"
+        </h3>
+        <Pagination currentPage={5} totalPages={66} showNextButton={false} backText="Atrás" nextText="Siguiente" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo se muestran el botón "Atrás" y los números
+        </p>
+      </div>
+
+      {/* Solo números */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Solo Números
+        </h3>
+        <Pagination
+          currentPage={5}
+          totalPages={66}
+          showBackButton={false}
+          showNextButton={false}
+          backText="Atrás"
+          nextText="Siguiente"
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Solo los números de página (más minimalista)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 8. USO CON TABLA
+// ============================================
+export const WithTable: Story = {
+  name: 'Uso con Tabla',
+  args: { totalPages: 16 },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 10;
+    const totalItems = 156;
+    const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+    const startItem = (currentPage - 1) * itemsPerPage + 1;
+    const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+
+    return (
+      <div className="space-y-6 p-6 max-w-4xl">
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Tabla con Paginación
+          </h3>
+
+          {/* Tabla simple */}
+          <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-800">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    ID
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    Nombre
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    Email
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-bold text-gray-700 dark:text-white">
+                    Estado
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                {Array.from({ length: itemsPerPage }, (_, i) => {
+                  const itemId = startItem + i;
+                  if (itemId > totalItems) return null;
+                  return (
+                    <tr key={itemId} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                      <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+                        #{itemId}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+                        Usuario {itemId}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+                        user{itemId}@example.com
+                      </td>
+                      <td className="px-4 py-3 text-sm">
+                        <span className="px-2 py-1 text-xs font-bold rounded bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+                          Activo
+                        </span>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Info y paginación */}
+          <div className="flex items-center justify-between mt-4">
+            <p className="text-xs text-gray-500 dark:text-gray-300">
+              Mostrando <strong>{startItem}</strong> a <strong>{endItem}</strong> de{' '}
+              <strong>{totalItems}</strong> resultados
+            </p>
+            <Pagination
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={setCurrentPage}
+              backText="Atrás"
+              nextText="Siguiente"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 9. CONSEJOS Y TIPS
+// ============================================
+export const Tips: Story = {
+  name: 'Consejos y Buenas Prácticas',
+  args: { totalPages: 1 },
+  render: () => (
+    <div className="space-y-6 p-6 max-w-2xl">
+      <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
+          💡 Consejos de Uso
+        </h4>
+        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
+          <li>
+            • <strong>currentPage</strong> está basado en 1 (no en 0). La primera página
+            es 1, no 0.
+          </li>
+          <li>
+            • Usa <code className="px-1 bg-white dark:bg-gray-700">siblingCount=1</code>{' '}
+            para dispositivos móviles (más compacto).
+          </li>
+          <li>
+            • Usa <code className="px-1 bg-white dark:bg-gray-700">siblingCount=2</code>{' '}
+            para desktop (más páginas visibles).
+          </li>
+          <li>
+            • El algoritmo muestra siempre la primera y última página para facilitar la
+            navegación.
+          </li>
+          <li>
+            • Los separadores "..." indican que hay páginas ocultas entre los números
+            visibles.
+          </li>
+          <li>
+            • Puedes personalizar los textos de "Back" y "Next" para
+            internacionalización.
+          </li>
+          <li>
+            • Implementa <code className="px-1 bg-white dark:bg-gray-700">onPageChange</code>{' '}
+            para actualizar tu contenido cuando cambie la página.
+          </li>
+        </ul>
+      </div>
+
+      <div className="p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
+        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
+          ✅ Mejores Prácticas
+        </h4>
+        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
+          <li>
+            • Coloca la paginación al final del contenido (después de tablas o listas).
+          </li>
+          <li>
+            • Muestra información de contexto: "Mostrando X a Y de Z resultados".
+          </li>
+          <li>
+            • Considera agregar un selector de "items por página" junto a la
+            paginación.
+          </li>
+          <li>
+            • Mantén el scroll en la parte superior del contenido al cambiar de página.
+          </li>
+          <li>
+            • Usa loading states mientras se carga el nuevo contenido.
+          </li>
+        </ul>
+      </div>
+
+      <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+        <h4 className="text-sm font-bold mb-2 text-gray-700 dark:text-white">
+          ⚠️ Evitar
+        </h4>
+        <ul className="space-y-2 text-xs text-gray-600 dark:text-gray-300">
+          <li>
+            • No uses valores de <code className="px-1 bg-white dark:bg-gray-700">currentPage</code>{' '}
+            basados en 0 (puede causar confusión).
+          </li>
+          <li>
+            • No uses <code className="px-1 bg-white dark:bg-gray-700">siblingCount</code>{' '}
+            muy alto (hace la paginación muy larga).
+          </li>
+          <li>
+            • No olvides implementar <code className="px-1 bg-white dark:bg-gray-700">onPageChange</code>{' '}
+            (el componente no cambiará páginas solo).
+          </li>
+          <li>
+            • No uses paginación para muy pocas items (menos de 20). Considera mostrar
+            todo.
+          </li>
+        </ul>
+      </div>
+    </div>
+  ),
+};