import type { BadgeProps } from './Badge.types';
/**
 * Badge del sistema de diseño Siesa
 *
 * Componente para mostrar etiquetas con múltiples variantes de color.
 * Los badges mantienen sus colores vibrantes en light y dark mode para
 * garantizar visibilidad y consistencia visual.
 *
 * Características implementadas:
 * - 21 variantes de color (zinc, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, primary, secondary, tertiary)
 * - Icono opcional a la izquierda (12x12px)
 * - Contador/notification badge opcional
 * - Estados hover con transiciones suaves
 * - Los colores se mantienen vibrantes en dark mode (según diseño Figma)
 * - Tipografía: Label Tiny (12px Bold)
 *
 * Mejores prácticas implementadas:
 * - Tokens de color de Tailwind estándar para badges
 * - Font-family explícita (Inter via font-sans)
 * - Transiciones suaves (duration-200)
 * - Estructura clara y mantenible
 *
 * @see docs/typography.md - Sistema tipográfico (Label Tiny)
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4130-9382
 *
 * @example
 * ```tsx
 * // Badge simple
 * <Badge color="blue" label="Label" />
 *
 * // Badge con icono
 * <Badge color="green" label="Success" leftIcon={<CheckIcon />} />
 *
 * // Badge con contador
 * <Badge color="red" label="Errors" count={5} />
 *
 * // Badge completo
 * <Badge color="primary" label="Messages" leftIcon={<MailIcon />} count={12} />
 * ```
 */
export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=Badge.d.ts.map