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

package/bundle/components/MobileView.md

@@ -0,0 +1,120 @@
+---
+component: MobileView
+category: Utilities
+figma-node: ""
+figma-file: ""
+related: [MediaWidth]
+tokens: []
+stories: ""
+version: "1.0"
+---
+
+# MobileView
+
+## Назначение
+
+Удобная обёртка над `MediaWidth maxWidth={SM_MAX}` — рендерит `children`
+на мобиле (< 768px), иначе `fallback`. Фактически **именованный пресет**
+для частого use-case'а mobile-vs-desktop.
+
+Используй когда: нужно рендерить разные React-деревья для mobile/desktop.
+Для стилей — CSS `@media` напрямую. Для более гибких границ —
+`MediaWidth`/`MediaMinWidth`/`MediaMaxWidth`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/MobileView/
+├── MobileView.tsx    # FC, 3 строки — обёртка над MediaWidth
+└── index.ts          # Barrel
+```
+
+Нет стилей, тестов, stories.
+
+---
+
+## Варианты и props
+
+### `IMobileViewProps`
+
+| Prop | Тип | Обязателен | Описание |
+|---|---|---|---|
+| `children` | `ReactElement \| null` | Да | Рендерится при ширине ≤ SM_MAX (767px). |
+| `fallback` | `ReactElement \| null` | Да | Рендерится в остальных случаях (desktop). |
+
+Обе props — обязательные. Следует контракту `MediaWidth`.
+
+---
+
+## Ключевые особенности реализации
+
+### Брейкпоинт — `EScreenWidth.SM_MAX`
+
+```tsx
+<MediaWidth maxWidth={EScreenWidth.SM_MAX} fallback={fallback}>
+    {children}
+</MediaWidth>
+```
+
+- `SM_MAX` обычно равен `767px` (проверь в `helpers/breakpoints`).
+- **Фиксированный брейкпоинт** — если нужен другой (например, планшеты), используй `MediaWidth` с явным `maxWidth`, а не оборачивай MobileView.
+
+### `children` на mobile, `fallback` на desktop
+
+Контракт отличается от "обычных" компонентов: **`children` — мобильное поведение**, а не базовое. При чтении кода это бывает контринтуитивно. Пример:
+
+```tsx
+<MobileView
+    fallback={<DesktopLayout />}
+>
+    <MobileLayout />
+</MobileView>
+```
+
+### Не SSR-safe через `useMatchMedia` (см. MediaWidth-AI)
+
+Поведение наследуется от `MediaWidth`: `window.innerWidth` читается при рендере.
+
+---
+
+## Инварианты
+
+- **Брейкпоинт `SM_MAX`** фиксирован — публичное поведение.
+- **`children` — mobile, `fallback` — desktop** — не менять семантику без миграции потребителей.
+- **Обе prop'ы обязательны** (`ReactElement | null`, не `ReactNode`, не optional).
+- **FC, не forwardRef** — ref не пробрасывается.
+
+---
+
+## Accessibility
+
+Тот же нюанс, что и `MediaWidth`: разные React-деревья → смена DOM на брейкпоинте. Для стилистических различий предпочитай CSS.
+
+---
+
+## Дизайн-токены
+
+Нет.
+
+---
+
+## Связанные компоненты
+
+- `MediaWidth` — общая абстракция (MobileView — её конкретизация).
+- `EScreenWidth.SM_MAX` — из `@sberbusiness/triplex-next/helpers/breakpoints`.
+
+---
+
+## Stories
+
+Нет.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/ModalWindow.md

@@ -0,0 +1,308 @@
+---
+component: ModalWindow
+category: Overlays
+figma-node: ""
+figma-file: ""
+related: [LightBox, Portal, Island, Page, TriggerClickOnKeyDownEvent, Button]
+tokens:
+  - --modalWindow-screen-left
+  - --modalWindow-screen-width
+  - --modalWindow-screen-top
+  - --modal-window-top
+stories: stories/ModalWindow/ModalWindow.stories.tsx
+version: "1.0"
+---
+
+# ModalWindow
+
+## Назначение
+
+Модальный диалог средних размеров — контент по центру экрана, backdrop-маска,
+focus-trap, Escape-close, анимированное появление/исчезновение (CSSTransition).
+Подкомпоненты: `Header` (на базе `HeaderPage`), `Body` (на базе `Island`),
+`Footer` (на базе `FooterPage`), `Content` (scroll-container с Page внутри),
+`Close` (Button с Escape-handler), и `ViewManager` (вычисляет CSS-переменные
+позиционирования).
+
+Используй когда: нужен стандартный диалог (подтверждение, мастер, форма).
+Для полноэкранного — `LightBox`. Для поповера — `Overlay`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/ModalWindow/
+├── ModalWindow.tsx                           # forwardRef, Portal + CSSTransition + FocusTrap
+├── index.ts                                  # Barrel всех подкомпонентов
+├── components/
+│   ├── ModalWindowHeader.tsx                 # Обёртка над HeaderPage type=FIRST, + .Title
+│   ├── ModalWindowBody.tsx                   # Обёртка над Island TYPE_1, MD
+│   ├── ModalWindowContent.tsx                # <div> + <Page> + optional LoaderScreen
+│   ├── ModalWindowFooter.tsx                 # Обёртка над FooterPage type=FIRST, + .Description
+│   ├── ModalWindowClose.tsx                  # Button + TriggerClickOnKeyDownEvent(ESCAPE)
+│   └── ModalWindowViewManager.tsx            # CSS-переменные --modalWindow-screen-*
+└── styles/*.module.less
+```
+
+---
+
+## Compound-структура
+
+```tsx
+<ModalWindow
+    isOpen={isOpen}
+    closeButton={<ModalWindow.Close onClick={onClose} />}
+    size={EComponentSize.MD}
+    onExited={onAnimationClose}
+>
+    <ModalWindow.Content isLoading={loading}>
+        <ModalWindow.Header>
+            <ModalWindow.Header.Title>Заголовок</ModalWindow.Header.Title>
+        </ModalWindow.Header>
+
+        <ModalWindow.Body>
+            Основной контент...
+        </ModalWindow.Body>
+
+        <ModalWindow.Footer>
+            <ModalWindow.Footer.Description>Подпись</ModalWindow.Footer.Description>
+            <Button>ОК</Button>
+        </ModalWindow.Footer>
+    </ModalWindow.Content>
+</ModalWindow>
+```
+
+**Важно:** сами подкомпоненты (`ModalWindowHeader`, `ModalWindowBody`,
+`ModalWindowContent`, `ModalWindowFooter`, `ModalWindowClose`) экспортируются
+из barrel, но **не навешаны** на `ModalWindow` через `Object.assign`. Нужно
+импортировать их **именованно**: `import { ModalWindow, ModalWindowHeader } from ...`.
+
+---
+
+## Варианты и props
+
+### ModalWindow — `IModalWindowProps extends HTMLAttributes<HTMLDivElement>`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `isOpen` | `boolean` | — (обязателен) | Управляемое состояние. |
+| `children` | `ReactElement` | — | Один корневой элемент (обычно `ModalWindowContent`). |
+| `closeButton` | `ReactNode` | — (обязателен) | Кнопка закрыть, вставляется рядом с `children`. Обычно `<ModalWindowClose onClick={onClose} />`. |
+| `focusTrapProps` | `FocusTrapProps` | — | Переопределение параметров `focus-trap-react`. |
+| `onExited` | `() => void` | — | Callback после завершения анимации закрытия. |
+| `size` | `EComponentSize` | `MD` | Размер модалки (ширина). |
+| `topPosition` | `number` | `100` | Отступ сверху в px. Пишется в CSS-переменную `--modal-window-top`. |
+| `containerClassName` | `string` | — | className внешнего контейнера (с backdrop'ом). |
+| `className`, `...HTMLDivAttributes` | — | — | Стандартные, идут на `div[role="dialog"]`. |
+
+### ModalWindowClose — `IModalWindowCloseProps extends Omit<IButtonSecondaryProps, "size" | "theme" | "icon">`
+
+- Кнопка с иконкой `CrossStrokeSrvIcon20` в правом-верхнем углу модалки.
+- **Автоматически триггерит клик по Escape** через `TriggerClickOnKeyDownEvent` (eventKeyCode=ESCAPE).
+- `size=MD` и `theme=SECONDARY` захардкожены — не переопределить.
+- **Title "Закрыть"** — хардкод русского, i18n-debt.
+
+### ModalWindowHeader — `IModalWindowHeaderProps extends Omit<IHeaderPageTypeFirstProps, "children" | "type">`
+
+- Обёртка над `<HeaderPage type={FIRST}>`.
+- Статический `.Title = HeaderPage.Title`.
+
+### ModalWindowBody — `IModalWindowBodyProps extends IIslandProps`
+
+- Обёртка над `<Island type={TYPE_1} size={MD}>` с дополнительным классом `modalWindowBody`.
+- **Хардкод TYPE_1/MD** — если нужен другой тип/размер Island, текущий API не позволяет.
+
+### ModalWindowContent — `IModalWindowContentProps extends HTMLAttributes<HTMLDivElement>`
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `isLoading` | `boolean` | Показывает `LoaderScreen type="middle"` над содержимым. |
+| `loadingTitle` | `ReactNode` | Подпись под спиннером. |
+
+Внутри — обёртывает `children` в `<Page>`. Scroll-контейнер.
+
+### ModalWindowFooter — `IModalWindowFooterProps extends Omit<IFooterPageTypeFirstProps, "children" | "type">`
+
+- Обёртка над `<FooterPage type={FIRST}>`.
+- Статический `.Description = FooterPage.Description`.
+
+### ModalWindowViewManager
+
+Рендерится автоматически внутри `ModalWindow`. Отдельно использовать не нужно (но экспортирован для nuance-сценариев).
+
+---
+
+## Ключевые особенности реализации
+
+### Два DOM-контейнера: `#ufs-modal-window-wrapper` + свой `portal-node`
+
+```ts
+let wrapperNode = document.querySelector<HTMLDivElement>(`#${modalNodeName}-wrapper`);
+if (!wrapperNode) { /* create & append to body */ }
+
+mountNode.current = document.createElement("div");
+mountNode.current.className = `${modalNodeName}-portal-node`;
+wrapperNode.appendChild(mountNode.current);
+```
+
+- **Каждая открытая ModalWindow создаёт свой `.portal-node`** внутри общего `#ufs-modal-window-wrapper`. Это позволяет держать несколько модалок параллельно (хотя обычно одна).
+- При закрытии portal-node удаляется, wrapper — остаётся (для повторного использования).
+- **ID wrapper'а `ufs-modal-window-wrapper`** — известная "точка привязки" для интеграции с Layout'ом (сббол).
+
+### Body-классы `modal-open` + `no-hash-overflow-hidden`
+
+```ts
+const bodyClassNameModalOpen = ["modal-open", "no-hash-overflow-hidden"];
+```
+
+- При открытии — **добавляются на `body`** (не на `documentElement`, в отличие от LightBox).
+- Класс `modal-open` — от внешнего Layout (сббол), блюрит фоновый контент.
+- Снимаются при закрытии/unmount.
+
+### Animation — `CSSTransition` + `appear` + `unmountOnExit`
+
+```tsx
+<CSSTransition
+    in={isOpen}
+    timeout={animationExitTime} // 300
+    classNames="global-modalWindowTransition"
+    appear enter exit
+    onEnter={handleOpenModal}       // добавить body-классы
+    onExited={handleCloseModal}     // удалить body-классы + unmount portal + onExited()
+    mountOnEnter
+    unmountOnExit
+>
+```
+
+- **classNames `global-modalWindowTransition`** — строка, не CSS-Modules. Соответствующие CSS-правила живут в глобальных стилях/index.less.
+- `appear` — чтобы `onEnter` сработал на самой первой анимации.
+- `unmountOnExit` — DOM-элемент удаляется после анимации, `renderPortal` сбрасывается в false.
+
+### `renderPortal` state и двойное монтирование
+
+```ts
+const [renderPortal, setRenderPortal] = useState(false);
+useEffect(() => { if (isOpen) { mountPortalNode(); setRenderPortal(true); } }, [isOpen]);
+```
+
+- До открытия `renderPortal=false` → ранний return `null` → Portal не рендерится.
+- При `isOpen=true` — создаётся mountNode (imperatively), ставится `renderPortal=true` — затем react рендерит Portal.
+- **На повторные открытия** — state остаётся true после закрытия (handleCloseModal сбрасывает в false), и при следующем `isOpen=true` — снова создаётся mountNode.
+
+### `topPosition` через CSS-переменную
+
+```tsx
+const topPositionStyle = { "--modal-window-top": `${topPosition}px` };
+```
+
+- Default 100px. Команды могут переопределять, передавая `topPosition`.
+- CSS-переменная именно `--modal-window-top` (kebab с дефисами), **не в naming-convention `--triplex-next-*`**. Это исторический паттерн, не переименовывать.
+
+### ModalWindowClose с Escape-handler
+
+```tsx
+<TriggerClickOnKeyDownEvent eventKeyCode={EVENT_KEY_CODES.ESCAPE} targetRef={ref}>
+    <Button ref={ref} icon={<CrossIcon />} ... />
+</TriggerClickOnKeyDownEvent>
+```
+
+- Escape нажатие → имитирует click на кнопку → `onClick` → закрытие.
+- Кнопка **обязательно должна быть в дереве** (не опциональна). Если `closeButton` не передан — TS ошибка (prop обязателен).
+
+### `ModalWindowViewManager` — CSS-переменные позиционирования
+
+Аналогично `LightBoxViewManager`: пишет в `:root` (именно в `:root`, а не на `lightBoxMountNode`):
+
+```css
+:root {
+    --modalWindow-screen-left: ...;
+    --modalWindow-screen-width: ...;
+    --modalWindow-screen-top: ...;
+}
+```
+
+- Default id `modalWindowViewManagerNodeId` создаётся в body. Используется для позиционирования относительно окна (если есть глобальный sidebar, Layout может переопределить эту node).
+- **Отличие от LightBox**: переменные в `:root` — глобальные; любая ModalWindow подстраивается.
+
+### `focus-trap-react` v11 (используется `FocusTrap` как default, не `.FocusTrap`)
+
+```ts
+import { FocusTrap, FocusTrapProps } from "focus-trap-react";
+```
+
+**Внимание**: старые версии использовали default-import. Не ломать.
+
+### ModalWindowBody хардкодит Island type=TYPE_1, size=MD
+
+```tsx
+<Island type={EIslandType.TYPE_1} size={EComponentSize.MD} {...islandProps}>
+```
+
+`...islandProps` идут **после** `type`/`size` — потребитель теоретически может переопределить через props. Но это не публичная часть API (not документированная). Не полагайся.
+
+---
+
+## Инварианты
+
+- **`isOpen` управляемый, `children` — один `ReactElement`, `closeButton` — обязателен** — публичный контракт.
+- **ID DOM-контейнеров: `ufs-modal-window-wrapper`, `modalWindowViewManagerNodeId`** — **интеграционные** точки с внешним Layout'ом. Не переименовывать.
+- **Body-классы `modal-open`, `no-hash-overflow-hidden`** — контракт с внешним Layout; изменение — регрессия фонового блюра.
+- **Escape → closeButton click** через `TriggerClickOnKeyDownEvent` — поведенческий контракт `ModalWindowClose`.
+- **CSS-переменная `--modal-window-top`** (kebab-case, не `--triplex-next-ModalWindow-Top`) — публичная, исторический naming.
+- **`CSSTransition classNames="global-modalWindowTransition"`** — строковый класс, нет в CSS-Modules. Стили в глобальном файле.
+- **`ModalWindowHeader/Footer` — обёртки над HeaderPage/FooterPage type=FIRST** — не поддерживают TYPE_2/TYPE_3.
+- **`ModalWindowBody` хардкодит Island TYPE_1/MD** — кастомизация через props не публична.
+- **`ModalWindow.Close` title="Закрыть" + `TriggerClickOnKeyDownEvent` eventKeyCode=ESCAPE** — i18n-debt (rus-hardcode).
+- **`forwardRef<HTMLDivElement>`** — корневая node (dialog), но **подкомпоненты не являются слотами через Object.assign**.
+- **ViewManager пишет в `:root`**, не в scoped-элемент — глобально влияет на любой ModalWindow.
+
+---
+
+## Accessibility
+
+- `role="dialog"` + `aria-modal="true"` — есть на корне.
+- `FocusTrap` активен пока `isOpen` — фокус удерживается внутри.
+- `allowOutsideClick: true` — outside click не ломает trap; закрытие делается **только через `closeButton`** или Escape.
+- **Нет `aria-labelledby`/`aria-describedby` по умолчанию** — потребитель должен добавить через `...rest` или передать `aria-label`.
+- `ModalWindowClose` — Button с `title="Закрыть"` (рус), tabIndex нормальный.
+- Escape обрабатывается через TriggerClickOnKeyDownEvent — глобально на window (см. `KeyDownListener-AI`).
+
+---
+
+## Дизайн-токены
+
+Runtime CSS-переменные:
+```
+--modalWindow-screen-left, --modalWindow-screen-width, --modalWindow-screen-top  — от ViewManager
+--modal-window-top                                                                — от topPosition prop
+```
+
+Визуал — от `Island` (внутри Body) и ThemeProvider scope (scopeClassName на контейнере).
+
+---
+
+## Связанные компоненты
+
+- `LightBox` — полноэкранный аналог.
+- `Portal` — используется для render'а.
+- `Island` / `Page` / `HeaderPage` / `FooterPage` — базовые примитивы для Body/Content/Header/Footer.
+- `Button` — в ModalWindowClose.
+- `TriggerClickOnKeyDownEvent` — для Escape handling.
+- `LoaderScreen` — loader в Content.
+- `focus-trap-react`, `react-transition-group` — внешние зависимости.
+
+---
+
+## Stories
+
+`stories/ModalWindow/ModalWindow.stories.tsx`
+Примеры: `stories/ModalWindow/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/MonthYearField.md

@@ -0,0 +1,168 @@
+---
+component: MonthYearField
+category: Form Controls
+figma-node: ""
+figma-file: ""
+related: [DatePickerExtended, Calendar, TextField, DropdownMobileInput, FormField]
+tokens: []
+stories: stories/MonthYearField/MonthYearField.stories.tsx
+version: "1.0"
+---
+
+# MonthYearField
+
+## Назначение
+
+Поле для выбора **месяца и года** (без числа дня). Built on top of
+`DatePickerExtended` c `pickType=monthYearPick`. Превращает строковое
+значение ISO-даты (YYYY-MM-DD) в отображение "Mar 2026" в `TextField`,
+показывает календарь по клику / Enter / Space, реализует clear-кнопку.
+
+Используй когда: нужен month-picker (отчётные периоды, выбор срока).
+Для полноценной даты — `DateField`. Для диапазона — `DateRange`/аналог.
+
+---
+
+## Файловая структура
+
+```text
+src/components/MonthYearField/
+├── MonthYearField.tsx          # forwardRef, обёртка над DatePickerExtended
+├── MonthYearFieldTarget.tsx    # TextField с клик/keyboard → открытие dropdown
+├── MonthYearFieldContext.tsx   # { onChange } — для clear в Target
+├── constants.ts                # inputMonthYearFormat = "MMM YYYY"
+├── types.ts                    # IMonthYearFieldProps
+├── utils.ts                    # MonthYearPickerUtils: parse/validate даты
+├── index.ts                    # Barrel
+└── __tests__/
+```
+
+---
+
+## Варианты и props
+
+### `IMonthYearFieldProps extends Omit<IDatePickerExtendedProps, "pickedDate" | "onDateChange" | "renderTarget" | "renderDropdownHeaderTarget">, Pick<ITextFieldProps, "size" | "status" | "label">`
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `value` | `string` | — (обязателен) | ISO-дата (формата `format`), например `"2026-04-01"`. |
+| `onChange` | `(value: string) => void` | — (обязателен) | Вызывается при выборе нового месяца. Передаётся дата в `format`. |
+| `format` | `string` | `dateFormatYYYYMMDD` (`"YYYY-MM-DD"`) | moment-формат для `value`. |
+| `limitRange` | `IDateLimitRange` | `globalLimitRange` | Границы доступных дат. |
+| `placeholder` | `string` | — | Плейсхолдер input'а. |
+| `size` | `EComponentSize` | — | Пробрасывается в TextField. |
+| `status` | `EFormFieldStatus` | — | Пробрасывается в TextField (`DISABLED` → readOnly). |
+| `label` | `ReactNode` | — | Label TextField'а. |
+| `targetProps` | `ITextFieldProps` | — | Дополнительные props TextField. `inputProps` мержатся с внутренними. |
+| `...DatePickerExtended-props` | — | — | Все остальные, кроме исключённых. |
+
+**Исключены из `IDatePickerExtendedProps`**: `pickedDate`, `onDateChange`, `renderTarget`, `renderDropdownHeaderTarget` — они управляются внутренне.
+
+### Внутренние формирующие константы
+
+- `inputMonthYearFormat = "MMM YYYY"` — как показывается в TextField (moment-format).
+- `ECalendarPickType.monthYearPick` — `pickType` DatePickerExtended.
+
+---
+
+## Ключевые особенности реализации
+
+### Внутренний state `pickerValues`
+
+```ts
+const [pickerValues, setPickerValues] = useState(
+    MonthYearPickerUtils.getPickerValues(value, format, limitRange)
+);
+```
+
+- `pickerValues = { inputString: "Mar 2026", calendarDate: moment }` — два представления одной даты.
+- Синхронизируется с `value` через `useEffect(() => { if (newInputString !== current) setPickerValues(...) })` — обновление только при реальном изменении строки.
+
+### `MonthYearPickerUtils.getPickerValues`
+
+```ts
+if (value.length === 0) return { calendarDate: null, inputString: "" };
+const date = moment(value, format, true); // strict
+if (!valid || outsideRange) return { calendarDate: null, inputString: "" };
+return { calendarDate: date, inputString: date.format(inputMonthYearFormat) };
+```
+
+- **Strict-парсинг** (третий аргумент `true`) — формат должен совпадать один-в-один.
+- Выход за `limitRange` → `null` calendar date + пустая строка в input'е. **Невалидное значение воспринимается как отсутствующее** — потребитель не получит обратный callback.
+
+### `MonthYearFieldContext` — только для `onChange`
+
+Нужен, чтобы `FormFieldClear` (внутри Target'а) мог вызвать `onChange("")` без prop-drilling через `renderTarget`.
+
+### `MonthYearFieldTarget` — Enter/Space → открыть dropdown
+
+```ts
+handleInputKeyDown: isKey(event.code, "ENTER") → toggleDropdown;
+                    isKey(event.code, "SPACE") → preventDefault + toggleDropdown;
+```
+
+- Клик по input'у — тоже toggleDropdown.
+- Input всегда `readOnly` (выбор только через календарь).
+- В postfix'е — `FormFieldClear` + `ButtonIcon` с иконкой календаря. Иконка меняется по `size`: `CalendarStrokeSrvIcon16` (SM) / `CalendarStrokeSrvIcon20` (MD/LG).
+
+### Fallback на `dateFormatYYYYMMDD` и `globalLimitRange`
+
+Если потребитель не передал `format`/`limitRange`, используются глобальные из `consts/DateConst`. Ожидается, что сам проект задаёт эти константы.
+
+### `DropdownMobileInput` как header-target для мобильного dropdown'а
+
+На mobile (в `DatePickerExtended`) вместо TextField'а рендерится упрощённый input.
+
+---
+
+## Инварианты
+
+- **`value: string` в `format`** — контракт. Не переключать на `Date`/`moment.Moment` без миграции.
+- **Strict moment-parsing** — пустая/невалидная строка → `""` в UI. Потребитель должен синхронизировать невалидные значения сам.
+- **`limitRange` — hard-clamp**: дата вне диапазона → пустое значение.
+- **`MonthYearFieldContext` shape** (`{ onChange }`) — публичная точка расширения, не менять.
+- **`inputMonthYearFormat = "MMM YYYY"`** — display-формат, не i18n-аизрован (moment уже локализован через global moment.locale, но формат-строка фиксирована).
+- **`pickType=monthYearPick`** — контракт с DatePickerExtended. Изменение — breaking.
+- **`targetProps.inputProps` мержатся** с внутренним `{ value, placeholder, readOnly }` — потребитель может переопределить.
+- **ForwardRef<HTMLDivElement>** на корневую node DatePickerExtended.
+
+---
+
+## Accessibility
+
+- Input `readOnly` — фокусируется, но не редактируется. Открытие: Enter / Space / click.
+- **`<button>` с иконкой** (ButtonIcon) — `role="presentation"` и `tabIndex={-1}` — **не в tab-последовательности** (основной target — input). Дизайн-решение, чтобы не дублировать Tab-остановки.
+- `FormFieldClear` — стандартная кнопка очистки (см. FormField-AI).
+- Нет `aria-label` на иконке календаря — потребитель должен добавить через `targetProps` при необходимости.
+
+---
+
+## Дизайн-токены
+
+Нет собственных — наследуются от `TextField` и `Calendar`.
+
+---
+
+## Связанные компоненты
+
+- `DatePickerExtended` — основа логики (dropdown, popup, mobile-variant).
+- `Calendar` — сам календарь (`pickType=monthYearPick` — режим месяца).
+- `TextField` — визуальный target.
+- `FormField.Clear` — кнопка очистки.
+- `ButtonIcon` — кнопка календаря в postfix.
+- `moment.js` — парсинг/форматирование (peerDependency в библиотеке).
+
+---
+
+## Stories
+
+`stories/MonthYearField/MonthYearField.stories.tsx`
+Примеры: `stories/MonthYearField/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |