@sberbusiness/triplex-next-mcp-server 1.45.0-beta → 1.48.0-beta

package/bundle/components/DateRange.md

@@ -1,9 +1,7 @@
 ---
 component: DateRange
-category: Form
-figma-node: ""
-figma-file: ""
-related: [DateField, DatePickerExtended, Calendar, MonthYearField]
+category: Date components
+related: [MonthYearRange, DateField, ButtonIcon]
 tokens: []
 stories: stories/DateRange/DateRange.stories.tsx
 version: "1.0"
@@ -13,258 +11,126 @@ version: "1.0"
 
 ## Назначение
 
-Layout-контейнер для выбора **диапазона дат** (от … до) с опциональными
-кнопками "сдвинуть диапазон назад/вперёд" на фиксированную величину
-(день/неделя/месяц/квартал/год). Сам **не рендерит пикеры** — принимает
-их через render-props (`renderPickerFrom`, `renderPickerTo`,
-`renderButtonBack`, `renderButtonForward`), потребитель обычно
-передаёт два `DateField`.
+Диапазон дат: два поля выбора даты («от» и «до») и кнопки сдвига всего диапазона назад и вперёд. Сам компонент ни полей, ни кнопок не рендерит — их отдаёт потребитель через render-props (`renderPickerFrom`, `renderPickerTo`, `renderButtonBack`, `renderButtonForward`). На DateRange остаются раскладка, согласование границ диапазона (дата «от» не может быть больше даты «до») и арифметика сдвига.
 
-Автоматически **валидирует пересечение**: если пользователь поставил
-`from > to`, компонент очищает `to` (или наоборот очищает `from`, если
-пользователь ставит `to < from`).
+Используй когда: пользователю нужно ввести период двумя полями дат и быстро перелистывать его целиком (предыдущий месяц, следующий квартал).
 
-Используй когда: нужен диапазон дат в форме (например, фильтр периода).
-Не используй когда: нужна **одна** дата — бери `DateField`; нужен выбор
-одного **периода** (месяц/квартал) — `MonthYearField`.
-
----
-
-## Файловая структура
-
-```text
-src/components/DateRange/
-├── DateRange.tsx                   # FC, НЕ forwardRef
-├── enums.ts                        # EDateRangeShiftUnit (day/week/month/quarter/year)
-├── index.ts                        # Barrel
-├── styles/DateRange.module.less    # .dateRange flex + .separator 20x20 + .dateRangeButton z-index: 1
-└── __tests__/DateRange.test.tsx
-```
-
-Особенности:
-- **НЕ `forwardRef`** — FC. Ref-форвардинг не реализован. Известный
-  AI-ready debt.
-- **Render-props-first** — `renderPickerFrom`, `renderPickerTo`,
-  `renderButtonBack`, `renderButtonForward` — все 4 обязательны.
-- **`moment.js`** для арифметики сдвига диапазона.
-- **Тесты есть** — `__tests__/DateRange.test.tsx` покрывает валидацию
-  пересечения и сдвиги.
+Не используй когда: нужен диапазон месяцев, а не дней — `MonthYearRange`; нужна одна дата — `DateField`; нужен собственный триггер с выпадающим календарём — `DatePickerExtended`; нужна календарная сетка без полей — `Calendar`.
 
 ---
 
 ## Варианты и props
 
