@sberbusiness/triplex-next-mcp-server 0.24.0-beta1

package/bundle/components/FormGroup.md

@@ -0,0 +1,99 @@
+---
+component: FormGroup
+category: Forms
+figma-node: ""
+figma-file: ""
+related: [FormField, TextField, SelectField, HelpBox, Alert]
+tokens: []
+stories: ""
+version: "1.0"
+---
+
+# FormGroup
+
+## Назначение
+
+Разметочная обёртка-`<div>` для группировки элементов формы (`FormField`,
+`HelpBox`, `Alert`, `Description`). Сама по себе **не добавляет стилей** —
+только прокидывает `ref` и все `HTMLDivAttributes`. Смысл — именованная
+точка в DOM для data-атрибутов и семантики формы.
+
+Используй когда: нужно сгруппировать несколько полей логически (блок "контакты",
+"адрес") и иметь стабильный wrapper под `data-*`/`aria-*`.
+Не используй как: общий flex-контейнер — возьми `Row`/`Col`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/FormGroup/
+├── FormGroup.tsx   # forwardRef, <div>, passthrough props
+└── index.ts        # export * from "./FormGroup"
+```
+
+Нет styles, нет tests, нет stories. Демонстрируется опосредованно через
+stories типовых полей, где `FormGroup` иногда обёрнут вокруг формы.
+
+---
+
+## Варианты и props
+
+### `IFormGroupProps extends React.HTMLAttributes<HTMLDivElement>`
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `children` | `ReactNode` | Обычно несколько `FormField`/`Alert`/`HelpBox`. |
+| `className`, `style`, `...HTMLDivAttributes` | — | Стандартные. |
+
+Интерфейс объявлен **локально, не экспортирован**. Если понадобится
+расширить props — сначала экспортировать интерфейс.
+
+---
+
+## Инварианты
+
+- **`forwardRef`** — есть, не убирать.
+- **Без собственных классов/стилей** — осознанно. Если добавить flex/padding,
+  сломается большинство существующих интеграций, где вёрстку задают потомки.
+- Все атрибуты прокидываются на корневой `<div>` через spread — включая
+  `className`/`style`. Потребитель сам задаёт лейаут.
+
+---
+
+## Accessibility
+
+- `<div>` без ARIA-роли. Если группа полей должна объявляться как
+  `role="group"`/`role="radiogroup"` — потребитель передаёт `role` и
+  `aria-labelledby`/`aria-label` через `...rest`.
+- Fieldset-семантика (`<fieldset>` + `<legend>`) не используется;
+  FormGroup не пытается её эмулировать.
+
+---
+
+## Дизайн-токены
+
+Нет.
+
+---
+
+## Связанные компоненты
+
+- `FormField` — основной контент внутри FormGroup.
+- `HelpBox`, `Alert` — вспомогательные элементы формы.
+- `Row`, `Col`, `Gap` — предпочтительны, если нужен layout, а не именованная группа.
+
+---
+
+## Stories
+
+Нет собственных stories. Используется в примерах `TextField`, `SelectField`,
+`SelectExtendedField`, `FormField`.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/Gap.md

@@ -0,0 +1,113 @@
+---
+component: Gap
+category: Layout
+figma-node: ""
+figma-file: ""
+related: [Row, Col, Divider]
+tokens: []
+stories: stories/Gap/Gap.stories.tsx
+version: "1.0"
+---
+
+# Gap
+
+## Назначение
+
+Вертикальный разделитель-пустота: пустой `<div>` фиксированной высоты для
+отступа между блоками по вертикали. Принципиально ограничен дискретным
+набором размеров из дизайн-системы.
+
+Используй когда: нужен вертикальный spacer, а переиспользовать margin/padding
+родителя неудобно (например, между двумя независимыми секциями).
+Не используй когда: можешь задать отступ через `gap` flex-контейнера или
+margin соседа — это семантически предпочтительнее.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Gap/
+├── Gap.tsx     # forwardRef, <div role="presentation">, height из size
+├── index.ts    # Barrel
+└── __tests__/Gap.test.tsx
+```
+
+---
+
+## Варианты и props
+
+### `IGapProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">`
+
+| Prop | Тип | Обязателен | Описание |
+|---|---|---|---|
+| `size` | `TGapSize` | Да | Высота в пикселях. **Разрешённые значения строго**: `4 \| 8 \| 12 \| 16 \| 24 \| 32 \| 64 \| 128`. |
+| `className`, `style`, `...HTMLDivAttributes` | — | — | `style.height` перезаписывается через `${size}px`. |
+
+`children` специально исключён — Gap это пустой разделитель.
+
+---
+
+## Ключевые особенности реализации
+
+Реализация — одна строка JSX:
+```tsx
+<div style={{ height: `${size}px`, ...style }} role="presentation" {...restProps} ref={ref} />
+```
+
+- `role="presentation"` — скринридер игнорирует элемент.
+- `style={{ height, ...style }}` — позволяет перекрыть `height` через props, но порядок такой, что `style` из props идёт **после** и может затереть высоту. Это поведение сохранить (намеренная свобода для кастомных кейсов).
+- Нет собственного `className`/стилей — только inline height.
+
+---
+
+## Инварианты
+
+- **`TGapSize` union** — публичный API. Добавлять новые значения можно, существующие
+  (4/8/12/16/24/32/64/128) удалять нельзя (breaking change).
+- **`forwardRef`** — не убирать.
+- **`role="presentation"`** — не менять без причины (a11y-контракт: spacer не объявляется).
+- **Вертикальный (`height`) только**. Для горизонтального spacing используй `gap`
+  flex-контейнера или `Col`. Не добавляй prop `direction`, пока не появится явный запрос.
+- **Без `children`** — тип `Omit<..., "children">` запрещает передачу через TS.
+
+---
+
+## Accessibility
+
+- `role="presentation"` — элемент скрыт от скринридеров.
+- Tab-навигация через Gap не проходит (нет фокусируемых детей).
+
+---
+
+## Дизайн-токены
+
+Нет. Размеры заданы литералами в `TGapSize` — это часть контракта, а не CSS-токены.
+
+---
+
+## Связанные компоненты
+
+- `Row` / `Col` — обычно предпочтительнее, если есть полноценный flex-layout.
+- `Divider` — визуальный разделитель (с линией), а не пустой отступ.
+
+---
+
+## Stories
+
+`stories/Gap/Gap.stories.tsx`
+Примеры: `stories/Gap/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | — | Интерактивный выбор `size`. |
+| `Default` | `DefaultExample.tsx` | Базовое использование. |
+| `Sizes` | `SizesExample.tsx` | Все значения `TGapSize`. |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/Header.md

@@ -0,0 +1,280 @@
+---
+component: Header
+category: Layout
+figma-node: ""
+figma-file: ""
+related: [Page, Footer, Tabs, Button]
+tokens: []
+stories: stories/Page/HeaderPage.stories.tsx
+version: "1.0"
+---
+
+# Header
+
+## Назначение
+
+Разметочный заголовок страницы/контейнера. **Compound с тремя уровнями
+композиции:** `Header.Title` (заголовок + действия), `Header.Tabs` (вкладки +
+действия) и `Header.Subhead` (произвольный подзаголовок). Плюс отдельный
+layout-слот `Header.LayoutSidebar` для размещения контента рядом с сайдбаром.
+
+Используй когда: нужен типовой верхний блок страницы с заголовком, табами
+и действиями (паттерн "Title + Controls" + "Tabs + Controls" + Subheader).
+Корневой `Header` не задаёт стилей — только прокидывает `data-tx` на корневой
+`<div>`; вся вёрстка приходит от уровней.
+
+Не используй как: универсальный `<header>`-тег. Потребитель сам решает,
+оборачивать ли во внешний semantic-элемент.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Header/
+├── Header.tsx                        # Корень compound, Object.assign уровней
+├── index.ts                          # Barrel: Header + все под-компоненты
+├── components/
+│   ├── HeaderTitle/
+│   │   ├── HeaderTitle.tsx           # Object.assign → Content/Controls
+│   │   ├── HeaderTitleContent.tsx
+│   │   └── HeaderTitleControls.tsx
+│   ├── HeaderTabs/
+│   │   ├── HeaderTabs.tsx            # Object.assign → Content/Controls
+│   │   ├── HeaderTabsContent.tsx
+│   │   └── HeaderTabsControls.tsx
+│   ├── HeaderSubheader/
+│   │   └── HeaderSubheader.tsx       # withoutPaddings prop
+│   └── HeaderLayoutSidebar/
+│       ├── HeaderLayoutSidebar.tsx   # Object.assign → Content/Sidebar
+│       ├── HeaderLayoutSidebarContent.tsx
+│       └── HeaderLayoutSidebarSidebar.tsx
+└── styles/
+    ├── HeaderTitle.module.less
+    ├── HeaderTabs.module.less
+    ├── HeaderSubheader.module.less
+    └── HeaderLayoutSidebar.module.less
+```
+
+Нет собственных `__tests__` в репозитории (проверяется через visual tests
+Page/Header). Нет собственных stories — демонстрация в `stories/Page/HeaderPage.stories.tsx`.
+
+Экспорт в `Page`: `Page.Header` = этот же `Header`.
+
+---
+
+## Compound-структура
+
+```tsx
+<Header>
+    <Header.Title>
+        <Header.Title.Content>Название страницы</Header.Title.Content>
+        <Header.Title.Controls>
+            <Button>Действие</Button>
+        </Header.Title.Controls>
+    </Header.Title>
+
+    <Header.Tabs>
+        <Header.Tabs.Content>
+            <TabsLine ... />
+        </Header.Tabs.Content>
+        <Header.Tabs.Controls>
+            <Button>Кнопка у табов</Button>
+        </Header.Tabs.Controls>
+    </Header.Tabs>
+
+    <Header.Subhead>Любой произвольный контент</Header.Subhead>
+</Header>
+```
+
+**Альтернативный layout с сайдбаром:**
+
+```tsx
+<Header>
+    <Header.LayoutSidebar>
+        <Header.LayoutSidebar.Content>
+            <Header.Title>...</Header.Title>
+            <Header.Tabs>...</Header.Tabs>
+        </Header.LayoutSidebar.Content>
+        <Header.LayoutSidebar.Sidebar>
+            {/* десктоп-only сайдбар */}
+        </Header.LayoutSidebar.Sidebar>
+    </Header.LayoutSidebar>
+</Header>
+```
+
+Все компоненты compound'а также **экспортируются напрямую через barrel**
+(`HeaderTitle`, `HeaderTabs`, `HeaderSubheader`, `HeaderLayoutSidebar` и их
+под-компоненты). Обычно предпочтительна запись через точку (`Header.Title.Content`).
+
+---
+
+## Варианты и props
+
+### Header — `IHeaderProps extends HTMLAttributes<HTMLDivElement>`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Обычно `Header.Title`/`Tabs`/`Subhead` или `Header.LayoutSidebar`. |
+| `className`, `style`, `...HTMLDivAttributes` | — | — | Стандартные. |
+
+Корневой `Header` — "прозрачный" `<div>` с `data-tx`. Без собственных CSS-классов.
+
+### Header.Title — `IHeaderTitleProps extends HTMLAttributes<HTMLDivElement>`
+
+`.headerTitle`: `display: flex; justify-content: space-between;`
+
+### Header.Title.Content — `IHeaderTitleContentProps`
+
+Имеет два класса: `.headerTitleContent` (локальный) и `.global-HeaderTitleContent`
+(глобальный селектор `min-width: 0` для корректного переноса контента внутри flex).
+
+### Header.Title.Controls — `IHeaderTitleControlsProps`
+
+`.headerTitleControls`: `flex-shrink: 0; white-space: nowrap; padding-left: 24px;`
++ `.global-HeaderTitleControls { min-width: 0; }`
+
+### Header.Tabs / Tabs.Content / Tabs.Controls
+
+Симметрично Title: flex space-between, Content растягивается (`flex-grow: 1`),
+Controls — фикс. Аналогичный mobile wrap.
+
+### Header.Subhead — `IHeaderSubheaderProps`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `withoutPaddings` | `boolean` | `false` | Убирает `padding: 24px 0`. |
+
+### Header.LayoutSidebar / .Content / .Sidebar
+
+`.headerLayoutSidebar`: `display: flex; justify-content: space-between;`.
+`Content` — `flex-grow: 1; min-width: 1px`. **`Sidebar` на mobile (`max-width: @screen-sm-max`) скрывается** (`display: none`).
+
+---
+
+## Ключевые особенности реализации
+
+### Mobile wrap (Title и Tabs)
+
+```less
+@media (max-width: @screen-sm-max) {
+    .headerTitle { flex-wrap: wrap; }
+    .headerTitleContent { width: 100%; }
+    .headerTitleControls {
+        padding-left: 0;
+        white-space: normal;
+        flex-shrink: initial;
+        margin-left: -16px;                 // компенсация Button margin
+        > button, > [class*="buttonDropdown"] {
+            margin-left: 16px;
+            margin-top: 16px;
+        }
+    }
+}
+```
+
+Controls переносится на новую строку, отступы между кнопками задаются
+через `margin: 16px` на `<button>` + компенсация `-16px` на контейнере.
+Этот же паттерн использован в `Footer`. Не менять без обновления Button'а.
+
+### Глобальные классы `global-HeaderTitleContent` / `global-HeaderTitleControls`
+
+```less
+.global-HeaderTitleContent { min-width: 0; }
+.global-HeaderTitleControls { min-width: 0; }
+```
+
+Необходимы, чтобы внутренние flex-дети корректно сжимались. Имена с
+префиксом `global-` — это CSS-Modules escape hatch, класс не переименовывается
+при компиляции. Используется для того, чтобы **потребитель мог
+перекрыть стили через глобальный селектор**. Не удалять.
+
+### `.headerLink + .headerTitle { padding-top: 0 }` — orphan-селектор
+
+Селектор присутствует в `HeaderTitle.module.less`, но класс `headerLink`
+в самом компоненте не используется. Legacy, затачивался под кейс, где
+над Title стоит ссылка "назад". Если встретится — удалять только после
+поиска потребителей.
+
+### Sidebar скрыт на mobile
+
+`HeaderLayoutSidebarSidebar` на `max-width: @screen-sm-max` получает
+`display: none`. Это осознанное решение (сайдбар редко влезает на мобиле).
+Потребителю нужно учитывать это при дублировании контента сайдбара в
+`HeaderSubhead` для mobile.
+
+### Все компоненты — `forwardRef`
+
+Включая уровни. Ref идёт на корневой `<div>` каждого слоя.
+
+---
+
+## Инварианты
+
+- **Corневой `Header` минимален**: `<div>` + `data-tx`, без стилей. Не
+  добавлять padding — это сломает существующие интеграции, где padding
+  задаётся Page/Subhead.
+- **Compound через `Object.assign`** — `Header.Title.Content`,
+  `Header.Tabs.Controls`, `Header.LayoutSidebar.Sidebar`. Не заменять на children-API.
+- **Barrel `index.ts`** экспортирует все под-компоненты отдельно. Не удалять
+  прямые экспорты (`HeaderTitleContent` и т.д.) — ими пользуются потребители.
+- **Имена `global-HeaderTitle*`** — CSS-Modules escape hatch. Не переименовывать.
+- **Mobile wrap стили** ожидают `<button>` с `margin: 16px`. Не менять
+  селекторы `> button` и компенсацию `-16px` без согласования с Button.
+- **Sidebar `display: none` на mobile** — контракт с потребителем. Нельзя
+  автоматически дублировать контент сайдбара; решение оставлено за консьюмером.
+- **`forwardRef`** на всех уровнях.
+
+---
+
+## Accessibility
+
+- Все уровни — `<div>` без ARIA-ролей. **Нет автосемантики `<header>`**;
+  потребитель сам оборачивает или передаёт `role="banner"` на корневой Header.
+- `HeaderTitleContent` не рендерит `<h1>`/`<h2>` — потребитель передаёт
+  нужный заголовок внутрь. Это осознанно: уровень заголовка зависит от контекста.
+- `HeaderTabsContent` обычно содержит `TabsLine`/`Tabs` — они сами управляют ARIA.
+- Tab-навигация — через интерактивные потомки (Buttons/Tabs). Сам Header не focusable.
+
+---
+
+## Дизайн-токены
+
+Нет собственных. Все цвета/тени приходят от дочерних компонентов
+(`Button`, `TabsLine`, `Typography`).
+
+---
+
+## Связанные компоненты
+
+- `Page` — типовой контейнер страницы, экспортирует `Page.Header` = этот `Header`.
+- `Footer` — парный элемент, такая же mobile wrap-логика в `Controls`.
+- `TabsLine` / `Tabs` — типичный контент `HeaderTabsContent`.
+- `Button` / `ButtonDropdown` — ожидаемые дети `Controls` (mobile стили
+  рассчитаны на их margin).
+- `DocumentNumberEdit` — используется в `Header.Title.Content` для кейсов с
+  редактируемым номером документа.
+
+---
+
+## Stories
+
+**Нет собственных stories.** Демонстрация через
+`stories/Page/HeaderPage.stories.tsx` (регистрируется как
+`Components/HeaderPage`):
+
+- `Basic` — базовое использование.
+- `TypeSecond` — альтернативная раскладка.
+- `WithLinkInTitle` — ссылка "назад" над заголовком.
+- `DocumentNumberEdit` — редактируемый номер документа в Title.
+- `WithTabsAndControls` — Title + Tabs + Controls.
+- `WithSubheader` — с Subhead.
+- `LayoutWithSidebar` — `HeaderLayoutSidebar`.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/HelpBox.md

