siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSProductSidebarItems/POSProductSidebarItems.types.ts

@@ -1,119 +1,119 @@
-import type { ReactNode } from 'react';
-
-/**
- * Item de descripción del producto
- */
-export interface DescriptionItem {
-  /**
-   * Descripción del item (ej: "Papas limón mediana")
-   */
-  description: string;
-  /**
-   * Precio del item (ej: "$ 40,000.00")
-   */
-  price: string;
-}
-
-/**
- * Props del componente POSProductSidebarItems
- */
-export interface POSProductSidebarItemsProps {
-  /**
-   * Etiqueta de categoría del producto (ej: "Entradas")
-   */
-  categoryLabel: string;
-
-  /**
-   * Color de la categoría (badge)
-   * @default 'lime'
-   */
-  categoryColor?:
-    | 'lime'
-    | 'red'
-    | 'orange'
-    | 'amber'
-    | 'yellow'
-    | 'green'
-    | 'emerald'
-    | 'teal'
-    | 'cyan'
-    | 'sky'
-    | 'blue'
-    | 'indigo'
-    | 'violet'
-    | 'purple'
-    | 'fuchsia'
-    | 'pink'
-    | 'rose'
-    | 'zinc'
-    | 'primary';
-
-  /**
-   * Referencia del producto (ej: "00147258369")
-   */
-  productRef: string;
-
-  /**
-   * Precio total del producto (ej: "$ 40,000.00")
-   */
-  price: string;
-
-  /**
-   * Nombre del producto (ej: "Nombre producto")
-   */
-  productName: string;
-
-  /**
-   * Lista de items de descripción (opcional)
-   */
-  descriptionItems?: DescriptionItem[];
-
-  /**
-   * Si se muestra la sección de descripción
-   * @default true
-   */
-  showDescription?: boolean;
-
-  /**
-   * Cantidad actual del producto
-   * @default 0
-   */
-  quantity?: number;
-
-  /**
-   * Cantidad mínima permitida
-   * @default 0
-   */
-  minQuantity?: number;
-
-  /**
-   * Cantidad máxima permitida
-   */
-  maxQuantity?: number;
-
-  /**
-   * Handler cuando cambia la cantidad
-   */
-  onQuantityChange?: (quantity: number) => void;
-
-  /**
-   * Handler cuando se hace clic en eliminar
-   */
-  onDelete?: () => void;
-
-  /**
-   * Si el componente está deshabilitado
-   * @default false
-   */
-  disabled?: boolean;
-
-  /**
-   * Clases CSS adicionales
-   */
-  className?: string;
-
-  /**
-   * Icono personalizado para el botón de eliminar
-   */
-  deleteIcon?: ReactNode;
-}
+import type { ReactNode } from 'react';
+
+/**
+ * Item de descripción del producto
+ */
+export interface DescriptionItem {
+  /**
+   * Descripción del item (ej: "Papas limón mediana")
+   */
+  description: string;
+  /**
+   * Precio del item (ej: "$ 40,000.00")
+   */
+  price: string;
+}
+
+/**
+ * Props del componente POSProductSidebarItems
+ */
+export interface POSProductSidebarItemsProps {
+  /**
+   * Etiqueta de categoría del producto (ej: "Entradas")
+   */
+  categoryLabel: string;
+
+  /**
+   * Color de la categoría (badge)
+   * @default 'lime'
+   */
+  categoryColor?:
+    | 'lime'
+    | 'red'
+    | 'orange'
+    | 'amber'
+    | 'yellow'
+    | 'green'
+    | 'emerald'
+    | 'teal'
+    | 'cyan'
+    | 'sky'
+    | 'blue'
+    | 'indigo'
+    | 'violet'
+    | 'purple'
+    | 'fuchsia'
+    | 'pink'
+    | 'rose'
+    | 'zinc'
+    | 'primary';
+
+  /**
+   * Referencia del producto (ej: "00147258369")
+   */
+  productRef: string;
+
+  /**
+   * Precio total del producto (ej: "$ 40,000.00")
+   */
+  price: string;
+
+  /**
+   * Nombre del producto (ej: "Nombre producto")
+   */
+  productName: string;
+
+  /**
+   * Lista de items de descripción (opcional)
+   */
+  descriptionItems?: DescriptionItem[];
+
+  /**
+   * Si se muestra la sección de descripción
+   * @default true
+   */
+  showDescription?: boolean;
+
+  /**
+   * Cantidad actual del producto
+   * @default 0
+   */
+  quantity?: number;
+
+  /**
+   * Cantidad mínima permitida
+   * @default 0
+   */
+  minQuantity?: number;
+
+  /**
+   * Cantidad máxima permitida
+   */
+  maxQuantity?: number;
+
+  /**
+   * Handler cuando cambia la cantidad
+   */
+  onQuantityChange?: (quantity: number) => void;
+
+  /**
+   * Handler cuando se hace clic en eliminar
+   */
+  onDelete?: () => void;
+
+  /**
+   * Si el componente está deshabilitado
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Clases CSS adicionales
+   */
+  className?: string;
+
+  /**
+   * Icono personalizado para el botón de eliminar
+   */
+  deleteIcon?: ReactNode;
+}

