prime-ui-kit 0.7.13 → 0.9.1

package/src/components/popover/examples/placement.tsx

@@ -1,37 +1,34 @@
+/** Every side and alignment relative to the trigger; near the viewport edge the panel flips and shifts — `side`, `align`. */
 import { Button, Popover, Typography } from "prime-ui-kit";
 
-import styles from "./popover-examples.module.css";
+const PLACEMENTS = [
+  { side: "bottom", align: "start" },
+  { side: "bottom", align: "center" },
+  { side: "bottom", align: "end" },
+  { side: "top", align: "start" },
+  { side: "top", align: "center" },
+  { side: "top", align: "end" },
+  { side: "left", align: "center" },
+  { side: "right", align: "center" },
+] as const;
 
-type Demo = { label: string; side: "top" | "bottom"; align: "start" | "center" | "end" };
-
-const demos: Demo[] = [
-  { label: "Bottom · start", side: "bottom", align: "start" },
-  { label: "Bottom · center", side: "bottom", align: "center" },
-  { label: "Bottom · end", side: "bottom", align: "end" },
-  { label: "Top · start", side: "top", align: "start" },
-];
-
-/**
- * Preferred `side` and `align`; the kit may flip at the viewport edge.
- */
-export default function PlacementExample() {
+export default function PopoverPlacementExample() {
   return (
-    <div className={styles.placementGrid}>
-      {demos.map(({ label, side, align }) => (
-        <Popover.Root key={label}>
-          <Popover.Trigger asChild>
-            <Button.Root className={styles.placementTrigger} mode="stroke" variant="neutral">
-              {label}
+    <>
+      {PLACEMENTS.map(({ side, align }) => (
+        <Popover.Root key={`${side}-${align}`}>
+          <Popover.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              {side} · {align}
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align={align} side={side}>
-            <Typography.Root as="p" variant="body-small">
-              <code>side=&quot;{side}&quot;</code>, <code>align=&quot;{align}&quot;</code>. Near the
-              viewport edge the panel may flip to stay on screen.
-            </Typography.Root>
+          <Popover.Content side={side} align={align}>
+            <Typography variant="body-s" tone="secondary">
+              Срок оплаты счёта — 5 рабочих дней.
+            </Typography>
           </Popover.Content>
         </Popover.Root>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/popover/examples/sizes.tsx

@@ -1,30 +1,36 @@
+/** Every size tier with a header and actions; the panel takes the tier of its trigger — `size`. */
 import { Button, Popover } from "prime-ui-kit";
 
-import styles from "./popover-examples.module.css";
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
-const sizes = ["s", "m", "l", "xl"] as const;
-
-/**
- * Content `size` tier: panel padding, type scale, and `ControlSizeProvider` for nested controls.
- */
 export default function PopoverSizesExample() {
   return (
-    <div className={styles.sizesRow}>
-      {sizes.map((size) => (
+    <>
+      {SIZES.map((size) => (
         <Popover.Root key={size}>
-          <Popover.Trigger asChild>
-            <Button.Root mode="stroke" variant="neutral">
-              Size {size}
+          <Popover.Trigger>
+            <Button.Root variant="soft" tone="neutral" size={size}>
+              {size}
             </Button.Root>
           </Popover.Trigger>
-          <Popover.Content align="start" side="bottom" size={size}>
-            <p className={styles.panelTextMuted}>
-              Panel with <code>size=&quot;{size}&quot;</code>: padding and type scale from the
-              control tier; nested controls use <code>ControlSizeProvider</code>.
-            </p>
+          <Popover.Content size={size}>
+            <Popover.Header>
+              <Popover.Title>Сохранить фильтр?</Popover.Title>
+              <Popover.Description>Он появится в списке слева.</Popover.Description>
+            </Popover.Header>
+            <Popover.Actions>
+              <Popover.Close>
+                <Button.Root variant="ghost" tone="neutral" size={size}>
+                  Отмена
+                </Button.Root>
+              </Popover.Close>
+              <Popover.Close>
+                <Button.Root size={size}>Сохранить</Button.Root>
+              </Popover.Close>
+            </Popover.Actions>
           </Popover.Content>
         </Popover.Root>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/popover/examples/structure.tsx

@@ -0,0 +1,50 @@
+/** Optional parts: a panel with plain text only, and a panel with a title, a description and actions — `Popover.Header`, `Popover.Actions`. */
+import { Button, Icon, Popover, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function PopoverStructureExample() {
+  return (
+    <>
+      <Popover.Root>
+        <Popover.Trigger>
+          <Button.Root variant="ghost" tone="neutral">
+            <Button.Icon>
+              <Icon name="status.info" />
+            </Button.Icon>
+            Что такое НДС 0%?
+          </Button.Root>
+        </Popover.Trigger>
+        <Popover.Content className={styles.panel}>
+          <Typography variant="body-s" tone="secondary">
+            Ставка для экспорта товаров. Нужны подтверждающие документы в течение 180 дней.
+          </Typography>
+        </Popover.Content>
+      </Popover.Root>
+
+      <Popover.Root>
+        <Popover.Trigger>
+          <Button.Root variant="soft" tone="neutral">
+            Сохранить фильтр
+          </Button.Root>
+        </Popover.Trigger>
+        <Popover.Content className={styles.panel}>
+          <Popover.Header>
+            <Popover.Title>Сохранить фильтр?</Popover.Title>
+            <Popover.Description>Он появится в списке представлений слева.</Popover.Description>
+          </Popover.Header>
+          <Popover.Actions>
+            <Popover.Close>
+              <Button.Root variant="ghost" tone="neutral">
+                Отмена
+              </Button.Root>
+            </Popover.Close>
+            <Popover.Close>
+              <Button.Root>Сохранить</Button.Root>
+            </Popover.Close>
+          </Popover.Actions>
+        </Popover.Content>
+      </Popover.Root>
+    </>
+  );
+}

package/src/components/progress-bar/COMPONENT.md

@@ -1,101 +1,151 @@
 # ProgressBar
 
-**Default `size`:** use **`m`** for the size axis unless the layout explicitly needs another tier.
+**Category:** feedback
+**Kind:** primitive
 
-## Canonical
+> Linear progress: one value on a native `<progress>`, or `segments` that split a whole (storage by type, task statuses), with a label, a percentage and status colors.
 
-- **`ProgressBar`** — horizontal determinate meter: only **`ProgressBar.Root`** is public; it wraps a native **`<progress>`** (role **`progressbar`**) and optional **`label`**.
-- **`value`** is **required** and clamped to **`[0, max]`**; **`max`** defaults to **`100`** (if **`max <= 0`**, **`100`** is used).
-- **`size`:** **`s` | `m` | `l` | `xl`** — track height and label scale (**`ProgressBarSize`**).
-- **Not indeterminate:** the API does not omit **`value`** or set an indeterminate native state — for unknown duration, use loading patterns on controls (for example [Button](../button/COMPONENT.md) **`loading`** + **`Button.Spinner`**) or other kit feedback; see **`examples/indeterminate-busy-state.tsx`**.
-- **A11y:** with **`label`**, **`aria-labelledby`** references the label **`span`**; the bar is not focusable.
-- **No `disabled` / `loading` / `error`** on the root — hide or mute the block at screen level if needed.
+## When to use
+- Determinate progress of an operation: file upload, import, export (`value`).
+- How much of a quota or a set of steps is done («Профиль: 3 из 5 шагов») (`value` + `max`).
+- How a whole splits into parts: used space by file type, tasks by status (`segments`, `max`).
+- Per-row progress inside lists (FileUpload rows render it).
 
-## Extended
-
-### About
-
-`ProgressBar` is a horizontal completion indicator for operations that map to a numeric range: file transfer, form steps, or any bounded task.
-
-- **When to use** — uploads, downloads, or sync where you can compute **`value`** and **`max`**.
-- **When to use** — multi-step flows where “step *k* of *n*” should match a single fill (**`value={k}`**, **`max={n}`**).
-- **When to use** — when a short visible name should be tied to the meter for sighted users and assistive tech (**`label`**).
-- **When not to use** — indeterminate or endless busy states without a numeric model; prefer **`Button`** **`loading`**, spinners, or other patterns.
-- **When not to use** — vertical or circular meters; for a ring indicator see [ProgressCircle](../progress-circle/COMPONENT.md).
-- **When not to use** — when you need extra native attributes on **`<progress>`** beyond what the wrapper sets; they are not forwarded — compose or wrap at the app layer if required.
-
-### Composition
-
-- **`ProgressBar.Root`** — outer **`div`** with **`data-size`**, optional **`label`** (**`<span>`** + generated **`id`**), then **`<progress>`** with **`value`**, **`max`**, and **`className`** on the track. Width follows the parent (full width of the container).
-
-### Playground (`playground/sections/ProgressBarSection.tsx`)
-
-The section renders snippets from **`playground/snippets/progress/`** (bar demos only):
-
-| Demo (section) | Snippet | What it shows |
-|----------------|---------|----------------|
-| Размеры | [`bar-sizes.tsx`](../../../playground/snippets/progress/bar-sizes.tsx) | **`size`** **`s`**, **`m`**, **`l`**, **`xl`**, each with a **`label`** (track height and label scale from control-size tokens). |
-| Values | [`bar-values.tsx`](../../../playground/snippets/progress/bar-values.tsx) | **`value`** **`0`**, **`25`**, **`75`**, **`100`** without **`label`**. |
-| With label | [`bar-label.tsx`](../../../playground/snippets/progress/bar-label.tsx) | **`value={60}`**, **`label="Profile completion"`** (same English copy as the snippet; section preview matches this structure). |
-
-Other bar-only snippets in the same folder (**`bar-full-width`**, **`bar-states`**, **`bar-controlled`**, **`bar-composition`**) are not mounted in **`ProgressBarSection`**; they follow the same **`@/components/progress-bar`** import style for local dev.
-
-### Example files in `examples/`
-
-Imports use **`"prime-ui-kit"`** so the same patterns work in an app. **`sizes`**, **`values`**, and **`labeled`** mirror the three playground frames above (same structure; English labels in **`sizes`** where the snippet uses Russian).
-
-| File | Scenario |
-|------|----------|
-| [`sizes.tsx`](examples/sizes.tsx) | **`size`** ladder **`s`–`xl`** with labels (`snippets/progress/bar-sizes.tsx`). |
-| [`values.tsx`](examples/values.tsx) | **`value`** 0 / 25 / 75 / 100, no **`label`** (`snippets/progress/bar-values.tsx`). |
-| [`labeled.tsx`](examples/labeled.tsx) | **`label`** + **`aria-labelledby`** wiring (`snippets/progress/bar-label.tsx`). |
-| [`upload-progress.tsx`](examples/upload-progress.tsx) | Controlled **`value`** from progress percent; filename and actions in surrounding copy. |
-| [`step-progress.tsx`](examples/step-progress.tsx) | **`value`** / **`max`** as step *k* of *n*. |
-| [`indeterminate-busy-state.tsx`](examples/indeterminate-busy-state.tsx) | Unknown duration: **`Button`** **`loading`**, not an indeterminate **`ProgressBar`**. |
-| [`wizard-composition.tsx`](examples/wizard-composition.tsx) | **Typography** + bar + muted helper (aligned with **`bar-composition.tsx`** idea; app-ready English). |
-
-### Minimal example
+## When not to use
+- A compact radial indicator or KPI ring → use [ProgressCircle](../progress-circle/COMPONENT.md) (same `value` / `segments` API).
+- Unknown duration → use [Spinner](../spinner/COMPONENT.md); ProgressBar has no indeterminate mode.
+- Navigation through wizard steps → use [Stepper](../stepper/COMPONENT.md).
 
+## Import
 ```tsx
-import { ProgressBar } from "prime-ui-kit";
-
-export function Example() {
-  return <ProgressBar.Root value={40} max={100} />;
-}
+import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
 ```
 
-### Rules
-
-- **Controlled usage** — pass React state into **`value`**; there is no internal uncontrolled store.
-- **Refs** — **`ref`** targets the native **`<progress>`** element.
-- **Clamping** — negative **`value`** becomes **`0`**; **`value > max`** becomes **`max`**.
+## Anatomy
+```
+ProgressBar              <div>; size, tone (value mode)
+├─ header                label (ellipsis) + percentage (showValue, aria-hidden)
+└─ value mode:           <progress> (transparent, for assistive tech) + drawn line
+   segments mode:        <div role="group"> — parts pill + free rest; hidden distribution text
+```
 
 ## API
 
-### ProgressBar.Root
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| `value` | `number` | — | Yes | Current value; clamped to `[0, max]` after `max` is normalized. |
-| `max` | `number` | `100` | No | Upper bound; if `max <= 0`, `100` is used. |
-| `label` | `string` | — | No | Text above the track; `aria-labelledby` references this element when set. |
-| `size` | `"s" \| "m" \| "l" \| "xl"` | `"m"` | No | Track height and label typography scale. |
-| `className` | `string` | — | No | Class on the outer wrapper around the label and `progress`. |
-| `ref` | `React.Ref<HTMLProgressElement>` | — | No | Ref to the native `progress` element. |
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### ProgressBar
+`ref` → `HTMLDivElement` (the root). Props of both modes; pass either `value` (value mode) or `segments` (segments mode), never both.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Line thickness 4 → 8 px (`--prime-control-<tier>-track`, shared with Slider) and label type. |
+| `label` | `string` | — | Visible label above the line and its accessible name; a value bar without it needs `aria-label`. |
+| `showValue` | `boolean` | `false` | Shows the rounded filled percentage at the end of the label row (`aria-hidden`). |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className`, `data-*` and the other div attributes on the root; `aria-label` names the bar when there is no `label`. |
+
+### ProgressBar · value mode
+A native `<progress>` (transparent, for assistive tech) under the drawn line.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number` | — (required) | The current value, clamped to `0…max`. |
+| `max` | `number` | `100` | Top of the scale. |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"accent"` | Fill color, telling the outcome. |
+
+### ProgressBar · segments mode
+A `role="group"` bar of parts, named by `label` and described by the distribution text.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `segments` | `ProgressSegment[]` | — (required) | Parts in order, `{ value, label?, tone? }` (`tone` default `accent`); each part's width is its share of `max`. |
+| `max` | `number` | — | Total capacity. Default: the sum of the parts; a larger `max` leaves the rest as track. |
+| `segmentGap` | `"none" \| "hairline"` | `"none"` | `none` — one continuous pill; `hairline` — every part and the rest are separate pills. |
+| `labels` | `Partial<ProgressBarLabels>` | — | Built-in strings, see Labels. |
+
+## Variants
+
+### tone (value mode or each segment)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `accent` | accent fill on a `fill-strong` track | progress in flight, the main share | yes |
+| `neutral` | `text-secondary` fill | quiet background work, «other» share | |
+| `success` | success fill | finished operations, done share | |
+| `warning` | warning fill | quota almost used, pending share | |
+| `danger` | danger fill | failed or interrupted operation, overdue share | |
+| `info` | info fill | informational processes (sync, indexing) | |
+
+### segmentGap
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `none` | one continuous pill, flat joints, a round cap on the track | parts of a single process | yes |
+| `hairline` | every part and the free rest are separate pills with a ¾T gap | distinct categories (file types, statuses) | |
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` | line 4px, label 12/16 | dense tables, inline rows | |
+| `s` | line 5px, label 12/16 | compact lists | |
+| `m` | line 6px, label 13/20 | default | yes |
+| `l` | line 7px, label 14/20 | a prominent single progress | |
+| `xl` | line 8px, label 14/20 | onboarding, dashboards | |
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `showValue` | secondary `NN%` at the end of the header | uploads, quotas — the user tracks the number | `false` |
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| tone / size | props | `data-tone` (value mode), `data-size` on the root |
+| value | `value`, `max` | native `value` / `max`; the drawn pill slides by `translate` over `slow` + `standard`, RTL aware |
+| segments | `segments`, `max`, `segmentGap` | `data-segment-gap` on the group, `data-tone` per part; widths animate by `flex-grow` over `slow` |
+| empty segments | `segments` empty or all `0` | only the track; accessible text `labels.empty` / `labels.allEmpty` |
+| reduced motion | `prefers-reduced-motion` | fill and widths change instantly |
+
+Always controlled: pass the current `value` or `segments` on every render.
+
+## Layout & spacing
+- `width: 100%` of the parent; the header is a row with the label (ellipsis) and the value.
+- Label → line: the tier `label-gap` (`--prime-space-1` xs/s, `--prime-space-2` m–xl).
+- Stack several bars with `--prime-space-4`–`--prime-space-5`.
+
+## Accessibility
+
+### Keyboard
+No keyboard interaction.
+
+### ARIA
+- Value mode: native `<progress>` — role `progressbar` with value and max.
+- Segments mode: `role="group"`; its text lists the shares of `max` («Видео: 38%, Документы: 21%»). With `label` (or `aria-label`) the group is named by it and described by the distribution; without a name the distribution is the name.
+- Without `label`, pass `aria-label`, otherwise a value bar has no accessible name.
+- The `showValue` percentage is `aria-hidden`.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Default | Used for |
+|---|---|---|
+| `empty` | `"Нет сегментов"` | Accessible text when `segments` is empty. |
+| `allEmpty` | `"Все сегменты пусты"` | Accessible text when every segment is 0. |
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | An import in progress with its name and percentage — `value`, `label`, `showValue`. |
+| [variants.tsx](examples/variants.tsx) | Every fill color; the tone tells the outcome, not the progress — `tone`. |
+| [sizes.tsx](examples/sizes.tsx) | Every tier: the line grows from 4 to 8 px like the Slider track — `size`. |
+| [custom-max.tsx](examples/custom-max.tsx) | A scale of steps instead of percent: 3 of 5 profile steps — `max`. |
+| [segments.tsx](examples/segments.tsx) | Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list — `segments`, `segmentGap`, `max`. |
+
+## Mistakes
+- No `label` and no `aria-label` → the bar has no accessible name.
+- `value` and `segments` together → a type error; pick one mode.
+- `tone` on the root with `segments` → set `tone` on each segment.
+- A «Свободно» segment for free space → pass `max`; the rest stays track.
+- `showValue` with a count scale («3 из 5») → put the count into `label`.
+- A fake value as a spinner → use [Spinner](../spinner/COMPONENT.md).
 
 ## Related
-
-- [SegmentedProgressBar](../segmented-progress-bar/COMPONENT.md) — multiple proportional segments instead of one value.
-- [ProgressCircle](../progress-circle/COMPONENT.md) — circular determinate indicator.
-- [Typography](../typography/COMPONENT.md) — headings and supporting copy around a status block.
-- [Button](../button/COMPONENT.md) — cancel, pause, or **`loading`** next to long-running work.
-
-## LLM note
-
-- Export: **`import { ProgressBar } from "prime-ui-kit"`** — **`ProgressBar.Root`** only.
-- **`ProgressBarRootProps`**: **`value`** (required), **`max?`**, **`label?`**, **`size?`**, **`className?`**, **`ref?`** — no `disabled`, `loading`, or indeterminate flag.
-- **`size`** literals: **`s`**, **`m`**, **`l`**, **`xl`** — default **`m`**.
-- **`value`** is always required; do not suggest omitting **`value`** for a “loading” bar — use **Button** **`loading`** / **`Button.Spinner`** or another pattern.
-- Native **`<progress>`** is not a props bag: extra attributes are **not** forwarded from **`ProgressBar.Root`**.
-- Step flows: **`value={currentStep}`**, **`max={totalSteps}`** (not necessarily 0–100).
-- Playground bar frames: **`playground/sections/ProgressBarSection.tsx`** uses **`bar-sizes`**, **`bar-values`**, **`bar-label`**; **`examples/sizes`**, **`examples/values`**, **`examples/labeled`** mirror those three for **`prime-ui-kit`** consumers.
+- **Built from:** —
+- **See also:** [ProgressCircle](../progress-circle/COMPONENT.md), [Slider](../slider/COMPONENT.md), [FileUpload](../file-upload/COMPONENT.md), [Spinner](../spinner/COMPONENT.md)

package/src/components/progress-bar/examples/custom-max.tsx

@@ -0,0 +1,12 @@
+/** A scale of steps instead of percent: 3 of 5 profile steps — `max`. */
+import { ProgressBar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function ProgressBarCustomMaxExample() {
+  return (
+    <div className={styles.column}>
+      <ProgressBar value={3} max={5} label="Профиль: 3 из 5 шагов" />
+    </div>
+  );
+}

package/src/components/progress-bar/examples/examples.module.css

@@ -0,0 +1,10 @@
+/* Layout of the ProgressBar scenarios: semantic tokens only. */
+
+/* A column as wide as a short form: bars take the column width. */
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-5);
+  width: min(100%, var(--prime-modal-width-s));
+  min-width: 0;
+}

package/src/components/progress-bar/examples/overview.tsx

@@ -0,0 +1,12 @@
+/** An import in progress with its name and percentage — `value`, `label`, `showValue`. */
+import { ProgressBar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function ProgressBarOverviewExample() {
+  return (
+    <div className={styles.column}>
+      <ProgressBar value={42} label="Импорт контактов" showValue />
+    </div>
+  );
+}

package/src/components/progress-bar/examples/segments.tsx

@@ -0,0 +1,32 @@
+/** Parts of a whole in one bar: joined or separate pills, free capacity up to `max` and an empty list — `segments`, `segmentGap`, `max`. */
+import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const REVIEW: ProgressSegment[] = [
+  { value: 40, label: "Принято", tone: "success" },
+  { value: 35, label: "На проверке", tone: "warning" },
+  { value: 25, label: "Отклонено", tone: "danger" },
+];
+
+const STORAGE: ProgressSegment[] = [
+  { value: 38, label: "Видео" },
+  { value: 21, label: "Документы", tone: "success" },
+  { value: 12, label: "Архивы", tone: "warning" },
+];
+
+export default function ProgressBarSegmentsExample() {
+  return (
+    <div className={styles.column}>
+      <ProgressBar segments={REVIEW} label="Заявки по статусам" />
+      <ProgressBar
+        segments={STORAGE}
+        segmentGap="hairline"
+        max={100}
+        label="Хранилище: 71 из 100 ГБ"
+        showValue
+      />
+      <ProgressBar segments={[]} label="Нет данных за период" />
+    </div>
+  );
+}

package/src/components/progress-bar/examples/sizes.tsx

@@ -1,13 +1,19 @@
-import { ProgressBar } from "prime-ui-kit";
+/** Every tier: the line grows from 4 to 8 px like the Slider track — `size`. */
+import { ProgressBar, Typography } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
-/** Four sizes: track height and label scale from `--prime-sys-size-control-{s|m|l|xl}-*` (playground: `snippets/progress/bar-sizes.tsx`). */
 export default function ProgressBarSizesExample() {
   return (
-    <>
-      <ProgressBar.Root size="s" value={30} label="Size s" />
-      <ProgressBar.Root size="m" value={40} label="Size m" />
-      <ProgressBar.Root size="l" value={50} label="Size l" />
-      <ProgressBar.Root size="xl" value={60} label="Size xl" />
-    </>
+    <div>
+      {SIZES.map((size) => (
+        <div key={size}>
+          <ProgressBar size={size} value={64} label="Загрузка" showValue />
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+        </div>
+      ))}
+    </div>
   );
 }

package/src/components/progress-bar/examples/variants.tsx

@@ -0,0 +1,34 @@
+/** Every fill color; the tone tells the outcome, not the progress — `tone`. */
+import { ProgressBar, Typography } from "prime-ui-kit";
+
+const ROWS = [
+  [
+    { tone: "accent", label: "Загрузка", value: 42 },
+    { tone: "success", label: "Готово", value: 100 },
+    { tone: "warning", label: "Квота", value: 86 },
+  ],
+  [
+    { tone: "danger", label: "Импорт прерван", value: 30 },
+    { tone: "info", label: "Синхронизация", value: 20 },
+    { tone: "neutral", label: "Индексация", value: 55 },
+  ],
+] as const;
+
+export default function ProgressBarVariantsExample() {
+  return (
+    <>
+      {ROWS.map((row) => (
+        <div key={row[0].tone}>
+          {row.map(({ tone, label, value }) => (
+            <div key={tone}>
+              <ProgressBar value={value} tone={tone} label={label} showValue />
+              <Typography as="span" variant="caption" tone="muted">
+                {tone}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      ))}
+    </>
+  );
+}