{"_id":"@avinash995/mfe-design-system","name":"@avinash995/mfe-design-system","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@avinash995/mfe-design-system","version":"0.1.0","type":"module","private":false,"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/index.css"},"repository":{"type":"git","url":"git+https://github.com/avinashsah995/mfe-design-system.git"},"publishConfig":{"access":"public"},"license":"MIT","scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"dependencies":{"@base-ui/react":"^1.7.0","class-variance-authority":"^0.7.1","clsx":"^2.1.1","tailwind-merge":"^3.6.0"},"devDependencies":{"@eslint/js":"^10.0.1","@tailwindcss/vite":"^4.3.3","@types/node":"^24.13.3","@types/react":"^19.2.17","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.4","eslint":"^10.8.0","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.3","globals":"^17.7.0","lucide-react":"^1.28.0","react":"^19.2.8","react-dom":"^19.2.8","shadcn":"^4.16.1","tailwindcss":"^4.3.3","typescript":"~6.0.2","typescript-eslint":"^8.65.0","vite":"^8.2.0","vite-plugin-dts":"^5.0.3"},"gitHead":"fd72e6bdef2b7f52bbaea8056689cc51eb2f37d4","_id":"@avinash995/mfe-design-system@0.1.0","description":"Shared React UI primitives for the NovaMart micro frontends. The theme is the same one used by `mfe-shell`, so remotes rendered inside the shell match it without any extra configuration.","bugs":{"url":"https://github.com/avinashsah995/mfe-design-system/issues"},"homepage":"https://github.com/avinashsah995/mfe-design-system#readme","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-6byjw1p7ikNNzEzxg6HxdzRrAkoOzFAUxwJ4Xy68mN283HjqP4IfqL+D+JtGYkcaW2xtQbz6Wslb3Md4ah4kXA==","shasum":"8a45f9dc2f8869fb0eaefef15bbf85cdef8c366e","tarball":"https://registry.npmjs.org/@avinash995/mfe-design-system/-/mfe-design-system-0.1.0.tgz","fileCount":12,"unpackedSize":43351,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHiU9As7Cklqrra2pSxum0nTwXOklutXbo9mgLnDo6R6AiAEsDmbuIe5A+lgJufTgcf8f9PTFcqBQQJf5B2xmAYk/g=="}]},"_npmUser":{"name":"avinash995","email":"avinashsah0811@gmail.com"},"directories":{},"maintainers":[{"name":"avinash995","email":"avinashsah0811@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mfe-design-system_0.1.0_1785928207860_0.7034075030225204"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T11:10:07.601Z","0.1.0":"2026-08-05T11:10:08.022Z","modified":"2026-08-05T11:10:08.406Z"},"maintainers":[{"name":"avinash995","email":"avinashsah0811@gmail.com"}],"description":"Shared React UI primitives for the NovaMart micro frontends. The theme is the same one used by `mfe-shell`, so remotes rendered inside the shell match it without any extra configuration.","homepage":"https://github.com/avinashsah995/mfe-design-system#readme","repository":{"type":"git","url":"git+https://github.com/avinashsah995/mfe-design-system.git"},"bugs":{"url":"https://github.com/avinashsah995/mfe-design-system/issues"},"license":"MIT","readme":"# @avinash995/mfe-design-system\n\nShared React UI primitives for the NovaMart micro frontends. The theme is the\nsame one used by `mfe-shell`, so remotes rendered inside the shell match it\nwithout any extra configuration.\n\nBuilt on [Base UI](https://base-ui.com/) primitives with\n[Tailwind CSS v4](https://tailwindcss.com/) tokens.\n\n## Installation\n\n```bash\nnpm install @avinash995/mfe-design-system\n```\n\n`react` and `react-dom` (v19+) are peer dependencies and must be provided by the\nconsuming app.\n\n## Usage\n\nImport the stylesheet once, at the entry point of the app or remote:\n\n```ts\nimport \"@avinash995/mfe-design-system/styles.css\";\n```\n\nThen use the components:\n\n```tsx\nimport { Button, Card, CardContent, CardHeader, CardTitle } from \"@avinash995/mfe-design-system\";\n\nexport function ProductCard() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Aurora Headphones</CardTitle>\n      </CardHeader>\n      <CardContent>\n        <Button>Add to cart</Button>\n      </CardContent>\n    </Card>\n  );\n}\n```\n\n### Exports\n\n`Button`, `buttonVariants`, `Card`, `CardHeader`, `CardTitle`, `CardDescription`,\n`CardAction`, `CardContent`, `CardFooter`, `Input`, `Label`, `Badge`,\n`badgeVariants`, `Separator`, and the `cn` class-merging helper.\n\n## Typography\n\nThe theme's font stack is `\"DM Sans\", ui-sans-serif, system-ui, sans-serif`. The\nfont is intentionally **not** bundled, to avoid shipping a duplicate copy to\nevery remote — `mfe-shell` already loads it. A standalone app should load it\nitself, for example:\n\n```html\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link\n  href=\"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap\"\n  rel=\"stylesheet\"\n/>\n```\n\nWithout it the stack falls back to the system UI font; nothing breaks.\n\n## Theming\n\nColours, radii and fonts are exposed as CSS custom properties on `:root`, so a\nconsumer can override any of them after importing the stylesheet:\n\n```css\n:root {\n  --primary: oklch(0.45 0.14 250);\n  --radius: 0.625rem;\n}\n```\n\nDark mode is applied by adding the `dark` class to an ancestor element\n(typically `<html>`).\n\n## Local development\n\n```bash\nnpm run dev     # preview app showcasing every component\nnpm run build   # emit dist/index.js, dist/index.css and dist/index.d.ts\nnpm run lint\n```\n","readmeFilename":"README.md","_rev":"1-a525ac921c7cc8f45d11c3bf2ccb4db0"}