ProgressBar

The props declared for ProgressBar, generated from the types @proyecto-viviana/ui ships.

Import

import { ProgressBar } from "@proyecto-viviana/ui";

Props

Differs from @proyecto-viviana/solid-spectrum

pendingValue exists only here.
trackStyle exists only here.
segments exists only here.

Props for ProgressBar in @proyecto-viviana/ui
Prop	Type	Default	Description
`value`	number	`0`	The current value.
`pendingValue`	number	—	A second value beyond `value` rendered as a dithered extension of the fill — the register's "in flight" segment (the XP bar's 6% checker after the 84% solid, TerminalGlassLab.tsx:773-780). Purely visual; the accessible value stays `value`. Ignored while indeterminate.
`trackStyle`	'bar' \| 'bracket'	`'bar'`	How the track is drawn. `"bar"` is the filled 8px recess; `"bracket"` replaces it with the register's mono readout of the same value — `[▮▮▮▮▯▯▯▯▯▯]` — for rows that live inside a terminal well, where a painted bar reads as a foreign object among text. The bracket is decorative (`aria-hidden`): the accessible value is the `progressbar` role's own, identical in both forms. Indeterminate progress always draws the bar — a fixed glyph run cannot sweep without inventing motion. Local addition — no S2 counterpart.
`segments`	number[]	—	Relative widths of the track's sections, e.g. `[3, 1, 2]` for a three-chapter run. The bar is cut into that many sections, each proportional to its number and split from its neighbour by a hairline gap; the fill (and the `pendingValue` dither) flows across them exactly as it does across the undivided bar. Values ≤ 0 and arrays shorter than two entries are ignored. Purely visual — the accessible value is unchanged. Local addition — no S2 counterpart.
`minValue`	number	`0`	The smallest value allowed.
`maxValue`	number	`100`	The largest value allowed.
`valueLabel`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The content to display as the value's label, e.g. "1 of 4".
`isIndeterminate`	false \| true	—	Whether presentation is indeterminate when progress isn't known.
`formatOptions`	Intl.NumberFormatOptions	—	The display format of the value label.
`size`	'S' \| 'M' \| 'L' \| 'XL'	`'M'`	The size of the progress bar.
`label`	number \| boolean \| RenderedElement \| ArrayElement \| (string & {}) \| Node \| JSX.ArrayElement	—	The label to display above or beside the progress bar.
`staticColor`	'white' \| 'black' \| 'auto'	—	The static color style to apply over a color background.
`labelPosition`	'top' \| 'side'	`'top'`	The label's overall position relative to the progress bar.
`styles`	StyleString \| (() => StyleString \| undefined)	—	Spectrum-defined generated classes.
`UNSAFE_className`	string \| UnsafeClassName	—	Additional CSS class name. Use only as a last resort.
`UNSAFE_style`	JSX.CSSProperties	—	Additional inline styles. Use only as a last resort.
`id`	string	—	Not yet documented
`slot`	string	—	Not yet documented
`ref`	HTMLDivElement \| ((el: HTMLDivElement) => void) \| { current?: HTMLDivElement \| null \| undefined; }	—	Not yet documented
`aria-label`	string	—	Not yet documented
`aria-labelledby`	string	—	Not yet documented
`aria-describedby`	string	—	Not yet documented
`aria-details`	string	—	Not yet documented

Declared in packages/viviana-ui/src/progress-bar/index.tsx.

Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.