siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/POSTable/POSTable.tsx

@@ -1,401 +0,0 @@
-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>
-  );
-};

package/src/components/POSTable/POSTable.types.ts

@@ -1,83 +0,0 @@
-import type { ReactNode } from 'react';
-
-/**
- * Estado de la mesa de restaurante
- */
-export type TableStatus = 'available' | 'busy' | 'reserved';
-
-/**
- * Forma de la mesa
- */
-export type TableShape = 'square' | 'circle' | 'rectangle' | 'oval';
-
-/**
- * Configuración de número de sillas
- */
-export type ChairCount = 2 | 4 | 6 | 8;
-
-/**
- * Props del componente POSTable (Restaurant Table)
- */
-export interface POSTableProps {
-  /**
-   * Número de la mesa
-   * @example "01"
-   */
-  tableNumber: string;
-
-  /**
-   * Estado de la mesa
-   * @default 'available'
-   */
-  status?: TableStatus;
-
-  /**
-   * Forma de la mesa
-   * - square: Mesa cuadrada 64x64px con border-radius 4px
-   * - circle: Mesa circular 64x64px con border-radius completo
-   * - rectangle: Mesa rectangular 80x64px con border-radius 4px
-   * - oval: Mesa ovalada 80x64px con border-radius 24px
-   * @default 'square'
-   */
-  shape?: TableShape;
-
-  /**
-   * Número de sillas alrededor de la mesa
-   * @default 4
-   */
-  chairs?: ChairCount;
-
-  /**
-   * Si muestra las sillas alrededor de la mesa
-   * @default true
-   */
-  showChairs?: boolean;
-
-  /**
-   * Si la mesa está en estado activo (con fondo de color)
-   * Estado "actived" muestra fondo de color según Figma
-   * @default false
-   */
-  isActive?: boolean;
-
-  /**
-   * Callback cuando se hace clic en la mesa
-   */
-  onClick?: () => void;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Si la mesa está deshabilitada (no clickeable)
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Contenido adicional a mostrar dentro de la mesa
-   */
-  children?: ReactNode;
-}