{"_id":"@aizvi/ui","_rev":"2-be437f67495f8bc733fb16f95e1fb70b","name":"@aizvi/ui","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@aizvi/ui","version":"0.1.0","keywords":["aizvi","design-system","react","ui","components","typescript","accessible","open-source"],"license":"MIT","_id":"@aizvi/ui@0.1.0","maintainers":[{"name":"ahmadhuss","email":"ahmadhussnain787@gmail.com"}],"homepage":"https://github.com/aizvi/ui","bugs":{"url":"https://github.com/aizvi/ui/issues"},"dist":{"shasum":"21e1bd3d96b6f92616f076dd84e30e19d3ddc6f8","tarball":"https://registry.npmjs.org/@aizvi/ui/-/ui-0.1.0.tgz","fileCount":169,"integrity":"sha512-xyA0eBV8KQua++Ly+js1/DQOyB0Y96HY1bSfl2J2gLFthFNG4sVO8WY+Y66U2V24lpc5YCC6xqTFRaOiw9hPWA==","signatures":[{"sig":"MEUCIQDcHp2yapkrsjBdYVudWhgZzkw7X8nPzoQ95GGravchLwIgXgIa8LEqGMOfaIzdgcxMQ54hFK+Xral6UAvs0zGWQmI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":212432},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=20"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./*":{"types":"./dist/components/*/*.d.ts","import":"./dist/components/*/*.js"},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"gitHead":"dd0600d97e992827460fbf44f7cff8e8042391d1","scripts":{"dev":"storybook dev -p 6006","lint":"eslint .","test":"vitest run","build":"vite build","format":"prettier --write .","release":"npm run build && changeset publish","version":"changeset version","lint:fix":"eslint . --fix","changeset":"changeset","typecheck":"tsc --noEmit","test:watch":"vitest","format:check":"prettier --check .","test:coverage":"vitest run --coverage","prepublishOnly":"npm run typecheck && npm run lint && npm run test && npm run build","build:storybook":"storybook build","generate:palette":"node ./scripts/generate-palette.mjs"},"_npmUser":{"name":"ahmadhuss","email":"ahmadhussnain787@gmail.com"},"repository":{"url":"git+https://github.com/aizvi/ui.git","type":"git"},"_npmVersion":"10.9.8","description":"An open-source React design system for building modern, consistent, and accessible user interfaces.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.23.1","dependencies":{"@radix-ui/react-tabs":"^1.1.21","@radix-ui/react-dialog":"^1.1.23","@radix-ui/react-select":"^2.3.7","@radix-ui/react-slider":"^1.4.7","@radix-ui/react-switch":"^1.3.7","@radix-ui/react-popover":"^1.1.23","@radix-ui/react-tooltip":"^1.2.16","@radix-ui/react-checkbox":"^1.3.11","@radix-ui/react-accordion":"^1.2.20","@radix-ui/react-dropdown-menu":"^2.1.24"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.2.0","jsdom":"^30.0.1","react":"^19.2.8","eslint":"^9.39.5","vitest":"^4.1.10","globals":"^17.8.0","prettier":"^3.9.6","react-dom":"^19.2.8","storybook":"^10.5.5","@eslint/js":"^9.39.5","typescript":"^6.0.3","@types/node":"^26.1.2","@types/react":"^19.2.18","@changesets/cli":"^2.31.1","vite-plugin-dts":"^5.0.3","@radix-ui/colors":"^3.0.0","@types/react-dom":"^19.2.4","typescript-eslint":"^8.65.0","@vitejs/plugin-react":"^6.0.5","@storybook/addon-a11y":"^10.5.5","@storybook/react-vite":"^10.5.5","@testing-library/react":"^16.3.2","eslint-config-prettier":"^10.1.8","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-storybook":"^10.5.5","@testing-library/jest-dom":"^7.0.0","eslint-plugin-react-hooks":"^7.1.1","@testing-library/user-event":"^14.6.1"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1785531501768_0.6148441339767183","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@aizvi/ui","version":"0.1.1","description":"An open-source React design system for building modern, consistent, and accessible user interfaces.","license":"MIT","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"},"./styles.css":"./dist/styles.css","./package.json":"./package.json","./*":{"types":"./dist/components/*/*.d.ts","import":"./dist/components/*/*.js"}},"scripts":{"dev":"storybook dev -p 6006","generate:palette":"node ./scripts/generate-palette.mjs","build":"vite build","build:storybook":"storybook build","docs:dev":"vitepress dev docs","docs:build":"vitepress build docs","docs:preview":"vitepress preview docs","typecheck":"tsc --noEmit","lint":"eslint .","lint:fix":"eslint . --fix","format":"prettier --write .","format:check":"prettier --check .","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run typecheck && npm run lint && npm run test && npm run build","changeset":"changeset","version":"changeset version","release":"npm run build && changeset publish"},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"dependencies":{"@radix-ui/react-accordion":"^1.2.20","@radix-ui/react-checkbox":"^1.3.11","@radix-ui/react-dialog":"^1.1.23","@radix-ui/react-dropdown-menu":"^2.1.24","@radix-ui/react-popover":"^1.1.23","@radix-ui/react-select":"^2.3.7","@radix-ui/react-slider":"^1.4.7","@radix-ui/react-switch":"^1.3.7","@radix-ui/react-tabs":"^1.1.21","@radix-ui/react-tooltip":"^1.2.16"},"devDependencies":{"@changesets/cli":"^2.31.1","@eslint/js":"^9.39.5","@radix-ui/colors":"^3.0.0","@storybook/addon-a11y":"^10.5.5","@storybook/react-vite":"^10.5.5","@testing-library/jest-dom":"^7.0.0","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/node":"^26.1.2","@types/react":"^19.2.18","@types/react-dom":"^19.2.4","@vitejs/plugin-react":"^6.0.5","eslint":"^9.39.5","eslint-config-prettier":"^10.1.8","eslint-plugin-jsx-a11y":"^6.10.2","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-storybook":"^10.5.5","globals":"^17.8.0","jsdom":"^30.0.1","prettier":"^3.9.6","react":"^19.2.8","react-dom":"^19.2.8","storybook":"^10.5.5","typescript":"^6.0.3","typescript-eslint":"^8.65.0","vite":"^8.2.0","vite-plugin-dts":"^5.0.3","vitepress":"^1.6.4","vitest":"^4.1.10"},"keywords":["aizvi","design-system","react","ui","components","typescript","accessible","open-source"],"repository":{"type":"git","url":"git+https://github.com/aizvi/ui.git"},"homepage":"https://github.com/aizvi/ui","bugs":{"url":"https://github.com/aizvi/ui/issues"},"publishConfig":{"access":"public"},"engines":{"node":">=20"},"_id":"@aizvi/ui@0.1.1","gitHead":"671d9c361a082d1699768de15df8ed563842066f","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-nR32Y+X2L1KMF/gD6SoTcnKwdaYW1+zbkydkoOWK+CXsrBWQy14e6tdSmDvA1slC7UZopTIw1cQnfKbhQTQ0RQ==","shasum":"a01499840473571b86d562699c7600c43d595bb1","tarball":"https://registry.npmjs.org/@aizvi/ui/-/ui-0.1.1.tgz","fileCount":169,"unpackedSize":211801,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDI4R96dzX2nvGDg3mlxD58FH/2x7ceS0c1d74UfszggQIgPYYHkBhqHod1E4bt28gBZL3wzsuE6am24P8euX8DVqk="}]},"_npmUser":{"name":"ahmadhuss","email":"ahmadhussnain787@gmail.com"},"directories":{},"maintainers":[{"name":"ahmadhuss","email":"ahmadhussnain787@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.1_1786263822130_0.5262157541916808"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-31T20:58:21.630Z","modified":"2026-08-09T08:23:42.475Z","0.1.0":"2026-07-31T20:58:21.909Z","0.1.1":"2026-08-09T08:23:42.266Z"},"bugs":{"url":"https://github.com/aizvi/ui/issues"},"license":"MIT","homepage":"https://github.com/aizvi/ui","keywords":["aizvi","design-system","react","ui","components","typescript","accessible","open-source"],"repository":{"type":"git","url":"git+https://github.com/aizvi/ui.git"},"description":"An open-source React design system for building modern, consistent, and accessible user interfaces.","maintainers":[{"name":"ahmadhuss","email":"ahmadhussnain787@gmail.com"}],"readme":"# Aizvi/UI\n\nAn open-source React design system for building modern, consistent, and accessible user interfaces.\n\nBuilt with **TypeScript**, **Radix Primitives**, and **CSS Modules**. Radix stays an internal\nimplementation detail, you never import it directly.\n\n```text\nConsumer application\n        ↓\nPublic components (@aizvi/ui)\n        ↓\nTypeScript API + CSS Modules\n        ↓\nRadix Primitive or native HTML\n```\n\n## Install\n\n```bash\nnpm install @aizvi/ui\n```\n\n`react` and `react-dom` are peer dependencies (`^18.2.0 || ^19.0.0`).\n\n## Usage\n\n```tsx\nimport { Button, Dialog, Input } from \"@aizvi/ui\";\nimport \"@aizvi/ui/styles.css\";\n\nexport function Example() {\n  return <Button variant=\"primary\">Continue</Button>;\n}\n```\n\n`@aizvi/ui/styles.css` bundles the color palette, semantic tokens, and a base reset alongside\nevery component's styles, import it once, at the root of your app.\n\nEach component is also available as its own subpath, if you'd rather not import from the\npackage root:\n\n```tsx\nimport { Button } from \"@aizvi/ui/Button\";\n```\n\n## Themes\n\nSet `data-theme` on `<html>` (or any ancestor element) to switch between light and dark:\n\n```html\n<html data-theme=\"light\"></html>\n<html data-theme=\"dark\"></html>\n```\n\nFalling back to `:root` styling means light is the default even with no attribute set.\n\n## Typography\n\nRoboto is the default font, loaded from nowhere in particular, the package never fetches a\nfont from an external URL. Bring your own Roboto (self-hosted, `next/font`, a `<link>` tag,\nwhatever fits your app), or override the token to use something else entirely:\n\n```css\n:root {\n  --ds-font-family: \"Inter\", system-ui, sans-serif;\n}\n```\n\n## Design tokens\n\nComponents read from semantic CSS custom properties, never hard-coded colors, spacing, or\nradii. Override any of them in your own stylesheet to reskin the library:\n\n```css\n:root {\n  --ds-color-primary: var(--blue-9);\n  --ds-radius-md: 0.375rem;\n  --ds-space-4: 1rem;\n}\n```\n\nSee `src/styles/tokens.css` for the full set (color, spacing, radius, typography, shadows,\nmotion, focus ring).\n\n## Components\n\n| Component                                | Built on         |\n| ---------------------------------------- | ---------------- |\n| Button, Input, FormField, Textarea, Link | Native HTML      |\n| Heading, Text, Card, Container, Stack    | Native HTML      |\n| Dialog, Select, Checkbox, Switch         | Radix Primitives |\n| Tabs, Tooltip, Popover, DropdownMenu     | Radix Primitives |\n| Accordion, Slider                        | Radix Primitives |\n\n## Accessibility\n\nEvery component ships with keyboard support, visible `:focus-visible` styling, correct\nlabeling, ARIA attributes where required, sufficient color contrast, and disabled/loading\nstates. Storybook's accessibility addon runs automated checks against every story.\n\n## Development\n\n```bash\nnpm install\nnpm run dev              # Storybook at localhost:6006\nnpm run build             # library build (dist/)\nnpm run build:storybook   # static Storybook site\nnpm run typecheck\nnpm run lint\nnpm run test\nnpm run generate:palette  # regenerate palette.css from @radix-ui/colors\n```\n\n## Package requirements\n\n- ESM output only, with generated TypeScript declarations.\n- `react` / `react-dom` are peer dependencies; Radix primitives are regular dependencies.\n- CSS files are marked as side effects; everything else is side-effect free.\n- Interactive component entry points keep their `\"use client\"` directive intact, so\n  Next.js's app router can draw the client boundary correctly.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}