{"_id":"@3278media/react-component-library","name":"@3278media/react-component-library","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@3278media/react-component-library","version":"1.0.0","description":"Accessible, production-ready React component library built with TypeScript and Tailwind CSS.","type":"module","license":"MIT","private":false,"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"sideEffects":["./dist/styles.css"],"repository":{"type":"git","url":"git+https://github.com/3278mediadotcom/react-component-library.git"},"bugs":{"url":"https://github.com/3278mediadotcom/react-component-library/issues"},"homepage":"https://github.com/3278mediadotcom/react-component-library#readme","keywords":["react","components","ui","typescript","tailwindcss","accessibility"],"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"vite build --config vite.lib.config.ts","preview":"vite preview","lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --write .","format:check":"prettier --check .","test":"vitest run --project unit","test:watch":"vitest --project unit","test:unit":"vitest run --project unit","test:all":"vitest run","test:stories":"vitest run --project storybook","test:coverage":"vitest run --project unit --coverage","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run lint && npm run test && npm run build:lib"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"devDependencies":{"@chromatic-com/storybook":"latest","@eslint/js":"^9.13.0","@storybook/addon-a11y":"^10.5.7","@storybook/addon-docs":"^10.5.7","@storybook/addon-mcp":"latest","@storybook/addon-vitest":"^10.5.7","@storybook/react-vite":"^10.5.7","@tailwindcss/vite":"^4.3.3","@testing-library/jest-dom":"^7.0.0","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.3","@types/node":"^26.1.2","@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","@vitest/browser-playwright":"4.1.10","@vitest/coverage-v8":"4.1.10","eslint":"^9.39.5","eslint-config-prettier":"^10.1.8","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.26","eslint-plugin-storybook":"^10.5.7","globals":"^15.11.0","jsdom":"^29.1.1","playwright":"latest","prettier":"^3.9.6","storybook":"^10.5.7","tailwindcss":"^4.3.3","typescript":"~5.6.2","typescript-eslint":"^8.11.0","vite":"^5.4.10","vite-plugin-dts":"^5.0.3","vitest":"^4.1.10"},"gitHead":"a2dd37b4f43f6187d59bd0c714c7267aed48d386","_id":"@3278media/react-component-library@1.0.0","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-oEi6HjkJE3329+HiiGpQKpFkZlMAQfLlIGFWcUR4H7Xi/SNsZ4p0HmaFIuHPHjk0s+ztlRoDM1q4o8NWBx3Y5A==","shasum":"052725650132dd972184e6135b7421c37c1f123f","tarball":"https://registry.npmjs.org/@3278media/react-component-library/-/react-component-library-1.0.0.tgz","fileCount":125,"unpackedSize":282345,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC0blLLhz+0orrsNcuQZGrHgOIg+2AsUlZXmHPp+1U6lQIhAIAcDQKnHVp2LpA/5+r6dzwQ21Zu9ElCoejOeM0SSsoN"}]},"_npmUser":{"name":"3278media","email":"3278podcast@gmail.com"},"directories":{},"maintainers":[{"name":"3278media","email":"3278podcast@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-component-library_1.0.0_1786127164826_0.5629621940804417"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-07T18:26:04.612Z","1.0.0":"2026-08-07T18:26:04.967Z","modified":"2026-08-07T18:26:05.182Z"},"maintainers":[{"name":"3278media","email":"3278podcast@gmail.com"}],"description":"Accessible, production-ready React component library built with TypeScript and Tailwind CSS.","homepage":"https://github.com/3278mediadotcom/react-component-library#readme","keywords":["react","components","ui","typescript","tailwindcss","accessibility"],"repository":{"type":"git","url":"git+https://github.com/3278mediadotcom/react-component-library.git"},"bugs":{"url":"https://github.com/3278mediadotcom/react-component-library/issues"},"license":"MIT","readme":"# @3278media/react-component-library\n\nProduction-ready React component library built with TypeScript, Tailwind CSS v4,\nand WCAG-aware accessibility. Ships as a self-contained npm package — components,\ntypes, and compiled CSS — with zero Tailwind configuration required by consumers.\n\n```bash\nnpm install @3278media/react-component-library\n```\n\n[](https://github.com/3278mediadotcom/react-component-library/actions/workflows/ci.yml)\n[](https://3278mediadotcom.github.io/react-component-library/)\n[](https://www.npmjs.com/package/@3278media/react-component-library)\n[](https://www.npmjs.com/package/@3278media/react-component-library)\n[](LICENSE)\n[](https://www.typescriptlang.org/)\n[](https://react.dev/)\n\n\n\n---\n\n## Engineering Highlights\n\n- ✓ Built **29 accessible React components** across forms, navigation, feedback, data display, and layout\n- ✓ Designed **reusable overlay infrastructure** — portals, focus traps, scroll lock, escape handling\n- ✓ Implemented an **enterprise DataTable** — sorting, filtering, pagination, selection, column visibility, CSV export, server-side mode\n- ✓ Created a **complete npm distribution pipeline** — ESM bundle, generated types, compiled CSS, CI package verification\n- ✓ Achieved **600 passing tests** across 31 test files\n- ✓ Published a **fully typed TypeScript package** with protected exports and externalized React\n\n---\n\n## Features\n\n- ⚛️ **29 accessible React components** — buttons, overlays, data tables, forms, and layout primitives\n- 🎨 **Tailwind CSS v4 under the hood** — compiled `styles.css` ships with the package; consumers need no Tailwind setup\n- ♿ **WCAG 2.1 AA oriented** — keyboard support, focus management, and ARIA patterns on every component\n- 🧩 **Fully typed** — generated `.d.ts` declarations, generic `DataTable`, and prop autocomplete\n- 📦 **ESM only** — tree-shakable output, React/React-dom externalized as peer dependencies\n- 📚 **Storybook 10** — living documentation, a11y and vitest integration\n- 🧪 **Vitest + React Testing Library** — behavior and accessibility test suites\n- 🌙 **Dark mode** — automatic via `prefers-color-scheme`\n\n## Installation\n\nRequires **React 18** and **React DOM 18** as peer dependencies.\n\n```bash\nnpm install @3278media/react-component-library\n```\n\nImport the components and the compiled stylesheet **once** in your app:\n\n```tsx\nimport { Button } from \"@3278media/react-component-library\";\nimport \"@3278media/react-component-library/styles.css\";\n```\n\n> **No Tailwind configuration is needed.** The package ships its own compiled\n> CSS containing every utility class, theme token, and animation the components use.\n\n## Quick Start\n\n```tsx\nimport { Button, Modal, DataTable } from \"@3278media/react-component-library\";\nimport \"@3278media/react-component-library/styles.css\";\n\n// Button\n\n\n// Modal\n setOpen(false)} title=\"Example\">\n Modal content\n\n\n// Typed DataTable\ninterface User {\n id: number;\n name: string;\n email: string;\n}\n\nconst columns = [\n { key: \"name\", header: \"Name\" },\n { key: \"email\", header: \"Email\" },\n];\n\n columns={columns} rows={users} />;\n```\n\n## Theming\n\nThe package ships a complete design system in `dist/styles.css`:\n\n- **CSS custom properties** — color, spacing, and typography tokens defined in a `@layer theme`\n- **Tailwind v4 theme** — `--color-*`, `--text-*`, `--radius-*`, `--animate-*` tokens\n- **Custom animations** — modal, drawer, toast, pop, skeleton-wave, and progress\n keyframes included with the theme\n- **Dark mode** — automatic via `prefers-color-scheme`; components ship `dark:` variants\n\n| Token | Default | Purpose |\n| ----- | ------- | ------- |\n| `--color-blue-600` | `oklch(54.6% .245 262.881)` | Primary action color |\n| `--color-slate-900` | `oklch(20.8% .042 265.755)` | Text color |\n| `--color-slate-200` | `oklch(92.9% .013 255.508)` | Border color |\n| `--animate-modal-in` | `modal-in .2s cubic-bezier(.16,1,.3,1)` | Modal entrance |\n\nSee [docs/theming.md](docs/theming.md) for the full token guide and customization options.\n\n## Available Components\n\nThe library ships **29 components** in five categories, plus shared hooks.\n\n### Forms\n\n| Component | Description |\n| --------- | ----------- |\n| [Button](src/components/Button/README.md) | Action control with variants, sizes, icons, and loading state |\n| [Input](src/components/Input/README.md) | Accessible text field with labels, validation, and icons |\n| [Select](src/components/Select/README.md) | Accessible combobox with full keyboard support |\n| [Checkbox](src/components/Checkbox/README.md) | Checkbox with indeterminate state and validation |\n| [RadioGroup](src/components/RadioGroup/README.md) | Radio group with roving tabindex and arrow-key navigation |\n| [Switch](src/components/Switch/README.md) | Accessible on/off toggle with icons and loading state |\n\n### Navigation\n\n| Component | Description |\n| --------- | ----------- |\n| [Tabs](src/components/Tabs/README.md) | Tab interface with roving tabindex and orientations |\n| [Breadcrumb](src/components/Breadcrumb/README.md) | Navigation aid with `aria-current=\"page\"` |\n| [Pagination](src/components/Pagination/README.md) | Page navigation with ellipsis collapsing |\n\n### Feedback\n\n| Component | Description |\n| --------- | ----------- |\n| [Alert](src/components/Alert/README.md) | Inline message with severity-based live regions |\n| [Toast](src/components/Toast/README.md) | Toast provider system with auto-dismiss and hover pause |\n| [Modal](src/components/Modal/README.md) | Accessible dialog with portal, focus trap, and scroll lock |\n| [Drawer](src/components/Drawer/README.md) | Slide-in panel from any edge (4 placements) |\n| [Tooltip](src/components/Tooltip/README.md) | Accessible tooltip with delay, focus, placement, and arrow |\n| [Popover](src/components/Popover/README.md) | Positioned overlay for menus, forms, and cards |\n| [Badge](src/components/Badge/README.md) | Compact semantic status label with dot, pill, and icon |\n| [Spinner](src/components/Spinner/README.md) | Indeterminate progress indicator with a11y live region |\n\n### Data Display\n\n| Component | Description |\n| --------- | ----------- |\n| [DataTable](src/components/DataTable/README.md) | Sortable, filterable, paginated table with export |\n| [Table](src/components/Table/README.md) | Semantic table with column configuration |\n| [Avatar](src/components/Avatar/README.md) | User avatar with shapes, sizes, and status |\n| [AvatarGroup](src/components/AvatarGroup/README.md) | Overlapping avatar stack with overflow count |\n| [Progress](src/components/Progress/README.md) | Deterministic and indeterminate progress bars |\n| [Skeleton](src/components/Skeleton/README.md) | Loading placeholders with animation variants |\n| [EmptyState](src/components/EmptyState/README.md) | Icon, title, and action layout for empty states |\n\n### Layout\n\n| Component | Description |\n| --------- | ----------- |\n| [Card](src/components/Card/README.md) | Content container with header/body/footer regions |\n| [Divider](src/components/Divider/README.md) | Horizontal/vertical separator with variants |\n| [Stack](src/components/Stack/README.md) | Flex layout with direction, spacing, and alignment |\n| [Grid](src/components/Grid/README.md) | Responsive grid with breakpoint columns |\n| [Accordion](src/components/Accordion/README.md) | Collapsible sections with keyboard navigation |\n\n### Hooks\n\nThe package also exports shared hooks: `useDebounce`, `useDebouncedCallback`,\n`useResizeObserver`, `useSorting`, `usePagination`, and `useSelection`.\n\n## Accessibility\n\nEvery component is built with WCAG 2.1 AA in mind:\n\n- **Modal** — focus trap, `aria-modal`, `aria-labelledby`/`aria-describedby`, Escape-to-close, scroll lock\n- **Tabs** — roving tabindex, arrow-key navigation, `role=\"tablist\"`/`tab`/`tabpanel`, `aria-selected`\n- **Select** — combobox pattern, `aria-expanded`, `aria-controls`, listbox navigation\n- **DataTable** — semantic `
` markup, sort buttons with `aria-sort` labels, live region for count\n\nSee [docs/accessibility.md](docs/accessibility.md) for the full accessibility philosophy,\nkeyboard map, and ARIA details.\n\n## TypeScript Support\n\nFully typed with generated declaration files shipped in the package:\n\n- Every component exposes typed `Props` interfaces (e.g. `ButtonProps`, `ModalProps`)\n- Generic `DataTable` provides column- and row-level type safety\n- `import type` exports are available for all shared types\n\n```tsx\nimport { DataTable } from \"@3278media/react-component-library\";\nimport type { DataTableColumn } from \"@3278media/react-component-library\";\n\nconst columns: DataTableColumn[] = [\n { key: \"name\", header: \"Name\" },\n { key: \"email\", header: \"Email\" },\n];\n```\n\n## Storybook\n\nThe project ships a full Storybook with stories for every component:\n\n```bash\nnpm run storybook\n```\n\nStatic build:\n\n```bash\nnpm run build-storybook\n```\n\n## Development\n\n```bash\nnpm install\nnpm run dev # Vite showcase app\nnpm run storybook # Storybook at localhost:6006\n```\n\n## Testing\n\n```bash\nnpm run test # Vitest unit tests (jsdom)\nnpm run test:watch # Watch mode\nnpm run test:coverage # Coverage report\n```\n\n## Building\n\n```bash\nnpm run build # Build the showcase app\nnpm run build:lib # Build the publishable library (dist/index.js + index.d.ts + styles.css)\nnpm pack # Create the publishable tarball\n```\n\n## Contributing\n\nPlease read [docs/contributing.md](docs/contributing.md). Every component ships\nwith tests, Storybook stories, a README, and typed props.\n\n## License\n\n[MIT](LICENSE)","readmeFilename":"README.md","_rev":"1-9ac62e3b59b630d09888855ccecc5c0e"}