import type { ReactNode } from "react";
import type { Tone } from "../../Theme/tokens/builders/tone";
/** Diameter preset: sm 32px, md 48px, lg 72px. */
export type CircularProgressSize = "sm" | "md" | "lg";
/** A preset, or a diameter in px (clamped to 24..160). */
export type CircularProgressDiameter = CircularProgressSize | number;
/** Props for the SVG ring CircularProgress; the arc starts at 12 o'clock and fills clockwise. */
export interface CircularProgressProps {
    /** Current progress, clamped to 0..max. */
    value: number;
    /** Upper bound of the range; default 100. */
    max?: number;
    /** Diameter preset (32 / 48 / 72px) or a px number clamped to 24..160; default "md". */
    size?: CircularProgressDiameter;
    /** Ring stroke in px; defaults by preset (4 / 5 / 7), or a tenth of a numeric size (3..12). */
    thickness?: number;
    /** Fill colour; default "info", which paints the brand primary rather than blue. */
    tone?: Tone;
    /** Centred content such as "7/10"; a string or number is also spoken as aria-valuetext. */
    label?: ReactNode;
    /** Required accessible name; the ring has no visible caption of its own. */
    "aria-label": string;
    "data-testid"?: string;
}