@sberbusiness/triplex-next-mcp-server 0.24.0-beta2 → 0.36.0-beta0

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>
 );
 ```