import React from 'react';
import type { POSNumberButtonProps } from './POSNumberButton.types';
/**
 * Componente POSNumberButton del sistema de diseño Siesa
 * Botón numérico especializado para sistemas POS (Point of Sale)
 *
 * Basado en especificaciones de Figma con Tailwind CSS
 *
 * **Características principales:**
 * - Diseñado para pantallas táctiles y POS
 * - Tipografía Display Tiny (48px Bold) para números grandes
 * - Tres tamaños: Small (40x40), Medium (65x65), Large (80x80)
 * - Opción de borde visible o sin borde
 * - Estados: Default, Hover, Active, Disabled
 * - Touch-friendly: active:scale-95 para feedback táctil
 *
 * **Variantes:**
 * - `border=false`: Botón sin borde, hover cambia a primary
 * - `border=true`: Botón con borde, hover resalta el borde
 *
 * **Tamaños:**
 * - `s` (40x40px): Compacto, para teclados numéricos pequeños
 * - `m` (65x65px): Mediano, tamaño intermedio
 * - `l` (80x80px): Grande, tamaño por defecto para POS
 *
 * **Mejores prácticas implementadas:**
 * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
 * - Dark mode con estrategia 'class' (darkMode: 'class')
 * - Tokens de color consistentes con la documentación
 * - Type safety con TypeScript estricto
 * - Accesibilidad con ARIA labels
 * - Feedback visual inmediato con active:scale-95
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico (Display Tiny)
 * @see docs/spacing.md - Sistema de espaciado
 * @see src/components/Button/Button.tsx - Componente Button de referencia
 *
 * @example
 * ```tsx
 * // Botón numérico grande (POS)
 * <POSNumberButton size="l">1</POSNumberButton>
 *
 * // Botón con borde
 * <POSNumberButton size="l" border>2</POSNumberButton>
 *
 * // Botón compacto
 * <POSNumberButton size="s">3</POSNumberButton>
 *
 * // Teclado numérico completo
 * <div className="grid grid-cols-3 gap-2">
 *   {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
 *     <POSNumberButton key={num} size="m" onClick={() => handleInput(num)}>
 *       {num}
 *     </POSNumberButton>
 *   ))}
 * </div>
 * ```
 */
export declare const POSNumberButton: React.FC<POSNumberButtonProps>;
//# sourceMappingURL=POSNumberButton.d.ts.map