prime-ui-kit 0.0.1

package/src/components/digit-input/examples/otp-login.tsx

@@ -0,0 +1,17 @@
+import { DigitInput, Hint, Label } from "prime-ui-kit";
+import * as React from "react";
+
+/** SMS / OTP: шесть ячеек, контролируемое значение, подсказка про вставку из буфера. */
+export default function OtpLoginExample() {
+  const [code, setCode] = React.useState("");
+
+  return (
+    <>
+      <Label.Root>Код из SMS</Label.Root>
+      <DigitInput.Root length={6} value={code} onChange={setCode} />
+      <Hint.Root variant="default">
+        Вставьте код из сообщения — цифры заполнят ячейки с текущей позиции.
+      </Hint.Root>
+    </>
+  );
+}

package/src/components/digit-input/examples/pin.tsx

@@ -0,0 +1,11 @@
+import { DigitInput, Label } from "prime-ui-kit";
+
+/** PIN: четыре цифры, увеличенный размер ячеек для удобного ввода на тач-экране. */
+export default function PinExample() {
+  return (
+    <>
+      <Label.Root size="l">PIN-код</Label.Root>
+      <DigitInput.Root length={4} size="l" />
+    </>
+  );
+}

package/src/components/digit-input/examples/resend-and-clear.tsx

@@ -0,0 +1,17 @@
+import { Button, DigitInput, Label } from "prime-ui-kit";
+import * as React from "react";
+
+/** Повторная отправка кода: сброс поля через родительское состояние. */
+export default function ResendAndClearExample() {
+  const [code, setCode] = React.useState("");
+
+  return (
+    <>
+      <Label.Root>Код</Label.Root>
+      <DigitInput.Root length={4} value={code} onChange={setCode} />
+      <Button.Root mode="stroke" type="button" variant="neutral" onClick={() => setCode("")}>
+        Отправить снова
+      </Button.Root>
+    </>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { DigitInput } from "prime-ui-kit";
+
+/**
+ * Четыре размера ячеек: `size` s, m, l, xl — те же токены контролов, что у поля ввода.
+ * Паритет с `playground/snippets/digit-input/sizes.tsx`.
+ */
+export default function DigitInputSizesExample() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        alignItems: "center",
+      }}
+    >
+      <DigitInput.Root size="s" length={4} defaultValue="1234" />
+      <DigitInput.Root size="m" length={4} defaultValue="1234" />
+      <DigitInput.Root size="l" length={4} defaultValue="1234" />
+      <DigitInput.Root size="xl" length={4} defaultValue="1234" />
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { DigitInput } from "prime-ui-kit";
+
+/**
+ * Обычное поле, визуальная ошибка (`hasError`) и отключённый ввод (`disabled`).
+ * Паритет с `playground/snippets/digit-input/states.tsx`.
+ */
+export default function DigitInputStatesExample() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--prime-sys-spacing-m)",
+        alignItems: "center",
+      }}
+    >
+      <DigitInput.Root length={4} defaultValue="42" />
+      <DigitInput.Root length={4} defaultValue="12" hasError />
+      <DigitInput.Root length={4} defaultValue="99" disabled />
+    </div>
+  );
+}

package/src/components/digit-input/examples/verification-step.tsx

@@ -0,0 +1,21 @@
+import { Button, DigitInput, Hint, Label } from "prime-ui-kit";
+import * as React from "react";
+
+/** Шаг подтверждения: кнопка «Продолжить» активна только после ввода полного кода. */
+export default function VerificationStepExample() {
+  const [code, setCode] = React.useState("");
+  const isComplete = code.length === 6;
+
+  return (
+    <>
+      <Label.Root>Код из письма</Label.Root>
+      <DigitInput.Root length={6} value={code} onChange={setCode} />
+      <Button.Root disabled={!isComplete} type="button" variant="primary">
+        Продолжить
+      </Button.Root>
+      <Hint.Root variant="default">
+        Введите шестизначный код со страницы подтверждения email.
+      </Hint.Root>
+    </>
+  );
+}

