import React from 'react';
import type { POSProductSidebarItemsProps } from './POSProductSidebarItems.types';
/**
 * 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 declare const POSProductSidebarItems: React.FC<POSProductSidebarItemsProps>;
//# sourceMappingURL=POSProductSidebarItems.d.ts.map