prime-ui-kit 0.7.13 → 0.9.1

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

@@ -0,0 +1,72 @@
+/** Company details form: required fields checked on submit, neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. */
+import { Button, Input, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Errors = { name?: string; inn?: string };
+
+function validate(form: FormData): Errors {
+  const errors: Errors = {};
+  if (!String(form.get("name") ?? "").trim()) errors.name = "Укажите название организации";
+  if (!/^\d{10}$/.test(String(form.get("inn") ?? ""))) errors.inn = "ИНН состоит из 10 цифр";
+  return errors;
+}
+
+export default function InputInFormExample() {
+  const [errors, setErrors] = React.useState<Errors>({});
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setErrors(validate(new FormData(event.currentTarget)));
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <div className={styles.formHeader}>
+        <Typography as="h3" variant="title-m">
+          Реквизиты компании
+        </Typography>
+        <Typography as="p" variant="body-s" tone="secondary">
+          Используются в счетах и закрывающих документах.
+        </Typography>
+      </div>
+      <div className={styles.formFields}>
+        <div className={styles.formWide}>
+          <Input.Root label="Название организации" required error={errors.name}>
+            <Input.Wrapper>
+              <Input.Field
+                name="name"
+                defaultValue="ООО «Северный ветер»"
+                autoComplete="organization"
+              />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+        <Input.Root label="ИНН" required error={errors.inn} reserveSupportRow>
+          <Input.Wrapper>
+            <Input.Field name="inn" defaultValue="78123" inputMode="numeric" />
+          </Input.Wrapper>
+        </Input.Root>
+        <Input.Root label="КПП" optional reserveSupportRow>
+          <Input.Wrapper>
+            <Input.Field name="kpp" placeholder="9 цифр" inputMode="numeric" />
+          </Input.Wrapper>
+        </Input.Root>
+        <div className={styles.formWide}>
+          <Input.Root label="Почта для счетов" hint="Сюда придут счета и акты">
+            <Input.Wrapper>
+              <Input.Field name="email" type="email" placeholder="buh@company.ru" />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div className={styles.formActions}>
+        <Button.Root variant="ghost" tone="neutral" type="reset" onClick={() => setErrors({})}>
+          Отменить
+        </Button.Root>
+        <Button.Root type="submit">Сохранить</Button.Root>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,12 @@
+/** A labelled field with a hint under it — `label`, `hint`. */
+import { Input } from "prime-ui-kit";
+
+export default function InputOverviewExample() {
+  return (
+    <Input.Root label="Рабочая почта" hint="Пришлём ссылку для входа">
+      <Input.Wrapper>
+        <Input.Field type="email" name="email" placeholder="name@company.ru" autoComplete="email" />
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

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

@@ -0,0 +1,18 @@
+/** Every size tier; the label and the hint follow the field tier — `size`. */
+import { Input } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function InputSizesExample() {
+  return (
+    <>
+      {SIZES.map((size) => (
+        <Input.Root key={size} size={size} label={size} hint="Пришлём ссылку для входа">
+          <Input.Wrapper>
+            <Input.Field type="email" placeholder="name@company.ru" />
+          </Input.Wrapper>
+        </Input.Root>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+/** A default field next to a disabled and a read-only one — `disabled`, `readOnly`. */
+import { Icon, Input } from "prime-ui-kit";
+
+export default function InputStatesExample() {
+  return (
+    <>
+      <Input.Root label="default">
+        <Input.Wrapper>
+          <Input.Field placeholder="Например, Москва" />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root label="disabled">
+        <Input.Wrapper>
+          <Input.Field defaultValue="Екатеринбург" disabled />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root label="readOnly">
+        <Input.Wrapper>
+          <Input.Field defaultValue="ID 4821-0093" readOnly />
+          <Input.Icon side="end">
+            <Icon name="status.locked" tone="secondary" />
+          </Input.Icon>
+        </Input.Wrapper>
+      </Input.Root>
+    </>
+  );
+}

package/src/components/input/examples/validation.tsx

@@ -0,0 +1,35 @@
+/** Required and optional markers, a hint, an error and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. */
+import { Button, Input } from "prime-ui-kit";
+import * as React from "react";
+
+export default function InputValidationExample() {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <>
+      <Input.Root label="Название организации" required hint="Как в учредительных документах">
+        <Input.Wrapper>
+          <Input.Field defaultValue="ООО «Северный ветер»" autoComplete="organization" />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root label="ИНН" required error="ИНН состоит из 10 или 12 цифр">
+        <Input.Wrapper>
+          <Input.Field defaultValue="77010" inputMode="numeric" />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root
+        label="Промокод"
+        optional
+        reserveSupportRow
+        error={checked ? "Промокод недействителен или истёк" : undefined}
+      >
+        <Input.Wrapper>
+          <Input.Field defaultValue="SPRING25" />
+        </Input.Wrapper>
+      </Input.Root>
+      <Button.Root variant="soft" tone="neutral" onClick={() => setChecked((value) => !value)}>
+        {checked ? "Сбросить проверку" : "Проверить промокод"}
+      </Button.Root>
+    </>
+  );
+}

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

@@ -0,0 +1,25 @@
+/** A decorative icon at either end of the value — `Input.Icon`, `side`. */
+import { Icon, Input } from "prime-ui-kit";
+
+export default function InputWithIconExample() {
+  return (
+    <>
+      <Input.Root label="Поиск по каталогу">
+        <Input.Wrapper>
+          <Input.Icon side="start">
+            <Icon name="action.search" tone="secondary" />
+          </Input.Icon>
+          <Input.Field type="search" placeholder="Название или артикул" />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root label="Номер договора">
+        <Input.Wrapper>
+          <Input.Field defaultValue="Д-2026/0147" readOnly />
+          <Input.Icon side="end">
+            <Icon name="status.locked" tone="secondary" />
+          </Input.Icon>
+        </Input.Wrapper>
+      </Input.Root>
+    </>
+  );
+}

package/src/components/input/examples/without-focus-ring.tsx

@@ -0,0 +1,25 @@
+/** A single search field where the caret and the lighter fill show focus — `focusRing`. */
+import { Icon, Input } from "prime-ui-kit";
+import * as React from "react";
+
+export default function InputWithoutFocusRingExample() {
+  const [query, setQuery] = React.useState("");
+
+  return (
+    <Input.Root focusRing={false}>
+      <Input.Wrapper>
+        <Input.Icon side="start">
+          <Icon name="action.search" tone="secondary" />
+        </Input.Icon>
+        <Input.Field
+          type="search"
+          aria-label="Поиск по заказам"
+          placeholder="Поиск по заказам"
+          value={query}
+          onValueChange={setQuery}
+        />
+        {query ? <Input.ClearButton onClick={() => setQuery("")} /> : null}
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

package/src/components/kbd/COMPONENT.md

@@ -1,91 +1,99 @@
 # Kbd
 
-**Проектирование по умолчанию:** при проектировании экранов и примеров изначально выбирай **`m`** для `size` (где есть ось размера), если явно не оговорено иное.
+**Category:** data-display
+**Kind:** primitive
 
-## Canonical
+> A key cap for a keyboard key or a shortcut, rendered as a native `<kbd>`.
 
-`Kbd` — примитив из одной части: **`Kbd.Root`** рендерит семантический **`kbd`** с оформлением кита (поднятая поверхность, рамка, лёгкая тень). Только **отображение** подписи клавиши; события клавиатуры и фокус не обрабатывает.
+## When to use
+- Shortcut hints inside buttons, search fields and menu items («Найти ⌘K», «/»).
+- Hotkey reference lists in help panels or settings.
+- Keys mentioned in instructions.
 
-- **API:** `size?: "s" | "m" | "l" | "xl"`; без пропа размер берётся из ближайшего **`ControlSizeProvider`**, иначе **`"m"`**; на поверхности контрола **`xs`** маппится в **`s`** для `kbd`.
-- **Импорт:** `import { Kbd } from "prime-ui-kit"` → **`Kbd.Root`**.
+## When not to use
+- A status, category or counter → use [Badge](../badge/COMPONENT.md).
+- A clickable control → use [Button](../button/COMPONENT.md).
+- A block of code → use [CodeBlock](../code-block/COMPONENT.md).
 
+## Import
 ```tsx
 import { Kbd } from "prime-ui-kit";
-
-export function Example() {
-  return <Kbd.Root>Esc</Kbd.Root>;
-}
 ```
 
-Секция Kbd в плейграунде (`playground/sections/KbdSection.tsx`) рендерит сниппеты из **`playground/snippets/kbd/*.tsx`**. Файлы в **`examples/`** с пометкой parity повторяют те же сценарии с импортом **`"prime-ui-kit"`** для копирования в приложение. Остальные примеры — продуктовые сценарии. Подробности — в **Extended**.
-
-## Extended
-
-### About
-
-`Kbd.Root` помечает имена клавиш и фрагменты шорткатов как UI-хром, а не как основной текст абзаца.
-
-- **When to use** — горячие клавиши у пунктов меню, действий тулбара, подписей в [Command menu](../command-menu/COMPONENT.md).
-- **When to use** — одна или несколько клавиш во вспомогательном тексте, подсказках полей, футерах модалок, где шорткат — часть инструкции.
-- **When to use** — согласовать **`size`** с соседними контролами ([Input](../input/COMPONENT.md), [Button](../button/COMPONENT.md)), чтобы вложенные иконки и кегль совпадали с рядом стоящими контролами.
-- **When not to use** — как единственный интерактивный элемент; нужна настоящая [Button](../button/COMPONENT.md), [Link button](../link-button/COMPONENT.md) или другой фокусируемый target.
-- **When not to use** — для зеркалирования или перехвата реального ввода с клавиатуры; компонент только показывает подпись.
-- **When not to use** — в длинной документации, где обычный текст или моноширинный шрифт читабельнее «чипов» клавиш.
-
-### Examples (`examples/`)
-
-| Файл | Сценарий |
-|------|----------|
-| [`examples/sizes-ladder.tsx`](examples/sizes-ladder.tsx) | Ряд **`Kbd.Root`** с **`size`** `s`–`xl` (`snippets/kbd/sizes.tsx`). |
-| [`examples/states-title.tsx`](examples/states-title.tsx) | Без отдельных пропов состояния; **`title`** для нативной подсказки (`snippets/kbd/states.tsx`). |
-| [`examples/composition-chord-icon.tsx`](examples/composition-chord-icon.tsx) | Аккорд **`⌘` + `K`** и ряд с **`Icon`** внутри одного **`Kbd.Root`** (`snippets/kbd/composition.tsx`). |
-| [`examples/context-inherit-size.tsx`](examples/context-inherit-size.tsx) | Размер без пропа из **`ControlSizeProvider`**, **`xs`→`s`**, явный **`size`** перекрывает контекст (`snippets/kbd/inherit-size.tsx`). |
-| [`examples/shortcut-row.tsx`](examples/shortcut-row.tsx) | Строка списка/меню: подпись действия и шорткат справа. |
-| [`examples/docs-legend.tsx`](examples/docs-legend.tsx) | Легенда в документации: сетка «действие → комбинация». |
-| [`examples/toolbar-hints.tsx`](examples/toolbar-hints.tsx) | Тулбар: кнопка и рядом компактная подсказка-клавиши. |
-| [`examples/combination-keys.tsx`](examples/combination-keys.tsx) | Аккорд: несколько **`Kbd.Root`** и разделители вне ключей. |
-| [`examples/inline-doc-hint.tsx`](examples/inline-doc-hint.tsx) | Встроенная в абзац подсказка с **`Kbd`** в потоке текста. |
-
-### Composition
-
-- **`Kbd`** экспортирует только **`Root`** — плоский API; внутрь передаётся подпись (текст, иконки, смешанный **`ReactNode`**).
-- **`Root`** выставляет **`data-size`**, оборачивает **`children`** в **`ControlSizeProvider`**, чтобы вложенные **`Icon`** наследовали контекст размера контрола.
-
-### Rules
-
-- **Sizing:** см. Canonical; явный **`size`** перекрывает контекст.
-- **Presentation only:** нет обработки клавиш, фокуса и состояния ОС.
-- **Semantics:** полиморфизма **`asChild`** нет — корень всегда **`kbd`**.
-- **Accessibility:** для аккордов — несколько **`Kbd.Root`**; **`+`** / «или» выносить **вне** ключей или помечать **`aria-hidden`**, чтобы скринридер не зачитывал их как часть каждой клавиши. Для пояснения — **`title`** или видимый текст; смысл не только цветом.
-- **Platform copy:** **⌘** vs **Ctrl** и т.п. — решение продукта/i18n, кит не нормализует.
-- **Styling:** один встроенный вид; расширение через **`className`** / стили проекта, отдельного **`variant`** нет.
+## Anatomy
+```
+Kbd              <kbd>; one key, its badge tier, children (text, Icon or both)
+```
 
 ## API
 
-### Kbd.Root
-
-| Prop | Type | Default | Required | Description |
-|------|------|---------|----------|-------------|
-| size | `KbdSize` (`"s" \| "m" \| "l" \| "xl"`) | from context or `"m"` | No | Номинальный размер; без пропа — из `ControlSizeProvider` или `"m"`; контекст `xs` → `s` на `kbd`. |
-| children | `React.ReactNode` | — | Yes | Подпись клавиши, иконки или смешанный контент. |
-| className | `string` | — | No | Дополнительный класс на `kbd`. |
-| …rest | `Omit<React.HTMLAttributes<HTMLElement>, "size">` | — | No | Нативные атрибуты (`title`, `hidden`, `aria-*`, `data-*`, …). |
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Kbd
+`ref` → `HTMLElement`. A native `<kbd>`: one key per `Kbd`; passes its tier to a nested `Icon`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | — | Badge tier, 16 · 20 · 24 · 28 · 32 px high. Without it the key follows the surrounding control one tier down (m → s); outside a control it is `m`. |
+| `children` | `ReactNode` | — | Key label, an `Icon`, or an icon and text. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "size">` | — | `className`, `title`, `aria-label` and the other `<kbd>` attributes. |
+
+## Variants
+Kbd has one look: monospace text in `text-secondary` on a translucent `fill-subtle-active` wash, no border, weight 500. No `variant`, `tone` or `color`.
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` | 16px high, text 12, icon 12 | inside `xs` / `s` controls, dense menus | |
+| `s` | 20px high, text 12, icon 12 | inside `m` controls (inherited automatically) | |
+| `m` | 24px high, text 12, icon 14 | standalone keys in lists and text | yes (outside controls) |
+| `l` | 28px high, text 13, icon 16 | larger help panels | |
+| `xl` | 32px high, text 14, icon 16 | onboarding hints | |
+| — (omitted) | one tier below the surrounding control: `xs`/`s` → `xs`, `m` → `s`, `l` → `m`, `xl` → `l` | inside Button, Input, menu items | yes (inside controls) |
+
+Minimum width equals the height, so single-character keys are square.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| static | — | no hover, focus, disabled or loading |
+| size | `size`, else the surrounding control, else `m` | `data-size` (nominal), `data-tier` (visual tier, drives every dimension) |
+
+## Layout & spacing
+- Inline-flex, centered content, never shrinks, `vertical-align: middle`.
+- Keys of one chord: `gap: var(--prime-space-1)`; an optional «+» between them is `aria-hidden`.
+- In a hotkey list: action left, keys right (`justify-content: space-between`), rows `gap: var(--prime-space-3)`.
+- In a field, put the key in `Input.InlineAffix side="end"`.
+
+## Accessibility
+
+### Keyboard
+No keyboard interaction.
+
+### ARIA
+- Renders a native `<kbd>`; its text is read as is.
+- Symbol keys (⌘ ⌥ ⇧ ↵) need `aria-label` and `title` («Command», «Shift»).
+- A visual «+» between keys gets `aria-hidden="true"`.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+No `labels`.
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A shortcut as one key per `Kbd`; symbol keys get a name — `aria-label`, `title`. |
+| [sizes.tsx](examples/sizes.tsx) | Every badge tier, 16 to 32 px high — `size`. |
+| [in-controls.tsx](examples/in-controls.tsx) | Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. |
+| [shortcut-list.tsx](examples/shortcut-list.tsx) | A hotkey reference: action on the left, its keys on the right, an icon inside a key. |
+
+## Mistakes
+- `<Kbd>⌘ + Shift + P</Kbd>` → one `Kbd` per key with an `aria-hidden` «+» between.
+- `<Kbd>⌘</Kbd>` without a name → add `aria-label="Command"`.
+- An explicit `size="m"` inside an `m` button → drop `size`; the key follows the button one tier down.
+- A `<span>` styled as a key, or a `Badge` used for a key → use `Kbd`.
 
 ## Related
-
-- [Button](../button/COMPONENT.md) — действие, на которое часто ссылается шорткат.
-- [Link button](../link-button/COMPONENT.md) — текстовые действия с подсказкой клавиши рядом.
-- [Input](../input/COMPONENT.md) — поля, где в `hint` или у подписи уместен `Kbd`.
-- [Textarea](../textarea/COMPONENT.md) — многострочные поля с тем же паттерном подсказок.
-- [Select](../select/COMPONENT.md) — триггеры и списки с документированием шорткатов.
-- [Tooltip](../tooltip/COMPONENT.md) — развёрнутые пояснения с повтором клавиш через `Kbd`.
-- [Command menu](../command-menu/COMPONENT.md) — списки с пер-элементными шорткатами.
-
-## LLM note
-
-- Публичный API: **`Kbd.Root`** только; импорт **`{ Kbd } from "prime-ui-kit"`**.
-- Нет **`variant`**, **`disabled`**, **`asChild`**; для подсказок используй нативные атрибуты (**`title`**, **`aria-*`**).
-- Аккорд: **не** клади строку `"⌘+K"` в один **`Kbd.Root`**, если нужна семантика «отдельные клавиши» — делай **`Kbd.Root` на каждую клавишу**, плюс **`span aria-hidden`** между ними для **`+`**.
-- Размер без пропа: **`useOptionalControlSize`** → **`controlSurfaceToInputSize`**; **`xs`** контекста → эффективный **`s`** на компоненте.
-- Не подменяй кнопку или ссылку одним **`Kbd`**; не ожидай событий клавиатуры от этого компонента.
-- Сценарии копирования: **`playground/snippets/kbd/*.tsx`** (демо) и зеркала в **`src/components/kbd/examples/*.tsx`** (импорт **`"prime-ui-kit"`**); parity-файлы названы в таблице выше.
+- **Built from:** —
+- **See also:** [Badge](../badge/COMPONENT.md) (same tiers), [CommandMenu](../command-menu/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md)

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

@@ -0,0 +1,37 @@
+/* Layout of the Kbd scenarios: semantic tokens only. */
+
+/* Keys of one chord: tighter than a control gap. */
+.chord {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-space-1);
+}
+
+/* in-controls.tsx: two buttons and a search field. */
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prime-space-3);
+  width: min(100%, var(--prime-modal-width-s));
+}
+
+/* shortcut-list.tsx: action left, keys right. */
+.list {
+  display: grid;
+  gap: var(--prime-space-3);
+  width: min(100%, var(--prime-modal-width-s));
+  margin: 0;
+}
+
+.listRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+}
+
+.listRow dd {
+  margin: 0;
+}

package/src/components/kbd/examples/in-controls.tsx

@@ -0,0 +1,34 @@
+/** Inside a button or a field the key takes the tier one step down; an explicit `size` overrides it. */
+import { Button, Input, Kbd } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function KbdInControlsExample() {
+  return (
+    <div className={styles.controls}>
+      <Button.Root variant="outline" tone="neutral">
+        Найти
+        <span className={styles.chord}>
+          <Kbd aria-label="Command" title="Command">
+            ⌘
+          </Kbd>
+          <Kbd>K</Kbd>
+        </span>
+      </Button.Root>
+      <Button.Root tone="neutral">
+        Отправить
+        <Kbd size="xs" aria-label="Enter" title="Enter">
+          ↵
+        </Kbd>
+      </Button.Root>
+      <Input.Root>
+        <Input.Wrapper>
+          <Input.Field type="search" placeholder="Поиск по документам" aria-label="Поиск" />
+          <Input.InlineAffix side="end">
+            <Kbd>/</Kbd>
+          </Input.InlineAffix>
+        </Input.Wrapper>
+      </Input.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+/** A shortcut as one key per `Kbd`; symbol keys get a name — `aria-label`, `title`. */
+import { Kbd, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function KbdOverviewExample() {
+  return (
+    <span className={styles.chord}>
+      <Kbd aria-label="Command" title="Command">
+        ⌘
+      </Kbd>
+      <Typography as="span" variant="body-m" tone="muted" aria-hidden="true">
+        +
+      </Typography>
+      <Kbd aria-label="Shift" title="Shift">
+        ⇧
+      </Kbd>
+      <Typography as="span" variant="body-m" tone="muted" aria-hidden="true">
+        +
+      </Typography>
+      <Kbd>P</Kbd>
+    </span>
+  );
+}

package/src/components/kbd/examples/shortcut-list.tsx

@@ -0,0 +1,49 @@
+/** A hotkey reference: action on the left, its keys on the right, an icon inside a key. */
+import { Icon, Kbd, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Accessible names for symbol keys. */
+const KEY_NAMES: Partial<Record<string, string>> = { "⌘": "Command" };
+
+const SHORTCUTS = [
+  { action: "Открыть палитру команд", keys: ["⌘", "K"] },
+  { action: "Сохранить черновик", keys: ["⌘", "S"] },
+  { action: "Перейти к поиску", keys: ["/"] },
+] as const;
+
+export default function KbdShortcutListExample() {
+  return (
+    <dl className={styles.list}>
+      {SHORTCUTS.map((item) => (
+        <div key={item.action} className={styles.listRow}>
+          <dt>
+            <Typography as="span" variant="body-m">
+              {item.action}
+            </Typography>
+          </dt>
+          <dd className={styles.chord}>
+            {item.keys.map((key) => (
+              <Kbd key={key} aria-label={KEY_NAMES[key]} title={KEY_NAMES[key]}>
+                {key}
+              </Kbd>
+            ))}
+          </dd>
+        </div>
+      ))}
+      <div className={styles.listRow}>
+        <dt>
+          <Typography as="span" variant="body-m">
+            Закрыть окно
+          </Typography>
+        </dt>
+        <dd className={styles.chord}>
+          <Kbd>
+            <Icon name="action.close" />
+            Esc
+          </Kbd>
+        </dd>
+      </div>
+    </dl>
+  );
+}

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

@@ -0,0 +1,19 @@
+/** Every badge tier, 16 to 32 px high — `size`. */
+import { Kbd, Typography } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function KbdSizesExample() {
+  return (
+    <div>
+      {SIZES.map((size) => (
+        <div key={size}>
+          <Kbd size={size}>Ctrl</Kbd>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}