{"_id":"@akinbdl/atlas-ui","name":"@akinbdl/atlas-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@akinbdl/atlas-ui","version":"0.1.0","description":"React design system with Tailwind CSS v4 — design tokens and 45+ components.","license":"MIT","author":{"name":"akinbdl"},"repository":{"type":"git","url":"git+https://github.com/akinbdl/atlas-ui.git"},"homepage":"https://github.com/akinbdl/atlas-ui#readme","bugs":{"url":"https://github.com/akinbdl/atlas-ui/issues"},"type":"module","sideEffects":["**/*.css"],"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./theme.css":"./dist/theme.css"},"scripts":{"dev":"vite","build":"npm run build:lib && npm run build:site","build:lib":"tsup && npm run build:css","build:css":"cp src/styles/theme.css dist/theme.css","build:site":"tsc --noEmit && vite build","prepublishOnly":"npm run build:lib","preview":"vite preview","pack:check":"npm run build:lib && npm pack --dry-run"},"keywords":["react","components","design-system","tailwindcss","ui","typescript"],"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0","tailwindcss":"^4.0.0"},"devDependencies":{"@tailwindcss/vite":"^4.1.12","@types/react":"^19.1.12","@types/react-dom":"^19.1.9","@vitejs/plugin-react":"^5.0.2","react":"^19.1.1","react-dom":"^19.1.1","tailwindcss":"^4.1.12","tsup":"^8.5.0","typescript":"^5.9.2","vite":"^7.1.3"},"gitHead":"03f9933836ec4ee3aa78d18bbccc629ac4a5c0af","_id":"@akinbdl/atlas-ui@0.1.0","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-/uC28Ivs5RJuojnqGi2QJQPQd8kzyQ+Nyp4z9MrkGesnda8adNvg24mVif1iaVqZJHMGjKS2t2q/wl7LMtgHIg==","shasum":"b0ddf5f8c7ada190f5b3cf443ffcb8f88b8c6a09","tarball":"https://registry.npmjs.org/@akinbdl/atlas-ui/-/atlas-ui-0.1.0.tgz","fileCount":7,"unpackedSize":1948170,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFU10FRRaqxWlhGR8J15B65eQHUpjVosxHOHGn8bg36DAiAncf/27gfxPl6gIYTigtVARkCy7mHFjFLc4X+h13yBNg=="}]},"_npmUser":{"name":"akinbdl","email":"akinnbedel@gmail.com"},"directories":{},"maintainers":[{"name":"akinbdl","email":"akinnbedel@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/atlas-ui_0.1.0_1787925170088_0.46780143955454445"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-28T13:52:49.909Z","0.1.0":"2026-08-28T13:52:50.299Z","modified":"2026-08-28T13:52:50.522Z"},"maintainers":[{"name":"akinbdl","email":"akinnbedel@gmail.com"}],"description":"React design system with Tailwind CSS v4 — design tokens and 45+ components.","homepage":"https://github.com/akinbdl/atlas-ui#readme","keywords":["react","components","design-system","tailwindcss","ui","typescript"],"repository":{"type":"git","url":"git+https://github.com/akinbdl/atlas-ui.git"},"author":{"name":"akinbdl"},"bugs":{"url":"https://github.com/akinbdl/atlas-ui/issues"},"license":"MIT","readme":"# @akinbdl/atlas-ui\n\nReact design system built with **TypeScript** and **Tailwind CSS v4**. Includes design tokens, dark mode, brand palettes, and 45+ base and application components — with zero extra UI runtime dependencies.\n\n## Requirements\n\n- React 18 or 19\n- Tailwind CSS v4\n\n## Install\n\n```bash\nnpm install @akinbdl/atlas-ui\n```\n\nPeer dependencies (if not already in your app):\n\n```bash\nnpm install react react-dom\nnpm install -D tailwindcss @tailwindcss/vite\n```\n\n## Setup\n\n### 1. Vite + Tailwind v4\n\n`vite.config.ts`:\n\n```ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"@tailwindcss/vite\";\n\nexport default defineConfig({\n  plugins: [react(), tailwindcss()],\n});\n```\n\n### 2. Global CSS\n\nImport Tailwind, Atlas theme tokens, and scan the library for utility classes:\n\n```css\n@import \"tailwindcss\";\n@import \"@akinbdl/atlas-ui/theme.css\";\n\n@source \"../node_modules/@akinbdl/atlas-ui/dist\";\n```\n\n> Adjust the `@source` path if your CSS file lives in a different folder.\n\n### 3. Dark mode (optional)\n\nAdd the `dark` class to `<html>` when the user prefers dark mode:\n\n```html\n<html class=\"dark\">\n```\n\nOr toggle at runtime:\n\n```ts\ndocument.documentElement.classList.toggle(\"dark\", isDark);\n```\n\n### 4. Brand color (optional)\n\nMap brand tokens to any palette step (example: rose):\n\n```css\n@theme {\n  --color-brand-600: var(--color-rose-600);\n  --color-brand-700: var(--color-rose-700);\n  /* …brand-25 through brand-950 */\n}\n```\n\n## Usage\n\n```tsx\nimport { Button, Input, Modal } from \"@akinbdl/atlas-ui\";\n\nexport function App() {\n  return (\n    <div className=\"p-6\">\n      <Button color=\"primary\">Save</Button>\n      <Input label=\"Email\" placeholder=\"you@example.com\" />\n    </div>\n  );\n}\n```\n\n## Exports\n\n| Import | Description |\n|---|---|\n| `@akinbdl/atlas-ui` | All components, hooks, and types |\n| `@akinbdl/atlas-ui/theme.css` | Design tokens and Tailwind theme |\n\n## Component groups\n\n- **Base** — Button, Input, Select, Checkbox, Avatar, Badge, Tooltip, …\n- **Application** — Modal, Table, Tabs, Calendar, DatePicker, Sidebar, …\n\nSee the local docs site (`npm run dev`) for live examples and API notes.\n\n## Scripts (monorepo root)\n\n| Script | Description |\n|---|---|\n| `npm run dev` | Docs / demo site |\n| `npm run build:lib` | Build npm package to `dist/` |\n| `npm run build:site` | Build static docs to `site-dist/` |\n| `npm run build` | Both |\n| `npm run pack:check` | Dry-run `npm pack` |\n\n## Publish\n\n```bash\nnpm login\nnpm publish --access public\n```\n\nScoped packages require `--access public` for open-source releases.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-5eddce925e65f5e716b11da1441a2387"}