siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSProductCard/POSProductCard.tsx

@@ -0,0 +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>
+  );
+};

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

@@ -0,0 +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;
+}

package/src/components/POSProductCard/README.md

@@ -0,0 +1,179 @@
+# POSProductCard
+
+Card de producto especializado para sistemas de punto de venta (POS). Muestra información de producto con imagen, nombre, precio y botón de agregar.
+
+## Características
+
+- Imagen de producto con aspect ratio fijo (146x88px)
+- Nombre del producto (Label Small - 14px Bold)
+- Precio con tipografía destacada (Heading Small - 24px Bold, tracking-tighter)
+- **Botón "Agregar" reutiliza el componente Button del sistema**
+- 3 estados: enabled, active, disabled
+- **Soporte completo de dark mode pixel-perfect**
+- Focus rings adaptativos para accesibilidad
+- Transiciones suaves
+
+## Uso Básico
+
+```tsx
+import { POSProductCard } from './components/POSProductCard';
+
+// Card normal
+<POSProductCard
+  image="/images/ensalada.jpg"
+  productName="Ensalada Caprese"
+  price="$ 40.000"
+  onAddClick={() => console.log('Producto agregado')}
+/>
+
+// Card activo/seleccionado
+<POSProductCard
+  image="/images/ensalada.jpg"
+  productName="Ensalada Caprese"
+  price="$ 40.000"
+  active={true}
+/>
+
+// Card deshabilitado
+<POSProductCard
+  image="/images/ensalada.jpg"
+  productName="Ensalada Caprese"
+  price="$ 40.000"
+  disabled={true}
+/>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `image` | `string` | - | URL de la imagen del producto |
+| `productName` | `string` | - | Nombre del producto |
+| `price` | `string` | - | Precio formateado (ej: "$ 40.000") |
+| `buttonText` | `string` | "Agregar" | Texto del botón de acción |
+| `active` | `boolean` | `false` | Estado activo/seleccionado |
+| `disabled` | `boolean` | `false` | Estado deshabilitado |
+| `onAddClick` | `function` | - | Handler del clic en botón |
+| `onCardClick` | `function` | - | Handler del clic en card |
+| `className` | `string` | - | Clases CSS adicionales |
+| `ariaLabel` | `string` | - | Label de accesibilidad |
+
+## Estados y Colores
+
+### Enabled (Normal)
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Fondo card | `#ffffff` | `#18181b` |
+| Texto | `#18181b` | `#f4f4f5` |
+
+### Active (Seleccionado)
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Fondo card | `#dbeefe` | `#112d57` |
+| Texto | `#0e79fd` | `#93d1fd` |
+
+### Disabled
+
+- Opacidad reducida (55%)
+- No interactivo
+- Para productos no disponibles
+
+### Botón "Agregar" (Dark Mode Invertido)
+
+El botón invierte sus colores en dark mode según especificación de Figma:
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Fondo | `#0e79fd` (azul) | `#bfe2fe` (celeste claro) |
+| Texto | `#eff8ff` (blanco) | `#0e79fd` (azul) |
+| Borde | `#3c9bf6` | `#93d1fd` |
+
+## Especificaciones de Figma
+
+| Propiedad | Valor |
+|-----------|-------|
+| **Tamaño** | 170 x 212px |
+| **Padding** | 12px (p-3) |
+| **Gap** | 8px (gap-2) |
+| **Border Radius** | 8px (rounded-lg) |
+| **Imagen** | 146 x 88px |
+| **Tipografía nombre** | Label Small (14px Bold) |
+| **Tipografía precio** | Heading Small (24px Bold, tracking-tighter) |
+| **Botón** | Button default size xs (reutilizado) |
+
+## Reutilización del Componente Button
+
+El botón "Agregar" **reutiliza el componente Button existente** del sistema. Esto garantiza:
+
+- Consistencia visual con el resto del sistema
+- Mantenimiento centralizado de estilos
+- Soporte automático de dark mode
+- Focus rings y accesibilidad heredados
+
+```tsx
+<Button
+  type="default"
+  size="xs"
+  leftIcon={<PlusIcon />}
+  onClick={handleButtonClick}
+  disabled={disabled}
+  fullWidth
+>
+  {buttonText}
+</Button>
+```
+
+## Tokens de Tailwind Utilizados
+
+### Card
+
+```js
+// Card - Light Mode
+'bg-white'              // Fondo enabled
+'primary-custom-100'    // Fondo active (#dbeefe)
+'content-primary'       // Texto enabled (#18181b)
+'primary-custom-600'    // Texto active (#0e79fd)
+
+// Card - Dark Mode
+'dark-bg-primary'       // Fondo enabled (#18181b)
+'dark-bg-custom'        // Fondo active (#112d57)
+'dark-content-primary'  // Texto enabled (#f4f4f5)
+'dark-content-custom'   // Texto active (#93d1fd)
+```
+
+### Botón (Dark Mode Invertido)
+
+```js
+// Botón - Light Mode
+'bg-primary-custom-600'        // Fondo (#0e79fd)
+'text-primary-inverse-content' // Texto (#eff8ff)
+'border-primary-inverse-border' // Borde (#3c9bf6)
+
+// Botón - Dark Mode (invertido)
+'dark:bg-dark-bg-inverse'       // Fondo (#bfe2fe)
+'dark:text-dark-content-inverse' // Texto (#0e79fd)
+'dark:border-dark-border-inverse' // Borde (#93d1fd)
+```
+
+## Archivos
+
+```
+POSProductCard/
+├── POSProductCard.tsx         # Componente principal
+├── POSProductCard.types.ts    # Tipos TypeScript
+├── POSProductCard.stories.tsx # Stories de Storybook
+├── icons.tsx                  # Icono Plus
+├── index.ts                   # Exports
+└── README.md                  # Esta documentación
+```
+
+## Referencias
+
+- [Figma: POS Product Card](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4368-31336)
+- [src/components/Button](../Button) - Componente Button reutilizado
+- [docs/colors.md](../../docs/colors.md) - Sistema de colores
+- [docs/typography.md](../../docs/typography.md) - Tipografía
+- [docs/spacing.md](../../docs/spacing.md) - Espaciado
+- [docs/shadows.md](../../docs/shadows.md) - Sombras

package/src/components/POSProductCard/icons.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * Icono Plus (heroicons-micro/plus)
+ * Usado en el botón "Agregar" del POSProductCard
+ * Tamaño: 16x16px según especificación de Figma
+ */
+export const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      d="M8 3V13M3 8H13"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

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

@@ -1,3 +1,2 @@
-export { POSProductCard } from './POSProductCard';
-export type { POSProductCardProps } from './POSProductCard.types';
-//# sourceMappingURL=index.d.ts.map
+export { POSProductCard } from './POSProductCard';
+export type { POSProductCardProps } from './POSProductCard.types';