-### `IDateRangeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange">`
-
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `value` | `TDateRangeValue = [string, string]` | — | Диапазон `[from, to]` в формате `YYYY-MM-DD`. |
-| `onChange` | `(value: [string, string]) => void` | — | Вызывается при изменении любой даты или при сдвиге. |
-| `shiftAmount` | `number` | `1` | Величина сдвига диапазона. |
-| `shiftUnit` | `EDateRangeShiftUnit` | `MONTH` | Единица сдвига (`"day" \| "week" \| "month" \| "quarter" \| "year"` — значения moment-совместимы). |
-| `hideNavigation` | `boolean` | `false` | Скрыть кнопки сдвига. |
-| `renderPickerFrom` | `(props: IDateRangePickerProvideProps) => ReactNode` | — | Обязателен. Рендерит поле "от". |
-| `renderPickerTo` | `(props: IDateRangePickerProvideProps) => ReactNode` | — | Обязателен. Рендерит поле "до". |
-| `renderButtonBack` | `(props: IDateRangeButtonProvideProps) => ReactNode` | — | Обязателен. Рендерит кнопку "назад". |
-| `renderButtonForward` | `(props: IDateRangeButtonProvideProps) => ReactNode` | — | Обязателен. Рендерит кнопку "вперёд". |
-| `className`, `...HTMLDivAttributes` | — | — | Стандартные. |
-
-### Provide-props
-
-**`IDateRangePickerProvideProps`:**
-```ts
-{ value: string; onChange: (value: string) => void; }
-```
-
-**`IDateRangeButtonProvideProps`:**
-```ts
-{
-    children: ReactNode;      // стрелка-иконка Caretleft/rightStrokeSrvIcon20
-    className: string;        // .dateRangeButton + .disabled при пустом диапазоне
-    onClick: () => void;      // shiftRangeBack / shiftRangeForward
-    disabled: boolean;        // true если start или end пустые
-}
-```
-
-### `TDateRangeValue = [string, string]`
-
-Кортеж из двух строк. Пустая строка = "дата не задана". Это важно: **не
-`undefined`, а именно `""`**. Потребитель должен всегда передавать
-массив длиной 2.
+`IDateRangeProps` наследует `React.HTMLAttributes<HTMLDivElement>` без `defaultValue` и `onChange`.
 
-### `EDateRangeShiftUnit`
+### Обязательные props
 
-```ts
-enum EDateRangeShiftUnit {
-    DAY = "day",
-    WEEK = "week",
-    MONTH = "month",
-    QUARTER = "quarter",
-    YEAR = "year",
-}
-```
-
-Значения — строки, совместимые с `moment().add(n, unit)`.
-
----
-
-## Ключевые особенности реализации
-
-### Валидация пересечения: очистка при инверсии
-
-```ts
-const handleChangePickerFrom = (date: string) => {
-    if (!date || !end || date <= end) {
-        onChange([date, end]);
-    } else {
-        onChange([date, ""]);   // from > to → чистим to
-    }
-};
-
-const handleChangePickerTo = (date: string) => {
-    if (!date || !start || date >= start) {
-        onChange([start, date]);
-    } else {
-        onChange(["", date]);   // to < from → чистим from
-    }
-};
-```
-
-**Важная деталь:** сравнение `date <= end` / `date >= start` — это
-**лексикографическое** сравнение строк. Работает **только** для формата
-`YYYY-MM-DD` (ISO). Для других форматов (`DD.MM.YYYY` и т. п.) сравнение
-сломается.
-
-**Инвариант:** `value` и всё, что DateRange возвращает через `onChange`,
-строго в `YYYY-MM-DD`. Потребитель отвечает за форматирование в
-собственных пикерах (`DateField` сам конвертирует через `format` проп,
-но по умолчанию тоже `YYYY-MM-DD`).
-
-### Сдвиг диапазона — `moment` арифметика
-
-```ts
-const shiftRangeBack = () => {
-    if (!start || !end) return;
-    const momentStart = moment(start, dateFormatYYYYMMDD);
-    const momentEnd = moment(end, dateFormatYYYYMMDD);
-    onChange([
-        momentStart.subtract(shiftAmount, shiftUnit).format(dateFormatYYYYMMDD),
-        momentEnd.subtract(shiftAmount, shiftUnit).format(dateFormatYYYYMMDD),
-    ]);
-};
-```
+| Prop | Тип | Описание |
+|---|---|---|
+| `value` | `TDateRangeValue` | Кортеж `[start, end]`. Компонент управляемый — состояние держит потребитель. |
+| `onChange` | `(value: TDateRangeValue) => void` | Вызывается при изменении любой из границ и при сдвиге диапазона. Всегда получает обе даты. |
+| `renderPickerFrom` | `(props: IDateRangePickerProvideProps) => ReactNode` | Рендер поля даты «от». |
+| `renderPickerTo` | `(props: IDateRangePickerProvideProps) => ReactNode` | Рендер поля даты «до». |
+| `renderButtonBack` | `(props: IDateRangeButtonProvideProps) => ReactNode` | Рендер кнопки сдвига назад. Вызывается только при `hideNavigation !== true`. |
+| `renderButtonForward` | `(props: IDateRangeButtonProvideProps) => ReactNode` | Рендер кнопки сдвига вперёд. Вызывается только при `hideNavigation !== true`. |
 
