siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSConvention/POSConvention.stories.tsx

@@ -0,0 +1,235 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { POSConvention } from './POSConvention';
+
+/**
+ * Stories para POSConvention
+ *
+ * Componente de leyenda/convención para mostrar el estado de las mesas en el sistema POS.
+ * Basado en especificaciones de Figma (node-id: 4418-40139).
+ */
+const meta = {
+  title: 'Siesa UI Kit/POSConvention',
+  component: POSConvention,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Componente de leyenda para mostrar los estados de mesas en el sistema POS. Incluye 4 estados: Disponible (azul), Ocupada (naranja), Reservada (morado) y Fuera de Servicio (gris).',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['available', 'occupied', 'reserved', 'outOfService'],
+      description: 'Estado de la convención a mostrar',
+      table: {
+        type: { summary: 'ConventionStatus' },
+        defaultValue: { summary: 'available' },
+        category: 'Contenido',
+      },
+    },
+    className: {
+      control: 'text',
+      description: 'Clases CSS adicionales para el contenedor',
+      table: {
+        type: { summary: 'string' },
+        category: 'Apariencia',
+      },
+    },
+  },
+} satisfies Meta<typeof POSConvention>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// 1. PLAYGROUND INTERACTIVO
+// ============================================
+/**
+ * Playground interactivo para probar el componente con diferentes estados.
+ */
+export const Playground: Story = {
+  args: {
+    status: 'available',
+  },
+};
+
+// ============================================
+// 2. TODOS LOS ESTADOS
+// ============================================
+/**
+ * Muestra todos los estados disponibles del componente POSConvention.
+ */
+export const TodosLosEstados: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Estados de Mesas
+        </h3>
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-6">
+            <POSConvention status="available" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa lista para recibir clientes
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <POSConvention status="occupied" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa actualmente en uso
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <POSConvention status="reserved" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa con reservación confirmada
+            </span>
+          </div>
+          <div className="flex items-center gap-6">
+            <POSConvention status="outOfService" />
+            <span className="text-xs text-content-secondary dark:text-content-secondary">
+              Mesa no disponible temporalmente
+            </span>
+          </div>
+        </div>
+      </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>💡 Consejo:</strong>
+          <br />• Usa este componente para crear leyendas en la vista de mesas del POS
+          <br />• Los colores son consistentes con el diseño de Figma
+        </p>
+      </div>
+    </div>
+  ),
+};
+
+// ============================================
+// 3. LEYENDA COMPLETA (COMO EN FIGMA)
+// ============================================
+/**
+ * Leyenda completa con borde punteado como se muestra en Figma.
+ */
+export const LeyendaCompleta: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Leyenda de Convenciones (Figma)
+        </h3>
+
+        {/* Contenedor con borde punteado como en Figma */}
+        <div className="p-5 rounded-lg border-2 border-dashed border-primary-custom-300 dark:border-dark-border-custom inline-block">
+          <div className="flex flex-col gap-9">
+            <POSConvention status="available" />
+            <POSConvention status="occupied" />
+            <POSConvention status="reserved" />
+            <POSConvention status="outOfService" />
+          </div>
+        </div>
+      </div>
+
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Diseño exacto según especificaciones de Figma (node-id: 4418-40139)
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 4. USO EN HORIZONTAL
+// ============================================
+/**
+ * Ejemplo de uso horizontal para barras de estado o headers.
+ */
+export const UsoHorizontal: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Disposición Horizontal
+        </h3>
+
+        {/* Disposición horizontal con separadores */}
+        <div className="flex items-center gap-6 p-4 bg-white dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary">
+          <POSConvention status="available" />
+          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
+          <POSConvention status="occupied" />
+          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
+          <POSConvention status="reserved" />
+          <div className="w-px h-4 bg-border-primary dark:bg-dark-border-primary" />
+          <POSConvention status="outOfService" />
+        </div>
+      </div>
+
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Útil para barras de herramientas o encabezados de sección
+      </p>
+    </div>
+  ),
+};
+
+// ============================================
+// 5. INTEGRACIÓN CON CONTADORES
+// ============================================
+/**
+ * Ejemplo de integración con contadores de mesas.
+ */
+export const ConContadores: Story = {
+  render: () => (
+    <div className="space-y-8 p-6">
+      <div>
+        <h3 className="text-sm font-bold mb-4 text-content-primary dark:text-dark-content-primary">
+          Leyenda con Contadores
+        </h3>
+
+        <div className="flex flex-col gap-3 p-4 bg-white dark:bg-dark-bg-primary rounded-lg border border-border-primary dark:border-dark-border-primary">
+          <div className="flex items-center justify-between min-w-[200px]">
+            <POSConvention status="available" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              12
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <POSConvention status="occupied" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              8
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <POSConvention status="reserved" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              3
+            </span>
+          </div>
+          <div className="flex items-center justify-between">
+            <POSConvention status="outOfService" />
+            <span className="text-sm font-bold text-content-primary dark:text-dark-content-primary">
+              2
+            </span>
+          </div>
+
+          {/* Total */}
+          <div className="mt-2 pt-3 border-t border-border-primary dark:border-dark-border-primary flex items-center justify-between">
+            <span className="text-xs font-bold text-content-secondary dark:text-content-secondary">
+              Total de mesas
+            </span>
+            <span className="text-sm font-bold text-primary-custom-600 dark:text-primary-custom-600">
+              25
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <p className="text-xs text-content-secondary dark:text-content-secondary">
+        Ejemplo de uso con contadores para panel de resumen
+      </p>
+    </div>
+  ),
+};

