import * as React from "react"; /** * The METER's tone. `primary` (the default, gh#1308) is the brand role for ordinary progress — a * reading position, an upload; the status tones are opt-in for a bar that reports that status * (ADR C09). `primary` is the name `Badge` already gives its brand tone. */ export type ProgressTone = "primary" | "success" | "warning" | "destructive"; /** * A breakdown SLICE takes two more status tones than the meter (gh#1302): `info` and `neutral`, the * same pair `Legend` already keys — a partition with four states (done · done-awaiting · in * progress · not started) needs four distinguishable fills, and the meter's three made two of them * identical. Each paints exactly what the matching Legend swatch paints, so a key and its bar stay * one. No `primary`: a partition is states, and Legend keys no brand swatch. */ export type ProgressSegmentTone = Exclude | "info" | "neutral"; /** * One slice of a BREAKDOWN bar — how much of the total this state holds, in the SAME unit as every * other slice (counts, bytes, yen). Never a percentage: the bar owns the ratio arithmetic, so the * caller never has to round three numbers that must still add up to 100. * * `label` is not decoration. Colour alone cannot carry the meaning of a slice (WCAG 1.4.1), and it * is the only thing a screen reader has to say about it, so it is required. */ export type ProgressSegment = { value: number; tone: ProgressSegmentTone; label: string; }; type ProgressBase = Omit, "role" | "children" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext"> & { /** * Bar thickness — `md` (default) or `sm`. * * `md` is the size each form was designed at, and it stays the default for the reason spelled * out on the breakdown below: three abutting fills need height before their ratios are * comparable. `sm` is for a bar that is not the subject of the screen but a column of one — an * in-table capacity bar next to a row of numbers, where a 22px partition outweighs the row it * annotates and sets the row height for the whole table. * * Both steps come from the same token pair (`--progress-*-block-size`, * `--progress-*-block-size-sm`), so a theme retunes the scale rather than one call site. Nothing * about the ARIA changes: `sm` is thickness, not meaning. */ size?: "sm" | "md"; /** * Visible caption under the bar; it also becomes the bar's accessible name. Omit it and the bar * falls back to the catalogue name — or to whatever `aria-label`/`aria-labelledby` the caller * passes, which is how a bar gets its name from a heading that is already on screen. */ label?: string; }; /** * Geometry of the METER — the same measurement, drawn two ways. * * `bar` is the default and what every existing call site gets. `ring` draws the identical ratio as * an arc, for a header with no room for a full-width bar: a phone app bar that has to show * "18 of 42 done" beside a title has one square of space, and a bar plus its caption needs two * stacked rows. Reach for it when the SPACE is square, not when the number is important — the two * shapes say exactly the same thing and carry the same ARIA. * * It is a meter shape only. A ring around a `segments` breakdown is a pie chart, which is * `PieChart donut` and belongs to the charts entry point; that one is a part-to-whole across * CATEGORIES with a legend and tooltips, and a screen reader should hear it as an image, not as a * progressbar. */ export type ProgressShape = "bar" | "ring"; /** A METER: one ratio of one whole. */ type ProgressMeterProps = ProgressBase & { value: number; tone?: ProgressTone; /** * `bar` (default) or `ring` — the same measurement drawn as a full-width bar or as an arc. * `label` moves INSIDE the ring, which is the point of it: the readout and its proportion take * one square instead of two stacked rows. */ shape?: ProgressShape; /** * Allow `value` to exceed 100 and render an OVER-CAPACITY fill: the bar caps at 100% width but * gets a diagonal striped overlay + destructive tone, so an over-limit meter (e.g. 252% of a * booked weight) is unmistakably different from a full (100%) one. `aria-valuetext` reports the * real ratio. */ over?: boolean; segments?: never; }; /** * A BREAKDOWN: one whole split into its states. * * ## Why this is not a meter with three calls * * A meter answers "how far along?" and has ONE value, so `role="progressbar"` fits it exactly. * A breakdown answers "what is this total made of?" — 2 overdue · 3 due soon · 12 done. Stacking * three progressbars says the wrong thing three times over (three separate 0–100 measurements), * and no ARIA value pattern models a partition. It is a picture of data, so it names itself once * as `role="img"` and reads out every slice with its own label and amount. * * ## Why it is a taller bar than the meter * * A 0.5rem pill is legible when it carries one fill against one track. Three abutting fills at * that height read as a coloured hairline — the ratios, which are the entire point, stop being * comparable. So the breakdown takes its own block size and corner, both retunable * (`--progress-breakdown-*`). */ type ProgressBreakdownProps = ProgressBase & { segments: ProgressSegment[]; /** * The WHOLE the slices are drawn against, in the same unit as their `value`s. Omit it and the * whole is the sum of the slices (the bar is always full). Pass it when part of the whole has * no state yet — 3 passed of 400 test cases — and the rest stays the TRACK, exactly as antd's * `percent` leaves the unfilled track as the remainder of 100. A `total` below the sum is * ignored (the sum wins), so the slices never overflow the bar. * * The remainder is spoken as part of the `role="img"` name, Intl-formatted in the active * locale, under `remainderLabel`. */ total?: number; /** * What the remainder is called in the spoken breakdown (e.g. `未実施`). Defaults to the * catalogue's "Remaining" / 残り / Còn lại. Only read when `total` is set. */ remainderLabel?: string; value?: never; tone?: never; over?: never; /** A ring around a partition is a pie chart — that is `PieChart donut`, not this. */ shape?: never; }; export type ProgressProps = ProgressMeterProps | ProgressBreakdownProps; export declare function Progress(props: ProgressProps): React.JSX.Element; export {};