siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/POSProductCard/POSProductCard.tsx

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

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

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