import React from 'react';
import type { POSProductButtonProps } from './POSProductButton.types';
/**
 * Componente POSProductButton del sistema de diseño Siesa
 *
 * Botón especializado para sistemas POS que combina una imagen de producto
 * con un label descriptivo. Diseñado para selección rápida de productos.
 *
 * **Estados disponibles:**
 * - `default`: Estado normal con fondo blanco
 * - `active`: Estado seleccionado con fondo azul claro y texto azul
 * - `disabled`: Estado deshabilitado con opacidad reducida
 *
 * **Características:**
 * - Imagen con aspect ratio 158:80 (proporción de Figma)
 * - Label con tipografía Label Small (14px Bold)
 * - Soporte completo de dark mode
 * - Estados hover, active y focus
 * - 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 la documentación
 * - Estados hover y active completos
 * - Tipografía Label Small (14px Bold) según sistema de diseño
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico (Label)
 * @see docs/spacing.md - Sistema de espaciado
 * @see docs/border-radius.md - Border radius
 *
 * @example
 * ```tsx
 * // Botón de producto normal
 * <POSProductButton
 *   image="/images/parrilla.jpg"
 *   label="A la parrilla"
 *   onClick={() => console.log('Producto seleccionado')}
 * />
 *
 * // Botón de producto activo/seleccionado
 * <POSProductButton
 *   image="/images/parrilla.jpg"
 *   label="A la parrilla"
 *   active={true}
 * />
 *
 * // Botón de producto deshabilitado
 * <POSProductButton
 *   image="/images/parrilla.jpg"
 *   label="A la parrilla"
 *   disabled={true}
 * />
 * ```
 */
export declare const POSProductButton: React.FC<POSProductButtonProps>;
//# sourceMappingURL=POSProductButton.d.ts.map