package/src/components/POSConvention/POSConvention.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import type { POSConventionProps } from './POSConvention.types';
+import { ConventionIcon } from './icons';
+
+/**
+ * POSConvention - Componente de leyenda/convención para estados de mesas POS
+ *
+ * Muestra un indicador circular de color con su respectiva etiqueta según el diseño de Figma.
+ * Se usa típicamente para crear leyendas que explican el significado de colores en el sistema POS.
+ *
+ * **Colores según Figma (node-id: 4418-40139):**
+ *
+ * | Estado | Light Mode | Dark Mode |
+ * |--------|------------|-----------|
+ * | Available | #0e79fd (azul) | #93d1fd (azul claro) |
+ * | Occupied | #af460e (naranja) | #f5a927 (amarillo) |
+ * | Reserved | #7e22ce (morado) | #c084fc (morado claro) |
+ * | Out of Service | #3f3f46 (gris) | #a1a1aa (gris claro) |
+ *
+ * **Dimensiones según Figma:**
+ * - Icono: 16x16px (círculo con fill)
+ * - Texto: 12px (Paragraph/Tiny - text-xs)
+ * - Gap: 4px (gap-1)
+ * - Line-height: 16px (leading-4)
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Colores exactos de Figma para Light y Dark mode
+ * - Type safety con TypeScript estricto
+ * - Accesibilidad con aria-label
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Paragraph Tiny)
+ * @see docs/spacing.md - Sistema de espaciado
+ *
+ * @example
+ * ```tsx
+ * // Indicador de disponible
+ * <POSConvention status="available" />
+ *
+ * // Indicador de ocupada
+ * <POSConvention status="occupied" />
+ *
+ * // Leyenda completa en contenedor
+ * <div className="p-5 rounded-lg border border-dashed border-primary-custom-300">
+ *   <div className="flex flex-col gap-9">
+ *     <POSConvention status="available" />
+ *     <POSConvention status="occupied" />
+ *     <POSConvention status="reserved" />
+ *     <POSConvention status="outOfService" />
+ *   </div>
+ * </div>
+ * ```
+ */
+export const POSConvention: React.FC<POSConventionProps> = ({
+  status = 'available',
+  className = '',
+}) => {
+  // ===== CONFIGURACIÓN DE COLORES Y LABELS SEGÚN FIGMA =====
+  // Colores extraídos del nodo 4418-40139 (Light) y 4418-40349 (Dark) de Figma
+  // Variables de Figma: contentCustomPrimary, contentYellow, contentPurple, contentZinc
+  const conventionConfig = {
+    available: {
+      lightColor: '#0e79fd', // Azul - contentCustomPrimary Light
+      darkColor: '#93d1fd',  // Azul claro - contentCustomPrimary Dark
+      label: 'Disponible',
+    },
+    occupied: {
+      lightColor: '#af460e', // Naranja - contentOrange Light
+      darkColor: '#f5a927',  // Amarillo - contentYellow Dark
+      label: 'Ocupada',
+    },
+    reserved: {
+      lightColor: '#7e22ce', // Morado - contentPurple Light
+      darkColor: '#c084fc',  // Morado claro - contentPurple Dark
+      label: 'Reservada',
+    },
+    outOfService: {
+      lightColor: '#3f3f46', // Gris - contentZinc Light (zinc-700)
+      darkColor: '#a1a1aa',  // Gris claro - contentZinc Dark (zinc-400)
+      label: 'Fuera de Servicio',
+    },
+  };
+
+  const config = conventionConfig[status];
+
+  // ===== CLASES BASE =====
+  const baseClasses = `
+    inline-flex
+    items-center
+    gap-1
+    shrink-0
+  `;
+
+  // ===== COMBINAR CLASES =====
+  const finalClasses = [baseClasses, className]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <div
+      className={finalClasses}
+      role="presentation"
+      aria-label={`Estado: ${config.label}`}
+    >
+      {/* Icono circular 16x16 con colores para Light y Dark mode */}
+      <ConventionIcon lightColor={config.lightColor} darkColor={config.darkColor} />
+
+      {/* Label de texto según Figma: Paragraph/Tiny 12px */}
+      {/* Light: contentPrimary #18181b, Dark: contentPrimary #f4f4f5 */}
+      <span
+        className={`
+          text-xs
+          leading-4
+          font-normal
+          text-content-primary
+          dark:text-dark-content-primary
+          whitespace-nowrap
+        `
+          .replace(/\s+/g, ' ')
+          .trim()}
+      >
+        {config.label}
+      </span>
+    </div>
+  );
+};