-**Защита:** если start или end пустые → no-op. Кнопка тоже
-`disabled={!(start && end)}`.
+### Опциональные props
 
-**Сдвигаются обе границы на одно и то же значение** — не "растянуть
-диапазон", а "сдвинуть целиком". Размер диапазона сохраняется.
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `shiftAmount` | `number` | `1` | На сколько единиц `shiftUnit` сдвигаются обе границы за одно нажатие. |
+| `shiftUnit` | `EDateRangeShiftUnit` | `MONTH` | Единица сдвига: `DAY`, `WEEK`, `MONTH`, `QUARTER`, `YEAR`. Значения enum — строки, которые напрямую уходят в `moment`. |
+| `hideNavigation` | `boolean` | `false` | Скрывает обе кнопки сдвига: render-props кнопок не вызываются вовсе. |
 
-**Граничный случай:** если `shiftUnit=MONTH` и `start=2026-01-31`, то
-`moment.subtract(1, 'month') = 2025-12-31` (moment сам обрабатывает
-конец месяца). Для шага `1 year + 29 feb` — может быть скачок на 1
-день. Это поведение `moment` и осознанное допущение.
+### Формат значения
 
-### Separator — `MinusStrokeSrvIcon20`
+`TDateRangeValue` — `[start, end]`, обе даты строками в формате `YYYYMMDD` (`dateFormatYYYYMMDD` из `src/consts/DateConst`). Пустая строка означает «дата не выбрана»; допустимо состояние, когда заполнена только одна граница.
 
-Между двумя пикерами рендерится иконка-минус 20x20 (`flex-shrink: 0`,
-чтобы не сжималась).
+### Что получают render-props
 
-### Кнопки сдвига — позиция z-index: 1
+| Поле | Кому | Значение |
+|---|---|---|
+| `value` | пикеры | Соответствующая граница диапазона (`start` или `end`). |
+| `onChange` | пикеры | Принимает строку `YYYYMMDD`; внутри применяется согласование границ (ниже). |
+| `children` | кнопки | Иконка направления (`CaretleftStrokeSrvIcon20` / `CaretrightStrokeSrvIcon20`). |
+| `className` | кнопки | Класс кнопки из LESS-модуля; при неполном диапазоне к нему добавляется литерал `disabled` (см. «Инварианты»). |
+| `disabled` | кнопки | `true`, пока заполнены не обе границы. Применить его к DOM-элементу — задача потребителя. |
+| `onClick` | кнопки | Сдвиг диапазона. На неполном диапазоне обработчик выходит, не вызывая `onChange`. |
 
-```less
-.dateRangeButton { z-index: 1; }
-```
+Объекты сформированы так, чтобы их можно было целиком спредить в `DateField` (пикеры) и `ButtonIcon` (кнопки) — именно так устроены все примеры в stories.
 
-**Зачем:** в макете кнопки могут визуально перекрываться с soft-edge
-полями пикеров (Dropdown может показываться поверх). z-index: 1 даёт
-кнопкам приоритет над содержимым пикера при совпадении контекста.
-**Не удалять** — без этого кнопки могут "уйти под" пикер.
+### Что уходит на корневой элемент
 
