prime-ui-kit 0.9.0 → 0.9.1

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

@@ -1,49 +1,48 @@
-/** Explicit `status` on each step (completed, error with a custom indicator, active, pending) and a disabled step. Use when step status comes from the server, e.g. a failed delivery step. */
-import { Stepper } from "prime-ui-kit";
+/** Statuses that come from the server, a failed step with its own indicator and a locked step — `status`, `disabled`. */
+import { Icon, Stepper } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function StepperStatesExample() {
   return (
-    <div className={styles.vertical}>
+    <div className={styles.column}>
       <Stepper.Root>
-        <Stepper.Step status="completed">
+        <Stepper.Item status="completed">
           <Stepper.Indicator />
           <Stepper.Content>
             <Stepper.Title>Оплата прошла</Stepper.Title>
-            <Stepper.Description>completed</Stepper.Description>
+            <Stepper.Description>12 400 ₽ списано с карты</Stepper.Description>
           </Stepper.Content>
-        </Stepper.Step>
-        <Stepper.Step status="error">
-          <Stepper.Indicator>!</Stepper.Indicator>
+        </Stepper.Item>
+        <Stepper.Item status="danger">
+          <Stepper.Indicator>
+            <Icon name="status.danger" />
+          </Stepper.Indicator>
           <Stepper.Content>
             <Stepper.Title>Ошибка доставки</Stepper.Title>
-            <Stepper.Description>error · проверьте адрес</Stepper.Description>
+            <Stepper.Description>Проверьте адрес получателя</Stepper.Description>
           </Stepper.Content>
-          <Stepper.Arrow />
-        </Stepper.Step>
-        <Stepper.Step status="active">
+        </Stepper.Item>
+        <Stepper.Item status="active">
           <Stepper.Indicator />
           <Stepper.Content>
             <Stepper.Title>Подтверждение</Stepper.Title>
-            <Stepper.Description>active</Stepper.Description>
+            <Stepper.Description>Ждём ответа склада</Stepper.Description>
           </Stepper.Content>
-          <Stepper.Arrow />
-        </Stepper.Step>
-        <Stepper.Step status="pending">
+        </Stepper.Item>
+        <Stepper.Item status="pending">
           <Stepper.Indicator />
           <Stepper.Content>
             <Stepper.Title>Получение</Stepper.Title>
-            <Stepper.Description>pending</Stepper.Description>
           </Stepper.Content>
-        </Stepper.Step>
-        <Stepper.Step status="pending" disabled>
+        </Stepper.Item>
+        <Stepper.Item status="pending" disabled>
           <Stepper.Indicator />
           <Stepper.Content>
             <Stepper.Title>Отзыв</Stepper.Title>
-            <Stepper.Description>disabled</Stepper.Description>
+            <Stepper.Description>Откроется после получения</Stepper.Description>
           </Stepper.Content>
-        </Stepper.Step>
+        </Stepper.Item>
       </Stepper.Root>
     </div>
   );

package/src/components/stepper/examples/with-icon.tsx

@@ -0,0 +1,29 @@
+/** Vertical rows that open a page or panel end with a chevron — `Stepper.Arrow`. */
+import { Stepper } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const STEPS = [
+  { title: "Корзина", description: "3 товара" },
+  { title: "Доставка", description: "Адрес и интервал" },
+  { title: "Оплата", description: "Карта или СБП" },
+];
+
+export default function StepperWithIconExample() {
+  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.Arrow />
+          </Stepper.Item>
+        ))}
+      </Stepper.Root>
+    </div>
+  );
+}

package/src/components/switch/COMPONENT.md

@@ -1,6 +1,7 @@
 # Switch
 
 **Category:** selection
+**Kind:** control
 
 > An on/off switch for a setting that takes effect immediately.
 
