prime-ui-kit 0.9.0 → 0.9.1

package/src/components/stepper/COMPONENT.md

@@ -1,8 +1,9 @@
 # Stepper
 
 **Category:** navigation
+**Kind:** navigation
 
-> Steps of a multi-step process with pending, active, completed and error statuses.
+> Steps of a multi-step process with pending, active, completed and danger statuses.
 
 ## When to use
 - Checkout, onboarding and setup wizards where the user moves through ordered steps.
@@ -13,7 +14,7 @@
 - Switching between independent sections → use [Tabs](../tabs/COMPONENT.md).
 - Paging through a list → use [Pagination](../pagination/COMPONENT.md).
 - A chronological history of events → use [Timeline](../timeline/COMPONENT.md).
-- Progress as a number or bar without step names → use [SegmentedProgressBar](../segmented-progress-bar/COMPONENT.md) or [ProgressBar](../progress-bar/COMPONENT.md).
+- Progress as a number or bar without step names → use [ProgressBar](../progress-bar/COMPONENT.md).
 
 ## Import
 ```tsx
@@ -21,63 +22,79 @@ import { Stepper } from "prime-ui-kit";
 ```
 
 ## Anatomy
-- `Stepper.Root` — `<ol>`; holds the current step index; in horizontal mode inserts chevron separators between steps.
-  - `Stepper.Step` — `<li>` with a `<button>`; must be a direct child of Root (index = order).
-    - `Stepper.Indicator` — circle with the step number, a check when completed, or custom content.
-    - `Stepper.Content` — text column.
-      - `Stepper.Title` — step name.
-      - `Stepper.Description` — muted support text.
-    - `Stepper.Arrow` — trailing chevron for vertical rows that open a page or panel.
+```
+Stepper.Root                 <ol>; current step; chevrons between horizontal items
+└─ Stepper.Item              <li> with a <button>; a direct child of Root (index = order)
+   ├─ Stepper.Indicator      circle: number, check when completed, or custom content
+   ├─ Stepper.Content        text column
+   │  ├─ Stepper.Title       step name
+   │  └─ Stepper.Description muted support text
+   └─ Stepper.Arrow          trailing chevron for vertical rows that open a page or panel
+```
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### Stepper.Root
-Does not forward a ref. + native `<ol>` props (except `children`, `defaultValue`, `onChange`).
+`ref` → `HTMLOListElement`. `<ol>` of items; owns the current step, numbers the items and adds chevrons between horizontal ones.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Layout. A horizontal stepper stacks vertically when its container is narrower than 30rem. |
-| `value` | `number` | — | Current step (0-based), controlled. |
-| `defaultValue` | `number` | `0` | Initial step, uncontrolled. |
-| `onValueChange` | `(index: number) => void` | — | Called with the step index when a step is clicked. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Indicator size, text and spacing. |
-| `children` | `ReactNode` | — (required) | `Stepper.Step` elements as direct children (an array from `map` is fine). |
-| `className` | `string` | — | Extra class on the `<ol>`. |
+| `value` | `number` | — | Current step, 0-based (controlled). |
+| `defaultValue` | `number` | `0` | Initial step (uncontrolled). |
+| `onValueChange` | `(index: number) => void` | — | Called with the index of the clicked item. |
+| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | Column of rows, or a row with chevrons that stacks below a 480px container. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Indicator 20 · 24 · 28 · 32 · 36, title in the control text of the tier. |
+| `children` | `ReactNode` | — | `Stepper.Item`s as direct children (an array from `map` is fine). |
+| `…rest` | `Omit<OlHTMLAttributes<HTMLOListElement>, "defaultValue" \| "onChange">` | — | `aria-label`, `className` and the other list attributes. |
 