-### `disabled` = нет диапазона (пусто)
+`className` объединяется с внутренним классом; остальные HTML-атрибуты (`id`, `style`, `data-*`, `aria-*`, обработчики) спредятся на корневой `div`. `children` компонент принимает по типу (от `HTMLAttributes`), но игнорирует: содержимое корневого `div` полностью определяется render-props.
 
-Кнопки сдвига становятся `disabled`, пока не выбраны **обе** даты.
-Логично — не можем сдвинуть "не определённый" диапазон.
+### Согласование границ
 
-### `hideNavigation` — скрывает кнопки, не сам сдвиг
+- Новая дата «от» больше текущей «до» → `onChange([date, ""])`: дата «до» сбрасывается.
+- Новая дата «до» меньше текущей «от» → `onChange(["", date])`: дата «от» сбрасывается.
+- Если новая дата пустая или противоположная граница пустая, проверка порядка не выполняется — значение записывается как есть.
+- Сравнение строковое, без `moment`: формат `YYYYMMDD` лексикографически совпадает с хронологическим порядком. Поэтому формат дат менять нельзя (см. «Инварианты»).
 
-Внешний `shiftRange*` не публичные методы — доступ к сдвигам есть
-только через UI-кнопки. Если `hideNavigation=true`, сдвиги недоступны.
+### Сдвиг диапазона
 
-Если нужны **кастомные триггеры сдвига** (например, кнопки в другом
-месте UI), это не поддерживается — потребитель должен сам арифметику
-`moment` реализовать и пушить новое значение.
+- Обе границы сдвигаются на одну и ту же величину (`shiftDateRange` в `utils.ts`, под капотом `moment().add()`). При сдвиге на месяцы, кварталы и годы число месяца клампится по длине целевого месяца, поэтому длина диапазона в днях может измениться: `20240331` минус месяц → `20240229`.
+- Сдвиг доступен только при обеих заполненных границах: иначе кнопкам приходит `disabled: true`, а обработчик дополнительно выходит без `onChange`.
+- Валидность дат перед сдвигом не проверяется: строка не в формате `YYYYMMDD` даст `"Invalid date"` в результате. Близнец `MonthYearRange` в том же месте делает строгий `moment(..., true).isValid()` и выходит без `onChange` — эталон, если поведение решат выровнять.
 
-### Нет forwardRef — известный debt
+---
 
-`React.FC` без ref-forwarding. Потребителю ref недоступен. Если нужен —
-оборачивать в собственный div с ref (deviates от паттерна).
+## Дизайн-токены
 
-### `data-tx={process.env.npm_package_version}` — **нет**
+Собственных дизайн-токенов у компонента нет — LESS-модуль описывает только раскладку (`display: flex`, отступы разделителя и кнопок, `z-index` кнопки). Внешний вид задают компоненты, которые потребитель вернул из render-props, и цвета иконок (`paletteIndex={5}`).
 
-Этот компонент **не** ставит data-tx. Исключение из общего правила
-библиотеки. Возможно debt — при ревизии может быть добавлен.
+Вертикальный отступ разделителя и кнопок подбирается под размер поля селекторами `:has([class*="sm"])`, `:has([class*="md"])`, `:has([class*="lg"])` — по подстроке в классе вложенного поля, а не по prop компонента.
 
 ---
 
 ## Инварианты
 
