{"_id":"@accessible-university/ui","_rev":"7-f717e97178c6e35a8e36f8a8e0cd6492","name":"@accessible-university/ui","dist-tags":{"latest":"1.2.44"},"versions":{"1.2.39":{"name":"@accessible-university/ui","version":"1.2.39","_id":"@accessible-university/ui@1.2.39","maintainers":[{"name":"nezqt3","email":"dalekseenko8@gmail.com"}],"dist":{"shasum":"20ba841b7fee425bdee8041e1fa69ca3b396f3af","tarball":"https://registry.npmjs.org/@accessible-university/ui/-/ui-1.2.39.tgz","fileCount":134,"integrity":"sha512-kjXRkmW/V88k/Hoq+CkipjhBYxxeaOZB513z6CI8ETg4EzguA6CBmGKkESuKm013qH2yqn5u79WuUrpqgkHm2w==","signatures":[{"sig":"MEQCIHIAadpI7FTwFKmpdgCV5u1d457/UtcFmF0ASbXNPIanAiA4sfV1reh9AjRJfFz+LsELCNfwE/qR+wwl6fOMSQX7CQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":454998},"main":"./accessible-university-ui.cjs","type":"module","types":"./index.d.ts","module":"./accessible-university-ui.js","exports":{".":{"types":"./index.d.ts","import":"./accessible-university-ui.js","require":"./accessible-university-ui.cjs"},"./styles.css":"./styles.css"},"gitHead":"f593231bd0aef973ed0d890e45f111feed747d15","_npmUser":{"name":"nezqt3","email":"dalekseenko8@gmail.com"},"_npmVersion":"11.11.1","description":"Accessible University React UI components","directories":{},"sideEffects":["./styles.css"],"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0","lucide-react":"^0.563.0","qrcode.react":"^4.2.0","framer-motion":"^12.29.0","react-barcode":"^1.6.1","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.2.39_1782808090324_0.09526889943308281","host":"s3://npm-registry-packages-npm-production"}},"1.2.40":{"name":"@accessible-university/ui","version":"1.2.40","_id":"@accessible-university/ui@1.2.40","maintainers":[{"name":"nezqt3","email":"dalekseenko8@gmail.com"}],"dist":{"shasum":"8b26b4021c7dc3bfff59b8b345913cbe84dff2ef","tarball":"https://registry.npmjs.org/@accessible-university/ui/-/ui-1.2.40.tgz","fileCount":138,"integrity":"sha512-lszwYAcGtUKuB1/LzggHAcLW9MwfX5nmQNZeKSjn5970HPmCCNNmkLHcGRoze7ghnox1J0CNb3XGWMTCfNyZaw==","signatures":[{"sig":"MEQCIH9BSsHqADeYFkVcXsX0joEaB0eoXMzI6NU5b3C72xIlAiBh/YVKPe1/UD2mYN0HZ+6OG5Wuih99P1sN9KFmAXGacQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":464731},"main":"./accessible-university-ui.cjs","type":"module","types":"./index.d.ts","module":"./accessible-university-ui.js","exports":{".":{"types":"./index.d.ts","import":"./accessible-university-ui.js","require":"./accessible-university-ui.cjs"},"./styles.css":"./styles.css"},"gitHead":"eaf5a5d805f17afb3b8d52bdca0f5ec8227f65c8","_npmUser":{"name":"nezqt3","email":"dalekseenko8@gmail.com"},"_npmVersion":"11.11.1","description":"Accessible University React UI components","directories":{},"sideEffects":["./styles.css"],"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0","lucide-react":"^0.563.0","qrcode.react":"^4.2.0","framer-motion":"^12.29.0","react-barcode":"^1.6.1","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.2.40_1786371819782_0.9257325370022564","host":"s3://npm-registry-packages-npm-production"}},"1.2.41":{"name":"@accessible-university/ui","version":"1.2.41","_id":"@accessible-university/ui@1.2.41","maintainers":[{"name":"nezqt3","email":"dalekseenko8@gmail.com"}],"dist":{"shasum":"fdd88321470854273b977746279a6625b8974549","tarball":"https://registry.npmjs.org/@accessible-university/ui/-/ui-1.2.41.tgz","fileCount":158,"integrity":"sha512-/hi4YpLRb5uhFTF9CAW3eFys/4feW/DvLc1HXKOqZmFVGgdDZg9zSPNB7cdJmeeT1ZsFQI4f6ZUhUOS7K0jpXQ==","signatures":[{"sig":"MEUCIDXDpleqqPmqChsxSqEA8Xo3rUKA9/BhrSqjO406dRK9AiEA3NVdcsm81TNMdf5EJXo9oLMx8NxcPplZ7Wep44F8mQk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":495022},"main":"./accessible-university-ui.cjs","type":"module","types":"./index.d.ts","module":"./accessible-university-ui.js","exports":{".":{"types":"./index.d.ts","import":"./accessible-university-ui.js","require":"./accessible-university-ui.cjs"},"./styles.css":"./styles.css"},"gitHead":"d886b0e146bc6edac085feb52c63e21675958e15","_npmUser":{"name":"nezqt3","email":"dalekseenko8@gmail.com"},"_npmVersion":"11.11.1","description":"Accessible University React UI components","directories":{},"sideEffects":["./styles.css"],"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0","lucide-react":"^0.563.0","qrcode.react":"^4.2.0","framer-motion":"^12.29.0","react-barcode":"^1.6.1","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.2.41_1786423221316_0.44762919107874644","host":"s3://npm-registry-packages-npm-production"}},"1.2.43":{"name":"@accessible-university/ui","version":"1.2.43","_id":"@accessible-university/ui@1.2.43","maintainers":[{"name":"nezqt3","email":"dalekseenko8@gmail.com"}],"dist":{"shasum":"d03536a8e0d19307bfee3f1070a772e16bb3c5ef","tarball":"https://registry.npmjs.org/@accessible-university/ui/-/ui-1.2.43.tgz","fileCount":176,"integrity":"sha512-aErRAji8wValWORVfN5wxiAFAG3bQbrHJX3VK/XQd0PX/HvGpD6lhZtCuS/exbuISpbhQWLo7gJ9rZRMIQh5uw==","signatures":[{"sig":"MEYCIQDp0u9CmlgWJbl8pFyXCPr1QLGuGGkniiJ1ZTGn+Pr6LwIhAJApqs5olHFiKFTVkPezT2V8UWkjuTlZlZokqM81rC3e","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":537793},"main":"./accessible-university-ui.cjs","type":"module","types":"./index.d.ts","module":"./accessible-university-ui.js","exports":{".":{"types":"./index.d.ts","import":"./accessible-university-ui.js","require":"./accessible-university-ui.cjs"},"./styles.css":"./styles.css"},"gitHead":"cbbb6753b64544ed82908484104188ff308b283a","_npmUser":{"name":"nezqt3","email":"dalekseenko8@gmail.com"},"_npmVersion":"11.11.1","description":"Accessible University React UI components","directories":{},"sideEffects":["./styles.css"],"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0","lucide-react":"^0.563.0","qrcode.react":"^4.2.0","framer-motion":"^12.29.0","react-barcode":"^1.6.1","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_1.2.43_1787129948241_0.3584725855976105","host":"s3://npm-registry-packages-npm-production"}},"1.2.44":{"name":"@accessible-university/ui","version":"1.2.44","type":"module","description":"Accessible University React UI components","sideEffects":["./styles.css"],"main":"./accessible-university-ui.cjs","module":"./accessible-university-ui.js","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./accessible-university-ui.js","require":"./accessible-university-ui.cjs"},"./styles.css":"./styles.css"},"peerDependencies":{"framer-motion":"^12.29.0","lucide-react":"^0.563.0","qrcode.react":"^4.2.0","react":"^18.2.0 || ^19.0.0","react-barcode":"^1.6.1","react-dom":"^18.2.0 || ^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"gitHead":"39459b0cdd5578c90f08c89bdd697e1428a68a6e","_id":"@accessible-university/ui@1.2.44","_nodeVersion":"22.17.0","_npmVersion":"11.11.1","dist":{"integrity":"sha512-nxofvEsYry3KqDQuUNZadGN5LzW4D/xpw3z99ubH+/u5BPD9KylTcTMZd6XHkgBNvXtb4N7dErW6DcKKvIO3HA==","shasum":"446857e712e25ae42d5dad9eff56aab7b4897f76","tarball":"https://registry.npmjs.org/@accessible-university/ui/-/ui-1.2.44.tgz","fileCount":180,"unpackedSize":554170,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD+9Z9EizdOIcfq6ZzYMiQ/N7GXoNve/t7ARJntdvWcOQIhAONau+MYV5cvAizSTZQDw5ZpcyLm2boLpXMsvsvLxiB6"}]},"_npmUser":{"name":"nezqt3","email":"dalekseenko8@gmail.com"},"directories":{},"maintainers":[{"name":"nezqt3","email":"dalekseenko8@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.2.44_1787327798896_0.540538137756819"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-30T08:28:10.176Z","modified":"2026-08-21T15:56:39.288Z","1.2.38":"2026-06-30T08:10:53.822Z","1.2.39":"2026-06-30T08:28:10.515Z","1.2.40":"2026-08-10T14:23:39.964Z","1.2.41":"2026-08-11T04:40:21.469Z","1.2.43":"2026-08-19T08:59:08.391Z","1.2.44":"2026-08-21T15:56:39.098Z"},"description":"Accessible University React UI components","maintainers":[{"name":"nezqt3","email":"dalekseenko8@gmail.com"}],"readme":"# UI system\n\n`shared/ui` — единая дизайн-система фронтенда Accessible University. Здесь живут универсальные, типизированные и не зависящие от предметной области компоненты: controls, feedback, typography, overlays и layout-примитивы.\n\nЦель системы — собирать страницы композицией компонентов, а не создавать для каждой страницы новую разметку и большой SCSS-файл.\n\n## Быстрый старт\n\nЗапустить каталог компонентов:\n\n```bash\ncd frontend\nnpm run storybook\n```\n\nПубличные компоненты и их типы экспортируются из `src/shared/ui/index.ts`:\n\n```tsx\nimport { Button, Card, Grid, Stack, Text } from \"@shared/ui\";\n\nexport function Example() {\n  return (\n    <Stack gap=\"6\">\n      <Text as=\"h1\" size=\"h1\" weight=\"bold\">\n        Сервисы\n      </Text>\n      <Grid columns={1} columnsMd={2} columnsLg={3} gap=\"4\">\n        <Card>...</Card>\n      </Grid>\n      <Button>Продолжить</Button>\n    </Stack>\n  );\n}\n```\n\n## Что находится в `shared/ui`\n\n| Группа   | Компоненты                                                                                         |\n| -------- | -------------------------------------------------------------------------------------------------- |\n| Layout   | `Container`, `Section`, `Stack`, `Inline`, `Grid`                                                  |\n| Actions  | `Button`, `IconButton`, `Pressable`, `BackButton`, `CloseButton`, `Pagination`                     |\n| Forms    | `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, `FormField`, `OtpInput`, `DatePickerModal`    |\n| Content  | `Card`, `Badge`, `Alert`, `Heading`, `Text`, `Tabs`                                                |\n| Feedback | `Skeleton`, `Spinner`, `InlineSpinner`, `Loader`, `EmptyState`, `ErrorState`, `NotificationStatus` |\n| Overlay  | `Modal`, `ResponsiveModal`, `ModalHeader`, `TicketCodeModal`                                       |\n\n## Правила композиции\n\n1. Сначала ищем готовый компонент в `shared/ui` и его пример в Storybook.\n2. Верх страницы строим через `Container`; смысловой блок с заголовком — через `Section`.\n3. Для расположения элементов используем `Stack` (вертикаль), `Inline` (горизонталь) и `Grid` (адаптивные колонки).\n4. Отступы задаём только токенами: `gap=\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"8\" | \"12\"`.\n5. Бизнес-логику, API-вызовы и сущностные типы не помещаем в `shared/ui`.\n\nНе превращаем layout-компоненты в универсальный CSS-конструктор: не добавляем props для произвольных цветов, размеров, `position`, `margin`, `padding` или `style`. Если визуальный паттерн стал повторяться — обсуждаем отдельный компонент или новый токен.\n\n## Токены и темы\n\nВсе новые стили используют CSS-переменные из `src/app/styles/tokens.scss`:\n\n- цветовые роли: `--ui-color-bg`, `--ui-color-surface`, `--ui-color-text`, `--ui-color-border`, `--ui-color-brand`;\n- spacing: `--ui-space-*`;\n- типографика: `--ui-font-size-*`, `--ui-font-weight-*`, `--ui-line-height-*`;\n- радиусы, тени, размеры контролов и motion-токены.\n\nПоддерживаются light/dark-тема, палитры, контрастный режим и масштаб текста через data-атрибуты на `document.documentElement`. Компонент должен работать в этих режимах без дополнительных theme-override селекторов.\n\nНе используем новые raw hex-значения, градиенты и произвольные значения отступов в shared-компонентах.\n\n## Доступность и состояния\n\nКаждый интерактивный компонент должен иметь:\n\n- нативный элемент (`button`, `input`, `select`, `a`) или корректную семантику;\n- доступный label / `aria-label`, если видимого текста нет;\n- `:focus-visible` через общий focus-токен;\n- состояния disabled, loading, error или empty там, где они применимы;\n- touch-friendly размер и корректную клавиатурную навигацию.\n\nLoading не должен сдвигать layout. Кнопка в загрузке отключена и получает `aria-busy`; скелетон повторяет геометрию загружаемого контента.\n\n## Ошибки и поддержка\n\nОшибка должна объяснять, что произошло, и по возможности предлагать безопасное повторное действие. Если проблема не устраняется, добавляйте понятный путь к поддержке:\n\n> Не удалось решить проблему? Напишите в [поддержку расписания](https://t.me/schedulesupport).\n\nСсылку показываем в `ErrorState`, на критичных экранах и там, где пользователь не может продолжить работу самостоятельно. Не используем её как замену локальному сообщению об ошибке или кнопке «Повторить».\n\n## Как добавить компонент\n\n1. Убедиться, что подходящего компонента или варианта ещё нет.\n2. Создать отдельную папку: `Component/Component.tsx`, `Component.scss`, `Component.stories.tsx`, `index.ts`.\n3. Использовать токены и существующие shared-примитивы.\n4. Экспортировать компонент и типы из локального `index.ts` и `shared/ui/index.ts`.\n5. В Storybook показать нормальное, крайнее и интерактивное состояния; описать все публичные props через `argTypes`.\n6. Проверить `npm run typecheck`, `npm run lint:css`, `npm run lint`.\n\nПодробные визуальные правила и решения по доступности: [Design Component Guidelines](./docs/dev-context/DESIGN_COMPONENT_GUIDELINES.md).\n","readmeFilename":"README.md"}