@base-ui-components/react/progress/root/ProgressRoot.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import { BaseUIComponentProps } from "../../utils/types.js";
/**
 * Groups all parts of the progress bar and provides the task completion status to screen readers.
 * Renders a `<div>` element.
 *
 * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
 */
export declare const ProgressRoot: React.ForwardRefExoticComponent<ProgressRootProps & React.RefAttributes<HTMLDivElement>>;
export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
export interface ProgressRootState {
  status: ProgressStatus;
}
export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressRoot.State> {
  /**
   * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
   */
  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'];
  /**
   * Options to format the value.
   */
  format?: Intl.NumberFormatOptions;
  /**
   * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
   */
  getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
  /**
   * The locale used by `Intl.NumberFormat` when formatting the value.
   * Defaults to the user's runtime locale.
   */
  locale?: Intl.LocalesArgument;
  /**
   * The maximum value.
   * @default 100
   */
  max?: number;
  /**
   * The minimum value.
   * @default 0
   */
  min?: number;
  /**
   * The current value. The component is indeterminate when value is `null`.
   * @default null
   */
  value: number | null;
}
export declare namespace ProgressRoot {
  type State = ProgressRootState;
  type Props = ProgressRootProps;
}