{"_id":"@atic/csd-ui","_rev":"5-14ea491873ef2134676135391fc6267f","name":"@atic/csd-ui","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@atic/csd-ui","version":"1.0.0","_id":"@atic/csd-ui@1.0.0","maintainers":[{"name":"muhamad.hendra","email":"hendraforc@gmail.com"}],"dist":{"shasum":"96ac5fbd5c13c1cf1ed4acb0d9f100bc593b0ae9","tarball":"https://registry.npmjs.org/@atic/csd-ui/-/csd-ui-1.0.0.tgz","fileCount":5,"integrity":"sha512-ldYR9RWL21dgT0hJkWe0dmMbL3cwGMIPEnkrIzqqzKAeRqrgIn0+a7ZmgP20MUI2BwXBCKykRCQy2L1NsavpyQ==","signatures":[{"sig":"MEYCIQDbIv3P5TUK13YOC7XxVlp5zLTgFJ0U3csy71gZwetouQIhAI7TZk+xLyH63R5cjn4Dg1QtX6YZn/IKjA7B7eQzYhdR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":812388},"type":"module","module":"fesm2022/atic-csd-ui.mjs","exports":{".":{"types":"./types/atic-csd-ui.d.ts","default":"./fesm2022/atic-csd-ui.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"51b86599f8305a4c7ebe250fc8baad221a3e605b","typings":"types/atic-csd-ui.d.ts","_npmUser":{"name":"muhamad.hendra","email":"hendraforc@gmail.com"},"_npmVersion":"11.6.2","description":"CSD UI Design System Component Library for Angular","directories":{},"sideEffects":false,"_nodeVersion":"24.12.0","dependencies":{"tslib":"^2.3.0","bootstrap-icons":"^1.11.3"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^21.0.0","@angular/forms":"^21.0.0","@angular/common":"^21.0.0","@angular/router":"^21.0.0","@angular/material":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/csd-ui_1.0.0_1785816974736_0.5973880192004657","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atic/csd-ui","version":"1.0.1","_id":"@atic/csd-ui@1.0.1","maintainers":[{"name":"muhamad.hendra","email":"hendraforc@gmail.com"}],"dist":{"shasum":"fd81f96738d7178c12c25c9adae081ed29876e08","tarball":"https://registry.npmjs.org/@atic/csd-ui/-/csd-ui-1.0.1.tgz","fileCount":5,"integrity":"sha512-NXpueM6vlJ53lvHJANw2OouOZNRxYdtizPoy40t2RLqlaE/hsFqnxOZ9JA39oW/tAGUcDAR9YHKEm1zLVL5pvw==","signatures":[{"sig":"MEQCICqED80+DC/1WQeG2sXTdh44SvvrvVmqbZwzZyi8mmNdAiAlNKS4HH3XbaJnX/sZEl7uRuMDlzBFQ2Kup7s4QBxkcg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":812356},"type":"module","module":"fesm2022/atic-csd-ui.mjs","exports":{".":{"types":"./types/atic-csd-ui.d.ts","default":"./fesm2022/atic-csd-ui.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"51b86599f8305a4c7ebe250fc8baad221a3e605b","typings":"types/atic-csd-ui.d.ts","_npmUser":{"name":"muhamad.hendra","email":"hendraforc@gmail.com"},"_npmVersion":"11.6.2","description":"CSD UI Design System Component Library for Angular","directories":{},"sideEffects":false,"_nodeVersion":"24.12.0","dependencies":{"tslib":"^2.3.0","bootstrap-icons":"^1.11.3"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=17.0.0","@angular/forms":">=17.0.0","@angular/common":">=17.0.0","@angular/router":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/csd-ui_1.0.1_1785817696773_0.06394047923897794","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@atic/csd-ui","version":"1.0.2","_id":"@atic/csd-ui@1.0.2","maintainers":[{"name":"muhamad.hendra","email":"hendraforc@gmail.com"}],"dist":{"shasum":"f19e30470b353cd7bf6742c7cb05fdc4358f2bf8","tarball":"https://registry.npmjs.org/@atic/csd-ui/-/csd-ui-1.0.2.tgz","fileCount":52,"integrity":"sha512-ZCnH/KwIRLUiXBzAiSs2SEHhurb1DSFDUhaWogSAWU0bDZo1kIDzaL7ty/fWUC9OFLFG3E3F0egJ0/Ha8fJN8w==","signatures":[{"sig":"MEQCIGbycafPtUh8zxZ7tyo45CrRiSa61F3rCz6NGZ4BhECDAiAmTy258CoJTF+hdt+YlhJ/8roO4lIpnNXnnb+/kXYT6w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":995623},"type":"module","module":"fesm2022/atic-csd-ui.mjs","exports":{".":{"types":"./types/atic-csd-ui.d.ts","default":"./fesm2022/atic-csd-ui.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"51b86599f8305a4c7ebe250fc8baad221a3e605b","typings":"types/atic-csd-ui.d.ts","_npmUser":{"name":"muhamad.hendra","email":"hendraforc@gmail.com"},"_npmVersion":"11.6.2","description":"CSD UI Design System Component Library for Angular","directories":{},"sideEffects":false,"_nodeVersion":"24.12.0","dependencies":{"tslib":"^2.3.0","bootstrap-icons":"^1.11.3"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=17.0.0","@angular/forms":">=17.0.0","@angular/common":">=17.0.0","@angular/router":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/csd-ui_1.0.2_1785818706859_0.5173321461766478","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@atic/csd-ui","version":"1.0.3","_id":"@atic/csd-ui@1.0.3","maintainers":[{"name":"muhamad.hendra","email":"hendraforc@gmail.com"}],"dist":{"shasum":"e60b39cff352ce76d4dfaf9f8d353a0882d87bdb","tarball":"https://registry.npmjs.org/@atic/csd-ui/-/csd-ui-1.0.3.tgz","fileCount":52,"integrity":"sha512-t8TFuQaKtHjsbZX43s+zckmVe8lbFH5oBBmI/934c5lJlwMvEG5EZ9WJagEEnBMaRjD0m9V6Dg2rLr6V3x9VZg==","signatures":[{"sig":"MEUCIAYLl6TnSHHgto9Qs7IV7uc1aPGbHz+ci9N9pGK5DH2MAiEAgDqmnYOc2xm89PiAkz91Qb5ETqXFWZdUGAwmkgGsLzE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":999095},"type":"module","module":"fesm2022/atic-csd-ui.mjs","exports":{".":{"types":"./types/atic-csd-ui.d.ts","default":"./fesm2022/atic-csd-ui.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"51b86599f8305a4c7ebe250fc8baad221a3e605b","typings":"types/atic-csd-ui.d.ts","_npmUser":{"name":"muhamad.hendra","email":"hendraforc@gmail.com"},"_npmVersion":"11.6.2","description":"CSD UI Design System Component Library for Angular","directories":{},"sideEffects":false,"_nodeVersion":"24.12.0","dependencies":{"tslib":"^2.3.0","bootstrap-icons":"^1.11.3"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=17.0.0","@angular/forms":">=17.0.0","@angular/common":">=17.0.0","@angular/router":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/csd-ui_1.0.3_1785819682643_0.22943720296502512","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@atic/csd-ui","version":"1.0.4","description":"CSD UI Design System Component Library for Angular","peerDependencies":{"@angular/common":">=17.0.0","@angular/core":">=17.0.0","@angular/forms":">=17.0.0","@angular/router":">=17.0.0"},"dependencies":{"bootstrap-icons":"^1.11.3","tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/atic-csd-ui.mjs","typings":"types/atic-csd-ui.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/atic-csd-ui.d.ts","default":"./fesm2022/atic-csd-ui.mjs"}},"type":"module","gitHead":"51b86599f8305a4c7ebe250fc8baad221a3e605b","_id":"@atic/csd-ui@1.0.4","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-WDvYynbuh6DZFgJ6drH5VijgAdbKeONfMBdC/gxKcgtKaTlQpYV+LI9TS4Q6S+BrkeXWpeRjJLXVMxWCir0YJQ==","shasum":"d5797760f5cca4ee6c7678d0ec97c5a701526a4e","tarball":"https://registry.npmjs.org/@atic/csd-ui/-/csd-ui-1.0.4.tgz","fileCount":52,"unpackedSize":999095,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHhr+r1hC93Eh32/qafJSF2Soibr6jhnudpDTG4pHdoSAiEA1X1Vd736VAA5lnfQz8HpohqE5HYgB7PDvFNFLbvStQo="}]},"_npmUser":{"name":"muhamad.hendra","email":"hendraforc@gmail.com"},"directories":{},"maintainers":[{"name":"muhamad.hendra","email":"hendraforc@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/csd-ui_1.0.4_1785822846241_0.11803079029214025"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-04T04:16:14.620Z","modified":"2026-08-04T05:54:06.567Z","1.0.0":"2026-08-04T04:16:14.871Z","1.0.1":"2026-08-04T04:28:16.932Z","1.0.2":"2026-08-04T04:45:07.063Z","1.0.3":"2026-08-04T05:01:22.803Z","1.0.4":"2026-08-04T05:54:06.401Z"},"description":"CSD UI Design System Component Library for Angular","maintainers":[{"name":"muhamad.hendra","email":"hendraforc@gmail.com"}],"readme":"# 🎨 @atic/csd-ui\n\n[![npm version](https://img.shields.io/npm/v/@atic/csd-ui.svg?color=635bff&style=flat-square)](https://www.npmjs.com/package/@atic/csd-ui)\n[![license](https://img.shields.io/npm/l/@atic/csd-ui.svg?style=flat-square)](https://github.com/Ini-Hendra/csd-ui)\n[![angular version](https://img.shields.io/badge/Angular-17%2B%20%7C%2018%2B%20%7C%2019%2B-DD0031?style=flat-square&logo=angular)](https://angular.dev)\n\n**CSD UI** is a state-of-the-art, premium Enterprise Design System & UI Component Library built specifically for **Angular** with **Standalone Components**. Designed with modern aesthetics, vibrant HSL color tokens, rich micro-animations, light/dark mode readiness, and accessible controls.\n\n---\n\n## ✨ Features\n\n- 🚀 **100% Standalone Components**: Compatible with Angular 17, 18, 19+. No legacy NgModule required.\n- 🎨 **Modern & Premium Aesthetics**: Tailored typography, smooth CSS variables, HSL color system, and subtle hover interactions.\n- 🌙 **Dark Mode Support**: Seamless toggle with predefined color tokens.\n- 📦 **Zero-Config Tree-Shakable**: Import only the components you need to keep your bundle size ultra-lightweight.\n- 📱 **Fully Responsive**: Crafted with modern flexbox and grid layouts.\n\n---\n\n## ⚡ Quick Start\n\n### 1. Installation\n\nInstall `@atic/csd-ui` via npm:\n\n```bash\nnpm install @atic/csd-ui@latest\n```\n\n### 2. Configure Global Styles\n\nAdd the CSD UI global design tokens and styles in your project's `angular.json` under the `styles` array:\n\n```json\n\"styles\": [\n  \"src/styles.css\",\n  \"node_modules/@atic/csd-ui/src/styles/styles.scss\"\n]\n```\n\n*(Optional)* If you want Bootstrap Icons for prefix/suffix icons:\n\n```html\n<!-- Include in index.html -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css\">\n```\n\n---\n\n## 💡 Component Usage Examples\n\n### Accordion Component\n\n```typescript\nimport { Component } from '@angular/core';\nimport { CsdAccordionGroupComponent, CsdAccordionPanelComponent } from '@atic/csd-ui';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [CsdAccordionGroupComponent, CsdAccordionPanelComponent],\n  template: `\n    <csd-accordion-group>\n      <csd-accordion-panel title=\"Accordion Item 1\" [expanded]=\"true\">\n        Welcome to CSD UI Design System!\n      </csd-accordion-panel>\n      <csd-accordion-panel title=\"Accordion Item 2\">\n        Flexible, lightweight, and customizable Angular components.\n      </csd-accordion-panel>\n    </csd-accordion-group>\n  `\n})\nexport class AppComponent {}\n```\n\n### Button & Alert Component\n\n```typescript\nimport { Component } from '@angular/core';\nimport { CsdButtonComponent, CsdAlertComponent } from '@atic/csd-ui';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [CsdButtonComponent, CsdAlertComponent],\n  template: `\n    <csd-alert variant=\"success\">Operation completed successfully!</csd-alert>\n    <csd-button variant=\"primary\">Submit Form</csd-button>\n    <csd-button variant=\"light-primary\">Soft Primary</csd-button>\n    <csd-button variant=\"outline\">Outline</csd-button>\n  `\n})\nexport class ExampleComponent {}\n```\n\n### Form Input & Floating Labels\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CsdFormFieldComponent } from '@atic/csd-ui';\n\n@Component({\n  selector: 'app-login',\n  standalone: true,\n  imports: [FormsModule, CsdFormFieldComponent],\n  template: `\n    <csd-form-field label=\"Username\" hint=\"Enter your registered username\">\n      <i prefix class=\"bi bi-person\"></i>\n      <input class=\"csd-input\" type=\"text\" [(ngModel)]=\"username\" placeholder=\"john.doe\" />\n    </csd-form-field>\n  `\n})\nexport class LoginComponent {\n  username = '';\n}\n```\n\n---\n\n## 📦 Available Components\n\n| Category | Components / Directives |\n|---|---|\n| **Buttons & Actions** | `CsdButtonComponent`, `CsdFabComponent`, `CsdButtonToggleComponent` |\n| **Forms & Controls** | `CsdFormFieldComponent`, `CsdRadioComponent`, `CsdSlideToggleComponent`, `CsdDatepickerComponent`, `CsdSliderComponent`, `CsdStepperComponent` |\n| **Navigation & Layout** | `CsdTabsComponent`, `CsdTabComponent`, `CsdDropdownComponent`, `CsdAccordionGroupComponent`, `CsdAccordionPanelComponent`, `CsdBreadcrumbComponent`, `CsdPaginatorComponent` |\n| **Feedback & Overlays** | `CsdAlertComponent`, `CsdToastComponent`, `CsdDialogComponent`, `CsdModalComponent`, `CsdOffcanvasComponent`, `CsdSpinnerComponent`, `CsdProgressComponent` |\n| **Data Display** | `CsdBadgeComponent`, `CsdChipComponent`, `CsdAvatarComponent`, `CsdCardComponent`, `CsdTreeviewComponent`, `CsdTimelineComponent`, `CsdKanbanBoardComponent` |\n| **Directives** | `CsdTooltipDirective`, `CsdPopoverDirective`, `CsdBlockUiDirective`, `CsdRippleDirective`, `CsdDraggableDirective` |\n\n---\n\n## 📄 License\n\nMIT © [ATIC Design System Team](https://github.com/Ini-Hendra/csd-ui)\n","readmeFilename":"README.md"}