import { TNode, Value } from '@tempots/dom';
import { ControlSize, ButtonVariant } from '../theme';
import { ThemeColorName } from '../../tokens';
import { ExtendedColor } from '../theme/style-utils';
import { RadiusName } from '../../tokens/radius';
/** Configuration options for the {@link Badge} component. */
export interface BadgeOptions {
    /** Visual style variant matching button variants. @default 'filled' */
    variant?: Value<ButtonVariant>;
    /** Size of the badge affecting padding and font. @default 'md' */
    size?: Value<ControlSize>;
    /** Theme color for the badge background and text. @default 'base' */
    color?: Value<ThemeColorName>;
    /** Border radius of the badge. @default 'full' */
    roundedness?: Value<RadiusName>;
    /** Whether to render as a circle (equal width and height). @default false */
    circle?: Value<boolean>;
    /** Whether the badge takes the full width of its container. @default false */
    fullWidth?: Value<boolean>;
    /** Callback when the close button is clicked. Renders a close button when set. */
    onClose?: () => void;
    /** Whether the badge is disabled. @default false */
    disabled?: Value<boolean>;
}
/**
 * Generates CSS class names for the badge based on size, roundedness, and shape.
 */
export declare function generateBadgeClasses(size: ControlSize, roundedness: RadiusName, circle: boolean, fullWidth: boolean, disabled: boolean): string;
/**
 * Generates inline CSS custom properties for badge theming based on variant and color.
 * Sets background, text, border, and hover colors for both light and dark modes.
 */
export declare function generateBadgeStyles(variant: ButtonVariant, color: ExtendedColor): string;
/**
 * A small status indicator or label component with theme-aware colors.
 * Supports all button variants (filled, light, outline, default, text) and
 * can be rendered as a pill, circle, or full-width element.
 * Optionally renders a close button for removable badges.
 *
 * @param options - Configuration for variant, size, color, shape, and close behavior
 * @param children - Content to display inside the badge (text, number, icon)
 * @returns A styled span element
 *
 * @example
 * ```typescript
 * Badge({ variant: 'filled', color: 'success', size: 'sm' }, '3')
 * ```
 *
 * @example
 * ```typescript
 * // Removable badge
 * Badge({ variant: 'light', color: 'info', onClose: () => remove(item) }, 'TypeScript')
 * ```
 */
export declare function Badge({ variant, size, color, roundedness, circle, fullWidth, onClose, disabled, }: BadgeOptions, ...children: TNode[]): import("@tempots/dom").Renderable;