import React from 'react';
import type { ThemeVars } from '@coinbase/cds-common';
import type { ProgressBaseProps } from './ProgressBar';
export type ProgressCircleBaseProps = ProgressBaseProps & {
  /**
   * Toggle used to hide the content node rendered inside the circle.
   */
  hideContent?: boolean;
  /**
   * @deprecated Use hideContent instead. This will be removed in a future major release.
   * @deprecationExpectedRemoval v8
   * Toggle used to hide the text rendered inside the circle.
   */
  hideText?: boolean;
  /**
   * Optional size in px for the visualization.
   * This is useful if the visualization is used in an HStack.
   * If this is omitted the visualization will fill the parent width or height.
   * Since it's a circular visualization it will fill the smaller of the parent width or height
   */
  size?: number;
  /**
   * Optional component to override the default content rendered inside the circle.
   */
  contentNode?: React.ReactNode;
  /**
   * Toggle used to show an indeterminate progress circle.
   */
  indeterminate?: boolean;
};
export type ProgressCircleProps = ProgressCircleBaseProps & {
  style?: React.CSSProperties;
  className?: string;
  /** Custom styles for individual elements of the ProgressCircle component */
  styles?: {
    /** Root element */
    root?: React.CSSProperties;
    /** SVG element */
    svg?: React.CSSProperties;
    /** Background circle element */
    circle?: React.CSSProperties;
    /** Foreground progress circle element */
    progress?: React.CSSProperties;
  };
  /** Custom class names for individual elements of the ProgressCircle component */
  classNames?: {
    /** Root element */
    root?: string;
    /** SVG element */
    svg?: string;
    /** Background circle element */
    circle?: string;
    /** Foreground progress circle element */
    progress?: string;
  };
};
export type ProgressCircleContentProps = Pick<
  ProgressCircleBaseProps,
  'progress' | 'disableAnimateOnMount' | 'disabled'
> & {
  /**
   * Custom text color.
   * @default fgMuted
   */
  color?: ThemeVars.Color;
};
export declare const ProgressCircle: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<
    import('@coinbase/cds-common').SharedProps &
      Pick<import('../motion/types').HintMotionBaseProps, 'disableAnimateOnMount'> &
      Pick<import('@coinbase/cds-common').SharedAccessibilityProps, 'accessibilityLabel'> & {
        progress?: number;
        weight?: import('@coinbase/cds-common').Weight;
        disabled?: boolean;
        color?: ThemeVars.Color;
        onAnimationEnd?: () => void;
        onAnimationStart?: () => void;
      } & {
        /**
         * Toggle used to hide the content node rendered inside the circle.
         */
        hideContent?: boolean;
        /**
         * @deprecated Use hideContent instead. This will be removed in a future major release.
         * @deprecationExpectedRemoval v8
         * Toggle used to hide the text rendered inside the circle.
         */
        hideText?: boolean;
        /**
         * Optional size in px for the visualization.
         * This is useful if the visualization is used in an HStack.
         * If this is omitted the visualization will fill the parent width or height.
         * Since it's a circular visualization it will fill the smaller of the parent width or height
         */
        size?: number;
        /**
         * Optional component to override the default content rendered inside the circle.
         */
        contentNode?: React.ReactNode;
        /**
         * Toggle used to show an indeterminate progress circle.
         */
        indeterminate?: boolean;
      } & {
        style?: React.CSSProperties;
        className?: string;
        /** Custom styles for individual elements of the ProgressCircle component */
        styles?: {
          /** Root element */
          root?: React.CSSProperties;
          /** SVG element */
          svg?: React.CSSProperties;
          /** Background circle element */
          circle?: React.CSSProperties;
          /** Foreground progress circle element */
          progress?: React.CSSProperties;
        };
        /** Custom class names for individual elements of the ProgressCircle component */
        classNames?: {
          /** Root element */
          root?: string;
          /** SVG element */
          svg?: string;
          /** Background circle element */
          circle?: string;
          /** Foreground progress circle element */
          progress?: string;
        };
      } & React.RefAttributes<HTMLDivElement>
  >
>;
//# sourceMappingURL=ProgressCircle.d.ts.map