import "./progress.css"; import type * as React from "react"; import { useRender } from "@base-ui/react/use-render"; import { type StyleProps } from "./style_props"; export type ProgressShape = "bar" | "ring"; export type ProgressReading = "used" | "remaining"; export type ProgressFormat = "percentage" | "fraction" | "none"; /** Each segment's width is `value` over the bar's `max`. */ export interface ProgressSegment { key: string; value: number; color: string; } /** Overrides for the `remaining` reading's captions; each falls back to the pack. */ export interface ProgressRemainingLabels { applied?: (used: string, total: string) => string; remaining?: (remainder: string) => string; over?: (amount: string) => string; exact?: string; } interface ProgressCommon extends StyleProps { /** Default 10 on a bar; on a ring a tenth of `size`, floored at 2px, since one default cannot serve * 140px and 16px. */ thickness?: number; /** Formats the caption's numbers (locale grouping by default); pass true numbers so fill and percentage * stay exact. */ formatValue?: (n: number) => string; /** The unfilled remainder; defaults to `--muted`. */ trackColor?: string; testID?: string; ref?: React.Ref; render?: useRender.RenderProp; } /** `progressbar` requires a name (WAI-ARIA, Name From: author); a drawn `title` is the name whatever else * is passed. */ type Named = { title: string; accessibilityLabel?: string; } | { title?: string; accessibilityLabel: string; }; interface ScalarCommon extends ProgressCommon { value: number; /** `null` = no bound: the caption states the value and `unboundedLabel`, the track stays empty. Compact, * it is the figure alone in the bounded figures' slot. */ max: number | null; reading?: "used"; /** `percentage` → "50%", `fraction` → "1,250 / 2,500 (50%)". Reports the true ratio ("105%") while the * track clamps. A ring reads `fraction` as `percentage`. */ format?: ProgressFormat; unboundedLabel?: string; /** Named once after the pair — "0/8 pcs"; a percentage takes none. */ unit?: string; /** Formats `value / max` (may exceed 1); whole points by default. Separate from `formatValue` so a * surface's own percentages can agree. */ formatPercent?: (fraction: number) => string; /** Replaces the derived figure. `null` states nothing on this row: a `compact` bar keeps the empty slot * so its track ends with its neighbours'. A bar that never prints a figure takes `format="none"` and * seats no slot. */ caption?: string | null; /** The meter's verdict near a ceiling — a variant so fills agree everywhere; `color` picks the series. */ tone?: "warning" | "danger"; /** The fill's colour short of `max` — a series colour. */ color?: string; /** The fill's colour at `max` or past `gate`. */ completeColor?: string; } interface BarProps extends ScalarCommon { shape?: "bar"; /** One row, the track with a count, for cells and headings. `inline` sits inside a line of text: a short * fixed track at the line's height, so every inline meter reads on one scale. */ compact?: boolean | "inline"; /** The px slot for the figure — the column's widest — so figures start and tracks end at one x; default * `9ch`, and inline its figure's own width. */ figure?: number; /** A caret where the fill is expected by now (0..1 of `max`); it judges nothing — the verdict is still * `tone`. */ pace?: number | null; /** A solid pass mark (0..1 of `max`) — a minimum to reach — spoken beside the reading and printed under a * non-compact bar; a fill short of it reads in the warning tone, at or past it the calm fill. */ gate?: number | null; /** The pass mark's name, printed before its figure under the track ("Deposit 479.75"): a bare figure under a * meter says nothing of what it marks. Absent, the kit's word for a pass mark. */ gateLabel?: string; /** How far past `max` the value may stand, as a share of it: the bound is an amount expected (received * against ordered), not a cap — complete at and past it within the tolerance, the warning tone beyond, * never red. Absent, `max` is a cap, red past it. */ tolerance?: number | null; } interface RingProps extends Omit { shape: "ring"; /** Default 100, so a percentage reads directly; pass the real pair so arc and figure derive from * untouched numbers. */ max?: number | null; /** Default 140 (dashboard); ~16 for a control row. */ size?: number; } interface SegmentedProps extends ProgressCommon { shape?: "bar"; reading?: "used"; /** Zero segments collapse and the shortfall against `max` is the unfilled tail — sized against each * other the bar is always full. Named shares are a `Breakdown`. */ value: ProgressSegment[]; max: number; caption?: string; /** Named, a split announces the filled share; unnamed it is `aria-hidden`, a picture. */ title?: string; accessibilityLabel?: string; } interface RemainingProps extends ProgressCommon { shape?: "bar"; /** What is left, not used: announced as a `meter`, and the fill colour is the verdict — accent under, * green exact, red over. */ reading: "remaining"; value: number; /** The source being distributed — a payment, available stock. */ max: number; labels?: ProgressRemainingLabels; title?: string; accessibilityLabel?: string; } export type ProgressProps = (BarProps & Named) | (RingProps & Named) | SegmentedProps | RemainingProps; /** A value against its maximum, three axes of meaning: `shape` (straight or round), `value` (one number or * a split), `reading` (used or left). Countable stages are a `Stepper`, shrinking cohorts a `Funnel`. The * caption stays muted, so the verdict lives on the fill — except `reading="remaining"`. */ export declare function Progress(props: ProgressProps): React.JSX.Element; export {};