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