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

package/bundle/components/Tag.md

@@ -0,0 +1,135 @@
+---
+component: Tag
+category: Data Display
+figma-node: ""
+figma-file: ""
+related: [TagColor, TagGroup, ButtonIcon]
+tokens: []
+stories: stories/Tag/Tag.stories.tsx
+version: "1.0"
+---
+
+# Tag
+
+## Назначение
+
+Тег для отображения выбранного значения параметра (фильтра/категории).
+Структура: `<span>` с `Text` контентом + опциональная кнопка редактирования
+(`ButtonIcon` с edit-иконкой) + всегда кнопка удаления (`ButtonIcon` с
+cross-иконкой). Иконки масштабируются по `size` (16/20/24).
+
+Используй когда: нужно показать выбранное значение со встроенной возможностью
+удалить или редактировать. Для цветной маркировки (categorical labels) —
+`TagColor`. Для управления коллекцией тегов — `TagGroup`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/Tag/
+├── Tag.tsx          # forwardRef<HTMLSpanElement, ITagProps>
+├── types.ts         # ITagProps
+├── styles/Tag.module.less
+├── __tests__/
+└── index.ts
+```
+
+---
+
+## Публичный API
+
+### `ITagProps`
+
+```ts
+extends HTMLAttributes<HTMLSpanElement>
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `id` | `string` | — | Уникальный id; передаётся в `onEdit(id)` / `onRemove(id)`. |
+| `size` | `EComponentSize` | — | **Обязателен** (нет default'а). Маппится на размер иконки и текста. |
+| `disabled?` | `boolean` | — | Disabled-состояние; влияет на цвет текста (`EFontType.DISABLED`) и `disabled` обеих кнопок. |
+| `onEdit?` | `(id: string) => void` | — | Если передан — рендерится edit-кнопка. |
+| `onRemove?` | `(id: string) => void` | — | Колбэк удаления; **remove-кнопка рендерится всегда**. |
+| `editButtonProps?` | `IButtonIconProps` | — | HTML/aria-атрибуты для edit-кнопки (объединяется с `onClick`). |
+| `removeButtonProps?` | `IButtonIconProps` | — | HTML/aria-атрибуты для remove-кнопки. |
+| `children` | `ReactNode` | — | Содержимое (текст тега). |
+| `...HTMLAttributes<HTMLSpanElement>` | — | — | На корневой `<span>`. |
+
+### Размер → иконка/текст
+
+| `size` | Edit/Remove иконка | Text size |
+|---|---|---|
+| `SM` | `*StrokeSrvIcon16` | `B4` |
+| `MD` | `*StrokeSrvIcon20` | `B3` |
+| `LG` | `*StrokeSrvIcon24` | `B2` |
+
+Иконки — `paletteIndex={5}` (приглушённая палитра).
+
+---
+
+## Поведение
+
+### Edit-кнопка
+
+- Рендерится **только** если передан `onEdit`.
+- `onClick` объединяет `onEdit(id)` + `editButtonProps.onClick(event)`.
+
+### Remove-кнопка
+
+- Рендерится **всегда** (даже без `onRemove`).
+- `onClick` вызывает `onRemove?.(id)` (опционально) + `removeButtonProps.onClick(event)`.
+- Если `onRemove` не передан — кнопка остаётся видимой, но клик ничего не делает (кроме `removeButtonProps.onClick`).
+
+### Disabled
+
+- `Text type = DISABLED`.
+- `ButtonIcon disabled` — обе кнопки.
+
+---
+
+## Инварианты
+
+- **`forwardRef<HTMLSpanElement>`** — не убирать.
+- **`size` обязателен** — нет default'а; передавать всегда.
+- **Remove-кнопка всегда в DOM** — даже без `onRemove`. Если нужно скрыть — `display:none` через `removeButtonProps.style` (или собственная обёртка); поведение `Tag` это не поддерживает напрямую.
+- **`onEdit` определяет видимость edit-кнопки** — единственный механизм. `editButtonProps` без `onEdit` не отрендерит кнопку.
+- **`id` прокидывается ТОЛЬКО в колбэки** (`onEdit`/`onRemove`), не в DOM. Если нужен HTML id — через `restProps`.
+- **Иконки `paletteIndex={5}`** — намеренно. Менять только координированно с дизайн-системой.
+- **`Text` size маппится через `sizeToTextSizeMap`**, иконки — через `sizeTo{Edit,Remove}IconMap`. Все три должны обновляться синхронно при добавлении нового размера.
+- **Корень — `<span>`**, не `<div>` — чтобы тег был inline-friendly.
+
+---
+
+## Accessibility
+
+- Корневой `<span>` без явной ARIA-роли — потребитель должен задать смысл через `aria-label` или родительский контекст (`TagGroup`).
+- Edit/Remove кнопки — `<button>` через `ButtonIcon`; добавлять `aria-label` через `editButtonProps`/`removeButtonProps` (например, `aria-label="Удалить тег Москва"`).
+- `disabled` отключает кнопки (`aria-disabled` + `disabled` атрибут от `ButtonIcon`).
+- Иконки декоративные — содержание описывается через `aria-label` кнопки.
+
+---
+
+## Связанные компоненты
+
+- `TagColor` — категориальные цветные теги (без edit/remove).
+- `TagGroup` — контейнер для коллекции тегов (с overflow).
+- `ButtonIcon` — кнопки edit/remove.
+- `Typography.Text` — текст внутри.
+- `@sberbusiness/icons-next` — `EditStrokeSrvIcon{16,20,24}`, `CrossStrokeSrvIcon{16,20,24}`.
+
+---
+
+## Stories
+
+Основные истории: `stories/Tag/Tag.stories.tsx`
+Примеры: `stories/Tag/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/TagColor.md

@@ -0,0 +1,121 @@
+---
+component: TagColor
+category: Data Display
+figma-node: ""
+figma-file: ""
+related: [Tag, TagGroup]
+tokens: []
+stories: stories/TagColor/TagColor.stories.tsx
+version: "1.0"
+---
+
+# TagColor
+
+## Назначение
+
+Цветной маркировочный тег: `<span>` с фоном/обводкой по статусу
+(`DEFAULT`/`SUCCESS`/`INFO`/`WARNING`/`ERROR`). Без интерактивности —
+только визуальная классификация (категории, статусы операций, лейблы).
+
+Используй когда: нужно подсветить состояние/категорию (например, статус
+заявки, тип сообщения). Для интерактивного тега с кнопками edit/remove —
+`Tag`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/TagColor/
+├── TagColor.tsx     # forwardRef<HTMLSpanElement, ITagColorProps>
+├── enums.ts         # ETagColorStatus
+├── types.ts         # ITagColorProps
+├── styles/TagColor.module.less
+├── __tests__/
+└── index.ts
+```
+
+---
+
+## Публичный API
+
+### `ITagColorProps`
+
+```ts
+extends HTMLAttributes<HTMLSpanElement>
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `size` | `EComponentSize` | — | **Обязателен** — нет default'а. Маппится в CSS-класс через `createSizeToClassNameMap`. |
+| `status?` | `ETagColorStatus` | `DEFAULT` | Цветовой статус. |
+| `children` | `ReactNode` | — | Содержимое (текст). Оборачивается в `<span class="content">`. |
+| `...HTMLAttributes<HTMLSpanElement>` | — | — | На корневой `<span>`. |
+
+### `ETagColorStatus`
+
+```ts
+enum ETagColorStatus {
+    DEFAULT = "default",
+    SUCCESS = "success",
+    INFO    = "info",
+    WARNING = "warning",
+    ERROR   = "error",
+}
+```
+
+Маппинг в CSS-классы — `STATUS_TO_CLASS_NAME_MAP` внутри компонента.
+
+---
+
+## Структура DOM
+
+```html
+<span class="tagColor {size} {status} {className}">
+    <span class="content">{children}</span>
+</span>
+```
+
+Внешний `<span>` несёт фон/обводку, внутренний — паддинги контента
+(вынесено для управления line-height независимо от рамки).
+
+---
+
+## Инварианты
+
+- **`forwardRef<HTMLSpanElement>`** — не убирать.
+- **`size` обязателен** (нет default'а в типе и в компоненте).
+- **`status` default = `DEFAULT`** — допускается опускать.
+- **Корень — `<span>`**, inline-friendly.
+- **Двойной `<span>` обязателен** — внутренний `.content` нужен для корректного отображения паддингов вместе с фоном внешнего span'а; не сокращать.
+- **`ETagColorStatus` экспортируется** — часть публичного API; не переименовывать значения.
+- **Нет интерактивности** — никаких кнопок, hover-эффектов, click-handler'ов в реализации. Если нужна интерактивность — оборачивать снаружи (но обычно это означает, что нужен `Tag`, а не `TagColor`).
+
+---
+
+## Accessibility
+
+- Нет специальной ARIA — это визуальный маркер.
+- Цвет статуса **не должен** быть единственным носителем смысла. Текст внутри (`children`) — основной канал для screen-reader.
+- При необходимости потребитель может добавить `role="status"` или `aria-label` через restProps.
+
+---
+
+## Связанные компоненты
+
+- `Tag` — тег с edit/remove кнопками.
+- `TagGroup` — контейнер для коллекции тегов с overflow.
+
+---
+
+## Stories
+
+Основные истории: `stories/TagColor/TagColor.stories.tsx`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/TagGroup.md

@@ -0,0 +1,100 @@
+---
+component: TagGroup
+category: Data Display
+figma-node: ""
+figma-file: ""
+related: [Tag, TagColor]
+tokens: []
+stories: stories/TagGroup/TagGroup.stories.tsx
+version: "1.0"
+---
+
+# TagGroup
+
+## Назначение
+
+Контейнер для коллекции `Tag` / `TagColor`: задаёт общий
+горизонтальный/вертикальный gap по `size` и `role="group"`. Не управляет
+overflow или выбором — чистая разметка.
+
+Используй когда: нужно сгруппировать несколько тегов с одинаковым размером
+и стандартным отступом. Сами теги передаются как children — потребитель
+решает, что внутри (`Tag`, `TagColor`, миксы).
+
+---
+
+## Файловая структура
+
+```text
+src/components/TagGroup/
+├── TagGroup.tsx     # forwardRef<HTMLDivElement, ITagGroupProps>
+├── types.ts         # ITagGroupProps
+├── styles/TagGroup.module.less
+├── __tests__/
+└── index.ts
+```
+
+---
+
+## Публичный API
+
+### `ITagGroupProps`
+
+```ts
+extends HTMLAttributes<HTMLDivElement>
+```
+
+| Prop | Тип | Default | Описание |
+|---|---|---|---|
+| `size` | `EComponentSize` | — | **Обязателен**. Маппится на класс gap'а через `createSizeToClassNameMap`. |
+| `children` | `ReactNode` | — | Теги внутри. Размер тегов **не** прокидывается автоматически — выставлять у каждого `Tag`/`TagColor` отдельно. |
+| `...HTMLAttributes<HTMLDivElement>` | — | — | На корневой div (role=group). |
+
+---
+
+## Структура DOM
+
+```html
+<div class="tagGroup {size} {className}" role="group">
+    {children}
+</div>
+```
+
+---
+
+## Инварианты
+
+- **`forwardRef<HTMLDivElement>`** — не убирать.
+- **`size` обязателен**, без default'а — потребитель указывает явно.
+- **`size` НЕ прокидывается в children** — каждый `Tag`/`TagColor` принимает свой `size` независимо. `TagGroup.size` влияет только на gap между ними.
+- **`role="group"`** — фиксированно. Не переопределять без причины.
+- **Корень — `<div>`** (в отличие от `Tag`/`TagColor`, которые `<span>`).
+- **Нет overflow-логики** — все теги рендерятся inline; перенос строк регулируется CSS (`flex-wrap` в LESS).
+
+---
+
+## Accessibility
+
+- `role="group"` — семантическая группа; рекомендуется добавить `aria-label` или `aria-labelledby` через restProps для описания назначения группы (например, "Активные фильтры").
+- Каждый тег внутри отвечает за свою ARIA сам.
+
+---
+
+## Связанные компоненты
+
+- `Tag` — интерактивные теги (edit/remove).
+- `TagColor` — цветные маркеры.
+
+---
+
+## Stories
+
+Основные истории: `stories/TagGroup/TagGroup.stories.tsx`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/TextField.md

@@ -0,0 +1,152 @@
+---
+component: TextField
+category: Form Controls
+figma-node: ""
+figma-file: ""
+related: [TextareaField, MaskedField, AmountField, FormField, TextFieldBase]
+tokens: []
+stories: stories/TextFields/TextField.stories.tsx
+version: "1.0"
+---
+
+# TextField
+
+## Назначение
+
+Однострочное текстовое поле: тонкая обёртка над `TextFieldBase`,
+вставляющая `FormFieldInput` (`<input type="text">`). Также в этом
+бандле — `MaskedField` (с `FormFieldMaskedInput`), идентичная по
+структуре. Компактное представление поля поверх `FormGroup` + `FormField`.
+
+Используй когда: нужен стандартный однострочный ввод с label/description/
+prefix/postfix/counter. Для многострочного — `TextareaField`. С маской —
+`MaskedField`. Для сумм — `AmountField`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/TextField/
+├── TextField.tsx        # FC<ITextFieldProps>; TextFieldBase + FormFieldInput
+├── MaskedField.tsx      # FC<IMaskedFieldProps>; TextFieldBase + FormFieldMaskedInput
+├── TextFieldBase.tsx    # forwardRef<HTMLDivElement, ITextFieldBaseProps>; общая структура
+└── index.ts             # export TextField, MaskedField
+```
+
+---
+
+## Публичный API
+
+### `ITextFieldProps`
+
+```ts
+extends Omit<ITextFieldBaseProps, "children">
+{
+    inputProps: IFormFieldInputProps & { ref?: RefObject<HTMLInputElement> };
+}
+```
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `inputProps` | `IFormFieldInputProps & { ref? }` | **Обязателен**. Прокидывается на `FormFieldInput`. Может содержать `ref` на `<input>`. |
+| `label?` | `ReactNode` | Лейбл (плавающий). |
+| `description?` | `ReactNode` | Описание / текст ошибки. |
+| `counter?` | `ReactNode` | Счётчик символов (внутри description). |
+| `prefix?` / `postfix?` | `ReactNode` | Префикс/постфикс (иконка, кнопка, текст). |
+| `...IFormFieldProps` | — | size, status, disabled, focused, error и т.д. от `FormField`. |
+
+### `IMaskedFieldProps`
+
+```ts
+extends Omit<ITextFieldBaseProps, "children">
+{
+    maskedInputProps: IFormFieldMaskedInputProps & { ref?: RefObject<HTMLInputElement> };
+}
+```
+
+Идентична `ITextFieldProps`, но input с маской.
+
+### `ITextFieldBaseProps`
+
+```ts
+extends Omit<IFormFieldProps, "prefix" | "postfix">
+{
+    children: ReactNode;     // обязателен — само поле ввода
+    description?: ReactNode;
+    counter?: ReactNode;
+    prefix?: ReactNode;
+    postfix?: ReactNode;
+    label?: ReactNode;
+}
+```
+
+`TextFieldBase` — `forwardRef<HTMLDivElement>`. Используется напрямую,
+если нужен кастомный input (не Input/Masked/Textarea).
+
+---
+
+## Структура DOM
+
+```tsx
+<FormGroup>
+    <FormField {...formFieldProps} ref={ref}>
+        {prefix && <FormFieldPrefix>{prefix}</FormFieldPrefix>}
+        {children}                        {/* FormFieldInput / MaskedInput / Textarea */}
+        {label && <FormFieldLabel>{label}</FormFieldLabel>}
+        {postfix && <FormFieldPostfix>{postfix}</FormFieldPostfix>}
+    </FormField>
+    {(description || counter) && (
+        <FormFieldDescription>
+            {description}
+            {counter && <FormFieldCounter>{counter}</FormFieldCounter>}
+        </FormFieldDescription>
+    )}
+</FormGroup>
+```
+
+---
+
+## Инварианты
+
+- **`TextField` / `MaskedField` — `FC, не forwardRef`**. Ref на `<input>` — через `inputProps.ref` / `maskedInputProps.ref`. `TextFieldBase` — `forwardRef<HTMLDivElement>` (сохранять).
+- **`inputProps` / `maskedInputProps` обязательны** — нельзя default'ить.
+- **Label рендерится после children в DOM** — требование `FormField` (плавающий лейбл через CSS), не менять порядок.
+- **`description` и `counter` объединены в одну `FormFieldDescription`** — counter внутри `<FormFieldCounter>`. Не дублировать обёртку.
+- **`prefix` / `postfix` поддерживаются `TextFieldBase` напрямую** (`Omit<IFormFieldProps, "prefix" | "postfix">` → переопределяет на ReactNode).
+- **`displayName` выставлен** на `TextField`, `MaskedField`, `TextFieldBase`.
+- **`MaskedField` отличается ТОЛЬКО типом input'а** — никакой собственной логики маскирования, она внутри `FormFieldMaskedInput`.
+
+---
+
+## Accessibility
+
+- `<input>` (или masked input) — приходит из `FormFieldInput`, отвечает за `id`, `aria-describedby`, `aria-invalid`.
+- `<label htmlFor>` — связь с input'ом через `FormFieldLabel`/`FormField`.
+- Описание/ошибка — через `description` (попадает в `FormFieldDescription`), `aria-describedby` подвязывается автоматически.
+- `disabled`/`readonly`/`required` — на `inputProps`.
+
+---
+
+## Связанные компоненты
+
+- `TextareaField` — многострочный аналог.
+- `MaskedField` — экспортируется отсюда же; ввод по маске.
+- `AmountField` — для денежных сумм.
+- `TextFieldBase` — общая база (используется напрямую при кастомном input'е).
+- `FormField`, `FormGroup`, `FormFieldInput`, `FormFieldMaskedInput`, `FormFieldLabel`, `FormFieldDescription`, `FormFieldCounter`, `FormFieldPrefix`, `FormFieldPostfix` — внутренние составляющие.
+
+---
+
+## Stories
+
+Основные истории: `stories/TextFields/TextField.stories.tsx` (а также `MaskedField.stories.tsx`, `AmountField.stories.tsx` рядом).
+Примеры: `stories/TextFields/examples/`.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |

package/bundle/components/TextareaField.md

@@ -0,0 +1,124 @@
+---
+component: TextareaField
+category: Form Controls
+figma-node: ""
+figma-file: ""
+related: [TextField, FormField, FormFieldTextarea, TextFieldBase]
+tokens: []
+stories: stories/TextareaField/TextareaField.stories.tsx
+version: "1.0"
+---
+
+# TextareaField
+
+## Назначение
+
+Многострочное текстовое поле: тонкая обёртка над `TextFieldBase`,
+вставляющая `FormFieldTextarea` вместо `FormFieldInput`. Получает все
+возможности `TextFieldBase` (label, description, prefix/postfix, counter,
+ошибки, клонирование пропсов через FormField).
+
+Используй когда: нужен большой ввод (комментарий, обращение, описание).
+Для однострочного ввода — `TextField`.
+
+---
+
+## Файловая структура
+
+```text
+src/components/TextareaField/
+├── TextareaField.tsx     # FC<ITextareaFieldProps>; <TextFieldBase><FormFieldTextarea/></TextFieldBase>
+├── types.ts              # ITextareaFieldProps
+├── __tests__/
+└── index.ts
+```
+
+---
+
+## Публичный API
+
+### `ITextareaFieldProps`
+
+```ts
+extends Omit<ITextFieldBaseProps, "children">
+{
+    textareaProps: IFormFieldTextareaProps & DataAttributes & RefAttributes<HTMLTextAreaElement>;
+}
+```
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `textareaProps` | `IFormFieldTextareaProps & DataAttributes & RefAttributes<HTMLTextAreaElement>` | **Обязателен**. Прокидывается на `FormFieldTextarea`. Включая `ref` на textarea. |
+| `label?` | `ReactNode` | Лейбл (`FormFieldLabel`). От `TextFieldBase`. |
+| `description?` | `ReactNode` | Описание / ошибка (`FormFieldDescription`). |
+| `counter?` | `ReactNode` | Счётчик символов (`FormFieldCounter`), внутри description. |
+| `prefix?` / `postfix?` | `ReactNode` | Префикс/постфикс (`FormFieldPrefix`/`FormFieldPostfix`). |
+| `...IFormFieldProps` | — | Все props `FormField` (size, status, disabled, focused и т.д.). |
+
+`IFormFieldProps` приходит из `FormField` (см. FormField-AI.md, если существует).
+
+---
+
+## Структура DOM
+
+```tsx
+<FormGroup>
+    <FormField {...formFieldProps}>
+        {prefix && <FormFieldPrefix>{prefix}</FormFieldPrefix>}
+        <FormFieldTextarea {...textareaProps} />
+        {label && <FormFieldLabel>{label}</FormFieldLabel>}
+        {postfix && <FormFieldPostfix>{postfix}</FormFieldPostfix>}
+    </FormField>
+    {(description || counter) && (
+        <FormFieldDescription>
+            {description}
+            {counter && <FormFieldCounter>{counter}</FormFieldCounter>}
+        </FormFieldDescription>
+    )}
+</FormGroup>
+```
+
+Реализация полностью наследуется от `TextFieldBase` — изменения в нём
+автоматически распространяются на `TextareaField`.
+
+---
+
+## Инварианты
+
+- **`FC, не forwardRef`** — для ref'а на DIV-обёртку используется `TextFieldBase` (forwardRef'нутый), но `TextareaField` сам ref не пробрасывает на корневой элемент. Ref на `<textarea>` — через `textareaProps.ref`.
+- **`textareaProps` обязателен** (нет default'а).
+- **Label рендерится ПОСЛЕ children** в DOM — это требование `FormField` (для CSS-эффекта плавающего лейбла); порядок не менять.
+- **`description` и `counter` объединены в одну `FormFieldDescription`** — counter внутри `<FormFieldCounter>`. Не дублировать.
+- **Структура зашита** — нет children API. Для кастомного содержимого `FormField` использовать `TextFieldBase` напрямую.
+
+---
+
+## Accessibility
+
+- `<textarea>` приходит из `FormFieldTextarea` — он отвечает за `id`, `aria-describedby`, `aria-invalid` и т.п.
+- `label` — `<label>` с правильным `htmlFor` от `FormField`/`FormFieldLabel`.
+- Ошибки — через `description` + `status` `FormField`'а.
+
+---
+
+## Связанные компоненты
+
+- `TextField` — однострочный аналог.
+- `TextFieldBase` — общая база.
+- `FormFieldTextarea` — реальный `<textarea>` с обёрткой стилей.
+- `FormField` / `FormGroup` / `FormFieldLabel` / `FormFieldDescription` / `FormFieldCounter` / `FormFieldPrefix` / `FormFieldPostfix` — внутренние составляющие.
+
+---
+
+## Stories
+
+Основные истории: `stories/TextareaField/TextareaField.stories.tsx`
+Примеры: `stories/TextareaField/examples/`
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-04-18 | Создан документ |