package/src/components/divider/COMPONENT.md

@@ -0,0 +1,102 @@
+# Divider
+
+## Canonical
+
+- **What:** `Divider.Root` draws a horizontal or vertical separator (pseudo-element lines) with optional **children** (label, icon + text). Nested controls inherit **`size`** via **`ControlSizeProvider`**.
+- **Defaults:** `orientation="horizontal"`, `variant="default"`, `size="m"`. **`align`** defaults to **`start`** for **`variant="text"`**, otherwise **`center`**.
+- **Import:** `import { Divider } from "prime-ui-kit"`.
+
+```tsx
+import { Divider } from "prime-ui-kit";
+
+export function Example() {
+  return <Divider.Root />;
+}
+```
+
+## Extended
+
+### About
+
+`Divider` is a non-interactive visual separator: a line built from `::before` / `::after`, optionally wrapping a label or icon. **`Icon`** inside **`children`** does not use its own size classes — glyph size follows **`--prime-divider-icon`** from the root **`data-size`**.
+
+**When to use**
+
+- Separate blocks in a form, card, or settings column without an extra bordered panel.
+- Full-width rows in a list-like shell (`examples/list-separators.tsx`).
+- Section-style labels inline with the line (`variant="text"`) — see `examples/section-breaks.tsx`.
+- Between flex children in a column when rhythm comes from the parent **`gap`** (`variant="line-spacing"`) — see `examples/line-spacing-column.tsx`.
+- A vertical bar between toolbar actions (`orientation="vertical"`); parent row should **`align-items: stretch`** so the line gets height.
+
+**When not to use**
+
+- As the only semantic boundary for document structure — use real headings / **`section`** (and **`hr`** when a thematic break is appropriate).
+- For switchable or collapsible grouping — use [Tabs](../tabs/COMPONENT.md) or [Accordion](../accordion/COMPONENT.md).
+- **`orientation="vertical"`** in a row with no definite height — the vertical line needs stretch from the parent.
+- Purely decorative repetition next to text that already states structure — hide from AT (**`role="presentation"`**, **`aria-hidden`**) per **Rules**.
+
+### Composition
+
+- Single public part: **`Divider.Root`** — optional **`children`** render in an inner **`span`** (**`styles.content`**).
+- Place **`Divider.Root`** in document order where the break should appear; no required child structure beyond optional slot content.
+
+### Examples (source)
+
+| Scenario | File |
+|----------|------|
+| Section breaks (`variant="text"`) | [`examples/section-breaks.tsx`](examples/section-breaks.tsx) |
+| Splits inside one card | [`examples/card-splits.tsx`](examples/card-splits.tsx) |
+| List row separators | [`examples/list-separators.tsx`](examples/list-separators.tsx) |
+| Inset copy in a stack, full-bleed rules | [`examples/inset-stack.tsx`](examples/inset-stack.tsx) |
+| `line-spacing` + vertical toolbar | [`examples/line-spacing-column.tsx`](examples/line-spacing-column.tsx) |
+
+Shared layout tokens for the examples: [`examples/divider-examples.module.css`](examples/divider-examples.module.css).
+
+Playground snippets (same demos as `playground/sections/DividerSection.tsx`):
+
+- **`variants.tsx`** — empty horizontal line; **`default`** with centered label; **`variant="text"`**; **`line-spacing`** between rows in a column; **`orientation="vertical"`** between toolbar-style buttons; full-width line between list rows (**`size="s"`**).
+- **`sizes.tsx`** — **`variant="text"`** at **`size`** **`s`**, **`m`**, and **`xl`** (three steps to compare label scale and spacing).
+- **`composition.tsx`** — **`Icon`** + label inside **`variant="text"`** **`size="m"`**; second divider at **`size="xl"`** with icon + label.
+
+### Rules
+
+- **Non-interactive:** no disabled/loading/focus states; behavior is plain **`div`** semantics unless you set **`role`** / **`aria-*`**.
+- **`variant="default"`** — full-width line; optional centered label unless **`align`** overrides.
+- **`variant="text"`** — uppercase section label styling; **`align`** defaults to **`start`**.
+- **`variant="line-spacing"`** — **`flex: 0 0 auto`** so it does not act as a flex grow spacer; spacing is the parent’s **`gap`**.
+- **Semantics:** default **`role="separator"`**; for **`orientation="vertical"`**, **`aria-orientation="vertical"`** is set automatically.
+- **Decoration:** redundant lines → **`role="presentation"`** (or **`none`**) and **`aria-hidden`** (see list example).
+- **Sizing:** match adjacent controls with the same **`size`** prop; do not patch stroke width with ad hoc pixels.
+
+### API
+
+#### Divider.Root
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| orientation | `"horizontal"` \| `"vertical"` | `"horizontal"` | No | Line direction. |
+| align | `"start"` \| `"center"` \| `"end"` | `center` for `default` / `line-spacing`; `start` for `text` | No | Balance of `::before` / `::after` stubs around content. |
+| variant | `"default"` \| `"line-spacing"` \| `"text"` | `"default"` | No | Visual mode and flex participation. |
+| size | `"s"` \| `"m"` \| `"l"` \| `"xl"` | `"m"` | No | Gap, label type, icon scale, **`ControlSizeProvider`** value. |
+| children | `React.ReactNode` | — | No | Label, icon + text, or omit for a solid line. |
+| className | `string` | — | No | Extra class on the root. |
+| role | `string` | `"separator"` | No | Override for decorative separators. |
+| …rest | `React.HTMLAttributes<HTMLDivElement>` | — | No | `aria-*`, `data-*`, etc. |
+
+### Related
+
+- [Typography](../typography/COMPONENT.md)
+- [Button](../button/COMPONENT.md)
+- [Link button](../link-button/COMPONENT.md)
+- [Tabs](../tabs/COMPONENT.md)
+- [Accordion](../accordion/COMPONENT.md)
+
+## LLM note
+
+- One export shape: **`Divider.Root`** only; no subcomponents.
+- **`variant` × `align` defaults:** `text` → **`align` `start`**; else **`center`** (explicit **`align`** always wins).
+- **`line-spacing`:** use only when the parent flex column uses **`gap`** for vertical rhythm; divider must not be relied on for layout height.
+- **Vertical:** requires ancestor **`align-items: stretch`** (or explicit height) so `::before`/`::after` flex segments fill the row.
+- **Children:** toggles inner **`span`** and **`ControlSizeProvider`**; **`Icon`** ignores its own **`size`** when inside divider content.
+- **a11y:** default **`separator`** is announced; for decorative list lines between items, mirror **`examples/list-separators.tsx`**: **`ul`/`li`**, separator **`li`** with **`aria-hidden`**, **`Divider.Root`** with **`role="presentation"`**.
+- **Playground alignment:** `variants.tsx` is one frame (empty line, `default` label, `text`, `line-spacing` column, vertical toolbar, list-row separator); `sizes.tsx` is `text` at **s / m / xl**; `composition.tsx` is icon + text at **m** and **xl**.