@@ -21,60 +22,42 @@ import { Switch } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Switch.Root          wrapper grid + context; ref and input props go to the hidden native input
-├─ Switch.Label      clickable row: renders the native input (role="switch"), the track and the text
-├─ Switch.Hint       description under the text column (optional)
-└─ Switch.Error      error message under the text column (optional, makes the field invalid)
+Switch.Root          field grid; ref and input props go to the native input (role="switch")
+├─ <label> row       the native input, the track and the text (rendered by Root)
+│  └─ Switch.Label   the visible text (optional)
+└─ hint | error      support text under the text column (`hint`, `error`)
 ```
-The native input is rendered inside `Switch.Label`, so `Switch.Label` is required even without visible text.
+`<Switch.Root aria-label="…" />` without `Switch.Label` is a valid bare control (settings rows, tables).
 
 ## API
 
-### Switch.Root
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `checked` | `boolean` | — | Controlled on/off state; use with `onCheckedChange`. |
-| `defaultChecked` | `boolean` | `false` | Initial state in uncontrolled mode. |
-| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state on click or Space. |
-| `invalid` | `boolean` | `false` | Invalid look and `aria-invalid`; also set while `Switch.Error` is mounted. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Size tier of the track, thumb, gap and label text. |
-| `fullWidth` | `boolean` | `false` | Stretch to the container width; by default the field is as wide as its content. |
-| `disabled` | `boolean` | `false` | Disables the input. |
-| `readOnly` | `boolean` | `false` | State is visible but cannot change; no hover, `aria-readonly` on the input. |
-| `id` | `string` | auto (`useId`) | Id of the native input; hint/error ids derive from it. |
-| `aria-describedby` | `string` | — | Extra description ids; merged with the mounted hint and error ids. |
-| `className` | `string` | — | Class on the wrapper `div`. |
-| `children` | `ReactNode` | — | `Switch.Label`, `Switch.Hint`, `Switch.Error`. |
-
-+ native `<input>` props except `type`, `size`, `checked`, `defaultChecked`, `onChange`, `children` (`name`, `value`, `required`, `aria-label`, `aria-labelledby`, …) — applied to the hidden native input.
-Ref: `forwardRef` → `HTMLInputElement`. No `asChild`.
-
-### Switch.Label
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — | Text to the right of the track. Empty → only the track; then name the switch via `aria-label` / `aria-labelledby` on `Switch.Root`. |
-| `className` | `string` | — | Class on the `<label>` row. |
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-+ native `<label>` HTML attributes except `htmlFor` and `size`. Ref: `forwardRef` → `HTMLLabelElement`.
-
-### Switch.Hint
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `children` | `ReactNode` | — (required) | Description under the text column; added to `aria-describedby`. |
-| `className` | `string` | — | Class on the `<p>`. |
-
-+ native `<p>` props except `id`. No ref.
+### Switch.Root
+`ref` → `HTMLInputElement` (the native `input type="checkbox" role="switch"`). Renders the field `<div>`, the `<label>` row with the input and the track, and the support row. Field-root rule for a leaf: `className` goes to the field `<div>`; `id`, `ref` and native input props to the input.
 
-### Switch.Error
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | Error text in `danger-text`; while mounted the field is invalid. |
-| `className` | `string` | — | Class on the `<p>`. |
+| `checked` | `boolean` | — | Controlled state. |
+| `defaultChecked` | `boolean` | `false` | Initial state when uncontrolled. |
+| `onCheckedChange` | `(checked: boolean) => void` | — | Called with the new state on every toggle (not while `readOnly`). |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the track (24×16 … 44×24), the text and the gap. Without it the tier of its host (a form, a panel), else `m`. |
+| `hint` | `ReactNode` | — | Help text under the label text. Hidden while `error` is shown. |
+| `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
+| `invalid` | `boolean` | `false` | Danger ring on the off track and `aria-invalid`. A non-empty `error` implies it. |
+| `disabled` | `boolean` | `false` | No toggling; muted track (on = `accent-soft`), dimmed text and hint. |
+| `readOnly` | `boolean` | `false` | The state is shown and focusable but does not change (`aria-readonly`); no hover or press. |
+| `id` | `string` | — | Id of the input (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
+| `aria-describedby` | `string` | — | Merged before the hint/error ids. |
+| `children` | `ReactNode` | — | `Switch.Label`. Without it only the track renders — name it with `aria-label` or `aria-labelledby`. |
+| `className` | `string` | — | Class on the field `<div>`. |
+| `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "size" \| "checked" \| "defaultChecked" \| "onChange">` | — | `name`, `value`, `required`, `aria-label`, `aria-labelledby`… on the native input. |
 
-+ native `<p>` props except `id`. No ref.
+### Switch.Label
+`ref` → `HTMLSpanElement`. The visible text in the text column of the label row. Native `<span>` props.
 
 ## Variants
-No `variant`/`tone`/`color`. Axes: `size`, `fullWidth`.
+No `variant` / `tone` / `color`.
 
 ### size
 | Value | Looks like | Use when | Default |
@@ -85,76 +68,74 @@ No `variant`/`tone`/`color`. Axes: `size`, `fullWidth`.
 | `l` | track 36×20, thumb 16, 8px gap, 16/24 text | spacious settings pages | |
 | `xl` | track 44×24, thumb 20, 12px gap, 16/24 text | touch-first screens | |
 
-### fullWidth
+**Sizes:** the track is centred on the first text line; the text follows the tier (12 · 13 · 14 · 16 · 16). Use the same tier as the neighbouring Checkbox / Radio / inputs.
+
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `false` | field shrinks to its content | most cases | yes |
-| `true` | field stretches to 100% of the container | the row must fill a grid cell | |
+| `readOnly` | normal colours, no hover or press, clicks ignored | the value is meaningful but someone else controls it | `false` |
+| `disabled` | muted track (on = `accent-soft`), dimmed text | the setting is unavailable | `false` |
+| `invalid` | danger ring on the off track | the message is shown elsewhere; otherwise pass `error` | `false` |
 
 **Combinations**
-- `readOnly` vs `disabled`: `readOnly` keeps the normal colours (the value is meaningful, someone else controls it); `disabled` mutes the track (the setting is unavailable). Do not combine them.
-- `invalid` together with `Switch.Error` is redundant; mount `Switch.Error` alone.
-
-**Sizes** — the track is centred on the first text line; label text follows the tier (12 · 13 · 14 · 16 · 16). Use the same tier as the neighbouring Checkbox/Radio/inputs.
-
-**Hierarchy** — a master switch sits above its dependants and drives their `disabled` (see [notification-settings.tsx](examples/notification-settings.tsx)).
+- `readOnly` and `disabled` together are pointless — pick one.
+- `invalid` together with `error` is redundant; pass `error` alone.
+- A master switch sits above its dependants and drives their `disabled`.
 
 ## States
-| State | Driven by | DOM | Looks like |
-|---|---|---|---|
-| off | `checked={false}` / default | `data-state="unchecked"` | track `fill-strong` (hover `fill-strong-hover`), thumb at the start |
-| on | `checked` / `defaultChecked` | `data-state="checked"` | track `accent-default` (hover `accent-hover`), thumb slides to the end |
-| invalid | `invalid` or mounted `Switch.Error` | `data-invalid="true"`, `aria-invalid` | off track gets a `danger-border` inset ring; focus ring `danger-border` |
-| disabled | `disabled` | `data-disabled="true"` | off track `fill-muted`, on track `accent-soft`, thumb without shadow, `cursor: not-allowed` |
-| read-only | `readOnly` | `aria-readonly="true"` on the input | normal colours, no hover, default cursor, clicks ignored |
-| focus-visible | keyboard | — | outer focus ring around the track |
+| State | Driven by | DOM |
+|---|---|---|
+| off | `checked={false}` / default | `data-state="unchecked"`; track `fill-strong` (hover `fill-strong-hover`), thumb at the start |
+| on | `checked` / `defaultChecked` | `data-state="checked"`; accent track, the thumb glides to the end |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid`; danger ring on the off track and on focus |
+| disabled | `disabled` | `data-disabled="true"`; off track `fill-muted`, on track `accent-soft`, `cursor: not-allowed` |
+| read-only | `readOnly` | `aria-readonly="true"` on the input, `data-readonly="true"` on the field; no hover or press, default cursor |
+| pressed | pointer press | the track scales to the compact press scale (not when disabled or read-only) |
+| focus-visible | keyboard | outer focus ring around the track |
 
-Root also carries `data-size` and `data-full-width="true"` when `fullWidth`.
-Controlled: `checked` + `onCheckedChange`. Uncontrolled: `defaultChecked`. No native `onChange` prop.
+Root also carries `data-size`. Controlled: `checked` + `onCheckedChange`. Uncontrolled: `defaultChecked`. No native `onChange` prop.
 
 ## Layout & spacing
 - Grid `[track][text]`; hint and error sit under the text column.
-- Switches in a settings list: gap `--prime-space-5` (20px) between fields.
-- Settings row (text left, switch right): flex row with `justify-content: space-between`, gap `--prime-space-4`; `Switch.Label` without children and `aria-labelledby` / `aria-describedby` pointing at the row text.
+- Switches in a settings list: gap `--prime-space-4`–`--prime-space-5` between fields.
+- Settings row (text left, switch right): flex row with `justify-content: space-between`, gap `--prime-space-4`; a bare `Switch.Root` with `aria-labelledby` / `aria-describedby` pointing at the row text.
 - In a form, a `name`d switch submits `"on"` when checked (native checkbox semantics).
 
 ## Accessibility
-- Native `<input type="checkbox" role="switch">` with `aria-checked`, visually hidden, associated with the `<label>`.
-- Keyboard: Tab focuses, Space toggles.
-- `aria-invalid`, `aria-readonly`, `aria-describedby` (your ids + hint + error) are set on the input.
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Moves focus to the switch. |
+| `Space` | Toggles it (not while `readOnly`). |
+
+### ARIA
+- A native `<input type="checkbox" role="switch">` (its native checked state is the switch state), visually hidden over the track and wrapped by the `<label>` row.
+- `aria-invalid`, `aria-readonly` and `aria-describedby` (your ids + the hint or the error) are set on the input.
 - Without visible text, name it with `aria-label` or `aria-labelledby` on `Switch.Root`.
-- No `labels` keys.
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [sizes.tsx](examples/sizes.tsx) | All size tiers | Choosing the tier next to other controls |
-| [validation.tsx](examples/validation.tsx) | Hint vs `Switch.Error` | A switch that must be on to continue |
-| [states.tsx](examples/states.tsx) | Off, on, disabled, read-only, invalid | Reference for every state |
-| [on-off.tsx](examples/on-off.tsx) | Off and on switch | Checking contrast on canvas, cards, overlays |
-| [controlled.tsx](examples/controlled.tsx) | `checked` + `onCheckedChange` | Other UI depends on the switch |
-| [in-form.tsx](examples/in-form.tsx) | `name`, `required`, `aria-label` in a form | Form semantics of Switch; prefer Checkbox when the value applies only after submit |
-| [settings-row.tsx](examples/settings-row.tsx) | Text left, track right, `aria-labelledby` | Settings lists |
-| [notification-settings.tsx](examples/notification-settings.tsx) | Master switch disabling dependants in a Card | Dependent settings |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-```tsx
-import { Switch } from "prime-ui-kit";
+No `labels`.
 
-export function BackupSwitch() {
-  return (
-    <Switch.Root name="backup" defaultChecked>
-      <Switch.Label>Резервное копирование</Switch.Label>
-      <Switch.Hint>Каждую ночь в 03:00.</Switch.Hint>
-    </Switch.Root>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A setting that applies at once, with a hint under its text — `hint`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size, track 24×16 to 44×24; the text follows the control tier — `size`. |
+| [states.tsx](examples/states.tsx) | Every state side by side, each labelled by its prop — `checked`, `readOnly`, `invalid`, `disabled`. |
+| [settings-row.tsx](examples/settings-row.tsx) | A settings row with text on the left and a bare track on the right — `aria-labelledby`, `aria-describedby`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the state and rewrites the hint to match it — `checked`, `onCheckedChange`. |
+| [in-form.tsx](examples/in-form.tsx) | Switches submitted with a form: the value goes to FormData by `name`, a required one shows an error — `name`, `required`, `error`. |
 
 ## Mistakes
 - `<Switch.Root onChange={…}>` → use `onCheckedChange`.
-- Switch for an option that is saved by a «Сохранить» button → use `Checkbox`.
-- `disabled` for a value managed by an admin → use `readOnly` so the state stays readable.
-- `<Switch.Root aria-label="…">` without `Switch.Label` → the input is rendered by `Switch.Label`; keep `<Switch.Label />` even when empty.
+- A switch whose value only applies after «Сохранить» → use `Checkbox`.
+- `invalid` plus `error` → pass `error` alone.
+- A bare switch without `aria-label` / `aria-labelledby` → it has no accessible name.
+- `readOnly` used to block a setting that is unavailable → use `disabled`.
 
 ## Related
-[Checkbox](../checkbox/COMPONENT.md) · [Radio](../radio/COMPONENT.md) · [SegmentedControl](../segmented-control/COMPONENT.md)
+- **Built from:** [Label](../label/COMPONENT.md) (the row), [Hint](../hint/COMPONENT.md) (`hint`, `error`)
+- **See also:** [Checkbox](../checkbox/COMPONENT.md), [Radio](../radio/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

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

@@ -1,15 +1,17 @@
-/** A controlled switch whose hint follows the state via checked and onCheckedChange. Use it when other UI depends on the switch. */
-
+/** The parent owns the state and rewrites the hint to match it — `checked`, `onCheckedChange`. */
 import { Switch } from "prime-ui-kit";
 import * as React from "react";
 
 export default function SwitchControlledExample() {
-  const [on, setOn] = React.useState(false);
+  const [digest, setDigest] = React.useState(false);
 
   return (
-    <Switch.Root checked={on} onCheckedChange={setOn}>
-      <Switch.Label>Рассылка о скидках</Switch.Label>
-      <Switch.Hint>{on ? "Будем писать раз в неделю." : "Письма не приходят."}</Switch.Hint>
+    <Switch.Root
+      checked={digest}
+      onCheckedChange={setDigest}
+      hint={digest ? "Пришлём сводку в понедельник в 09:00" : "Сводка не приходит"}
+    >
+      <Switch.Label>Еженедельная сводка по продажам</Switch.Label>
     </Switch.Root>
   );
 }

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

@@ -1,62 +1,30 @@
-/* Example layout: semantic tokens only. */
-
-.sizesRow {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: var(--prime-space-8);
-}
-
-.cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--prime-panel-min-width)), 1fr));
-  align-items: start;
-  gap: var(--prime-space-5);
-  width: 100%;
-  max-width: var(--prime-modal-width-m);
-}
-
-.column {
-  display: grid;
-  gap: var(--prime-space-5);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
+/* Layout of the Switch scenarios: semantic tokens only. */
 
+/* settings-row.tsx: text on the left, the track on the right. */
 .row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--prime-space-4);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
 .rowText {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--prime-space-1);
   min-width: 0;
 }
 
