Библиотека компонентов Glypha

Form

48 элементов: инпуты, селекты, чекбоксы, слайдеры и валидация. Поддерживает автофокус, ошибки и подсказки из коробки.

Layout

32 макетных блока: гриды, карточки, разделители, стеки и контейнеры. Все отступы управляются токенами пространства.

Navigation

26 паттернов: бредкрамбы, табы, дропдауны, пагинаторы и мобильное меню. Интеграция с роутерами React и Vue.

TextInput

Базовое поле ввода с лейблом, плейсхолдером и иконкой действия. Высота 44px, радиус 12px.

Button

Четыре варианта: primary, secondary, ghost и danger. Поддерживает иконки слева и справа от текста.

Card

Гибкая карточка с заголовком, телом и зоной действий. Адаптируется под ширину контейнера.

Tabs

Перключаемые вкладки с индикатором и клавиатурной навигацией стрелками. Поддерживает 2–6 вкладок.

Checkbox

Галочка с анимацией заполнения и состоянием неопределённости. Размер 20×20px, доступная зона нажатия 44px.

Slider

Ползунок с визуальным значением и метками. Работает с мыши, клавиатуры и сенсорного ввода.

React — Button

Импорт и использование компонента с пропсом variant и иконкой.

import { GlyphaButton } from '@glypha/ui';

<GlyphaButton
  variant="primary"
  icon={IconArrowRight}
  onClick={handleSubmit}
>
  Сохранить
</GlyphaButton>

Vue — TextInput

Двустороннее связывание с валидацией через v-model и правила.

<GlyphaInput
  v-model="email"
  label="Электронная почта"
  :rules="['required', 'email']"
  :error="errors.email"
/>

HTML — Card

Нативная разметка с классами Glypha без фреймворка.

<div class="gly-card" role="group">
  <h3 class="gly-card__title">
    Акт #2048
  </h3>
  <p class="gly-card__text">
    Оплачен 12.06.2024
  </p>
  <button class="gly-btn gly-btn--secondary">
    Открыть
  </button>
</div>

Контраст 4.5:1

Все текстовые токены соответствуют WCAG 2.1 уровня AA. Минимальный контраст на светлом и тёмном фоне — 4.5:1.

Клавиатурная навигация

Tab, Shift+Tab, Enter и стрелки работают во всех интерактивных элементах. Видимый фокус-кольцо 2px в цвете primary.

Скринридеры

ARIA-атрибуты, live-регионы и семантические теги. Совместимо с NVDA, VoiceOver и TalkBack.

Режимы движения

Уважение prefers-reduced-motion: анимации отключаются, если пользователь запросил меньше движения.