@sberbusiness/triplex-next-mcp-server 0.24.0-beta1 → 0.24.0-beta2

package/bundle/components/Badge.md

@@ -275,3 +275,206 @@ export const Badge = Object.assign(
 | Дата | Изменение |
 |---|---|
 | 2026-04-18 | Создан документ |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Badge/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { Badge, EComponentSize, EFontType, EFontWeightText, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => (
+    <Badge size={EComponentSize.MD}>
+        <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+            Badge text
+        </Text>
+    </Badge>
+);
+```
+
+### Sizes
+
+`stories/Badge/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    Badge,
+    Caption,
+    ECaptionSize,
+    EComponentSize,
+    EFontType,
+    EFontWeightCaption,
+    EFontWeightText,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "150px" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <Badge size={EComponentSize.SM}>
+                <Caption size={ECaptionSize.C1} weight={EFontWeightCaption.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                    Badge text SM
+                </Caption>
+            </Badge>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+            <Badge size={EComponentSize.MD}>
+                <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                    Badge text MD
+                </Text>
+            </Badge>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+            <Badge size={EComponentSize.LG}>
+                <Text size={ETextSize.B3} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                    Badge text LG
+                </Text>
+            </Badge>
+        </div>
+    </div>
+);
+```
+
+### WithPrefixAndPostfix
+
+`stories/Badge/examples/WithPrefixAndPostfixExample.tsx`
+
+```tsx
+import React from "react";
+import {
+    PercentsmallStrokeSrvIcon16,
+    PercentsmallStrokeSrvIcon20,
+    PercentsmallStrokeSrvIcon24,
+} from "@sberbusiness/icons-next";
+import {
+    Badge,
+    Caption,
+    ECaptionSize,
+    EComponentSize,
+    EFontType,
+    EFontWeightCaption,
+    EFontWeightText,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+
+export const WithPrefixAndPostfixExample = () => (
+    <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
+        <Badge
+            size={EComponentSize.SM}
+            prefix={<PercentsmallStrokeSrvIcon16 paletteIndex={7} />}
+            postfix={<PercentsmallStrokeSrvIcon16 paletteIndex={7} />}
+        >
+            <Caption size={ECaptionSize.C1} weight={EFontWeightCaption.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text SM
+            </Caption>
+        </Badge>
+        <Badge
+            size={EComponentSize.MD}
+            prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}
+            postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}
+        >
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text MD
+            </Text>
+        </Badge>
+        <Badge
+            size={EComponentSize.LG}
+            prefix={<PercentsmallStrokeSrvIcon24 paletteIndex={7} />}
+            postfix={<PercentsmallStrokeSrvIcon24 paletteIndex={7} />}
+        >
+            <Text size={ETextSize.B3} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text LG
+            </Text>
+        </Badge>
+    </div>
+);
+```
+
+### DotSizes
+
+`stories/Badge/examples/DotSizesExample.tsx`
+
+```tsx
+import React from "react";
+import { Badge, EComponentSize } from "@sberbusiness/triplex-next";
+
+const SIZES = Object.values(EComponentSize);
+
+export const DotSizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        {SIZES.map((size) => (
+            <div key={size} style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size.toUpperCase()}</div>
+                <Badge.Dot size={size} />
+            </div>
+        ))}
+    </div>
+);
+```
+
+### Example
+
+`stories/Badge/examples/ProductionExample.tsx`
+
+```tsx
+import React from "react";
+import { NewsmallFilledSrvIcon20, PercentsmallStrokeSrvIcon20 } from "@sberbusiness/icons-next";
+import { Badge, EComponentSize, EFontType, EFontWeightText, ETextSize, Text } from "@sberbusiness/triplex-next";
+
+export const ProductionExample = () => (
+    <div style={{ display: "flex", gap: "16px" }}>
+        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />} />
+        <Badge size={EComponentSize.MD} prefix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} postfix={<PercentsmallStrokeSrvIcon20 paletteIndex={7} />}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Badge text
+            </Text>
+        </Badge>
+        <Badge
+            size={EComponentSize.MD}
+            prefix={<NewsmallFilledSrvIcon20 paletteIndex={7} />}
+            style={{ backgroundColor: "#1297FE" }}
+        >
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.PRIMARY_INVERT}>
+                Новинка
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#E3FFFA" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.BRAND}>
+                Рисков не выявлено
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#FFF0F3" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.ERROR}>
+                Негативные факторы
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#FFF4DB" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.WARNING}>
+                Обратите внимание
+            </Text>
+        </Badge>
+        <Badge size={EComponentSize.MD} style={{ backgroundColor: "#EEF3FC" }}>
+            <Text size={ETextSize.B4} weight={EFontWeightText.REGULAR} type={EFontType.SYSTEM}>
+                Нет данных
+            </Text>
+        </Badge>
+    </div>
+);
+```
+

package/bundle/components/Button.md

@@ -228,3 +228,283 @@ const iconOnly = Boolean(icon) && !children;
 | Дата | Изменение |
 |---|---|
 | 2026-03-31 | Создан документ (пилот AI-Ready) |
+
+---
+
+## Примеры использования
+
+### 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>
+);
+```
+
+### 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>
+);
+```
+