import React from 'react';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type { SharedAccessibilityProps, SharedProps, Weight } from '@coinbase/cds-common/types';
import type { HintMotionBaseProps } from '../motion/types';
export type ProgressBaseProps = SharedProps &
  Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
  Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
    /** Number between 0-1 representing the progress percentage */
    progress?: number;
    /** Toggle used to change thickness of progress visualization
     * @default normal
     * */
    weight?: Weight;
    /**
     * Toggle used to show a disabled progress visualization
     */
    disabled?: boolean;
    /**
     * Custom progress color.
     * @default primary
     */
    color?: ThemeVars.Color;
    /**
     * Callback fired when the progress animation ends.
     */
    onAnimationEnd?: () => void;
    /**
     * Callback fired when the progress animation starts.
     */
    onAnimationStart?: () => void;
  };
export type ProgressBarProps = ProgressBaseProps & {
  style?: React.CSSProperties;
  className?: string;
  /** Custom styles for individual elements of the ProgressBar component */
  styles?: {
    /** Root element */
    root?: React.CSSProperties;
    /** Progress fill element */
    progress?: React.CSSProperties;
  };
  /** Custom class names for individual elements of the ProgressBar component */
  classNames?: {
    /** Root element */
    root?: string;
    /** Progress fill element */
    progress?: string;
  };
};
export declare const ProgressBar: React.MemoExoticComponent<
  React.ForwardRefExoticComponent<
    SharedProps &
      Pick<HintMotionBaseProps, 'disableAnimateOnMount'> &
      Pick<SharedAccessibilityProps, 'accessibilityLabel'> & {
        /** Number between 0-1 representing the progress percentage */
        progress?: number;
        /** Toggle used to change thickness of progress visualization
         * @default normal
         * */
        weight?: Weight;
        /**
         * Toggle used to show a disabled progress visualization
         */
        disabled?: boolean;
        /**
         * Custom progress color.
         * @default primary
         */
        color?: ThemeVars.Color;
        /**
         * Callback fired when the progress animation ends.
         */
        onAnimationEnd?: () => void;
        /**
         * Callback fired when the progress animation starts.
         */
        onAnimationStart?: () => void;
      } & {
        style?: React.CSSProperties;
        className?: string;
        /** Custom styles for individual elements of the ProgressBar component */
        styles?: {
          /** Root element */
          root?: React.CSSProperties;
          /** Progress fill element */
          progress?: React.CSSProperties;
        };
        /** Custom class names for individual elements of the ProgressBar component */
        classNames?: {
          /** Root element */
          root?: string;
          /** Progress fill element */
          progress?: string;
        };
      } & React.RefAttributes<HTMLDivElement>
  >
>;
//# sourceMappingURL=ProgressBar.d.ts.map