{"_id":"@eco-ds/eco-design-system","name":"@eco-ds/eco-design-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@eco-ds/eco-design-system","version":"1.0.0","type":"module","description":"A comprehensive React component library built with shadcn/ui, featuring 40+ UI components with TypeScript support and modern design patterns","keywords":["design-system","ui-components","react","typescript","tailwind","shadcn","components","ui-library"],"author":{"name":"eco-ds"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/eco-ds/eco-design-system-2.git"},"homepage":"https://www.npmjs.com/package/@eco-ds/eco-design-system","bugs":{"url":"https://github.com/eco-ds/eco-design-system-2/issues"},"main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.js","types":"./dist/index.d.ts"},"./registry":"./registry.json","./components/*":"./dist/components/*","./themes":"./dist/themes/index.js"},"scripts":{"dev":"npm run registry:build && next dev --turbopack","build":"npm run registry:build && npm run build:lib","build:lib":"rollup -c rollup.config.js","start":"next start","lint":"biome check","lint:fix":"biome check --write","registry:build":"npx shadcn@latest build && node scripts/build-registry.js","prepublishOnly":"npm run build:lib"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","next":">=13.0.0"},"dependencies":{"@hookform/resolvers":"^5.1.1","@radix-ui/react-accordion":"^1.2.11","@radix-ui/react-alert-dialog":"^1.1.14","@radix-ui/react-aspect-ratio":"^1.1.7","@radix-ui/react-avatar":"^1.1.10","@radix-ui/react-checkbox":"^1.3.2","@radix-ui/react-collapsible":"^1.1.11","@radix-ui/react-context-menu":"^2.2.15","@radix-ui/react-dialog":"^1.1.14","@radix-ui/react-dropdown-menu":"^2.1.15","@radix-ui/react-hover-card":"^1.1.14","@radix-ui/react-label":"^2.1.7","@radix-ui/react-menubar":"^1.1.15","@radix-ui/react-navigation-menu":"^1.2.13","@radix-ui/react-popover":"^1.1.14","@radix-ui/react-progress":"^1.1.7","@radix-ui/react-radio-group":"^1.3.7","@radix-ui/react-scroll-area":"^1.2.9","@radix-ui/react-select":"^2.2.5","@radix-ui/react-separator":"^1.1.7","@radix-ui/react-slider":"^1.3.5","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-switch":"^1.2.5","@radix-ui/react-tabs":"^1.1.12","@radix-ui/react-toggle":"^1.1.9","@radix-ui/react-toggle-group":"^1.1.10","@radix-ui/react-tooltip":"^1.2.7","@tanstack/react-table":"^8.21.3","class-variance-authority":"^0.7.1","clsx":"^2.1.1","cmdk":"^1.1.1","date-fns":"^4.1.0","embla-carousel-react":"^8.6.0","input-otp":"^1.4.2","lucide-react":"^0.506.0","next-themes":"^0.4.6","react-day-picker":"^9.8.1","react-hook-form":"^7.60.0","react-resizable-panels":"^3.0.3","recharts":"^2.15.4","sonner":"^2.0.6","tailwind-merge":"^3.3.1","vaul":"^1.1.2","zod":"^3.25.76"},"devDependencies":{"@biomejs/biome":"1.9.4","@rollup/plugin-commonjs":"^25.0.0","@rollup/plugin-node-resolve":"^15.0.0","@rollup/plugin-typescript":"^11.0.0","@tailwindcss/postcss":"^4.1.11","@testing-library/dom":"^10.4.0","@testing-library/jest-dom":"^6.6.3","@testing-library/user-event":"^14.6.1","@types/jsdom":"^21.1.7","@types/node":"^22.16.3","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitejs/plugin-react-swc":"^3.10.2","jsdom":"^25.0.1","next":"15.4.4","postcss":"^8.5.6","react":"^19.1.0","react-dom":"^19.1.0","rollup":"^4.0.0","rollup-plugin-dts":"^6.0.0","tailwindcss":"^4.1.11","tw-animate-css":"^1.3.5","typescript":"5.4.5"},"packageManager":"pnpm@9.15.2","engines":{"node":">=20"},"overrides":{"react-is":"^19.0.0-rc-69d4b800-20241021"},"_id":"@eco-ds/eco-design-system@1.0.0","gitHead":"1c10a48d5a7907c64b278d2133b0ae1f2806ed58","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-QoaR1hrAZe698fXbmWJZU7l0wCPjNQx7O2vCg021ZhQWxKDnazofdJfUIhDMqUFU/DOvyD0AGQMl44tjnsGcCw==","shasum":"b83b5c76e0275a42d0bf31fcb6b4c7b897e67dee","tarball":"https://registry.npmjs.org/@eco-ds/eco-design-system/-/eco-design-system-1.0.0.tgz","fileCount":83,"unpackedSize":1298343,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHswqEKkd3cLKGAQgmGWnXTdWH2CcFrAGNkS2iXsOlYJAiBs3EQGnl/Ji/SgBVAr1zv4PoWf4PJVR0aLsusMGyiK5w=="}]},"_npmUser":{"name":"stanxaf","email":"stanley.familleza@dtn.com"},"directories":{},"maintainers":[{"name":"stanxaf","email":"stanley.familleza@dtn.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/eco-design-system_1.0.0_1755592514429_0.9420269772623528"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-19T08:35:14.367Z","1.0.0":"2025-08-19T08:35:14.666Z","modified":"2025-08-19T08:35:14.913Z"},"maintainers":[{"name":"stanxaf","email":"stanley.familleza@dtn.com"}],"description":"A comprehensive React component library built with shadcn/ui, featuring 40+ UI components with TypeScript support and modern design patterns","homepage":"https://www.npmjs.com/package/@eco-ds/eco-design-system","keywords":["design-system","ui-components","react","typescript","tailwind","shadcn","components","ui-library"],"repository":{"type":"git","url":"git+https://github.com/eco-ds/eco-design-system-2.git"},"author":{"name":"eco-ds"},"bugs":{"url":"https://github.com/eco-ds/eco-design-system-2/issues"},"license":"MIT","readme":"# @eco-ds/eco-design-system\n\nA comprehensive React component library built with shadcn/ui, featuring 40+ UI components with TypeScript support and modern design patterns.\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @eco-ds/eco-design-system\n# or\nyarn add @eco-ds/eco-design-system\n# or\npnpm add @eco-ds/eco-design-system\n```\n\n### Usage\n\n```tsx\nimport { Button, Card, Input, Badge } from '@eco-ds/eco-design-system';\n\nfunction App() {\n  return (\n    <div>\n      <Card>\n        <CardHeader>\n          <CardTitle>Welcome</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <Input placeholder=\"Enter your name\" />\n          <Button>Submit</Button>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n```\n\n## 📦 What's Included\n\n### UI Components (40+ components)\n- **Layout**: Card, Separator, AspectRatio, Resizable\n- **Forms**: Input, Textarea, Select, Checkbox, RadioGroup, Switch, Slider\n- **Navigation**: Button, Tabs, Pagination, Breadcrumb, NavigationMenu\n- **Feedback**: Alert, Dialog, Popover, Tooltip, Toast\n- **Data Display**: Table, Badge, Avatar, Progress, Skeleton\n- **Overlay**: Modal, Drawer, Sheet, HoverCard\n- **Interactive**: Accordion, Collapsible, Command, ContextMenu, DropdownMenu\n\n### Features\n- ✅ **TypeScript Support** - Full type definitions included\n- ✅ **Modern React** - Built with React 18+ and modern patterns\n- ✅ **Accessible** - Following ARIA guidelines and best practices\n- ✅ **Customizable** - Easy theming with CSS variables\n- ✅ **Tree-shakeable** - Only import what you need\n- ✅ **No CSS-in-JS** - Uses CSS variables for theming\n\n## 🎨 Theming\n\nThe package includes a comprehensive theme system with CSS variables:\n\n```css\n:root {\n  --background: #ffffff;\n  --foreground: #1A1A1F;\n  --primary: #007BD9;\n  --primary-foreground: #ffffff;\n  /* ... and many more */\n}\n```\n\n## 🔧 Requirements\n\n- React 18.0.0 or higher\n- React DOM 18.0.0 or higher\n- Next.js 13.0.0 or higher (if using Next.js)\n\n## 📚 Documentation\n\nFor detailed component documentation and examples, visit our [Storybook](https://eco-ds.github.io/eco-design-system).\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n---\n\n## 🏗️ Development\n\nThis package is built from the [eco-design-system-2](https://github.com/eco-ds/eco-design-system-2) repository.\n\n### Local Development\n\n```bash\ngit clone https://github.com/eco-ds/eco-design-system-2.git\ncd eco-design-system-2\npnpm install\npnpm dev\n```\n\n### Building the Package\n\n```bash\npnpm run build:lib\n```\n\n---\n\n<a href=\"https://registry-starter.vercel.app/\">\n  <h1 align=\"center\">Registry Starter</h1>\n</a>\n\n<p align=\"center\">\n    Registry Starter is a free, open-source template built with Next.js and Shadcn/ui Registry to accelerate your AI-Native Design System.\n</p>\n\n<p align=\"center\">\n  <a href=\"#deploy-your-own\"><strong>Deploy Your Own</strong></a> ·\n  <a href=\"#open-in-v0\"><strong>Open in v0</strong></a> ·\n  <a href=\"#theming\"><strong>Theming</strong></a> ·\n  <a href=\"#running-locally\"><strong>Running Locally</strong></a> ·\n  <a href=\"#file-structure\"><strong>File Structure</strong></a> ·\n  <a href=\"https://ui.shadcn.com/docs/registry\"><strong>Read Docs</strong></a>\n</p>\n<br/>\n\n## Deploy Your Own\n\nYou can deploy your own version of the Next.js Registry Starter to Vercel with one click:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fregistry-starter&project-name=my-registry&repository-name=my-registry&demo-title=Registry%20Starter&demo-description=Registry%20Starter%20is%20a%20free%2C%20open-source%20template%20built%20with%20Next.js%20and%20Shadcn%2Fui%20Registry%20to%20accelerate%20your%20AI-Native%20Design%20System.&demo-url=https%3A%2F2Fregistry-starter.vercel.app&demo-image=%2F%2Fregistry-starter.vercel.app%2Fpreview.png)\n\n## Open in v0\n\n[![Open in v0](https://registry-starter.vercel.app/open-in-v0.svg)](https://v0.dev/chat/api/open?title=Dashboard+Kit&prompt=These+are+existing+design+system+styles+and+files.+Please+utilize+them+alongside+base+components+to+build.&url=https%3A%2F%2Fregistry-starter.vercel.app%2Fr%2Fdashboard.json)\n\nThis registry application also exposes `Open in v0` buttons for each component. Once this application is deployed, the\n`Open in v0` button redirects to [`v0.dev`](https://v0.dev) with a prepopulated prompt and a URL pointing back to this\nregistry's `/r/${component_name}.json` endpoint. This endpoint will provide v0 the necessary file information, content,\nand metadata to start your v0 chat with your component, theme, and other related code.\n\nThese `/r/${component_name}.json` files are generated using `shadcn/ui` during the `build` and `dev` based on the\nrepository's [`registry.json`](./registry.json). For more information, refer to the\n[documentation](https://ui.shadcn.com/docs/registry/registry-json).\n\n## Theming\n\nTo use a custom theme for all the components, all you need to do is modify the CSS tokens in\n[`globals.css`](./src/app/globals.css). More information on these practices can be found\non [ui.shadcn.com/docs](https://ui.shadcn.com/docs).\n\n### 🎯 **Important: Keeping Your Design System Updated**\n\nWhen you make UI changes (colors, fonts, design tokens), you need to update **both** files to ensure consistency:\n\n1. **`src/app/globals.css`** - for your local development\n2. **`registry.json`** - for the registry system and external tools\n\n**Always run this command after any UI changes:**\n```bash\nnpm run registry:build\n```\n\nThis ensures that v0, Cursor, and other tools see your latest design system updates.\n\n### **Complete Workflow for UI Changes**\n\n#### **Step 1: Make Your Changes**\n```bash\n# Edit design tokens\ncode src/app/globals.css\n\n# Edit registry configuration\ncode registry.json\n```\n\n#### **Step 2: Update Both Files**\n- ✅ Update `globals.css` with new colors/fonts\n- ✅ Update `registry.json` cssVars section to match\n- ✅ Keep both files in sync\n\n#### **Step 3: Rebuild & Deploy**\n```bash\nnpm run registry:build  # Regenerates all registry files\nnpm run build          # Builds your application\n```\n\n### **What to Update When**\n\n| Change Type | Files to Update | Command to Run |\n|-------------|----------------|----------------|\n| **Colors & Design Tokens** | `globals.css` + `registry.json` | `npm run registry:build` |\n| **Fonts** | `layout.tsx` + `globals.css` | `npm run registry:build` |\n| **Components** | Component files | `npm run registry:build` |\n| **Layouts & Pages** | Layout/page files | `npm run registry:build` |\n\n### **Common Pitfalls to Avoid**\n\n❌ **Don't:**\n- Only update `globals.css` without rebuilding registry\n- Only update `registry.json` without updating `globals.css`\n- Forget to run `npm run registry:build` after changes\n- Deploy without rebuilding registry\n\n✅ **Do:**\n- Keep both files in sync\n- Always rebuild after changes\n- Test locally before deploying\n- Use consistent naming conventions\n\n### **Testing Your Changes**\n\n```bash\n# Local testing\nnpm run dev\n# Check your app locally, toggle themes, verify colors\n\n# Registry testing\nnpm run registry:build\n# Visit registry page, check theme toggle, verify component previews\n\n# v0 integration testing\n# Use \"Open in v0\" buttons, verify new colors are applied\n```\n\n#### **MCP Integration**\n\nTo use this registry with MCP, you must also edit [`registry.json`](./registry.json)'s first\n`registry-item` named `theme`. This `registry:theme` item not only contains the tailwind configuration, but it also\ncontains your design tokens / CSS variables.\n\nThe `shadcn/ui` CLI's MCP command will use the entire `registry.json` file, so it must be put in the `/public` folder\nwith all of your `registry:item`s. This will enable you to use your registry in tools like Cursor & Windsurf.\n\n#### **Fonts**\n\nTo use custom fonts, you can either use [\n`next/font/google`](https://nextjs.org/docs/pages/getting-started/fonts#google-fonts) or the\n[`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) CSS rule in your\n[`globals.css`](./src/app/globals.css).\n\n```css\n@font-face {\n    font-family: 'Montserrat';\n    font-style: normal;\n    font-weight: 400;\n    src: url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbi49c.woff2') format('woff2'),\n    url('https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm45xW5rygbj49c.woff') format('woff');\n}\n```\n\nIf you use `@font-face`, ensure you modify [`globals.css`](src/app/globals.css) tailwind configuration to map\nyour custom font variables to Tailwind fonts. Refer to this\n[Tailwind documentation](https://tailwindcss.com/docs/font-family#customizing-your-theme)\n\n### **For Team Development**\n\n- **Communication**: Document design system changes, share registry links for reviews\n- **Version Control**: Commit both files together, use descriptive commit messages\n- **Consistency**: Use CSS variables for all colors, maintain clear naming conventions\n- **Accessibility**: Ensure sufficient contrast ratios, test both themes\n\n## Running locally\n\n```bash\npnpm install\npnpm dev\n```\n\nYour app should now be running on [localhost:3000](http://localhost:3000).\n\n## File Structure\n\n`app/(registry)` routes contains the registry pages.\n\n`app/demo` routes contains various UI primitives, Components, or Blocks (based on `registry.json`)\n\n`@/components` contains all components used in the registry\n\n`@/components/ui` contains all `shadcn/ui` UI Primitives used in the registry\n\n`@/components/registry` contains all components for this Registry Starter application\n\n`@/hooks` contains all React hooks\n\n`@/lib` contains all business logic & utils\n\n`@/layouts` contains all v0 layouts used in `registry.json`\n","readmeFilename":"README.md","_rev":"1-b9b531fb035a0c6e498347dbff8cd002"}