[mirror core-ds#2122] feat(tag): добавлен компонент indicator-tag [DS-12708]

[core-ds-bot]

Mirror of upstream PR: core-ds#2122

Author: @dHIM24
Head SHA: 0beea97

This PR exists only in the fork for testing/review workflow. Do not submit review/comments to upstream while the workflow is in test mode.

---

Original upstream PR body:

Tag

• Добавлен компонент IndicatorTag для тега с числовым индикатором

Чек лист

• Задача сформулирована и описана в JIRA
• В названии ветки есть айдишник задачи в JIRA (fix/DS-1234), ссылку прикреплять не надо
• У реквеста осмысленное название feat(...) или fix(...) по conventional commits (https://www.conventionalcommits.org)
• Код покрыт тестами и протестирован в различных браузерах
• Добавленные пропсы добавлены в демки и описаны в документации
• К реквесту добавлен changeset

Если есть визуальные изменения

• Прикреплено изображение было/стало

2026-03-24.11.03.50.mov

render(() => {
    const SIZES = [32, 40];
    const SHAPES = [
        { label: 'rect', value: 'rectangular' },
        { label: 'circle', value: 'rounded' },
    ];
    const INDICATORS = [
        { label: 'dot', props: { mode: 'dot' } },
        { label: 'count', props: { mode: 'count', value: 7 } },
    ];

    return (
        <Container>
            <div
                style={{
                    display: 'grid',
                    gridTemplateColumns: 'repeat(4, max-content)',
                    gap: 16,
                    alignItems: 'center',
                }}
            >
                {SIZES.flatMap((size) =>
                    SHAPES.flatMap((shape) =>
                        INDICATORS.map((indicator) => (
                            <div
                                key={`${size}-${shape.value}-${indicator.label}`}
                                style={{
                                    display: 'inline-flex',
                                    flexDirection: 'column',
                                    alignItems: 'center',
                                    gap: 8,
                                }}
                            >
                                <Tag
                                    Component={IndicatorTag}
                                    leftAddons={<SlidersSIcon height={16} width={16} />}
                                    size={size}
                                    view='filled'
                                    shape={shape.value}
                                    indicatorProps={indicator.props}
                                />
                                <div
                                    style={{
                                        color: 'var(--color-light-text-secondary)',
                                        fontSize: 12,
                                        lineHeight: '16px',
                                    }}
                                >
                                    {`${indicator.label}, ${shape.label}, ${size}`}
                                </div>
                            </div>
                        )),
                    ),
                )}
            </div>
        </Container>
    );
});