-- **`value` и `onChange` — в `YYYY-MM-DD`** (`dateFormatYYYYMMDD`).
-  Лексикографическое сравнение не будет работать в других форматах.
-- **Все 4 render-props обязательны** — `renderPickerFrom`, `renderPickerTo`,
-  `renderButtonBack`, `renderButtonForward`.
-- **Инверсия диапазона очищает противоположную границу** —
-  `from > to` → чистим `to`; `to < from` → чистим `from`. Не менять.
-- **Сдвиг блокируется при пустом диапазоне** — `!start || !end` → no-op +
-  `disabled: true`.
-- **`shiftUnit` значения совместимы с moment** — не добавлять значения,
-  не поддерживаемые `moment.add/subtract`.
-- **Separator — иконка минуса 20x20** — не заменять на "–" текст
-  (не масштабируется).
-- **`.dateRangeButton { z-index: 1 }`** — не удалять.
-- **НЕТ forwardRef** — известный debt, не добавлять точечно.
-- **НЕТ data-tx** — наследованный пропуск.
+- **`forwardRef` обязателен.** `ref` уходит на корневой `<div>` — туда же, куда `className` и остальные html-атрибуты. Убирать `forwardRef` нельзя.
+- **К `className` кнопок при неполном диапазоне подмешивается литерал `disabled`**, а не класс LESS-модуля (класса `.disabled` в модуле нет). Строка уходит наружу, в `className` компонента потребителя, и на неё опираются тесты, поэтому «починка» на `styles.disabled` — изменение наблюдаемого поведения. `MonthYearRange` в том же месте ничего не подмешивает.
+- **Формат дат `YYYYMMDD` зашит в контракт**: на нём держится строковое сравнение границ и парсинг в `moment`. Ни `value`, ни аргумент `onChange` пикера в другом формате работать не будут.
+- Значения `EDateRangeShiftUnit` — это строковые единицы `moment` (`day`, `week`, `month`, `quarter`, `year`); переименование значений ломает и публичный API, и сдвиг.
+- Публичный API (`DateRange`, `IDateRangeProps`, `IDateRangeButtonProvideProps`, `IDateRangePickerProvideProps`, `TDateRangeValue`, `EDateRangeShiftUnit`) экспортируется через `src/components/DateRange/index.ts`; `TDateRangeValue` живёт в `types.ts`, остальное — в `DateRange.tsx` и `enums.ts`. `utils.ts` внутренний и в barrel не экспортируется.
+- Отступы завязаны на подстроки `sm` / `md` / `lg` в классе вложенного поля — переименование классов размеров в `FormField`-полях тихо сломает выравнивание.
+- Компонент не хардкодит текст: доступные имена полей и кнопок задаёт потребитель — библиотека мультиязычная.
+- React 17-совместимость (ветка `release-0`): не переводить на `useId` и другие React 18-only API.
 
 ---
 
 ## Accessibility
 
-- **Кнопки "назад"/"вперёд"** — потребитель отвечает за `aria-label`
-  (через render-props). DateRange не задаёт `aria-label`.
-- **`disabled`** — передаётся в render-props, обычно попадает на
-  `<button disabled>`.
-- **Separator** — декоративная иконка, screen reader её не озвучит
-  (SVG без `role`/`aria-label`).
-- **Связь полей from-to** — ARIA связи не выставлены. Если нужна
-  явная связь "это пара полей" — обёртывать в `<fieldset><legend>`.
-
----
-
-## Дизайн-токены
-
-**Нет.** Layout-компонент, разметка flex + фиксированный separator.
+- Собственной роли и aria-атрибутов у компонента нет: корневой `div` — только контейнер раскладки. Всё, что передано в `aria-*`, уходит на него.
+- Кнопки сдвига содержат только иконку, поэтому доступное имя (`aria-label` или `title`) обязан задать потребитель в своём `renderButtonBack` / `renderButtonForward`. Компонент передаёт в них лишь иконку, класс, `disabled` и `onClick`.
+- `disabled` приходит в render-prop значением — если потребитель не применит его к DOM-кнопке, она останется фокусируемой и кликабельной (клик при этом ничего не изменит).
+- Связь «от» / «до», подписи и сообщения об ошибке — на стороне полей (`DateField`), собственной валидации и `aria-live` у DateRange нет.
+- Клавиатурной навигации компонент не добавляет: порядок табуляции определяется DOM-порядком (кнопка назад → поле «от» → поле «до» → кнопка вперёд).
 
 ---
 
 ## Связанные компоненты
 
