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

package/bundle/components/Button.md

@@ -1,8 +1,6 @@
 ---
 component: Button
 category: Buttons
-figma-node: "1-328"
-figma-file: "https://www.figma.com/design/MeAqaaLV9acAgoBOkZC9C2/-W--LIB-DSN-01-Components-DCB-Next-v.1.3.0"
 related: [ButtonIcon, ButtonDropdown, ButtonDropdownExtended]
 tokens:
   - --triplex-next-Button-General_Background_Default
@@ -64,42 +62,17 @@ version: "1.0"
 
 ---
 
-## Файловая структура
-
-```text
-src/components/Button/
-├── Button.tsx                     # Основной компонент, union type TButtonProps
-├── ButtonBase.tsx                 # Базовый <button>, extends HTML attrs
-├── ButtonIcon.tsx                 # Иконочная кнопка (squircle / circle)
-├── ButtonDropdown.tsx             # Кнопка с выпадающим меню
-├── ButtonDropdownExtended.tsx     # Контейнер с кастомным dropdown
-├── enums.ts                       # EButtonTheme, EButtonDotsTheme, EButtonIconShape
-├── index.ts                       # Barrel exports
-└── styles/
-    ├── Button.module.less         # Размеры, block, loading, base layout
-    ├── ButtonGeneral.module.less  # Тема GENERAL
-    ├── ButtonSecondary.module.less
-    ├── ButtonSecondaryLight.module.less
-    ├── ButtonDanger.module.less
-    ├── ButtonLink.module.less     # Тема LINK — нет min-width, нет bg
-    ├── ButtonIcon.module.less     # Стили ButtonIcon
-    ├── ButtonDropdown.module.less
-    └── ButtonDropdownExtended.module.less
-```
-
----
-
 ## Варианты и props
 
 ### Темы (`EButtonTheme`)
 
-| Значение | Описание | Поддерживает loading/icon/block |
-|---|---|---|
-| `GENERAL` | Основной стиль (primary) | Да |
-| `SECONDARY` | Вторичный | Да |
-| `SECONDARY_LIGHT` | Вторичный светлый (для тёмных фонов) | Да |
-| `DANGER` | Деструктивное действие | Да |
-| `LINK` | Текстовая ссылка | Нет — `loading`, `icon`, `block` запрещены через `never` |
+| Значение | Описание |
+|---|---|
+| `GENERAL` | Основной стиль (primary) |
+| `SECONDARY` | Вторичный |
+| `SECONDARY_LIGHT` | Вторичный светлый (для тёмных фонов) |
+| `DANGER` | Деструктивное действие |
+| `LINK` | Текстовая ссылка |
 
 ### Размеры (`EComponentSize`)
 
@@ -109,17 +82,22 @@ src/components/Button/
 | `MD` | 40px | 0 20px | 8px | 14px |
 | `LG` | 56px | 0 24px | 10px | 16px |
 
-### Props компонента `Button`
+### Обязательные props (`Button`)
 
-| Prop | Тип | Обязателен | Описание |
+| Prop | Тип | Описание |
+|---|---|---|
+| `theme` | `EButtonTheme` | Визуальный стиль |
+| `size` | `EComponentSize` | Размер |
+
+### Опциональные props (`Button`)
+
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `theme` | `EButtonTheme` | Да | Визуальный стиль |
-| `size` | `EComponentSize` | Да | Размер |
-| `block` | `boolean` | Нет | Полноширинный режим (только не-LINK темы) |
-| `loading` | `boolean` | Нет | Состояние загрузки: скрывает контент, показывает спиннер (только не-LINK темы) |
-| `icon` | `React.ReactElement` | Нет | Иконка слева от текста; если без `children` — кнопка становится квадратной |
-| `children` | `React.ReactNode` | Нет | Текст кнопки |
-| `...HTMLButtonAttributes` | — | — | Все стандартные атрибуты `<button>` |
+| `block` | `boolean` | `false` | Полноширинный режим |
+| `loading` | `boolean` | `false` | Состояние загрузки: скрывает контент через `visibility: hidden`, показывает спиннер, ставит `tabIndex={-1}` |
+| `icon` | `React.ReactElement` | — | Иконка слева от текста; если без `children` — кнопка становится квадратной (icon-only) |
+| `children` | `React.ReactNode` | — | Текст кнопки |
+| `...HTMLButtonAttributes` | — | — | Все стандартные атрибуты `<button>`, включая `aria-expanded` (см. Accessibility) |
 
 ### Props компонента `ButtonIcon`
 
@@ -129,45 +107,11 @@ src/components/Button/
 | `active` | `boolean` | `false` | Визуальное активное состояние |
 | `...HTMLButtonAttributes` | — | — | Включая `disabled` |
 
