@sberbusiness/triplex-next-mcp-server 0.24.0-beta2 → 1.40.0-beta

package/bundle/components/CheckboxXGroup.md

@@ -1,109 +1,172 @@
 ---
 component: CheckboxXGroup
 category: Inputs
-figma-node: ""
-figma-file: ""
 related: [Checkbox]
 tokens: []
-stories: stories/Checkbox/Checkbox.stories.tsx
+stories: stories/CheckboxXGroup/CheckboxXGroup.stories.tsx
 version: "1.0"
 ---
 
 # CheckboxXGroup
 
 ## Назначение
-Компонент-группа для компоновки чекбоксов с направлением по оси `X`.
-Используется как контейнер для нескольких `Checkbox`, когда нужно разложить их в строку с переносами.
+
+Компонент-группа для компоновки чекбоксов с направлением по оси `X`. Используется как контейнер для нескольких `Checkbox`, когда нужно разложить их в строку с переносами.
+
+Используй когда: несколько связанных чекбоксов нужно разместить в строку.
+Не используй когда: чекбоксы должны идти вертикально — используй `CheckboxYGroup`.
 
 ---
 
 ## Варианты и props
+
+### Обязательные props
+
+Обязательных custom-props нет.
+
 ### Опциональные props
+
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
 | `indent` | `TIndentSize` | `12` | Отступы/зазоры между чекбоксами в группе. Возможные значения: `12, 16, 20, 24, 28, 32`. |
 | `children` | `React.ReactNode` | — | Внутри обычно рендерятся `Checkbox`. |
 | `...divAttributes` | `React.HTMLAttributes<HTMLDivElement>` | — | Все стандартные HTML-атрибуты для корневого элемента. |
 
----
+### Ограничения использования
 
-## Ключевые особенности реализации
-- Корневой элемент: `<div role="group">`.
-- Разметка: `inline-flex` и `flex-flow: row wrap`.
-- `indent` управляет применением LESS-класса `indent-{n}` и задает отрицательные/положительные маргины для выравнивания сетки.
+- Корневой элемент — `<div role="group">`, разметка построена на `inline-flex` и `flex-flow: row wrap`.
+- `indent` управляет применением LESS-класса `indent-{n}` и задаёт отрицательные/положительные маргины для выравнивания сетки.
 
 ---
 
-## Accessibility
-- `role="group"` описывает группу взаимосвязанных контролов.
-- Семантика чекбоксов остается нативной на уровне `Checkbox` внутри группы.
+## Дизайн-токены
+
+Компонент не использует собственных CSS-переменных. Все визуальные стили наследуются от `Checkbox`.
 
 ---
 
 ## Инварианты
+
 - `forwardRef` обязателен и должен указывать на корневой `<div>`.
 - Корневой DOM-элемент компонента — `<div>`, роль зафиксирована как `role="group"`.
 
 ---
 
+## Accessibility
+
+- `role="group"` описывает группу взаимосвязанных контролов.
+- Семантика чекбоксов остаётся нативной на уровне `Checkbox` внутри группы.
+
+---
+
 ## Связанные компоненты
+
 - `Checkbox` — базовый чекбокс, обычно используется внутри `CheckboxXGroup`.
+- `CheckboxYGroup` — аналогичная группа, но с направлением по оси `Y`.
 
 ---
 
 ## Stories
-`stories/Checkbox/Checkbox.stories.tsx`
-Файлы примеров: `stories/Checkbox/examples/`
+
+Основные истории: `stories/CheckboxXGroup/CheckboxXGroup.stories.tsx`
+Файлы примеров: `stories/CheckboxXGroup/examples/`
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
-| `XGroup` | `XGroupExample.tsx` | Группа по оси X |
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `indent` |
+| `Default` | `DefaultExample.tsx` | Группа по оси X |
+| `CheckboxSizes` | `SizesExample.tsx` | Группа чекбоксов разных размеров |
+| `Indents` | `IndentsExample.tsx` | Различные значения отступа |
 
 ---
 
 ## История изменений
+
 | Дата | Изменение |
 |---|---|
 | 2026-04-16 | Приведение `CheckboxXGroup` к AI-ready: добавлен `forwardRef`, типизирован `children`, созданы AI-документ и инварианты. |
+| 2026-04-27 | Приведён в соответствие с `docs/ai/template-ai.md`: убрана секция «Ключевые особенности реализации» (содержимое перенесено в `Ограничения использования`), переставлены секции, добавлена колонка `Example file` и пустой раздел `Дизайн-токены`. |
 
 ---
 
 ## Примеры использования
 
