Overview · Компонентная библиотека

Все компоненты

Полная матрица компонентов FinancialDS. Единый Figma-файл Components, 4-уровневая токен-архитектура, Light/Dark тема, 4 Viewport-режима.

Статус библиотеки

FinancialDS v0.1 · 2026
40
Stable
Построены, протестированы, готовы к продуктовым экранам
0
In Progress
Токены созданы, Figma-компонент в процессе сборки
0
Planned
Задокументированы в спецификации, ожидают построения · 40 итого
Покрытие компонентной библиотеки
100% Stable · 40 итого
40 Stable (100%)
0 In Progress (0%)
0 Planned (0%)

Stable — готовы к продакшену

40 компонентов
Button
Atoms · Action
Stable
Три визуальных стиля: Solid, Outline, Ghost. SM–XL, 6 интентов, до 5 состояний.
SM · MD · LG · XL Solid · Outline · Ghost 6 intents 5 states
SIZE_BASED · Dark ✓ Открыть
Spinner
Feedback · Loading
Stable
Индикатор загрузки асинхронных операций. Появляется через 800ms задержки. Три размера для разных контекстов встраивания.
SM · MD · LG role: status/alert/progressbar
SIZE_BASED · Dark ✓ Открыть
Scrollbar
Atoms · Scroll
Stable
Оформление прокручиваемого контейнера, а не отдельный виджет. Два контекста: overlay — без дорожки, table — с дорожкой во всю длину.
MD 6px · LG 8px context: overlay/table
SIZE_BASED · Dark ✓ Открыть
Popover
Feedback · Overlay
Stable
Панель у якорного элемента: заголовок, пояснение, слот и действия. Закрывает только пользователь — крестиком или Escape.
direction: top/right/bottom/left ширина 200–480
SUBCOMPONENT_BASED · Dark ✓ Открыть
Pagination
Navigation
Stable
Навигация по страницам длинного списка: номера с сокращением, стрелки, поле быстрого перехода и строка диапазона.
MD 40 · SM 32 mobile · select range
SIZE_BASED · Dark ✓ Открыть
Avatar
Atoms · Identity
Stable
Опознавательный знак сущности: инициалы, иконка, фото, флаг или логотип. Стек и пара. Состояний нет — знак, а не орган управления.
XS 24 · SM 32 · MD 40 · LG 48 · XL 56 8 семантик · стек · пара
SIZE_BASED · Dark ✓ Открыть
Data Item
Molecules · Data
Stable
Подпись и значение: «Комиссия — 1 200,00 ₽». Кирпич карточек и сводок. Значение текстом, ссылкой или тегом.
MD 40 · SM 36 · LG 44 text · link · tag
SIZE_BASED · Dark ✓ Открыть
Alert
Molecules · Feedback
Stable
Встроенное уведомление в потоке страницы: стоит рядом с тем, к чему относится, и само не исчезает. Не путать с Notification — тот глобальный и по таймеру.
info · positive · warning · negative 600 … 1320
MODE_BASED · Dark ✓ Открыть
ButtonsGroup
Atoms · Action
Stable
Контейнер для группировки кнопок. Horizontal и Vertical. Primary = Neutral Solid (не Brand).
SM · MD · LG · XL Horizontal · Vertical Align left · right
LAYOUT · Dark ✓ Открыть
Badge
Atoms · Indicator
Stable
Числовой индикатор: Solid и Soft. SM–LG, 6 семантик, включает Dot-тип.
SM · MD · LG Solid · Soft · Dot 6 семантик
SIZE_BASED · Dark ✓ Открыть
Tag
Atoms · Label
Stable
Три стиля: Solid, Soft, Outline. SM–MD, 6 семантик, High Contrast.
SM · MD Solid · Soft · Outline 6 семантик 120+ variants
SIZE_BASED · Dark ✓ Открыть
Chip
Atoms · Filter
Stable
Интерактивный фильтр-чип. Soft и Outline стили, Neutral и Accent семантика. Single- и multi-select группы.
XS · SM · MD Soft · Outline Neutral · Accent 5 states
SIZE_BASED · Dark ✓ Открыть
Radiobutton
Forms · Selection
Stable
Выбор одного варианта из группы. Вертикальная и горизонтальная ориентация, error state, description.
SM · MD RadioGroup Error state 5 states
SIZE_BASED · Dark ✓ Открыть
Switcher
Forms · Selection
Stable
Три варианта: Switch (базовый), Switcher / Ghost, Switcher / Container. SM и MD, error state, caption, hint icon.
SM · MD Ghost · Container Error state 5 states
SIZE_BASED · Dark ✓ Открыть
Toggle Group Button
Atoms · Control
Stable
Переключатель режимов. Secondary (Outline) вариант. 2–5 частей, иконка или иконка + лейбл, badge-счётчик.
SM · MD · LG 2–5 parts Icon · Icon+Label
SIZE_BASED · btn-* aliases Открыть
Select Control
Atoms · Control
Stable
Переключатель с фоновым контейнером. Default и High Contrast варианты. 2–5 сегментов, иконка или текст, badge-счётчик.
SM · MD · LG Default · High Contrast 2–5 segments Icon Only
SIZE_BASED · btn-* aliases Открыть
Link Text
Atoms · Navigation
Stable
Текстовая ссылка с опциональной иконкой. SM–LG, 6 интентов, 6 состояний. Алиасы размерной лестницы Button.
SM · MD · LG 6 intents Icon left · right 6 states
SIZE_BASED · btn-* aliases Открыть
Divider
Atoms · Layout
Stable
Разделительная линия. Горизонтальная и вертикальная ориентации, 3 уровня контраста, 3 варианта отступов.
Horizontal · Vertical Low · Medium · High Padding 0/2/4
VARIANT_BASED · Dark ✓ Открыть
Checkbox
Forms · Selection
Stable
Три варианта: Check, Checkbox / Ghost, Checkbox / Container. Уникальное состояние Indeterminate для групп с частичным выбором. Error state, caption, hint icon.
SM · MD Indeterminate Error state 5 states
SIZE_BASED · Dark ✓ Открыть
InputText
Forms · Text entry
Stable
Текстовое поле двух типов: LabelOut (лейбл снаружи) и LabelIn (floating label). Helper text, иконки prefix/suffix, clear, 4 интента валидации.
SM · MD · LG · XL LabelOut · LabelIn Neutral · Error · Success · Warning Leading · Trailing icon · iconHelpOut
SIZE_BASED · Dark ✓ Открыть
Tabs
Navigation · Content
Stable
Переключение между связанными панелями контента. Горизонтальная и вертикальная ориентация, иконки, бейджи, ARIA tablist с roving tabindex.
SM · MD · LG Horizontal · Vertical Icon · Badge 4 states
SIZE_BASED · Dark ✓ Открыть
Modal
Feedback · Overlay
Stable
Диалоговое окно с focus trap и portal в body. SM/MD/LG/Fullscreen, Escape, backdrop-close, опциональный footer.
SM · MD · LG · Fullscreen Focus trap Portal Dark ✓
PORTAL · Keyboard · Dark ✓ Открыть
Tooltip
Atoms · Overlay
Stable
Тёмный пузырь-подсказка по hover/focus. 4 placement, задержка появления, rich-content, отключение по reduced-motion.
Top · Right · Bottom · Left Hover/Focus Delay Dark ✓
Overlay-Invert · A11y · Dark ✓ Открыть
Notification
Feedback · Overlay
Stable
Toast-уведомление с portal в body. Intent info/success/warning/error, иконка, action, accent-бордер слева, auto-dismiss.
Info · Success · Warning · Error Portal Action Dark ✓
PORTAL · Intent · Dark ✓ Открыть
MultiSelect
Forms · Selection
Stable
Поле множественного выбора. LabelOut (40px) и LabelIn (48px) варианты. Теги внутри поля (20px, 4px r), overflow badge +N, pill-чипы снаружи (24px).
LabelOut · LabelIn Tags · Overflow Chips group 9 states
MD only · Dark ✓ Открыть
InputPassword
Forms · Text entry
Stable
Password input with show/hide toggle. Кнопка переключения видимости пароля, индикатор силы, валидация.
SM · MD · LG Show · Hide toggle Strength indicator Dark ✓
SIZE_BASED · Dark ✓ Открыть
InputSearch
Forms · Text entry
Stable
Search input with magnifier icon and clear button. Два варианта: LabelOut (SM–XL) и LabelIn (MD–LG). Новых токенов не добавляет.
SM · MD · LG · XL LabelOut · LabelIn Clear button Dark ✓
SIZE_BASED · Dark ✓ Открыть
SelectField
Forms · Selection
Stable
Single-select поле на примитиве DropdownMenu (кастомный попап, не native <select>). Два варианта: LabelOut (SM–XL) и LabelIn (MD–LG, плавающий label). value-based onChange + hidden input для сабмита.
SM · MD · LG · XL LabelOut · LabelIn Error validation Dark ✓
SIZE_BASED · Dark ✓ Открыть
TextArea
Forms · Text entry
Stable
Multi-line text input with resize. Автовысота, счётчик символов, helper text, label, валидационные состояния.
SM · MD · LG Auto-resize Char counter Dark ✓
SIZE_BASED · Dark ✓ Открыть
Progress Bar
Feedback · Progress
Stable
Индикатор прогресса операций. Determinate (0–100%) и Indeterminate (анимация). Пять validation-состояний, два размера, три позиции лейбла.
SM · MD Determinate · Indeterminate 5 validations Dark ✓
SIZE_BASED · Dark ✓ Открыть
Calendar
Forms · Date
Stable
Standalone-календарь для выбора даты и диапазонов. Навигация по месяцам/годам, range-режим, weekends, disabled дни. MD и SM.
SM · MD Simple · Nav · Range 7 day states Dark ✓
SIZE_BASED · Dark ✓ Открыть
DateTimePicker
Forms · Date
Stable
Поле ввода даты, времени или даты+времени. Три типа: Date, Time, Date-Time. LabelOut и LabelIn (floating label). 5 состояний, Error, Disabled.
Date · Time · Date-Time LabelOut · LabelIn 5 states Dark ✓
FIELD · Dark ✓ Открыть
DropdownMenu
Composite · Overlay
Stable
Всплывающее меню/список опций, привязанное к якорю. Организм из примитива .ds-ddm: Menu, SingleSelect, MultiSelect. Группы, шорткаты, badge, destructive, чекбоксы, счётчик. Переиспользует Badge, Checkbox, Tag, Divider, Button.
SM · MD Menu · Single · Multi 7 item states Dark ✓
COMPOSITE · Reuse-based · Dark ✓ Открыть
Breadcrumbs
Molecules · Navigation
Stable
Цепочка навигации по иерархии: где стоим и как прыгнуть на уровень выше. Ссылка — это LinkText, скрытая середина — DropdownMenu. Своих цветов и размеров не заводит.
MD · SM 5 состояний крошки свёртка в многоточие
MODE_BASED · Reuse-based · Dark ✓ Открыть
Table Cell
Molecules · Data
Stable
Минимальный кирпич таблицы: высота строки, инсеты, границы, типографика и слоты. Сетку, сортировку и виртуализацию пишет приложение — ячейка не знает ни числа колонок, ни соседей.
SM · MD · LG 6 разновидностей 6 заливок итоговая строка
MODE_BASED · 22 переменные · Dark ✓ Открыть
Stepper
Navigation · Progress
Stable
Пошаговая навигация по многоэтапному процессу: показывает текущий этап и позволяет вернуться к пройденным. Семантику несёт индикатор, лейбл ею не красится.
MD · SM 2 ориентации 3 типа индикатора
stepper.css · Dark ✓ · 4 темы замерены Открыть
Collapse
Feedback · Disclosure
Stable
Сворачиваемый блок: прячет дополнительный контент под заголовком. Кликабельна вся шапка, кроме своих действий; раскрытие мгновенное.
MD · SM Ghost · Outline Шеврон слева · справа
collapse.css · Dark ✓ · 4 темы замерены Открыть
Upload
Forms · File upload
Stable
Зона выбора или перетаскивания и список файлов со статусом: принят, загружается, отклонён. Удаление до отправки формы обратимо.
MD · LG Зона · строка · группа Загрузка полосой
upload.css · Dark ✓ · 4 темы замерены Открыть
Action Toast
Feedback · Bulk actions
Stable
Панель массовых действий над выбранными строками: счётчик, действия, «Ещё» и «Снять выделение». Стрелки между кнопками, фокус при появлении не забирает.
SM · MD Text · Icon Загрузка
action-toast.css · Dark ✓ · 4 темы замерены Открыть
Split-Button
Atoms · Control
Stable
Основное действие в лейбле, дополнительные — в меню под троеточием. Хром общий с Toggle Group Button: в макете собран из тех же частей.
SM · MD · LG · XL 2 сегмента Icon · Badge — опционально
Своего CSS нет · tgb.css Открыть

