siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Table/Table.stories.tsx

@@ -1,805 +1,805 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { Table } from './Table';
-import type { TableColumn } from './Table.types';
-
-// Datos de ejemplo
-interface Usuario {
-  id: number;
-  nombre: string;
-  email: string;
-  usuario: string;
-  rol: string;
-  estado: 'activo' | 'inactivo';
-  avatar?: string;
-}
-
-const usuariosEjemplo: Usuario[] = [
-  {
-    id: 1,
-    nombre: 'Jhonnatan Diaz',
-    email: 'jhonnatan.diaz@siesa.com',
-    usuario: 'jhonnatan.diaz',
-    rol: 'Administrador',
-    estado: 'activo',
-    avatar: 'https://i.pravatar.cc/150?img=1',
-  },
-  {
-    id: 2,
-    nombre: 'Santiago Sanchez',
-    email: 'santiago.sanchez@siesa.com',
-    usuario: 'santiago.sanchez',
-    rol: 'Desarrollador',
-    estado: 'activo',
-    avatar: 'https://i.pravatar.cc/150?img=2',
-  },
-  {
-    id: 3,
-    nombre: 'Daniel Mesa',
-    email: 'daniel.mesa@siesa.com',
-    usuario: 'daniel.mesa',
-    rol: 'Diseñador',
-    estado: 'activo',
-    avatar: 'https://i.pravatar.cc/150?img=3',
-  },
-  {
-    id: 4,
-    nombre: 'Juan David Guevara',
-    email: 'juan.guevara@siesa.com',
-    usuario: 'juan.guevara',
-    rol: 'QA',
-    estado: 'inactivo',
-    avatar: 'https://i.pravatar.cc/150?img=4',
-  },
-  {
-    id: 5,
-    nombre: 'Guillermo Duran',
-    email: 'guillermo.duran@siesa.com',
-    usuario: 'guillermo.duran',
-    rol: 'Product Manager',
-    estado: 'activo',
-    avatar: 'https://i.pravatar.cc/150?img=5',
-  },
-];
-
-const meta = {
-  title: 'Siesa UI Kit/Table',
-  component: Table,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Componente de tabla flexible con soporte para sorting, variantes visuales y dark mode completo.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Título opcional de la tabla',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    variant: {
-      control: 'select',
-      options: ['basic', 'fullWidth', 'striped', 'grid'],
-      description: 'Variante visual de la tabla',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'basic' },
-        category: 'Apariencia',
-      },
-    },
-    showBorder: {
-      control: 'boolean',
-      description: 'Si se muestra el borde del container',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-        category: 'Apariencia',
-      },
-    },
-    showShadow: {
-      control: 'boolean',
-      description: 'Si se muestra la sombra del container',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-        category: 'Apariencia',
-      },
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Si la tabla debe ocupar todo el ancho disponible',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Apariencia',
-      },
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Si se está cargando la información',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-        category: 'Estado',
-      },
-    },
-    emptyMessage: {
-      control: 'text',
-      description: 'Texto a mostrar cuando no hay datos',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'No hay datos disponibles' },
-        category: 'Contenido',
-      },
-    },
-  },
-} satisfies Meta<typeof Table>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    title: 'Usuarios',
-    columns: [
-      { header: 'Nombre', accessor: 'nombre', sortable: true },
-      { header: 'Email', accessor: 'email' },
-      { header: 'Usuario', accessor: 'usuario' },
-    ],
-    data: usuariosEjemplo,
-    variant: 'basic',
-    showBorder: true,
-    showShadow: true,
-    fullWidth: false,
-  },
-};
-
-// ============================================
-// 2. VARIANTE BÁSICA
-// ============================================
-export const Basica: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        sortable: true,
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table title="Usuarios" columns={columns} data={usuariosEjemplo} variant="basic" />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 3. VARIANTE FULL WIDTH
-// ============================================
-export const AnchoCompleto: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        sortable: true,
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-    ];
-
-    return (
-      <div className="w-full">
-        <Table
-          title="Usuarios - Ancho Completo"
-          columns={columns}
-          data={usuariosEjemplo}
-          variant="fullWidth"
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 4. VARIANTE STRIPED (FILAS ALTERNAS)
-// ============================================
-export const FilasAlternas: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        sortable: true,
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table
-          title="Usuarios - Filas Alternas"
-          columns={columns}
-          data={usuariosEjemplo}
-          variant="striped"
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 5. VARIANTE CON GRID (BORDES)
-// ============================================
-export const ConBordes: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        sortable: true,
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table title="Usuarios - Con Bordes" columns={columns} data={usuariosEjemplo} variant="grid" />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 6. CON SORTING
-// ============================================
-export const ConOrdenamiento: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        sortable: true,
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-        sortable: true,
-      },
-      {
-        header: 'Rol',
-        accessor: 'rol',
-        sortable: true,
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-          <p className="text-sm text-gray-600 dark:text-gray-300">
-            <strong>💡 Consejo:</strong> Haz clic en los headers con el icono de ordenamiento para
-            ordenar las columnas.
-          </p>
-        </div>
-        <Table
-          title="Usuarios - Con Ordenamiento"
-          columns={columns}
-          data={usuariosEjemplo}
-          variant="basic"
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 7. CON RENDER CUSTOM
-// ============================================
-export const ConRenderPersonalizado: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Estado',
-        accessor: 'estado',
-        render: (value) => (
-          <span
-            className={`
-              inline-flex
-              items-center
-              px-2
-              py-1
-              rounded-md
-              text-xs
-              font-bold
-              ${
-                value === 'activo'
-                  ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
-                  : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
-              }
-            `}
-          >
-            {value === 'activo' ? 'Activo' : 'Inactivo'}
-          </span>
-        ),
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table
-          title="Usuarios - Con Badge de Estado"
-          columns={columns}
-          data={usuariosEjemplo}
-          variant="basic"
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 8. ESTADO DE CARGA
-// ============================================
-export const EstadoDeCarga: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table
-          title="Usuarios - Cargando..."
-          columns={columns}
-          data={[]}
-          variant="basic"
-          loading={true}
-          loadingRows={5}
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 9. SIN DATOS
-// ============================================
-export const SinDatos: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table
-          title="Usuarios - Sin Datos"
-          columns={columns}
-          data={[]}
-          variant="basic"
-          emptyMessage="No hay usuarios registrados"
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 10. CON TODAS LAS COLUMNAS
-// ============================================
-export const TablaCompleta: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'ID',
-        accessor: 'id',
-        width: '80px',
-        align: 'center',
-      },
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        sortable: true,
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-        sortable: true,
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-      {
-        header: 'Rol',
-        accessor: 'rol',
-        sortable: true,
-      },
-      {
-        header: 'Estado',
-        accessor: 'estado',
-        align: 'center',
-        render: (value) => (
-          <span
-            className={`
-              inline-flex
-              items-center
-              px-2
-              py-1
-              rounded-md
-              text-xs
-              font-bold
-              ${
-                value === 'activo'
-                  ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
-                  : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
-              }
-            `}
-          >
-            {value === 'activo' ? '✓ Activo' : '✗ Inactivo'}
-          </span>
-        ),
-      },
-    ];
-
-    return (
-      <div className="w-full">
-        <Table
-          title="Gestión de Usuarios"
-          columns={columns}
-          data={usuariosEjemplo}
-          variant="fullWidth"
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 11. CON AVATARES
-// ============================================
-export const ConAvatares: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        render: (_value, row) => (
-          <div className="flex items-center gap-2">
-            {/* Avatar */}
-            <img
-              src={row.avatar || 'https://i.pravatar.cc/150?img=0'}
-              alt={row.nombre}
-              className="w-8 h-8 rounded-full object-cover"
-            />
-            {/* Texto */}
-            <div className="flex flex-col">
-              <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
-                {row.nombre}
-              </span>
-              <span className="text-xs font-normal text-content-secondary dark:text-content-secondary">
-                {row.email}
-              </span>
-            </div>
-          </div>
-        ),
-      },
-      {
-        header: 'Rol',
-        accessor: 'rol',
-      },
-      {
-        header: 'Estado',
-        accessor: 'estado',
-        align: 'center',
-        width: '96px',
-        render: (value) => (
-          <span
-            className={`
-              inline-flex
-              items-center
-              px-1.5
-              py-1
-              rounded-md
-              text-xs
-              font-normal
-              ${
-                value === 'activo'
-                  ? 'bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400'
-                  : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800/30 dark:text-zinc-400'
-              }
-            `}
-          >
-            {value === 'activo' ? 'Online' : 'Offline'}
-          </span>
-        ),
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table title="Usuarios" columns={columns} data={usuariosEjemplo} variant="basic" />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 12. CON PAGINACIÓN
-// ============================================
-export const ConPaginacion: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const [currentPage, setCurrentPage] = useState(3);
-    const totalPages = 66;
-
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        sortable: true,
-      },
-      {
-        header: 'Email',
-        accessor: 'email',
-      },
-      {
-        header: 'Usuario',
-        accessor: 'usuario',
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table
-          title="Usuarios"
-          columns={columns}
-          data={usuariosEjemplo}
-          variant="striped"
-          pagination={{
-            currentPage,
-            totalPages,
-            onPageChange: setCurrentPage,
-          }}
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 13. CON AVATARES Y PAGINACIÓN (COMPLETO)
-// ============================================
-export const ConAvatarYPaginacion: Story = {
-  args: { columns: [], data: [] },
-  render: () => {
-    const [currentPage, setCurrentPage] = useState(3);
-    const totalPages = 66;
-
-    const columns: TableColumn<Usuario>[] = [
-      {
-        header: 'Nombre',
-        accessor: 'nombre',
-        render: (_value, row) => (
-          <div className="flex items-center gap-2">
-            {/* Avatar */}
-            <img
-              src={row.avatar || 'https://i.pravatar.cc/150?img=0'}
-              alt={row.nombre}
-              className="w-8 h-8 rounded-full object-cover"
-            />
-            {/* Texto */}
-            <div className="flex flex-col">
-              <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
-                {row.nombre}
-              </span>
-              <span className="text-xs font-normal text-content-secondary dark:text-content-secondary">
-                {row.email}
-              </span>
-            </div>
-          </div>
-        ),
-      },
-      {
-        header: 'Rol',
-        accessor: 'rol',
-      },
-      {
-        header: 'Estado',
-        accessor: 'estado',
-        align: 'center',
-        width: '96px',
-        render: (value) => (
-          <span
-            className={`
-              inline-flex
-              items-center
-              px-1.5
-              py-1
-              rounded-md
-              text-xs
-              font-normal
-              ${
-                value === 'activo'
-                  ? 'bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400'
-                  : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800/30 dark:text-zinc-400'
-              }
-            `}
-          >
-            {value === 'activo' ? 'Online' : 'Offline'}
-          </span>
-        ),
-      },
-    ];
-
-    return (
-      <div className="max-w-4xl">
-        <Table
-          title="Usuarios"
-          columns={columns}
-          data={usuariosEjemplo}
-          variant="basic"
-          pagination={{
-            currentPage,
-            totalPages,
-            onPageChange: setCurrentPage,
-          }}
-        />
-      </div>
-    );
-  },
-};
-
-// ============================================
-// 14. TODAS LAS VARIANTES
-// ============================================
-export const TodasLasVariantes: Story = {
-  args: {
-    columns: [
-      { header: 'Nombre', accessor: 'nombre' },
-      { header: 'Email', accessor: 'email' },
-      { header: 'Usuario', accessor: 'usuario' },
-    ],
-    data: usuariosEjemplo.slice(0, 3),
-  },
-  render: (args) => (
-    <div className="space-y-8 p-6">
-      {/* Básica */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Básica</h3>
-        <div className="max-w-4xl">
-          <Table {...args} title="Usuarios" variant="basic" />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Variante básica con padding y spacing estándar
-        </p>
-      </div>
-
-      {/* Ancho Completo */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ancho Completo</h3>
-        <Table {...args} title="Usuarios - Full Width" variant="fullWidth" />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Tabla que ocupa todo el ancho disponible
-        </p>
-      </div>
-
-      {/* Filas Alternas */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filas Alternas</h3>
-        <div className="max-w-4xl">
-          <Table {...args} title="Usuarios - Striped" variant="striped" />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Filas con fondo alternado para mejor legibilidad
-        </p>
-      </div>
-
-      {/* Con Bordes */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Bordes</h3>
-        <div className="max-w-4xl">
-          <Table {...args} title="Usuarios - Grid" variant="grid" />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Tabla con bordes alrededor de las celdas
-        </p>
-      </div>
-
-      {/* Consejos */}
-      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-        <p className="text-xs text-gray-600 dark:text-gray-300">
-          <strong>💡 Consejos:</strong>
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">basic</code> para tablas con
-          contenido estándar
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">fullWidth</code> para
-          dashboards y layouts completos
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">striped</code> para tablas
-          con muchas filas
-          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">grid</code> para separar
-          visualmente las celdas
-        </p>
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Table } from './Table';
+import type { TableColumn } from './Table.types';
+
+// Datos de ejemplo
+interface Usuario {
+  id: number;
+  nombre: string;
+  email: string;
+  usuario: string;
+  rol: string;
+  estado: 'activo' | 'inactivo';
+  avatar?: string;
+}
+
+const usuariosEjemplo: Usuario[] = [
+  {
+    id: 1,
+    nombre: 'Jhonnatan Diaz',
+    email: 'jhonnatan.diaz@siesa.com',
+    usuario: 'jhonnatan.diaz',
+    rol: 'Administrador',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    nombre: 'Santiago Sanchez',
+    email: 'santiago.sanchez@siesa.com',
+    usuario: 'santiago.sanchez',
+    rol: 'Desarrollador',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    nombre: 'Daniel Mesa',
+    email: 'daniel.mesa@siesa.com',
+    usuario: 'daniel.mesa',
+    rol: 'Diseñador',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    nombre: 'Juan David Guevara',
+    email: 'juan.guevara@siesa.com',
+    usuario: 'juan.guevara',
+    rol: 'QA',
+    estado: 'inactivo',
+    avatar: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    nombre: 'Guillermo Duran',
+    email: 'guillermo.duran@siesa.com',
+    usuario: 'guillermo.duran',
+    rol: 'Product Manager',
+    estado: 'activo',
+    avatar: 'https://i.pravatar.cc/150?img=5',
+  },
+];
+
+const meta = {
+  title: 'Siesa UI Kit/Table',
+  component: Table,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Componente de tabla flexible con soporte para sorting, variantes visuales y dark mode completo.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título opcional de la tabla',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    variant: {
+      control: 'select',
+      options: ['basic', 'fullWidth', 'striped', 'grid'],
+      description: 'Variante visual de la tabla',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'basic' },
+        category: 'Apariencia',
+      },
+    },
+    showBorder: {
+      control: 'boolean',
+      description: 'Si se muestra el borde del container',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Apariencia',
+      },
+    },
+    showShadow: {
+      control: 'boolean',
+      description: 'Si se muestra la sombra del container',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+        category: 'Apariencia',
+      },
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Si la tabla debe ocupar todo el ancho disponible',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Apariencia',
+      },
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Si se está cargando la información',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+        category: 'Estado',
+      },
+    },
+    emptyMessage: {
+      control: 'text',
+      description: 'Texto a mostrar cuando no hay datos',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'No hay datos disponibles' },
+        category: 'Contenido',
+      },
+    },
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    title: 'Usuarios',
+    columns: [
+      { header: 'Nombre', accessor: 'nombre', sortable: true },
+      { header: 'Email', accessor: 'email' },
+      { header: 'Usuario', accessor: 'usuario' },
+    ],
+    data: usuariosEjemplo,
+    variant: 'basic',
+    showBorder: true,
+    showShadow: true,
+    fullWidth: false,
+  },
+};
+
+// ============================================
+// 2. VARIANTE BÁSICA
+// ============================================
+export const Basica: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table title="Usuarios" columns={columns} data={usuariosEjemplo} variant="basic" />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 3. VARIANTE FULL WIDTH
+// ============================================
+export const AnchoCompleto: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="w-full">
+        <Table
+          title="Usuarios - Ancho Completo"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="fullWidth"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 4. VARIANTE STRIPED (FILAS ALTERNAS)
+// ============================================
+export const FilasAlternas: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Filas Alternas"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="striped"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 5. VARIANTE CON GRID (BORDES)
+// ============================================
+export const ConBordes: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table title="Usuarios - Con Bordes" columns={columns} data={usuariosEjemplo} variant="grid" />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 6. CON SORTING
+// ============================================
+export const ConOrdenamiento: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+        sortable: true,
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+        sortable: true,
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <div className="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            <strong>💡 Consejo:</strong> Haz clic en los headers con el icono de ordenamiento para
+            ordenar las columnas.
+          </p>
+        </div>
+        <Table
+          title="Usuarios - Con Ordenamiento"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="basic"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 7. CON RENDER CUSTOM
+// ============================================
+export const ConRenderPersonalizado: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-2
+              py-1
+              rounded-md
+              text-xs
+              font-bold
+              ${
+                value === 'activo'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+              }
+            `}
+          >
+            {value === 'activo' ? 'Activo' : 'Inactivo'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Con Badge de Estado"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="basic"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 8. ESTADO DE CARGA
+// ============================================
+export const EstadoDeCarga: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Cargando..."
+          columns={columns}
+          data={[]}
+          variant="basic"
+          loading={true}
+          loadingRows={5}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 9. SIN DATOS
+// ============================================
+export const SinDatos: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios - Sin Datos"
+          columns={columns}
+          data={[]}
+          variant="basic"
+          emptyMessage="No hay usuarios registrados"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 10. CON TODAS LAS COLUMNAS
+// ============================================
+export const TablaCompleta: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'ID',
+        accessor: 'id',
+        width: '80px',
+        align: 'center',
+      },
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+        sortable: true,
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+        sortable: true,
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        align: 'center',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-2
+              py-1
+              rounded-md
+              text-xs
+              font-bold
+              ${
+                value === 'activo'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+              }
+            `}
+          >
+            {value === 'activo' ? '✓ Activo' : '✗ Inactivo'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="w-full">
+        <Table
+          title="Gestión de Usuarios"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="fullWidth"
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 11. CON AVATARES
+// ============================================
+export const ConAvatares: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        render: (_value, row) => (
+          <div className="flex items-center gap-2">
+            {/* Avatar */}
+            <img
+              src={row.avatar || 'https://i.pravatar.cc/150?img=0'}
+              alt={row.nombre}
+              className="w-8 h-8 rounded-full object-cover"
+            />
+            {/* Texto */}
+            <div className="flex flex-col">
+              <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
+                {row.nombre}
+              </span>
+              <span className="text-xs font-normal text-content-secondary dark:text-content-secondary">
+                {row.email}
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        align: 'center',
+        width: '96px',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-1.5
+              py-1
+              rounded-md
+              text-xs
+              font-normal
+              ${
+                value === 'activo'
+                  ? 'bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400'
+                  : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800/30 dark:text-zinc-400'
+              }
+            `}
+          >
+            {value === 'activo' ? 'Online' : 'Offline'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table title="Usuarios" columns={columns} data={usuariosEjemplo} variant="basic" />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 12. CON PAGINACIÓN
+// ============================================
+export const ConPaginacion: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(3);
+    const totalPages = 66;
+
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        sortable: true,
+      },
+      {
+        header: 'Email',
+        accessor: 'email',
+      },
+      {
+        header: 'Usuario',
+        accessor: 'usuario',
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="striped"
+          pagination={{
+            currentPage,
+            totalPages,
+            onPageChange: setCurrentPage,
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 13. CON AVATARES Y PAGINACIÓN (COMPLETO)
+// ============================================
+export const ConAvatarYPaginacion: Story = {
+  args: { columns: [], data: [] },
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(3);
+    const totalPages = 66;
+
+    const columns: TableColumn<Usuario>[] = [
+      {
+        header: 'Nombre',
+        accessor: 'nombre',
+        render: (_value, row) => (
+          <div className="flex items-center gap-2">
+            {/* Avatar */}
+            <img
+              src={row.avatar || 'https://i.pravatar.cc/150?img=0'}
+              alt={row.nombre}
+              className="w-8 h-8 rounded-full object-cover"
+            />
+            {/* Texto */}
+            <div className="flex flex-col">
+              <span className="text-sm font-normal text-content-primary dark:text-dark-content-primary">
+                {row.nombre}
+              </span>
+              <span className="text-xs font-normal text-content-secondary dark:text-content-secondary">
+                {row.email}
+              </span>
+            </div>
+          </div>
+        ),
+      },
+      {
+        header: 'Rol',
+        accessor: 'rol',
+      },
+      {
+        header: 'Estado',
+        accessor: 'estado',
+        align: 'center',
+        width: '96px',
+        render: (value) => (
+          <span
+            className={`
+              inline-flex
+              items-center
+              px-1.5
+              py-1
+              rounded-md
+              text-xs
+              font-normal
+              ${
+                value === 'activo'
+                  ? 'bg-lime-100 text-lime-700 dark:bg-lime-900/30 dark:text-lime-400'
+                  : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800/30 dark:text-zinc-400'
+              }
+            `}
+          >
+            {value === 'activo' ? 'Online' : 'Offline'}
+          </span>
+        ),
+      },
+    ];
+
+    return (
+      <div className="max-w-4xl">
+        <Table
+          title="Usuarios"
+          columns={columns}
+          data={usuariosEjemplo}
+          variant="basic"
+          pagination={{
+            currentPage,
+            totalPages,
+            onPageChange: setCurrentPage,
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+// ============================================
+// 14. TODAS LAS VARIANTES
+// ============================================
+export const TodasLasVariantes: Story = {
+  args: {
+    columns: [
+      { header: 'Nombre', accessor: 'nombre' },
+      { header: 'Email', accessor: 'email' },
+      { header: 'Usuario', accessor: 'usuario' },
+    ],
+    data: usuariosEjemplo.slice(0, 3),
+  },
+  render: (args) => (
+    <div className="space-y-8 p-6">
+      {/* Básica */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Básica</h3>
+        <div className="max-w-4xl">
+          <Table {...args} title="Usuarios" variant="basic" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Variante básica con padding y spacing estándar
+        </p>
+      </div>
+
+      {/* Ancho Completo */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Ancho Completo</h3>
+        <Table {...args} title="Usuarios - Full Width" variant="fullWidth" />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Tabla que ocupa todo el ancho disponible
+        </p>
+      </div>
+
+      {/* Filas Alternas */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Filas Alternas</h3>
+        <div className="max-w-4xl">
+          <Table {...args} title="Usuarios - Striped" variant="striped" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Filas con fondo alternado para mejor legibilidad
+        </p>
+      </div>
+
+      {/* Con Bordes */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">Con Bordes</h3>
+        <div className="max-w-4xl">
+          <Table {...args} title="Usuarios - Grid" variant="grid" />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Tabla con bordes alrededor de las celdas
+        </p>
+      </div>
+
+      {/* Consejos */}
+      <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+        <p className="text-xs text-gray-600 dark:text-gray-300">
+          <strong>💡 Consejos:</strong>
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">basic</code> para tablas con
+          contenido estándar
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">fullWidth</code> para
+          dashboards y layouts completos
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">striped</code> para tablas
+          con muchas filas
+          <br />• Usa <code className="px-1 bg-white dark:bg-gray-700">grid</code> para separar
+          visualmente las celdas
+        </p>
+      </div>
+    </div>
+  ),
+};