-### XGroup
+### Default
+
+`stories/CheckboxXGroup/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxXGroup } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <CheckboxXGroup>
+        {[1, 2, 3].map((value) => (
+            <Checkbox key={value} name="checkbox-x-group" value={value}>
+                Checkbox text
+            </Checkbox>
+        ))}
+    </CheckboxXGroup>
+);
+```
+
+### CheckboxSizes
+
+`stories/CheckboxXGroup/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxXGroup, EComponentSize } from "@sberbusiness/triplex-next";
+
+const sizes = [
+    { label: "SM", size: EComponentSize.SM },
+    { label: "MD", size: EComponentSize.MD },
+    { label: "LG", size: EComponentSize.LG },
+] as const;
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {sizes.map(({ label, size }) => (
+            <div key={label}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{label}</div>
+                <CheckboxXGroup>
+                    {[1, 2, 3].map((value) => (
+                        <Checkbox key={value} name={`checkbox-x-group-${label}`} value={value} size={size}>
+                            Checkbox text
+                        </Checkbox>
+                    ))}
+                </CheckboxXGroup>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### Indents
 
-`stories/Checkbox/examples/XGroupExample.tsx`
+`stories/CheckboxXGroup/examples/IndentsExample.tsx`
 
 ```tsx
 import React from "react";
-import { Checkbox, CheckboxXGroup, EComponentSize, Gap } from "@sberbusiness/triplex-next";
-
-export const XGroupExample = () => (
-    <>
-        <CheckboxXGroup indent={16}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.SM}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-        <Gap size={16} />
-        <CheckboxXGroup indent={16}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-        <Gap size={16} />
-        <CheckboxXGroup indent={20}>
-            {[1, 2, 3].map((value) => (
-                <Checkbox key={value} name="checkbox-x-group" value={value} size={EComponentSize.LG}>
-                    Checkbox text
-                </Checkbox>
-            ))}
-        </CheckboxXGroup>
-    </>
+import { Checkbox, CheckboxXGroup } from "@sberbusiness/triplex-next";
+
+const indents = [12, 16, 20, 24, 28, 32] as const;
+
+export const IndentsExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {indents.map((indent) => (
+            <div key={indent}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{indent}px</div>
+                <CheckboxXGroup indent={indent}>
+                    {[1, 2, 3, 4].map((value) => (
+                        <Checkbox key={value} name={`checkbox-x-group-${indent}`} value={value}>
+                            Checkbox text
+                        </Checkbox>
+                    ))}
+                </CheckboxXGroup>
+            </div>
+        ))}
+    </div>
 );
 ```
 

package/bundle/components/CheckboxYGroup.md

@@ -1,112 +1,140 @@
 ---
 component: CheckboxYGroup
 category: Inputs
-figma-node: ""
-figma-file: ""
 related: [Checkbox, CheckboxXGroup]
 tokens: []
-stories: stories/Checkbox/Checkbox.stories.tsx
+stories: stories/CheckboxYGroup/CheckboxYGroup.stories.tsx
 version: "1.0"
 ---
 
 # CheckboxYGroup
 
 ## Назначение
-Компонент-группа для компоновки чекбоксов с направлением по оси `Y`.
-Используется как контейнер для нескольких `Checkbox`, когда нужно разложить их вертикально.
+
+Компонент-группа для компоновки чекбоксов с направлением по оси `Y`. Используется как контейнер для нескольких `Checkbox`, когда нужно разложить их вертикально.
+
+Используй когда: несколько связанных чекбоксов нужно разместить вертикально.
+Не используй когда: чекбоксы должны идти в строку — используй `CheckboxXGroup`.
 
 ---
 
 ## Варианты и props
+
+### Обязательные props
+
+Обязательных custom-props нет.
+
 ### Опциональные props
+
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
 | `children` | `React.ReactNode` | — | Внутри обычно рендерятся `Checkbox` (или компоненты, использующие `Checkbox`). |
 | `...divAttributes` | `React.HTMLAttributes<HTMLDivElement>` | — | Все стандартные HTML-атрибуты для корневого элемента. |
 
----
+### Ограничения использования
 
-## Ключевые особенности реализации
-- Корневой элемент: `<div role="group">`.
-- Разметка: `inline-flex` и `flex-flow: column wrap`.
+- Корневой элемент — `<div role="group">`, разметка построена на `inline-flex` и `flex-flow: column wrap`.
 
 ---
 
-## Accessibility
-- `role="group"` описывает группу взаимосвязанных контролов.
-- Семантика чекбоксов остается нативной на уровне `Checkbox` внутри группы.
+## Дизайн-токены
+
+Компонент не использует собственных CSS-переменных. Все визуальные стили наследуются от `Checkbox`.
 
 ---
 
 ## Инварианты
+
 - `forwardRef` обязателен и должен указывать на корневой `<div>`.
 - Корневой DOM-элемент компонента — `<div>`, роль зафиксирована как `role="group"`.
 
 ---
 
+## Accessibility
+
+- `role="group"` описывает группу взаимосвязанных контролов.
+- Семантика чекбоксов остаётся нативной на уровне `Checkbox` внутри группы.
+
+---
+
 ## Связанные компоненты
+
 - `Checkbox` — базовый чекбокс, обычно используется внутри `CheckboxYGroup`.
 - `CheckboxXGroup` — аналогичная группа, но с направлением по оси `X`.
 
 ---
 
 ## Stories
-`stories/Checkbox/Checkbox.stories.tsx`
-Файлы примеров: `stories/Checkbox/examples/`
+
+Основные истории: `stories/CheckboxYGroup/CheckboxYGroup.stories.tsx`
+Файлы примеров: `stories/CheckboxYGroup/examples/`
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
-| `YGroup` | `YGroupExample.tsx` | Группа по оси Y |
+| `Default` | `DefaultExample.tsx` | Группа по оси Y |
+| `CheckboxSizes` | `SizesExample.tsx` | Группа чекбоксов разных размеров |
 
 ---
 
 ## История изменений
+
 | Дата | Изменение |
 |---|---|
 | 2026-04-16 | Приведение `CheckboxYGroup` к AI-ready: добавлен `forwardRef`, типизирован `children`, созданы AI-документ и инварианты. |
+| 2026-04-27 | Приведён в соответствие с `docs/ai/template-ai.md`: убрана секция «Ключевые особенности реализации» (содержимое перенесено в `Ограничения использования`), переставлены секции, добавлена колонка `Example file` и пустой раздел `Дизайн-токены`. |
 
 ---
 
 ## Примеры использования
 
-### YGroup
+### Default
+
+`stories/CheckboxYGroup/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Checkbox, CheckboxYGroup } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <CheckboxYGroup>
+        {[1, 2, 3].map((value) => (
+            <Checkbox key={value} name="checkbox-y-group" value={value}>
+                Checkbox text
+            </Checkbox>
+        ))}
+    </CheckboxYGroup>
+);
+```
+
+### CheckboxSizes
 
-`stories/Checkbox/examples/YGroupExample.tsx`
+`stories/CheckboxYGroup/examples/SizesExample.tsx`
 
 ```tsx
 import React from "react";