-### Stepper.Step
-`forwardRef` → `HTMLButtonElement`. + native `<button>` props except `type`, `children` (`className` goes on the button).
+### Stepper.Item
+`ref` → `HTMLButtonElement`. One step: an `<li>` with a `<button>` (and, between horizontal steps, the decorative chevron in front of it); `aria-current="step"` when active.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `status` | `"pending" \| "active" \| "completed" \| "error"` | derived | Overrides the status derived from Root `value` (before → `completed`, equal → `active`, after → `pending`). |
-| `disabled` | `boolean` | — | Native disabled; the step cannot be selected. |
-| `onClick` | `(event) => void` | — | Runs before selection; `event.preventDefault()` cancels selecting the step. |
-| `children` | `ReactNode` | — (required) | Indicator, Content, Arrow. |
+| `status` | `"pending" \| "active" \| "completed" \| "danger"` | — | Overrides the status derived from `value` (before → `completed`, equal → `active`, after → `pending`). |
+| `disabled` | `boolean` | — | The item cannot be selected. |
+| `children` | `ReactNode` | — | `Stepper.Indicator`, `Stepper.Content`, optional `Stepper.Arrow`. |
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">` | — | `onClick` (runs first; `preventDefault()` stops the selection), `className` and the other button attributes. |
 
 ### Stepper.Indicator
+`ref` → `HTMLSpanElement`. The circle (`aria-hidden`): the item number, or a check when completed.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | step number / check | Replaces the default content (e.g. `!` for an error). |
-| `className` | `string` | — | Extra class. |
+| `children` | `ReactNode` | — | Replaces the default content, e.g. `<Icon name="status.danger" />`. |
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `className` and the other span attributes. |
+
+### Stepper.Content
+`ref` → `HTMLSpanElement`. Text column for the title and the description.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `className` and the other span attributes. |
+
+### Stepper.Title · Stepper.Description
+`ref` → `HTMLSpanElement`. Step title in the control text; muted secondary line in the hint text.
 
-### Stepper.Content, Stepper.Title, Stepper.Description
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | Content. |
-| `className` | `string` | — | Extra class. |
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `className` and the other span attributes. |
 
 ### Stepper.Arrow
+`ref` → `SVGSVGElement`. Trailing chevron (`aria-hidden`) for vertical items that open a page or panel.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `className` | `string` | — | Extra class. |
+| `…rest` | `Omit<SVGAttributes<SVGSVGElement>, "children">` | — | `className` and the other svg attributes. |
 
 ## Variants
 
 ### orientation
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `vertical` | full-width rows (indicator · text · optional arrow); hover `fill-subtle`, active row on `fill-subtle`, error row on `danger-soft` | side columns of wizards, step lists with descriptions | yes |
-| `horizontal` | steps in a row with placeholder-colored chevrons between them; hover → primary text; below 30rem container width the steps stack one per row and chevrons hide | checkout headers with short step names | |
+| `vertical` | full-width rows (indicator · text · optional arrow); hover `fill-subtle`, active row on `fill-subtle`, danger row on `danger-soft` | side columns of wizards, step lists with descriptions | yes |
+| `horizontal` | items in a row with placeholder-colored chevrons between them; hover → primary text; below a 30rem container the items stack one per row and chevrons hide | checkout headers with short step names | |
 
 ### size
 | Value | Looks like | Use when | Default |
@@ -95,73 +112,61 @@ Title uses the control text of the tier, Description the hint text of the tier.
 |---|---|---|---|
 | `pending` | `fill-muted` circle with secondary number, secondary text | steps after the current one | derived |
 | `active` | accent circle with a `space-1` `accent-soft` halo, primary text | the current step | derived |
-| `completed` | `accent-soft` circle with an accent check, primary text | finished steps | derived |
-| `error` | horizontal: `danger-soft` circle; vertical: solid danger circle on a `danger-soft` row; danger text | a step that needs attention | |
+| `completed` | `accent-soft` circle with an accent check (`Icon action.check`), primary text | finished steps | derived |
+| `danger` | horizontal: `danger-soft` circle; vertical: solid danger circle on a `danger-soft` row; danger text | a step that needs attention | |
 
