siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSLocationButton/POSLocationButton.tsx

@@ -1,247 +1,247 @@
-import React from 'react';
-import type { POSLocationButtonProps } from './POSLocationButton.types';
-import { CheckIcon, XMarkIcon, CalendarIcon, NoSymbolIcon, UsersIcon } from './icons';
-
-/**
- * POSLocationButton del sistema de diseño Siesa
- *
- * Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad
- * de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.
- *
- * **Estados de disponibilidad (status):**
- * - `available`: Disponible (verde/lime) con icono ✓
- * - `occupied`: Ocupada (naranja/yellow) con icono ✗
- * - `reserved`: Reservada (morado/purple) con icono 📅
- * - `outOfService`: Fuera de servicio (gris/zinc) con icono 🚫
- *
- * **Estados visuales (state):**
- * - `enabled`: Estado normal con fondo blanco/dark
- * - `actived`: Estado seleccionado con fondo coloreado
- *
- * **Características:**
- * - Ancho flexible: por defecto ocupa el 100% del contenedor (fullWidth=true)
- * - Altura fija: 68px (optimizado para interfaces POS)
- * - Muestra nombre de ubicación y capacidad (ej: "1/8 mesas")
- * - Badge visual con icono y texto del estado
- * - Dark mode completo en todos los estados
- * - Focus ring adaptativo
- * - Transiciones suaves
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - 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
- * // Ubicación disponible
- * <POSLocationButton
- *   locationName="Antejardín"
- *   status="available"
- *   capacity={{ current: 1, total: 8 }}
- *   onClick={() => console.log('Seleccionado')}
- * />
- *
- * // Ubicación ocupada y seleccionada
- * <POSLocationButton
- *   locationName="Terraza"
- *   status="occupied"
- *   state="actived"
- *   capacity={{ current: 5, total: 8 }}
- * />
- *
- * // Ubicación reservada
- * <POSLocationButton
- *   locationName="Salón Principal"
- *   status="reserved"
- *   capacity={{ current: 3, total: 12 }}
- * />
- *
- * // Fuera de servicio
- * <POSLocationButton
- *   locationName="Bar"
- *   status="outOfService"
- *   disabled
- * />
- * ```
- */
-export const POSLocationButton: React.FC<POSLocationButtonProps> = ({
-  locationName,
-  status = 'available',
-  state = 'enabled',
-  capacity,
-  onClick,
-  disabled = false,
-  className = '',
-  ariaLabel,
-  fullWidth = true,
-}) => {
-  // ===== CONFIGURACIÓN DE COLORES POR STATUS =====
-  // Mapeo de colores según especificaciones de Figma (pixel-perfect)
-  const statusConfig = {
-    available: {
-      // Azul Primary Custom (según Figma: #0e79fd)
-      textColor: 'text-primary-custom-600 dark:text-primary-custom-600',
-      badgeBg: 'bg-primary-custom-100 dark:bg-blue-900/30',
-      badgeText: 'text-primary-custom-600 dark:text-blue-400',
-      activedBg: 'bg-primary-custom-100 dark:bg-blue-900/30',
-      icon: CheckIcon,
-      badgeLabel: 'Disponible',
-    },
-    occupied: {
-      // Naranja/Yellow (según Figma: #af460e para texto, #fcedc9 para fondo)
-      textColor: 'text-[#af460e] dark:text-orange-400',
-      badgeBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',
-      badgeText: 'text-[#af460e] dark:text-orange-400',
-      activedBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',
-      icon: XMarkIcon,
-      badgeLabel: 'Ocupada',
-    },
-    reserved: {
-      // Morado/Purple (según Figma: #7e22ce para texto, #f3e8ff para fondo)
-      textColor: 'text-[#7e22ce] dark:text-fuchsia-400',
-      badgeBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',
-      badgeText: 'text-[#7e22ce] dark:text-purple-400',
-      activedBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',
-      icon: CalendarIcon,
-      badgeLabel: 'Reservada',
-    },
-    outOfService: {
-      // Gris/Zinc (según Figma: #3f3f46 para texto, #f4f4f5 para fondo)
-      textColor: 'text-[#3f3f46] dark:text-zinc-400',
-      badgeBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',
-      badgeText: 'text-content-tertiary dark:text-zinc-400',
-      activedBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',
-      icon: NoSymbolIcon,
-      badgeLabel: 'F. de Servicio',
-    },
-  };
-
-  const config = statusConfig[status];
-  const StatusIcon = config.icon;
-
-  // ===== CLASES DE FONDO SEGÚN STATE =====
-  const backgroundClasses =
-    state === 'actived'
-      ? config.activedBg // Fondo coloreado cuando está activo
-      : 'bg-white dark:bg-dark-bg-primary'; // Fondo blanco/dark cuando está enabled
-
-  // ===== CLASES DE ANCHO =====
-  const widthClasses = fullWidth ? 'w-full' : 'w-[189px]';
-
-  // ===== CLASES BASE =====
-  const baseClasses = `
-    flex
-    flex-col
-    items-stretch
-    justify-between
-    ${widthClasses}
-    h-[68px]
-    p-2
-    rounded-lg
-    cursor-pointer
-    transition-all
-    duration-150
-    focus:outline-none
-    focus:ring-2
-    focus:ring-primary-custom-400
-    focus:ring-offset-2
-    dark:focus:ring-dark-border-custom
-    dark:focus:ring-offset-dark-bg-primary
-    hover:shadow-md
-    active:scale-[0.98]
-    disabled:opacity-50
-    disabled:cursor-not-allowed
-    disabled:pointer-events-none
-  `;
-
-  // ===== COMBINAR CLASES =====
-  const buttonClasses = [baseClasses, backgroundClasses, className]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== FORMATEAR TEXTO DE CAPACIDAD =====
-  const capacityText = capacity
-    ? `${capacity.current}/${capacity.total} mesas`
-    : null;
-
-  return (
-    <button
-      className={buttonClasses}
-      onClick={onClick}
-      disabled={disabled}
-      aria-label={ariaLabel || `${locationName} - ${config.badgeLabel}`}
-      type="button"
-    >
-      {/* ===== TÍTULO (Nombre de ubicación) ===== */}
-      <div
-        className={`
-          text-base
-          font-bold
-          leading-6
-          ${config.textColor}
-        `
-          .replace(/\s+/g, ' ')
-          .trim()}
-      >
-        {locationName}
-      </div>
-
-      {/* ===== CONTENIDO (Capacidad + Badge) ===== */}
-      <div className="flex items-center justify-between">
-        {/* Capacidad (izquierda) */}
-        {capacityText && (
-          <div className="flex items-center gap-1">
-            <UsersIcon className={config.textColor} />
-            <span
-              className={`
-                text-[10px]
-                leading-[12px]
-                ${config.textColor}
-              `
-                .replace(/\s+/g, ' ')
-                .trim()}
-            >
-              {capacityText}
-            </span>
-          </div>
-        )}
-
-        {/* Badge (derecha) */}
-        <div
-          className={`
-            inline-flex
-            items-center
-            gap-1
-            px-1.5
-            py-1
-            rounded-md
-            ${config.badgeBg}
-          `
-            .replace(/\s+/g, ' ')
-            .trim()}
-        >
-          <StatusIcon className={config.badgeText} />
-          <span
-            className={`
-              text-xs
-              leading-4
-              ${config.badgeText}
-            `
-              .replace(/\s+/g, ' ')
-              .trim()}
-          >
-            {config.badgeLabel}
-          </span>
-        </div>
-      </div>
-    </button>
-  );
-};
+import React from 'react';
+import type { POSLocationButtonProps } from './POSLocationButton.types';
+import { CheckIcon, XMarkIcon, CalendarIcon, NoSymbolIcon, UsersIcon } from './icons';
+
+/**
+ * POSLocationButton del sistema de diseño Siesa
+ *
+ * Botón especializado para punto de venta (POS) que muestra el estado de disponibilidad
+ * de una ubicación física (mesa, salón, terraza, etc.) con indicadores visuales claros.
+ *
+ * **Estados de disponibilidad (status):**
+ * - `available`: Disponible (verde/lime) con icono ✓
+ * - `occupied`: Ocupada (naranja/yellow) con icono ✗
+ * - `reserved`: Reservada (morado/purple) con icono 📅
+ * - `outOfService`: Fuera de servicio (gris/zinc) con icono 🚫
+ *
+ * **Estados visuales (state):**
+ * - `enabled`: Estado normal con fondo blanco/dark
+ * - `actived`: Estado seleccionado con fondo coloreado
+ *
+ * **Características:**
+ * - Ancho flexible: por defecto ocupa el 100% del contenedor (fullWidth=true)
+ * - Altura fija: 68px (optimizado para interfaces POS)
+ * - Muestra nombre de ubicación y capacidad (ej: "1/8 mesas")
+ * - Badge visual con icono y texto del estado
+ * - Dark mode completo en todos los estados
+ * - Focus ring adaptativo
+ * - Transiciones suaves
+ *
+ * Mejores prácticas implementadas:
+ * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+ * - Dark mode con estrategia 'class' (darkMode: 'class')
+ * - Tokens de color consistentes con la documentación
+ * - 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
+ * // Ubicación disponible
+ * <POSLocationButton
+ *   locationName="Antejardín"
+ *   status="available"
+ *   capacity={{ current: 1, total: 8 }}
+ *   onClick={() => console.log('Seleccionado')}
+ * />
+ *
+ * // Ubicación ocupada y seleccionada
+ * <POSLocationButton
+ *   locationName="Terraza"
+ *   status="occupied"
+ *   state="actived"
+ *   capacity={{ current: 5, total: 8 }}
+ * />
+ *
+ * // Ubicación reservada
+ * <POSLocationButton
+ *   locationName="Salón Principal"
+ *   status="reserved"
+ *   capacity={{ current: 3, total: 12 }}
+ * />
+ *
+ * // Fuera de servicio
+ * <POSLocationButton
+ *   locationName="Bar"
+ *   status="outOfService"
+ *   disabled
+ * />
+ * ```
+ */
+export const POSLocationButton: React.FC<POSLocationButtonProps> = ({
+  locationName,
+  status = 'available',
+  state = 'enabled',
+  capacity,
+  onClick,
+  disabled = false,
+  className = '',
+  ariaLabel,
+  fullWidth = true,
+}) => {
+  // ===== CONFIGURACIÓN DE COLORES POR STATUS =====
+  // Mapeo de colores según especificaciones de Figma (pixel-perfect)
+  const statusConfig = {
+    available: {
+      // Azul Primary Custom (según Figma: #0e79fd)
+      textColor: 'text-primary-custom-600 dark:text-primary-custom-600',
+      badgeBg: 'bg-primary-custom-100 dark:bg-blue-900/30',
+      badgeText: 'text-primary-custom-600 dark:text-blue-400',
+      activedBg: 'bg-primary-custom-100 dark:bg-blue-900/30',
+      icon: CheckIcon,
+      badgeLabel: 'Disponible',
+    },
+    occupied: {
+      // Naranja/Yellow (según Figma: #af460e para texto, #fcedc9 para fondo)
+      textColor: 'text-[#af460e] dark:text-orange-400',
+      badgeBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',
+      badgeText: 'text-[#af460e] dark:text-orange-400',
+      activedBg: 'bg-[#fcedc9] dark:bg-yellow-900/30',
+      icon: XMarkIcon,
+      badgeLabel: 'Ocupada',
+    },
+    reserved: {
+      // Morado/Purple (según Figma: #7e22ce para texto, #f3e8ff para fondo)
+      textColor: 'text-[#7e22ce] dark:text-fuchsia-400',
+      badgeBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',
+      badgeText: 'text-[#7e22ce] dark:text-purple-400',
+      activedBg: 'bg-[#f3e8ff] dark:bg-purple-900/30',
+      icon: CalendarIcon,
+      badgeLabel: 'Reservada',
+    },
+    outOfService: {
+      // Gris/Zinc (según Figma: #3f3f46 para texto, #f4f4f5 para fondo)
+      textColor: 'text-[#3f3f46] dark:text-zinc-400',
+      badgeBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',
+      badgeText: 'text-content-tertiary dark:text-zinc-400',
+      activedBg: 'bg-[#f4f4f5] dark:bg-zinc-800/30',
+      icon: NoSymbolIcon,
+      badgeLabel: 'F. de Servicio',
+    },
+  };
+
+  const config = statusConfig[status];
+  const StatusIcon = config.icon;
+
+  // ===== CLASES DE FONDO SEGÚN STATE =====
+  const backgroundClasses =
+    state === 'actived'
+      ? config.activedBg // Fondo coloreado cuando está activo
+      : 'bg-white dark:bg-dark-bg-primary'; // Fondo blanco/dark cuando está enabled
+
+  // ===== CLASES DE ANCHO =====
+  const widthClasses = fullWidth ? 'w-full' : 'w-[189px]';
+
+  // ===== CLASES BASE =====
+  const baseClasses = `
+    flex
+    flex-col
+    items-stretch
+    justify-between
+    ${widthClasses}
+    h-[68px]
+    p-2
+    rounded-lg
+    cursor-pointer
+    transition-all
+    duration-150
+    focus:outline-none
+    focus:ring-2
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    hover:shadow-md
+    active:scale-[0.98]
+    disabled:opacity-50
+    disabled:cursor-not-allowed
+    disabled:pointer-events-none
+  `;
+
+  // ===== COMBINAR CLASES =====
+  const buttonClasses = [baseClasses, backgroundClasses, className]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== FORMATEAR TEXTO DE CAPACIDAD =====
+  const capacityText = capacity
+    ? `${capacity.current}/${capacity.total} mesas`
+    : null;
+
+  return (
+    <button
+      className={buttonClasses}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={ariaLabel || `${locationName} - ${config.badgeLabel}`}
+      type="button"
+    >
+      {/* ===== TÍTULO (Nombre de ubicación) ===== */}
+      <div
+        className={`
+          text-base
+          font-bold
+          leading-6
+          ${config.textColor}
+        `
+          .replace(/\s+/g, ' ')
+          .trim()}
+      >
+        {locationName}
+      </div>
+
+      {/* ===== CONTENIDO (Capacidad + Badge) ===== */}
+      <div className="flex items-center justify-between">
+        {/* Capacidad (izquierda) */}
+        {capacityText && (
+          <div className="flex items-center gap-1">
+            <UsersIcon className={config.textColor} />
+            <span
+              className={`
+                text-[10px]
+                leading-[12px]
+                ${config.textColor}
+              `
+                .replace(/\s+/g, ' ')
+                .trim()}
+            >
+              {capacityText}
+            </span>
+          </div>
+        )}
+
+        {/* Badge (derecha) */}
+        <div
+          className={`
+            inline-flex
+            items-center
+            gap-1
+            px-1.5
+            py-1
+            rounded-md
+            ${config.badgeBg}
+          `
+            .replace(/\s+/g, ' ')
+            .trim()}
+        >
+          <StatusIcon className={config.badgeText} />
+          <span
+            className={`
+              text-xs
+              leading-4
+              ${config.badgeText}
+            `
+              .replace(/\s+/g, ' ')
+              .trim()}
+          >
+            {config.badgeLabel}
+          </span>
+        </div>
+      </div>
+    </button>
+  );
+};