In Progress — в работе

0 компонентов

Planned — в очереди

0 компонентов

Planned = спецификация в 03_Components/, токены не созданы, Figma-компонент не построен. Кандидаты на следующий квартал.

Архитектура токенов

4 уровня · Figma Variables
Уровень 1
Primitive
Сырые значения без семантики. Цвета, размеры, типографика.
Light/Grey(Blue)/700
→ #6B7280
Уровень 2
Semantic
Смысловые алиасы на примитивы. Brand, Negative, Info, Positive, Warning.
Main/Brand/Light/brand-700
→ Light/Brand/700
Уровень 3
Theme
Компонентные токены с режимами Light/Dark/Invert. Привязываются к fills компонентов.
Fill/Brand/Solid/Default
→ Main/Brand/Light/…
Уровень 4
Component
Прокси-переменные в файле Components. Алиасы на Viewport-токены размеров.
Button/Container/Height
→ ❖ Button/MD/Height

Figma-файлы системы

5 библиотечных файлов
Файл
Содержимое
File Key
Components
Единый файл всех компонентов. Страницы: Atoms, Forms, Navigation, Feedback, Composite.
isVYOT7tW0RTaIofg7FAqM
1-2 lvls — Viewport
Размерные токены, типографика и сетка. L2 - Semantic Dimensions: Desktop / Desktop B2B / Tablet / Mobile. L2 - Grid & Viewport: XS / SM / MD / LG / XL.
UmtoBez5r9NtVgsc9nIhIt
Colors 1-2 lvls
Primitive и Semantic цвета. Grey-Blue рамп, Brand red, Info/Positive/Negative/Warning.
NDepjYIrrLSCsyS7ZsYpr7
3rd lvl Colors
Theme-коллекция (L3). Fill / Text / Icon / Stroke / Static. Light / Dark / Invert режимы.
12qD3KozrhjN89KRI5SOtN
Text Styles
Текстовые стили Inter. D0–D1, H1–H6, Subtitle, Body, Caption, Label L0–L3 Default/Compact.
vwNHIqAb7hXH5R72e8TggR