Progress

Usage

import { Progress, ProgressValue } from "@kanzo-tech/ui";

<Progress value={64}>
  <ProgressValue />
</Progress>

Progress renders its own track and range after whatever children you give it, so the children slot is for labels only. ProgressTrack and ProgressRange are exported — they are the parts a custom root would compose — but placing one inside Progress gives you a second trough, because the root's pair is unconditional.

Anatomy

<Progress value>
  <ProgressValue />   ← optional, your children
  <ProgressTrack>     ← rendered for you
    <ProgressRange />

Indeterminate

indeterminate sends null to Ark rather than a number, which is what makes the bar report "unknown" to assistive tech instead of "0%".

API Reference

min, max, translations and the rest are Ark's Progress.Root. useProgress re-exports Ark's useProgressContext.