Range bar
canonBand indicator in a stat tile: recommended zone, ghost of the value N weeks ago, team median, current value dot.
acrm !4412 + !4413 (Reporty › Koučink, owner approved 1. 10. 2026), verified on dev 2. 10. 2026 (1440 light/dark + 390). Colour = --goal-in / --goal-in-ink / --goal-in-subtle (vivid green, owner rejected faded --positive here) vs --ic-amber; motion only under prefers-reduced-motion: no-preference. App-level next to Spark; before canon: stories (States: in band / out / no goal / no data), usage + a11y, and a decision whether it moves to packages/ui. 2. 10. 2026: beta — usage/a11y written, states reviewed by AD on the preview (koucink-stavy.html). Canon 2. 10. 2026: stories + light/dark baselines merged in !4422, AD-verified in the catalogue. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories.
Used in 1 file · 1 area · 1× — components/sales-reports
Default
export const Default = () => (
<Frame>
<RangeBar
value={160}
ghost={230}
team={125}
band={MONOLOGUE_BAND}
status="out"
label="Nejdelší monolog: teď 2:40, před 7 týdny 3:50"
/>
</Frame>
);States
export const States = () => (
<div style={{ display: 'grid', gap: 'var(--sp-6)' }}>
<Frame text="in band — monologue 2:10, recommended ≤ 2:30, 3:40 seven weeks ago, team 2:05">
<RangeBar
value={130}
ghost={220}
team={125}
band={MONOLOGUE_BAND}
status="in"
label="Nejdelší monolog: teď 2:10, před 7 týdny 3:40"
/>
</Frame>
<Frame text="out of band — monologue 2:40 above ≤ 2:30, the dot turns amber">
<RangeBar
value={160}
ghost={230}
team={125}
band={MONOLOGUE_BAND}
status="out"
label="Nejdelší monolog: teď 2:40, před 7 týdny 3:50"
/>
</Frame>
<Frame text="no goal — words per minute has no recommendation: no zone, accent dot">
<RangeBar
value={164}
ghost={171}
team={158}
band={null}
status="none"
label="Tempo: teď 164 slov za minutu, před 7 týdny 171"
/>
</Frame>
<Frame text="no data — no „now“ value: the bar is not drawn, the tile shows „—“ and „zatím bez dat“">
<span style={caption}>—</span>
</Frame>
</div>
);