import React from 'react';
import type { ComponentPropsWithoutRef } from 'react';
export type BadgeVariant = 'default' | 'filled' | 'success' | 'warning' | 'error' | 'neutral';
export type BadgeSize = 'sm' | 'md' | 'lg';
export interface BadgeProps extends Omit<ComponentPropsWithoutRef<'span'>, 'color'> {
    /**
     * Visual variant of the badge.
     * @default 'default'
     */
    variant?: BadgeVariant;
    /**
     * Size of the badge.
     * - sm: 32px (--ai-spacing-16)
     * - md: 40px (--ai-spacing-20) - default
     * - lg: 48px (--ai-spacing-24)
     * @default 'md'
     */
    size?: BadgeSize;
    /**
     * Accessible label for screen readers when content is not descriptive.
     * Use when badge contains only icons, numbers, or abbreviated text.
     * @example
     * ```tsx
     * <Badge ariaLabel="5 unread messages">5</Badge>
     * <Badge ariaLabel="Verified" variant="success">✓</Badge>
     * ```
     */
    ariaLabel?: string;
}
/**
 * Badge component following OpenAI design system.
 *
 * A compact, circular indicator for displaying status, counts, ratings, or labels.
 * Optimized for ChatGPT app interfaces with dark mode support.
 *
 * @example
 * ```tsx
 * // Counter/Rating (provide ariaLabel for accessibility)
 * <Badge ariaLabel="Rating 9.2 out of 10">9.2</Badge>
 *
 * // Notification count
 * <Badge variant="filled" size="sm" ariaLabel="5 unread messages">5</Badge>
 * <Badge variant="filled" size="lg" ariaLabel="99+ notifications">99+</Badge>
 *
 * // Status indicators (always use ariaLabel for icons)
 * <Badge variant="success" ariaLabel="Verified">✓</Badge>
 * <Badge variant="warning" ariaLabel="Warning">!</Badge>
 * <Badge variant="error" ariaLabel="Error">×</Badge>
 *
 * // Compact labels
 * <Badge variant="neutral" size="sm">AI</Badge>
 * ```
 */
export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
//# sourceMappingURL=Badge.d.ts.map