prime-ui-kit 0.9.0 → 0.9.2

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

@@ -0,0 +1,43 @@
+/** A button opens a filter panel with a header and actions; buttons in `Popover.Close` close it — `Popover.Trigger`, `Popover.Close`. */
+import { Button, Checkbox, Icon, Popover } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function PopoverOverviewExample() {
+  return (
+    <Popover.Root>
+      <Popover.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          <Button.Icon>
+            <Icon name="action.filter" />
+          </Button.Icon>
+          Фильтры
+        </Button.Root>
+      </Popover.Trigger>
+      <Popover.Content className={styles.panel}>
+        <Popover.Header>
+          <Popover.Title>Фильтры отчёта</Popover.Title>
+          <Popover.Description>Применяются ко всем графикам на странице.</Popover.Description>
+        </Popover.Header>
+        <div className={styles.stack}>
+          <Checkbox.Root defaultChecked>
+            <Checkbox.Label>Только активные клиенты</Checkbox.Label>
+          </Checkbox.Root>
+          <Checkbox.Root>
+            <Checkbox.Label>Скрыть нулевые строки</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+        <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/popover/examples/placement.tsx

@@ -1,32 +1,34 @@
-/** `side` (bottom · top) and `align` (start · center · end). Near the viewport edge the panel flips and shifts automatically. */
+/** 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 preview from "./examples.module.css";
-
 const PLACEMENTS = [
-  { label: "Снизу · начало", side: "bottom", align: "start" },
-  { label: "Снизу · центр", side: "bottom", align: "center" },
-  { label: "Снизу · конец", side: "bottom", align: "end" },
-  { label: "Сверху · начало", side: "top", align: "start" },
+  { 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;
 
 export default function PopoverPlacementExample() {
   return (
-    <div className={preview.row}>
-      {PLACEMENTS.map(({ label, side, align }) => (
-        <Popover.Root key={label}>
+    <>
+      {PLACEMENTS.map(({ side, align }) => (
+        <Popover.Root key={`${side}-${align}`}>
           <Popover.Trigger>
             <Button.Root variant="soft" tone="neutral">
-              {label}
+              {side} · {align}
             </Button.Root>
           </Popover.Trigger>
           <Popover.Content side={side} align={align}>
-            <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-              side=&quot;{side}&quot;, align=&quot;{align}&quot;
-            </Typography.Root>
+            <Typography variant="body-s" tone="secondary">
+              Срок оплаты счёта — 5 рабочих дней.
+            </Typography>
           </Popover.Content>
         </Popover.Root>
       ))}
-    </div>
+    </>
   );
 }

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

@@ -1,17 +1,16 @@
-/** Popover.Content at every size tier xs → xl with a header and actions. Give the panel the same size as its trigger. */
+/** 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 preview from "./examples.module.css";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function PopoverSizesExample() {
   return (
-    <div className={preview.row}>
+    <>
       {SIZES.map((size) => (
         <Popover.Root key={size}>
           <Popover.Trigger>
             <Button.Root variant="soft" tone="neutral" size={size}>
-              Размер {size}
+              {size}
             </Button.Root>
           </Popover.Trigger>
           <Popover.Content size={size}>
@@ -20,14 +19,18 @@ export default function PopoverSizesExample() {
               <Popover.Description>Он появится в списке слева.</Popover.Description>
             </Popover.Header>
             <Popover.Actions>
-              <Button.Root variant="ghost" tone="neutral" size={size}>
-                Отмена
-              </Button.Root>
-              <Button.Root size={size}>Сохранить</Button.Root>
+              <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,110 +1,151 @@
 # ProgressBar
 
-**Category:** feedback
+**Category:** status
+**Kind:** primitive
 
-> Linear progress indicator on a native `<progress>` with a label, a percentage and a status color.
+> 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.
 
 ## When to use
-- Determinate progress of an operation: file upload, import, export.
-- How much of a quota or a set of steps is done ("Профиль: 3 из 5 шагов").
-- Per-row progress inside lists (FileUpload rows use it through `FileUpload.ItemProgress`).
+- 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).
 
 ## When not to use
-- Progress made of several parts or a distribution of shares → use [SegmentedProgressBar](../segmented-progress-bar/COMPONENT.md).
-- A compact radial indicator or a KPI ring → use [ProgressCircle](../progress-circle/COMPONENT.md).
-- Unknown duration (no value) → use a spinner, e.g. `Button` `loading`; ProgressBar has no indeterminate mode.
+- 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";
+import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
+```
+
+## 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
-Leaf component. `forwardRef` to the inner `HTMLProgressElement`. No native props passthrough.
+<!-- 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 |
 |---|---|---|---|
-| `value` | `number` | — (required) | Current value; clamped to `0…max`. |
-| `max` | `number` | `100` | Top of the scale; a value `<= 0` falls back to `100`. |
-| `label` | `string` | — | Visible label above the track and the accessible name of the `<progress>` (`aria-labelledby`). |
-| `showValue` | `boolean` | `false` | Shows the rounded percentage at the right of the header (`tabular-nums`, `aria-hidden`). |
-| `tone` | `"accent" \| "success" \| "warning" \| "danger"` | `"accent"` | Fill color. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Track height and label typography. |
-| `className` | `string` | — | Class on the root `<div>`. |
+| `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
+### tone (value mode or each segment)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `accent` | Accent fill on a `fill-strong` track | Progress in flight | yes |
-| `success` | Success fill | Finished operations, healthy quota | |
-| `warning` | Warning fill | Quota almost used, slow progress | |
-| `danger` | Danger fill | Failed or interrupted operation | |
+| `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` | Track 4px, label 12/16, header gap 4 | Dense tables, inline rows | |
-| `s` | Track 4px, label 12/16, header gap 4 | Compact lists | |
-| `m` | Track 4px, label 13/20, header gap 8 | Default | yes |
-| `l` | Track 8px, label 14/20, header gap 8 | Prominent single progress | |
-| `xl` | Track 8px, label 14/20, header gap 8 | Hero / onboarding progress | |
+| `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 | |
 
-### showValue
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `false` | Label only (or no header) | The exact number does not matter | yes |
-| `true` | Secondary `NN%` at the right of the header | Uploads, quotas where the user tracks the number | |
-
-**Combinations**
-- Recommended: `accent` while running, then switch to `success` or `danger` with the result; `label` + `showValue` for uploads.
-- Pointless: `showValue` with `max` meant as a count ("3 из 5") — put the count into `label` as in the example.
-- Avoid: `danger` for normal high values — use it for failures only.
+| `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`, `data-size` on the root |
-| value | `value`, `max` | native `value` / `max` on `<progress>`; the fill width animates (none under `prefers-reduced-motion`) |
+| 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` on every render.
+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 → track: `--prime-space-1` (xs/s) or `--prime-space-2` (m–xl).
+- 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
-- Native `<progress>`: role `progressbar` with value and max for screen readers.
-- Give every bar a `label`: there is no `aria-label` prop, so a bar without `label` has no accessible name.
-- The percentage text is `aria-hidden` (the native value is announced instead).
-- ProgressBar has no `labels`.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [file-upload.tsx](examples/file-upload.tsx) | Live uploads in a card: growing progress, `success` when done, `danger` on failure | Per-item progress of background operations |
-| [values-and-tones.tsx](examples/values-and-tones.tsx) | 0 / partial / 100, `success` / `warning` / `danger`, `max={5}` | Showing outcome and custom scales |
-| [sizes.tsx](examples/sizes.tsx) | `xs`…`xl` with `label` and `showValue` | Picking a size |
+### Keyboard
+No keyboard interaction.
 
-```tsx
-import { ProgressBar } from "prime-ui-kit";
+### 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`.
 
-export function ImportProgress() {
-  return <ProgressBar.Root value={42} label="Импорт контактов" showValue />;
-}
-```
+### 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` → the progress has no accessible name; add `label`.
-- `tone="info"` / `tone="neutral"` → not supported; use `accent`.
-- Values over `max` expecting overflow → they are clamped.
-- Using it as a spinner with a fake value → use a loading state instead.
+- 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), [ProgressCircle](../progress-circle/COMPONENT.md) — other progress forms.
-- [FileUpload](../file-upload/COMPONENT.md) — `FileUpload.ItemProgress` renders a ProgressBar.
+- **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

@@ -1,40 +1,10 @@
-/* Layout helpers for the ProgressBar examples. Semantic tokens only. */
+/* Layout of the ProgressBar scenarios: semantic tokens only. */
 
-/* 28rem column of bars. */
-.stack {
+/* 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%, calc(var(--prime-space-24) * 4 + var(--prime-space-16)));
+  width: min(100%, var(--prime-modal-width-s));
   min-width: 0;
 }
-
-.card {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-4);
-  width: min(100%, calc(var(--prime-space-24) * 4 + var(--prime-space-16)));
-  padding: var(--prime-card-padding-m);
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-  box-shadow: var(--prime-card-shadow);
-}
-
-.cardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-}
-
-.file {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
-  min-width: 0;
-}
-
-.meta {
-  font-variant-numeric: tabular-nums;
-}

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,15 +1,18 @@
-/** Sizes xs–xl with `label` and `showValue`: the track is 4px for xs–m and 8px for l–xl, the label follows the control tier. Match the size to the surrounding text. */
-import { type ControlSize, 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";
 
-import styles from "./examples.module.css";
-
-const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function ProgressBarSizesExample() {
   return (
-    <div className={styles.stack}>
-      {sizes.map((size) => (
-        <ProgressBar.Root key={size} size={size} value={64} label={`Размер ${size}`} showValue />
+    <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>
+      ))}
+    </>
+  );
+}