import type { IntentName } from "@charcuterie/tokens"; import type { ComponentPropsWithRef, ReactNode } from "react"; import type { ProgressThreshold } from "./progressValue.ts"; export type ProgressBarSize = "lg" | "md" | "sm"; export type ProgressBarProps = Omit, "children"> & { intent?: IntentName; /** * Indeterminate means "working, no measurable progress yet" — not * zero and not unknown-therefore-full. rip-deck's is the * AACS/BD+ preamble: ~25 s of a real Blu-ray emitting nothing, in * which a full bar reads as a finished rip and an empty one as a * wedged drive. */ isIndeterminate?: boolean; isLabelVisible?: boolean; isValueShown?: boolean; /** Required. A progressbar with no name is a grey rectangle. */ label: string; max?: number; /** Content above a full-height, muted track. It stays outside the ARIA widget. */ overlay?: ReactNode; size?: ProgressBarSize; thresholds?: readonly ProgressThreshold[]; value?: number; }; /** * The union of what the fleet has: rip-deck's ARIA and its * indeterminate sweep, plus threshold colours nobody has yet. * * Five repos hand-roll a progress bar and **only rip-deck's has * `role="progressbar"`** — the other four are a `
` with a * percentage width, invisible to assistive technology and to * `getByRole("progressbar")`. * * Three corrections to rip-deck's version, which is otherwise the * best in the fleet: * * - **The role goes on the track, not the fill.** rip-deck puts * `role="progressbar"` on the inner filled element, so the * widget's box is the *filled portion* — a 4% rip is a * progressbar 4px wide as far as AT and a Playwright bounding * box are concerned. * - **The name comes from a real label**, wired with * `aria-labelledby` when it is visible and `VisuallyHidden` when * it is not, rather than a hardcoded `aria-label` string that * cannot be translated or reused. * - **`aria-valuenow` is omitted while indeterminate**, which is * what tells AT "unknown" rather than "zero". rip-deck gets this * right by rendering a separate element; stating it on one * element is the same answer without the duplication. */ export declare const ProgressBar: ({ className, intent, isIndeterminate, isLabelVisible, isValueShown, label, max, overlay, size, thresholds, value, ...divProps }: ProgressBarProps) => ReactNode; //# sourceMappingURL=ProgressBar.d.ts.map