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

package/bundle/components/Carousel.md

@@ -0,0 +1,671 @@
+---
+component: Carousel
+category: Carousel
+related: [CarouselViewport, CarouselItem, CarouselIndicators, CarouselPrevButton, CarouselNextButton, CarouselExtended]
+tokens: []
+stories: stories/Carousel/Carousel.stories.tsx
+version: "1.0"
+---
+
+# Carousel
+
+## Назначение
+
+Контейнер составной карусели: хранит положение ленты, измеряет слайды и область
+просмотра, вычисляет границы прокрутки и передаёт состояние навигации через
+контекст. Разметку слайдов и расположение навигации собирает потребитель.
+
+Используй когда: нужны слайды переменного размера, горизонтальная или вертикальная
+прокрутка, переключение по элементам либо по автоматически рассчитанным страницам.
+
+Не используй когда: нужна свободно прокручиваемая горизонтальная лента с заданным
+шагом в пикселях — для этого `CarouselExtended`. Для переключения разделов страницы
+с подписями используй семейство `Tabs`.
+
+Публичный импорт: `import { Carousel } from "@sberbusiness/triplex-next"`.
+`ECarouselScrollMode` и `EOrientation` доступны из того же пакета. Части доступны как статические поля `Carousel`,
+самостоятельных именованных экспортов `CarouselViewport` / `CarouselItem` /
+`CarouselIndicators` / `CarouselPrevButton` / `CarouselNextButton` в barrel нет.
+
+---
+
+## Варианты и props
+
+Обязательных props нет. `ICarouselProps` расширяет стандартные HTML-атрибуты
+`<div>`; `children` задаёт композицию, а `className`, `style`, `aria-*`, `data-*`
+и обработчики передаются на корневой элемент.
+
+| Prop | По умолчанию | Назначение и ограничения |
+|---|---|---|
+| `orientation` | `EOrientation.HORIZONTAL` | `HORIZONTAL` (`"horizontal"`) измеряет ширины и двигает ленту по X; `VERTICAL` (`"vertical"`) — высоты и по Y |
+| `scrollMode` | `ECarouselScrollMode.ITEM` | `ITEM` (`"item"`) раскрывает следующий или предыдущий скрытый элемент; `PAGE` (`"page"`) объединяет последовательные элементы в страницы |
+| `gap` | `16` | Расстояние между слайдами в px. Участвует и в CSS-раскладке, и в расчётах геометрии; передавай конечное неотрицательное число |
+| `viewportPadding` | `0` | Отступы области просмотра в px: число либо readonly-кортеж из 2, 3 или 4 чисел по правилам CSS shorthand. Отрицательные значения, `NaN` и `±Infinity` нормализуются в `0` |
+| `children` | — | `Carousel.Viewport` с лентой слайдов и необязательная навигация |
+
+### Сборка композиции
+
+```tsx
+import { Carousel, ECarouselScrollMode } from "@sberbusiness/triplex-next";
+
+<Carousel scrollMode={ECarouselScrollMode.PAGE} aria-label="Предложения">
+    <Carousel.Viewport style={{ height: 240 }}>
+        <Carousel.Track>
+            <Carousel.Item index={0} style={{ width: 320 }}>Первый слайд</Carousel.Item>
+            <Carousel.Item index={1} style={{ width: 320 }}>Второй слайд</Carousel.Item>
+        </Carousel.Track>
+        <Carousel.PrevButton aria-label="Предыдущий слайд" />
+        <Carousel.NextButton aria-label="Следующий слайд" />
+    </Carousel.Viewport>
+    <Carousel.Indicators
+        aria-label="Страницы предложений"
+        indicatorProps={({ page }) => ({ "aria-label": `Страница ${page}` })}
+    />
+</Carousel>
+```
+
+`Carousel.Viewport` ограничивает видимую область, `Carousel.Track` располагает
+слайды и применяет смещение. Задай размер области просмотра и слайдов так, чтобы
+было что измерять; для вертикальной карусели особенно важна ограниченная высота.
+`index` у `Carousel.Item` — последовательный индекс с нуля, соответствующий
+DOM-порядку, а `key` — стабильный идентификатор данных. После удаления или
+перестановки элементов индексы нужно пересчитать.
+
+### Навигация и пересчёт геометрии
+
+- В режиме `ITEM` выбор следующего элемента может перескочить через уже видимые
+  элементы. Если слайд больше области просмотра, он сначала прокручивается
+  внутри себя на размер области, без смены текущего индекса. Это не фиксированный
+  шаг в px и не обязательная смена индекса на единицу.
+- В режиме `PAGE` элементы группируются по размеру области просмотра за вычетом
+  `viewportPadding` по оси прокрутки и с учётом `gap`; группа центрируется в этой
+  области, итоговое смещение ограничивается краями контента.
+  Количество страниц зависит от размеров, а не равно количеству слайдов.
+- Смена `gap`, `scrollMode` или `orientation` сбрасывает текущий индекс на `0`.
+  Изменение `viewportPadding` пересчитывает смещение без такого сброса.
+- `viewportPadding` задаёт padding именно `Viewport`, участвует в расчёте границ
+  прокрутки и видимости слайдов. Списки чисел мемоизируются по значению: новый
+  массив с теми же числами не требует нового расчёта нормализованных отступов.
+- `ResizeObserver` следит за `Viewport` и `Track`, очищает кэш размеров и
+  пересчитывает положение текущего элемента/страницы. В режиме `PAGE`, если
+  после пересчёта страниц стало меньше, индекс ограничивается в
+  `requestAnimationFrame`; в `ITEM` индекс не ограничивается.
+- `offset`, текущий индекс и количество страниц — внутреннее состояние.
+  Управляемого индекса, callback смены страницы, зацикливания и автопрокрутки
+  в API корневого `Carousel` нет.
+
+---
+
+## Дизайн-токены
+
+У корневого `.carousel` собственных дизайн-токенов нет: он задаёт flex-раскладку
+и ориентацию. Поэтому `tokens` в frontmatter пуст.
+
+В общем `styles/Carousel.module.less` токены `Carousel.Button_*` относятся к
+`Carousel.PrevButton` / `Carousel.NextButton`; оформление индикаторов приходит
+из `PageIndicators`. Эти контракты принадлежат соответствующим частям композиции.
+Переопределение токенов описано в
+[ThemeProvider-ai.md](../ThemeProvider/ThemeProvider-ai.md).
+
+`--triplex-next-runtime-carousel-gap`, `--triplex-next-runtime-carousel-transform`
+и `--triplex-next-runtime-carousel-viewport-padding` — внутренние runtime-переменные
+`Track` / `Viewport`, вычисленные из props и состояния. Это не дизайн-токены,
+не добавляй их в `ThemeProvider` или сгенерированные файлы тем.
+
+---
+
+## Инварианты
+
+- `forwardRef` сохраняется. Ref корневого `Carousel` указывает на его внешний
+  `HTMLDivElement`, а не на `Viewport` или `Track`. `className`, `style` и
+  остальные HTML-атрибуты остаются на этом же узле.
+- Публичные `Carousel`, `ICarouselProps`, `ECarouselScrollMode` и статические поля
+  `Viewport`, `Track`, `Item`, `PrevButton`, `NextButton`, `Indicators` сохраняют
+  имена и сигнатуры. Сохраняются все существующие экспорты `index.ts`.
+- `displayName` корня — `"Carousel"`; CSS-классы `carousel`, `horizontal`,
+  `vertical` и существующие story IDs сохраняются.
+- Части композиции используют контекст ближайшего `Carousel`. Для одной карусели
+  предусмотрены одна область просмотра и одна лента: refs не регистрируют
+  несколько `Viewport` / `Track`.
+- Слайды регистрируются по `index` в `Map`. Геометрия обходит диапазон
+  `0..count-1`, поэтому индексы должны быть уникальными, непрерывными и
+  соответствовать порядку слайдов.
+- `orientationRef`, `offsetRef` и `currentIndexRef` стабильны: они позволяют
+  обработчикам жестов и `ResizeObserver` читать актуальные значения. Кэш
+  геометрии инвалидируется при изменении конфигурации и ресайзе.
+- `ResizeObserver` отключается при cleanup, отложенный пересчёт индекса через
+  `requestAnimationFrame` отменяется при размонтировании.
+- Код остаётся совместимым с React 17 при синхронизации в `release-0`.
+
+---
+
+## Accessibility
+
+- Корень — обычный `<div>` без встроенной роли или локализованных ARIA-текстов.
+  Название карусели и при необходимости `role="region"` задаёт потребитель.
+- `Track` имеет `role="presentation"`, слайды — `role="group"`. Имена групп,
+  подписи содержимого и связи с соответствующими страницами задаёт потребитель.
+- Корневой `Carousel` и `Viewport` не обрабатывают клавиши-стрелки. С клавиатуры
+  можно использовать обычные кнопки навигации; в режиме `PAGE` индикаторы
+  наследуют клавиатурную навигацию `PageIndicators`.
+- `PrevButton` / `NextButton` показывают край через `aria-disabled`, а не через
+  нативный `disabled`: они остаются фокусируемыми, собственный переход на краю
+  блокируется, пользовательский `onClick` по-прежнему вызывается. Дай кнопкам
+  доступные имена через `aria-label`.
+- На устройствах с `(pointer: coarse)` стрелки не рендерятся. `Viewport`
+  поддерживает touch-жесты вдоль своей оси и сохраняет прокрутку страницы по
+  поперечной оси. Переход происходит после жеста больше `50px`.
+- В `ITEM` индикаторы отсутствуют; в `PAGE` они используют `role="tablist"` и
+  кнопки `role="tab"`. Подписи ряда и индикаторов задаёт потребитель.
+- Слайды, вышедшие за видимую область, не получают `aria-hidden` или `inert`
+  автоматически. Фокус не переносится при прокрутке; интерактивность содержимого
+  и доступность скрытых элементов требуют решения на стороне продукта.
+- При `prefers-reduced-motion: reduce` CSS-переход ленты отключается.
+
+---
+
+## Связанные компоненты
+
+- `CarouselViewport` (`Carousel.Viewport`) — область просмотра с padding,
+  touch-жестами и ref на измеряемый контейнер; самостоятельный контракт семейства.
+- `CarouselItem` (`Carousel.Item`) — слайд с обязательным `index`, регистрирует
+  DOM-узел для измерений и убирает его при размонтировании.
+- `CarouselIndicators` (`Carousel.Indicators`) — связывает `PageIndicators` с
+  текущей страницей и количеством страниц контекста, работает только в `PAGE`.
+- [CarouselPrevButton](CarouselPrevButton-ai.md) / [CarouselNextButton](CarouselNextButton-ai.md) (`Carousel.PrevButton` /
+  `Carousel.NextButton`) — стрелки навигации с граничным `aria-disabled` и
+  адаптацией к `(pointer: coarse)`.
+- `Carousel.Track` — часть без отдельного AI.md: `<div role="presentation">`,
+  объединяет внешний ref с ref контекста, применяет `gap` и смещение через
+  runtime-переменные. Принимает стандартные HTML-атрибуты, объединяет `className`,
+  передаёт `children`; отдельного API управления прокруткой не имеет.
+- [CarouselExtended](../CarouselExtended/CarouselExtended-ai.md) — альтернатива
+  для свободно прокручиваемой горизонтальной ленты со своим шагом в px и
+  render-функциями кнопок.
+
+---
+
+## Stories
+
+Основные истории: `stories/Carousel/Carousel.stories.tsx`.
+Файлы примеров: `stories/Carousel/examples/`.
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Выбор ориентации, режима прокрутки и зазора |
+| `Default` | `Default.tsx` | Горизонтальная карусель со слайдами переменной ширины |
+| `ScrollModes` | `ScrollModes.tsx` | Сравнение `ITEM` и `PAGE`, индикаторы в постраничном режиме |
+| `Orientations` | `Orientations.tsx` | Горизонтальная и вертикальная раскладка, отдельный `gap` для каждой |
+| `Production` | `Production.tsx` | Карточки действий со вложенными кнопками, `viewportPadding={8}` |
+| `DynamicIndicators` | `DynamicIndicators.tsx` | Автоматический расчёт страниц и окно индикаторов для длинной ленты |
+
+У `ScrollModes` и `Orientations` есть Linux/CI baseline-скриншоты на `xs` / `xl`
+в `__screenshots__/`. Скрытая story `VisualTests` также снимается и проверяет
+состояния кнопок навигации. Остальные текущие stories исключены из
+скриншот-прогона через `testRunner.skip`; `Playground` также не попадает
+в MCP-примеры.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-10-29 | Добавлены ссылки на отдельную AI-документацию кнопок навигации. |
+| 2026-10-21 | В режиме `PAGE` группировка и центрирование страниц учитывают `viewportPadding`: группа больше не выходит за видимую область. |
+| 2026-10-20 | Создан документ. Завершён аудит Carousel в TRI-163: уточнены JSDoc и стабильные зависимости hooks, проверены существующие stories и дополнены тесты корневого контракта. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Carousel/examples/Default.tsx`
+
+```tsx
+import React from "react";
+import { Carousel } from "@sberbusiness/triplex-next";
+
+const BASE_ITEM_STYLE: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    borderRadius: "8px",
+    color: "#ffffff",
+    fontSize: "24px",
+    fontWeight: "bold",
+    userSelect: "none",
+};
+
+export const Default = () => {
+    const itemSizes = [92, 168, 220, 244, 252, 256, 252, 244, 220, 168, 92];
+    const items = itemSizes.map((size, index) => {
+        const totalItems = itemSizes.length;
+        const hue = (index / (totalItems - 1)) * 280;
+
+        return {
+            id: index + 1,
+            size,
+            backgroundColor: `hsl(${hue}, 50%, 50%)`,
+        };
+    });
+
+    const boxStyle: React.CSSProperties = {
+        width: "100%",
+        height: "256px",
+        maxWidth: "512px",
+    };
+
+    return (
+        <div style={boxStyle}>
+            <Carousel>
+                <Carousel.Viewport>
+                    <Carousel.Track>
+                        {items.map((item, index) => (
+                            <Carousel.Item
+                                key={item.id}
+                                index={index}
+                                style={{
+                                    ...BASE_ITEM_STYLE,
+                                    width: item.size,
+                                    height: "100%",
+                                    backgroundColor: item.backgroundColor,
+                                }}
+                            >
+                                {item.id}
+                            </Carousel.Item>
+                        ))}
+                    </Carousel.Track>
+                    <Carousel.PrevButton aria-label="Previous slide" />
+                    <Carousel.NextButton aria-label="Next slide" />
+                </Carousel.Viewport>
+            </Carousel>
+        </div>
+    );
+};
+```
+
+### ScrollModes
+
+`stories/Carousel/examples/ScrollModes.tsx`
+
+```tsx
+import React from "react";
+import { Carousel, ECarouselScrollMode } from "@sberbusiness/triplex-next";
+
+interface ScrollModeItemProps {
+    scrollMode: ECarouselScrollMode;
+}
+
+const BASE_ITEM_STYLE: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    height: "256px",
+    borderRadius: "8px",
+    color: "#ffffff",
+    fontSize: "24px",
+    fontWeight: "bold",
+    userSelect: "none",
+};
+
+const ScrollModeItem = ({ scrollMode }: ScrollModeItemProps) => {
+    const itemSizes = [92, 168, 220, 244, 252, 256, 252, 244, 220, 168, 92];
+    const items = itemSizes.map((size, index) => {
+        const totalItems = itemSizes.length;
+        const hue = (index / (totalItems - 1)) * 280;
+
+        return {
+            id: index + 1,
+            size,
+            backgroundColor: `hsl(${hue}, 50%, 50%)`,
+        };
+    });
+
+    const containerStyle: React.CSSProperties = {
+        maxWidth: "512px",
+    };
+
+    return (
+        <div style={containerStyle}>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{scrollMode.toUpperCase()}</div>
+            <Carousel scrollMode={scrollMode}>
+                <Carousel.Viewport>
+                    <Carousel.Track>
+                        {items.map((item, index) => (
+                            <Carousel.Item
+                                key={item.id}
+                                index={index}
+                                style={{
+                                    ...BASE_ITEM_STYLE,
+                                    width: item.size,
+                                    backgroundColor: item.backgroundColor,
+                                }}
+                            >
+                                {item.id}
+                            </Carousel.Item>
+                        ))}
+                    </Carousel.Track>
+                    <Carousel.PrevButton aria-label="Previous slide" />
+                    <Carousel.NextButton aria-label="Next slide" />
+                </Carousel.Viewport>
+                <Carousel.Indicators />
+            </Carousel>
+        </div>
+    );
+};
+
+const SCROLL_MODES = Object.values(ECarouselScrollMode);
+
+export const ScrollModes = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {SCROLL_MODES.map((scrollMode) => (
+            <ScrollModeItem key={scrollMode} scrollMode={scrollMode} />
+        ))}
+    </div>
+);
+```
+
+### Orientations
+
+`stories/Carousel/examples/Orientations.tsx`
+
+```tsx
+import React from "react";
+import { Carousel, EOrientation } from "@sberbusiness/triplex-next";
+
+interface OrientationItemProps {
+    orientation: EOrientation;
+}
+
+const BASE_ITEM_STYLE: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    borderRadius: "8px",
+    color: "#ffffff",
+    fontSize: "24px",
+    fontWeight: "bold",
+    userSelect: "none",
+};
+
+const ORIENTATION_TO_ITEM_DIMENSIONS_MAP: Record<EOrientation, (size: number) => React.CSSProperties> = {
+    [EOrientation.HORIZONTAL]: (size) => ({
+        width: size,
+        height: "100%",
+    }),
+    [EOrientation.VERTICAL]: (size) => ({
+        width: "100%",
+        height: size / 2,
+    }),
+};
+
+const ORIENTATION_TO_GAP_MAP: Record<EOrientation, number> = {
+    [EOrientation.HORIZONTAL]: 16,
+    [EOrientation.VERTICAL]: 8,
+};
+
+const OrientationItem = ({ orientation }: OrientationItemProps) => {
+    const itemSizes = [92, 168, 220, 244, 252, 256, 252, 244, 220, 168, 92];
+    const items = itemSizes.map((size, index) => {
+        const totalItems = itemSizes.length;
+        const hue = (index / (totalItems - 1)) * 280;
+
+        return {
+            id: index + 1,
+            size,
+            backgroundColor: `hsl(${hue}, 50%, 50%)`,
+        };
+    });
+
+    const containerStyle: React.CSSProperties = {
+        maxWidth: "512px",
+    };
+
+    const viewportStyle: React.CSSProperties = {
+        height: "256px",
+    };
+
+    return (
+        <div style={containerStyle}>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{orientation.toUpperCase()}</div>
+            <Carousel orientation={orientation} gap={ORIENTATION_TO_GAP_MAP[orientation]}>
+                <Carousel.Viewport style={viewportStyle}>
+                    <Carousel.Track>
+                        {items.map((item, index) => {
+                            const itemStyle: React.CSSProperties = {
+                                ...BASE_ITEM_STYLE,
+                                ...ORIENTATION_TO_ITEM_DIMENSIONS_MAP[orientation](item.size),
+                                backgroundColor: item.backgroundColor,
+                            };
+
+                            return (
+                                <Carousel.Item key={item.id} index={index} style={itemStyle}>
+                                    {item.id}
+                                </Carousel.Item>
+                            );
+                        })}
+                    </Carousel.Track>
+                    <Carousel.PrevButton aria-label="Previous slide" />
+                    <Carousel.NextButton aria-label="Next slide" />
+                </Carousel.Viewport>
+                <Carousel.Indicators />
+            </Carousel>
+        </div>
+    );
+};
+
+const ORIENTATIONS = Object.values(EOrientation);
+
+export const Orientations = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        {ORIENTATIONS.map((orientation) => (
+            <OrientationItem key={orientation} orientation={orientation} />
+        ))}
+    </div>
+);
+```
+
+### Production
+
+`stories/Carousel/examples/Production.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Carousel,
+    CardAction,
+    ECardRoundingSize,
+    ECardTheme,
+    ECardContentPaddingSize,
+    Title,
+    ETitleSize,
+    EFontWeightTitle,
+    Text,
+    ETextSize,
+    EFontType,
+    Gap,
+    Link,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+const CARDS_IDS = Array.from({ length: 6 }, (_, i) => i);
+
+const CardBody = () => (
+    <CardAction.Content.Body>
+        {[1, 2, 3].map((item) => (
+            <div key={item} style={{ display: "flex", alignItems: "center", marginTop: item > 1 ? "16px" : "0" }}>
+                <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                <Text size={ETextSize.B3} style={{ marginLeft: "8px" }}>
+                    List item text
+                </Text>
+            </div>
+        ))}
+        <Gap size={8} />
+        <Text tag="div" type={EFontType.SECONDARY} size={ETextSize.B4}>
+            This message provides additional context or highlights important information to note.
+        </Text>
+        <Gap size={8} />
+        <Text tag="div" type={EFontType.PRIMARY} size={ETextSize.B3}>
+            <Link onKeyDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
+                Link text
+            </Link>
+        </Text>
+    </CardAction.Content.Body>
+);
+
+export const Production = () => {
+    const [selectedId, setSelectedId] = useState<number | null>(null);
+
+    return (
+        <div style={{ width: "100%", maxWidth: "752px" }}>
+            <Carousel viewportPadding={8}>
+                <Carousel.Viewport>
+                    <Carousel.Track>
+                        {CARDS_IDS.map((id, index) => {
+                            const selected = selectedId === id;
+
+                            return (
+                                <Carousel.Item
+                                    key={id}
+                                    index={index}
+                                    style={{
+                                        width: "216px",
+                                        height: "100%",
+                                        boxSizing: "border-box",
+                                    }}
+                                >
+                                    <CardAction
+                                        roundingSize={ECardRoundingSize.MD}
+                                        theme={ECardTheme.GENERAL}
+                                        selected={selected}
+                                        toggle={() => setSelectedId(selected ? null : id)}
+                                    >
+                                        <CardAction.Media
+                                            style={{
+                                                backgroundImage: "url(assets/images/evotor.png)",
+                                                height: "129px",
+                                            }}
+                                        />
+                                        <CardAction.Content paddingSize={ECardContentPaddingSize.SM}>
+                                            <CardAction.Content.Header>
+                                                <Title tag="div" size={ETitleSize.H3} weight={EFontWeightTitle.REGULAR}>
+                                                    Title Text
+                                                </Title>
+                                            </CardAction.Content.Header>
+
+                                            <CardBody />
+
+                                            <CardAction.Content.Footer>
+                                                <Button
+                                                    theme={
+                                                        selected ? EButtonTheme.SECONDARY_LIGHT : EButtonTheme.SECONDARY
+                                                    }
+                                                    size={EComponentSize.SM}
+                                                    onKeyDown={(event) => event.stopPropagation()}
+                                                    onClick={(event) => event.stopPropagation()}
+                                                >
+                                                    Button text
+                                                </Button>
+                                            </CardAction.Content.Footer>
+                                        </CardAction.Content>
+                                    </CardAction>
+                                </Carousel.Item>
+                            );
+                        })}
+                    </Carousel.Track>
+                    <Carousel.PrevButton aria-label="Previous slide" />
+                    <Carousel.NextButton aria-label="Next slide" />
+                </Carousel.Viewport>
+            </Carousel>
+        </div>
+    );
+};
+```
+
+### DynamicIndicators
+
+`stories/Carousel/examples/DynamicIndicators.tsx`
+
+```tsx
+import React from "react";
+import { Carousel, ECarouselScrollMode } from "@sberbusiness/triplex-next";
+
+const BASE_ITEM_STYLE: React.CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    boxSizing: "border-box",
+    borderRadius: "8px",
+    color: "#ffffff",
+    fontSize: "24px",
+    fontWeight: "bold",
+    userSelect: "none",
+};
+
+export const DynamicIndicators = () => {
+    const itemSizes = Array.from({ length: 20 }, () => 128);
+
+    const items = itemSizes.map((size, index) => {
+        const totalItems = itemSizes.length;
+        const hue = (index / (totalItems - 1)) * 280;
+
+        return {
+            id: index + 1,
+            size,
+            backgroundColor: `hsl(${hue}, 50%, 50%)`,
+        };
+    });
+
+    const boxStyle: React.CSSProperties = {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        width: "100%",
+        maxWidth: "512px",
+    };
+
+    const containerStyle: React.CSSProperties = {
+        width: "100%",
+        height: "256px",
+    };
+
+    return (
+        <div style={boxStyle}>
+            <div style={containerStyle}>
+                <Carousel scrollMode={ECarouselScrollMode.PAGE}>
+                    <Carousel.Viewport>
+                        <Carousel.Track>
+                            {items.map((item, index) => (
+                                <Carousel.Item
+                                    key={item.id}
+                                    index={index}
+                                    style={{
+                                        ...BASE_ITEM_STYLE,
+                                        width: item.size,
+                                        height: "100%",
+                                        backgroundColor: item.backgroundColor,
+                                    }}
+                                >
+                                    {item.id}
+                                </Carousel.Item>
+                            ))}
+                        </Carousel.Track>
+                        <Carousel.PrevButton aria-label="Previous slide" />
+                        <Carousel.NextButton aria-label="Next slide" />
+                    </Carousel.Viewport>
+                    <Carousel.Indicators />
+                </Carousel>
+            </div>
+        </div>
+    );
+};
+```
+