-**Combinations**
-- Recommended: derive statuses from `value`; set `status="error"` only on the failing step with `<Stepper.Indicator>!</Stepper.Indicator>`; disable steps the user cannot reach yet.
-- Avoid: `Stepper.Arrow` in horizontal mode (the root adds chevrons); `Stepper.Description` in horizontal mode with long text; several `active` steps.
+Derive statuses from `value`; set `status="danger"` only on the failing step with an indicator that is not a number (`<Icon name="status.danger" />`); disable steps the user cannot reach yet. Avoid `Stepper.Arrow` in horizontal mode (the root adds chevrons) and several `active` steps.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| status | `value` or `status` | `data-status` on the button and the indicator; `aria-current="step"` on the active step |
+| status | `value` or `status` | `data-status` on the button and the indicator; `aria-current="step"` on the active item |
 | disabled | `disabled` | native `disabled`, `data-disabled="true"`, `text-disabled`, muted indicator without halo |
-| hover / active | pointer | vertical `fill-subtle` / `fill-subtle-active`; horizontal text → primary |
+| hover / active | pointer | vertical `fill-subtle` / `fill-subtle-active`; horizontal text → primary; press scale |
 | focus-visible | keyboard | outer focus ring |
 
-Root attributes: `data-orientation`, `data-size`. Controlled: `value` + `onValueChange`; uncontrolled: `defaultValue` (clicks still select steps).
+Root attributes: `data-orientation`, `data-size`. Uncontrolled (`defaultValue`) clicks still select items.
 
 ## Layout & spacing
 - The root is a size container (`inline-size: 100%`): give it a definite width, a shrink-wrapped parent collapses it.
-- Wizard: stepper column and form side by side with `gap: var(--prime-space-8)`, stacking on narrow widths (`grid-template-columns: repeat(auto-fit, minmax(…, 1fr))`).
+- Wizard: stepper column and form side by side with `gap: var(--prime-space-8)`, stacking on narrow widths.
 - Vertical rows are separated by `var(--prime-space-1)` (`var(--prime-space-2)` at `size="xl"`); the same value is the row gap of a wrapping horizontal stepper.
 
 ## Accessibility
-- Semantic `<ol>`; each step is a `<button>` inside an `<li>`; the active one has `aria-current="step"`.
-- Separators, indicator and arrow are `aria-hidden`; the step name comes from Title (and Description).
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves focus between items; a disabled one is skipped. |
+| `Enter` · `Space` | Selects the item. |
+
+### ARIA
+- Semantic `<ol>`; each item is a `<button>` inside an `<li>`; the active one has `aria-current="step"`.
+- Separators, indicator and arrow are `aria-hidden`; the name comes from Title (and Description).
 - Give the `<ol>` an `aria-label` when there are several steppers on a page.