-.card {
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
-
+/* in-form.tsx: switches, then actions (group → actions 32). */
 .form {
-  display: grid;
-  justify-items: start;
-  gap: var(--prime-space-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
-/* In a settings row the switch field takes only the track width. */
-.row > .rowControl {
-  flex: none;
-  width: auto;
+.formActions {
+  display: flex;
+  margin-top: var(--prime-space-4);
 }

package/src/components/switch/examples/in-form.tsx

@@ -1,38 +1,34 @@
-/** How Switch behaves inside a <form>: name goes to FormData, required is validated by the browser, a switch without text is named via aria-label. Prefer Checkbox when the value applies only after submit. */
-import { Button, Switch, Typography } from "prime-ui-kit";
+/** Switches submitted with a form: the value goes to FormData by `name`, a required one shows an error — `name`, `required`, `error`. */
+import { Button, Switch } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function SwitchInFormExample() {
-  const [result, setResult] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const accepted = new FormData(event.currentTarget).get("processing") === "on";
+    setError(accepted ? undefined : "Без согласия аккаунт не создать");
+  };
 
   return (
-    <form
-      className={styles.form}
-      onSubmit={(e) => {
-        e.preventDefault();
-        const data = new FormData(e.currentTarget);
-        const on = ["news", "terms", "beta"].filter((key) => data.get(key) === "on");
-        setResult(`Включено: ${on.join(", ") || "ничего"}`);
-      }}
-    >
+    <form className={styles.form} noValidate onSubmit={submit}>
       <Switch.Root name="news" defaultChecked>
         <Switch.Label>Новости продукта</Switch.Label>
       </Switch.Root>
-      <Switch.Root name="terms" required>
-        <Switch.Label>Принимаю условия сервиса</Switch.Label>
-        <Switch.Hint>Обязательно: без него форма не отправится.</Switch.Hint>
-      </Switch.Root>
-      <Switch.Root name="beta" aria-label="Бета-функции">
-        <Switch.Label />
+      <Switch.Root
+        name="processing"
+        required
+        error={error}
+        onCheckedChange={(checked) => checked && setError(undefined)}
+      >
+        <Switch.Label>Согласие на обработку данных</Switch.Label>
       </Switch.Root>
-      <Button.Root type="submit">Сохранить</Button.Root>
-      {result != null ? (
-        <Typography.Root variant="caption" tone="muted">
-          {result}
-        </Typography.Root>
-      ) : null}
+      <div className={styles.formActions}>
+        <Button.Root type="submit">Создать аккаунт</Button.Root>
+      </div>
     </form>
   );
 }

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

@@ -0,0 +1,10 @@
+/** A setting that applies at once, with a hint under its text — `hint`. */
+import { Switch } from "prime-ui-kit";
+
+export default function SwitchOverviewExample() {
+  return (
+    <Switch.Root defaultChecked hint="Каждую ночь в 03:00 по Москве">
+      <Switch.Label>Резервное копирование</Switch.Label>
+    </Switch.Root>
+  );
+}

package/src/components/switch/examples/settings-row.tsx

@@ -1,32 +1,24 @@
-/** A settings row with text on the left and the track on the right, named via aria-labelledby and aria-describedby. Use it in settings lists. */
+/** A settings row with text on the left and a bare track on the right — `aria-labelledby`, `aria-describedby`. */
 import { Switch, Typography } from "prime-ui-kit";
-import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function SwitchSettingsRowExample() {
-  const id = React.useId();
-
   return (
-    <div className={styles.column}>
-      <div className={styles.row}>
-        <div className={styles.rowText}>
-          <Typography.Root id={`${id}-title`} variant="title-s">
-            Двухфакторная защита
-          </Typography.Root>
-          <Typography.Root id={`${id}-description`} variant="body-s" tone="secondary">
-            Код из приложения при каждом входе.
-          </Typography.Root>
-        </div>
-        <Switch.Root
-          className={styles.rowControl}
-          defaultChecked
-          aria-labelledby={`${id}-title`}
-          aria-describedby={`${id}-description`}
-        >
-          <Switch.Label />
-        </Switch.Root>
+    <div className={styles.row}>
+      <div className={styles.rowText}>
+        <Typography id="two-factor-title" variant="title-s">
+          Двухфакторная защита
+        </Typography>
+        <Typography id="two-factor-description" variant="body-s" tone="secondary">
+          Код из приложения при каждом входе
+        </Typography>
       </div>
+      <Switch.Root
+        defaultChecked
+        aria-labelledby="two-factor-title"
+        aria-describedby="two-factor-description"
+      />
     </div>
   );
 }

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

@@ -1,21 +1,16 @@
-/** All five size tiers of an enabled switch side by side (track 24×16 to 44×24). Use it to pick the tier that matches the neighbouring controls. */
-import { Switch, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Every size, track 24×16 to 44×24; the text follows the control tier — `size`. */
+import { Switch } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function SwitchSizesExample() {
   return (
-    <div className={styles.sizesRow}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.cell}>
+        <div key={size}>
           <Switch.Root size={size} defaultChecked>
-            <Switch.Label>Уведомления</Switch.Label>
+            <Switch.Label>{size}</Switch.Label>
           </Switch.Root>
-          <Typography.Root variant="caption" tone="muted">
-            {size}
-          </Typography.Root>
         </div>
       ))}
     </div>