import type { ReactNode } from 'react';
import { SemanticColorsEnum, SecondaryColorsEnum } from '../../types';
export { SemanticColorsEnum, SecondaryColorsEnum };
export declare enum BadgeVariants {
    /** `${color}-700` background-color */
    DARK = "dark",
    /**
     * Usage discouraged unless used within a "light" BadgeGroup;
     * `$background` background-color (i.e., '#ffffff' in light theme);
     * Untitled UI only uses this variant when used with a BadgeGroup.
     */
    LIGHT = "light",
    /** `${color}-50` background-color; `${color}-700` color; default */
    MEDIUM = "medium",
    /** ${color}-50 background-color; ${color}-700 color and border-color */
    OUTLINE = "outline"
}
export declare enum BadgeSizes {
    SM = "sm",
    MD = "md",
    LG = "lg"
}
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
    /** Default: 'medium'; usage of 'light' discouraged, except within a BadgeGroup where its borders would be visible; for variants, see https://www.figma.com/file/Xt05q1xny4SbE2HHOEFe2j/KAD-MASTER-Untitled-UI?type=design&node-id=1046-3819&t=CHMK7hyNfGt74yTF-0 */
    variant?: BadgeVariants;
    /** Default: 'sm'  */
    size?: BadgeSizes;
    /** Badge content */
    children: ReactNode | ReactNode[];
    /** Badge color; default 'primary' */
    color?: SemanticColorsEnum | SecondaryColorsEnum;
}