Skip to main content
PROYECTOVIVIANA

Meter

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

Import

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

Props

Differs from @proyecto-viviana/solid-spectrum
  • segments exists only here.
  • variant adds 'warning', 'success', 'metric'.
Props for Meter in @proyecto-viviana/ui
PropTypeDefaultDescription
valuenumber0The current value (controlled).
minValuenumber0The smallest value allowed.
maxValuenumber100The largest value allowed.
valueLabelnumber | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement—The content to display as the value's label (e.g. "75 GB").
formatOptionsIntl.NumberFormatOptions—The display format of the value label.
size'S' | 'M' | 'L' | 'XL''M'The size of the meter.
segmentsnumber—Render the meter as this many discrete blocks instead of a continuous bar — the register's `[▮▮▮▯▯]` capacity form (Panel07's focus/streak/xp/memory rows, TerminalGlassLab.tsx:914-931). The value quantizes to `round(fraction × segments)` filled blocks; the accessible value stays continuous.
variant'negative' | 'warning' | 'success' | 'informative' | 'positive' | 'notice' | 'metric''informative'The visual style variant. `success`/`warning` alias `positive`/`notice`. `metric` is a local addition — no S2 counterpart — for the register's cyan measurement channel.
labelnumber | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement—The label to display above the meter.
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 meter.
stylesStyleString | (() => StyleString | undefined)—Spectrum-defined generated classes.
UNSAFE_classNamestring | UnsafeClassName—Additional CSS class name. Use only as a last resort.
UNSAFE_styleJSX.CSSProperties—Additional inline styles. Use only as a last resort.
idstring—Not yet documented
slotstring—Not yet documented
refHTMLDivElement | ((el: HTMLDivElement) => void) | { current?: HTMLDivElement | null | undefined; }—Not yet documented
aria-labelstring—Not yet documented
aria-labelledbystring—Not yet documented
aria-describedbystring—Not yet documented
aria-detailsstring—Not yet documented

Declared in packages/viviana-ui/src/meter/index.tsx.

PixelMeter props

Props for PixelMeter in @proyecto-viviana/ui
PropTypeDefaultDescription
shape'grid' | 'row' | 'ring''row'Which pixel form to draw.
valuenumber0The current value (controlled).
maxValuenumber14 for `row`, 16 for `ring`, 182 for `grid`The largest value allowed. In `row` it also sets the block count (the streak length), clamped to 64. `ring` is always 16 blocks and `grid` always 26 × 7.
levels2 | 3 | 42 for `row` and `ring`, 4 for `grid`The number of ink strengths, rest included.
channel'metric' | 'info' | 'signal' | 'fault''info'The status channel the lit cells take their ink from.
labelnumber | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement—The meter's visible label, and its accessible name. `ring` centres it.
stylesStyleString | (() => StyleString | undefined)—Spectrum-defined generated classes.
UNSAFE_classNamestring | UnsafeClassName—Additional CSS class name. Use only as a last resort.
UNSAFE_styleJSX.CSSProperties—Additional inline styles. Use only as a last resort.
idstring—Not yet documented
slotstring—Not yet documented
refHTMLDivElement | ((el: HTMLDivElement) => void) | { current?: HTMLDivElement | null | undefined; }—Not yet documented
aria-labelstring—Not yet documented
aria-labelledbystring—Not yet documented
aria-describedbystring—Not yet documented
aria-detailsstring—Not yet documented

Declared in packages/viviana-ui/src/meter/PixelMeter.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.