/**
 * Props del componente Notification
 *
 * Badge de notificación para mostrar alertas, mensajes o notificaciones pendientes.
 * Alineado pixel-perfect con el diseño de Figma.
 *
 * @see src/components/Notification/Notification.tsx - Implementación del componente
 * @see docs/colors.md - Sistema de colores (token content-extensions-red)
 * @see docs/typography.md - Sistema tipográfico (Label/XXSmall)
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4310-22651
 *
 * @example
 * ```tsx
 * // Badge simple (punto)
 * const simpleProps: NotificationProps = {};
 *
 * // Badge con número
 * const withCountProps: NotificationProps = {
 *   count: 5,
 *   color: 'red',
 * };
 *
 * // Como overlay
 * <button className="relative">
 *   <Icon />
 *   <Notification count={3} className="absolute -top-1 -right-1" />
 * </button>
 * ```
 */
export interface NotificationProps {
    /**
     * Número de notificaciones a mostrar
     *
     * **Comportamiento:**
     * - `undefined`: Muestra badge simple (punto rojo de 8px)
     * - `1-99`: Muestra el número exacto en el badge
     * - `100+`: Muestra "99+" en el badge
     * - `0` o menor: Muestra badge simple (punto)
     *
     * **Nota:** El badge ajusta su ancho automáticamente según el contenido,
     * con un mínimo de 16px y padding de 4px horizontal.
     *
     * @example
     * ```tsx
     * <Notification />              // Punto rojo simple
     * <Notification count={5} />    // Muestra "5"
     * <Notification count={99} />   // Muestra "99"
     * <Notification count={150} />  // Muestra "99+"
     * <Notification count={0} />    // Punto rojo simple
     * ```
     *
     * @see src/components/Notification/Notification.tsx:93-123 - Renderizado con número
     */
    count?: number;
    /**
     * Color del badge
     *
     * Define el color de fondo del badge. Permite personalizar según el contexto
     * o tipo de notificación.
     *
     * **Colores disponibles:**
     * - `red` (default): Notificaciones de error, alertas críticas
     * - `orange`: Advertencias importantes
     * - `yellow`: Avisos, atención requerida
     * - `green`: Notificaciones positivas, éxito
     * - `blue`: Información general
     * - `purple`: Notificaciones especiales o premium
     * - `zinc`: Notificaciones neutras
     * - Y 15+ colores adicionales de Tailwind
     *
     * **Nota:** El texto siempre será blanco para mantener contraste adecuado.
     *
     * @default 'red'
     *
     * @example
     * ```tsx
     * <Notification count={5} color="red" />      // Error/Crítico
     * <Notification count={2} color="orange" />   // Advertencia
     * <Notification count={8} color="green" />    // Éxito
     * <Notification count={3} color="blue" />     // Info
     * <Notification count={1} color="purple" />   // Especial
     * ```
     *
     * @see src/components/Button/Button.tsx:220-244 - Referencia de colores
     */
    color?: 'zinc' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'primary' | 'secondary' | 'tertiary';
    /**
     * Clases CSS adicionales para posicionamiento o personalización
     *
     * Útil para posicionar el badge como overlay usando absolute positioning.
     *
     * **Advertencia:** Evita sobrescribir tamaños, colores o formas core del badge.
     * Usa solo para posicionamiento, márgenes o efectos adicionales.
     *
     * @example
     * ```tsx
     * // Como overlay en botón
     * <button className="relative">
     *   <BellIcon />
     *   <Notification count={5} className="absolute -top-1 -right-1" />
     * </button>
     *
     * // Con margen personalizado
     * <Notification count={3} className="ml-2" />
     *
     * // Con sombra adicional
     * <Notification count={7} className="shadow-lg" />
     * ```
     */
    className?: string;
    /**
     * Label de accesibilidad (ARIA) personalizado
     *
     * Si no se proporciona, se genera automáticamente:
     * - Con count: "{count} notificación(es)"
     * - Sin count: "Notificación pendiente"
     *
     * **Mejores prácticas:**
     * - Describe el tipo de notificación si es específico
     * - Incluye contexto relevante para screen readers
     * - Mantén el texto conciso pero descriptivo
     *
     * @example
     * ```tsx
     * // Auto-generado (recomendado)
     * <Notification count={5} />
     * // → aria-label="5 notificaciones"
     *
     * // Personalizado
     * <Notification count={3} ariaLabel="3 mensajes no leídos" />
     * <Notification ariaLabel="Nueva alerta de seguridad" />
     * ```
     *
     * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
     */
    ariaLabel?: string;
}
//# sourceMappingURL=Notification.types.d.ts.map