/// <reference types="react" />
import { BoxProps } from '@chakra-ui/react';
import { IAriaAttributes, Color } from "../../core/types";
/**
 * Props for the Badge component.

 * @gen_ai
 * The `Badge` component is typically used as a wrapper around interactive elements like buttons to display a notification indicator or a status dot.
 *
 * **Best Practices:**
 * - Use badges to draw attention to specific elements that require user interaction or indicate a status.
 * - Keep the `content` concise to maintain clarity and avoid clutter.
 * - Utilize the `styles` prop to position the badge appropriately relative to its wrapped component.
 */
export interface IBadge extends IAriaAttributes {
    /**
     * Component to wrap with Badge.
     */
    children: React.ReactNode;
    /**
     * The color of the badge.
     */
    color?: Color;
    /**
     * The content of the badge.
     */
    content?: string | number;
    /**
     * Toggle badge visibility.
     */
    invisible?: boolean;
    /**
     * Optionally change Dot styles, e.g., for different top or right positions.
     */
    styles?: BoxProps;
}