----
+### Ограничения по темам
 
-## Ключевые особенности реализации
-
-### Иконка без текста
-Если передан `icon` без `children` — добавляется класс `.icon`, который делает кнопку квадратной:
-```tsx
-// Button.tsx — логика определения icon-only режима
-const iconOnly = Boolean(icon) && !children;
-<button className={clsx(styles.button, { [styles.icon]: iconOnly })}>
-```
-
-### Состояние загрузки
-- `loading` скрывает контент через `visibility: hidden` (не `display: none`) — сохраняет размеры,
-- устанавливает `tabIndex={-1}` — кнопка недоступна с клавиатуры
-- Тема лоадера: `SECONDARY` и `SECONDARY_LIGHT` → `ELoaderSmallTheme.BRAND`, остальные → `ELoaderSmallTheme.NEUTRAL`
-
-### `aria-expanded` управляет визуалом
-Состояние "раскрыто" (например, когда кнопка открывает dropdown) управляется через `aria-expanded`:
-```tsx
-<Button aria-expanded={true} ...> → добавляет CSS-классы .expanded и .active
-```
-Отдельного prop `expanded` нет — используй стандартный HTML-атрибут.
-
-### Тема LINK
-- Нет `min-width`
-- `background: transparent`
-- `padding` по вертикали отличается от других тем (меньше)
-- `block`, `loading`, `icon` — тип `never` в интерфейсе, TypeScript запрещает передачу
-
----
-
-## Accessibility
-
-- Нативный `<button>` — полная поддержка клавиатуры (Tab, Enter, Space) без дополнительных атрибутов.
-- **`ButtonIcon`**: иконочная кнопка без видимого текста — потребитель **обязан** передать `aria-label` через `...rest`. Библиотека мультиязычная, текст не хардкодится.
-- **`loading`**: устанавливает `tabIndex={-1}` — кнопка исключается из tab-порядка. Если нужна доступность состояния загрузки для скринридеров, потребитель добавляет `aria-busy="true"` через props.
-- **`aria-expanded`**: управляет визуальным состоянием "раскрыто" (добавляет CSS-классы `.expanded`, `.active`). Передаётся потребителем при использовании кнопки как триггера dropdown.
-- Фокус-стиль через `:focus-visible` — виден только при клавиатурной навигации.
+- `block`, `loading`, `icon` недоступны для темы `LINK` — тип `never` в интерфейсе, TypeScript запрещает передачу.
+- Тема `LINK` не имеет `min-width`, фона (`background: transparent`) и использует уменьшенный вертикальный `padding`.
+- Тема лоадера (`loading`) для `SECONDARY` и `SECONDARY_LIGHT` — `ELoaderSmallTheme.BRAND`, для остальных — `ELoaderSmallTheme.NEUTRAL`.
 
 ---
 
@@ -175,12 +119,12 @@ const iconOnly = Boolean(icon) && !children;
 
 Паттерн: `--triplex-next-Button-{Theme}_{Property}_{State}`
 
-Каждая тема (кроме LINK) имеет полный набор:
+Каждая тема (кроме `LINK`) имеет полный набор:
 - `_Background_Default/Hover/Active/Disabled`
 - `_Color_Default/Hover/Active/Disabled`
 - `_Shadow_Focus`
 
-Тема LINK — только `_Color_*` и `_Shadow_Focus` (нет фона).
+Тема `LINK` — только `_Color_*` и `_Shadow_Focus` (нет фона).
 
 При добавлении нового визуального состояния нужен новый токен в `src/generated/themesCssVariables.css`.
 
@@ -192,7 +136,17 @@ const iconOnly = Boolean(icon) && !children;
 - **`TButtonProps` union type** — должен включать все тематические интерфейсы. При добавлении новой темы — добавь интерфейс в union.
 - **`EButtonTheme` значения** — не переименовывать. Это публичное API.
 - **`EComponentSize`** — общий enum из `src/enums/EComponentSize`, не делай локальный аналог.
-- **Размеры (28px/40px/56px)** — не менять без согласования с дизайнером, другие компоненты ориентируются на эти размеры.
+- **Размеры (28px / 40px / 56px)** — не менять без согласования с дизайнером, другие компоненты ориентируются на эти размеры.
+
+---
+
+## Accessibility
+
+- Нативный `<button>` — полная поддержка клавиатуры (Tab, Enter, Space) без дополнительных атрибутов.
+- **`ButtonIcon`**: иконочная кнопка без видимого текста — потребитель **обязан** передать `aria-label` через `...rest`. Библиотека мультиязычная, текст не хардкодится.
+- **`loading`**: устанавливает `tabIndex={-1}` — кнопка исключается из tab-порядка. Если нужна доступность состояния загрузки для скринридеров, потребитель добавляет `aria-busy="true"` через props.
+- **`aria-expanded`**: управляет визуальным состоянием «раскрыто» (добавляет CSS-классы `.expanded`, `.active`). Передаётся потребителем при использовании кнопки как триггера dropdown. Отдельного prop `expanded` нет — используй стандартный HTML-атрибут.
+- Фокус-стиль через `:focus-visible` — виден только при клавиатурной навигации.
 
 ---
 