@@ -0,0 +1,154 @@
+---
+component: HelpBox
+category: HelpBox
+figma-node: ""
+figma-file: ""
+related: [Tooltip, ButtonIcon, MobileView, FocusTrap]
+tokens: []
+stories: stories/HelpBox/HelpBox.stories.tsx
+version: "1.0"
+---
+
+# HelpBox
+
+## Назначение
+
+Иконка "?" (`QuestioncircleFilledSrvIcon16`) с всплывающей подсказкой (Tooltip).
+Объединяет ButtonIcon-триггер, Tooltip и FocusTrap в одном компоненте.
+
+Используй когда: нужна контекстная подсказка рядом с элементом интерфейса.
+Не используй когда: нужен полноценный попап с формой или сложным контентом — используй Dropdown или Modal.
+
+---
+
+## Файловая структура
+
+```text
+src/components/HelpBox/
+├── HelpBox.tsx                   # Основной компонент
+├── index.ts                      # Barrel export
+├── styles/
+│   └── HelpBox.module.less       # Минимальные стили (position, vertical-align)
+└── __tests__/
+    └── HelpBox.test.tsx          # Unit-тесты
+```
+
+---
+
+## Варианты и props
+
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `tooltipSize` | `ETooltipSize` | Размер тултипа: `SM` или `LG` |
+| `children` | `React.ReactNode` | Контент тела подсказки |
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `isOpen` | `boolean` | `undefined` | Управляемое состояние открытия тултипа |
+| `toggle` | `(open: boolean) => void` | — | Callback при открытии/закрытии |
+| `onShow` | `(node: HTMLDivElement) => void` | — | Callback при появлении тултипа в DOM |
+| `preferPlace` | `ETooltipPreferPlace` | — | Предпочтительное расположение: `ABOVE`, `BELOW`, `LEFT`, `RIGHT` |
+| `mobileHeaderContent` | `React.ReactNode` | — | Контент заголовка в мобильной версии тултипа |
+| `focusTrapProps` | `FocusTrapProps` | — | Свойства `focus-trap-react` для ловушки фокуса |
+| `tooltipAriaAttributes` | `TAriaHTMLAttributes` | — | Aria-атрибуты, пробрасываемые в Tooltip-контейнер |
+| `tooltipDataAttributes` | `TDataHTMLAttributes` | — | Data-атрибуты, пробрасываемые в Tooltip-контейнер |
+| `iconProps` | `ISingleColorIconProps` | — | Свойства иконки вопроса (например, `paletteIndex`) |
+| `tooltipXButtonProps` | `ITooltipXButtonProps` | — | Свойства кнопки закрытия Tooltip (включая `aria-label`) |
+| `className` | `string` | — | CSS-класс, пробрасывается на кнопку-триггер |
+| `...rest` | `React.HTMLAttributes<HTMLButtonElement>` | — | Все стандартные атрибуты `<button>`, включая `aria-label`, пробрасываются на кнопку-триггер |
+
+### Controlled / Uncontrolled
+
+- **Uncontrolled** (по умолчанию): `isOpen` не передан — компонент сам управляет `openState`.
+- **Controlled**: передай `isOpen` + `toggle` — компонент не меняет внутреннее состояние.
+
+---
+
+## Ключевые особенности реализации
+
+### Композиция внутренних компонентов
+
+HelpBox — обёртка над несколькими внутренними компонентами:
+- `ButtonIcon` (shape=CIRCLE) — кнопка-триггер с иконкой `QuestioncircleFilledSrvIcon16`
+- `Tooltip` (toggleType="hover", role="dialog") — всплывающая подсказка
+- `FocusTrap` (только desktop, через `MobileView`) — ловушка фокуса при открытом тултипе
+- `TooltipMobileHeader` — заголовок мобильной версии (рендерится только при наличии `mobileHeaderContent`)
+
+### FocusTrap
+
+Ловушка фокуса активируется только на desktop (через `MobileView` fallback). При открытии:
+- `initialFocus` — элемент Tooltip (по ID)
+- `clickOutsideDeactivates: true` — клик за пределами закрывает
+- `preventScroll: true`
+
+Потребитель может расширить настройки через `focusTrapProps.focusTrapOptions`.
+
+### Ref forwarding
+
+`forwardRef` пробрасывает ref на внутренний `ButtonIcon` (кнопку-триггер). Внутренний `buttonRef` используется для позиционирования Tooltip через `targetRef`.
+
+---
+
+## Accessibility
+
+- Кнопка-триггер — нативный `<button>` через `ButtonIcon`, shape `CIRCLE`.
+- **`aria-label` триггера** — не захардкожен. Потребитель **обязан** передать `aria-label` через `...rest` (например, `aria-label="Подсказка"`). Библиотека мультиязычная, текст не хардкодится.
+- **`aria-label` кнопки закрытия** — передаётся через `tooltipXButtonProps={{ "aria-label": "Закрыть" }}`. Потребитель **обязан** указать значение на своём языке.
+- Tooltip открывается с `role="dialog"`, `tabIndex={-1}`.
+- FocusTrap удерживает фокус внутри открытого тултипа на desktop.
+- `tooltipAriaAttributes` позволяет добавить aria-атрибуты к контейнеру Tooltip.
+
+---
+
+## Дизайн-токены
+
+Компонент не использует собственных CSS-переменных. Все визуальные стили наследуются от `ButtonIcon` и `Tooltip`.
+
+---
+
+## Инварианты
+
+- **`forwardRef`** — обязателен, не убирать.
+- **`IHelpBoxProps` интерфейс** — экспортируемый, часть публичного API.
+- **`tooltipSize` prop** — обязательный, не делать optional.
+- **Barrel export в `index.ts`** — не удалять.
+- **`toggleType="hover"`** — Tooltip реагирует на наведение, не менять без согласования.
+
+---
+
+## Связанные компоненты
+
+- `Tooltip` (`src/components/Tooltip/`) — всплывающая подсказка, основной визуальный элемент
+- `ButtonIcon` (`src/components/Button/ButtonIcon.tsx`) — кнопка-триггер
+- `MobileView` (`src/components/MobileView/`) — переключение desktop/mobile поведения
+- `FocusTrap` (npm: `focus-trap-react`) — ловушка фокуса для desktop
+
+---
+
+## Stories
+
+`stories/HelpBox/HelpBox.stories.tsx`
+Файлы примеров: `stories/HelpBox/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | — | Интерактивный контроль всех props (inline в `*.stories.tsx`) |
+| `Default` | `DefaultExample.tsx` | Минимальное использование |
+| `Sizes` | `SizesExample.tsx` | Размеры тултипа SM / LG |
+| `Placement` | `PlacementExample.tsx` | Расположение: above, below, left, right |
+| `WithMobileHeader` | `WithMobileHeaderExample.tsx` | Мобильный заголовок |
+| `Controlled` | `ControlledExample.tsx` | Управляемое состояние (isOpen + toggle) |
+| `ChangeIconProps` | `ChangeIconPropsExample.tsx` | Кастомизация иконки через iconProps |
+| `VisualTests` | — | Скриншот-тест с открытым тултипом (inline в `*.stories.tsx`) |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-08 | Создан документ. Добавлен `forwardRef`. |