siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/POSProductButton/POSProductButton.tsx

@@ -1,152 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,269 +0,0 @@
-# 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