siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSProductCard/POSProductCard.tsx

@@ -1,208 +1,208 @@
-import React from 'react';
-import type { POSProductCardProps } from './POSProductCard.types';
-import { Button } from '../Button';
-import { PlusIcon } from './icons';
-
-/**
- * Componente POSProductCard del sistema de diseño Siesa
- *
- * Card especializado para sistemas POS que muestra información de producto
- * con imagen, nombre, precio y botón de agregar. Diseñado para catálogos
- * de productos y selección rápida en punto de venta.
- *
- * **Estados disponibles:**
- * - `enabled`: Estado normal
- *   - Light: fondo blanco (#ffffff), texto negro (#18181b)
- *   - Dark: fondo oscuro (#18181b), texto claro (#f4f4f5)
- * - `active`: Estado seleccionado
- *   - Light: fondo azul claro (#dbeefe), texto azul (#0e79fd)
- *   - Dark: fondo azul oscuro (#112d57), texto celeste (#93d1fd)
- * - `disabled`: Estado deshabilitado con opacidad reducida
- *
- * **Características:**
- * - Imagen de producto con aspect ratio fijo y rounded-lg
- * - Nombre del producto con tipografía Label Small (14px Bold)
- * - Precio con tipografía Heading Small (24px Bold) y letter-spacing -2.5%
- * - Botón "Agregar" reutiliza el componente Button del sistema
- * - Soporte completo de dark mode pixel-perfect
- * - Transiciones suaves
- *
- * **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
- * - Tokens de color consistentes con Figma
- * - Estados hover y active completos
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma
- *
- * @example
- * ```tsx
- * // Card de producto normal
- * <POSProductCard
- *   image="/images/caprese.jpg"
- *   productName="Ensalada Caprese"
- *   price="$ 40.000"
- *   onAddClick={() => console.log('Producto agregado')}
- * />
- *
- * // Card de producto activo/seleccionado
- * <POSProductCard
- *   image="/images/caprese.jpg"
- *   productName="Ensalada Caprese"
- *   price="$ 40.000"
- *   active={true}
- * />
- *
- * // Card de producto deshabilitado
- * <POSProductCard
- *   image="/images/caprese.jpg"
- *   productName="Ensalada Caprese"
- *   price="$ 40.000"
- *   disabled={true}
- * />
- * ```
- */
-export const POSProductCard: React.FC<POSProductCardProps> = ({
-  image,
-  productName,
-  price,
-  buttonText = 'Agregar',
-  active = false,
-  disabled = false,
-  onAddClick,
-  onCardClick,
-  className = '',
-  ariaLabel,
-}) => {
-  // ===== CLASES BASE DEL CARD =====
-  const baseClasses = `
-    flex
-    flex-col
-    gap-2
-    p-3
-    rounded-lg
-    w-[170px]
-    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
-  `;
-
-  // ===== CLASES DE ESTADO DEL CARD =====
-  // Light: enabled=#ffffff, active=#dbeefe
-  // Dark: enabled=#18181b, active=#112d57
-  const stateClasses = disabled
-    ? `
-      bg-white
-      opacity-55
-      cursor-not-allowed
-      dark:bg-dark-bg-primary
-    `
-    : active
-      ? `
-      bg-primary-custom-100
-      cursor-pointer
-      dark:bg-dark-bg-custom
-    `
-      : `
-      bg-white
-      cursor-pointer
-      dark:bg-dark-bg-primary
-    `;
-
-  // ===== CLASES DE TEXTO SEGÚN ESTADO =====
-  // Light: enabled=#18181b, active=#0e79fd
-  // Dark: enabled=#f4f4f5, active=#93d1fd
-  const textClasses = disabled
-    ? `
-      text-content-primary
-      dark:text-dark-content-primary
-    `
-    : active
-      ? `
-      text-primary-custom-600
-      dark:text-dark-content-custom
-    `
-      : `
-      text-content-primary
-      dark:text-dark-content-primary
-    `;
-
-  // ===== COMBINAR CLASES DEL CARD =====
-  const cardClasses = [baseClasses, stateClasses, className]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== HANDLER DEL CLICK EN EL CARD =====
-  const handleCardClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    // Solo propagar si no se hizo clic en el botón
-    if ((event.target as HTMLElement).closest('button')) return;
-    onCardClick?.(event);
-  };
-
-  // ===== HANDLER DEL CLICK EN EL BOTÓN =====
-  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    if (disabled) return;
-    onAddClick?.(event);
-  };
-
-  return (
-    <div
-      className={cardClasses}
-      onClick={handleCardClick}
-      role="article"
-      aria-label={ariaLabel || `${productName} - ${price}`}
-      tabIndex={disabled ? -1 : 0}
-    >
-      {/* Sección de información del producto */}
-      <div className="flex flex-col gap-3 w-full">
-        {/* Imagen del producto */}
-        <div className="h-[88px] w-full rounded-lg overflow-hidden">
-          <img
-            src={image}
-            alt={productName}
-            className="w-full h-full object-cover"
-          />
-        </div>
-
-        {/* Datos del producto (nombre y precio) */}
-        <div className={`flex flex-col w-full font-bold ${textClasses}`.trim().replace(/\s+/g, ' ')}>
-          {/* Nombre del producto - Label Small (14px) */}
-          <div className="text-sm leading-5">
-            {productName}
-          </div>
-
-          {/* Precio - Heading Small (24px) con letter-spacing -2.5% (tracking-tighter) */}
-          <div className="text-2xl leading-8 tracking-tighter">
-            {price}
-          </div>
-        </div>
-      </div>
-
-      {/* Botón Agregar - Reutiliza el componente Button del sistema */}
-      <Button
-        type="default"
-        size="sm"
-        leftIcon={<PlusIcon className="w-4 h-4" />}
-        onClick={handleButtonClick}
-        disabled={disabled}
-        fullWidth
-        ariaLabel={`${buttonText} ${productName}`}
-      >
-        {buttonText}
-      </Button>
-    </div>
-  );
-};
+import React from 'react';
+import type { POSProductCardProps } from './POSProductCard.types';
+import { Button } from '../Button';
+import { PlusIcon } from './icons';
+
+/**
+ * Componente POSProductCard del sistema de diseño Siesa
+ *
+ * Card especializado para sistemas POS que muestra información de producto
+ * con imagen, nombre, precio y botón de agregar. Diseñado para catálogos
+ * de productos y selección rápida en punto de venta.
+ *
+ * **Estados disponibles:**
+ * - `enabled`: Estado normal
+ *   - Light: fondo blanco (#ffffff), texto negro (#18181b)
+ *   - Dark: fondo oscuro (#18181b), texto claro (#f4f4f5)
+ * - `active`: Estado seleccionado
+ *   - Light: fondo azul claro (#dbeefe), texto azul (#0e79fd)
+ *   - Dark: fondo azul oscuro (#112d57), texto celeste (#93d1fd)
+ * - `disabled`: Estado deshabilitado con opacidad reducida
+ *
+ * **Características:**
+ * - Imagen de producto con aspect ratio fijo y rounded-lg
+ * - Nombre del producto con tipografía Label Small (14px Bold)
+ * - Precio con tipografía Heading Small (24px Bold) y letter-spacing -2.5%
+ * - Botón "Agregar" reutiliza el componente Button del sistema
+ * - Soporte completo de dark mode pixel-perfect
+ * - Transiciones suaves
+ *
+ * **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
+ * - Tokens de color consistentes con Figma
+ * - Estados hover y active completos
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * // Card de producto normal
+ * <POSProductCard
+ *   image="/images/caprese.jpg"
+ *   productName="Ensalada Caprese"
+ *   price="$ 40.000"
+ *   onAddClick={() => console.log('Producto agregado')}
+ * />
+ *
+ * // Card de producto activo/seleccionado
+ * <POSProductCard
+ *   image="/images/caprese.jpg"
+ *   productName="Ensalada Caprese"
+ *   price="$ 40.000"
+ *   active={true}
+ * />
+ *
+ * // Card de producto deshabilitado
+ * <POSProductCard
+ *   image="/images/caprese.jpg"
+ *   productName="Ensalada Caprese"
+ *   price="$ 40.000"
+ *   disabled={true}
+ * />
+ * ```
+ */
+export const POSProductCard: React.FC<POSProductCardProps> = ({
+  image,
+  productName,
+  price,
+  buttonText = 'Agregar',
+  active = false,
+  disabled = false,
+  onAddClick,
+  onCardClick,
+  className = '',
+  ariaLabel,
+}) => {
+  // ===== CLASES BASE DEL CARD =====
+  const baseClasses = `
+    flex
+    flex-col
+    gap-2
+    p-3
+    rounded-lg
+    w-[170px]
+    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
+  `;
+
+  // ===== CLASES DE ESTADO DEL CARD =====
+  // Light: enabled=#ffffff, active=#dbeefe
+  // Dark: enabled=#18181b, active=#112d57
+  const stateClasses = disabled
+    ? `
+      bg-white
+      opacity-55
+      cursor-not-allowed
+      dark:bg-dark-bg-primary
+    `
+    : active
+      ? `
+      bg-primary-custom-100
+      cursor-pointer
+      dark:bg-dark-bg-custom
+    `
+      : `
+      bg-white
+      cursor-pointer
+      dark:bg-dark-bg-primary
+    `;
+
+  // ===== CLASES DE TEXTO SEGÚN ESTADO =====
+  // Light: enabled=#18181b, active=#0e79fd
+  // Dark: enabled=#f4f4f5, active=#93d1fd
+  const textClasses = disabled
+    ? `
+      text-content-primary
+      dark:text-dark-content-primary
+    `
+    : active
+      ? `
+      text-primary-custom-600
+      dark:text-dark-content-custom
+    `
+      : `
+      text-content-primary
+      dark:text-dark-content-primary
+    `;
+
+  // ===== COMBINAR CLASES DEL CARD =====
+  const cardClasses = [baseClasses, stateClasses, className]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  // ===== HANDLER DEL CLICK EN EL CARD =====
+  const handleCardClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    // Solo propagar si no se hizo clic en el botón
+    if ((event.target as HTMLElement).closest('button')) return;
+    onCardClick?.(event);
+  };
+
+  // ===== HANDLER DEL CLICK EN EL BOTÓN =====
+  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    if (disabled) return;
+    onAddClick?.(event);
+  };
+
+  return (
+    <div
+      className={cardClasses}
+      onClick={handleCardClick}
+      role="article"
+      aria-label={ariaLabel || `${productName} - ${price}`}
+      tabIndex={disabled ? -1 : 0}
+    >
+      {/* Sección de información del producto */}
+      <div className="flex flex-col gap-3 w-full">
+        {/* Imagen del producto */}
+        <div className="h-[88px] w-full rounded-lg overflow-hidden">
+          <img
+            src={image}
+            alt={productName}
+            className="w-full h-full object-cover"
+          />
+        </div>
+
+        {/* Datos del producto (nombre y precio) */}
+        <div className={`flex flex-col w-full font-bold ${textClasses}`.trim().replace(/\s+/g, ' ')}>
+          {/* Nombre del producto - Label Small (14px) */}
+          <div className="text-sm leading-5">
+            {productName}
+          </div>
+
+          {/* Precio - Heading Small (24px) con letter-spacing -2.5% (tracking-tighter) */}
+          <div className="text-2xl leading-8 tracking-tighter">
+            {price}
+          </div>
+        </div>
+      </div>
+
+      {/* Botón Agregar - Reutiliza el componente Button del sistema */}
+      <Button
+        type="default"
+        size="sm"
+        leftIcon={<PlusIcon className="w-4 h-4" />}
+        onClick={handleButtonClick}
+        disabled={disabled}
+        fullWidth
+        ariaLabel={`${buttonText} ${productName}`}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  );
+};

