@stratakit/bricks/dist/Progress.d.ts

Small, modular components for StrataKit

import * as React from "react";
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface ProgressBarProps extends Omit<BaseProps, "aria-labelledby"> {
    /**
     * Label for the progress bar.
     *
     * This prop is required because `role="progressbar"` requires an accessible name.
     */
    "aria-labelledby": string;
    /**
     * The size of the progress bar.
     * @default "medium"
     */
    size?: "medium" | "large";
    /**
     * The tone of the progress bar.
     * @default "neutral"
     */
    tone?: "neutral" | "accent";
    /**
     * The value of the progress bar between 0 and 100 (inclusive). This value is rounded to 3 decimal places.
     *
     * - If passed, the progress bar will be determinate.
     * - If not passed, the progress bar will be indeterminate.
     *
     * Note: Indeterminate progress bars (`value` not passed) should only be used for indicating the progress of short
     * operations (i.e. less than 5 seconds).
     */
    value?: number;
}
/**
 * A linear progress bar for indicating progress of an operation (or loading of data).
 * This component maps to the [ARIA `progressbar` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role)
 * and must be labelled using `aria-labelledby`.
 *
 * Note: A progress bar is indeterminate if no `value` is passed.
 *
 * Example:
 * ```tsx
 * <ProgressBar aria-labelledby={…} /> // indeterminate
 * <ProgressBar aria-labelledby={…} value={50} /> // determinate
 * ```
 *
 * Supports a `tone` prop to change the tone (color) of the progress bar.
 * Supports a `size` prop to change the size of the progress bar.
 *
 */
declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export { ProgressBar };