-import { Checkbox, CheckboxYGroup, Col, EComponentSize, Row } from "@sberbusiness/triplex-next";
-
-export const YGroupExample = () => (
-    <Row>
-        <Col size={3}>
-            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
-                {[1, 2, 3, 4].map((value) => (
-                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.SM}>
-                        Checkbox text
-                    </Checkbox>
-                ))}
-            </CheckboxYGroup>
-        </Col>
-        <Col size={3}>
-            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
-                {[1, 2, 3, 4].map((value) => (
-                    <Checkbox key={value} name="checkbox-y-group" value={value}>
-                        Checkbox text
-                    </Checkbox>
-                ))}
-            </CheckboxYGroup>
-        </Col>
-        <Col size={3}>
-            <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
-                {[1, 2, 3, 4].map((value) => (
-                    <Checkbox key={value} name="checkbox-y-group" value={value} size={EComponentSize.LG}>
-                        Checkbox text
-                    </Checkbox>
-                ))}
-            </CheckboxYGroup>
-        </Col>
-    </Row>
+import { Checkbox, CheckboxYGroup, EComponentSize } from "@sberbusiness/triplex-next";
+
+const sizes = [
+    { label: "SM", size: EComponentSize.SM },
+    { label: "MD", size: EComponentSize.MD },
+    { label: "LG", size: EComponentSize.LG },
+] as const;
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+        {sizes.map(({ label, size }) => (
+            <div key={label}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{label}</div>
+                <CheckboxYGroup aria-labelledby="checkbox-y-group-label">
+                    {[1, 2, 3].map((value) => (
+                        <Checkbox key={value} name={`checkbox-y-group-${label}`} value={value} size={size}>
+                            Checkbox text
+                        </Checkbox>
+                    ))}
+                </CheckboxYGroup>
+            </div>
+        ))}
+    </div>
 );
 ```
 

package/bundle/components/CodeText.md

@@ -0,0 +1,197 @@
+---
+component: CodeText
+category: Typography
+related: [Text, Title, Caption]
+tokens:
+  - --triplex-next-Typography-Primary_Color
+  - --triplex-next-Typography-PrimaryInvert_Color
+  - --triplex-next-Typography-Complementary_Color
+  - --triplex-next-Typography-ComplementaryInvert_Color
+  - --triplex-next-Typography-Secondary_Color
+  - --triplex-next-Typography-SecondaryInvert_Color
+  - --triplex-next-Typography-Tertiary_Color
+  - --triplex-next-Typography-TertiaryInvert_Color
+  - --triplex-next-Typography-Disabled_Color
+  - --triplex-next-Typography-DisabledInvert_Color
+  - --triplex-next-Typography-Brand_Color
+  - --triplex-next-Typography-BrandInvert_Color
+  - --triplex-next-Typography-Info_Color
+  - --triplex-next-Typography-InfoInvert_Color
+  - --triplex-next-Typography-Success_Color
+  - --triplex-next-Typography-SuccessInvert_Color
+  - --triplex-next-Typography-Warning_Color
+  - --triplex-next-Typography-WarningInvert_Color
+  - --triplex-next-Typography-Error_Color
+  - --triplex-next-Typography-ErrorInvert_Color
+  - --triplex-next-Typography-System_Color
+  - --triplex-next-Typography-SystemInvert_Color
+stories: stories/Typography/CodeText.stories.tsx
+version: "1.0"
+---
+
+# CodeText
+
+## Назначение
+
+Моноширинный текст (типографика). Рендерит инлайновый `<span>` (тег настраивается через `tag`) со шрифтом SBSansTextMono и фиксированной типографикой 14/20px (font-weight 400). Размер и начертание не настраиваются — в отличие от остальных компонентов семейства.
+
+Используй когда: нужно выровнять символы по ширине — фрагменты кода, номера счетов/договоров, ИНН/БИК, суммы в таблицах, технические идентификаторы.
+
+Не используй когда:
+- Нужен обычный пропорциональный текст — используй `Text`.
+- Нужен другой размер моноширинного текста — в семействе его нет; не задавай `font-size` через `style`/`className`, обсуди расширение API с командой.
+
+---
+
+## Варианты и props
+
+Собственных обязательных props нет. Компонент принимает только общие props типографики (`ITypographyProps`).
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `type` | `EFontType` | `PRIMARY` | Цвет текста из общей палитры типографики (11 базовых + 11 `*_INVERT`). |
+| `underline` | `boolean` | — | Подчёркивание. Совместим со `strikethrough` (оба сразу — `underline line-through`). |
+| `strikethrough` | `boolean` | — | Зачёркивание. |
+| `tag` | `string` | `"span"` | HTML-тег корневого элемента (например, `code` для семантики фрагмента кода). |
+
+Компонент типизирован как `TCodeTextProps<T extends keyof JSX.IntrinsicElements>` и принимает все атрибуты соответствующего HTML-элемента через spread.
+
+### Ограничения
+
+- Props `size`, `weight`, `line` отсутствуют намеренно: типографика фиксирована (SBSansTextMono, 14/20px, 400).
+- Внешний тип `forwardRef<HTMLElement, TCodeTextProps<keyof JSX.IntrinsicElements>>` «растворяет» дженерик: TypeScript не сужает атрибуты под конкретный `tag`. Известное ограничение публичного API, не исправлять без обсуждения (breaking).
+- `EFontType.BRAND` дополнительно задаёт `user-select: none` (особенность стилей `Typography.module.less`).
+
+---
+
+## Дизайн-токены
+
+Цвета — общие CSS-переменные семейства Typography (см. frontmatter): `--triplex-next-Typography-{Type}_Color` и `--triplex-next-Typography-{Type}Invert_Color`.
+
+Шрифт и размер — фиксированные значения в `styles/CodeText.module.less` (токенов для них нет).
+
+---
+
+## Инварианты
+
+- **`forwardRef`** — обязателен, `ref` пробрасывается на корневой элемент.
+- **`TCodeTextProps`**, **`ITypographyProps`**, значения **`EFontType`** — публичный API из barrel. Изменение — breaking change.
+- **`displayName = "CodeText"`** — не убирать.
+- Фиксированная типографика (SBSansTextMono, 14/20px) — контракт компонента; добавление `size`/`weight` — расширение публичного API, требует обсуждения.
+- Классы собираются только через `clsx`.
+
+---
+
+## Accessibility
+
+- Компонент не интерактивный: focus management и keyboard navigation не применимы.
+- По умолчанию рендерится нейтральный `<span>`; для семантики фрагмента кода передай `tag="code"`.
+- Цвет (`type`) не передаёт семантику для screen reader'ов.
+
+---
+
+## Связанные компоненты
+
+- `Text` — основной пропорциональный текст интерфейса (B1–B4).
+- `Title` — заголовки `h1`–`h3`.
+- `Caption` — мелкие подписи и крупный показатель D1.
+
+---
+
+## Stories
+
+Основные истории: `stories/Typography/CodeText.stories.tsx`
+Файлы примеров: `stories/Typography/examples/CodeText/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль props `type`, `tag`, `underline`, `strikethrough` |
+| `Default` | `Default.tsx` | Минимальное использование |
+| `Types` | `Types.tsx` | Все значения `EFontType`: базовые + инвертированные на тёмной подложке |
+| `Decorations` | `Decorations.tsx` | `underline`, `strikethrough` и их комбинация |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-07-20 | Создан документ. AI-рефакторинг: decoration-логика вынесена во внутренний хелпер `getTextDecorationClassName` (`utils.ts`), unit-тесты дополнены (дефолтный `type`, класс `brand`). Stories переведены на modern pattern (`examples/CodeText/`). |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Typography/examples/CodeText/Default.tsx`
+
+```tsx
+import React from "react";
+import { CodeText } from "@sberbusiness/triplex-next";
+
+export const Default = () => <CodeText>const greeting = &quot;Hello, World!&quot;;</CodeText>;
+```
+
+### Types
+
+`stories/Typography/examples/CodeText/Types.tsx`
+
+```tsx
+import React from "react";
+import { CodeText, EFontType } from "@sberbusiness/triplex-next";
+
+export const Types = () => (
+    <div style={{ display: "flex", gap: "16px" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+            <CodeText type={EFontType.PRIMARY}>Primary</CodeText>
+            <CodeText type={EFontType.COMPLEMENTARY}>Complementary</CodeText>
+            <CodeText type={EFontType.SECONDARY}>Secondary</CodeText>
+            <CodeText type={EFontType.TERTIARY}>Tertiary</CodeText>
+            <CodeText type={EFontType.BRAND}>Brand</CodeText>
+            <CodeText type={EFontType.INFO}>Info</CodeText>
+            <CodeText type={EFontType.SUCCESS}>Success</CodeText>
+            <CodeText type={EFontType.WARNING}>Warning</CodeText>
+            <CodeText type={EFontType.ERROR}>Error</CodeText>
+            <CodeText type={EFontType.DISABLED}>Disabled</CodeText>
+            <CodeText type={EFontType.SYSTEM}>System</CodeText>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px", backgroundColor: "#1F1F22" }}>
+            <CodeText type={EFontType.PRIMARY_INVERT}>Primary Invert</CodeText>
+            <CodeText type={EFontType.COMPLEMENTARY_INVERT}>Complementary Invert</CodeText>
+            <CodeText type={EFontType.SECONDARY_INVERT}>Secondary Invert</CodeText>
+            <CodeText type={EFontType.TERTIARY_INVERT}>Tertiary Invert</CodeText>
+            <CodeText type={EFontType.BRAND_INVERT}>Brand Invert</CodeText>
+            <CodeText type={EFontType.INFO_INVERT}>Info Invert</CodeText>
+            <CodeText type={EFontType.SUCCESS_INVERT}>Success Invert</CodeText>
+            <CodeText type={EFontType.WARNING_INVERT}>Warning Invert</CodeText>
+            <CodeText type={EFontType.ERROR_INVERT}>Error Invert</CodeText>
+            <CodeText type={EFontType.DISABLED_INVERT}>Disabled Invert</CodeText>
+            <CodeText type={EFontType.SYSTEM_INVERT}>System Invert</CodeText>
+        </div>
+    </div>
+);
+```
+
+### Decorations
+
+`stories/Typography/examples/CodeText/Decorations.tsx`
+
+```tsx
+import React from "react";
+import { CodeText } from "@sberbusiness/triplex-next";
+
+export const Decorations = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        <CodeText>const x = 42;</CodeText>
+        <CodeText underline>const x = 42; // с подчеркиванием</CodeText>
+        <CodeText strikethrough>const x = 42; // с зачеркиванием</CodeText>
+        <CodeText underline strikethrough>
+            const x = 42; // с подчеркиванием и зачеркиванием
+        </CodeText>
+    </div>
+);
+```
+