siesa-ui-kit 1.0.3 → 1.0.5

package/src/components/POSProductButton/POSProductButton.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import type { POSProductButtonProps } from './POSProductButton.types';
+
+/**
+ * Componente POSProductButton del sistema de diseño Siesa
+ *
+ * Botón especializado para sistemas POS que combina una imagen de producto
+ * con un label descriptivo. Diseñado para selección rápida de productos.
+ *
+ * **Estados disponibles:**
+ * - `default`: Estado normal con fondo blanco
+ * - `active`: Estado seleccionado con fondo azul claro y texto azul
+ * - `disabled`: Estado deshabilitado con opacidad reducida
+ *
+ * **Características:**
+ * - Imagen con aspect ratio 158:80 (proporción de Figma)
+ * - Label con tipografía Label Small (14px Bold)
+ * - Soporte completo de dark mode
+ * - Estados hover, active y focus
+ * - 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 la documentación
+ * - Estados hover y active completos
+ * - Tipografía Label Small (14px Bold) según sistema de diseño
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico (Label)
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see docs/border-radius.md - Border radius
+ *
+ * @example
+ * ```tsx
+ * // Botón de producto normal
+ * <POSProductButton
+ *   image="/images/parrilla.jpg"
+ *   label="A la parrilla"
+ *   onClick={() => console.log('Producto seleccionado')}
+ * />
+ *
+ * // Botón de producto activo/seleccionado
+ * <POSProductButton
+ *   image="/images/parrilla.jpg"
+ *   label="A la parrilla"
+ *   active={true}
+ * />
+ *
+ * // Botón de producto deshabilitado
+ * <POSProductButton
+ *   image="/images/parrilla.jpg"
+ *   label="A la parrilla"
+ *   disabled={true}
+ * />
+ * ```
+ */
+export const POSProductButton: React.FC<POSProductButtonProps> = ({
+  image,
+  label,
+  active = false,
+  disabled = false,
+  onClick,
+  className = '',
+  ariaLabel,
+}) => {
+  // ===== CLASES BASE =====
+  const baseClasses = `
+    flex
+    flex-col
+    gap-2
+    p-3
+    rounded-lg
+    font-bold
+    text-sm
+    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 =====
+  const stateClasses = disabled
+    ? `
+      bg-white
+      text-content-primary
+      opacity-55
+      cursor-not-allowed
+      pointer-events-none
+      dark:bg-dark-bg-primary
+      dark:text-dark-content-primary
+    `
+    : active
+    ? `
+      bg-primary-custom-100
+      text-primary-custom-600
+      cursor-pointer
+      hover:bg-primary-custom-100
+      active:scale-95
+      dark:bg-primary-custom-100/20
+      dark:text-primary-custom-600
+      dark:hover:bg-primary-custom-100/30
+      dark:active:scale-95
+    `
+    : `
+      bg-white
+      text-content-primary
+      cursor-pointer
+      hover:bg-background-secondary
+      active:scale-95
+      dark:bg-dark-bg-primary
+      dark:text-dark-content-primary
+      dark:hover:bg-dark-bg-primary/80
+      dark:active:scale-95
+    `;
+
+  // ===== COMBINAR TODAS LAS CLASES =====
+  const buttonClasses = [baseClasses, stateClasses, className]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <button
+      type="button"
+      className={buttonClasses}
+      disabled={disabled}
+      onClick={onClick}
+      aria-label={ariaLabel || label}
+      aria-pressed={active}
+    >
+      {/* Imagen del producto */}
+      <div className="aspect-[158/80] w-full rounded-lg overflow-hidden">
+        <img
+          src={image}
+          alt={label}
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      {/* Label del producto */}
+      <div className="w-full text-left leading-5">
+        {label}
+      </div>
+    </button>
+  );
+};

package/src/components/POSProductButton/POSProductButton.types.ts

@@ -0,0 +1,46 @@
+import type { MouseEvent } from 'react';
+
+/**
+ * Props del componente POSProductButton
+ *
+ * Botón de producto para sistemas POS con imagen y label
+ */
+export interface POSProductButtonProps {
+  /**
+   * URL de la imagen del producto
+   */
+  image: string;
+
+  /**
+   * Texto del producto (nombre o descripción)
+   * @example "A la parrilla"
+   */
+  label: string;
+
+  /**
+   * Si el botón está en estado activo/seleccionado
+   * @default false
+   */
+  active?: boolean;
+
+  /**
+   * Si el botón está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Handler para evento click
+   */
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Label para accesibilidad (ARIA)
+   */
+  ariaLabel?: string;
+}

package/src/components/POSProductButton/README.md

@@ -0,0 +1,269 @@
+# POSProductButton
+
+Botón especializado para sistemas POS (Point of Sale) que combina una imagen de producto con un label descriptivo. Diseñado para selección rápida de productos en interfaces de punto de venta.
+
+## 📦 Instalación
+
+```tsx
+import { POSProductButton } from '@/components/POSProductButton';
+```
+
+## 🎯 Uso Básico
+
+```tsx
+// Botón de producto normal
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+  onClick={() => handleProductSelect('parrilla')}
+/>
+
+// Botón de producto seleccionado
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+  active={true}
+/>
+
+// Botón de producto deshabilitado
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+  disabled={true}
+/>
+```
+
+## 📋 Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `image` | `string` | **Required** | URL de la imagen del producto |
+| `label` | `string` | **Required** | Texto del producto (nombre o descripción) |
+| `active` | `boolean` | `false` | Si el botón está en estado activo/seleccionado |
+| `disabled` | `boolean` | `false` | Si el botón está deshabilitado |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | - | Handler para evento click |
+| `className` | `string` | `''` | Clases CSS adicionales |
+| `ariaLabel` | `string` | - | Label para accesibilidad (ARIA) |
+
+## 🎨 Estados
+
+### Enabled (Normal)
+Estado por defecto del botón, listo para ser clickeado.
+
+```tsx
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+/>
+```
+
+**Características:**
+- Fondo blanco (`bg-white` / `dark:bg-dark-bg-primary`)
+- Texto principal (`text-content-primary` / `dark:text-dark-content-primary`)
+- Hover con fondo secundario
+- Efecto de escala en active
+
+### Actived (Seleccionado)
+Estado cuando el producto está seleccionado.
+
+```tsx
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+  active={true}
+/>
+```
+
+**Características:**
+- Fondo azul claro (`bg-primary-custom-100` / `dark:bg-primary-custom-100/20`)
+- Texto azul (`text-primary-custom-600`)
+- Indica selección visual clara
+
+### Disabled (Deshabilitado)
+Estado para productos no disponibles.
+
+```tsx
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+  disabled={true}
+/>
+```
+
+**Características:**
+- Opacidad reducida (`opacity-55`)
+- Cursor no permitido (`cursor-not-allowed`)
+- No clickeable (`pointer-events-none`)
+
+## 💡 Ejemplos de Uso
+
+### Grid de Productos (Típico en POS)
+
+```tsx
+<div className="grid grid-cols-3 gap-4">
+  <POSProductButton
+    image="/images/parrilla.jpg"
+    label="A la parrilla"
+    active={selectedProduct === 'parrilla'}
+    onClick={() => setSelectedProduct('parrilla')}
+  />
+  <POSProductButton
+    image="/images/horno.jpg"
+    label="Al horno"
+    active={selectedProduct === 'horno'}
+    onClick={() => setSelectedProduct('horno')}
+  />
+  <POSProductButton
+    image="/images/frito.jpg"
+    label="Frito"
+    active={selectedProduct === 'frito'}
+    onClick={() => setSelectedProduct('frito')}
+  />
+  {/* Producto agotado */}
+  <POSProductButton
+    image="/images/vapor.jpg"
+    label="Al vapor"
+    disabled={true}
+  />
+</div>
+```
+
+### Lista Horizontal (Categorías)
+
+```tsx
+<div className="flex gap-3 overflow-x-auto">
+  <POSProductButton
+    image="/images/carnes.jpg"
+    label="Carnes"
+    active={category === 'carnes'}
+    onClick={() => setCategory('carnes')}
+  />
+  <POSProductButton
+    image="/images/pescados.jpg"
+    label="Pescados"
+    active={category === 'pescados'}
+    onClick={() => setCategory('pescados')}
+  />
+  <POSProductButton
+    image="/images/vegetales.jpg"
+    label="Vegetales"
+    active={category === 'vegetales'}
+    onClick={() => setCategory('vegetales')}
+  />
+</div>
+```
+
+### Con Estado de React
+
+```tsx
+import { useState } from 'react';
+
+function POSMenu() {
+  const [selectedProduct, setSelectedProduct] = useState<string | null>(null);
+
+  const products = [
+    { id: 'parrilla', name: 'A la parrilla', image: '/images/parrilla.jpg' },
+    { id: 'horno', name: 'Al horno', image: '/images/horno.jpg' },
+    { id: 'frito', name: 'Frito', image: '/images/frito.jpg', available: false },
+  ];
+
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      {products.map((product) => (
+        <POSProductButton
+          key={product.id}
+          image={product.image}
+          label={product.name}
+          active={selectedProduct === product.id}
+          disabled={!product.available}
+          onClick={() => setSelectedProduct(product.id)}
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+## 🎨 Especificaciones de Diseño
+
+### Dimensiones
+- **Padding**: 12px (`p-3`)
+- **Gap**: 8px (`gap-2`) entre imagen y label
+- **Border radius**: 8px (`rounded-lg`)
+- **Aspect ratio de imagen**: 158:80 (según diseño de Figma)
+
+### Tipografía
+- **Font family**: SiesaBT
+- **Font size**: 14px (`text-sm`)
+- **Font weight**: Bold 700 (`font-bold`)
+- **Line height**: 20px (`leading-5`)
+- **Categoría**: Label Small (según sistema tipográfico)
+
+### Colores
+
+#### Light Mode
+| Estado | Background | Text |
+|--------|-----------|------|
+| Enabled | `#ffffff` (white) | `#18181b` (content-primary) |
+| Actived | `#dbeefe` (primary-custom-100) | `#0e79fd` (primary-custom-600) |
+| Disabled | `#ffffff` (white) | `#18181b` (content-primary) con opacity 0.55 |
+
+#### Dark Mode
+| Estado | Background | Text |
+|--------|-----------|------|
+| Enabled | `#18181b` (dark-bg-primary) | `#ffffff` (dark-content-primary) |
+| Actived | `#dbeefe` con opacity 0.2 | `#0e79fd` (primary-custom-600) |
+| Disabled | `#18181b` (dark-bg-primary) | `#ffffff` (dark-content-primary) con opacity 0.55 |
+
+## ♿ Accesibilidad
+
+- **ARIA Labels**: Usa `ariaLabel` para proveer contexto adicional
+- **aria-pressed**: El estado `active` se refleja en `aria-pressed`
+- **Keyboard Navigation**: Totalmente navegable por teclado
+- **Focus Indicators**: Focus rings visibles en light y dark mode
+
+```tsx
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+  ariaLabel="Seleccionar método de cocción: A la parrilla"
+  active={selected}
+  onClick={handleSelect}
+/>
+```
+
+## 🌓 Dark Mode
+
+El componente soporta dark mode automáticamente usando la estrategia `class` de Tailwind CSS.
+
+```tsx
+// El componente se adapta automáticamente
+<POSProductButton
+  image="/images/producto.jpg"
+  label="A la parrilla"
+/>
+```
+
+**Colores que se adaptan:**
+- Fondos: `bg-white` → `dark:bg-dark-bg-primary`
+- Textos: `text-content-primary` → `dark:text-dark-content-primary`
+- Hover: `hover:bg-background-secondary` → `dark:hover:bg-dark-bg-primary/80`
+
+## 📚 Referencias
+
+- **Figma**: [POS Product Button](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4366-26919&m=dev)
+- **Código**: `src/components/POSProductButton/POSProductButton.tsx`
+- **Stories**: `src/components/POSProductButton/POSProductButton.stories.tsx`
+- **Sistema de colores**: `docs/colors.md`
+- **Sistema tipográfico**: `docs/typography.md`
+
+## 🔄 Historial de Cambios
+
+| Versión | Fecha | Cambios |
+|---------|-------|---------|
+| 1.0.0 | 2025-11-24 | Implementación inicial con soporte dark mode completo |
+
+---
+
+**Última actualización**: 2025-11-24
+**Mantenido por**: Equipo Siesa UI Kit

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

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