package/{dist/components/POSConvention/POSConvention.types.d.ts → src/components/POSConvention/POSConvention.types.ts}

@@ -1,37 +1,38 @@
-/**
- * Tipo para los estados de convención posibles en el sistema POS
- *
- * Colores según Figma:
- *
- * | Estado | Light Mode | Dark Mode |
- * |--------|------------|-----------|
- * | `available` | #0e79fd (azul) | #93d1fd (azul claro) |
- * | `occupied` | #af460e (naranja) | #f5a927 (amarillo) |
- * | `reserved` | #7e22ce (morado) | #c084fc (morado claro) |
- * | `outOfService` | #3f3f46 (gris) | #a1a1aa (gris claro) |
- */
-export type ConventionStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
-/**
- * Props del componente POSConvention
- *
- * Componente de leyenda para mostrar el estado de las mesas en el sistema POS.
- * Muestra un indicador circular de color con su respectiva etiqueta.
- */
-export interface POSConventionProps {
-    /**
-     * Estado de la convención a mostrar
-     *
-     * - `available`: Disponible (Azul)
-     * - `occupied`: Ocupada (Naranja)
-     * - `reserved`: Reservada (Morado)
-     * - `outOfService`: F. de Servicio (Gris)
-     *
-     * @default 'available'
-     */
-    status?: ConventionStatus;
-    /**
-     * Clases CSS adicionales para el contenedor
-     */
-    className?: string;
-}
-//# sourceMappingURL=POSConvention.types.d.ts.map
+/**
+ * Tipo para los estados de convención posibles en el sistema POS
+ *
+ * Colores según Figma:
+ *
+ * | Estado | Light Mode | Dark Mode |
+ * |--------|------------|-----------|
+ * | `available` | #0e79fd (azul) | #93d1fd (azul claro) |
+ * | `occupied` | #af460e (naranja) | #f5a927 (amarillo) |
+ * | `reserved` | #7e22ce (morado) | #c084fc (morado claro) |
+ * | `outOfService` | #3f3f46 (gris) | #a1a1aa (gris claro) |
+ */
+export type ConventionStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
+
+/**
+ * Props del componente POSConvention
+ *
+ * Componente de leyenda para mostrar el estado de las mesas en el sistema POS.
+ * Muestra un indicador circular de color con su respectiva etiqueta.
+ */
+export interface POSConventionProps {
+  /**
+   * Estado de la convención a mostrar
+   *
+   * - `available`: Disponible (Azul)
+   * - `occupied`: Ocupada (Naranja)
+   * - `reserved`: Reservada (Morado)
+   * - `outOfService`: F. de Servicio (Gris)
+   *
+   * @default 'available'
+   */
+  status?: ConventionStatus;
+
+  /**
+   * Clases CSS adicionales para el contenedor
+   */
+  className?: string;
+}

package/src/components/POSConvention/README.md

