siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSTable/POSTable.tsx

@@ -1,401 +1,401 @@
-import React from 'react';
-import type { POSTableProps } from './POSTable.types';
-
-/**
- * POSTable - Sistema de visualización de mesas de restaurante
- *
- * Componente para mostrar mesas de restaurante con diferentes estados
- * (disponible, ocupada, reservada) y configuraciones de sillas según diseño de Figma.
- *
- * ⚠️ IMPORTANTE - COLORES PERSONALIZADOS DEL CLIENTE:
- * Este componente usa colores específicos hardcodeados según el diseño del cliente.
- * Estos NO son tokens del sistema de diseño general, sino colores únicos para POSTable.
- * Esta es una EXCEPCIÓN JUSTIFICADA similar a los iconos personalizados de POSTable.
- *
- * ESPECIFICACIONES PIXEL-PERFECT DE FIGMA:
- *
- * Colores exactos (ESPECÍFICOS DEL CLIENTE):
- *
- * LIGHT MODE:
- * - Available (Azul): #0e79fd (border, mesa, silla, texto) - Azul primario del sistema
- * - Available Active: Bg #dbeefe + Border #bce4ff (cuando isActive=true)
- * - Busy (Naranja): #af460e (border, mesa, silla, texto)
- * - Busy Active: Bg #fed7aa + Border #fed7aa (cuando isActive=true)
- * - Reserved (Púrpura): #7e22ce (border, mesa, silla, texto)
- * - Reserved Active: Bg #e9d5ff + Border #e9d5ff (cuando isActive=true)
- *
- * DARK MODE (colores más brillantes para mejor visibilidad):
- * - Available (Azul claro): #93d1fd (border, mesa, silla, texto)
- * - Available Active: Bg #1e3a5f + Border #1e3a5f (cuando isActive=true)
- * - Busy (Naranja/Amarillo): #f5a927 (border, mesa, silla, texto)
- * - Busy Active: Bg #5c3a1e + Border #5c3a1e (cuando isActive=true)
- * - Reserved (Púrpura claro): #c084fc (border, mesa, silla, texto)
- * - Reserved Active: Bg #3b1f5c + Border #3b1f5c (cuando isActive=true)
- *
- * - Texto del label: Mismo color del estado (está FUERA de la mesa según Figma)
- *
- * Dimensiones exactas:
- * - Container: 160x160px, border-radius: 8px, border: 2px
- * - Inner container: 134x134px, gap: 4px
- * - Mesa Square: 64x64px, border-radius: 4px
- * - Mesa Circle: 64x64px, border-radius: 9999px
- * - Mesa Rectangle: 80x64px, border-radius: 4px
- * - Mesa Oval: 80x64px, border-radius: 24px
- * - Silla: 28x22px, border-radius: 4px
- * - Silla Respaldo (top): 28x16px (72.73% height)
- * - Silla Asiento (bottom): 24x14px (85.71% width, 63.64% height)
- * - Gap: 4px entre todos los elementos
- *
- * Tipografía:
- * - Label: 10px / 12px line-height, weight: 400, font: SiesaBT
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Focus rings adaptativos para light y dark mode
- * - Valores exactos de Figma con notación [px]
- * - Type safety con TypeScript estricto
- * - Accesibilidad con ARIA labels
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- *
- * @example
- * ```tsx
- * <POSTable
- *   tableNumber="12"
- *   status="available"
- *   shape="square"
- *   chairs={4}
- *   onClick={() => console.log('Mesa seleccionada')}
- * />
- * ```
- */
-export const POSTable: React.FC<POSTableProps> = ({
-  tableNumber,
-  status = 'available',
-  shape = 'square',
-  chairs = 4,
-  showChairs = true,
-  isActive = false,
-  onClick,
-  className = '',
-  disabled = false,
-  children,
-}) => {
-  // ===== COLORES POR ESTADO (VALORES EXACTOS DE FIGMA) =====
-  // ⚠️ NOTA: Estos colores son ESPECÍFICOS del cliente (excepción justificada)
-  // NO son tokens del sistema general de diseño
-  // Light Mode: #0e79fd (azul primario), #af460e (naranja), #7e22ce (púrpura)
-  // Dark Mode:  #93d1fd (azul claro), #f5a927 (naranja/amarillo), #c084fc (púrpura claro)
-  const statusColors = {
-    available: {
-      // Enabled state - Light: #0e79fd (azul primario del sistema), Dark: #93d1fd
-      border: 'border-[#0e79fd]',
-      borderDark: 'dark:border-[#93d1fd]',
-      bgEnabled: 'bg-transparent',
-      bgEnabledDark: 'dark:bg-transparent',
-      // Actived state - Light: Bg #dbeefe + Border #bce4ff según Figma
-      bgActive: 'bg-[#dbeefe]',
-      bgActiveDark: 'dark:bg-[#1e3a5f]',
-      borderActive: 'border-[#bce4ff]',
-      borderActiveDark: 'dark:border-[#1e3a5f]',
-      // Table and chairs - Light: #0e79fd, Dark: #93d1fd
-      table: 'bg-[#0e79fd]',
-      tableDark: 'dark:bg-[#93d1fd]',
-      chair: 'bg-[#0e79fd]',
-      chairDark: 'dark:bg-[#93d1fd]',
-      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
-      text: 'text-[#0e79fd]',
-      textDark: 'dark:text-[#93d1fd]',
-      // Focus ring
-      focusRing: 'focus:ring-[#93d1fd]',
-      focusRingDark: 'dark:focus:ring-[#0e79fd]',
-    },
-    busy: {
-      // Enabled state - Light: #af460e, Dark: #f5a927
-      border: 'border-[#af460e]',
-      borderDark: 'dark:border-[#f5a927]',
-      bgEnabled: 'bg-transparent',
-      bgEnabledDark: 'dark:bg-transparent',
-      // Actived state
-      bgActive: 'bg-[#fed7aa]',
-      bgActiveDark: 'dark:bg-[#5c3a1e]',
-      borderActive: 'border-[#fed7aa]',
-      borderActiveDark: 'dark:border-[#5c3a1e]',
-      // Table and chairs - Light: #af460e, Dark: #f5a927
-      table: 'bg-[#af460e]',
-      tableDark: 'dark:bg-[#f5a927]',
-      chair: 'bg-[#af460e]',
-      chairDark: 'dark:bg-[#f5a927]',
-      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
-      text: 'text-[#af460e]',
-      textDark: 'dark:text-[#f5a927]',
-      // Focus ring
-      focusRing: 'focus:ring-[#f5a927]',
-      focusRingDark: 'dark:focus:ring-[#af460e]',
-    },
-    reserved: {
-      // Enabled state - Light: #7e22ce, Dark: #c084fc
-      border: 'border-[#7e22ce]',
-      borderDark: 'dark:border-[#c084fc]',
-      bgEnabled: 'bg-transparent',
-      bgEnabledDark: 'dark:bg-transparent',
-      // Actived state
-      bgActive: 'bg-[#e9d5ff]',
-      bgActiveDark: 'dark:bg-[#3b1f5c]',
-      borderActive: 'border-[#e9d5ff]',
-      borderActiveDark: 'dark:border-[#3b1f5c]',
-      // Table and chairs - Light: #7e22ce, Dark: #c084fc
-      table: 'bg-[#7e22ce]',
-      tableDark: 'dark:bg-[#c084fc]',
-      chair: 'bg-[#7e22ce]',
-      chairDark: 'dark:bg-[#c084fc]',
-      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
-      text: 'text-[#7e22ce]',
-      textDark: 'dark:text-[#c084fc]',
-      // Focus ring
-      focusRing: 'focus:ring-[#c084fc]',
-      focusRingDark: 'dark:focus:ring-[#7e22ce]',
-    },
-  };
-
-  // ===== CLASES DE FORMA (ESPECIFICACIONES EXACTAS DE FIGMA) =====
-  const shapeClasses = {
-    square: {
-      container: 'rounded-[4px]',
-      table: 'w-[64px] h-[64px] rounded-[4px]',
-    },
-    circle: {
-      container: 'rounded-[9999px]',
-      table: 'w-[64px] h-[64px] rounded-[9999px]',
-    },
-    rectangle: {
-      container: 'rounded-[4px]',
-      table: 'w-[80px] h-[64px] rounded-[4px]',
-    },
-    oval: {
-      container: 'rounded-[24px]',
-      table: 'w-[80px] h-[64px] rounded-[24px]',
-    },
-  };
-
-  // ===== COMPONENTE SILLA (ESPECIFICACIONES EXACTAS DE FIGMA) =====
-  const Chair: React.FC<{ rotation: number }> = ({ rotation }) => (
-    <div
-      className="w-[28px] h-[22px]"
-      style={{ transform: `rotate(${rotation}deg)` }}
-      aria-hidden="true"
-    >
-      {/* Respaldo (parte superior) - 72.73% height */}
-      <div
-        className={`
-          absolute
-          top-0
-          left-0
-          right-0
-          h-[16px]
-          rounded-t-[4px]
-          ${statusColors[status].chair}
-          ${statusColors[status].chairDark}
-        `}
-      />
-      {/* Asiento (parte inferior) - 85.71% width, 63.64% height */}
-      <div
-        className={`
-          absolute
-          bottom-0
-          left-[7.14%]
-          right-[7.14%]
-          h-[14px]
-          rounded-b-[4px]
-          ${statusColors[status].chair}
-          ${statusColors[status].chairDark}
-        `}
-      />
-    </div>
-  );
-
-  // ===== HANDLER DE CLICK =====
-  const handleClick = () => {
-    if (!disabled && onClick) {
-      onClick();
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
-    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onClick) {
-      e.preventDefault();
-      onClick();
-    }
-  };
-
-  // ===== CLASES DEL CONTAINER (160x160px según Figma) =====
-  const containerClasses = [
-    // Dimensiones exactas del container
-    'w-[160px]',
-    'h-[160px]',
-    'shrink-0',
-
-    // Estructura
-    'relative',
-    'flex',
-    'flex-col',
-    'items-center',
-    'justify-center',
-    'p-0',
-
-    // Borde (2px según Figma)
-    'border-2',
-    'box-border',
-
-    // Border radius (8px según Figma)
-    'rounded-[8px]',
-
-    // Colores del borde y fondo según estado
-    isActive ? statusColors[status].borderActive : statusColors[status].border,
-    isActive ? statusColors[status].borderActiveDark : statusColors[status].borderDark,
-    isActive ? statusColors[status].bgActive : statusColors[status].bgEnabled,
-    isActive ? statusColors[status].bgActiveDark : statusColors[status].bgEnabledDark,
-
-    // Focus rings adaptativos (siguiendo patrón de Button)
-    'focus:outline-none',
-    'focus:ring-2',
-    statusColors[status].focusRing,
-    statusColors[status].focusRingDark,
-    'focus:ring-offset-2',
-    'dark:focus:ring-offset-dark-bg-primary',
-
-    // Transiciones
-    'transition-all',
-    'duration-150',
-
-    // Interactividad
-    onClick && !disabled ? 'cursor-pointer' : '',
-    onClick && !disabled ? 'hover:scale-105' : '',
-    onClick && !disabled ? 'active:scale-95' : '',
-    disabled ? 'opacity-50 cursor-not-allowed' : '',
-
-    // Clases adicionales
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== RENDER =====
-  return (
-    <button
-      className={containerClasses}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      disabled={disabled}
-      type="button"
-      aria-label={`Mesa ${tableNumber} - ${
-        status === 'available' ? 'Disponible' : status === 'busy' ? 'Ocupada' : 'Reservada'
-      }`}
-    >
-      {/* INNER CONTAINER (134x134px según Figma) */}
-      <div className="flex flex-col gap-[4px] items-center justify-center w-[134px] h-[134px] shrink-0">
-        {/* FILA DE SILLAS SUPERIORES */}
-        {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (
-          <div className="flex gap-[4px] items-center justify-center shrink-0">
-            {chairs >= 6 && (
-              <>
-                <Chair rotation={0} />
-                <Chair rotation={0} />
-              </>
-            )}
-            {chairs === 2 && <Chair rotation={0} />}
-            {chairs === 4 && <Chair rotation={0} />}
-          </div>
-        )}
-
-        {/* FILA CENTRAL CON MESA Y SILLAS LATERALES */}
-        <div className="flex gap-[4px] items-center justify-center shrink-0">
-          {/* COLUMNA IZQUIERDA - SILLAS */}
-          {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (
-            <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
-              {chairs >= 8 && (
-                <>
-                  <Chair rotation={270} />
-                  <Chair rotation={270} />
-                </>
-              )}
-              {(chairs === 4 || chairs === 6) && <Chair rotation={270} />}
-            </div>
-          )}
-
-          {/* MESA (sin label - el label va fuera según Figma) */}
-          <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
-            <div className="flex items-center shrink-0">
-              <div
-                className={`
-                  ${shapeClasses[shape].table}
-                  ${statusColors[status].table}
-                  ${statusColors[status].tableDark}
-                  shrink-0
-                `}
-              />
-            </div>
-          </div>
-
-          {/* COLUMNA DERECHA - SILLAS */}
-          {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (
-            <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
-              {chairs >= 8 && (
-                <>
-                  <Chair rotation={90} />
-                  <Chair rotation={90} />
-                </>
-              )}
-              {(chairs === 4 || chairs === 6) && <Chair rotation={90} />}
-            </div>
-          )}
-        </div>
-
-        {/* FILA DE SILLAS INFERIORES */}
-        {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (
-          <div className="flex gap-[4px] items-center justify-center shrink-0">
-            {chairs >= 6 && (
-              <>
-                <Chair rotation={180} />
-                <Chair rotation={180} />
-              </>
-            )}
-            {chairs === 2 && <Chair rotation={180} />}
-            {chairs === 4 && <Chair rotation={180} />}
-          </div>
-        )}
-      </div>
-
-      {/* LABEL DE NÚMERO DE MESA - Debajo del conjunto mesa+sillas según Figma */}
-      <div
-        className={`
-          flex
-          flex-col
-          justify-center
-          leading-[0]
-          not-italic
-          overflow-ellipsis
-          overflow-hidden
-          min-w-full
-          text-center
-          whitespace-nowrap
-          shrink-0
-          text-[10px]
-          font-normal
-          ${statusColors[status].text}
-          ${statusColors[status].textDark}
-        `}
-      >
-        <p className="leading-[12px] overflow-ellipsis overflow-hidden">
-          Mesa {tableNumber}
-        </p>
-        {children}
-      </div>
-    </button>
-  );
-};
+import React from 'react';
+import type { POSTableProps } from './POSTable.types';
+
+/**
+ * POSTable - Sistema de visualización de mesas de restaurante
+ *
+ * Componente para mostrar mesas de restaurante con diferentes estados
+ * (disponible, ocupada, reservada) y configuraciones de sillas según diseño de Figma.
+ *
+ * ⚠️ IMPORTANTE - COLORES PERSONALIZADOS DEL CLIENTE:
+ * Este componente usa colores específicos hardcodeados según el diseño del cliente.
+ * Estos NO son tokens del sistema de diseño general, sino colores únicos para POSTable.
+ * Esta es una EXCEPCIÓN JUSTIFICADA similar a los iconos personalizados de POSTable.
+ *
+ * ESPECIFICACIONES PIXEL-PERFECT DE FIGMA:
+ *
+ * Colores exactos (ESPECÍFICOS DEL CLIENTE):
+ *
+ * LIGHT MODE:
+ * - Available (Azul): #0e79fd (border, mesa, silla, texto) - Azul primario del sistema
+ * - Available Active: Bg #dbeefe + Border #bce4ff (cuando isActive=true)
+ * - Busy (Naranja): #af460e (border, mesa, silla, texto)
+ * - Busy Active: Bg #fed7aa + Border #fed7aa (cuando isActive=true)
+ * - Reserved (Púrpura): #7e22ce (border, mesa, silla, texto)
+ * - Reserved Active: Bg #e9d5ff + Border #e9d5ff (cuando isActive=true)
+ *
+ * DARK MODE (colores más brillantes para mejor visibilidad):
+ * - Available (Azul claro): #93d1fd (border, mesa, silla, texto)
+ * - Available Active: Bg #1e3a5f + Border #1e3a5f (cuando isActive=true)
+ * - Busy (Naranja/Amarillo): #f5a927 (border, mesa, silla, texto)
+ * - Busy Active: Bg #5c3a1e + Border #5c3a1e (cuando isActive=true)
+ * - Reserved (Púrpura claro): #c084fc (border, mesa, silla, texto)
+ * - Reserved Active: Bg #3b1f5c + Border #3b1f5c (cuando isActive=true)
+ *
+ * - Texto del label: Mismo color del estado (está FUERA de la mesa según Figma)
+ *
+ * Dimensiones exactas:
+ * - Container: 160x160px, border-radius: 8px, border: 2px
+ * - Inner container: 134x134px, gap: 4px
+ * - Mesa Square: 64x64px, border-radius: 4px
+ * - Mesa Circle: 64x64px, border-radius: 9999px
+ * - Mesa Rectangle: 80x64px, border-radius: 4px
+ * - Mesa Oval: 80x64px, border-radius: 24px
+ * - Silla: 28x22px, border-radius: 4px
+ * - Silla Respaldo (top): 28x16px (72.73% height)
+ * - Silla Asiento (bottom): 24x14px (85.71% width, 63.64% height)
+ * - Gap: 4px entre todos los elementos
+ *
+ * Tipografía:
+ * - Label: 10px / 12px line-height, weight: 400, font: SiesaBT
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Focus rings adaptativos para light y dark mode
+ * - Valores exactos de Figma con notación [px]
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con ARIA labels
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * <POSTable
+ *   tableNumber="12"
+ *   status="available"
+ *   shape="square"
+ *   chairs={4}
+ *   onClick={() => console.log('Mesa seleccionada')}
+ * />
+ * ```
+ */
+export const POSTable: React.FC<POSTableProps> = ({
+  tableNumber,
+  status = 'available',
+  shape = 'square',
+  chairs = 4,
+  showChairs = true,
+  isActive = false,
+  onClick,
+  className = '',
+  disabled = false,
+  children,
+}) => {
+  // ===== COLORES POR ESTADO (VALORES EXACTOS DE FIGMA) =====
+  // ⚠️ NOTA: Estos colores son ESPECÍFICOS del cliente (excepción justificada)
+  // NO son tokens del sistema general de diseño
+  // Light Mode: #0e79fd (azul primario), #af460e (naranja), #7e22ce (púrpura)
+  // Dark Mode:  #93d1fd (azul claro), #f5a927 (naranja/amarillo), #c084fc (púrpura claro)
+  const statusColors = {
+    available: {
+      // Enabled state - Light: #0e79fd (azul primario del sistema), Dark: #93d1fd
+      border: 'border-[#0e79fd]',
+      borderDark: 'dark:border-[#93d1fd]',
+      bgEnabled: 'bg-transparent',
+      bgEnabledDark: 'dark:bg-transparent',
+      // Actived state - Light: Bg #dbeefe + Border #bce4ff según Figma
+      bgActive: 'bg-[#dbeefe]',
+      bgActiveDark: 'dark:bg-[#1e3a5f]',
+      borderActive: 'border-[#bce4ff]',
+      borderActiveDark: 'dark:border-[#1e3a5f]',
+      // Table and chairs - Light: #0e79fd, Dark: #93d1fd
+      table: 'bg-[#0e79fd]',
+      tableDark: 'dark:bg-[#93d1fd]',
+      chair: 'bg-[#0e79fd]',
+      chairDark: 'dark:bg-[#93d1fd]',
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: 'text-[#0e79fd]',
+      textDark: 'dark:text-[#93d1fd]',
+      // Focus ring
+      focusRing: 'focus:ring-[#93d1fd]',
+      focusRingDark: 'dark:focus:ring-[#0e79fd]',
+    },
+    busy: {
+      // Enabled state - Light: #af460e, Dark: #f5a927
+      border: 'border-[#af460e]',
+      borderDark: 'dark:border-[#f5a927]',
+      bgEnabled: 'bg-transparent',
+      bgEnabledDark: 'dark:bg-transparent',
+      // Actived state
+      bgActive: 'bg-[#fed7aa]',
+      bgActiveDark: 'dark:bg-[#5c3a1e]',
+      borderActive: 'border-[#fed7aa]',
+      borderActiveDark: 'dark:border-[#5c3a1e]',
+      // Table and chairs - Light: #af460e, Dark: #f5a927
+      table: 'bg-[#af460e]',
+      tableDark: 'dark:bg-[#f5a927]',
+      chair: 'bg-[#af460e]',
+      chairDark: 'dark:bg-[#f5a927]',
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: 'text-[#af460e]',
+      textDark: 'dark:text-[#f5a927]',
+      // Focus ring
+      focusRing: 'focus:ring-[#f5a927]',
+      focusRingDark: 'dark:focus:ring-[#af460e]',
+    },
+    reserved: {
+      // Enabled state - Light: #7e22ce, Dark: #c084fc
+      border: 'border-[#7e22ce]',
+      borderDark: 'dark:border-[#c084fc]',
+      bgEnabled: 'bg-transparent',
+      bgEnabledDark: 'dark:bg-transparent',
+      // Actived state
+      bgActive: 'bg-[#e9d5ff]',
+      bgActiveDark: 'dark:bg-[#3b1f5c]',
+      borderActive: 'border-[#e9d5ff]',
+      borderActiveDark: 'dark:border-[#3b1f5c]',
+      // Table and chairs - Light: #7e22ce, Dark: #c084fc
+      table: 'bg-[#7e22ce]',
+      tableDark: 'dark:bg-[#c084fc]',
+      chair: 'bg-[#7e22ce]',
+      chairDark: 'dark:bg-[#c084fc]',
+      // Text (mismo color del estado - label está FUERA de la mesa según Figma)
+      text: 'text-[#7e22ce]',
+      textDark: 'dark:text-[#c084fc]',
+      // Focus ring
+      focusRing: 'focus:ring-[#c084fc]',
+      focusRingDark: 'dark:focus:ring-[#7e22ce]',
+    },
+  };
+
+  // ===== CLASES DE FORMA (ESPECIFICACIONES EXACTAS DE FIGMA) =====
+  const shapeClasses = {
+    square: {
+      container: 'rounded-[4px]',
+      table: 'w-[64px] h-[64px] rounded-[4px]',
+    },
+    circle: {
+      container: 'rounded-[9999px]',
+      table: 'w-[64px] h-[64px] rounded-[9999px]',
+    },
+    rectangle: {
+      container: 'rounded-[4px]',
+      table: 'w-[80px] h-[64px] rounded-[4px]',
+    },
+    oval: {
+      container: 'rounded-[24px]',
+      table: 'w-[80px] h-[64px] rounded-[24px]',
+    },
+  };
+
+  // ===== COMPONENTE SILLA (ESPECIFICACIONES EXACTAS DE FIGMA) =====
+  const Chair: React.FC<{ rotation: number }> = ({ rotation }) => (
+    <div
+      className="w-[28px] h-[22px]"
+      style={{ transform: `rotate(${rotation}deg)` }}
+      aria-hidden="true"
+    >
+      {/* Respaldo (parte superior) - 72.73% height */}
+      <div
+        className={`
+          absolute
+          top-0
+          left-0
+          right-0
+          h-[16px]
+          rounded-t-[4px]
+          ${statusColors[status].chair}
+          ${statusColors[status].chairDark}
+        `}
+      />
+      {/* Asiento (parte inferior) - 85.71% width, 63.64% height */}
+      <div
+        className={`
+          absolute
+          bottom-0
+          left-[7.14%]
+          right-[7.14%]
+          h-[14px]
+          rounded-b-[4px]
+          ${statusColors[status].chair}
+          ${statusColors[status].chairDark}
+        `}
+      />
+    </div>
+  );
+
+  // ===== HANDLER DE CLICK =====
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onClick) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+
+  // ===== CLASES DEL CONTAINER (160x160px según Figma) =====
+  const containerClasses = [
+    // Dimensiones exactas del container
+    'w-[160px]',
+    'h-[160px]',
+    'shrink-0',
+
+    // Estructura
+    'relative',
+    'flex',
+    'flex-col',
+    'items-center',
+    'justify-center',
+    'p-0',
+
+    // Borde (2px según Figma)
+    'border-2',
+    'box-border',
+
+    // Border radius (8px según Figma)
+    'rounded-[8px]',
+
+    // Colores del borde y fondo según estado
+    isActive ? statusColors[status].borderActive : statusColors[status].border,
+    isActive ? statusColors[status].borderActiveDark : statusColors[status].borderDark,
+    isActive ? statusColors[status].bgActive : statusColors[status].bgEnabled,
+    isActive ? statusColors[status].bgActiveDark : statusColors[status].bgEnabledDark,
+
+    // Focus rings adaptativos (siguiendo patrón de Button)
+    'focus:outline-none',
+    'focus:ring-2',
+    statusColors[status].focusRing,
+    statusColors[status].focusRingDark,
+    'focus:ring-offset-2',
+    'dark:focus:ring-offset-dark-bg-primary',
+
+    // Transiciones
+    'transition-all',
+    'duration-150',
+
+    // Interactividad
+    onClick && !disabled ? 'cursor-pointer' : '',
+    onClick && !disabled ? 'hover:scale-105' : '',
+    onClick && !disabled ? 'active:scale-95' : '',
+    disabled ? 'opacity-50 cursor-not-allowed' : '',
+
+    // Clases adicionales
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== RENDER =====
+  return (
+    <button
+      className={containerClasses}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      disabled={disabled}
+      type="button"
+      aria-label={`Mesa ${tableNumber} - ${
+        status === 'available' ? 'Disponible' : status === 'busy' ? 'Ocupada' : 'Reservada'
+      }`}
+    >
+      {/* INNER CONTAINER (134x134px según Figma) */}
+      <div className="flex flex-col gap-[4px] items-center justify-center w-[134px] h-[134px] shrink-0">
+        {/* FILA DE SILLAS SUPERIORES */}
+        {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (
+          <div className="flex gap-[4px] items-center justify-center shrink-0">
+            {chairs >= 6 && (
+              <>
+                <Chair rotation={0} />
+                <Chair rotation={0} />
+              </>
+            )}
+            {chairs === 2 && <Chair rotation={0} />}
+            {chairs === 4 && <Chair rotation={0} />}
+          </div>
+        )}
+
+        {/* FILA CENTRAL CON MESA Y SILLAS LATERALES */}
+        <div className="flex gap-[4px] items-center justify-center shrink-0">
+          {/* COLUMNA IZQUIERDA - SILLAS */}
+          {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (
+            <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
+              {chairs >= 8 && (
+                <>
+                  <Chair rotation={270} />
+                  <Chair rotation={270} />
+                </>
+              )}
+              {(chairs === 4 || chairs === 6) && <Chair rotation={270} />}
+            </div>
+          )}
+
+          {/* MESA (sin label - el label va fuera según Figma) */}
+          <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
+            <div className="flex items-center shrink-0">
+              <div
+                className={`
+                  ${shapeClasses[shape].table}
+                  ${statusColors[status].table}
+                  ${statusColors[status].tableDark}
+                  shrink-0
+                `}
+              />
+            </div>
+          </div>
+
+          {/* COLUMNA DERECHA - SILLAS */}
+          {showChairs && (chairs === 4 || chairs === 6 || chairs === 8) && (
+            <div className="flex flex-col gap-[4px] items-start justify-center shrink-0">
+              {chairs >= 8 && (
+                <>
+                  <Chair rotation={90} />
+                  <Chair rotation={90} />
+                </>
+              )}
+              {(chairs === 4 || chairs === 6) && <Chair rotation={90} />}
+            </div>
+          )}
+        </div>
+
+        {/* FILA DE SILLAS INFERIORES */}
+        {showChairs && (chairs === 2 || chairs === 4 || chairs === 6 || chairs === 8) && (
+          <div className="flex gap-[4px] items-center justify-center shrink-0">
+            {chairs >= 6 && (
+              <>
+                <Chair rotation={180} />
+                <Chair rotation={180} />
+              </>
+            )}
+            {chairs === 2 && <Chair rotation={180} />}
+            {chairs === 4 && <Chair rotation={180} />}
+          </div>
+        )}
+      </div>
+
+      {/* LABEL DE NÚMERO DE MESA - Debajo del conjunto mesa+sillas según Figma */}
+      <div
+        className={`
+          flex
+          flex-col
+          justify-center
+          leading-[0]
+          not-italic
+          overflow-ellipsis
+          overflow-hidden
+          min-w-full
+          text-center
+          whitespace-nowrap
+          shrink-0
+          text-[10px]
+          font-normal
+          ${statusColors[status].text}
+          ${statusColors[status].textDark}
+        `}
+      >
+        <p className="leading-[12px] overflow-ellipsis overflow-hidden">
+          Mesa {tableNumber}
+        </p>
+        {children}
+      </div>
+    </button>
+  );
+};