siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSTable/POSTable.stories.tsx

@@ -1,737 +1,737 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { POSTable } from './POSTable';
-
-const meta = {
-  title: 'Siesa UI Kit/POSTable',
-  component: POSTable,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Sistema de visualización de mesas de restaurante para aplicaciones POS con diferentes estados (disponible, ocupada, reservada) y configuraciones de sillas. Implementación pixel-perfect según especificaciones de Figma.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    tableNumber: {
-      control: 'text',
-      description: 'Número de la mesa',
-      table: {
-        type: { summary: 'string' },
-        category: 'Contenido',
-      },
-    },
-    status: {
-      control: 'select',
-      options: ['available', 'busy', 'reserved'],
-      description: 'Estado de la mesa',
-      table: {
-        type: { summary: 'string' },
-        category: 'Estado',
-      },
-    },
-    shape: {
-      control: 'select',
-      options: ['square', 'circle', 'rectangle', 'oval'],
-      description: 'Forma de la mesa (square: 64x64px, circle: 64x64px, rectangle: 80x64px, oval: 80x64px)',
-      table: {
-        type: { summary: 'string' },
-        category: 'Apariencia',
-      },
-    },
-    chairs: {
-      control: 'select',
-      options: [2, 4, 6, 8],
-      description: 'Número de sillas',
-      table: {
-        type: { summary: 'number' },
-        category: 'Apariencia',
-      },
-    },
-    showChairs: {
-      control: 'boolean',
-      description: 'Si muestra las sillas',
-      table: {
-        type: { summary: 'boolean' },
-        category: 'Apariencia',
-      },
-    },
-    isActive: {
-      control: 'boolean',
-      description: 'Estado activo (con fondo de color según Figma)',
-      table: {
-        type: { summary: 'boolean' },
-        category: 'Estado',
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Si la mesa está deshabilitada',
-      table: {
-        type: { summary: 'boolean' },
-        category: 'Estado',
-      },
-    },
-  },
-} satisfies Meta<typeof POSTable>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================
-// 1. PLAYGROUND INTERACTIVO
-// ============================================
-export const Playground: Story = {
-  args: {
-    tableNumber: '12',
-    status: 'available',
-    shape: 'square',
-    chairs: 4,
-    showChairs: true,
-    isActive: false,
-    disabled: false,
-  },
-};
-
-// ============================================
-// 2. TODOS LOS ESTADOS
-// ============================================
-export const TodosLosEstados: Story = {
-  args: { tableNumber: '01' },
-  render: () => (
-    <div className="space-y-8 p-6">
-      {/* Disponible */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Disponible (Available)
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable tableNumber="01" status="available" chairs={4} />
-          <POSTable tableNumber="01" status="available" chairs={4} isActive />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Mesa disponible para asignar a clientes. Izquierda: Enabled, Derecha: Actived
-        </p>
-      </div>
-
-      {/* Ocupada */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Ocupada (Busy)
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable tableNumber="02" status="busy" chairs={4} />
-          <POSTable tableNumber="02" status="busy" chairs={4} isActive />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Mesa actualmente ocupada por clientes. Izquierda: Enabled, Derecha: Actived
-        </p>
-      </div>
-
-      {/* Reservada */}
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Reservada (Reserved)
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable tableNumber="03" status="reserved" chairs={4} />
-          <POSTable tableNumber="03" status="reserved" chairs={4} isActive />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Mesa reservada para un cliente específico. Izquierda: Enabled, Derecha: Actived
-        </p>
-      </div>
-
-      {/* Tips */}
-      <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 />• Azul = Disponible (Light: #0e79fd, Dark: #93d1fd)
-          <br />• Naranja = Ocupada (Light: #af460e, Dark: #f5a927)
-          <br />• Púrpura = Reservada (Light: #7e22ce, Dark: #c084fc)
-          <br />• Estado Actived: Bg #dbeefe + Border #bce4ff (Available), Bg #fed7aa (Busy), Bg #e9d5ff (Reserved)
-          <br />• Texto del label: Debajo del conjunto mesa+sillas (mismo color del estado)
-          <br />• Focus rings adaptativos según el estado
-          <br />
-          <br />⚠️ <strong>Nota de diseño:</strong> Los colores de POSTable son específicos del cliente y NO usan los tokens del sistema general.
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 3. TODAS LAS FORMAS
-// ============================================
-export const TodasLasFormas: Story = {
-  args: { tableNumber: '01' },
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Cuadrada (Square) - 64x64px, border-radius: 4px
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable tableNumber="04" status="available" shape="square" chairs={4} />
-          <POSTable tableNumber="04" status="available" shape="square" chairs={4} isActive />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Circular (Circle) - 64x64px, border-radius: full
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable tableNumber="05" status="busy" shape="circle" chairs={4} />
-          <POSTable tableNumber="05" status="busy" shape="circle" chairs={4} isActive />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Rectangular (Rectangle) - 80x64px, border-radius: 4px
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable tableNumber="06" status="reserved" shape="rectangle" chairs={6} />
-          <POSTable tableNumber="06" status="reserved" shape="rectangle" chairs={6} isActive />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Ovalada (Oval) - 80x64px, border-radius: 24px
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable tableNumber="07" status="available" shape="oval" chairs={8} />
-          <POSTable tableNumber="07" status="available" shape="oval" chairs={8} isActive />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Forma ovalada según diseño "Rectangle Circle" de Figma
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 4. DIFERENTES CONFIGURACIONES DE SILLAS
-// ============================================
-export const ConfiguracionesDeSillas: Story = {
-  args: { tableNumber: '01' },
-  render: () => (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-12 p-6">
-      <div className="flex flex-col items-center">
-        <POSTable tableNumber="2" status="available" chairs={2} />
-        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">2 sillas</p>
-        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top, Bottom</p>
-      </div>
-
-      <div className="flex flex-col items-center">
-        <POSTable tableNumber="4" status="available" chairs={4} />
-        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">4 sillas</p>
-        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top, Right, Bottom, Left</p>
-      </div>
-
-      <div className="flex flex-col items-center">
-        <POSTable tableNumber="6" status="available" chairs={6} />
-        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">6 sillas</p>
-        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top(2), Right, Bottom(2), Left</p>
-      </div>
-
-      <div className="flex flex-col items-center">
-        <POSTable tableNumber="8" status="available" chairs={8} />
-        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">8 sillas</p>
-        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top(2), Right(2), Bottom(2), Left(2)</p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 5. MATRIZ COMPLETA DE FIGMA
-// ============================================
-export const MatrizCompletaDeFigma: Story = {
-  args: { tableNumber: '01' },
-  render: () => (
-    <div className="p-6 space-y-8">
-      <div>
-        <h3 className="text-lg font-bold mb-6 text-gray-700 dark:text-white">
-          Matriz Completa - Todas las Variantes de Figma
-        </h3>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-6">
-          Replicación pixel-perfect de las 60 variantes identificadas en el diseño de Figma.
-          Cada fila muestra: Enabled (izquierda) y Actived (derecha).
-        </p>
-      </div>
-
-      {/* SQUARE - 8 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Square - 8 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          {/* Available */}
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="square" chairs={8} />
-              <POSTable tableNumber="01" status="available" shape="square" chairs={8} isActive />
-            </div>
-          </div>
-
-          {/* Busy */}
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={8} />
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={8} isActive />
-            </div>
-          </div>
-
-          {/* Reserved */}
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={8} />
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={8} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* SQUARE - 6 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Square - 6 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="square" chairs={6} />
-              <POSTable tableNumber="01" status="available" shape="square" chairs={6} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={6} />
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={6} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={6} />
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={6} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* SQUARE - 4 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Square - 4 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="square" chairs={4} />
-              <POSTable tableNumber="01" status="available" shape="square" chairs={4} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={4} />
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={4} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={4} />
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={4} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* SQUARE - 2 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Square - 2 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="square" chairs={2} />
-              <POSTable tableNumber="01" status="available" shape="square" chairs={2} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={2} />
-              <POSTable tableNumber="01" status="busy" shape="square" chairs={2} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={2} />
-              <POSTable tableNumber="01" status="reserved" shape="square" chairs={2} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* RECTANGLE - 8 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Rectangle - 8 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={8} />
-              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={8} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={8} />
-              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={8} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={8} />
-              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={8} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* RECTANGLE - 6 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Rectangle - 6 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={6} />
-              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={6} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={6} />
-              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={6} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={6} />
-              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={6} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* OVAL - 8 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Oval (Rectangle Circle) - 8 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="oval" chairs={8} />
-              <POSTable tableNumber="01" status="available" shape="oval" chairs={8} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="oval" chairs={8} />
-              <POSTable tableNumber="01" status="busy" shape="oval" chairs={8} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={8} />
-              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={8} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* OVAL - 6 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Oval (Rectangle Circle) - 6 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="oval" chairs={6} />
-              <POSTable tableNumber="01" status="available" shape="oval" chairs={6} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="oval" chairs={6} />
-              <POSTable tableNumber="01" status="busy" shape="oval" chairs={6} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={6} />
-              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={6} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* CIRCLE - 4 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Circle - 4 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="circle" chairs={4} />
-              <POSTable tableNumber="01" status="available" shape="circle" chairs={4} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="circle" chairs={4} />
-              <POSTable tableNumber="01" status="busy" shape="circle" chairs={4} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={4} />
-              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={4} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* CIRCLE - 2 SILLAS */}
-      <div>
-        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
-          Circle - 2 Sillas
-        </h4>
-        <div className="grid grid-cols-2 gap-8">
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="available" shape="circle" chairs={2} />
-              <POSTable tableNumber="01" status="available" shape="circle" chairs={2} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="busy" shape="circle" chairs={2} />
-              <POSTable tableNumber="01" status="busy" shape="circle" chairs={2} isActive />
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
-            <div className="flex gap-4">
-              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={2} />
-              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={2} isActive />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* NOTA FINAL */}
-      <div className="mt-8 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>📐 Especificaciones Pixel-Perfect:</strong>
-          <br />• Container: 160x160px, border: 2px, border-radius: 8px
-          <br />• Inner container: 134x134px, gap: 4px
-          <br />• Mesa Square/Circle: 64x64px | Rectangle/Oval: 80x64px
-          <br />• Silla: 28x22px, gap: 4px
-          <br />• Label: 10px / 12px line-height, font: SiesaBT
-          <br />• Total variantes implementadas: 60 (según diseño de Figma)
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 6. CON INTERACCIÓN Y FOCUS
-// ============================================
-export const ConInteraccionYFocus: Story = {
-  args: { tableNumber: '01' },
-  render: () => (
-    <div className="space-y-8 p-6">
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Click en la Mesa
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable
-            tableNumber="10"
-            status="available"
-            chairs={4}
-            onClick={() => alert('Mesa 10 seleccionada')}
-          />
-          <POSTable
-            tableNumber="11"
-            status="busy"
-            chairs={4}
-            onClick={() => alert('Mesa 11 seleccionada')}
-          />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Haz clic en las mesas para ver la interacción
-        </p>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Focus Rings Adaptativos
-        </h3>
-        <div className="flex flex-wrap gap-6">
-          <POSTable
-            tableNumber="20"
-            status="available"
-            chairs={4}
-            onClick={() => {}}
-          />
-          <POSTable
-            tableNumber="21"
-            status="busy"
-            chairs={4}
-            onClick={() => {}}
-          />
-          <POSTable
-            tableNumber="22"
-            status="reserved"
-            chairs={4}
-            onClick={() => {}}
-          />
-        </div>
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Usa Tab para navegar y ver los focus rings adaptativos según el estado
-        </p>
-      </div>
-
-      <div>
-        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-          Mesa Deshabilitada
-        </h3>
-        <POSTable
-          tableNumber="12"
-          status="available"
-          chairs={4}
-          disabled
-          onClick={() => alert('No debería ejecutarse')}
-        />
-        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-          Mesa deshabilitada (no clickeable, no focusable)
-        </p>
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 7. LAYOUT DE RESTAURANTE
-// ============================================
-export const LayoutDeRestaurante: Story = {
-  args: { tableNumber: '01' },
-  render: () => (
-    <div className="p-8 bg-background-secondary dark:bg-dark-bg-primary rounded-xl">
-      <h3 className="text-lg font-bold mb-6 text-gray-700 dark:text-white">
-        Vista de Restaurante
-      </h3>
-      <div className="grid grid-cols-3 md:grid-cols-4 gap-4">
-        <POSTable tableNumber="01" status="available" chairs={4} onClick={() => {}} />
-        <POSTable tableNumber="02" status="busy" chairs={4} onClick={() => {}} />
-        <POSTable tableNumber="03" status="available" chairs={2} onClick={() => {}} />
-        <POSTable tableNumber="04" status="reserved" chairs={6} onClick={() => {}} />
-        <POSTable tableNumber="05" status="available" shape="circle" chairs={4} onClick={() => {}} />
-        <POSTable tableNumber="06" status="busy" shape="circle" chairs={4} onClick={() => {}} />
-        <POSTable tableNumber="07" status="available" shape="rectangle" chairs={6} onClick={() => {}} />
-        <POSTable tableNumber="08" status="reserved" shape="rectangle" chairs={8} onClick={() => {}} />
-        <POSTable tableNumber="09" status="available" chairs={4} onClick={() => {}} />
-        <POSTable tableNumber="10" status="busy" chairs={4} onClick={() => {}} />
-        <POSTable tableNumber="11" status="available" chairs={2} onClick={() => {}} />
-        <POSTable tableNumber="12" status="reserved" shape="oval" chairs={8} onClick={() => {}} />
-      </div>
-    </div>
-  ),
-};
-
-// ============================================
-// 8. SIN SILLAS
-// ============================================
-export const SinSillas: Story = {
-  args: { tableNumber: '01' },
-  render: () => (
-    <div className="space-y-8 p-6">
-      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
-        Mesas Sin Sillas (Solo Indicadores)
-      </h3>
-      <div className="flex flex-wrap gap-6">
-        <POSTable tableNumber="A1" status="available" showChairs={false} />
-        <POSTable tableNumber="A2" status="busy" showChairs={false} />
-        <POSTable tableNumber="A3" status="reserved" showChairs={false} />
-        <POSTable tableNumber="A4" status="available" shape="circle" showChairs={false} />
-        <POSTable tableNumber="A5" status="busy" shape="rectangle" showChairs={false} />
-        <POSTable tableNumber="A6" status="reserved" shape="oval" showChairs={false} />
-      </div>
-      <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
-        Vista simplificada sin sillas para layouts compactos
-      </p>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSTable } from './POSTable';
+
+const meta = {
+  title: 'Siesa UI Kit/POSTable',
+  component: POSTable,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Sistema de visualización de mesas de restaurante para aplicaciones POS con diferentes estados (disponible, ocupada, reservada) y configuraciones de sillas. Implementación pixel-perfect según especificaciones de Figma.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    tableNumber: {
+      control: 'text',
+      description: 'Número de la mesa',
+      table: {
+        type: { summary: 'string' },
+        category: 'Contenido',
+      },
+    },
+    status: {
+      control: 'select',
+      options: ['available', 'busy', 'reserved'],
+      description: 'Estado de la mesa',
+      table: {
+        type: { summary: 'string' },
+        category: 'Estado',
+      },
+    },
+    shape: {
+      control: 'select',
+      options: ['square', 'circle', 'rectangle', 'oval'],
+      description: 'Forma de la mesa (square: 64x64px, circle: 64x64px, rectangle: 80x64px, oval: 80x64px)',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+    chairs: {
+      control: 'select',
+      options: [2, 4, 6, 8],
+      description: 'Número de sillas',
+      table: {
+        type: { summary: 'number' },
+        category: 'Apariencia',
+      },
+    },
+    showChairs: {
+      control: 'boolean',
+      description: 'Si muestra las sillas',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Apariencia',
+      },
+    },
+    isActive: {
+      control: 'boolean',
+      description: 'Estado activo (con fondo de color según Figma)',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Estado',
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si la mesa está deshabilitada',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'Estado',
+      },
+    },
+  },
+} satisfies Meta<typeof POSTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+export const Playground: Story = {
+  args: {
+    tableNumber: '12',
+    status: 'available',
+    shape: 'square',
+    chairs: 4,
+    showChairs: true,
+    isActive: false,
+    disabled: false,
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+export const TodosLosEstados: Story = {
+  args: { tableNumber: '01' },
+  render: () => (
+    <div className="space-y-8 p-6">
+      {/* Disponible */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Disponible (Available)
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable tableNumber="01" status="available" chairs={4} />
+          <POSTable tableNumber="01" status="available" chairs={4} isActive />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Mesa disponible para asignar a clientes. Izquierda: Enabled, Derecha: Actived
+        </p>
+      </div>
+
+      {/* Ocupada */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Ocupada (Busy)
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable tableNumber="02" status="busy" chairs={4} />
+          <POSTable tableNumber="02" status="busy" chairs={4} isActive />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Mesa actualmente ocupada por clientes. Izquierda: Enabled, Derecha: Actived
+        </p>
+      </div>
+
+      {/* Reservada */}
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Reservada (Reserved)
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable tableNumber="03" status="reserved" chairs={4} />
+          <POSTable tableNumber="03" status="reserved" chairs={4} isActive />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Mesa reservada para un cliente específico. Izquierda: Enabled, Derecha: Actived
+        </p>
+      </div>
+
+      {/* Tips */}
+      <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 />• Azul = Disponible (Light: #0e79fd, Dark: #93d1fd)
+          <br />• Naranja = Ocupada (Light: #af460e, Dark: #f5a927)
+          <br />• Púrpura = Reservada (Light: #7e22ce, Dark: #c084fc)
+          <br />• Estado Actived: Bg #dbeefe + Border #bce4ff (Available), Bg #fed7aa (Busy), Bg #e9d5ff (Reserved)
+          <br />• Texto del label: Debajo del conjunto mesa+sillas (mismo color del estado)
+          <br />• Focus rings adaptativos según el estado
+          <br />
+          <br />⚠️ <strong>Nota de diseño:</strong> Los colores de POSTable son específicos del cliente y NO usan los tokens del sistema general.
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. TODAS LAS FORMAS
+// ============================================
+export const TodasLasFormas: Story = {
+  args: { tableNumber: '01' },
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Cuadrada (Square) - 64x64px, border-radius: 4px
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable tableNumber="04" status="available" shape="square" chairs={4} />
+          <POSTable tableNumber="04" status="available" shape="square" chairs={4} isActive />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Circular (Circle) - 64x64px, border-radius: full
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable tableNumber="05" status="busy" shape="circle" chairs={4} />
+          <POSTable tableNumber="05" status="busy" shape="circle" chairs={4} isActive />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Rectangular (Rectangle) - 80x64px, border-radius: 4px
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable tableNumber="06" status="reserved" shape="rectangle" chairs={6} />
+          <POSTable tableNumber="06" status="reserved" shape="rectangle" chairs={6} isActive />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Ovalada (Oval) - 80x64px, border-radius: 24px
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable tableNumber="07" status="available" shape="oval" chairs={8} />
+          <POSTable tableNumber="07" status="available" shape="oval" chairs={8} isActive />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Forma ovalada según diseño "Rectangle Circle" de Figma
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. DIFERENTES CONFIGURACIONES DE SILLAS
+// ============================================
+export const ConfiguracionesDeSillas: Story = {
+  args: { tableNumber: '01' },
+  render: () => (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-12 p-6">
+      <div className="flex flex-col items-center">
+        <POSTable tableNumber="2" status="available" chairs={2} />
+        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">2 sillas</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top, Bottom</p>
+      </div>
+
+      <div className="flex flex-col items-center">
+        <POSTable tableNumber="4" status="available" chairs={4} />
+        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">4 sillas</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top, Right, Bottom, Left</p>
+      </div>
+
+      <div className="flex flex-col items-center">
+        <POSTable tableNumber="6" status="available" chairs={6} />
+        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">6 sillas</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top(2), Right, Bottom(2), Left</p>
+      </div>
+
+      <div className="flex flex-col items-center">
+        <POSTable tableNumber="8" status="available" chairs={8} />
+        <p className="text-xs text-gray-600 dark:text-gray-300 mt-2">8 sillas</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Top(2), Right(2), Bottom(2), Left(2)</p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. MATRIZ COMPLETA DE FIGMA
+// ============================================
+export const MatrizCompletaDeFigma: Story = {
+  args: { tableNumber: '01' },
+  render: () => (
+    <div className="p-6 space-y-8">
+      <div>
+        <h3 className="text-lg font-bold mb-6 text-gray-700 dark:text-white">
+          Matriz Completa - Todas las Variantes de Figma
+        </h3>
+        <p className="text-sm text-gray-600 dark:text-gray-300 mb-6">
+          Replicación pixel-perfect de las 60 variantes identificadas en el diseño de Figma.
+          Cada fila muestra: Enabled (izquierda) y Actived (derecha).
+        </p>
+      </div>
+
+      {/* SQUARE - 8 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Square - 8 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          {/* Available */}
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="square" chairs={8} />
+              <POSTable tableNumber="01" status="available" shape="square" chairs={8} isActive />
+            </div>
+          </div>
+
+          {/* Busy */}
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={8} />
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={8} isActive />
+            </div>
+          </div>
+
+          {/* Reserved */}
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={8} />
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={8} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* SQUARE - 6 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Square - 6 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="square" chairs={6} />
+              <POSTable tableNumber="01" status="available" shape="square" chairs={6} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={6} />
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={6} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={6} />
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={6} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* SQUARE - 4 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Square - 4 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="square" chairs={4} />
+              <POSTable tableNumber="01" status="available" shape="square" chairs={4} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={4} />
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={4} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={4} />
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={4} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* SQUARE - 2 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Square - 2 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="square" chairs={2} />
+              <POSTable tableNumber="01" status="available" shape="square" chairs={2} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={2} />
+              <POSTable tableNumber="01" status="busy" shape="square" chairs={2} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={2} />
+              <POSTable tableNumber="01" status="reserved" shape="square" chairs={2} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* RECTANGLE - 8 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Rectangle - 8 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={8} />
+              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={8} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={8} />
+              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={8} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={8} />
+              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={8} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* RECTANGLE - 6 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Rectangle - 6 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={6} />
+              <POSTable tableNumber="01" status="available" shape="rectangle" chairs={6} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={6} />
+              <POSTable tableNumber="01" status="busy" shape="rectangle" chairs={6} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={6} />
+              <POSTable tableNumber="01" status="reserved" shape="rectangle" chairs={6} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* OVAL - 8 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Oval (Rectangle Circle) - 8 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="oval" chairs={8} />
+              <POSTable tableNumber="01" status="available" shape="oval" chairs={8} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="oval" chairs={8} />
+              <POSTable tableNumber="01" status="busy" shape="oval" chairs={8} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={8} />
+              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={8} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* OVAL - 6 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Oval (Rectangle Circle) - 6 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="oval" chairs={6} />
+              <POSTable tableNumber="01" status="available" shape="oval" chairs={6} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="oval" chairs={6} />
+              <POSTable tableNumber="01" status="busy" shape="oval" chairs={6} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={6} />
+              <POSTable tableNumber="01" status="reserved" shape="oval" chairs={6} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* CIRCLE - 4 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Circle - 4 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="circle" chairs={4} />
+              <POSTable tableNumber="01" status="available" shape="circle" chairs={4} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="circle" chairs={4} />
+              <POSTable tableNumber="01" status="busy" shape="circle" chairs={4} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={4} />
+              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={4} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* CIRCLE - 2 SILLAS */}
+      <div>
+        <h4 className="text-md font-bold mb-4 text-gray-700 dark:text-white">
+          Circle - 2 Sillas
+        </h4>
+        <div className="grid grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Available</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="available" shape="circle" chairs={2} />
+              <POSTable tableNumber="01" status="available" shape="circle" chairs={2} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Busy</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="busy" shape="circle" chairs={2} />
+              <POSTable tableNumber="01" status="busy" shape="circle" chairs={2} isActive />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs font-semibold text-gray-600 dark:text-gray-300">Reserved</p>
+            <div className="flex gap-4">
+              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={2} />
+              <POSTable tableNumber="01" status="reserved" shape="circle" chairs={2} isActive />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* NOTA FINAL */}
+      <div className="mt-8 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>📐 Especificaciones Pixel-Perfect:</strong>
+          <br />• Container: 160x160px, border: 2px, border-radius: 8px
+          <br />• Inner container: 134x134px, gap: 4px
+          <br />• Mesa Square/Circle: 64x64px | Rectangle/Oval: 80x64px
+          <br />• Silla: 28x22px, gap: 4px
+          <br />• Label: 10px / 12px line-height, font: SiesaBT
+          <br />• Total variantes implementadas: 60 (según diseño de Figma)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 6. CON INTERACCIÓN Y FOCUS
+// ============================================
+export const ConInteraccionYFocus: Story = {
+  args: { tableNumber: '01' },
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Click en la Mesa
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable
+            tableNumber="10"
+            status="available"
+            chairs={4}
+            onClick={() => alert('Mesa 10 seleccionada')}
+          />
+          <POSTable
+            tableNumber="11"
+            status="busy"
+            chairs={4}
+            onClick={() => alert('Mesa 11 seleccionada')}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Haz clic en las mesas para ver la interacción
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Focus Rings Adaptativos
+        </h3>
+        <div className="flex flex-wrap gap-6">
+          <POSTable
+            tableNumber="20"
+            status="available"
+            chairs={4}
+            onClick={() => {}}
+          />
+          <POSTable
+            tableNumber="21"
+            status="busy"
+            chairs={4}
+            onClick={() => {}}
+          />
+          <POSTable
+            tableNumber="22"
+            status="reserved"
+            chairs={4}
+            onClick={() => {}}
+          />
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Usa Tab para navegar y ver los focus rings adaptativos según el estado
+        </p>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+          Mesa Deshabilitada
+        </h3>
+        <POSTable
+          tableNumber="12"
+          status="available"
+          chairs={4}
+          disabled
+          onClick={() => alert('No debería ejecutarse')}
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+          Mesa deshabilitada (no clickeable, no focusable)
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 7. LAYOUT DE RESTAURANTE
+// ============================================
+export const LayoutDeRestaurante: Story = {
+  args: { tableNumber: '01' },
+  render: () => (
+    <div className="p-8 bg-background-secondary dark:bg-dark-bg-primary rounded-xl">
+      <h3 className="text-lg font-bold mb-6 text-gray-700 dark:text-white">
+        Vista de Restaurante
+      </h3>
+      <div className="grid grid-cols-3 md:grid-cols-4 gap-4">
+        <POSTable tableNumber="01" status="available" chairs={4} onClick={() => {}} />
+        <POSTable tableNumber="02" status="busy" chairs={4} onClick={() => {}} />
+        <POSTable tableNumber="03" status="available" chairs={2} onClick={() => {}} />
+        <POSTable tableNumber="04" status="reserved" chairs={6} onClick={() => {}} />
+        <POSTable tableNumber="05" status="available" shape="circle" chairs={4} onClick={() => {}} />
+        <POSTable tableNumber="06" status="busy" shape="circle" chairs={4} onClick={() => {}} />
+        <POSTable tableNumber="07" status="available" shape="rectangle" chairs={6} onClick={() => {}} />
+        <POSTable tableNumber="08" status="reserved" shape="rectangle" chairs={8} onClick={() => {}} />
+        <POSTable tableNumber="09" status="available" chairs={4} onClick={() => {}} />
+        <POSTable tableNumber="10" status="busy" chairs={4} onClick={() => {}} />
+        <POSTable tableNumber="11" status="available" chairs={2} onClick={() => {}} />
+        <POSTable tableNumber="12" status="reserved" shape="oval" chairs={8} onClick={() => {}} />
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 8. SIN SILLAS
+// ============================================
+export const SinSillas: Story = {
+  args: { tableNumber: '01' },
+  render: () => (
+    <div className="space-y-8 p-6">
+      <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+        Mesas Sin Sillas (Solo Indicadores)
+      </h3>
+      <div className="flex flex-wrap gap-6">
+        <POSTable tableNumber="A1" status="available" showChairs={false} />
+        <POSTable tableNumber="A2" status="busy" showChairs={false} />
+        <POSTable tableNumber="A3" status="reserved" showChairs={false} />
+        <POSTable tableNumber="A4" status="available" shape="circle" showChairs={false} />
+        <POSTable tableNumber="A5" status="busy" shape="rectangle" showChairs={false} />
+        <POSTable tableNumber="A6" status="reserved" shape="oval" showChairs={false} />
+      </div>
+      <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+        Vista simplificada sin sillas para layouts compactos
+      </p>
+    </div>
+  ),
+};