prime-ui-kit 0.10.0 → 0.11.0

package/dist/skill/reference/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/dist/skill/reference/components/progress-bar/COMPONENT.md

@@ -0,0 +1,199 @@
+# ProgressBar
+
+**Category:** status
+**Kind:** primitive
+
+> Linear progress: one value on a native `<progress>`, `segments` that split a whole (storage by type, leads by source) with an optional legend, or a ranking of rows (top cities, a funnel).
+
+## 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`); categories wear `color`, meanings wear `tone`; `legend` adds color · name · value · share.
+- A ranking «label · value · share — bar»: top cities, reasons, funnel steps (`layout="rows"`, `scale`).
+- Per-row progress inside lists (FileUpload rows render it).
+
+## 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).
+- A trend over time → use [Sparkline](../sparkline/COMPONENT.md) or a chart on `chartColors`.
+
+## Import
+```tsx
+import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+ProgressBar              <div>; size, tone (value mode), aria-busy while loading
+├─ 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
+   └─ legend             <ul>: swatch · name · value · share per part (legend)
+   rows layout:          <ol> — per part: label · value · share over its own bar
+   loading:              Skeleton bar (+ legend / row lines) in the same geometry
+```
+
+## API
+
+<!-- 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`); `bar` layout only. |
+| `loading` | `boolean` | `false` | The data is on its way: a Skeleton in the bar's geometry cross-fades into the data; the label stays. Pass the last known `value` or `segments` (or `0` / `[]`). |
+| `…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. |
+| `steps` | `boolean` | `false` | Draws the scale as `max` equal cells (2–12), each filled whole; `value` rounds to a cell. For a level out of a few: password strength, onboarding steps. |
+
+### ProgressBar · segments mode
+A `role="group"` bar of parts, named by `label` and described by the legend or the distribution text; with `layout="rows"` an `<ol>` named by `label`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `segments` | `ProgressSegment[]` | — (required) | Parts in order, `{ value, label?, tone? \| color? }`: `tone` names a meaning (default `accent`), `color` a category, as in its charts. 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. `bar` layout. |
+| `legend` | `boolean` | `false` | A legend under the bar, one row per part: color · name · value · share; it becomes the group's description. `bar` layout. |
+| `formatValue` | `(value: number) => string` | `Russian digit groups` | Display of a part's value in the legend and the rows («1 840 000 ₽»). |
+| `layout` | `"bar" \| "rows"` | `"bar"` | `bar` — every part in one bar; `rows` — a ranking: an `<ol>`, one row per part with label · value · share over its own bar. |
+| `scale` | `"sum" \| "max" \| "first"` | `"sum"` | `rows` only: what 100% is. `sum` — bars and shares of the total (`max` raises it); `max` — the leader is a full bar, shares stay of the total; `first` — bars and shares against the first row (a funnel). |
+| `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) | |
+
+### color (each segment, instead of tone)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `blue` · `orange` · `teal` · `yellow` · `pink` · `green` · `purple` · `red` | the hue's step of the chart palette (`--prime-color-chart-1…8`, `--hue-chart`) | categories with no meaning of good or bad: sources, platforms, regions — the same color the category has in charts | |
+| `gray` | `--prime-color-chart-other` | the «Прочее» share | |
+| `sky` | the palette's sky solid (no chart step: it sits too close to blue) | only when the category is sky elsewhere in the product | |
+
+### layout (segments mode)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `bar` | every part in one bar, optional legend under it | parts of one whole | yes |
+| `rows` | one row per part: label · value · share over its own bar | a ranking: top cities, reasons, funnel steps | |
+
+### scale (`rows`)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `sum` | bars and shares of the total | parts of a whole («доля от всех заказов») | yes |
+| `max` | the leader is a full bar, shares of the total | a top list where the gap to the leader matters | |
+| `first` | bars and shares against the first row | a funnel: each step as a share of the first | |
+
+### 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` |
+| `legend` | rows of swatch · name · value · share under the bar | a distribution the reader compares in numbers | `false` |
+| `loading` | a Skeleton bar (and legend or row lines) in the same geometry | the data is on its way | `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` or `data-color` per part; widths animate by `flex-grow` over `slow` |
+| rows | `layout="rows"`, `scale` | `data-layout="rows"` on the root, an `<ol>`; each bar slides like the value pill |
+| loading | `loading` | `aria-busy` on the root; Skeletons in place of the bar, the legend or the rows; the data cross-fades in (`swapMotion`) |
+| steps | `steps` (value mode) | `data-steps="true"` on the bar; `max` cells (2–12), filled ones `data-filled`; a cell fills from its start edge (`base` · emphasized), cells of one change go half a stagger step apart — from the start when filling, from the end when emptying |
+| empty segments | `segments` empty or all `0` | only the track; accessible text `labels.empty` / `labels.allEmpty` |
+| reduced motion | `prefers-reduced-motion` | fill, widths and cells 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). The label is primary, medium weight; the percentage secondary, tabular numbers.
+- Bar → legend `--prime-space-3` (12). Rows (`layout="rows"`) are 12 apart, each header 4 above its bar: the label (secondary, truncates) takes the free width, the value (primary, medium) and the share (muted, at least 4ch) line up at the end in tabular numbers.
+- `hairline` gaps and `steps` cells are ¾ of the line thickness apart.
+- 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 — or by the legend when `legend` is on; without a name the distribution is the name.
+- Rows: an `<ol>` named by `label`; each row reads as text («Москва 1 284 52%»), the bars are `aria-hidden`.
+- A category color always sits beside its name (legend, row), so color is never the only cue.
+- Without `label`, pass `aria-label`, otherwise a value bar has no accessible name.
+- The `showValue` percentage is `aria-hidden`; while `loading` the root is `aria-busy` and the Skeletons are `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`. |
+| [states.tsx](examples/states.tsx) | Loading takes the bar's own geometry, so the data lands without a jump — `loading`. |
+| [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`. |
+| [legend.tsx](examples/legend.tsx) | Shares of categories in their chart colors with a legend of color · name · value · share — `color`, `legend`, `formatValue`. |
+| [ranking.tsx](examples/ranking.tsx) | Rankings as rows of label · value · share over a bar: top cities against the leader and a funnel against its first step — `layout`, `scale`. |
+| [steps.tsx](examples/steps.tsx) | The scale as whole cells that fill one after another: 2 of 5 onboarding steps, forward and back — `steps`, `max`. |
+| [milestone.tsx](examples/milestone.tsx) | A rare milestone: the last invoice of the quarter fills the bar, the tone turns success and a short confetti burst marks it — `value`, `tone`, `celebrate()`. |
+
+## 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).
+- Categories (sources, platforms) painted with `tone` → `tone` says good or bad; categories take `color`, the same as in their charts.
+- The number written into `label` of each row of a hand-built ranking → `layout="rows"` with `formatValue`.
+- A grey box while the data loads → `loading` draws the Skeleton in the bar's geometry.
+
+## Related
+- **Built from:** [Skeleton](../skeleton/COMPONENT.md)
+- **See also:** [ProgressCircle](../progress-circle/COMPONENT.md), [Slider](../slider/COMPONENT.md), [FileUpload](../file-upload/COMPONENT.md), [Spinner](../spinner/COMPONENT.md)

package/dist/skill/reference/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/dist/skill/reference/components/progress-bar/examples/examples.module.css

@@ -0,0 +1,17 @@
+/* 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;
+}
+
+/* Buttons under a bar that drive it. */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-space-2);
+}

package/dist/skill/reference/components/progress-bar/examples/legend.tsx

@@ -0,0 +1,28 @@
+/** Shares of categories in their chart colors with a legend of color · name · value · share — `color`, `legend`, `formatValue`. */
+import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const DEALS_BY_SOURCE: ProgressSegment[] = [
+  { value: 1_840_000, label: "Сайт", color: "blue" },
+  { value: 1_120_000, label: "Входящие звонки", color: "orange" },
+  { value: 640_000, label: "Партнёры", color: "teal" },
+  { value: 310_000, label: "Выставки", color: "yellow" },
+  { value: 190_000, label: "Прочее", color: "gray" },
+];
+
+const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
+
+export default function ProgressBarLegendExample() {
+  return (
+    <div className={styles.column}>
+      <ProgressBar
+        segments={DEALS_BY_SOURCE}
+        segmentGap="hairline"
+        label="Сделки за октябрь по источникам"
+        legend
+        formatValue={formatRubles}
+      />
+    </div>
+  );
+}

package/dist/skill/reference/components/progress-bar/examples/milestone.tsx

@@ -0,0 +1,43 @@
+/** A rare milestone: the last invoice of the quarter fills the bar, the tone turns success and a short confetti burst marks it — `value`, `tone`, `celebrate()`. */
+import { Button, celebrate, ProgressBar } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const INVOICES = 12;
+
+export default function ProgressBarMilestoneExample() {
+  const [paid, setPaid] = React.useState(INVOICES - 1);
+  const closed = paid === INVOICES;
+
+  return (
+    <div className={styles.column}>
+      <ProgressBar
+        value={paid}
+        max={INVOICES}
+        tone={closed ? "success" : "accent"}
+        label={
+          closed
+            ? "III квартал закрыт: все счета оплачены"
+            : `Оплачено счетов: ${paid} из ${INVOICES}`
+        }
+      />
+      <div className={styles.actions}>
+        <Button.Root
+          variant={closed ? "soft" : "solid"}
+          tone={closed ? "neutral" : "accent"}
+          onClick={(event) => {
+            if (closed) {
+              setPaid(INVOICES - 1);
+              return;
+            }
+            setPaid(INVOICES);
+            celebrate({ origin: event.currentTarget });
+          }}
+        >
+          {closed ? "Вернуть последний счёт" : "Отметить оплату ООО «Вектор»"}
+        </Button.Root>
+      </div>
+    </div>
+  );
+}

package/dist/skill/reference/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/dist/skill/reference/components/progress-bar/examples/ranking.tsx

@@ -0,0 +1,28 @@
+/** Rankings as rows of label · value · share over a bar: top cities against the leader and a funnel against its first step — `layout`, `scale`. */
+import { ProgressBar, type ProgressSegment } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const CITIES: ProgressSegment[] = [
+  { value: 1_284, label: "Москва" },
+  { value: 642, label: "Санкт-Петербург" },
+  { value: 318, label: "Казань" },
+  { value: 204, label: "Екатеринбург" },
+  { value: 96, label: "Новосибирск" },
+];
+
+const FUNNEL: ProgressSegment[] = [
+  { value: 2_400, label: "Заявка" },
+  { value: 1_380, label: "Квалификация" },
+  { value: 620, label: "Предложение" },
+  { value: 214, label: "Сделка" },
+];
+
+export default function ProgressBarRankingExample() {
+  return (
+    <div className={styles.column}>
+      <ProgressBar layout="rows" scale="max" segments={CITIES} label="Заказы по городам" />
+      <ProgressBar layout="rows" scale="first" segments={FUNNEL} label="Воронка за квартал" />
+    </div>
+  );
+}

package/dist/skill/reference/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/dist/skill/reference/components/progress-bar/examples/sizes.tsx

@@ -0,0 +1,19 @@
+/** 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;
+
+export default function ProgressBarSizesExample() {
+  return (
+    <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/dist/skill/reference/components/progress-bar/examples/states.tsx

@@ -0,0 +1,43 @@
+/** Loading takes the bar's own geometry, so the data lands without a jump — `loading`. */
+import { ProgressBar, type ProgressSegment, Typography } from "prime-ui-kit";
+
+const SOURCES: ProgressSegment[] = [
+  { value: 412, label: "Сайт", color: "blue" },
+  { value: 268, label: "Звонки", color: "orange" },
+  { value: 120, label: "Партнёры", color: "teal" },
+];
+
+export default function ProgressBarStatesExample() {
+  return (
+    <>
+      <div>
+        <div>
+          <ProgressBar value={64} label="Импорт контактов" showValue />
+          <Typography as="span" variant="caption" tone="muted">
+            value
+          </Typography>
+        </div>
+        <div>
+          <ProgressBar value={0} label="Импорт контактов" loading />
+          <Typography as="span" variant="caption" tone="muted">
+            loading
+          </Typography>
+        </div>
+      </div>
+      <div>
+        <div>
+          <ProgressBar segments={SOURCES} label="Лиды по источникам" legend />
+          <Typography as="span" variant="caption" tone="muted">
+            legend
+          </Typography>
+        </div>
+        <div>
+          <ProgressBar segments={SOURCES} label="Лиды по источникам" legend loading />
+          <Typography as="span" variant="caption" tone="muted">
+            legend · loading
+          </Typography>
+        </div>
+      </div>
+    </>
+  );
+}

package/dist/skill/reference/components/progress-bar/examples/steps.tsx

@@ -0,0 +1,35 @@
+/** The scale as whole cells that fill one after another: 2 of 5 onboarding steps, forward and back — `steps`, `max`. */
+import { Button, ProgressBar } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const TOTAL = 5;
+
+export default function ProgressBarStepsExample() {
+  const [done, setDone] = React.useState(2);
+
+  return (
+    <div className={styles.column}>
+      <ProgressBar
+        steps
+        value={done}
+        max={TOTAL}
+        label={`Настройка компании: ${done} из ${TOTAL}`}
+      />
+      <div className={styles.actions}>
+        <Button.Root
+          variant="soft"
+          tone="neutral"
+          disabled={done === 0}
+          onClick={() => setDone(done - 1)}
+        >
+          Назад
+        </Button.Root>
+        <Button.Root disabled={done === TOTAL} onClick={() => setDone(done + 1)}>
+          Следующий шаг
+        </Button.Root>
+      </div>
+    </div>
+  );
+}

package/dist/skill/reference/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>
+      ))}
+    </>
+  );
+}