@sberbusiness/triplex-next-mcp-server 1.50.0-beta → 1.53.1

package/bundle/components/NotificationGrouped.md

@@ -0,0 +1,174 @@
+---
+component: NotificationGrouped
+category: Feedback
+related: [Notification]
+tokens:
+  - Notification.Background
+  - Notification.Shadow
+stories: stories/NotificationGrouped/NotificationGrouped.stories.tsx
+version: "1.0"
+---
+
+# NotificationGrouped
+
+## Назначение
+
+Визуально обозначает группу уведомлений: под содержимым отображаются два декоративных
+слоя, создающие эффект стопки карточек. Обычно в группу вкладывают один `Notification`,
+который представляет несколько сообщений.
+
+Используй когда: нужно показать свёрнутую группу уведомлений одной карточкой.
+Не используй когда: нужно отобразить каждое сообщение отдельно — отрендери список
+`Notification`. Количество сообщений, раскрытие группы и закрытие управляются приложением.
+
+---
+
+## Варианты и props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `children` | `React.ReactNode` | Содержимое группы. Обычно один `Notification`; тип не ограничивает состав дочерних узлов |
+
+Других props у обёртки нет: HTML-атрибуты, `className` и обработчики задаются вложенному
+`Notification` или внешнему контейнеру. `ref` передаётся на корневой `div` группы,
+а не на вложенное уведомление.
+
+Компонент выводит `children` без преобразования и всегда добавляет декоративный footer,
+в том числе при `children={null}`. Два слоя обозначают стопку независимо от числа сообщений.
+Для пользовательского интерфейса передавай содержательную карточку.
+
+Ширина группы на десктопе — 376px, на ширине экрана до 767px — 100% родителя.
+Нижний внешний отступ — 32px; декоративные слои выступают на 8px и 16px ниже содержимого.
+Отступы, иконка, текст, время и действия самой карточки настраиваются через `Notification`.
+
+---
+
+## Дизайн-токены
+
+Переопределяются через `ThemeProvider` (prop `tokens`) — см.
+[`ThemeProvider-ai.md`](../ThemeProvider/ThemeProvider-ai.md) → «Как переопределять токены».
+Значения по умолчанию — `src/components/DesignTokens/components/Notification.ts`.
+
+| Токен | Назначение |
+|---|---|
+| `Notification.Background` | Фон декоративных слоёв |
+| `Notification.Shadow` | Тень декоративных слоёв |
+
+Токены общие с `Notification`: их переопределение меняет карточку и слои стопки.
+Цвет текста и времени относятся к вложенному уведомлению и описаны в
+[`Notification-ai.md`](./Notification-ai.md).
+
+---
+
+## Инварианты
+
+- `INotificationGroupedProps.children` обязателен и сохраняет тип `React.ReactNode`.
+- `forwardRef<HTMLDivElement, INotificationGroupedProps>` и `displayName="NotificationGrouped"`
+  сохраняются; корневой элемент и ref-target — `div` группы.
+- Публичные экспорты `NotificationGrouped` и `INotificationGroupedProps` из
+  `src/components/Notification/index.ts` сохраняются.
+- Декоративный `NotificationGroupedFooter` располагается после `children` и содержит
+  два слоя. Он не экспортируется через публичный barrel.
+- Классы `notificationGroupedWrapper`, `notificationGroupedFooterItem`, `first`, `second`
+  и пути токенов сохраняются. Разметка и порядок слоёв влияют на visual baselines.
+- Группа не фильтрует дочерние узлы и не управляет состоянием сообщений.
+
+---
+
+## Accessibility
+
+Обёртка — обычный `div` без роли, `tabIndex` и клавиатурных обработчиков. Курсор при
+наведении имеет вид указателя, но компонент сам не добавляет интерактивность.
+Декоративные слои не содержат текста или элементов управления.
+
+Роль `alertdialog` задаёт вложенный `Notification`, а не группа. Подписи ARIA и действия
+передавай самому уведомлению и его дочерним элементам; например, `aria-label` для
+`Notification.Close` задаёт потребитель на языке приложения. Клавиатурный фокус
+принадлежит вложенным кнопкам и ссылкам.
+
+---
+
+## Связанные компоненты
+
+- `Notification` — карточка внутри группы; определяет содержимое, действия и accessibility.
+- `NotificationGroupedFooter` — приватный декоративный footer из двух пустых слоёв;
+  отдельного публичного API и AI-документа нет.
+
+---
+
+## Stories
+
+Основные истории: `stories/NotificationGrouped/NotificationGrouped.stories.tsx`
+Файлы примеров: `stories/NotificationGrouped/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Default` | `Default.tsx` | Минимальная группа с одним уведомлением |
+| `WithFooter` | `WithFooter.tsx` | Карточка с действием, кнопкой закрытия и временем |
+| `VisualTests` | `VisualTests.tsx` | Клавиатурный фокус на действии и закрытие при наведении на карточку |
+
+Playground отсутствует: у обёртки только `children`, настраиваемых вариантов нет.
+Stories снимаются на xs/xl; реальное наведение для `VisualTests` выполняется test-runner
+через `hoverSelector`, а фокус устанавливается клавиатурой в `play`.
+Несколько групп подряд — story `Business Stack` в `stories/Notification/`.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-10-08 | Создан документ; уточнены JSDoc, выделены unit-тесты и добавлены отдельные modern stories NotificationGrouped |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/NotificationGrouped/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { Notification, NotificationGrouped } from "@sberbusiness/triplex-next";
+
+export const Default = () => (
+    <NotificationGrouped>
+        <Notification>
+            <Notification.Body>
+                <Notification.Body.Content>Получены новые сообщения.</Notification.Body.Content>
+            </Notification.Body>
+        </Notification>
+    </NotificationGrouped>
+);
+```
+
+### WithFooter
+
+`stories/NotificationGrouped/examples/WithFooter.tsx`
+
+```tsx
+import React from "react";
+import { Button, EButtonTheme, EComponentSize, Notification, NotificationGrouped } from "@sberbusiness/triplex-next";
+
+export const WithFooter = () => (
+    <NotificationGrouped>
+        <Notification withExtraBottomPadding>
+            <Notification.Body>
+                <Notification.Body.Header>Новые платежи</Notification.Body.Header>
+                <Notification.Body.Content>
+                    Получены три платежа. Откройте список для проверки.
+                </Notification.Body.Content>
+                <Notification.Body.Footer>
+                    <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.SM} onClick={() => {}}>
+                        Открыть платежи
+                    </Button>
+                </Notification.Body.Footer>
+            </Notification.Body>
+            <Notification.Close aria-label="Закрыть уведомление" onClick={() => {}} />
+            <Notification.Time time="14:30" />
+        </Notification>
+    </NotificationGrouped>
+);
+```
+

package/bundle/components/NumberField.md

@@ -1,9 +1,7 @@
 ---
 component: NumberField
-category: Form Controls
-figma-node: ""
-figma-file: ""
-related: [TextField, FormField, Amount]
+category: TextFields
+related: [AmountField, TextField, FormField]
 tokens: []
 stories: stories/NumberField/NumberField.stories.tsx
 version: "1.0"
@@ -13,166 +11,311 @@ version: "1.0"
 
 ## Назначение
 
-Текстовое поле для ввода **числовых значений**: фильтрует ввод на лету,
-оставляя только цифры, один десятичный разделитель (`,`) и опциональный
-unary minus в позиции 0. Сам visual layer — `TextFieldBase`; уникальное
-поведение — кастомный `<input>` (`NumberFieldInput`), который чистит
-строку и компенсирует позицию каретки.
+Однострочное поле для ввода числовой строки с плавающим лейблом, статусом, префиксом/постфиксом и описанием. При изменении ввода оставляет цифры, ведущий минус и один десятичный разделитель; точку заменяет запятой. Композиция: приватный `TextFieldBase` (семейство `FormField`) и приватный `NumberFieldInput` поверх `FormFieldInput`.
 
-Используй когда: поле для ввода числа без формата суммы (без
-group-separator). Для сумм с разделителями разрядов — `Amount`. Для
-строковых значений — `TextField`.
+Используй когда: пользователь вводит произвольное целое или дробное число без денежного форматирования, ограничения точности и разделителей разрядов.
 
----
-
-## Файловая структура
-
-```text
-src/components/NumberField/
-├── NumberField.tsx        # FC, обёртка над TextFieldBase + NumberFieldInput
-├── NumberFieldInput.tsx   # forwardRef, кастомная фильтрация ввода
-├── types.ts               # INumberFieldProps = ITextFieldProps
-├── index.ts               # Barrel
-└── __tests__/
-```
+Не используй когда: нужна денежная сумма с форматированием и нормализованным значением (`AmountField`), произвольный текст (`TextField`), фиксированная маска (`MaskedField`) или только отображение числа без ввода.
 
 ---
 
 ## Варианты и props
 
-### `INumberFieldProps extends ITextFieldProps`
+`INumberFieldProps` наследует `ITextFieldProps`; собственных дополнительных props нет. `inputProps` передаётся в `NumberFieldInput`, остальные props — в `TextFieldBase`. Полный контракт атрибутов и слотов описан в `TextField-ai.md` и исходных интерфейсах.
 
-Полностью наследует API `TextField`. Уникального prop'а нет.
+### Обязательные props
 
-| Prop (важные из ITextFieldProps) | Тип | Описание |
+| Prop | Назначение и ограничения |
+|---|---|
+| `inputProps` | Атрибуты и обработчики элемента ввода: `value`/`defaultValue`, `onChange`, `placeholder`, `id`, ARIA-атрибуты, `ref` и `render`. Для контролируемого ввода храни строку из `event.target.value`; это значение с запятой, а не нормализованная числовая строка с точкой. `inputProps.ref` указывает на `HTMLInputElement`. |
+
+### Опциональные props
+
+| Prop | По умолчанию | Назначение |
 |---|---|---|
-| `inputProps` | `IFormFieldInputProps` | Прокидывается в `<NumberFieldInput>` (включая `value`, `onChange`, `placeholder`, `ref`). |
-| `size` / `status` / `label` / `prefix` / `postfix` / ... | — | От `TextFieldBase`. |
+| `size` | `EComponentSize.LG` | Размер SM / MD / LG; наследуется вложенным input через `FormField`. |
+| `status` | `EFormFieldStatus.DEFAULT` | DEFAULT / ERROR / WARNING / DISABLED. Статус DISABLED устанавливает нативный `disabled` на input. |
+| `active` | `false` | Принудительно активное визуальное состояние; фокус input также делает поле активным. |
+| `label` | — | Плавающий лейбл, связанный с input через `htmlFor`. |
+| `prefix`, `postfix` | — | Контент слева и справа от input; кнопку очистки потребитель добавляет в `postfix` и сам сбрасывает значение. |
+| `description`, `counter` | — | Описание и счётчик под полем, отображаются в общем блоке. |
 
-### Внутренние правила фильтрации (`NumberFieldInput`)
+`className`, `style`, data-атрибуты и другие div-атрибуты применяются к контейнеру `FormField` внутри `FormGroup`. Внешний `ref` указывает на этот же `<div>`; ссылка на input передаётся отдельно через `inputProps.ref`.
 
-| Случай | Поведение |
-|---|---|
-| Цифра `0–9` | оставляется |
-| `,` или `.` (decimal separator) | первый — нормализуется в `,`; второй (если **правее каретки**) — заменяет первый, первый стирается |
-| `-` в позиции `0` | оставляется как unary minus |
-| Любое другое | удаляется |
-| `,` или `.` левее уже существующего разделителя | удаляется |
+### Особенности поведения
 
-- Разделитель — `AmountConst.DecimalComma` (`,`).
-- Каретка корректируется: `setCaretPosition(target, caret + (newLength - oldLength))`.
+- Фильтрация выполняется только при событии изменения ввода. Значения `value` и `defaultValue`, переданные снаружи, не нормализуются автоматически.
+- Разрешены цифры `0`–`9`. Минус сохраняется только в начале исходной строки; другие символы удаляются. Ведущие нули остаются.
+- Точка и запятая принимаются как десятичные разделители; в результате остаётся не более одной запятой. При повторном разделителе выбор зависит от каретки: разделитель справа от неё заменяет ранее найденный, остальные повторения игнорируются.
+- Пустая строка и промежуточные значения `"-"`, `","`, `"-,"` допустимы. Компонент не проверяет завершённость числа, диапазон или количество дробных знаков и не преобразует строку в `number`.
+- Перед вызовом `inputProps.onChange` изменяется `event.target.value`; обработчик получает тот же event с отфильтрованным значением. Если input в фокусе, каретка сдвигается только на символы, удалённые левее неё: символы, удалённые правее (например, минус не в начале строки), позицию не меняют.
+- По умолчанию рендерится текстовый `<input>`. Сохраняй текстовый тип для работы с запятой и кареткой; подходящий `inputMode` потребитель задаёт через `inputProps`.
+- При использовании `inputProps.render` передавай предоставленные атрибуты, обработчики и ref своему input, чтобы сохранить фильтрацию и связь с `FormField`.
 
 ---
 
-## Ключевые особенности реализации
+## Дизайн-токены
 
-### Фильтр в `onChange`, **не** в `onBeforeInput`
+Собственных стилей и токенов нет, поэтому `tokens: []`. Внешний вид задаёт семейство `FormField`; его токены описаны в `FormField-ai.md` и находятся в `src/components/DesignTokens/components/FormField.ts`.
 
-```tsx
-const handleChange = (event) => {
-    const caret = getCaretPosition(event.target);
-    const value = getFilteredValue(event.target.value, caret);
-    const caretShift = value.length - event.target.value.length;
-    event.target.value = value;
-    setCaretPosition(event.target, caret + caretShift);
-    onChange?.(event);
-};
-```
-
-- `event.target.value` мутируется **синхронно** до вызова потребительского `onChange` — потребитель получает уже отфильтрованное значение.
-- React будет видеть это как controlled-input change (если потребитель контролирует значение).
+---
 
-### Поведение «второй разделитель правее каретки»
+## Инварианты
 
-```ts
-// Если уже был ',' и пользователь вводит ещё один справа от каретки:
-// сдвигаем разделитель вправо, старый затираем.
-if (separatorIndex == -1) buffer.push(",")
-else if (i > caret) { buffer.push(","); buffer[separatorIndex] = ""; ... }
-```
+- `forwardRef<HTMLDivElement, INumberFieldProps>` и `NumberField.displayName = "NumberField"` — не убирать. Внешний ref передаётся через `TextFieldBase` в `<div>` `FormField`; ref на input остаётся отдельным контрактом `inputProps.ref`. Оба поддерживают объектную и callback-форму.
+- Имена `NumberField`, `INumberFieldProps`, унаследованные props, значения `EComponentSize`/`EFormFieldStatus` и barrel-экспорты — публичный API. Не менять без согласования.
+- `NumberFieldInput` не экспортируется из barrel и не имеет отдельного AI.md: это приватная реализация фильтрации. Проверяй её поведение через публичный `NumberField`.
+- Строковый контракт `inputProps.onChange` с запятой и промежуточными значениями сохраняется. Переход на числовое значение, точку или ограничения точности меняет поведение потребителя.
+- Сохраняй композицию `TextFieldBase` / `FormFieldInput`, разделение контейнерных props и `inputProps`, а также общий блок `description`/`counter`.
+- Story IDs и файлы baseline для `Sizes` и `Statuses` используются visual regression тестами; не переименовывать без синхронного обновления.
+- Компонент и его зависимости должны оставаться совместимыми с React 17 для ветки `release-0`; не добавлять React 18-only API.
 
-- Полезно для UX: если пользователь печатает `123,4` и ставит курсор после `123`, нажатие `,` снова — переместит разделитель.
-- Если новый разделитель **левее или на каретке** — он игнорируется (старый сохраняется).
+---
 
-### Unary minus только в позиции 0
+## Accessibility
 
-```ts
-else if (i === 0 && StringUtils.isUnaryMinus(value[i])) buffer.push("-");
-```
+- Input имеет стандартную текстовую семантику. Лейбл связывается с ним через `htmlFor` и `id`, переданный в `inputProps.id` либо сгенерированный `FormFieldInput`.
+- Когда видимого лейбла нет, доступное имя задаёт потребитель через `inputProps["aria-label"]` или `inputProps["aria-labelledby"]`.
+- `status={EFormFieldStatus.DISABLED}` блокирует input и исключает его из таб-обхода. `active` задаёт визуальное состояние и сам по себе не переводит фокус.
+- `aria-invalid` и связь с описанием через `aria-describedby` потребитель передаёт через `inputProps`; статус ERROR не устанавливает эти атрибуты автоматически.
+- Фокус и blur синхронизируются с `FormField`; пользовательские обработчики `inputProps.onFocus`/`onBlur` сохраняются. Для программного фокуса используй `inputProps.ref`.
+- Отдельных обработчиков клавиш и роли `spinbutton` нет; клавиатурная навигация стандартная для `<input>`.
 
-- `-` где-либо ещё — удаляется.
-- Поддерживается **один** минус. Двойной минус — невозможен.
+---
 
-### `,` vs `.`
+## Связанные компоненты
 
-- `.` принимается на ввод (например, нажатие `.` на нумпаде), но конвертируется в `,` (`AmountConst.DecimalComma`).
-- Контракт значения: всегда строка с `,` (если используется decimal). Для backend'а, если ожидается `.` — потребитель должен сам сконвертировать.
+- `AmountField` — альтернатива для денежного ввода с разделителями разрядов, заданной точностью и нормализованным значением с точкой.
+- `TextField` — источник наследуемого контракта `ITextFieldProps`. Его приватный `TextFieldBase` задаёт раскладку поля и слотов; отдельного AI.md у базы нет.
+- `FormField` — семейство, обеспечивающее размер, статус, фокус, заполненность и связь лейбла с input. `NumberFieldInput` использует его `FormFieldInput`.
+- `NumberFieldInput` — приватный слой фильтрации цифр, знака и десятичного разделителя с коррекцией каретки.
+- `FormFieldClear` — необязательная кнопка очистки в `postfix`; пример `Production` очищает контролируемое значение и возвращает фокус в input.
 
-### `NumberField` — только `TextFieldBase`-обёртка
+---
 
-```tsx
-export const NumberField = ({ inputProps, ...restProps }) => (
-    <TextFieldBase {...restProps}>
-        <NumberFieldInput {...inputProps} />
-    </TextFieldBase>
-);
-```
+## Stories
 
-- **Не `forwardRef`** на `NumberField` — но `NumberFieldInput` — `forwardRef<HTMLInputElement>`. Если нужен ref на input — потребитель должен передать его через `inputProps.ref`.
+Основные истории: `stories/NumberField/NumberField.stories.tsx`
+Файлы примеров: `stories/NumberField/examples/`
 
-### `IFormFieldInputProps` для `inputProps`
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Управление размером, статусом, лейблом, активностью, postfix и description |
+| `Default` | `Default.tsx` | Контролируемый ввод с лейблом и placeholder |
+| `Sizes` | `Sizes.tsx` | Размеры SM / MD / LG |
+| `Statuses` | `Statuses.tsx` | Статусы DEFAULT / ERROR / WARNING / DISABLED |
+| `Production` | `Production.tsx` | Кнопка очистки с возвратом фокуса через `inputProps.ref`, единица измерения и подсказка в postfix, описание со ссылкой |
 
-- `inputProps` — стандартный для FormField API (`value`, `onChange`, `defaultValue`, `placeholder`, `disabled`, `ref`).
+`Sizes` и `Statuses` покрыты существующими baseline-скриншотами для viewport xs/xl. `Playground`, `Default` и `Production` исключены из screenshot-прогона через `testRunner.skip`.
 
 ---
 
-## Инварианты
+## История изменений
 
-- **Фильтрация — `digit | "," | начальный "-"`** — расширение списка допустимых символов = breaking.
-- **Один разделитель**, конвертируется в `,`.
-- **Unary minus только в позиции 0** — внутри числа `-` теряется.
-- **`AmountConst.DecimalComma = ","`** — изменение глобальной константы повлияет на NumberField.
-- **`event.target.value` мутируется** до вызова потребительского `onChange` — `onChange` получает уже отфильтрованную строку.
-- **Каретка корректируется** через `setCaretPosition` — без потери позиции при удалении невалидных символов.
-- **`NumberFieldInput` — `forwardRef`**, `NumberField` — простая FC.
-- **API = `ITextFieldProps`** — нет собственных props. Расширения = breaking.
+| Дата | Изменение |
+|---|---|
+| 2026-10-08 | Создан документ (TRI-63). Добавлены ref на контейнер FormField и displayName; описаны фильтрация строкового ввода, refs, accessibility и существующие stories. Исправлен сдвиг каретки, когда фильтр удаляет символы правее неё |
 
 ---
 
-## Accessibility
+## Примеры использования
 
-- Стандартный `<input>` (через `FormFieldInput`) — клавиатура работает как для TextField.
-- `inputmode` / `type` **не выставляется** на `numeric` / `decimal` — на mobile откроется обычная клавиатура. Потребитель может передать через `inputProps.inputMode = "decimal"`.
-- Скринридеры читают как обычное text input. Для семантики числа — потребитель добавляет `aria-*`.
+### Default
 
----
+`stories/NumberField/examples/Default.tsx`
 
-## Дизайн-токены
+```tsx
+import React, { useState } from "react";
+import { NumberField, EComponentSize, EFormFieldStatus } from "@sberbusiness/triplex-next";
+
+export const Default = () => {
+    const [value, setValue] = useState<string>("");
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        setValue(event.target.value);
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <NumberField
+                size={EComponentSize.LG}
+                status={EFormFieldStatus.DEFAULT}
+                inputProps={{
+                    value,
+                    placeholder: "0",
+                    onChange: handleInputChange,
+                }}
+                label="Label"
+            />
+        </div>
+    );
+};
+```
 
-Нет собственных — наследуются от `TextField` / `FormField`.
+### Sizes
 
----
+`stories/NumberField/examples/Sizes.tsx`
 
-## Связанные компоненты
+```tsx
+import React, { useState } from "react";
+import { NumberField, EComponentSize, EFormFieldStatus } from "@sberbusiness/triplex-next";
+
+interface ISizeItemProps {
+    size: EComponentSize;
+}
+
+const SizeItem = ({ size }: ISizeItemProps) => {
+    const [value, setValue] = useState<string>("");
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        setValue(event.target.value);
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{size.toUpperCase()}</div>
+            <NumberField
+                size={size}
+                status={EFormFieldStatus.DEFAULT}
+                inputProps={{
+                    value,
+                    placeholder: "0",
+                    onChange: handleInputChange,
+                }}
+                label="Label"
+            />
+        </div>
+    );
+};
 
