glass-ui: скло на вуалі
Колір живе у даних і діях, контейнери — нейтральне матове скло. import { Button, DataTable, PageShell } from "@residence/glass-ui"
Анатомія сторінки
Кожен екран платформи — цей скелет: PageShell (вуаль) → PageHeader → метрики → Surface-драбина 1→2→3. Нижче він зібраний наживо.
Журнал проводок
PageHeader: крихти, заголовок, статус і дії — один компонент.
Бейджі та статуси
Мітка на даних: Badge — категорія й лічильник, StatusPill — життєвий цикл документа, Pill — тег. Badge має ОДНЕ обличчя і три ваги: варіантів немає, вибирається лише розмір під щільність місця. Жодних ручних кольорових span-ів.
xs size="xs" · щільно | sm size="sm" · дефолт | md size="md" · помітно | |
|---|---|---|---|
blueнейтральний факт | 24 документи | 24 документи | 24 документи |
emeraldвсе добре | Оплачено | Оплачено | Оплачено |
amberпотребує уваги | ПДВ 20% | ПДВ 20% | ПДВ 20% |
roseпроблема | Прострочено | Прострочено | Прострочено |
slateбез забарвлення | Чернетка | Чернетка | Чернетка |
Обличчя одне на всі схеми — те саме мікроскло, що в StatusPill і Pill. Змінюється лише вага: xs для щільних рядків таблиці, sm (дефолт) — робоча, md — коли мітку треба виділити серед сусідніх. Верхньої межі немає навмисно: бейдж не може вирости в заголовок.
Категорія, лічильник, атрибут рядка. Єдиний з іконкою, крапкою та count — і з вибором розміру.
Життєвий цикл документа. Щільний однорядковий, з лінзовою крапкою — саме вона відрізняє його від Badge.
Тег і контекстна мітка. Найбільший і найтихіший — не стан, а те, до чого запис належить.
У кнопках схема — це роль дії (одна Primary на зону). У мітках навпаки: схема — це сенс самого запису, тому вся палітра (emerald, amber, violet, teal…) законно живе саме тут. Але один сенс = один колір по всьому продукту: якщо «прострочено» десь rose, воно rose скрізь.
Таби
Активний сегмент має ту саму вертикальну градієнт-фізику, що й solid-кнопка. Іконки та лічильники — пропсами, без самопису.
Таблиці
DataTable закриває 99% реєстрів: сортування, вибір рядків, футер-агрегат, липкі колонки, контекстне меню. Виділи кілька рядків, щоб побачити BulkActionsBar.
| РФ-0347 | ТОВ «Далі-Транс» | 08.07.2026 | Оплачено | 148 200,00 ₴ | |
| РФ-0346 | ОСББ «Кримська 14» | 07.07.2026 | Надіслано | 36 540,50 ₴ | |
| РФ-0345 | ФОП Гайдамака О. В. | 05.07.2026 | Прострочено | 12 780,00 ₴ | |
| РФ-0344 | ТОВ «Ліфт-Сервіс» | 03.07.2026 | Оплачено | 89 400,00 ₴ | |
| РФ-0343 | КП «Київводоканал» | 01.07.2026 | Надіслано | 261 375,20 ₴ | |
| РФ-0342 | ТОВ «Енергозбут» | 28.06.2026 | Чернетка | 5 120,00 ₴ | |
| РФ-0341 | ПрАТ «Будматеріали» | 26.06.2026 | Оплачено | 47 830,75 ₴ | |
| Разом: 7 документів | 601 246,45 ₴ |
Картки
Три рівні: MetricCard (метрика-число), EntityCard (запис реєстру), Card (скляний контейнер). Контейнер завжди нейтральний — колір живе в іконці, бейджах, даних.
Card = матове скло (LiquidGlass). Коли потрібен контейнер, а не готова структура запису — сюди кладеться будь-що.
| icon | ReactNode | іконка в кольоровому shell (тип запису) |
| colorScheme | 11 схем | колір ЛИШЕ icon-shell, контейнер нейтральний |
| title / subtitle | ReactNode | заголовок + опис |
| status | ReactNode | слот праворуч — StatusPill / Badge |
| fields | {label,value,mono}[] | поля запису (IBAN → mono) |
| footer | ReactNode | нижній рядок з розділювачем |
| interactive / selected | boolean | лифт при hover / blue-рамка |
Форми
FormControl дає label, підказку та помилку одним вузлом; FieldRow розкладає поля в адаптивну сітку. Жодних ручних grid-оберток.
Пошук у реєстрі за назвою або ЄДРПОУ
Очікування та порожнеча
Стан екрана, поки даних немає. Progress — коли відомо скільки лишилось, Skeleton — коли відома форма майбутнього вмісту, Spinner — коли не відомо нічого, EmptyState — коли даних не буде, доки користувач щось не зробить.
Створіть перший рахунок, щоб побачити його тут.
Сповіщення
Три рівні за гучністю: Toast (ефемерне, в кутку), Banner (на всю ширину, лишається), InlineMessage (тихий рядок). Обери за тим, наскільки повідомлення важливе й де воно живе. Окремо — ЗАДАЧА: тост без таймера, який тримається, доки робота не скінчиться або людина не відповість.
Таймера немає не за прапорцем, а за формою: щойно у тоста з'являється progress або actions, він перестає рахувати секунди. Смуга, що зникає на 40%, і питання, яке відповідає само собі за чотири секунди, — обидва баги, і обидва тут неможливо написати.
Результат щойно виконаної дії. Ефемерний — сам зникає за кілька секунд.
«Проведено», «Збережено», «Не вдалося»Стан контексту, що триває. Живе на сторінці, доки стан не зміниться.
«Період відкритий», «Режим імперсонації»Тиха підказка чи помилка поруч із конкретним полем або в блоці.
«Підставлено авто», «Різниця в сумі»Оверлеї
Modal для дій, Drawer для перегляду запису, Popover для міні-форм, CommandPalette для ⌘K. Усе з фокус-трапом і єдиною z-шкалою.