siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSTable/README.md

@@ -0,0 +1,286 @@
+# 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 pixel-perfect de Figma.
+
+## Características
+
+- 3 estados: Available (Disponible), Busy (Ocupada), Reserved (Reservada)
+- 4 formas de mesa: Square (Cuadrada), Circle (Circular), Rectangle (Rectangular), Oval (Ovalada)
+- Soporte para 2, 4, 6 u 8 sillas
+- Estado activo con fondo de color
+- Dark mode completo
+- Focus rings adaptativos por estado
+- Interactividad con onClick
+- Dimensiones pixel-perfect según Figma (160x160px)
+
+## Importación
+
+```tsx
+import { POSTable } from '@/components/POSTable';
+```
+
+## Uso Básico
+
+```tsx
+<POSTable
+  tableNumber="12"
+  status="available"
+  shape="square"
+  chairs={4}
+  onClick={() => console.log('Mesa seleccionada')}
+/>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `tableNumber` | `string` | **Requerido** | Número identificador de la mesa |
+| `status` | `'available' \| 'busy' \| 'reserved'` | `'available'` | Estado de la mesa |
+| `shape` | `'square' \| 'circle' \| 'rectangle' \| 'oval'` | `'square'` | Forma de la mesa |
+| `chairs` | `2 \| 4 \| 6 \| 8` | `4` | Número de sillas |
+| `showChairs` | `boolean` | `true` | Si muestra las sillas |
+| `isActive` | `boolean` | `false` | Estado activo con fondo de color |
+| `onClick` | `() => void` | `undefined` | Callback al hacer clic |
+| `disabled` | `boolean` | `false` | Si la mesa está deshabilitada |
+| `className` | `string` | `''` | Clases CSS adicionales |
+| `children` | `ReactNode` | `undefined` | Contenido adicional |
+
+## Estados
+
+### Available (Disponible)
+
+Mesa disponible para asignar a clientes.
+
+```tsx
+<POSTable tableNumber="01" status="available" chairs={4} />
+<POSTable tableNumber="01" status="available" chairs={4} isActive />
+```
+
+**Colores:**
+- Light: `#0e79fd` (azul primario)
+- Dark: `#93d1fd` (azul claro)
+- Active Bg Light: `#dbeefe` + Border `#bce4ff`
+- Active Bg Dark: `#1e3a5f`
+
+### Busy (Ocupada)
+
+Mesa actualmente ocupada por clientes.
+
+```tsx
+<POSTable tableNumber="02" status="busy" chairs={4} />
+<POSTable tableNumber="02" status="busy" chairs={4} isActive />
+```
+
+**Colores:**
+- Light: `#af460e` (naranja)
+- Dark: `#f5a927` (naranja/amarillo)
+- Active Bg Light: `#fed7aa`
+- Active Bg Dark: `#5c3a1e`
+
+### Reserved (Reservada)
+
+Mesa reservada para un cliente específico.
+
+```tsx
+<POSTable tableNumber="03" status="reserved" chairs={4} />
+<POSTable tableNumber="03" status="reserved" chairs={4} isActive />
+```
+
+**Colores:**
+- Light: `#7e22ce` (púrpura)
+- Dark: `#c084fc` (púrpura claro)
+- Active Bg Light: `#e9d5ff`
+- Active Bg Dark: `#3b1f5c`
+
+## Formas de Mesa
+
+### Square (Cuadrada)
+
+Mesa cuadrada de 64x64px con border-radius de 4px.
+
+```tsx
+<POSTable tableNumber="04" shape="square" chairs={4} />
+```
+
+### Circle (Circular)
+
+Mesa circular de 64x64px con border-radius completo.
+
+```tsx
+<POSTable tableNumber="05" shape="circle" chairs={4} />
+```
+
+### Rectangle (Rectangular)
+
+Mesa rectangular de 80x64px con border-radius de 4px.
+
+```tsx
+<POSTable tableNumber="06" shape="rectangle" chairs={6} />
+```
+
+### Oval (Ovalada)
+
+Mesa ovalada de 80x64px con border-radius de 24px. Corresponde al diseño "Rectangle Circle" de Figma.
+
+```tsx
+<POSTable tableNumber="07" shape="oval" chairs={8} />
+```
+
+## Configuraciones de Sillas
+
+### 2 Sillas
+
+Distribución: 1 arriba, 1 abajo.
+
+```tsx
+<POSTable tableNumber="08" chairs={2} />
+```
+
+### 4 Sillas
+
+Distribución: 1 arriba, 1 derecha, 1 abajo, 1 izquierda.
+
+```tsx
+<POSTable tableNumber="09" chairs={4} />
+```
+
+### 6 Sillas
+
+Distribución: 2 arriba, 1 derecha, 2 abajo, 1 izquierda.
+
+```tsx
+<POSTable tableNumber="10" chairs={6} />
+```
+
+### 8 Sillas
+
+Distribución: 2 arriba, 2 derecha, 2 abajo, 2 izquierda.
+
+```tsx
+<POSTable tableNumber="11" chairs={8} />
+```
+
+## Sin Sillas
+
+Para layouts compactos, puedes ocultar las sillas:
+
+```tsx
+<POSTable tableNumber="A1" showChairs={false} />
+```
+
+## Interactividad
+
+### Con Click
+
+```tsx
+<POSTable
+  tableNumber="12"
+  status="available"
+  onClick={() => alert('Mesa seleccionada')}
+/>
+```
+
+### Deshabilitada
+
+```tsx
+<POSTable
+  tableNumber="13"
+  status="busy"
+  disabled
+  onClick={() => {}} // No se ejecutará
+/>
+```
+
+## Dark Mode
+
+El componente se adapta automáticamente a dark mode con colores más brillantes para mejor visibilidad:
+
+```tsx
+// Los colores cambian automáticamente según el tema
+<POSTable tableNumber="14" status="available" chairs={4} />
+```
+
+## Layout de Restaurante
+
+Ejemplo de uso en una grilla de mesas:
+
+```tsx
+<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="reserved" chairs={6} onClick={() => {}} />
+  <POSTable tableNumber="04" status="available" shape="circle" chairs={4} onClick={() => {}} />
+  {/* ... más mesas */}
+</div>
+```
+
+## Especificaciones Técnicas
+
+### Dimensiones Pixel-Perfect
+
+- **Container**: 160x160px, border: 2px, border-radius: 8px
+- **Inner container**: 134x134px, gap: 4px
+- **Mesa Square/Circle**: 64x64px
+- **Mesa Rectangle/Oval**: 80x64px
+- **Silla**: 28x22px (respaldo: 16px, asiento: 14px)
+- **Gap**: 4px entre todos los elementos
+
+### Tipografía
+
+- **Label**: 10px / 12px line-height
+- **Font weight**: 400 (normal)
+- **Font family**: SiesaBT
+
+### Total de Variantes
+
+60 variantes implementadas según diseño de Figma:
+- 3 estados × 2 (enabled/actived) = 6
+- 4 formas (square, circle, rectangle, oval)
+- 4 configuraciones de sillas (2, 4, 6, 8)
+
+## Nota Importante sobre Colores
+
+⚠️ **COLORES ESPECÍFICOS DEL CLIENTE**: Este componente usa colores personalizados 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.
+
+## Accesibilidad
+
+- Etiquetas ARIA descriptivas: `aria-label="Mesa 12 - Disponible"`
+- Soporte para navegación con teclado (Tab)
+- Focus rings adaptativos según el estado
+- Contraste WCAG AA en todos los estados
+
+## Ver en Storybook
+
+Para ver todas las variantes y ejemplos interactivos:
+
+```bash
+npm run storybook
+```
+
+Navega a "Siesa UI Kit / POSTable"
+
+## Referencias
+
+- **Figma**: [POS Tables](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4348-24473&m=dev)
+- **Componente**: `src/components/POSTable/POSTable.tsx`
+- **Stories**: `src/components/POSTable/POSTable.stories.tsx`
+- **Types**: `src/components/POSTable/POSTable.types.ts`
+
+## Changelog
+
+### Versión 1.1.0 (2025-11-28)
+
+- Corrección de colores según especificaciones exactas de Figma
+- Available Light Mode corregido de `#154ca9` a `#0e79fd` (azul primario)
+- Available Active Background corregido de `#bce4ff` a `#dbeefe` + Border `#bce4ff`
+- Documentación actualizada con colores exactos
+- README completo agregado
+
+### Versión 1.0.0 (2025-11-24)
+
+- Implementación inicial pixel-perfect según Figma
+- 60 variantes (3 estados × 2 modos × 4 formas × múltiples sillas)
+- Dark mode completo
+- Focus rings adaptativos
+- Interactividad y accesibilidad

package/src/components/POSTable/index.ts

@@ -0,0 +1,7 @@
+export { POSTable } from './POSTable';
+export type {
+  POSTableProps,
+  TableStatus,
+  TableShape,
+  ChairCount,
+} from './POSTable.types';