@@ -208,7 +162,7 @@ const iconOnly = Boolean(icon) && !children;
 
 ## Stories
 
-`stories/Buttons/Button.stories.tsx`
+Основные истории: `stories/Buttons/Button.stories.tsx`
 Файлы примеров: `stories/Buttons/examples/Button/`
 
 | Story | Example file | Что демонстрирует |
@@ -219,7 +173,9 @@ const iconOnly = Boolean(icon) && !children;
 | `Sizes` | `SizesExample.tsx` | SM / MD / LG для всех тем |
 | `Themes` | `ThemesExample.tsx` | Все пять тем |
 | `WithIcon` | `WithIconExample.tsx` | Icon-only и text+icon |
+| `WithNotificationIcon` | `WithNotificationIconExample.tsx` | Иконка с индикатором уведомления |
 | `BlockMode` | `BlockModeExample.tsx` | Полноширинный режим |
+| `TextWithIcon` | `TextWithIconExample.tsx` | Текст вместе с иконкой |
 
 ---
 
@@ -228,3 +184,332 @@ const iconOnly = Boolean(icon) && !children;
 | Дата | Изменение |
 |---|---|
 | 2026-03-31 | Создан документ (пилот AI-Ready) |
+| 2026-04-27 | Приведён в соответствие с `docs/ai/template-ai.md`: убраны секции «Файловая структура» и «Ключевые особенности реализации», переструктурированы props, добавлена колонка `Example file` в таблице Stories |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Buttons/examples/Button/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <div style={{ maxWidth: "250px" }}>
+        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+            Button text
+        </Button>
+    </div>
+);
+```
+
+### States
+
+`stories/Buttons/examples/Button/StatesExample.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+import { Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const StatesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>Expanded</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD} aria-expanded>
+                    General
+                </Button>
+                <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} aria-expanded>
+                    Secondary
+                </Button>
+                <Button theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD} aria-expanded>
+                    Secondary Light
+                </Button>
+                <Button theme={EButtonTheme.DANGER} size={EComponentSize.MD} aria-expanded>
+                    Danger
+                </Button>
+                <Button
+                    theme={EButtonTheme.GENERAL}
+                    size={EComponentSize.MD}
+                    icon={<DefaulticonStrokePrdIcon20 paletteIndex={7} />}
+                    aria-expanded
+                />
+            </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>Loading</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <Button loading theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                    Button text
+                </Button>
+                <Button loading theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                    Button text
+                </Button>
+                <Button loading theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD}>
+                    Button text
+                </Button>
+                <Button loading theme={EButtonTheme.DANGER} size={EComponentSize.MD}>
+                    Button text
+                </Button>
+                <Button
+                    loading
+                    icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+                    size={EComponentSize.MD}
+                    theme={EButtonTheme.GENERAL}
+                />
+            </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>Disabled</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <Button disabled theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+                    General
+                </Button>
+                <Button disabled theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+                    Secondary
+                </Button>
+                <Button disabled theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD}>
+                    Secondary Light
+                </Button>
+                <Button disabled theme={EButtonTheme.DANGER} size={EComponentSize.MD}>
+                    Danger
+                </Button>
+                <Button disabled theme={EButtonTheme.LINK} size={EComponentSize.MD}>
+                    Link
+                </Button>
+                <Button
+                    icon={<DefaulticonStrokePrdIcon20 paletteIndex={7} />}
+                    size={EComponentSize.MD}
+                    theme={EButtonTheme.GENERAL}
+                    disabled
+                />
+            </div>
+        </div>
+    </div>
+);
+```
+
+### Sizes
+
+`stories/Buttons/examples/Button/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <Button size={EComponentSize.SM} theme={EButtonTheme.GENERAL}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.SM} theme={EButtonTheme.SECONDARY}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.SM} theme={EButtonTheme.SECONDARY_LIGHT}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.SM} theme={EButtonTheme.DANGER}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.SM} theme={EButtonTheme.LINK}>
+                    Button text
+                </Button>
+            </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.GENERAL}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.SECONDARY_LIGHT}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.DANGER}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.MD} theme={EButtonTheme.LINK}>
+                    Button text
+                </Button>
+            </div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+            <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+                <Button size={EComponentSize.LG} theme={EButtonTheme.GENERAL}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.LG} theme={EButtonTheme.SECONDARY}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.LG} theme={EButtonTheme.SECONDARY_LIGHT}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.LG} theme={EButtonTheme.DANGER}>
+                    Button text
+                </Button>
+                <Button size={EComponentSize.LG} theme={EButtonTheme.LINK}>
+                    Button text
+                </Button>
+            </div>
+        </div>
+    </div>
+);
+```
+
+### Themes
+
+`stories/Buttons/examples/Button/ThemesExample.tsx`
+
+```tsx
+import React from "react";
+import { Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const ThemesExample = () => (
+    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 16 }}>
+        <Button theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+            General
+        </Button>
+        <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+            Secondary
+        </Button>
+        <Button theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD}>
+            Secondary Light
+        </Button>
+        <Button theme={EButtonTheme.DANGER} size={EComponentSize.MD}>
+            Danger
+        </Button>
+        <Button theme={EButtonTheme.LINK} size={EComponentSize.MD}>
+            Link
+        </Button>
+    </div>
+);
+```
+
+### WithIcon
+
+`stories/Buttons/examples/Button/WithIconExample.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon20, DefaulticonStrokePrdIcon32 } from "@sberbusiness/icons-next";
+import { Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const WithIconExample = () => (
+    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+        <Button
+            icon={<DefaulticonStrokePrdIcon20 paletteIndex={7} />}
+            size={EComponentSize.SM}
+            theme={EButtonTheme.GENERAL}
+        />
+        <Button
+            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+            size={EComponentSize.MD}
+            theme={EButtonTheme.SECONDARY}
+        />
+        <Button
+            icon={<DefaulticonStrokePrdIcon20 paletteIndex={0} />}
+            size={EComponentSize.MD}
+            theme={EButtonTheme.SECONDARY_LIGHT}
+        />
+        <Button
+            icon={<DefaulticonStrokePrdIcon32 paletteIndex={7} />}
+            size={EComponentSize.LG}
+            theme={EButtonTheme.DANGER}
+        />
+    </div>
+);
+```
+
+### WithNotificationIcon
+
+`stories/Buttons/examples/Button/WithNotificationIconExample.tsx`
+
+```tsx
+import React from "react";
+import { Badge, Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+import { BellStrokeNavIcon20 } from "@sberbusiness/icons-next";
+
+export const WithNotificationIconExample = () => (
+    <div style={{ position: "relative", display: "inline-flex" }}>
+        <Button
+            icon={<BellStrokeNavIcon20 paletteIndex={0} />}
+            size={EComponentSize.MD}
+            theme={EButtonTheme.SECONDARY}
+        />
+        <Badge.Dot size={EComponentSize.MD} style={{ position: "absolute", top: 4, right: 4 }} />
+    </div>
+);
+```
+
+### BlockMode
+
+`stories/Buttons/examples/Button/BlockModeExample.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+import { Button, EButtonTheme, EComponentSize, Gap } from "@sberbusiness/triplex-next";
+
+export const BlockModeExample = () => (
+    <div style={{ maxWidth: 280 }}>
+        <Button block theme={EButtonTheme.GENERAL} size={EComponentSize.MD}>
+            General
+        </Button>
+        <Gap size={16} />
+        <Button block theme={EButtonTheme.SECONDARY} size={EComponentSize.MD}>
+            Secondary
+        </Button>
+        <Gap size={16} />
+        <Button block theme={EButtonTheme.SECONDARY_LIGHT} size={EComponentSize.MD}>
+            Secondary Light
+        </Button>
+        <Gap size={16} />
+        <Button
+            block
+            size={EComponentSize.MD}
+            theme={EButtonTheme.DANGER}
+            icon={<DefaulticonStrokePrdIcon20 paletteIndex={7} />}
+        />
+    </div>
+);
+```
+
+### TextWithIcon
+
+`stories/Buttons/examples/Button/TextWithIconExample.tsx`
+
+```tsx
+import React from "react";
+import { DefaulticonStrokePrdIcon16, DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+import { Button, EButtonTheme, EComponentSize } from "@sberbusiness/triplex-next";
+
+export const TextWithIconExample = () => (
+    <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
+        <Button theme={EButtonTheme.LINK} size={EComponentSize.SM}>
+            <DefaulticonStrokePrdIcon16 paletteIndex={5} />
+            <span style={{ marginLeft: 8 }}>Button text</span>
+        </Button>
+        <Button theme={EButtonTheme.LINK} size={EComponentSize.MD}>
+            <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+            <span style={{ marginLeft: 8 }}>Button text</span>
+        </Button>
+        <Button theme={EButtonTheme.LINK} size={EComponentSize.LG}>
+            <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+            <span style={{ marginLeft: 8 }}>Button text</span>
+        </Button>
+    </div>
+);
+```
+