@@ -0,0 +1,123 @@
+# POSConvention
+
+Componente de leyenda/convención para mostrar el estado de las mesas en el sistema POS.
+
+## Descripción
+
+El componente `POSConvention` muestra un indicador circular de color con su respectiva etiqueta según el diseño de Figma. Se usa típicamente para crear leyendas que explican el significado de colores en el sistema de Punto de Venta.
+
+## Instalación
+
+```tsx
+import { POSConvention } from '@siesa/ui-kit';
+```
+
+## Estados Disponibles
+
+| Estado | Light Mode | Dark Mode | Etiqueta | Uso |
+|--------|------------|-----------|----------|-----|
+| `available` | `#0e79fd` (azul) | `#93d1fd` (azul claro) | Disponible | Mesa lista para clientes |
+| `occupied` | `#af460e` (naranja) | `#f5a927` (amarillo) | Ocupada | Mesa actualmente en uso |
+| `reserved` | `#7e22ce` (morado) | `#c084fc` (morado claro) | Reservada | Mesa con reservación |
+| `outOfService` | `#3f3f46` (gris) | `#a1a1aa` (gris claro) | F. de Servicio | Mesa no disponible |
+
+## Uso Básico
+
+```tsx
+// Indicador individual
+<POSConvention status="available" />
+
+// Leyenda completa
+<div className="flex flex-col gap-4">
+  <POSConvention status="available" />
+  <POSConvention status="occupied" />
+  <POSConvention status="reserved" />
+  <POSConvention status="outOfService" />
+</div>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `status` | `'available' \| 'occupied' \| 'reserved' \| 'outOfService'` | `'available'` | Estado a mostrar |
+| `className` | `string` | `''` | Clases CSS adicionales |
+
+## Especificaciones de Figma
+
+- **Node ID**: `4418-40139`
+- **Icono**: 16x16px (círculo con fill)
+- **Texto**: 12px (Paragraph/Tiny)
+- **Gap**: 4px
+- **Line-height**: 16px
+
+## Dark Mode
+
+El componente soporta dark mode automáticamente:
+- El texto cambia de `content-primary` a `dark-content-primary`
+- Los colores de los iconos permanecen constantes para mantener la identificación visual
+
+## Ejemplos Avanzados
+
+### Leyenda con Borde Punteado (Como en Figma)
+
+```tsx
+<div className="p-5 rounded-lg border-2 border-dashed border-primary-custom-300">
+  <div className="flex flex-col gap-9">
+    <POSConvention status="available" />
+    <POSConvention status="occupied" />
+    <POSConvention status="reserved" />
+    <POSConvention status="outOfService" />
+  </div>
+</div>
+```
+
+### Leyenda Horizontal
+
+```tsx
+<div className="flex items-center gap-6">
+  <POSConvention status="available" />
+  <POSConvention status="occupied" />
+  <POSConvention status="reserved" />
+  <POSConvention status="outOfService" />
+</div>
+```
+
+### Con Contadores
+
+```tsx
+<div className="flex flex-col gap-3">
+  <div className="flex items-center justify-between">
+    <POSConvention status="available" />
+    <span className="font-bold">12</span>
+  </div>
+  <div className="flex items-center justify-between">
+    <POSConvention status="occupied" />
+    <span className="font-bold">8</span>
+  </div>
+</div>
+```
+
+## Accesibilidad
+
+- El componente incluye `role="presentation"` ya que es puramente visual
+- Incluye `aria-label` con el estado actual para lectores de pantalla
+- Los iconos SVG tienen `aria-hidden="true"`
+
+## Archivos del Componente
+
+```
+POSConvention/
+├── POSConvention.tsx        # Componente principal
+├── POSConvention.types.ts   # Tipos TypeScript
+├── POSConvention.stories.tsx # Stories de Storybook
+├── icons.tsx                # Icono SVG del círculo
+├── index.ts                 # Exports
+└── README.md                # Esta documentación
+```
+
+## Referencias
+
+- **Figma**: [POS Convention](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4418-40139)
+- **Documentación de Colores**: `docs/colors.md`
+- **Documentación de Tipografía**: `docs/typography.md`

package/src/components/POSConvention/icons.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+/**
+ * Icono de convención para POSConvention
+ *
+ * Círculo SVG de 16x16px con colores diferentes para Light y Dark mode.
+ * Basado en especificaciones de Figma:
+ * - Light mode: node-id 4418-40139
+ * - Dark mode: node-id 4418-40349
+ *
+ * Usa dos círculos superpuestos con clases CSS para alternar entre modos.
+ *
+ * @param lightColor - Color hexadecimal para Light mode
+ * @param darkColor - Color hexadecimal para Dark mode
+ * @param className - Clases CSS adicionales (opcional)
+ */
+export const ConventionIcon: React.FC<{
+  lightColor: string;
+  darkColor: string;
+  className?: string;
+}> = ({ lightColor, darkColor, className = '' }) => (
+  <svg
+    className={`w-4 h-4 shrink-0 ${className}`.trim()}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 16 16"
+    aria-hidden="true"
+  >
+    {/* Círculo para Light mode - visible por defecto, oculto en dark */}
+    <circle
+      cx="8"
+      cy="8"
+      r="8"
+      fill={lightColor}
+      className="dark:hidden"
+    />
+    {/* Círculo para Dark mode - oculto por defecto, visible en dark */}
+    <circle
+      cx="8"
+      cy="8"
+      r="8"
+      fill={darkColor}
+      className="hidden dark:block"
+    />
+  </svg>
+);

package/{dist/components/POSConvention/index.d.ts → src/components/POSConvention/index.ts}

@@ -1,4 +1,3 @@
-export { POSConvention } from './POSConvention';
-export { ConventionIcon } from './icons';
-export type { POSConventionProps, ConventionStatus } from './POSConvention.types';
-//# sourceMappingURL=index.d.ts.map
+export { POSConvention } from './POSConvention';
+export { ConventionIcon } from './icons';
+export type { POSConventionProps, ConventionStatus } from './POSConvention.types';