import React from 'react';
import type { POSConventionProps } from './POSConvention.types';
/**
 * POSConvention - Componente de leyenda/convención para estados de mesas POS
 *
 * Muestra un indicador circular de color con su respectiva etiqueta según el diseño de Figma.
 * Se usa típicamente para crear leyendas que explican el significado de colores en el sistema POS.
 *
 * **Colores según Figma (node-id: 4418-40139):**
 *
 * | Estado | Light Mode | Dark Mode |
 * |--------|------------|-----------|
 * | Available | #0e79fd (azul) | #93d1fd (azul claro) |
 * | Occupied | #af460e (naranja) | #f5a927 (amarillo) |
 * | Reserved | #7e22ce (morado) | #c084fc (morado claro) |
 * | Out of Service | #3f3f46 (gris) | #a1a1aa (gris claro) |
 *
 * **Dimensiones según Figma:**
 * - Icono: 16x16px (círculo con fill)
 * - Texto: 12px (Paragraph/Tiny - text-xs)
 * - Gap: 4px (gap-1)
 * - Line-height: 16px (leading-4)
 *
 * Mejores prácticas implementadas:
 * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
 * - Dark mode con estrategia 'class' (darkMode: 'class')
 * - Colores exactos de Figma para Light y Dark mode
 * - Type safety con TypeScript estricto
 * - Accesibilidad con aria-label
 *
 * @see docs/colors.md - Sistema de colores
 * @see docs/typography.md - Sistema tipográfico (Paragraph Tiny)
 * @see docs/spacing.md - Sistema de espaciado
 *
 * @example
 * ```tsx
 * // Indicador de disponible
 * <POSConvention status="available" />
 *
 * // Indicador de ocupada
 * <POSConvention status="occupied" />
 *
 * // Leyenda completa en contenedor
 * <div className="p-5 rounded-lg border border-dashed border-primary-300">
 *   <div className="flex flex-col gap-9">
 *     <POSConvention status="available" />
 *     <POSConvention status="occupied" />
 *     <POSConvention status="reserved" />
 *     <POSConvention status="outOfService" />
 *   </div>
 * </div>
 * ```
 */
export declare const POSConvention: React.FC<POSConventionProps>;
//# sourceMappingURL=POSConvention.d.ts.map