/**
 * @file CircularProgress.tsx
 * @input Uses React, useId, stylex, SVG, color/spacing/duration/ease tokens
 * @output Exports CircularProgress component, CircularProgressProps, CircularProgressSize, CircularProgressVariant types
 * @position Core implementation; consumed by index.ts
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/lab/src/CircularProgress/CircularProgress.doc.mjs (props table, features, implementation notes)
 * - /packages/lab/src/CircularProgress/CircularProgress.test.tsx (tests for new/changed behavior)
 * - /packages/lab/src/CircularProgress/index.ts (exports if types change)
 * - /apps/storybook/stories/CircularProgress.stories.tsx (storybook stories)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '@astryxdesign/core';
/**
 * Extensible variant map for CircularProgress.
 *
 * Theme packages can add custom variants via TypeScript module augmentation:
 * @example
 * ```
 * declare module '@astryxdesign/lab' {
 *   interface CircularProgressVariantMap {
 *     'brand': true;
 *   }
 * }
 * ```
 */
export interface CircularProgressVariantMap {
    accent: true;
    success: true;
    warning: true;
    error: true;
    neutral: true;
}
export type CircularProgressVariant = keyof CircularProgressVariantMap;
export type CircularProgressSize = 'sm' | 'md' | 'lg';
export interface CircularProgressProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Current value of the circular progress.
     * Ignored when `isIndeterminate` is true.
     */
    value?: number;
    /**
     * Maximum value.
     * @default 100
     */
    max?: number;
    /**
     * Accessible label for the progress indicator. Required for a11y.
     */
    label: string;
    /**
     * When true, the label is visually hidden but remains accessible to screen readers.
     * @default true
     */
    isLabelHidden?: boolean;
    /**
     * When true, displays the formatted value (e.g. "75%") in the center of
     * the ring. Ignored when `isIndeterminate` is true or when `children`
     * provide custom center content.
     * @default false
     */
    hasValueLabel?: boolean;
    /**
     * Custom formatter for the value label.
     * @default (value, max) => `${Math.round((value / max) * 100)}%`
     */
    formatValueLabel?: (value: number, max: number) => string;
    /**
     * Content displayed in the center of the ring.
     * Typically a percentage string, icon, or custom content.
     * Takes precedence over `hasValueLabel`.
     */
    children?: ReactNode;
    /**
     * Diameter of the circular progress.
     * - 'sm': 32px
     * - 'md': 48px
     * - 'lg': 64px
     * @default 'md'
     */
    size?: CircularProgressSize;
    /**
     * Visual style variant mapped to semantic color tokens.
     * @default 'accent'
     */
    variant?: CircularProgressVariant;
    /**
     * When true, renders an animated indeterminate progress indicator.
     * Use when the progress amount is unknown (e.g. loading, processing).
     * The `value` and `hasValueLabel` props are ignored in this mode.
     * Respects `prefers-reduced-motion` by slowing the animation.
     * @default false
     */
    isIndeterminate?: boolean;
    /**
     * When true, the circular progress is visually disabled — the ring and
     * text use disabled colors. Use for canceled or inactive operations.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Test ID for testing utilities.
     */
    'data-testid'?: string;
}
/**
 * A circular/radial progress indicator that shows completion as a ring.
 *
 * In determinate mode, displays a known value as an arc fill.
 * In indeterminate mode, shows an animated spinning indicator.
 * Supports center content via children for labels, percentages, or icons,
 * or an automatic formatted value label via `hasValueLabel`.
 *
 * @example
 * ```
 * <CircularProgress value={75} label="Upload progress" hasValueLabel />
 * <CircularProgress isIndeterminate label="Loading..." />
 * <CircularProgress value={3.2} max={5} label="Disk usage" hasValueLabel
 *   formatValueLabel={(v, m) => `${v} GB / ${m} GB`} />
 * <CircularProgress value={30} label="Canceled" isDisabled hasValueLabel />
 * ```
 */
export declare function CircularProgress({ value, max, label, isLabelHidden, hasValueLabel, formatValueLabel, children, size, variant, isIndeterminate, isDisabled, xstyle, className, style, 'data-testid': dataTestId, ref, ...rest }: CircularProgressProps): import("react").JSX.Element;
export declare namespace CircularProgress {
    var displayName: string;
}
//# sourceMappingURL=CircularProgress.d.ts.map