-- `DateField` (`src/components/DateField`) — типичный `renderPickerFrom`/`To`.
-- `DatePickerExtended` — низкоуровневый пикер.
-- `MonthYearField` — близнец, но для выбора отдельного периода.
-- `Button`/`ButtonIcon` — типично для `renderButtonBack`/`Forward`.
+- `MonthYearRange` — тот же сценарий для диапазона месяцев: одинаковый набор props и render-props, отличается единицами сдвига (`EMonthYearRangeShiftUnit`).
+- `DateField` — поле, ради которого сделан контракт `IDateRangePickerProvideProps`: объект пикера спредится в `DateField` целиком (`value` + `onChange`).
+- `ButtonIcon` — кнопка, ради которой сделан контракт `IDateRangeButtonProvideProps`: объект кнопки спредится в `ButtonIcon` целиком (`children` + `className` + `disabled` + `onClick`).
+
+`DatePickerExtended` и `Calendar` в DateRange не используются напрямую — они находятся внутри `DateField`.
 
 ---
 
 ## Stories
 
-`stories/DateRange/DateRange.stories.tsx`
-Примеры: `stories/DateRange/examples/`
+Основные истории: `stories/DateRange/DateRange.stories.tsx`
+Файлы примеров: `stories/DateRange/examples/`
 
-Типовые stories:
-- `Default` — два DateField + кнопки сдвига
-- `HideNavigation` — без кнопок
-- `ShiftUnits` — перебор DAY/WEEK/MONTH/QUARTER/YEAR
-- `Playground` — интерактив
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `shiftAmount` / `shiftUnit` / `hideNavigation` |
+| `Default` | `DefaultExample.tsx` | Минимальный пример: два `DateField` и два `ButtonIcon`, сдвиг на месяц |
+| `Sizes` | `SizesExample.tsx` | Размеры полей SM / MD / LG и выравнивание разделителя с кнопками |
+| `WithoutNavigation` | `WithoutNavigationExample.tsx` | `hideNavigation`: только поля, кнопки не рендерятся |
+| `Example` | `ProductionExample.tsx` | Production-композиция (`Example: production`): поля с описанием и ссылкой под ними |
 
 ---
 
