{"_id":"@bisraty/selam-ui","name":"@bisraty/selam-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@bisraty/selam-ui","version":"0.1.0","description":"An accessible-first React component library. Every component follows WAI-ARIA APG patterns.","license":"MIT","author":{"name":"Bisrat Yenehun"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/bisraty/Selam_ui.git"},"homepage":"https://bisraty.github.io/Selam_ui","bugs":{"url":"https://github.com/bisraty/Selam_ui/issues"},"type":"module","sideEffects":false,"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"keywords":["react","components","accessibility","a11y","wcag","aria","design-system","ui"],"scripts":{"build":"tsup && npm run build:css","build:css":"tailwindcss -i ./src/styles/index.css -o ./dist/styles.css --minify","dev":"tsup --watch","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","typecheck":"tsc --noEmit","lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --write .","format:check":"prettier --check .","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@eslint/js":"^9.39.4","@storybook/addon-a11y":"8.6.18","@storybook/addon-essentials":"8.6.18","@storybook/blocks":"8.6.18","@storybook/react":"8.6.18","@storybook/react-vite":"8.6.18","@storybook/test":"8.6.18","@tailwindcss/cli":"^4.3.2","@tailwindcss/postcss":"^4.3.2","@tailwindcss/vite":"^4.3.2","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/jest-axe":"^3.5.9","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.7.0","@vitest/coverage-v8":"^3.2.7","eslint":"^9.39.4","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-react":"^7.37.5","eslint-plugin-react-hooks":"^7.1.1","jest-axe":"^10.0.0","jsdom":"^29.1.1","prettier":"^3.9.4","react":"^18.3.1","react-dom":"^18.3.1","storybook":"8.6.18","tailwindcss":"^4.3.2","tsup":"^8.5.1","typescript":"^5.9.3","typescript-eslint":"^8.63.0","vite":"^6.4.3","vitest":"^3.2.7"},"engines":{"node":">=18"},"_id":"@bisraty/selam-ui@0.1.0","gitHead":"176e76f56d6cf5b3d76a04d980ae09e929f6a1f6","_nodeVersion":"22.14.0","_npmVersion":"11.4.0","dist":{"integrity":"sha512-v9Q/1pSYse6z+Hd95TRroAm2gNdTgtUOwqymqU+J+0NOUp46BgA9yzF24dQmdnlIk9I39hQsAHdLPxX/rBbPPg==","shasum":"15be3bd76197e968e0e73ccc33d684598ebe0b0d","tarball":"https://registry.npmjs.org/@bisraty/selam-ui/-/selam-ui-0.1.0.tgz","fileCount":10,"unpackedSize":383841,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGfRanqKxu5cm03CRsUKLiVjDDss9/Bh9p8rMIYai4ZpAiEArvPfTOn1FrThNx37XOg59EnCUEdWNxAbE2NjlN4BYV8="}]},"_npmUser":{"name":"bisraty","email":"bisrat2007manu@gmail.com"},"directories":{},"maintainers":[{"name":"bisraty","email":"bisrat2007manu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/selam-ui_0.1.0_1783624854062_0.17962350206803723"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-09T19:20:53.828Z","0.1.0":"2026-07-09T19:20:54.229Z","modified":"2026-07-09T19:20:54.560Z"},"maintainers":[{"name":"bisraty","email":"bisrat2007manu@gmail.com"}],"description":"An accessible-first React component library. Every component follows WAI-ARIA APG patterns.","homepage":"https://bisraty.github.io/Selam_ui","keywords":["react","components","accessibility","a11y","wcag","aria","design-system","ui"],"repository":{"type":"git","url":"git+https://github.com/bisraty/Selam_ui.git"},"author":{"name":"Bisrat Yenehun"},"bugs":{"url":"https://github.com/bisraty/Selam_ui/issues"},"license":"MIT","readme":"# Selam UI\r\n\r\n**An accessible-first React component library. Every component follows WAI-ARIA APG patterns.**\r\n\r\n[![npm version](https://img.shields.io/npm/v/%40bisraty%2Fselam-ui.svg)](https://www.npmjs.com/package/@bisraty/selam-ui)\r\n[![CI](https://github.com/bisraty/Selam_ui/actions/workflows/ci.yml/badge.svg)](https://github.com/bisraty/Selam_ui/actions/workflows/ci.yml)\r\n[![license: MIT](https://img.shields.io/npm/l/%40bisraty%2Fselam-ui.svg)](./LICENSE)\r\n\r\n\"Selam\" means hello/peace in Amharic. This isn't a component library that\r\nhappens to be accessible ā€” accessibility is the whole point. Every\r\ninteraction pattern here is implemented from scratch against a specific\r\n[WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/)\r\nexample: correct roles, states, keyboard interactions, and focus\r\nmanagement, with zero runtime dependencies besides React.\r\n\r\nšŸ“– **[Browse the components in Storybook ā†’](https://bisraty.github.io/Selam_ui)**\r\n\r\n\r\n\r\n## Install\r\n\r\n```bash\r\nnpm install @bisraty/selam-ui\r\n```\r\n\r\n```tsx\r\nimport '@bisraty/selam-ui/styles.css'; // once, near your app's root\r\nimport { Tabs, TabList, Tab, TabPanel } from '@bisraty/selam-ui';\r\n\r\nfunction Example() {\r\n return (\r\n \r\n \r\n Account\r\n Password\r\n \r\n Account settings go here.\r\n Password settings go here.\r\n \r\n );\r\n}\r\n```\r\n\r\n`react`/`react-dom` (^18) are peer dependencies. Full usage docs, a\r\ntheming guide, and an accessibility deep-dive live in the\r\n[Storybook docs](https://bisraty.github.io/Selam_ui).\r\n\r\n## Components\r\n\r\n| Component | APG pattern | Keyboard support |\r\n| ------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |\r\n| `SkipNavLink` | [Skip link](https://www.w3.org/WAI/WCAG21/Techniques/general/G1) | Focusable via Tab; Enter jumps to main content |\r\n| `Tooltip` | [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) | Opens on hover/focus; Escape closes |\r\n| `Accordion` | [Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) | Arrow Up/Down between headers, Home/End, Enter/Space toggles |\r\n| `Tabs` | [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) | Arrow Left/Right (or Up/Down if vertical), Home/End, roving tabindex |\r\n| `Toast` / `ToastProvider` | [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) / status live regions | Dismiss button focusable; auto-dismiss pauses on hover/focus |\r\n| `Dialog` / `AlertDialog` | [Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) | Tab trapped inside, Escape closes and returns focus |\r\n| `DropdownMenu` | [Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) | Arrow Up/Down, Home/End, type-ahead, Escape closes and returns focus |\r\n| `Combobox` | [Combobox (list autocomplete)](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/) | Arrow Up/Down (virtual focus), Enter selects, Escape closes |\r\n| `DatePicker` | [Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) | Full arrow-key grid navigation, Home/End (week), PageUp/PageDown (month), Enter, Escape |\r\n| `FocusTrap` | internal primitive (also exported) ā€” powers `Dialog`/`AlertDialog` and `DatePicker` | Tab/Shift+Tab cycle within, focus returns to the trigger on unmount |\r\n\r\nEscape closes every overlay above and restores focus to whatever opened\r\nit. Tab is trapped only inside `Dialog`/`AlertDialog` and the\r\n`DatePicker` popup ā€” everywhere else it moves through the page normally.\r\n\r\n## Accessibility commitments\r\n\r\n- **Keyboard support** ā€” every component implements its APG pattern's\r\n full keyboard interaction model, not just Enter/Escape. See the table\r\n above and each component's \"Keyboard navigation\" story.\r\n- **Focus management** ā€” `FocusTrap` (exported) captures the\r\n previously-focused element, traps Tab at the boundaries, and restores\r\n focus on close. Composite widgets use roving tabindex (Accordion,\r\n Tabs, DropdownMenu, DatePicker's grid) or virtual focus via\r\n `aria-activedescendant` (Combobox), matching what each APG pattern\r\n actually specifies.\r\n- **Screen reader testing** ā€” automated: every component has a\r\n `jest-axe` test asserting zero violations, plus Storybook's\r\n `addon-a11y` panel on every story. **Manual testing with a real\r\n screen reader (NVDA/Windows or VoiceOver/macOS) has not yet been\r\n done** ā€” this is an open item before treating the library as\r\n production-ready, particularly for `Dialog`, `Combobox`, and\r\n `DatePicker`.\r\n- **Reduced motion** ā€” `useReducedMotion` (exported) is used internally\r\n by `Tooltip` and `Toast` to skip animation logic entirely, not just\r\n shorten it, when `prefers-reduced-motion` is set.\r\n- **Contrast** ā€” the default accent (`#078930`) is used for borders and\r\n focus rings (3:1 minimum); anywhere text sits directly on a solid\r\n accent fill uses the darker `--selam-accent-hover` shade instead, for\r\n a real margin above the 4.5:1 AA text threshold rather than a\r\n borderline pass. See the Storybook **Theming** page for the numbers\r\n and how to override the palette.\r\n\r\n## Roadmap\r\n\r\nPlanned, not yet built: `Select`, `RadioGroup`, `Switch`.\r\n\r\n## Development\r\n\r\n```bash\r\nnpm install\r\nnpm test # vitest + jest-axe\r\nnpm run lint\r\nnpm run typecheck\r\nnpm run storybook # local dev server\r\nnpm run build # tsup: ESM + CJS + .d.ts, plus the compiled stylesheet\r\n```\r\n\r\n## License\r\n\r\nMIT Ā© Bisrat Yenehun\r\n","readmeFilename":"README.md","_rev":"1-4bfa1cbbd49ee08494140cf6c2366d44"}