{"_id":"@besaitech/ng-design-system-lib","_rev":"3-5be43f9268beee6e7e095b96f94b7451","name":"@besaitech/ng-design-system-lib","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@besaitech/ng-design-system-lib","version":"0.0.1","keywords":["angular","design-system","ui-components","tailwind","typescript"],"author":{"name":"Your Name","email":"souhailaitsaid@gmail.com"},"license":"MIT","_id":"@besaitech/ng-design-system-lib@0.0.1","maintainers":[{"name":"besaitech","email":"souhailaitsaid@gmail.com"}],"dist":{"shasum":"5ff7e0c684c881dc85898c8eb0964f2266c8479b","tarball":"https://registry.npmjs.org/@besaitech/ng-design-system-lib/-/ng-design-system-lib-0.0.1.tgz","fileCount":27,"integrity":"sha512-Q+AFPoCgh5S5Rws0DiLl3an7tUmREk7OyVrJadSUj5cj7v/8sTpd/glgxrMr+oEiEMzaQTNwZN1lpQzpuZ3FPQ==","signatures":[{"sig":"MEQCIAoX+nIm07I/zEr9AqF3c7xT7aufyr7AcSWbsdCfPuv3AiAEYX39BSIlrtEO8ZoAFsOmXAVepQxYoiBXHpk1WNXlPg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":620532},"main":"bundles/ng-design-system-lib.umd.js","module":"fesm2022/besaitech-ng-design-system-lib.mjs","exports":{".":{"esm":"./esm2022/ng-design-system-lib.mjs","types":"./index.d.ts","default":"./fesm2022/besaitech-ng-design-system-lib.mjs","esm2022":"./esm2022/ng-design-system-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"be61d1e0f751413439efc4980cd772d84047c132","typings":"index.d.ts","_npmUser":{"name":"besaitech","email":"souhailaitsaid@gmail.com"},"_npmVersion":"10.9.2","description":"A comprehensive Angular design system library with Tailwind CSS","directories":{},"sideEffects":false,"_nodeVersion":"23.9.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"date-fns":"^4.1.0","@angular/core":"^19.2.0","@angular/common":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-design-system-lib_0.0.1_1747909727357_0.3923488819998615","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@besaitech/ng-design-system-lib","version":"0.0.2","keywords":["angular","design-system","ui-components","tailwind","typescript"],"author":{"name":"Your Name","email":"souhailaitsaid@gmail.com"},"license":"MIT","_id":"@besaitech/ng-design-system-lib@0.0.2","maintainers":[{"name":"besaitech","email":"souhailaitsaid@gmail.com"}],"dist":{"shasum":"32a0f3c4c32879a7ad232c28d73038a67cc2166b","tarball":"https://registry.npmjs.org/@besaitech/ng-design-system-lib/-/ng-design-system-lib-0.0.2.tgz","fileCount":26,"integrity":"sha512-uhdp7QjuNF1p1WOo4NVy+sdvDQn4j2AMyFeB+92C0Ti8Y0ZuOPRp1h20KfmhdH3JuphRy5+AQ7FS1gRGF2iXUA==","signatures":[{"sig":"MEUCIQDzz6cJUW/7866I9ufkFjb/CvpP8qS8tIkN9G4a2Jb5XgIgL7apRR0F5GGO2ClkwDwdVP+fk8iNeRpFvflagqGa/yA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":540193},"main":"bundles/ng-design-system-lib.umd.js","module":"fesm2022/besaitech-ng-design-system-lib.mjs","exports":{".":{"esm":"./esm2022/ng-design-system-lib.mjs","types":"./index.d.ts","default":"./fesm2022/besaitech-ng-design-system-lib.mjs","esm2022":"./esm2022/ng-design-system-lib.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"8332d7058d15757981f3f8e33040a9060dcd629e","typings":"index.d.ts","_npmUser":{"name":"besaitech","email":"souhailaitsaid@gmail.com"},"_npmVersion":"10.9.2","description":"A comprehensive Angular 19 design system library with Tailwind CSS","directories":{},"sideEffects":false,"_nodeVersion":"23.9.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"date-fns":"^4.1.0","@angular/core":"^19.2.0","@angular/common":"^19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-design-system-lib_0.0.2_1747914914609_0.9842228489251701","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@besaitech/ng-design-system-lib","description":"A comprehensive Angular 19 design system library with Tailwind CSS","keywords":["angular","design-system","ui-components","tailwind","typescript"],"author":{"name":"Your Name","email":"souhailaitsaid@gmail.com"},"license":"MIT","version":"0.0.3","peerDependencies":{"@angular/common":"^19.2.0","@angular/core":"^19.2.0","date-fns":"^4.1.0"},"main":"bundles/ng-design-system-lib.umd.js","module":"fesm2022/besaitech-ng-design-system-lib.mjs","typings":"index.d.ts","style":"styles.css","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/ng-design-system-lib.mjs","esm":"./esm2022/ng-design-system-lib.mjs","default":"./fesm2022/besaitech-ng-design-system-lib.mjs"},"./styles.css":"./styles.css"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":["styles.css"],"publishConfig":{"access":"public"},"_id":"@besaitech/ng-design-system-lib@0.0.3","gitHead":"a5ce2740ae77c180777577a4daa307fd3dc1614b","_nodeVersion":"23.9.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-OCSNbM1iOcVsiqAB5dWGqr7O5rkpRA2fpZ0hNH9YG2toG6gDiy/Nt6ANATiNM2SEeXSWIMzUNiCJBLc1XZze6g==","shasum":"7babaf10721fdf247f0574f89ef7ef7cdea68a29","tarball":"https://registry.npmjs.org/@besaitech/ng-design-system-lib/-/ng-design-system-lib-0.0.3.tgz","fileCount":30,"unpackedSize":541228,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDBqaf6K08tHvGLrzNFX4c5NMcefI/oDOCaWaoh8OkPjgIgCOYJs+S2QHNJuJMDCyPNCj2KzBsrVIkMD79pyBDF4Kw="}]},"_npmUser":{"name":"besaitech","email":"souhailaitsaid@gmail.com"},"directories":{},"maintainers":[{"name":"besaitech","email":"souhailaitsaid@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-design-system-lib_0.0.3_1747918862043_0.4447920521563853"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-22T10:28:47.243Z","modified":"2025-05-22T13:01:02.457Z","0.0.1":"2025-05-22T10:28:47.604Z","0.0.2":"2025-05-22T11:55:14.847Z","0.0.3":"2025-05-22T13:01:02.259Z"},"author":{"name":"Your Name","email":"souhailaitsaid@gmail.com"},"license":"MIT","keywords":["angular","design-system","ui-components","tailwind","typescript"],"description":"A comprehensive Angular 19 design system library with Tailwind CSS","maintainers":[{"name":"besaitech","email":"souhailaitsaid@gmail.com"}],"readme":"# Design Lib - Angular Design System\n\nA comprehensive Angular design system library built with Tailwind CSS, providing a complete set of UI components for modern web applications.\n\n## Features\n\n- 🎨 **Complete Design System**: Buttons, Forms, Tables, Modals, and more\n- 🚀 **Angular 19 Compatible**: Built with the latest Angular features\n- 💨 **Tailwind CSS Integration**: Consistent styling with utility classes\n- 📱 **Responsive Design**: Mobile-first approach\n- ♿ **Accessibility**: WCAG compliant components\n- 🎯 **TypeScript**: Full type safety\n- 📦 **Tree Shakable**: Import only what you need\n\n## Installation\n\n```bash\nnpm install @besaitech/ng-design-system-lib\n```\n\n### Peer Dependencies\n\nMake sure you have the following peer dependencies installed:\n\n```bash\nnpm install @angular/common @angular/core date-fns\n\nnpm install -D tailwindcss@3.4.1 postcss autoprefixer\n```\n\n## Quick Start\n\n1. **Add the following in your** tailwind.config.js file located on the root folder:\n\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n // IMPORTANT: Include your design library\n \"./node_modules/@besaitech/ng-design-system-lib/**/*.{html,ts,js,mjs}\"\n ],\n theme: {\n extend: {\n colors: {\n primary: {\n 50: \"#eef2ff\",\n 100: \"#e0e7ff\",\n 200: \"#c7d2fe\",\n 300: \"#a5b4fc\",\n 400: \"#818cf8\",\n 500: \"#6366f1\",\n 600: \"#4f46e5\",\n 700: \"#4338ca\",\n 800: \"#3730a3\",\n 900: \"#312e81\",\n 950: \"#1e1b4b\",\n },\n success: {\n 50: \"#ecfdf5\",\n 100: \"#d1fae5\",\n 200: \"#a7f3d0\",\n 300: \"#6ee7b7\",\n 400: \"#34d399\",\n 500: \"#10b981\",\n 600: \"#059669\",\n 700: \"#047857\",\n 800: \"#065f46\",\n 900: \"#064e3b\",\n 950: \"#022c22\",\n },\n warning: {\n 50: \"#fefce8\",\n 100: \"#fef9c3\",\n 200: \"#fef08a\",\n 300: \"#fde047\",\n 400: \"#facc15\",\n 500: \"#eab308\",\n 600: \"#ca8a04\",\n 700: \"#a16207\",\n 800: \"#854d0e\",\n 900: \"#713f12\",\n 950: \"#422006\",\n },\n danger: {\n 50: \"#fef2f2\",\n 100: \"#fee2e2\",\n 200: \"#fecaca\",\n 300: \"#fca5a5\",\n 400: \"#f87171\",\n 500: \"#ef4444\",\n 600: \"#dc2626\",\n 700: \"#b91c1c\",\n 800: \"#991b1b\",\n 900: \"#7f1d1d\",\n 950: \"#450a0a\",\n },\n neutral: {\n 50: \"#f8f9fa\",\n 100: \"#f1f3f5\",\n 200: \"#e9ecef\",\n 300: \"#dee2e6\",\n 400: \"#ced4da\",\n 500: \"#adb5bd\",\n 600: \"#6c757d\",\n 700: \"#495057\",\n 800: \"#343a40\",\n 900: \"#212529\",\n }\n },\n boxShadow: {\n focus: \"0 0 0 3px rgba(0, 114, 245, 0.3)\",\n }\n },\n },\n plugins: [],\n}\n\n```\n\n1. **Import the components** in your Angular module or standalone component:\n\n```typescript\nimport { ButtonComponent, InputComponent, CardComponent } from '@besaitech/ng-design-system-lib';\n\n@Component({\n selector: 'app-example',\n standalone: true,\n imports: [ButtonComponent, InputComponent, CardComponent],\n template: `\n \n \n Submit\n \n `\n})\nexport class ExampleComponent {}\n```\n\n2. **Configure Tailwind CSS** by adding the library paths to your `tailwind.config.js`:\n\n```javascript\nmodule.exports = {\n content: [\n \"./src/**/*.{html,ts}\",\n \"./node_modules/@besaitech/ng-design-system-lib/**/*.{html,ts,js,mjs}\"\n ],\n // ... rest of your config\n}\n```\n\n## Available Components\n\n### Form Components\n- `ds-input` - Text inputs with validation\n- `ds-select` - Dropdown selections\n- `ds-checkbox` - Checkbox inputs\n- `ds-radio` - Radio button groups\n- `ds-datepicker` - Date selection\n- `ds-form-field` - Form field wrapper with labels and validation\n\n### UI Components\n- `ds-button` - Buttons with multiple variants\n- `ds-card` - Content containers\n- `ds-modal` - Dialog overlays\n- `ds-alert` - Notification messages\n- `ds-badge` - Status indicators\n- `ds-avatar` - User avatars\n- `ds-progress-bar` - Progress indicators\n- `ds-spinner` - Loading spinners\n- `ds-table` - Data tables with sorting and pagination\n- `ds-tabs` - Tabbed content\n- `ds-tooltip` - Contextual help\n\n## Example Usage\n\n### Button Component\n```html\n\n Click me\n\n```\n\n### Form with Validation\n```typescript\n// Component\nexport class MyFormComponent {\n form = this.fb.group({\n email: ['', [Validators.required, Validators.email]],\n name: ['', Validators.required]\n });\n}\n```\n\n```html\n\n
\n \n \n \n \n \n \n \n
\n```\n\n### Data Table\n```html\n\n \n \n \n\n```\n\n## Styling and Theming\n\nThe library uses Tailwind CSS for styling. You can customize the design system by:\n\n1. **Custom Colors**: Override the color palette in your `tailwind.config.js`\n2. **Component Classes**: Add custom CSS classes using the `className` input\n3. **CSS Variables**: Use CSS custom properties for dynamic theming\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Contributing\n\nContributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.\n\n## License\n\nMIT © [BESAITECH]\n\n## Changelog\n\n### 1.0.0\n- Initial release\n- Complete set of form and UI components\n- Tailwind CSS integration\n- Angular 19 support\n","readmeFilename":"README.md"}