-- Keyboard: Tab between steps, Enter/Space selects. No `labels` keys.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [wizard.tsx](examples/wizard.tsx) | Vertical stepper + step form + Back / Next | setup and onboarding wizards |
-| [orientation.tsx](examples/orientation.tsx) | Horizontal and vertical (with Description and Arrow), one `value` | choosing a layout |
-| [states.tsx](examples/states.tsx) | Explicit completed / error / active / pending + disabled | server-driven statuses |
-| [sizes.tsx](examples/sizes.tsx) | Five size tiers | matching the form size |
-| [narrow.tsx](examples/narrow.tsx) | Horizontal stepper at 320px stacks | phones |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-```tsx
-import { Stepper } from "prime-ui-kit";
+No `labels`.
 
-export function CheckoutSteps() {
-  return (
-    <Stepper.Root orientation="horizontal" defaultValue={1}>
-      <Stepper.Step>
-        <Stepper.Indicator />
-        <Stepper.Content>
-          <Stepper.Title>Корзина</Stepper.Title>
-        </Stepper.Content>
-      </Stepper.Step>
-      <Stepper.Step>
-        <Stepper.Indicator />
-        <Stepper.Content>
-          <Stepper.Title>Оплата</Stepper.Title>
-        </Stepper.Content>
-      </Stepper.Step>
-    </Stepper.Root>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | Steps of a process: done ones get a check, the current one is highlighted — `defaultValue`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier: indicator 20 to 36 px, title in the control text of the tier — `size`. |
+| [states.tsx](examples/states.tsx) | Statuses that come from the server, a failed step with its own indicator and a locked step — `status`, `disabled`. |
+| [with-icon.tsx](examples/with-icon.tsx) | Vertical rows that open a page or panel end with a chevron — `Stepper.Arrow`. |
+| [orientation.tsx](examples/orientation.tsx) | A row of steps with chevrons between them above the content, and a column for a side panel — `orientation`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the current step: Back and Next move it, far steps stay locked until reached — `value`, `onValueChange`. |
+| [narrow.tsx](examples/narrow.tsx) | A horizontal stepper in a phone-width container stacks one step per row and hides the chevrons. |
 
 ## Mistakes
-- Wrapping `Stepper.Step` in another component or element → it must be a direct child of Root (it throws otherwise).
+- Wrapping `Stepper.Item` in another component or element → it must be a direct child of Root (it throws otherwise).
 - 1-based `value` → steps are 0-based.
-- Adding separators by hand in horizontal mode → the root inserts them.
-- `status="error"` without changing the indicator → pass `<Stepper.Indicator>!</Stepper.Indicator>` so the error does not read as a number only.
+- Adding separators by hand in horizontal mode → every step already draws its chevron.
+- `status="error"` → the status is `danger`; give it an indicator that is not a number so it does not read by color only.
 
 ## Related
-- [Tabs](../tabs/COMPONENT.md)
-- [Pagination](../pagination/COMPONENT.md)
-- [Timeline](../timeline/COMPONENT.md)
+- **Built from:** Icon (`action.check`, `nav.chevronRight`)
+- **See also:** [Tabs](../tabs/COMPONENT.md), [Pagination](../pagination/COMPONENT.md), [Timeline](../timeline/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md)

package/src/components/stepper/examples/controlled.tsx

@@ -0,0 +1,46 @@
+/** The parent owns the current step: Back and Next move it, far steps stay locked until reached — `value`, `onValueChange`. */
+import { Button, Stepper } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const STEPS = [
+  { title: "Компания", description: "Название и ИНН" },
+  { title: "Контакты", description: "Кто будет администратором" },
+  { title: "Тариф", description: "Можно сменить позже" },
+];
+
+const LAST = STEPS.length - 1;
+
+export default function StepperControlledExample() {
+  const [step, setStep] = React.useState(0);
+
+  return (
+    <div className={styles.column}>
+      <Stepper.Root value={step} onValueChange={setStep}>
+        {STEPS.map((item, index) => (
+          <Stepper.Item key={item.title} disabled={index > step + 1}>
+            <Stepper.Indicator />
+            <Stepper.Content>
+              <Stepper.Title>{item.title}</Stepper.Title>
+              <Stepper.Description>{item.description}</Stepper.Description>
+            </Stepper.Content>
+          </Stepper.Item>
+        ))}
+      </Stepper.Root>
+      <div className={styles.actions}>
+        <Button.Root
+          variant="outline"
+          tone="neutral"
+          disabled={step === 0}
+          onClick={() => setStep(step - 1)}
+        >
+          Назад
+        </Button.Root>
+        <Button.Root disabled={step === LAST} onClick={() => setStep(step + 1)}>
+          Далее
+        </Button.Root>
+      </div>
+    </div>
+  );
+}

package/src/components/stepper/examples/examples.module.css

@@ -1,55 +1,24 @@
-/* Layout for the Stepper examples: semantic tokens only. */
+/* Layout of the Stepper scenarios: semantic tokens only. */
 
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-8);
+/* The stepper measures its own width (container query), so its wrapper needs one. */
+.wide {
   width: 100%;
-  min-width: 0;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-3);
-  min-width: 0;
 }
 
-/* 288px. */
-.vertical {
+/* A side column for a vertical stepper (288px), with anything under it a group gap away. */
+.column {
+  display: grid;
+  gap: var(--prime-space-4);
   width: min(100%, calc(var(--prime-space-24) * 3));
 }
 
-/* 320px. */
+/* A phone-width container (320px). */
 .narrow {
   width: min(100%, calc(var(--prime-drawer-width-s) - var(--prime-space-10)));
 }
 
-.wizard {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, calc(var(--prime-space-24) * 2.5)), 1fr)
-    );
-  gap: var(--prime-space-6) var(--prime-space-8);
-  width: min(100%, calc(var(--prime-modal-width-l) + var(--prime-space-12)));
-  padding: var(--prime-card-padding-m);
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-  box-shadow: var(--prime-card-shadow);
-  --prime-color-field-bg: var(--prime-color-field-bg-surface);
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
-  min-width: 0;
-}
-
+/* Back / Next under the stepper. */
 .actions {
   display: flex;
-  justify-content: flex-end;
   gap: var(--prime-space-2);
 }

package/src/components/stepper/examples/narrow.tsx

@@ -1,30 +1,22 @@
-/** A horizontal stepper in a 320px container: below 30rem of its own width the steps stack one per row and separators hide. Use to check checkout steps on phones. */
+/** A horizontal stepper in a phone-width container stacks one step per row and hides the chevrons. */
 import { Stepper } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
+const STEPS = ["Компания", "Реквизиты", "Договор"];
+
 export default function StepperNarrowExample() {
   return (
     <div className={styles.narrow}>
       <Stepper.Root orientation="horizontal" defaultValue={1}>
-        <Stepper.Step>
-          <Stepper.Indicator />
-          <Stepper.Content>
-            <Stepper.Title>Компания</Stepper.Title>
-          </Stepper.Content>
-        </Stepper.Step>
-        <Stepper.Step>
-          <Stepper.Indicator />
-          <Stepper.Content>
-            <Stepper.Title>Реквизиты</Stepper.Title>
-          </Stepper.Content>
-        </Stepper.Step>
-        <Stepper.Step>
-          <Stepper.Indicator />
-          <Stepper.Content>
-            <Stepper.Title>Договор</Stepper.Title>
-          </Stepper.Content>
-        </Stepper.Step>
+        {STEPS.map((title) => (
+          <Stepper.Item key={title}>
+            <Stepper.Indicator />
+            <Stepper.Content>
+              <Stepper.Title>{title}</Stepper.Title>
+            </Stepper.Content>
+          </Stepper.Item>
+        ))}
       </Stepper.Root>
     </div>
   );

package/src/components/stepper/examples/orientation.tsx

@@ -1,73 +1,35 @@
-/** Horizontal steps (chevrons added by the root) and vertical rows with descriptions and `Stepper.Arrow`, both controlled by one `value`. Use horizontal above checkout content, vertical in a side column. */
-import { Stepper, Typography } from "prime-ui-kit";
-import * as React from "react";
+/** A row of steps with chevrons between them above the content, and a column for a side panel — `orientation`. */
+import { Stepper } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-export default function StepperOrientationExample() {
-  const [step, setStep] = React.useState(1);
+const STEPS = ["Корзина", "Доставка", "Оплата"];
 
+export default function StepperOrientationExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          orientation="horizontal"
-        </Typography.Root>
-        <Stepper.Root orientation="horizontal" value={step} onValueChange={setStep}>
-          <Stepper.Step>
-            <Stepper.Indicator />
-            <Stepper.Content>
-              <Stepper.Title>Корзина</Stepper.Title>
-            </Stepper.Content>
-          </Stepper.Step>
-          <Stepper.Step>
+    <>
+      <Stepper.Root orientation="horizontal" defaultValue={1}>
+        {STEPS.map((title) => (
+          <Stepper.Item key={title}>
             <Stepper.Indicator />
             <Stepper.Content>
-              <Stepper.Title>Доставка</Stepper.Title>
+              <Stepper.Title>{title}</Stepper.Title>
             </Stepper.Content>
-          </Stepper.Step>
-          <Stepper.Step>
-            <Stepper.Indicator />
-            <Stepper.Content>
-              <Stepper.Title>Оплата</Stepper.Title>
-            </Stepper.Content>
-          </Stepper.Step>
-        </Stepper.Root>
-      </div>
-
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          orientation="vertical"
-        </Typography.Root>
-        <div className={styles.vertical}>
-          <Stepper.Root value={step} onValueChange={setStep}>
-            <Stepper.Step>
-              <Stepper.Indicator />
-              <Stepper.Content>
-                <Stepper.Title>Корзина</Stepper.Title>
-                <Stepper.Description>3 товара</Stepper.Description>
-              </Stepper.Content>
-              <Stepper.Arrow />
-            </Stepper.Step>
-            <Stepper.Step>
+          </Stepper.Item>
+        ))}
+      </Stepper.Root>
+      <div className={styles.column}>
+        <Stepper.Root orientation="vertical" defaultValue={1}>
+          {STEPS.map((title) => (
+            <Stepper.Item key={title}>
               <Stepper.Indicator />
               <Stepper.Content>
-                <Stepper.Title>Доставка</Stepper.Title>
-                <Stepper.Description>Адрес и интервал</Stepper.Description>
+                <Stepper.Title>{title}</Stepper.Title>
               </Stepper.Content>
-              <Stepper.Arrow />
-            </Stepper.Step>
-            <Stepper.Step>
-              <Stepper.Indicator />
-              <Stepper.Content>
-                <Stepper.Title>Оплата</Stepper.Title>
-                <Stepper.Description>Карта или СБП</Stepper.Description>
-              </Stepper.Content>
-              <Stepper.Arrow />
-            </Stepper.Step>
-          </Stepper.Root>
-        </div>
+            </Stepper.Item>
+          ))}
+        </Stepper.Root>
       </div>
-    </div>
+    </>
   );
 }

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

@@ -0,0 +1,28 @@
+/** Steps of a process: done ones get a check, the current one is highlighted — `defaultValue`. */
+import { Stepper } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const STEPS = [
+  { title: "Компания", description: "Название и ИНН" },
+  { title: "Реквизиты", description: "Банк и расчётный счёт" },
+  { title: "Договор", description: "Подпись и печать" },
+];
+
+export default function StepperOverviewExample() {
+  return (
+    <div className={styles.column}>
+      <Stepper.Root defaultValue={1}>
+        {STEPS.map((step) => (
+          <Stepper.Item key={step.title}>
+            <Stepper.Indicator />
+            <Stepper.Content>
+              <Stepper.Title>{step.title}</Stepper.Title>
+              <Stepper.Description>{step.description}</Stepper.Description>
+            </Stepper.Content>
+          </Stepper.Item>
+        ))}
+      </Stepper.Root>
+    </div>
+  );
+}

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

@@ -1,40 +1,31 @@
-/** All five size tiers of a horizontal stepper (indicator 20 · 24 · 28 · 32 · 36, title in the control text). Use to match the stepper to the surrounding form size. */
-import { type ControlSize, Stepper, Typography } from "prime-ui-kit";
+/** Every size tier: indicator 20 to 36 px, title in the control text of the tier — `size`. */
+import { Stepper, 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;
+const STEPS = ["Аккаунт", "Команда", "Готово"];
 
 export default function StepperSizesExample() {
   return (
-    <div className={styles.stack}>
-      {sizes.map((size) => (
-        <div key={size} className={styles.group}>
-          <Typography.Root variant="code" tone="muted">
-            size="{size}"
-          </Typography.Root>
+    <>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.wide}>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
           <Stepper.Root orientation="horizontal" size={size} defaultValue={1}>
-            <Stepper.Step>
-              <Stepper.Indicator />
-              <Stepper.Content>
-                <Stepper.Title>Аккаунт</Stepper.Title>
-              </Stepper.Content>
-            </Stepper.Step>
-            <Stepper.Step>
-              <Stepper.Indicator />
-              <Stepper.Content>
-                <Stepper.Title>Команда</Stepper.Title>
-              </Stepper.Content>
-            </Stepper.Step>
-            <Stepper.Step>
-              <Stepper.Indicator />
-              <Stepper.Content>
-                <Stepper.Title>Готово</Stepper.Title>
-              </Stepper.Content>
-            </Stepper.Step>
+            {STEPS.map((title) => (
+              <Stepper.Item key={title}>
+                <Stepper.Indicator />
+                <Stepper.Content>
+                  <Stepper.Title>{title}</Stepper.Title>
+                </Stepper.Content>
+              </Stepper.Item>
+            ))}
           </Stepper.Root>
         </div>
       ))}
-    </div>
+    </>
   );
 }