@payfit/unity-components/dist/esm/components/badge/parts/BadgeDot.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { HTMLAttributes } from 'react';
declare const badgeDot: import('tailwind-variants').TVReturnType<{
    color: {
        primary: {
            dot: string;
        };
        'primary.low': {
            dot: string;
        };
        'neutral.lowest': {
            dot: string;
        };
        'neutral.highest': {
            dot: string;
        };
        danger: {
            dot: string;
        };
        'danger.low': {
            dot: string;
        };
        warning: {
            dot: string;
        };
        'warning.low': {
            dot: string;
        };
        success: {
            dot: string;
        };
        'success.low': {
            dot: string;
        };
        info: {
            dot: string;
        };
        'info.low': {
            dot: string;
        };
        'decorative-teal': {
            dot: string;
        };
        'decorative-purple': {
            dot: string;
        };
        'decorative-plum': {
            dot: string;
        };
        'decorative-orange': {
            dot: string;
        };
    };
}, {
    root: string;
    dot: string;
}, undefined, {
    color: {
        primary: {
            dot: string;
        };
        'primary.low': {
            dot: string;
        };
        'neutral.lowest': {
            dot: string;
        };
        'neutral.highest': {
            dot: string;
        };
        danger: {
            dot: string;
        };
        'danger.low': {
            dot: string;
        };
        warning: {
            dot: string;
        };
        'warning.low': {
            dot: string;
        };
        success: {
            dot: string;
        };
        'success.low': {
            dot: string;
        };
        info: {
            dot: string;
        };
        'info.low': {
            dot: string;
        };
        'decorative-teal': {
            dot: string;
        };
        'decorative-purple': {
            dot: string;
        };
        'decorative-plum': {
            dot: string;
        };
        'decorative-orange': {
            dot: string;
        };
    };
}, {
    root: string;
    dot: string;
}, import('tailwind-variants').TVReturnType<{
    color: {
        primary: {
            dot: string;
        };
        'primary.low': {
            dot: string;
        };
        'neutral.lowest': {
            dot: string;
        };
        'neutral.highest': {
            dot: string;
        };
        danger: {
            dot: string;
        };
        'danger.low': {
            dot: string;
        };
        warning: {
            dot: string;
        };
        'warning.low': {
            dot: string;
        };
        success: {
            dot: string;
        };
        'success.low': {
            dot: string;
        };
        info: {
            dot: string;
        };
        'info.low': {
            dot: string;
        };
        'decorative-teal': {
            dot: string;
        };
        'decorative-purple': {
            dot: string;
        };
        'decorative-plum': {
            dot: string;
        };
        'decorative-orange': {
            dot: string;
        };
    };
}, {
    root: string;
    dot: string;
}, undefined, unknown, unknown, undefined>>;
export interface BadgeDotProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeDot> {
    /**
     * Token-backed surface color used for the visible dot marker.
     *
     * Use decorative colors for the Badge Cluster pattern. Semantic surface colors are available when the dot needs to align with a product-specific status or category.
     * @default 'decorative-teal'
     */
    color?: VariantProps<typeof badgeDot>['color'];
}
/**
 * The BadgeDot component renders a small decorative marker for the Badge prefix slot.
 *
 * BadgeDot is primarily used to build the Badge Cluster pattern, where a contextual Badge displays a leading colored dot before its label. It reserves the prefix-slot footprint and renders a centered circular marker, so consumers do not need to recreate Badge-specific spacing or geometry.
 * @param {BadgeDotProps} props - The props for the BadgeDot component, including the token-backed `color` and optional root `className`.
 * @example
 * ```tsx
 * import { Badge, BadgeDot } from '@payfit/unity-components'
 *
 * function Example() {
 *   return (
 *     <Badge variant="contextual" prefix={<BadgeDot color="decorative-teal" />}>
 *       Cluster
 *     </Badge>
 *   )
 * }
 * ```
 * @remarks
 * - Use BadgeDot inside `Badge`'s `prefix` prop for the supported Cluster composition.
 * - BadgeDot is decorative and is hidden from assistive technologies with `aria-hidden="true"`.
 * - Prefer decorative colors for Cluster markers unless a semantic status color is explicitly needed.
 * @see {@link BadgeDotProps} for all available props
 * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/badge/parts/BadgeDot.tsx GitHub}
 * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=20376-46274&m=dev Figma}
 * @see Design docs in {@link https://www.payfit.design/24f360409/p/20d6f1-badge Payfit.design}
 */
declare const BadgeDot: import('react').ForwardRefExoticComponent<BadgeDotProps & import('react').RefAttributes<HTMLSpanElement>>;
export { BadgeDot };