{"_id":"@apra2520/ai-dlc-design-kit-package","_rev":"6-06a158a3172f8cd3d3b77185a81766c7","name":"@apra2520/ai-dlc-design-kit-package","dist-tags":{"latest":"1.0.8"},"versions":{"1.0.1":{"name":"@apra2520/ai-dlc-design-kit-package","version":"1.0.1","keywords":["design-system","react","components","ui","atos","tailwind"],"author":"","license":"MIT","_id":"@apra2520/ai-dlc-design-kit-package@1.0.1","maintainers":[{"name":"apra2520","email":"apra.upadhyay@atos.net"}],"dist":{"shasum":"11e2f59152ad2ec44e49fd6e817a52b32d37bb81","tarball":"https://registry.npmjs.org/@apra2520/ai-dlc-design-kit-package/-/ai-dlc-design-kit-package-1.0.1.tgz","fileCount":22,"integrity":"sha512-Ks3E499wyMBLfFPg0oJ4ZehCTbqRf0hbUOa+YEo6Kpo2HZ9+qitVS9g3A1bDLvou6YJqUxcVZoF+XNlAdwux4g==","signatures":[{"sig":"MEYCIQCn4q/kH0+XKUWJ6GSznS0KsywRljvQa9UTcyz/KLrGTAIhAKnD9xPZCMyY86N2iHmQ7a2xQuEzKh5jy0nx0CbKxYlq","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44211},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/style.css","./dist/DesignSystemAtos/components/*.js":"./dist/DesignSystemAtos/components/*.js"},"scripts":{"dev":"vite build --watch","build":"vite build && tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"_npmUser":{"name":"apra2520","email":"apra.upadhyay@atos.net"},"_npmVersion":"10.9.4","description":"A complete design kit with components, styles, and guidelines for building modern web applications","directories":{},"_nodeVersion":"22.22.1","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.487.0","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"6.3.5","react-dom":"^18.3.1","typescript":"^5.9.3","@types/react":"^18.3.28","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.7","@vitejs/plugin-react":"^4.7.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-dlc-design-kit-package_1.0.1_1778849954365_0.8222849597914275","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@apra2520/ai-dlc-design-kit-package","version":"1.0.3","keywords":["design-system","react","components","ui","atos","tailwind"],"license":"MIT","_id":"@apra2520/ai-dlc-design-kit-package@1.0.3","maintainers":[{"name":"apra2520","email":"apra.upadhyay@atos.net"}],"dist":{"shasum":"29296f16fce28718d886968839e6171eba94c80d","tarball":"https://registry.npmjs.org/@apra2520/ai-dlc-design-kit-package/-/ai-dlc-design-kit-package-1.0.3.tgz","fileCount":22,"integrity":"sha512-jxdcY1SZf/4k4oODnpzj7VZ5Jf9AIpCtzzZkycEM3l9KufVX0XAqE/KIWnPV40DNYm8D9EdmJlmsZhDvpHVHbg==","signatures":[{"sig":"MEUCIQDibI+r4Xl2jcWRtGencbDbCgsevls+utv+tEpqAJcWsAIgdyLxxY6/0fgK11ARRqEmaMo8hMMyQ0yZ294BvkCoW10=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43673},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","scripts":{"dev":"vite build --watch","build":"vite build && tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"_npmUser":{"name":"apra2520","email":"apra.upadhyay@atos.net"},"_npmVersion":"10.9.4","description":"A complete design kit with components, styles, and guidelines for building modern web applications","directories":{},"_nodeVersion":"22.22.1","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.487.0","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"6.3.5","react-dom":"^18.3.1","typescript":"^5.9.3","@types/react":"^18.3.28","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.7","@vitejs/plugin-react":"^4.7.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-dlc-design-kit-package_1.0.3_1779088318216_0.0210813908146239","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@apra2520/ai-dlc-design-kit-package","version":"1.0.5","keywords":["design-system","react","components","ui","atos","tailwind"],"license":"MIT","_id":"@apra2520/ai-dlc-design-kit-package@1.0.5","maintainers":[{"name":"apra2520","email":"apra.upadhyay@atos.net"}],"dist":{"shasum":"16812591be8109e3e6f6b4b76345018c52020a8b","tarball":"https://registry.npmjs.org/@apra2520/ai-dlc-design-kit-package/-/ai-dlc-design-kit-package-1.0.5.tgz","fileCount":15,"integrity":"sha512-szMtxxJXcp4CRoauP4HS3utIhOl5y/pX1rHXyFwL8CF+EWoRJUFKPutKDe8GZzaVB1LUwgErHKfCxiL/XsTKzg==","signatures":[{"sig":"MEUCIQC1YB05P6//lSo5n70FmTWvQ/ohIoDq5XPkeeZZO7Hu0AIgB1pkv3+Z+MTGTp9oM3dRzkP9GqaoZqTxc4NU1MCWQ5U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62779},"main":"./dist/index.js","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","scripts":{"dev":"vite build --watch","build":"vite build && tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"_npmUser":{"name":"apra2520","email":"apra.upadhyay@atos.net"},"_npmVersion":"10.9.4","description":"A complete design kit with components, styles, and guidelines for building modern web applications","directories":{},"_nodeVersion":"22.22.1","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.487.0","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"6.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.9.3","@types/react":"^18.3.28","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.7","@vitejs/plugin-react":"^4.7.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-dlc-design-kit-package_1.0.5_1779095462616_0.06827994162828377","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@apra2520/ai-dlc-design-kit-package","version":"1.0.6","keywords":["design-system","react","components","ui","atos","tailwind"],"license":"MIT","_id":"@apra2520/ai-dlc-design-kit-package@1.0.6","maintainers":[{"name":"apra2520","email":"apra.upadhyay@atos.net"}],"dist":{"shasum":"b5bbdfffb3a19d8672569dd380148e94880f9738","tarball":"https://registry.npmjs.org/@apra2520/ai-dlc-design-kit-package/-/ai-dlc-design-kit-package-1.0.6.tgz","fileCount":15,"integrity":"sha512-tWpDnadZl3nyA7V0JF7cZghnzJd6WNa1QjeQCyVB5q1/tjp2TnTo4B2Z2tDnMbCj2g1Bk3/0flmfyNkTqSVIWg==","signatures":[{"sig":"MEYCIQDztWul0g64JHSOrseuHuMXlak6Nq+CJXsoo6uGURO+MgIhAIOh4zua5O+8ZshDlTdKpSdp+E++qiq0Qw8oXRV1AbO9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52887},"main":"./dist/index.js","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","scripts":{"dev":"vite build --watch","build":"vite build && tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"_npmUser":{"name":"apra2520","email":"apra.upadhyay@atos.net"},"_npmVersion":"10.9.4","description":"A complete design kit with components, styles, and guidelines for building modern web applications","directories":{},"_nodeVersion":"22.22.1","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.487.0","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"6.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.9.3","@types/react":"^18.3.28","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.7","@vitejs/plugin-react":"^4.7.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-dlc-design-kit-package_1.0.6_1779099325209_0.9010966927791828","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@apra2520/ai-dlc-design-kit-package","version":"1.0.7","keywords":["design-system","react","components","ui","atos","tailwind"],"license":"MIT","_id":"@apra2520/ai-dlc-design-kit-package@1.0.7","maintainers":[{"name":"apra2520","email":"apra.upadhyay@atos.net"}],"dist":{"shasum":"155577ca0b543b729fe82409a749f8ddf4516821","tarball":"https://registry.npmjs.org/@apra2520/ai-dlc-design-kit-package/-/ai-dlc-design-kit-package-1.0.7.tgz","fileCount":16,"integrity":"sha512-H8TwV03coi8+kWLcJlvlKT2RQuwV49Qo1kztJCEkJMSacqHD6j6Y95aD4cgUS4MukoAsdCdk/iSc4JgZPWg6UA==","signatures":[{"sig":"MEYCIQDjq/CgT2UkzzlBf48F9RHTRViroHhxmrYxAa8bFGpSvwIhAPWWUwBwYFBMqKSa3GSOXWcTEa77bDRWes5VBENVSc3O","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53091},"main":"./dist/index.js","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","scripts":{"dev":"vite build --watch","build":"vite build && tsc --emitDeclarationOnly","prepublishOnly":"npm run build"},"_npmUser":{"name":"apra2520","email":"apra.upadhyay@atos.net"},"_npmVersion":"10.9.4","description":"A complete design kit with components, styles, and guidelines for building modern web applications","directories":{},"_nodeVersion":"22.22.1","dependencies":{"clsx":"^2.1.1","lucide-react":"^0.487.0","class-variance-authority":"^0.7.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"6.3.5","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.9.3","@types/react":"^18.3.28","vite-plugin-dts":"^4.3.0","@types/react-dom":"^18.3.7","@vitejs/plugin-react":"^4.7.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ai-dlc-design-kit-package_1.0.7_1779100764386_0.18703159725586804","host":"s3://npm-registry-packages-npm-production"}},"1.0.8":{"name":"@apra2520/ai-dlc-design-kit-package","version":"1.0.8","description":"A complete design kit with components, styles, and guidelines for building modern web applications","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/style.css","scripts":{"build":"vite build && tsc --emitDeclarationOnly","dev":"vite build --watch","prepublishOnly":"npm run build"},"keywords":["design-system","react","components","ui","atos","tailwind"],"license":"MIT","peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"devDependencies":{"@types/react":"^18.3.28","@types/react-dom":"^18.3.7","@vitejs/plugin-react":"^4.7.0","react":"^18.3.1","react-dom":"^18.3.1","typescript":"^5.9.3","vite":"6.3.5","vite-plugin-dts":"^4.3.0"},"dependencies":{"class-variance-authority":"^0.7.1","clsx":"^2.1.1","lucide-react":"^0.487.0"},"_id":"@apra2520/ai-dlc-design-kit-package@1.0.8","_nodeVersion":"22.22.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-TP8VSrFmz63swmI3m+93IZfjjIVa0vk2duRq2yGTlhsXmYYJfNELESWRfbrD0Bg16PmCZgGjFDjqnvubHyK1Hg==","shasum":"4d06c9cfe725c1259f84c48d38d55f00ffb205b0","tarball":"https://registry.npmjs.org/@apra2520/ai-dlc-design-kit-package/-/ai-dlc-design-kit-package-1.0.8.tgz","fileCount":16,"unpackedSize":60458,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDlPnE+DG7Mge+CstiytH2JcqIieFrEgbSOqnwo2OhOtQIhANtRRUA3PhfTiPrQtVtrJhVIiotbHDe3xVCIBG1KgPhk"}]},"_npmUser":{"name":"apra2520","email":"apra.upadhyay@atos.net"},"directories":{},"maintainers":[{"name":"apra2520","email":"apra.upadhyay@atos.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai-dlc-design-kit-package_1.0.8_1779102023611_0.21711817735310124"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-15T12:59:14.292Z","modified":"2026-05-18T11:00:23.900Z","1.0.1":"2026-05-15T12:59:14.568Z","1.0.3":"2026-05-18T07:11:58.441Z","1.0.5":"2026-05-18T09:11:02.746Z","1.0.6":"2026-05-18T10:15:25.463Z","1.0.7":"2026-05-18T10:39:24.534Z","1.0.8":"2026-05-18T11:00:23.770Z"},"license":"MIT","keywords":["design-system","react","components","ui","atos","tailwind"],"description":"A complete design kit with components, styles, and guidelines for building modern web applications","maintainers":[{"name":"apra2520","email":"apra.upadhyay@atos.net"}],"readme":"# @make-kits/design-system-atos\n\nA complete design kit with components, styles, and guidelines for building modern web applications with the Atos brand identity.\n\n## Features\n\n✨ **Complete Component Library** - Button, Card, Badge, Input, Alert, and more  \n🎨 **Design Tokens** - Comprehensive color, spacing, and typography system  \n⚡ **TypeScript Support** - Full type definitions included  \n🎯 **Tailwind Compatible** - Works seamlessly with Tailwind CSS v4  \n♿ **Accessible** - Built with accessibility best practices  \n🌳 **Tree-Shakeable** - Import only what you need  \n\n## Installation\n\n```bash\npnpm add @make-kits/design-system-atos\n```\n\n## Quick Start\n\n1. **Import the stylesheet** in your main CSS file:\n\n```css\n@import '@make-kits/design-system-atos/style.css';\n```\n\n2. **Import and use components**:\n\n```tsx\nimport { Button, Card, Badge } from '@make-kits/design-system-atos';\n\nfunction App() {\n  return (\n    <Card>\n      <h2>Welcome</h2>\n      <Button variant=\"primary\">Get Started</Button>\n      <Badge variant=\"success\">Active</Badge>\n    </Card>\n  );\n}\n```\n\n## Documentation\n\nComplete documentation is available in the `guidelines/` directory:\n\n- **[Guidelines.md](./guidelines/Guidelines.md)** - Overview and philosophy\n- **[setup.md](./guidelines/setup.md)** - Installation and configuration\n- **[components.md](./guidelines/components.md)** - Component catalog and usage\n- **[tokens.md](./guidelines/tokens.md)** - Design tokens reference\n- **[styles.md](./guidelines/styles.md)** - Styling guide and best practices\n\n## Components\n\n### Button\n```tsx\n<Button variant=\"primary\" size=\"md\">Click Me</Button>\n<Button variant=\"outline\">Cancel</Button>\n<Button variant=\"destructive\">Delete</Button>\n```\n\n### Card\n```tsx\n<Card variant=\"glass\">\n  <CardHeader>\n    <CardTitle>Title</CardTitle>\n    <CardDescription>Description</CardDescription>\n  </CardHeader>\n  <CardContent>Content</CardContent>\n</Card>\n```\n\n### Badge\n```tsx\n<Badge variant=\"success\">Active</Badge>\n<Badge variant=\"warning\">Pending</Badge>\n```\n\n### Input\n```tsx\n<Input type=\"text\" placeholder=\"Enter text\" />\n```\n\n### Alert\n```tsx\n<Alert variant=\"info\">\n  <AlertTitle>Note</AlertTitle>\n  <AlertDescription>This is important</AlertDescription>\n</Alert>\n```\n\n## Design Tokens\n\nAccess design tokens via CSS custom properties:\n\n```css\n.custom-element {\n  color: var(--text-primary);\n  background: var(--primary);\n  padding: var(--spacer-md);\n  border-radius: var(--radius-lg);\n}\n```\n\n### Color Palette\n\n- **Brand**: `--atos-blue`, `--blue-vivid`, `--blue-light`\n- **Accents**: `--teal`, `--violet`, `--amber`, `--green`, `--rose`\n- **Text**: `--text-primary`, `--text-secondary`, `--text-tertiary`, `--text-muted`\n- **Backgrounds**: `--page-bg`, `--glass-header`, `--glass-card`\n\nSee [tokens.md](./guidelines/tokens.md) for the complete reference.\n\n## Tailwind CSS Integration\n\nIf using Tailwind CSS v4, add these mappings to your `tailwind.css`:\n\n```css\n@theme inline {\n  --color-primary: var(--primary);\n  --color-secondary: var(--secondary);\n  /* ... see setup.md for complete list */\n}\n```\n\nThen use Tailwind utilities:\n\n```tsx\n<div className=\"bg-primary text-primary-foreground\">\n  Styled with Tailwind\n</div>\n```\n\n## TypeScript\n\nFull TypeScript support with exported types:\n\n```tsx\nimport { ButtonProps, CardProps } from '@make-kits/design-system-atos';\n\nconst myButtonProps: ButtonProps = {\n  variant: 'primary',\n  size: 'lg',\n  onClick: () => console.log('clicked')\n};\n```\n\n## Customization\n\nOverride design tokens in your CSS:\n\n```css\n:root {\n  --primary: #FF6B00;\n  --spacer-md: 1.25rem;\n}\n```\n\nExtend components with `className`:\n\n```tsx\n<Button className=\"min-w-[200px] shadow-xl\" variant=\"primary\">\n  Custom Button\n</Button>\n```\n\n## Best Practices\n\n✅ **Do**:\n- Use design system components instead of building from scratch\n- Use CSS custom properties for all styling\n- Extend with `className` prop\n- Import only needed components\n\n❌ **Don't**:\n- Hardcode color values\n- Modify design system source files\n- Use `!important` to override styles\n- Create duplicate components\n\n## Browser Support\n\n- Chrome/Edge (last 2 versions)\n- Firefox (last 2 versions)\n- Safari (last 2 versions)\n\n## Peer Dependencies\n\n- React ^18.0.0\n- React DOM ^18.0.0\n\n## License\n\nMIT\n\n## Contributing\n\nIssues and feature requests are welcome. Please follow the existing code style and include tests for new features.\n\n## Support\n\nFor questions or issues:\n- Check the [documentation](./guidelines/Guidelines.md)\n- Review [component examples](./guidelines/components.md)\n- Consult the [styling guide](./guidelines/styles.md)\n","readmeFilename":"README.md"}