siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/POSProductSidebarItems/POSProductSidebarItems.tsx

@@ -1,332 +1,332 @@
-import React from 'react';
-import type { POSProductSidebarItemsProps } from './POSProductSidebarItems.types';
-import { Quantity } from '../Quantity/Quantity';
-import { TrashIcon } from './icons';
-
-/**
- * POSProductSidebarItems - Componente de item de producto para sidebar POS
- *
- * Componente pixel-perfect basado en Figma (node 4507-28013) para mostrar
- * productos en el sidebar de un sistema POS con soporte completo para dark mode.
- *
- * **Características:**
- * - 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 color de error
- *
- * **Especificaciones de Figma:**
- * - Ancho base: 272px
- * - Spacing: gap-1 (4px) entre elementos del producto, gap-2 (8px) entre secciones
- * - Badge: rounded-md (6px), px-1.5, py-1, text-xs/leading-4
- * - Description section: bg-background-tertiary, p-2, rounded-lg
- * - Delete icon: 24x24px, color red-700
- *
- * **Dark Mode:**
- * Los colores se adaptan automáticamente en dark mode:
- * - Textos principales: text-content-primary → dark:text-dark-content-primary
- * - Description background: bg-background-tertiary → dark:bg-zinc-700
- * - Badge colores: Mantienen contraste en ambos modos
- * - Delete button: text-red-700 → dark:text-red-500
- *
- * **Orden de modificadores:** {responsive}:{dark}:{state}:{utility}
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico
- * @see docs/spacing.md - Sistema de espaciado
- * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013 - Diseño Figma
- *
- * @example
- * ```tsx
- * <POSProductSidebarItems
- *   categoryLabel="Entradas"
- *   productRef="00147258369"
- *   price="$ 40,000.00"
- *   productName="Nombre producto"
- *   descriptionItems={[
- *     { description: "Papas limón mediana", price: "$ 40,000.00" },
- *     { description: "Papas limón mediana", price: "$ 40,000.00" },
- *   ]}
- *   quantity={0}
- *   onQuantityChange={(qty) => console.log(qty)}
- *   onDelete={() => console.log('Eliminar')}
- * />
- * ```
- */
-export const POSProductSidebarItems: React.FC<POSProductSidebarItemsProps> = ({
-  categoryLabel,
-  categoryColor = 'lime',
-  productRef,
-  price,
-  productName,
-  descriptionItems = [],
-  showDescription = true,
-  quantity = 0,
-  minQuantity = 0,
-  maxQuantity,
-  onQuantityChange,
-  onDelete,
-  disabled = false,
-  className = '',
-  deleteIcon,
-}) => {
-  // ===== MAPA DE COLORES PARA BADGES =====
-  // Basado en Figma node 4507-28432: bg lime-100 (#ecfccb) y text lime-700 (#4d7c0f)
-  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
-  const categoryColorClasses: Record<string, { bg: string; text: string }> = {
-    lime: {
-      bg: 'bg-lime-100 dark:bg-lime-900/40',
-      text: 'text-lime-700 dark:text-lime-300'
-    },
-    red: {
-      bg: 'bg-red-100 dark:bg-red-900/40',
-      text: 'text-red-700 dark:text-red-300'
-    },
-    orange: {
-      bg: 'bg-orange-100 dark:bg-orange-900/40',
-      text: 'text-orange-700 dark:text-orange-300'
-    },
-    amber: {
-      bg: 'bg-amber-100 dark:bg-amber-900/40',
-      text: 'text-amber-700 dark:text-amber-300'
-    },
-    yellow: {
-      bg: 'bg-yellow-100 dark:bg-yellow-900/40',
-      text: 'text-yellow-700 dark:text-yellow-300'
-    },
-    green: {
-      bg: 'bg-green-100 dark:bg-green-900/40',
-      text: 'text-green-700 dark:text-green-300'
-    },
-    emerald: {
-      bg: 'bg-emerald-100 dark:bg-emerald-900/40',
-      text: 'text-emerald-700 dark:text-emerald-300'
-    },
-    teal: {
-      bg: 'bg-teal-100 dark:bg-teal-900/40',
-      text: 'text-teal-700 dark:text-teal-300'
-    },
-    cyan: {
-      bg: 'bg-cyan-100 dark:bg-cyan-900/40',
-      text: 'text-cyan-700 dark:text-cyan-300'
-    },
-    sky: {
-      bg: 'bg-sky-100 dark:bg-sky-900/40',
-      text: 'text-sky-700 dark:text-sky-300'
-    },
-    blue: {
-      bg: 'bg-blue-100 dark:bg-blue-900/40',
-      text: 'text-blue-700 dark:text-blue-300'
-    },
-    indigo: {
-      bg: 'bg-indigo-100 dark:bg-indigo-900/40',
-      text: 'text-indigo-700 dark:text-indigo-300'
-    },
-    violet: {
-      bg: 'bg-violet-100 dark:bg-violet-900/40',
-      text: 'text-violet-700 dark:text-violet-300'
-    },
-    purple: {
-      bg: 'bg-purple-100 dark:bg-purple-900/40',
-      text: 'text-purple-700 dark:text-purple-300'
-    },
-    fuchsia: {
-      bg: 'bg-fuchsia-100 dark:bg-fuchsia-900/40',
-      text: 'text-fuchsia-700 dark:text-fuchsia-300'
-    },
-    pink: {
-      bg: 'bg-pink-100 dark:bg-pink-900/40',
-      text: 'text-pink-700 dark:text-pink-300'
-    },
-    rose: {
-      bg: 'bg-rose-100 dark:bg-rose-900/40',
-      text: 'text-rose-700 dark:text-rose-300'
-    },
-    zinc: {
-      bg: 'bg-zinc-100 dark:bg-zinc-800/50',
-      text: 'text-zinc-600 dark:text-zinc-300'
-    },
-    primary: {
-      bg: 'bg-primary-custom-100 dark:bg-primary-custom-600/30',
-      text: 'text-primary-custom-600 dark:text-primary-custom-300'
-    },
-  };
-
-  const colors = categoryColorClasses[categoryColor] || categoryColorClasses.lime;
-
-  // Handler para cambio de cantidad
-  const handleQuantityChange = (newQuantity: number) => {
-    if (!disabled && onQuantityChange) {
-      onQuantityChange(newQuantity);
-    }
-  };
-
-  // Handler para eliminar
-  const handleDelete = () => {
-    if (!disabled && onDelete) {
-      onDelete();
-    }
-  };
-
-  return (
-    <div
-      className={`
-        flex
-        flex-col
-        gap-2
-        w-full
-        ${disabled ? 'opacity-50 pointer-events-none' : ''}
-        ${className}
-      `.trim().replace(/\s+/g, ' ')}
-      data-component="POSProductSidebarItems"
-    >
-      {/* ===== BODY SECTION ===== */}
-      <div className="flex flex-col gap-2 w-full">
-        {/* ===== PRODUCT INFO ===== */}
-        <div className="flex flex-col gap-1 w-full">
-          {/* Row: Badge + Ref + Price - Figma node 4507:28398 */}
-          <div className="flex items-center gap-1 w-full">
-            {/* Col: Badge + Ref - Figma node 4507:28399 */}
-            <div className="flex items-center gap-2 flex-1 min-w-0">
-              {/* Category Badge - Figma node 4507:28432 */}
-              <div
-                className={`
-                  inline-flex
-                  items-center
-                  px-1.5
-                  py-1
-                  rounded-md
-                  transition-colors
-                  duration-150
-                  ${colors.bg}
-                `.trim().replace(/\s+/g, ' ')}
-              >
-                <span
-                  className={`
-                    text-xs
-                    leading-4
-                    font-normal
-                    text-center
-                    whitespace-nowrap
-                    ${colors.text}
-                  `.trim().replace(/\s+/g, ' ')}
-                >
-                  {categoryLabel}
-                </span>
-              </div>
-
-              {/* Product Reference - Figma node 4507:28401 - Paragraph/XXSmall 10px */}
-              <span className="text-[10px] leading-3 font-normal text-content-primary dark:text-dark-content-primary whitespace-nowrap">
-                {productRef}
-              </span>
-            </div>
-
-            {/* Col: Price - Figma node 4507:28450 - Label/Tiny 12px Bold */}
-            <div className="flex items-center shrink-0">
-              <span className="text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right">
-                {price}
-              </span>
-            </div>
-          </div>
-
-          {/* Row: Product Name - Figma node 4507:28404 - Label/Tiny 12px Bold */}
-          <div className="flex items-start w-full">
-            <span className="text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary flex-1 min-w-0">
-              {productName}
-            </span>
-          </div>
-        </div>
-
-        {/* ===== DESCRIPTION SECTION ===== */}
-        {/* Figma node 4507:28405 - Background tertiary con items de descripción */}
-        {showDescription && descriptionItems.length > 0 && (
-          <div
-            className={`
-              flex
-              flex-col
-              gap-2
-              p-2
-              rounded-lg
-              bg-background-secondary
-              dark:bg-zinc-700
-              w-full
-              transition-colors
-              duration-150
-            `.trim().replace(/\s+/g, ' ')}
-          >
-            {descriptionItems.map((item, index) => (
-              <div
-                key={index}
-                className="flex items-center gap-1 w-full"
-              >
-                {/* Description text - Figma Body/Small 12px Regular */}
-                <span className="flex-1 min-w-0 text-xs leading-3 font-normal text-content-primary dark:text-dark-content-primary">
-                  {item.description}
-                </span>
-                {/* Price - Figma Body/Small Bold 12px */}
-                <span className="text-xs leading-3 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right shrink-0">
-                  {item.price}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* ===== ACTIONS SECTION ===== */}
-      {/* Figma node 4507:28412 - Quantity control + Delete button */}
-      <div className="flex items-center justify-between w-full">
-        {/* Quantity Control - Figma width: 118px */}
-        <div className="w-[118px]">
-          <Quantity
-            value={quantity}
-            min={minQuantity}
-            max={maxQuantity}
-            onChange={handleQuantityChange}
-            disabled={disabled}
-          />
-        </div>
-
-        {/* Delete Button - Figma node 4514:28258 - 24x24px, color red-700 (#b91c1c) */}
-        <button
-          type="button"
-          onClick={handleDelete}
-          disabled={disabled}
-          className={`
-            flex
-            items-center
-            justify-center
-            w-6
-            h-6
-            rounded-md
-            text-red-700
-            dark:text-red-500
-            hover:text-red-800
-            dark:hover:text-red-400
-            hover:bg-red-50
-            dark:hover:bg-red-900/20
-            focus:outline-none
-            focus:ring-2
-            focus:ring-red-500/50
-            dark:focus:ring-red-400/50
-            focus:ring-offset-1
-            focus:ring-offset-white
-            dark:focus:ring-offset-dark-bg-primary
-            active:scale-95
-            transition-all
-            duration-150
-            ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
-          `.trim().replace(/\s+/g, ' ')}
-          aria-label="Eliminar producto"
-        >
-          {deleteIcon || <TrashIcon className="w-[18px] h-[21px]" />}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-POSProductSidebarItems.displayName = 'POSProductSidebarItems';
+import React from 'react';
+import type { POSProductSidebarItemsProps } from './POSProductSidebarItems.types';
+import { Quantity } from '../Quantity/Quantity';
+import { TrashIcon } from './icons';
+
+/**
+ * POSProductSidebarItems - Componente de item de producto para sidebar POS
+ *
+ * Componente pixel-perfect basado en Figma (node 4507-28013) para mostrar
+ * productos en el sidebar de un sistema POS con soporte completo para dark mode.
+ *
+ * **Características:**
+ * - 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 color de error
+ *
+ * **Especificaciones de Figma:**
+ * - Ancho base: 272px
+ * - Spacing: gap-1 (4px) entre elementos del producto, gap-2 (8px) entre secciones
+ * - Badge: rounded-md (6px), px-1.5, py-1, text-xs/leading-4
+ * - Description section: bg-background-tertiary, p-2, rounded-lg
+ * - Delete icon: 24x24px, color red-700
+ *
+ * **Dark Mode:**
+ * Los colores se adaptan automáticamente en dark mode:
+ * - Textos principales: text-content-primary → dark:text-dark-content-primary
+ * - Description background: bg-background-tertiary → dark:bg-zinc-700
+ * - Badge colores: Mantienen contraste en ambos modos
+ * - Delete button: text-red-700 → dark:text-red-500
+ *
+ * **Orden de modificadores:** {responsive}:{dark}:{state}:{utility}
+ *
+ * @see docs/colors.md - Sistema de colores
+ * @see docs/typography.md - Sistema tipográfico
+ * @see docs/spacing.md - Sistema de espaciado
+ * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4507-28013 - Diseño Figma
+ *
+ * @example
+ * ```tsx
+ * <POSProductSidebarItems
+ *   categoryLabel="Entradas"
+ *   productRef="00147258369"
+ *   price="$ 40,000.00"
+ *   productName="Nombre producto"
+ *   descriptionItems={[
+ *     { description: "Papas limón mediana", price: "$ 40,000.00" },
+ *     { description: "Papas limón mediana", price: "$ 40,000.00" },
+ *   ]}
+ *   quantity={0}
+ *   onQuantityChange={(qty) => console.log(qty)}
+ *   onDelete={() => console.log('Eliminar')}
+ * />
+ * ```
+ */
+export const POSProductSidebarItems: React.FC<POSProductSidebarItemsProps> = ({
+  categoryLabel,
+  categoryColor = 'lime',
+  productRef,
+  price,
+  productName,
+  descriptionItems = [],
+  showDescription = true,
+  quantity = 0,
+  minQuantity = 0,
+  maxQuantity,
+  onQuantityChange,
+  onDelete,
+  disabled = false,
+  className = '',
+  deleteIcon,
+}) => {
+  // ===== MAPA DE COLORES PARA BADGES =====
+  // Basado en Figma node 4507-28432: bg lime-100 (#ecfccb) y text lime-700 (#4d7c0f)
+  // Orden de modificadores: {responsive}:{dark}:{state}:{utility}
+  const categoryColorClasses: Record<string, { bg: string; text: string }> = {
+    lime: {
+      bg: 'bg-lime-100 dark:bg-lime-900/40',
+      text: 'text-lime-700 dark:text-lime-300'
+    },
+    red: {
+      bg: 'bg-red-100 dark:bg-red-900/40',
+      text: 'text-red-700 dark:text-red-300'
+    },
+    orange: {
+      bg: 'bg-orange-100 dark:bg-orange-900/40',
+      text: 'text-orange-700 dark:text-orange-300'
+    },
+    amber: {
+      bg: 'bg-amber-100 dark:bg-amber-900/40',
+      text: 'text-amber-700 dark:text-amber-300'
+    },
+    yellow: {
+      bg: 'bg-yellow-100 dark:bg-yellow-900/40',
+      text: 'text-yellow-700 dark:text-yellow-300'
+    },
+    green: {
+      bg: 'bg-green-100 dark:bg-green-900/40',
+      text: 'text-green-700 dark:text-green-300'
+    },
+    emerald: {
+      bg: 'bg-emerald-100 dark:bg-emerald-900/40',
+      text: 'text-emerald-700 dark:text-emerald-300'
+    },
+    teal: {
+      bg: 'bg-teal-100 dark:bg-teal-900/40',
+      text: 'text-teal-700 dark:text-teal-300'
+    },
+    cyan: {
+      bg: 'bg-cyan-100 dark:bg-cyan-900/40',
+      text: 'text-cyan-700 dark:text-cyan-300'
+    },
+    sky: {
+      bg: 'bg-sky-100 dark:bg-sky-900/40',
+      text: 'text-sky-700 dark:text-sky-300'
+    },
+    blue: {
+      bg: 'bg-blue-100 dark:bg-blue-900/40',
+      text: 'text-blue-700 dark:text-blue-300'
+    },
+    indigo: {
+      bg: 'bg-indigo-100 dark:bg-indigo-900/40',
+      text: 'text-indigo-700 dark:text-indigo-300'
+    },
+    violet: {
+      bg: 'bg-violet-100 dark:bg-violet-900/40',
+      text: 'text-violet-700 dark:text-violet-300'
+    },
+    purple: {
+      bg: 'bg-purple-100 dark:bg-purple-900/40',
+      text: 'text-purple-700 dark:text-purple-300'
+    },
+    fuchsia: {
+      bg: 'bg-fuchsia-100 dark:bg-fuchsia-900/40',
+      text: 'text-fuchsia-700 dark:text-fuchsia-300'
+    },
+    pink: {
+      bg: 'bg-pink-100 dark:bg-pink-900/40',
+      text: 'text-pink-700 dark:text-pink-300'
+    },
+    rose: {
+      bg: 'bg-rose-100 dark:bg-rose-900/40',
+      text: 'text-rose-700 dark:text-rose-300'
+    },
+    zinc: {
+      bg: 'bg-zinc-100 dark:bg-zinc-800/50',
+      text: 'text-zinc-600 dark:text-zinc-300'
+    },
+    primary: {
+      bg: 'bg-primary-custom-100 dark:bg-primary-custom-600/30',
+      text: 'text-primary-custom-600 dark:text-primary-custom-300'
+    },
+  };
+
+  const colors = categoryColorClasses[categoryColor] || categoryColorClasses.lime;
+
+  // Handler para cambio de cantidad
+  const handleQuantityChange = (newQuantity: number) => {
+    if (!disabled && onQuantityChange) {
+      onQuantityChange(newQuantity);
+    }
+  };
+
+  // Handler para eliminar
+  const handleDelete = () => {
+    if (!disabled && onDelete) {
+      onDelete();
+    }
+  };
+
+  return (
+    <div
+      className={`
+        flex
+        flex-col
+        gap-2
+        w-full
+        ${disabled ? 'opacity-50 pointer-events-none' : ''}
+        ${className}
+      `.trim().replace(/\s+/g, ' ')}
+      data-component="POSProductSidebarItems"
+    >
+      {/* ===== BODY SECTION ===== */}
+      <div className="flex flex-col gap-2 w-full">
+        {/* ===== PRODUCT INFO ===== */}
+        <div className="flex flex-col gap-1 w-full">
+          {/* Row: Badge + Ref + Price - Figma node 4507:28398 */}
+          <div className="flex items-center gap-1 w-full">
+            {/* Col: Badge + Ref - Figma node 4507:28399 */}
+            <div className="flex items-center gap-2 flex-1 min-w-0">
+              {/* Category Badge - Figma node 4507:28432 */}
+              <div
+                className={`
+                  inline-flex
+                  items-center
+                  px-1.5
+                  py-1
+                  rounded-md
+                  transition-colors
+                  duration-150
+                  ${colors.bg}
+                `.trim().replace(/\s+/g, ' ')}
+              >
+                <span
+                  className={`
+                    text-xs
+                    leading-4
+                    font-normal
+                    text-center
+                    whitespace-nowrap
+                    ${colors.text}
+                  `.trim().replace(/\s+/g, ' ')}
+                >
+                  {categoryLabel}
+                </span>
+              </div>
+
+              {/* Product Reference - Figma node 4507:28401 - Paragraph/XXSmall 10px */}
+              <span className="text-[10px] leading-3 font-normal text-content-primary dark:text-dark-content-primary whitespace-nowrap">
+                {productRef}
+              </span>
+            </div>
+
+            {/* Col: Price - Figma node 4507:28450 - Label/Tiny 12px Bold */}
+            <div className="flex items-center shrink-0">
+              <span className="text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right">
+                {price}
+              </span>
+            </div>
+          </div>
+
+          {/* Row: Product Name - Figma node 4507:28404 - Label/Tiny 12px Bold */}
+          <div className="flex items-start w-full">
+            <span className="text-xs leading-4 font-bold text-content-primary dark:text-dark-content-primary flex-1 min-w-0">
+              {productName}
+            </span>
+          </div>
+        </div>
+
+        {/* ===== DESCRIPTION SECTION ===== */}
+        {/* Figma node 4507:28405 - Background tertiary con items de descripción */}
+        {showDescription && descriptionItems.length > 0 && (
+          <div
+            className={`
+              flex
+              flex-col
+              gap-2
+              p-2
+              rounded-lg
+              bg-background-secondary
+              dark:bg-zinc-700
+              w-full
+              transition-colors
+              duration-150
+            `.trim().replace(/\s+/g, ' ')}
+          >
+            {descriptionItems.map((item, index) => (
+              <div
+                key={index}
+                className="flex items-center gap-1 w-full"
+              >
+                {/* Description text - Figma Body/Small 12px Regular */}
+                <span className="flex-1 min-w-0 text-xs leading-3 font-normal text-content-primary dark:text-dark-content-primary">
+                  {item.description}
+                </span>
+                {/* Price - Figma Body/Small Bold 12px */}
+                <span className="text-xs leading-3 font-bold text-content-primary dark:text-dark-content-primary whitespace-nowrap text-right shrink-0">
+                  {item.price}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ===== ACTIONS SECTION ===== */}
+      {/* Figma node 4507:28412 - Quantity control + Delete button */}
+      <div className="flex items-center justify-between w-full">
+        {/* Quantity Control - Figma width: 118px */}
+        <div className="w-[118px]">
+          <Quantity
+            value={quantity}
+            min={minQuantity}
+            max={maxQuantity}
+            onChange={handleQuantityChange}
+            disabled={disabled}
+          />
+        </div>
+
+        {/* Delete Button - Figma node 4514:28258 - 24x24px, color red-700 (#b91c1c) */}
+        <button
+          type="button"
+          onClick={handleDelete}
+          disabled={disabled}
+          className={`
+            flex
+            items-center
+            justify-center
+            w-6
+            h-6
+            rounded-md
+            text-red-700
+            dark:text-red-500
+            hover:text-red-800
+            dark:hover:text-red-400
+            hover:bg-red-50
+            dark:hover:bg-red-900/20
+            focus:outline-none
+            focus:ring-2
+            focus:ring-red-500/50
+            dark:focus:ring-red-400/50
+            focus:ring-offset-1
+            focus:ring-offset-white
+            dark:focus:ring-offset-dark-bg-primary
+            active:scale-95
+            transition-all
+            duration-150
+            ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
+          `.trim().replace(/\s+/g, ' ')}
+          aria-label="Eliminar producto"
+        >
+          {deleteIcon || <TrashIcon className="w-[18px] h-[21px]" />}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+POSProductSidebarItems.displayName = 'POSProductSidebarItems';