siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSConvention/POSConvention.tsx

@@ -1,129 +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>
-  );
-};
+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/src/components/POSConvention/POSConvention.types.ts

@@ -1,38 +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;
-}
+/**
+ * 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

@@ -1,123 +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`
+# 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

@@ -1,45 +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>
-);
+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>
+);