package/src/components/divider/examples/card-splits.tsx

@@ -0,0 +1,27 @@
+import { Divider } from "prime-ui-kit";
+
+import s from "./divider-examples.module.css";
+
+/** Inside one card: horizontal rules separate header, body, and a summary footer without extra bordered panels. */
+export default function DividerCardSplitsExample() {
+  return (
+    <section className={s.card}>
+      <div className={s.stack}>
+        <div>
+          <h3 className={s.subheading}>Order summary</h3>
+          <p className={s.muted}>Ships in 2–3 business days</p>
+        </div>
+
+        <Divider.Root />
+
+        <p className={s.body}>
+          Subtotal, shipping, and tax are estimated until checkout. You can edit the cart before
+          paying.
+        </p>
+
+        <Divider.Root>Total</Divider.Root>
+        <p className={s.body}>$128.00 USD</p>
+      </div>
+    </section>
+  );
+}

package/src/components/divider/examples/divider-examples.module.css

@@ -0,0 +1,137 @@
+/* Layout shells for COMPONENT.md examples — semantic tokens only */
+
+.shell {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: min(100%, 26.25rem);
+}
+
+.card {
+  composes: shell;
+  padding: var(--prime-sys-spacing-x4);
+  border: 1px solid var(--prime-sys-color-border-subtle);
+  border-radius: var(--prime-sys-shape-radius-l);
+  background-color: var(--prime-sys-color-surface-default);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x3);
+}
+
+.stackLoose {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x4);
+}
+
+.heading {
+  margin: 0;
+  font-size: var(--prime-sys-typography-sizeScale-l);
+  font-weight: var(--prime-sys-typography-weight-semibold);
+}
+
+.subheading {
+  margin: 0;
+  font-size: var(--prime-sys-typography-sizeScale-m);
+  font-weight: var(--prime-sys-typography-weight-semibold);
+}
+
+.body {
+  margin: 0;
+  font-size: var(--prime-sys-typography-sizeScale-s);
+  color: var(--prime-sys-color-content-secondary);
+  line-height: var(--prime-sys-typography-lineHeightScale-s);
+}
+
+.muted {
+  margin: 0;
+  font-size: var(--prime-sys-typography-sizeScale-xs);
+  color: var(--prime-sys-color-content-muted);
+}
+
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--prime-sys-color-border-subtle);
+  border-radius: var(--prime-sys-shape-radius-m);
+  overflow: hidden;
+  background-color: var(--prime-sys-color-surface-raised);
+}
+
+.listRow {
+  padding: var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4);
+  font-size: var(--prime-sys-typography-sizeScale-s);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.listSep {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.insetBody {
+  margin: 0;
+  padding-left: var(--prime-sys-spacing-x4);
+  font-size: var(--prime-sys-typography-sizeScale-s);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.rowWithIcon {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--prime-sys-spacing-x3);
+}
+
+.iconStub {
+  flex-shrink: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: var(--prime-sys-shape-radius-m);
+  background-color: var(--prime-sys-color-surface-accentSoft);
+}
+
+.rowMain {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-xs);
+}
+
+.rowTitle {
+  margin: 0;
+  font-size: var(--prime-sys-typography-sizeScale-s);
+  font-weight: var(--prime-sys-typography-weight-medium);
+}
+
+.rowDesc {
+  margin: 0;
+  font-size: var(--prime-sys-typography-sizeScale-xs);
+  color: var(--prime-sys-color-content-muted);
+}
+
+.toolbar {
+  display: flex;
+  align-items: stretch;
+  gap: var(--prime-sys-spacing-x2);
+  min-height: 2.5rem;
+  padding: 0 var(--prime-sys-spacing-x3);
+  border: 1px solid var(--prime-sys-color-border-subtle);
+  border-radius: var(--prime-sys-shape-radius-m);
+  background-color: var(--prime-sys-color-surface-raised);
+  width: fit-content;
+}
+
+.toolbarBtn {
+  align-self: center;
+  padding: var(--prime-sys-spacing-xs) var(--prime-sys-spacing-m);
+  border: none;
+  background: transparent;
+  font-size: var(--prime-sys-typography-sizeScale-s);
+  font-weight: var(--prime-sys-typography-weight-medium);
+  cursor: pointer;
+}