package/src/components/POSProductCard/POSProductCard.types.ts

@@ -1,76 +1,76 @@
-import type { MouseEvent } from 'react';
-
-/**
- * Props del componente POSProductCard
- *
- * Card especializado para sistemas de punto de venta (POS) que muestra
- * información de producto con imagen, nombre, precio y botón de agregar.
- *
- * El botón "Agregar" reutiliza el componente Button del sistema.
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- * @see src/components/Button - Componente Button reutilizado
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma
- */
-export interface POSProductCardProps {
-  /**
-   * URL de la imagen del producto
-   * Se muestra en la parte superior del card con aspect-ratio fijo
-   */
-  image: string;
-
-  /**
-   * Nombre del producto a mostrar
-   * Se muestra con tipografía Label Small (14px Bold)
-   */
-  productName: string;
-
-  /**
-   * Precio del producto formateado como string
-   * Se muestra con tipografía Heading Small (24px Bold)
-   * @example "$ 40.000"
-   */
-  price: string;
-
-  /**
-   * Texto del botón de acción
-   * @default "Agregar"
-   */
-  buttonText?: string;
-
-  /**
-   * Estado activo/seleccionado del card
-   * Cuando está activo, el fondo cambia a azul claro y el texto a azul
-   * @default false
-   */
-  active?: boolean;
-
-  /**
-   * Si el card está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Handler para cuando se hace clic en el botón "Agregar"
-   */
-  onAddClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-
-  /**
-   * Handler para cuando se hace clic en el card (no en el botón)
-   */
-  onCardClick?: (event: MouseEvent<HTMLDivElement>) => void;
-
-  /**
-   * Clases CSS adicionales para el card
-   */
-  className?: string;
-
-  /**
-   * Label de accesibilidad para el card
-   */
-  ariaLabel?: string;
-}
+import type { MouseEvent } from 'react';
+
+/**
+ * Props del componente POSProductCard
+ *
+ * Card especializado para sistemas de punto de venta (POS) que muestra
+ * información de producto con imagen, nombre, precio y botón de agregar.
+ *
+ * El botón "Agregar" reutiliza el componente Button del sistema.
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/shadows.md - Sistema de sombras
+ * @see src/components/Button - Componente Button reutilizado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336 - Diseño Figma
+ */
+export interface POSProductCardProps {
+  /**
+   * URL de la imagen del producto
+   * Se muestra en la parte superior del card con aspect-ratio fijo
+   */
+  image: string;
+
+  /**
+   * Nombre del producto a mostrar
+   * Se muestra con tipografía Label Small (14px Bold)
+   */
+  productName: string;
+
+  /**
+   * Precio del producto formateado como string
+   * Se muestra con tipografía Heading Small (24px Bold)
+   * @example "$ 40.000"
+   */
+  price: string;
+
+  /**
+   * Texto del botón de acción
+   * @default "Agregar"
+   */
+  buttonText?: string;
+
+  /**
+   * Estado activo/seleccionado del card
+   * Cuando está activo, el fondo cambia a azul claro y el texto a azul
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Si el card está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Handler para cuando se hace clic en el botón "Agregar"
+   */
+  onAddClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Handler para cuando se hace clic en el card (no en el botón)
+   */
+  onCardClick?: (event: MouseEvent<HTMLDivElement>) => void;
+
+  /**
+   * Clases CSS adicionales para el card
+   */
+  className?: string;
+
+  /**
+   * Label de accesibilidad para el card
+   */
+  ariaLabel?: string;
+}