@@ -272,4 +138,279 @@ const shiftRangeBack = () => {
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-09-18 | Создан документ. Компонент переведён с `React.FC` на `forwardRef`: `ref` уходит на корневой `<div>`, тип стал `React.ForwardRefExoticComponent`. AI-рефакторинг: логика сдвига вынесена в `utils.ts` (`shiftDateRange`), добавлены JSDoc и unit-тесты на хелпер. Остальной публичный API и поведение не изменились |
+| 2026-09-18 | По итогам ревью: обработчики сдвига сведены в один `shiftRange(amount)`; `TDateRangeValue` вынесен в `types.ts` и реэкспортируется из `index.ts` (набор публичных имён не изменился) |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/DateRange/examples/DefaultExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    ButtonIcon,
+    DateField,
+    DateRange,
+    EDateRangeShiftUnit,
+    IDateRangeButtonProvideProps,
+    IDateRangePickerProvideProps,
+    TDateRangeValue,
+    FormFieldMaskedInput,
+} from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => {
+    const [value, setValue] = useState<TDateRangeValue>(["", ""]);
+    const renderPicker = (props: IDateRangePickerProvideProps) => (
+        <DateField
+            label="Label"
+            placeholderMask={FormFieldMaskedInput.presets.placeholderMasks.date}
+            invalidDateHint="Указана недоступная для выбора дата."
+            {...props}
+        />
+    );
+    const renderButtonBack = (props: IDateRangeButtonProvideProps) => (
+        <ButtonIcon aria-label="Предыдущий период" {...props} />
+    );
+    const renderButtonForward = (props: IDateRangeButtonProvideProps) => (
+        <ButtonIcon aria-label="Следующий период" {...props} />
+    );
+
+    return (
+        <div style={{ maxWidth: "400px" }}>
+            <DateRange
+                value={value}
+                onChange={setValue}
+                shiftAmount={1}
+                shiftUnit={EDateRangeShiftUnit.MONTH}
+                renderPickerFrom={renderPicker}
+                renderPickerTo={renderPicker}
+                renderButtonBack={renderButtonBack}
+                renderButtonForward={renderButtonForward}
+            />
+        </div>
+    );
+};
+```
+
+### Sizes
+
+`stories/DateRange/examples/SizesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    ButtonIcon,
+    DateField,
+    DateRange,
+    EDateRangeShiftUnit,
+    IDateRangeButtonProvideProps,
+    IDateRangePickerProvideProps,
+    TDateRangeValue,
+    FormFieldMaskedInput,
+    EComponentSize,
+} from "@sberbusiness/triplex-next";
+
+export const SizesExample = () => {
+    const [valueSM, setValueSM] = useState<TDateRangeValue>(["", ""]);
+    const [valueMD, setValueMD] = useState<TDateRangeValue>(["", ""]);
+    const [valueLG, setValueLG] = useState<TDateRangeValue>(["", ""]);
+
+    const renderPickerSM = (props: IDateRangePickerProvideProps) => (
+        <DateField
+            label="Label"
+            placeholderMask={FormFieldMaskedInput.presets.placeholderMasks.date}
+            invalidDateHint="Указана недоступная для выбора дата."
+            size={EComponentSize.SM}
+            {...props}
+        />
+    );
+    const renderPickerMD = (props: IDateRangePickerProvideProps) => (
+        <DateField
+            label="Label"
+            placeholderMask={FormFieldMaskedInput.presets.placeholderMasks.date}
+            invalidDateHint="Указана недоступная для выбора дата."
+            size={EComponentSize.MD}
+            {...props}
+        />
+    );
+
+    const renderPickerLG = (props: IDateRangePickerProvideProps) => (
+        <DateField
+            label="Label"
+            placeholderMask={FormFieldMaskedInput.presets.placeholderMasks.date}
+            invalidDateHint="Указана недоступная для выбора дата."
+            size={EComponentSize.LG}
+            {...props}
+        />
+    );
+    const renderButtonBack = (props: IDateRangeButtonProvideProps) => (
+        <ButtonIcon aria-label="Предыдущий период" {...props} />
+    );
+    const renderButtonForward = (props: IDateRangeButtonProvideProps) => (
+        <ButtonIcon aria-label="Следующий период" {...props} />
+    );
+
+    return (
+        <div style={{ display: "flex", gap: 24, flexDirection: "column" }}>
+            <div>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+                <DateRange
+                    value={valueSM}
+                    onChange={setValueSM}
+                    shiftAmount={1}
+                    shiftUnit={EDateRangeShiftUnit.MONTH}
+                    renderPickerFrom={renderPickerSM}
+                    renderPickerTo={renderPickerSM}
+                    renderButtonBack={renderButtonBack}
+                    renderButtonForward={renderButtonForward}
+                />
+            </div>
+
+            <div>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+                <DateRange
+                    value={valueMD}
+                    onChange={setValueMD}
+                    shiftAmount={1}
+                    shiftUnit={EDateRangeShiftUnit.MONTH}
+                    renderPickerFrom={renderPickerMD}
+                    renderPickerTo={renderPickerMD}
+                    renderButtonBack={renderButtonBack}
+                    renderButtonForward={renderButtonForward}
+                />
+            </div>
+
+            <div>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+                <DateRange
+                    value={valueLG}
+                    onChange={setValueLG}
+                    shiftAmount={1}
+                    shiftUnit={EDateRangeShiftUnit.MONTH}
+                    renderPickerFrom={renderPickerLG}
+                    renderPickerTo={renderPickerLG}
+                    renderButtonBack={renderButtonBack}
+                    renderButtonForward={renderButtonForward}
+                />
+            </div>
+        </div>
+    );
+};
+```
+
+### WithoutNavigation
+
+`stories/DateRange/examples/WithoutNavigationExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    DateField,
+    DateRange,
+    IDateRangePickerProvideProps,
+    TDateRangeValue,
+    FormFieldMaskedInput,
+} from "@sberbusiness/triplex-next";
+
+export const WithoutNavigationExample = () => {
+    const [value, setValue] = useState<TDateRangeValue>(["", ""]);
+    const renderPicker = (props: IDateRangePickerProvideProps) => (
+        <DateField
+            label="Label"
+            placeholderMask={FormFieldMaskedInput.presets.placeholderMasks.date}
+            invalidDateHint="Указана недоступная для выбора дата."
+            {...props}
+        />
+    );
+
+    return (
+        <div style={{ maxWidth: "300px" }}>
+            <DateRange
+                value={value}
+                onChange={setValue}
+                hideNavigation
+                renderPickerFrom={renderPicker}
+                renderPickerTo={renderPicker}
+                renderButtonBack={() => null}
+                renderButtonForward={() => null}
+            />
+        </div>
+    );
+};
+```
+
+### Example
+
+`stories/DateRange/examples/ProductionExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    ButtonIcon,
+    DateField,
+    DateRange,
+    EDateRangeShiftUnit,
+    IDateRangeButtonProvideProps,
+    IDateRangePickerProvideProps,
+    TDateRangeValue,
+    FormFieldMaskedInput,
+    Text,
+    ETextSize,
+    EFontType,
+    Link,
+} from "@sberbusiness/triplex-next";
+
+export const ProductionExample = () => {
+    const [value, setValue] = useState<TDateRangeValue>(["", ""]);
+
+    const handleLinkClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+        event.preventDefault();
+    };
+
+    const renderPicker = (props: IDateRangePickerProvideProps) => (
+        <DateField
+            label="Label"
+            placeholderMask={FormFieldMaskedInput.presets.placeholderMasks.date}
+            invalidDateHint="Указана недоступная для выбора дата."
+            targetProps={{
+                description: (
+                    <Text size={ETextSize.B4} type={EFontType.SECONDARY}>
+                        (21) Description{" "}
+                        <Link href="#" onClick={handleLinkClick}>
+                            Link text
+                        </Link>
+                    </Text>
+                ),
+            }}
+            {...props}
+        />
+    );
+
+    const renderButtonBack = (props: IDateRangeButtonProvideProps) => (
+        <ButtonIcon aria-label="Предыдущий период" {...props} />
+    );
+    const renderButtonForward = (props: IDateRangeButtonProvideProps) => (
+        <ButtonIcon aria-label="Следующий период" {...props} />
+    );
+
+    return (
+        <div style={{ maxWidth: "400px" }}>
+            <DateRange
+                value={value}
+                onChange={setValue}
+                shiftAmount={1}
+                shiftUnit={EDateRangeShiftUnit.MONTH}
+                renderPickerFrom={renderPicker}
+                renderPickerTo={renderPicker}
+                renderButtonBack={renderButtonBack}
+                renderButtonForward={renderButtonForward}
+            />
+        </div>
+    );
+};
+```
+

package/bundle/components/FooterPage.md

@@ -115,6 +115,7 @@ version: "1.0"
 
 | Дата | Изменение |
 |---|---|
+| 2026-09-16 | Добавлен отступ `padding-bottom: 8px` для футера с `type={EFooterPageType.SECOND}`. |
 | 2026-08-06 | Sticky-позиционирование доступно вне `LightBox` при ширине viewport от 992px и отключено при высоте viewport не больше 800px. |
 | 2026-06-19 | Создан документ. AI-рефакторинг (clsx order, JSDoc на props, displayName), unit-тесты, миграция stories на modern pattern. |