package/src/components/POSProductSidebarItems/README.md

@@ -1,198 +1,198 @@
-# POSProductSidebarItems
-
-Componente pixel-perfect de item de producto para sidebar de sistema POS (Point of Sale).
-
-## Descripción
-
-Basado en [Figma node 4507-28013](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013&m=dev), este componente muestra información detallada de un producto en el sidebar de un sistema de punto de venta, incluyendo:
-
-- Badge de categoría con 19 colores configurables
-- Referencia del producto (text-[10px]/leading-3)
-- Precio total (text-xs/font-bold)
-- Nombre del producto (text-xs/font-bold)
-- Descripción con items opcionales (fondo terciario)
-- Control de cantidad integrado (Quantity component)
-- Botón de eliminar con estados hover/focus
-
-## Especificaciones de Figma
-
-| Propiedad | Valor |
-|-----------|-------|
-| Ancho base | 272px |
-| Spacing interno | gap-1 (4px), gap-2 (8px) |
-| Badge | rounded-md, px-1.5, py-1, text-xs |
-| Description | bg-background-secondary, p-2, rounded-lg |
-| Delete icon | 24x24px, color red-700 |
-
-## Uso Básico
-
-```tsx
-import { POSProductSidebarItems } from './components/POSProductSidebarItems';
-
-function App() {
-  const [quantity, setQuantity] = useState(1);
-
-  return (
-    <POSProductSidebarItems
-      categoryLabel="Entradas"
-      categoryColor="lime"
-      productRef="00147258369"
-      price="$ 40,000.00"
-      productName="Hamburguesa clásica"
-      descriptionItems={[
-        { description: 'Papas limón mediana', price: '$ 40,000.00' },
-        { description: 'Gaseosa 400ml', price: '$ 5,000.00' },
-      ]}
-      showDescription={true}
-      quantity={quantity}
-      onQuantityChange={(qty) => setQuantity(qty)}
-      onDelete={() => console.log('Eliminar producto')}
-    />
-  );
-}
-```
-
-## Props
-
-| Prop | Tipo | Default | Descripción |
-|------|------|---------|-------------|
-| `categoryLabel` | `string` | - | Etiqueta de categoría del producto |
-| `categoryColor` | `CategoryColor` | `'lime'` | Color del badge de categoría (19 opciones) |
-| `productRef` | `string` | - | Referencia del producto |
-| `price` | `string` | - | Precio total del producto |
-| `productName` | `string` | - | Nombre del producto |
-| `descriptionItems` | `DescriptionItem[]` | `[]` | Lista de items de descripción |
-| `showDescription` | `boolean` | `true` | Si se muestra la sección de descripción |
-| `quantity` | `number` | `0` | Cantidad actual del producto |
-| `minQuantity` | `number` | `0` | Cantidad mínima permitida |
-| `maxQuantity` | `number` | - | Cantidad máxima permitida |
-| `onQuantityChange` | `(quantity: number) => void` | - | Handler cuando cambia la cantidad |
-| `onDelete` | `() => void` | - | Handler cuando se hace clic en eliminar |
-| `disabled` | `boolean` | `false` | Si el componente está deshabilitado |
-| `className` | `string` | `''` | Clases CSS adicionales |
-| `deleteIcon` | `ReactNode` | - | Icono personalizado para el botón de eliminar |
-
-## Colores de Categoría
-
-El componente soporta los siguientes colores para el badge de categoría:
-
-| Color | Light Mode | Dark Mode |
-|-------|------------|-----------|
-| `lime` (default) | bg-lime-100, text-lime-700 | bg-lime-900/40, text-lime-300 |
-| `red` | bg-red-100, text-red-700 | bg-red-900/40, text-red-300 |
-| `orange` | bg-orange-100, text-orange-700 | bg-orange-900/40, text-orange-300 |
-| `amber` | bg-amber-100, text-amber-700 | bg-amber-900/40, text-amber-300 |
-| `yellow` | bg-yellow-100, text-yellow-700 | bg-yellow-900/40, text-yellow-300 |
-| `green` | bg-green-100, text-green-700 | bg-green-900/40, text-green-300 |
-| `emerald` | bg-emerald-100, text-emerald-700 | bg-emerald-900/40, text-emerald-300 |
-| `teal` | bg-teal-100, text-teal-700 | bg-teal-900/40, text-teal-300 |
-| `cyan` | bg-cyan-100, text-cyan-700 | bg-cyan-900/40, text-cyan-300 |
-| `sky` | bg-sky-100, text-sky-700 | bg-sky-900/40, text-sky-300 |
-| `blue` | bg-blue-100, text-blue-700 | bg-blue-900/40, text-blue-300 |
-| `indigo` | bg-indigo-100, text-indigo-700 | bg-indigo-900/40, text-indigo-300 |
-| `violet` | bg-violet-100, text-violet-700 | bg-violet-900/40, text-violet-300 |
-| `purple` | bg-purple-100, text-purple-700 | bg-purple-900/40, text-purple-300 |
-| `fuchsia` | bg-fuchsia-100, text-fuchsia-700 | bg-fuchsia-900/40, text-fuchsia-300 |
-| `pink` | bg-pink-100, text-pink-700 | bg-pink-900/40, text-pink-300 |
-| `rose` | bg-rose-100, text-rose-700 | bg-rose-900/40, text-rose-300 |
-| `zinc` | bg-zinc-100, text-zinc-600 | bg-zinc-800/50, text-zinc-300 |
-| `primary` | bg-primary-custom-100, text-primary-custom-600 | bg-primary-custom-600/30, text-primary-custom-300 |
-
-## Ejemplos
-
-### Sin descripción
-
-```tsx
-<POSProductSidebarItems
-  categoryLabel="Bebidas"
-  categoryColor="cyan"
-  productRef="00258369147"
-  price="$ 5,000.00"
-  productName="Gaseosa 400ml"
-  showDescription={false}
-  quantity={2}
-  onQuantityChange={(qty) => setQuantity(qty)}
-  onDelete={() => handleDelete()}
-/>
-```
-
-### Con múltiples items de descripción
-
-```tsx
-<POSProductSidebarItems
-  categoryLabel="Combos"
-  categoryColor="blue"
-  productRef="00147258369"
-  price="$ 120,000.00"
-  productName="Combo mega familiar"
-  descriptionItems={[
-    { description: 'Hamburguesa doble x4', price: '$ 80,000.00' },
-    { description: 'Papas familiares x2', price: '$ 20,000.00' },
-    { description: 'Gaseosa 1.5L x2', price: '$ 12,000.00' },
-    { description: 'Postre brownie x4', price: '$ 8,000.00' },
-  ]}
-  showDescription={true}
-  quantity={1}
-  onQuantityChange={(qty) => setQuantity(qty)}
-  onDelete={() => handleDelete()}
-/>
-```
-
-### Deshabilitado
-
-```tsx
-<POSProductSidebarItems
-  categoryLabel="Entradas"
-  productRef="00147258369"
-  price="$ 40,000.00"
-  productName="Producto no disponible"
-  showDescription={false}
-  quantity={0}
-  disabled={true}
-  onQuantityChange={() => {}}
-  onDelete={() => {}}
-/>
-```
-
-## Dark Mode
-
-El componente tiene soporte completo para dark mode. Los colores se adaptan automáticamente cuando se activa la clase `dark` en el elemento raíz de la aplicación.
-
-### Tokens de Color (Dark Mode)
-
-| Elemento | Light Mode | Dark Mode |
-|----------|------------|-----------|
-| Texto principal | `text-content-primary` | `dark:text-dark-content-primary` |
-| Description background | `bg-background-secondary` | `dark:bg-zinc-700` |
-| Delete button | `text-red-700` | `dark:text-red-500` |
-| Delete hover | `hover:text-red-800` | `dark:hover:text-red-400` |
-| Delete hover bg | `hover:bg-red-50` | `dark:hover:bg-red-900/20` |
-| Focus ring | `focus:ring-red-500/50` | `dark:focus:ring-red-400/50` |
-
-## Accesibilidad
-
-- El botón de eliminar tiene `aria-label="Eliminar producto"`
-- Focus rings adaptativos con suficiente contraste en ambos modos
-- El componente soporta navegación por teclado (Tab)
-- Estados disabled aplicados correctamente con opacity 50%
-
-## Dependencias Internas
-
-Este componente utiliza:
-
-- `Quantity` - Control de cantidad integrado
-- `TrashIcon` - Icono de papelera (exportado desde `./icons.tsx`)
-
-## Referencias
-
-- **Figma**: [Ver diseño](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013&m=dev)
-- **docs/colors.md**: Sistema de colores
-- **docs/typography.md**: Sistema tipográfico
-- **docs/spacing.md**: Sistema de espaciado
-
-## Historial de Cambios
-
-| Versión | Fecha | Cambios |
-|---------|-------|---------|
-| 1.1.0 | 2025-12-02 | Dark mode completo, focus rings adaptativos, tokens del sistema |
-| 1.0.0 | - | Versión inicial |
+# POSProductSidebarItems
+
+Componente pixel-perfect de item de producto para sidebar de sistema POS (Point of Sale).
+
+## Descripción
+
+Basado en [Figma node 4507-28013](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013&m=dev), este componente muestra información detallada de un producto en el sidebar de un sistema de punto de venta, incluyendo:
+
+- Badge de categoría con 19 colores configurables
+- Referencia del producto (text-[10px]/leading-3)
+- Precio total (text-xs/font-bold)
+- Nombre del producto (text-xs/font-bold)
+- Descripción con items opcionales (fondo terciario)
+- Control de cantidad integrado (Quantity component)
+- Botón de eliminar con estados hover/focus
+
+## Especificaciones de Figma
+
+| Propiedad | Valor |
+|-----------|-------|
+| Ancho base | 272px |
+| Spacing interno | gap-1 (4px), gap-2 (8px) |
+| Badge | rounded-md, px-1.5, py-1, text-xs |
+| Description | bg-background-secondary, p-2, rounded-lg |
+| Delete icon | 24x24px, color red-700 |
+
+## Uso Básico
+
+```tsx
+import { POSProductSidebarItems } from './components/POSProductSidebarItems';
+
+function App() {
+  const [quantity, setQuantity] = useState(1);
+
+  return (
+    <POSProductSidebarItems
+      categoryLabel="Entradas"
+      categoryColor="lime"
+      productRef="00147258369"
+      price="$ 40,000.00"
+      productName="Hamburguesa clásica"
+      descriptionItems={[
+        { description: 'Papas limón mediana', price: '$ 40,000.00' },
+        { description: 'Gaseosa 400ml', price: '$ 5,000.00' },
+      ]}
+      showDescription={true}
+      quantity={quantity}
+      onQuantityChange={(qty) => setQuantity(qty)}
+      onDelete={() => console.log('Eliminar producto')}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `categoryLabel` | `string` | - | Etiqueta de categoría del producto |
+| `categoryColor` | `CategoryColor` | `'lime'` | Color del badge de categoría (19 opciones) |
+| `productRef` | `string` | - | Referencia del producto |
+| `price` | `string` | - | Precio total del producto |
+| `productName` | `string` | - | Nombre del producto |
+| `descriptionItems` | `DescriptionItem[]` | `[]` | Lista de items de descripción |
+| `showDescription` | `boolean` | `true` | Si se muestra la sección de descripción |
+| `quantity` | `number` | `0` | Cantidad actual del producto |
+| `minQuantity` | `number` | `0` | Cantidad mínima permitida |
+| `maxQuantity` | `number` | - | Cantidad máxima permitida |
+| `onQuantityChange` | `(quantity: number) => void` | - | Handler cuando cambia la cantidad |
+| `onDelete` | `() => void` | - | Handler cuando se hace clic en eliminar |
+| `disabled` | `boolean` | `false` | Si el componente está deshabilitado |
+| `className` | `string` | `''` | Clases CSS adicionales |
+| `deleteIcon` | `ReactNode` | - | Icono personalizado para el botón de eliminar |
+
+## Colores de Categoría
+
+El componente soporta los siguientes colores para el badge de categoría:
+
+| Color | Light Mode | Dark Mode |
+|-------|------------|-----------|
+| `lime` (default) | bg-lime-100, text-lime-700 | bg-lime-900/40, text-lime-300 |
+| `red` | bg-red-100, text-red-700 | bg-red-900/40, text-red-300 |
+| `orange` | bg-orange-100, text-orange-700 | bg-orange-900/40, text-orange-300 |
+| `amber` | bg-amber-100, text-amber-700 | bg-amber-900/40, text-amber-300 |
+| `yellow` | bg-yellow-100, text-yellow-700 | bg-yellow-900/40, text-yellow-300 |
+| `green` | bg-green-100, text-green-700 | bg-green-900/40, text-green-300 |
+| `emerald` | bg-emerald-100, text-emerald-700 | bg-emerald-900/40, text-emerald-300 |
+| `teal` | bg-teal-100, text-teal-700 | bg-teal-900/40, text-teal-300 |
+| `cyan` | bg-cyan-100, text-cyan-700 | bg-cyan-900/40, text-cyan-300 |
+| `sky` | bg-sky-100, text-sky-700 | bg-sky-900/40, text-sky-300 |
+| `blue` | bg-blue-100, text-blue-700 | bg-blue-900/40, text-blue-300 |
+| `indigo` | bg-indigo-100, text-indigo-700 | bg-indigo-900/40, text-indigo-300 |
+| `violet` | bg-violet-100, text-violet-700 | bg-violet-900/40, text-violet-300 |
+| `purple` | bg-purple-100, text-purple-700 | bg-purple-900/40, text-purple-300 |
+| `fuchsia` | bg-fuchsia-100, text-fuchsia-700 | bg-fuchsia-900/40, text-fuchsia-300 |
+| `pink` | bg-pink-100, text-pink-700 | bg-pink-900/40, text-pink-300 |
+| `rose` | bg-rose-100, text-rose-700 | bg-rose-900/40, text-rose-300 |
+| `zinc` | bg-zinc-100, text-zinc-600 | bg-zinc-800/50, text-zinc-300 |
+| `primary` | bg-primary-custom-100, text-primary-custom-600 | bg-primary-custom-600/30, text-primary-custom-300 |
+
+## Ejemplos
+
+### Sin descripción
+
+```tsx
+<POSProductSidebarItems
+  categoryLabel="Bebidas"
+  categoryColor="cyan"
+  productRef="00258369147"
+  price="$ 5,000.00"
+  productName="Gaseosa 400ml"
+  showDescription={false}
+  quantity={2}
+  onQuantityChange={(qty) => setQuantity(qty)}
+  onDelete={() => handleDelete()}
+/>
+```
+
+### Con múltiples items de descripción
+
+```tsx
+<POSProductSidebarItems
+  categoryLabel="Combos"
+  categoryColor="blue"
+  productRef="00147258369"
+  price="$ 120,000.00"
+  productName="Combo mega familiar"
+  descriptionItems={[
+    { description: 'Hamburguesa doble x4', price: '$ 80,000.00' },
+    { description: 'Papas familiares x2', price: '$ 20,000.00' },
+    { description: 'Gaseosa 1.5L x2', price: '$ 12,000.00' },
+    { description: 'Postre brownie x4', price: '$ 8,000.00' },
+  ]}
+  showDescription={true}
+  quantity={1}
+  onQuantityChange={(qty) => setQuantity(qty)}
+  onDelete={() => handleDelete()}
+/>
+```
+
+### Deshabilitado
+
+```tsx
+<POSProductSidebarItems
+  categoryLabel="Entradas"
+  productRef="00147258369"
+  price="$ 40,000.00"
+  productName="Producto no disponible"
+  showDescription={false}
+  quantity={0}
+  disabled={true}
+  onQuantityChange={() => {}}
+  onDelete={() => {}}
+/>
+```
+
+## Dark Mode
+
+El componente tiene soporte completo para dark mode. Los colores se adaptan automáticamente cuando se activa la clase `dark` en el elemento raíz de la aplicación.
+
+### Tokens de Color (Dark Mode)
+
+| Elemento | Light Mode | Dark Mode |
+|----------|------------|-----------|
+| Texto principal | `text-content-primary` | `dark:text-dark-content-primary` |
+| Description background | `bg-background-secondary` | `dark:bg-zinc-700` |
+| Delete button | `text-red-700` | `dark:text-red-500` |
+| Delete hover | `hover:text-red-800` | `dark:hover:text-red-400` |
+| Delete hover bg | `hover:bg-red-50` | `dark:hover:bg-red-900/20` |
+| Focus ring | `focus:ring-red-500/50` | `dark:focus:ring-red-400/50` |
+
+## Accesibilidad
+
+- El botón de eliminar tiene `aria-label="Eliminar producto"`
+- Focus rings adaptativos con suficiente contraste en ambos modos
+- El componente soporta navegación por teclado (Tab)
+- Estados disabled aplicados correctamente con opacity 50%
+
+## Dependencias Internas
+
+Este componente utiliza:
+
+- `Quantity` - Control de cantidad integrado
+- `TrashIcon` - Icono de papelera (exportado desde `./icons.tsx`)
+
+## Referencias
+
+- **Figma**: [Ver diseño](https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013&m=dev)
+- **docs/colors.md**: Sistema de colores
+- **docs/typography.md**: Sistema tipográfico
+- **docs/spacing.md**: Sistema de espaciado
+
+## Historial de Cambios
+
+| Versión | Fecha | Cambios |
+|---------|-------|---------|
+| 1.1.0 | 2025-12-02 | Dark mode completo, focus rings adaptativos, tokens del sistema |
+| 1.0.0 | - | Versión inicial |