Lemu UI

Lemu — библиотека React-компонентов дизайн-системы tulls. Все компоненты настраиваются общим словарём визуальных пропсов — он описан на странице Основные принципы. Библиотека находится в статусе разработки.

На чём построена библиотека

Технологии выбраны по одному правилу: поведение и доступность берутся у проверенных headless-инструментов, внешний вид полностью остаётся за дизайн-системой.

Ark UI

Сложные контролы — чекбокс, радио, селект, вкладки, тосты, аватар, поля форм — построены на примитивах Ark UI. Ark отвечает за поведение и доступность: состояния, клавиатурную навигацию, ARIA-атрибуты, управление фокусом, порталы. Собственных стилей у примитивов нет, поэтому визуальный слой ДС управляет внешним видом без борьбы с чужим CSS. Внутри Ark — state-машины Zag: поведение контролов формализовано и покрыто тестами на стороне библиотеки.

TanStack Form

Формы собираются на TanStack Form: типизированное состояние, per-field валидация и сабмит без лишних ререндеров. Валидаторы приезжают из общих Zod-схем @tulls/schemas — формы проверяют данные теми же правилами, что и API.

CSS Modules и нативный CSS

Стили написаны на обычном CSS в CSS-модулях, без runtime-библиотек CSS-in-JS. Это даёт ноль накладных расходов в рантайме и совместимость с серверными компонентами React. Механика ДС строится на современных возможностях платформы: кастомные свойства и @property, :where(), color-mix(), относительные цвета oklch(from …). Контракт переменных --visual-* описан в Основных принципах.

Phosphor Icons

Иконки — Phosphor: единый набор с ровной сеткой и насыщенностью, размер масштабируется от кегля текста. Вход @phosphor-icons/react/ssr работает в серверных компонентах.

date-fns

Форматирование дат в компоненте Date — date-fns с русской локалью: паттерны формата, относительные даты, парсинг ISO-строк.

Golos Text

Шрифт библиотеки — Golos Text, подключается self-hosted через Fontsource: без запросов к внешним CDN и с одинаковым рендером во всех приложениях.

tulldoc

Этот сайт собран движком tulldoc: страницы — MDX, документация компонентов — .doc.tsx с таблицами пропсов из TypeScript-типов и живыми примерами из исходников.