-- `TextField` / `TextFieldBase` — визуальная база.
-- `FormFieldInput` — нижележащий `<input>`.
-- `Amount` — для денежных значений (с group-separator и фиксированной точностью).
-- `AmountConst` — `DecimalComma`, `DecimalPoint`.
-- `StringUtils` — `isDigit`, `isDecimalSeparator`, `isUnaryMinus`.
-- `inputUtils` — `getCaretPosition`, `setCaretPosition`.
+const SIZES = Object.values(EComponentSize);
 
----
+export const Sizes = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {SIZES.map((size) => (
+            <SizeItem key={size} size={size} />
+        ))}
+    </div>
+);
+```
 
-## Stories
+### Statuses
 
-`stories/NumberField/NumberField.stories.tsx`
-Примеры: `stories/NumberField/examples/`
+`stories/NumberField/examples/Statuses.tsx`
 
----
+```tsx
+import React, { useState } from "react";
+import { NumberField, EComponentSize, EFormFieldStatus } from "@sberbusiness/triplex-next";
+
+interface IStatusItemProps {
+    status: EFormFieldStatus;
+}
+
+const StatusItem = ({ status }: IStatusItemProps) => {
+    const [value, setValue] = useState<string>("");
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        setValue(event.target.value);
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{status.toUpperCase()}</div>
+            <NumberField
+                size={EComponentSize.LG}
+                status={status}
+                inputProps={{
+                    value,
+                    placeholder: "0",
+                    onChange: handleInputChange,
+                }}
+                label="Label"
+            />
+        </div>
+    );
+};
 