package/src/components/POSLocationButton/POSLocationButton.types.ts

@@ -1,87 +1,87 @@
-import type { MouseEvent } from 'react';
-
-/**
- * Estado de disponibilidad de la ubicación POS
- * - available: Disponible (verde/lime)
- * - occupied: Ocupada (naranja/yellow)
- * - reserved: Reservada (morado/purple)
- * - outOfService: Fuera de servicio (gris/zinc)
- */
-export type POSLocationStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
-
-/**
- * Estado visual del botón
- * - enabled: Estado normal (fondo blanco/dark-bg-primary)
- * - actived: Estado activo/seleccionado (fondo con color del badge)
- */
-export type POSLocationState = 'enabled' | 'actived';
-
-/**
- * Información de capacidad de la ubicación
- */
-export interface POSLocationCapacity {
-  /**
-   * Número actual de mesas/espacios ocupados
-   */
-  current: number;
-
-  /**
-   * Total de mesas/espacios disponibles
-   */
-  total: number;
-}
-
-/**
- * Props del componente POSLocationButton
- */
-export interface POSLocationButtonProps {
-  /**
-   * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Salón Principal")
-   */
-  locationName: string;
-
-  /**
-   * Estado de disponibilidad de la ubicación
-   * @default 'available'
-   */
-  status?: POSLocationStatus;
-
-  /**
-   * Estado visual del botón (enabled o actived)
-   * @default 'enabled'
-   */
-  state?: POSLocationState;
-
-  /**
-   * Información de capacidad (mesas ocupadas/total)
-   * Ejemplo: { current: 1, total: 8 } → "1/8 mesas"
-   */
-  capacity?: POSLocationCapacity;
-
-  /**
-   * Función a ejecutar al hacer clic en el botón
-   */
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-
-  /**
-   * Si el botón está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Label para accesibilidad (ARIA)
-   */
-  ariaLabel?: string;
-
-  /**
-   * Si el botón ocupa todo el ancho disponible del contenedor padre
-   * @default true
-   */
-  fullWidth?: boolean;
-}
+import type { MouseEvent } from 'react';
+
+/**
+ * Estado de disponibilidad de la ubicación POS
+ * - available: Disponible (verde/lime)
+ * - occupied: Ocupada (naranja/yellow)
+ * - reserved: Reservada (morado/purple)
+ * - outOfService: Fuera de servicio (gris/zinc)
+ */
+export type POSLocationStatus = 'available' | 'occupied' | 'reserved' | 'outOfService';
+
+/**
+ * Estado visual del botón
+ * - enabled: Estado normal (fondo blanco/dark-bg-primary)
+ * - actived: Estado activo/seleccionado (fondo con color del badge)
+ */
+export type POSLocationState = 'enabled' | 'actived';
+
+/**
+ * Información de capacidad de la ubicación
+ */
+export interface POSLocationCapacity {
+  /**
+   * Número actual de mesas/espacios ocupados
+   */
+  current: number;
+
+  /**
+   * Total de mesas/espacios disponibles
+   */
+  total: number;
+}
+
+/**
+ * Props del componente POSLocationButton
+ */
+export interface POSLocationButtonProps {
+  /**
+   * Nombre de la ubicación (ej: "Antejardín", "Terraza", "Salón Principal")
+   */
+  locationName: string;
+
+  /**
+   * Estado de disponibilidad de la ubicación
+   * @default 'available'
+   */
+  status?: POSLocationStatus;
+
+  /**
+   * Estado visual del botón (enabled o actived)
+   * @default 'enabled'
+   */
+  state?: POSLocationState;
+
+  /**
+   * Información de capacidad (mesas ocupadas/total)
+   * Ejemplo: { current: 1, total: 8 } → "1/8 mesas"
+   */
+  capacity?: POSLocationCapacity;
+
+  /**
+   * Función a ejecutar al hacer clic en el botón
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Si el botón está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Label para accesibilidad (ARIA)
+   */
+  ariaLabel?: string;
+
+  /**
+   * Si el botón ocupa todo el ancho disponible del contenedor padre
+   * @default true
+   */
+  fullWidth?: boolean;
+}