package/src/components/divider/examples/inset-stack.tsx

@@ -0,0 +1,33 @@
+import { Divider } from "prime-ui-kit";
+
+import s from "./divider-examples.module.css";
+
+/**
+ * Stack with a leading icon column: copy is inset in the text column while dividers span the full card width,
+ * matching common settings / list layouts.
+ */
+export default function DividerInsetStackExample() {
+  return (
+    <section className={s.card}>
+      <div className={s.stack}>
+        <div className={s.rowWithIcon}>
+          <span className={s.iconStub} aria-hidden />
+          <div className={s.rowMain}>
+            <p className={s.rowTitle}>Workspace</p>
+            <p className={s.rowDesc}>Renaming affects the sidebar and shared links.</p>
+          </div>
+        </div>
+
+        <Divider.Root />
+
+        <div className={s.rowWithIcon}>
+          <span className={s.iconStub} aria-hidden />
+          <div className={s.rowMain}>
+            <p className={s.rowTitle}>Billing</p>
+            <p className={s.insetBody}>Payment method and invoices (inset body copy).</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/divider/examples/line-spacing-column.tsx

@@ -0,0 +1,27 @@
+import { Divider } from "prime-ui-kit";
+
+import s from "./divider-examples.module.css";
+
+/**
+ * `variant="line-spacing"` between flex children: vertical rhythm comes from the parent `gap`, not from the
+ * divider stretching as a spacer.
+ */
+export default function DividerLineSpacingColumnExample() {
+  return (
+    <div className={`${s.shell} ${s.stack}`}>
+      <p className={s.body}>First block in a column with gap-driven spacing.</p>
+      <Divider.Root variant="line-spacing" />
+      <p className={s.body}>Second block — the divider is only a marker between siblings.</p>
+      <Divider.Root variant="line-spacing" />
+      <div className={s.toolbar}>
+        <button className={s.toolbarBtn} type="button">
+          One
+        </button>
+        <Divider.Root orientation="vertical" />
+        <button className={s.toolbarBtn} type="button">
+          Two
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/divider/examples/list-separators.tsx

@@ -0,0 +1,20 @@
+import { Divider } from "prime-ui-kit";
+
+import s from "./divider-examples.module.css";
+
+/** Full-width horizontal dividers between rows inside a bordered list shell. */
+export default function DividerListSeparatorsExample() {
+  return (
+    <ul className={s.list}>
+      <li className={s.listRow}>Inbox</li>
+      <li className={s.listSep} aria-hidden>
+        <Divider.Root size="s" role="presentation" />
+      </li>
+      <li className={s.listRow}>Sent</li>
+      <li className={s.listSep} aria-hidden>
+        <Divider.Root size="s" role="presentation" />
+      </li>
+      <li className={s.listRow}>Archive</li>
+    </ul>
+  );
+}

package/src/components/divider/examples/section-breaks.tsx

@@ -0,0 +1,23 @@
+import { Divider } from "prime-ui-kit";
+
+import s from "./divider-examples.module.css";
+
+/** Section rhythm: `variant="text"` labels blocks; pair with real headings where structure matters for a11y. */
+export default function DividerSectionBreaksExample() {
+  return (
+    <article className={s.card}>
+      <div className={s.stackLoose}>
+        <header>
+          <h2 className={s.heading}>Account</h2>
+          <p className={s.muted}>Profile and security</p>
+        </header>
+
+        <Divider.Root variant="text">General</Divider.Root>
+        <p className={s.body}>Name, email, and language preferences apply across all workspaces.</p>
+
+        <Divider.Root variant="text">Notifications</Divider.Root>
+        <p className={s.body}>Choose channels for product updates and billing alerts.</p>
+      </div>
+    </article>
+  );
+}

package/src/components/drawer/COMPONENT.md

@@ -0,0 +1,130 @@
+# Drawer
+
+## About
+
+`Drawer` — модальная боковая панель поверх страницы.
+
+Что делает компонент при `open=true`:
+- рендерится в `Portal`;
+- блокирует скролл страницы;
+- закрывается по `Escape`;
+- закрывается по клику на overlay;
+- показывает шапку (иконка, заголовок, подзаголовок), scroll-body и опциональный footer;
+- воспроизводит анимации `slide-in` / `slide-out`.
+
+Используйте `Drawer` для вторичных сценариев: фильтры, быстрые формы, детали сущности, action-панели.
+
+## Breaking Change
+
+Старый compound API удалён полностью.
+
+Удалены:
+- `Drawer.Root`
+- `Drawer.Trigger`
+- `Drawer.Portal`
+- `Drawer.Overlay`
+- `Drawer.Content`
+- `Drawer.Body`
+- `Drawer.Header`
+- `Drawer.Title`
+- `Drawer.Footer`
+- `Drawer.Close`
+
+Новый API: один компонент `Drawer`.
+
+## Minimal Example
+
+```tsx
+import * as React from "react";
+import { Button, Drawer } from "prime-ui-kit";
+
+export function DrawerMinimal() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root type="button" onClick={() => setOpen(true)}>
+        Open drawer
+      </Button.Root>
+
+      <Drawer
+        open={open}
+        onOpenChange={setOpen}
+        title="Edit workspace"
+        description="Update settings and save changes"
+        footer={
+          <>
+            <Button.Root variant="neutral" mode="stroke" onClick={() => setOpen(false)}>
+              Cancel
+            </Button.Root>
+            <Button.Root variant="primary" onClick={() => setOpen(false)}>
+              Save
+            </Button.Root>
+          </>
+        }
+      >
+        <p>Body content</p>
+      </Drawer>
+    </>
+  );
+}
+```
+
+## API
+
+### Drawer
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `open` | `boolean` | — | Yes | Контролируемое состояние открытия. |
+| `onOpenChange` | `(open: boolean) => void` | — | Yes | Вызывается при закрытии/открытии (Esc, overlay, крестик, внешние действия). |
+| `title` | `React.ReactNode` | — | Yes | Заголовок в шапке. |
+| `description` | `React.ReactNode` | — | No | Подзаголовок в шапке. |
+| `icon` | `React.ReactNode` | — | No | Иконка слева в шапке. |
+| `children` | `React.ReactNode` | — | Yes | Контент body внутри `ScrollContainer`. |
+| `footer` | `React.ReactNode` | — | No | Контент футера (обычно кнопки `Cancel` / `Save`). |
+| `side` | `'left' \| 'right'` | `'right'` | No | Сторона выезда панели. |
+| `className` | `string` | — | No | Дополнительный класс панели. |
+| `overlayClassName` | `string` | — | No | Дополнительный класс overlay. |
+
+## Rules
+
+- Компонент только контролируемый: состояние хранится в родителе (`open`, `onOpenChange`).
+- `side` поддерживает только `left` и `right`.
+- Шапка всегда содержит кнопку закрытия (крестик) справа.
+- Footer опционален: если `footer` не передан, нижняя зона не рендерится.
+- Для доступности `aria-labelledby`/`aria-describedby` формируются автоматически из `title`/`description`.
+
+## Playground snippets
+
+Source of truth: `playground/snippets/drawer/*.tsx`.
+
+| File | Intent |
+|------|--------|
+| `controlled.tsx` | Базовый контролируемый сценарий `open` / `onOpenChange`. |
+| `composition.tsx` | Форма в body + действия в footer. |
+| `variants-sides.tsx` | Сравнение `side='left'` и `side='right'`. |
+| `states.tsx` | Варианты с footer и без footer. |
+| `full-width.tsx` | Вертикальный стек `fullWidth` кнопок в footer. |
+| `responsive.tsx` | Поведение ширины панели (`min(28rem, 90vw)`). |
+| `trigger-link.tsx` | Открытие из `LinkButton` через внешний `setOpen(true)`. |
+| `features.tsx` | Длинный scroll-body и шапка с иконкой/description. |
+| `sizes.tsx` | Паттерны расположения и действий для левой/правой панели. |
+
+## Examples (`examples/`)
+
+| File | Intent |
+|------|--------|
+| `examples/filters-panel.tsx` | Левая панель фильтров с действиями Apply/Reset. |
+| `examples/cart-preview.tsx` | Правая панель корзины с checkout-действиями. |
+| `examples/settings-side.tsx` | Правая панель настроек формы. |
+| `examples/mobile-nav-sheet.tsx` | Навигационные действия с закрытием по клику на пункт. |
+| `examples/explicit-panel.tsx` | Канонический сценарий новой шапки/body/footer. |
+
+## Related
+
+- [Button](../button/COMPONENT.md)
+- [Link button](../link-button/COMPONENT.md)
+- [Modal](../modal/COMPONENT.md)
+- [Input](../input/COMPONENT.md)
+- [Checkbox](../checkbox/COMPONENT.md)