-## История изменений
+const STATUSES = Object.values(EFormFieldStatus);
+
+export const Statuses = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {STATUSES.map((status) => (
+            <StatusItem key={status} status={status} />
+        ))}
+    </div>
+);
+```
+
+### Production
+
+`stories/NumberField/examples/Production.tsx`
+
+```tsx
+import React, { useState, useRef } from "react";
+import {
+    NumberField,
+    FormFieldClear,
+    Text,
+    HelpBox,
+    Link,
+    EComponentSize,
+    EFormFieldStatus,
+    ETextSize,
+    EFontType,
+    ETooltipSize,
+} from "@sberbusiness/triplex-next";
+
+export const Production = () => {
+    const [value, setValue] = useState<string>("");
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+        setValue(event.target.value);
+    };
+
+    const handleClearButtonClick: React.MouseEventHandler<HTMLButtonElement> = () => {
+        setValue("");
+        inputRef.current?.focus();
+    };
+
+    const handleLinkClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+        event.preventDefault();
+    };
+
+    return (
+        <div style={{ maxWidth: 300 }}>
+            <NumberField
+                size={EComponentSize.LG}
+                status={EFormFieldStatus.DEFAULT}
+                inputProps={{
+                    value,
+                    placeholder: "0",
+                    onChange: handleInputChange,
+                    ref: inputRef,
+                }}
+                label="Label"
+                postfix={
+                    <>
+                        <FormFieldClear aria-label="clear value" onClick={handleClearButtonClick} />
+                        <Text size={ETextSize.B2} type={EFontType.SECONDARY}>
+                            мм
+                        </Text>
+                        <HelpBox tooltipSize={ETooltipSize.SM}>Helpful details appear here</HelpBox>
+                    </>
+                }
+                description={
+                    <>
+                        <Text size={ETextSize.B4} type={EFontType.SECONDARY}>
+                            (21) Description{" "}
+                            <Link href="#" onClick={handleLinkClick}>
+                                Link text
+                            </Link>
+                        </Text>
+                    </>
+                }
+            />
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |