{"_id":"uisuite","_rev":"28-b9b1804f4526c115d90d00b333f69864","name":"uisuite","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"uisuite","version":"1.0.0","keywords":["angular","ui","components","library","erp","saas","design-system","ui-library","angular-components","enterprise"],"author":{"name":"Your Name"},"license":"MIT","_id":"uisuite@1.0.0","maintainers":[{"name":"uisuite","email":"k.sindhi@yahoo.com"}],"homepage":"https://github.com/yourusername/uisuite#readme","bugs":{"url":"https://github.com/yourusername/uisuite/issues"},"dist":{"shasum":"580604a3063777b79c88b92e35eb8b10daeef35f","tarball":"https://registry.npmjs.org/uisuite/-/uisuite-1.0.0.tgz","fileCount":11,"integrity":"sha512-5eFBFnFZCHddlTzknmymcbCBae7hdCEUb9Tiq3xnM/CE3cV0fajbIcteDHk60lX0C3dWjnOvyjBWULj0AIXgKw==","signatures":[{"sig":"MEUCID/MCgfQzYOZZgnw2+uXIQPUH/fB5YaRb7CzVHvbaYUGAiEAlBF38T9lkccFyrXjbwbsUdopRzxJ2T3NtFKHtbIWKQo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":40831},"module":"fesm2022/uisuite.mjs","exports":{".":{"esm":"./esm2022/uisuite.mjs","types":"./index.d.ts","default":"./fesm2022/uisuite.mjs","esm2022":"./esm2022/uisuite.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"c7dd516e44082919820eb74290836530251e9e16","typings":"index.d.ts","_npmUser":{"name":"uisuite","email":"k.sindhi@yahoo.com"},"repository":{"url":"git+https://github.com/yourusername/uisuite.git","type":"git"},"_npmVersion":"10.9.3","description":"Enterprise Angular UI component library for ERP SAAS applications. Designer-friendly, consistent, and accessible components.","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18.0.0","@angular/common":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/uisuite_1.0.0_1768082189031_0.7915921725827717","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"uisuite","version":"1.0.1","keywords":["angular","ui","components","library","erp","saas","design-system","ui-library","angular-components","enterprise"],"author":{"name":"Your Name"},"license":"MIT","_id":"uisuite@1.0.1","maintainers":[{"name":"uisuite","email":"k.sindhi@yahoo.com"}],"homepage":"https://github.com/yourusername/uisuite#readme","bugs":{"url":"https://github.com/yourusername/uisuite/issues"},"dist":{"shasum":"8ee6fbd022a22592c8a6c23f027b874324d44eb7","tarball":"https://registry.npmjs.org/uisuite/-/uisuite-1.0.1.tgz","fileCount":10,"integrity":"sha512-DpmkS/gVlr3B5ng0UATriMsANyfCvxENwSI/bLkZRU0jl9dbH1v/CtqiujA4LmiiUxstp+xbX/yA4sbV+6OBhA==","signatures":[{"sig":"MEYCIQCV5FRzfxnb+lGuPLvt7OFx6vIP1aSmqhoqLoTWsLnBhgIhAJWmEct13IBTNJ14U4797zTRC+/1LepeTKlgGiWTR8K8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29482},"module":"fesm2022/uisuite.mjs","exports":{".":{"esm":"./esm2022/uisuite.mjs","types":"./index.d.ts","default":"./fesm2022/uisuite.mjs","esm2022":"./esm2022/uisuite.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"1db493dec9f8da45111bf10ab51f24d149f8e901","typings":"index.d.ts","_npmUser":{"name":"uisuite","email":"k.sindhi@yahoo.com"},"repository":{"url":"git+https://github.com/yourusername/uisuite.git","type":"git"},"_npmVersion":"10.9.3","description":"Enterprise Angular UI component library for ERP SAAS applications. Designer-friendly, consistent, and accessible components.","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18.0.0","@angular/common":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/uisuite_1.0.1_1768083060790_0.09572756509040925","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"uisuite","version":"1.0.2","keywords":["angular","ui","components","library","erp","saas","design-system","ui-library","angular-components","enterprise"],"author":{"name":"Your Name"},"license":"MIT","_id":"uisuite@1.0.2","maintainers":[{"name":"uisuite","email":"k.sindhi@yahoo.com"}],"homepage":"https://github.com/yourusername/uisuite#readme","bugs":{"url":"https://github.com/yourusername/uisuite/issues"},"dist":{"shasum":"ac50565a36ca0d15a83a9cb99fe92b66a1fa615e","tarball":"https://registry.npmjs.org/uisuite/-/uisuite-1.0.2.tgz","fileCount":10,"integrity":"sha512-/LAHBHCXsSq9sLE9jDyFOzc4wATrMrvZKwwFBGWNGO2FbIWw289uPVDXqx/Fd+o4Xrdhn2ll6LYjUqALMdgrIg==","signatures":[{"sig":"MEYCIQCiLa1ZfwKs9+5pPFdhzW9LyLPASA5YeogiSZFMFbeAyQIhAPFzO2yA2mCy8w/DeccJ8i2Xp1QQt9U3gm49urRmRN7D","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":59861},"module":"fesm2022/uisuite.mjs","exports":{".":{"esm":"./esm2022/uisuite.mjs","types":"./index.d.ts","default":"./fesm2022/uisuite.mjs","esm2022":"./esm2022/uisuite.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"1db493dec9f8da45111bf10ab51f24d149f8e901","typings":"index.d.ts","_npmUser":{"name":"uisuite","email":"k.sindhi@yahoo.com"},"repository":{"url":"git+https://github.com/yourusername/uisuite.git","type":"git"},"_npmVersion":"10.9.3","description":"Enterprise Angular UI component library for ERP SAAS applications. Designer-friendly, consistent, and accessible components.","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18.0.0","@angular/common":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/uisuite_1.0.2_1768131744211_0.05897961111469607","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"uisuite","version":"1.0.3","keywords":["angular","ui","components","library","erp","saas","design-system","ui-library","angular-components","enterprise"],"author":{"name":"Your Name"},"license":"MIT","_id":"uisuite@1.0.3","maintainers":[{"name":"uisuite","email":"k.sindhi@yahoo.com"}],"homepage":"https://github.com/yourusername/uisuite#readme","bugs":{"url":"https://github.com/yourusername/uisuite/issues"},"dist":{"shasum":"84940cf23c913f501395777797348c4a9e6f5fed","tarball":"https://registry.npmjs.org/uisuite/-/uisuite-1.0.3.tgz","fileCount":12,"integrity":"sha512-12UEzXrqlnc6GNOKA5NYVrd7ll/qMq2BaT9stVOmtrpHhHEdQpTJOcd9jEyItjBYXF4bQxyrbOaidZfnwaMzmw==","signatures":[{"sig":"MEYCIQD2+ZMyhwB41k6YDu8g2o0b24lnP6v1PLZIS7raK0OrxwIhAIoiJiE+F6xwEk0dm7Ka/BmYAqWAt/6E1wNpjYiYR9uP","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":98007},"module":"fesm2022/uisuite.mjs","exports":{".":{"esm":"./esm2022/uisuite.mjs","types":"./index.d.ts","default":"./fesm2022/uisuite.mjs","esm2022":"./esm2022/uisuite.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"b00c0c7c953912c0f710bfb470b822d19a2c6365","typings":"index.d.ts","_npmUser":{"name":"uisuite","email":"k.sindhi@yahoo.com"},"repository":{"url":"git+https://github.com/yourusername/uisuite.git","type":"git"},"_npmVersion":"10.9.3","description":"Enterprise Angular UI component library for ERP SAAS applications. Designer-friendly, consistent, and accessible components.","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18.0.0","@angular/common":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/uisuite_1.0.3_1769015908912_0.7705482056451887","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"uisuite","version":"1.1.0","description":"Enterprise Angular UI component library for ERP SAAS applications. Designer-friendly, consistent, and accessible components with runtime theme configuration.","keywords":["angular","ui","components","library","erp","saas","design-system","ui-library","angular-components","enterprise","theming","css-variables"],"author":{"name":"Your Name"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ksindhi/uisuite.git"},"peerDependencies":{"@angular/common":">=18.0.0","@angular/core":">=18.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/uisuite.mjs","typings":"types/uisuite.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/uisuite.d.ts","default":"./fesm2022/uisuite.mjs"}},"type":"module","gitHead":"fc747d36d05872fb86de5dcab976a1261ba6d1d0","_id":"uisuite@1.1.0","bugs":{"url":"https://github.com/ksindhi/uisuite/issues"},"homepage":"https://github.com/ksindhi/uisuite#readme","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-YWYKFhDvcaDY9OvPMJhPwkysS81MC7aBjDsNuPbaX8A9Pglav0HeqKaxgMiOLUndKv+fnv4P4vr5/8j5nFCDcA==","shasum":"3393902f90c8ef3f5c3e1691828af7ab42c90c3b","tarball":"https://registry.npmjs.org/uisuite/-/uisuite-1.1.0.tgz","fileCount":5,"unpackedSize":295722,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHrtR7+Xakzj0q5nx+mIMrOQKawFHljzooM3ezz97pIaAiEA7PSzI/BftmZiWno/1kS+KJ01m4LD+io+rhGxOwch5kI="}]},"_npmUser":{"name":"uisuite","email":"k.sindhi@yahoo.com"},"directories":{},"maintainers":[{"name":"uisuite","email":"k.sindhi@yahoo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/uisuite_1.1.0_1778908564995_0.25453769150586814"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-10T21:56:28.638Z","modified":"2026-05-16T05:16:05.541Z","0.0.1":"2023-11-18T10:13:21.024Z","0.0.2":"2023-11-18T10:26:29.370Z","0.0.3":"2023-11-18T11:16:24.042Z","0.0.4":"2023-11-18T14:16:04.297Z","0.0.5":"2023-11-18T14:17:29.043Z","0.0.6":"2023-11-18T14:25:17.680Z","0.0.7":"2023-11-18T14:26:12.338Z","0.0.8":"2023-11-18T14:27:38.401Z","0.0.9":"2023-11-18T14:30:40.215Z","0.0.10":"2023-11-18T14:31:29.812Z","0.0.11":"2023-11-20T06:51:19.387Z","0.0.12":"2023-11-21T09:04:44.069Z","0.0.13":"2023-11-21T09:05:58.888Z","0.0.14":"2023-11-28T08:44:31.002Z","0.0.16":"2023-12-01T09:11:15.431Z","0.0.17":"2024-01-17T11:14:54.786Z","0.0.18":"2024-01-17T12:24:29.819Z","0.0.19":"2024-01-29T09:48:22.504Z","0.0.20":"2024-08-15T19:18:45.673Z","0.0.21":"2024-08-15T19:28:34.134Z","1.0.0":"2026-01-10T21:56:29.187Z","1.0.1":"2026-01-10T22:11:00.957Z","1.0.2":"2026-01-11T11:42:24.364Z","1.0.3":"2026-01-21T17:18:29.098Z","1.1.0":"2026-05-16T05:16:05.123Z"},"bugs":{"url":"https://github.com/ksindhi/uisuite/issues"},"author":{"name":"Your Name"},"license":"MIT","homepage":"https://github.com/ksindhi/uisuite#readme","keywords":["angular","ui","components","library","erp","saas","design-system","ui-library","angular-components","enterprise","theming","css-variables"],"repository":{"type":"git","url":"git+https://github.com/ksindhi/uisuite.git"},"description":"Enterprise Angular UI component library for ERP SAAS applications. Designer-friendly, consistent, and accessible components with runtime theme configuration.","maintainers":[{"name":"uisuite","email":"k.sindhi@yahoo.com"}],"readme":"# UIsuite\n\nEnterprise-grade Angular UI component library designed for ERP SaaS applications and enterprise software. Built with a focus on consistency, accessibility, and designer-friendly customization.\n\n[![npm version](https://img.shields.io/npm/v/uisuite.svg)](https://www.npmjs.com/package/uisuite)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\n---\n\n## 🚀 Features\n\n- ✨ **Modern & Clean Design** — Professional UI components that look great out of the box\n- 🎨 **Runtime Theming** — Configure your brand colors in `app.config.ts` — no SCSS edits needed\n- ♿ **Accessible** — WCAG compliant with proper ARIA attributes and keyboard navigation\n- 📦 **Tree-shakeable** — Only import what you need\n- 🔧 **Reactive Forms Support** — Full integration with Angular reactive forms\n- 📱 **Responsive** — Mobile-first design approach\n- 🎯 **TypeScript** — Full type safety and IntelliSense support\n\n---\n\n## 📦 Installation\n\n```bash\nnpm install uisuite\n```\n\n---\n\n## ⚡ Quick Start\n\n### 1. Register the library in `app.config.ts`\n\n```typescript\n// app.config.ts\nimport { ApplicationConfig } from '@angular/core';\nimport { provideRouter }   from '@angular/router';\nimport { provideUiSuite }  from 'uisuite';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(routes),\n    provideUiSuite(), // ← add this (uses default colors out of the box)\n  ]\n};\n```\n\n### 2. Import the stylesheet\n\nAdd to your **`angular.json`** styles array:\n\n```json\n\"styles\": [\n  \"node_modules/uisuite/styles/ui.scss\",\n  \"src/styles.scss\"\n]\n```\n\nOr import in your global **`styles.scss`**:\n\n```scss\n@use 'uisuite/styles/ui';\n```\n\n### 3. Use components\n\n```typescript\nimport { ButtonComponent } from 'uisuite';\n\n@Component({\n  standalone: true,\n  imports: [ButtonComponent],\n  template: `<uButton variant=\"default\" color=\"primary\">Click Me</uButton>`\n})\nexport class AppComponent {}\n```\n\n---\n\n## 🎨 Theme Configuration\n\n`provideUiSuite()` accepts an optional config object so you can set your brand colors **once** in `app.config.ts` — every component picks them up automatically.\n\n### Quick mode — single hex per color group\n\n```typescript\nprovideUiSuite({\n  colors: {\n    primary: '#7C3AED',   // violet  → full 9-shade scale auto-generated\n    success: '#16A34A',   // green\n    warning: '#D97706',   // amber\n    danger:  '#DC2626',   // red\n    accent:  '#0EA5E9',   // sky blue\n  }\n})\n```\n\n### Precise mode — partial or full scale\n\n```typescript\nprovideUiSuite({\n  colors: {\n    primary: {\n      100: '#EDE9FE',\n      200: '#DDD6FE',\n      500: '#8B5CF6',\n      600: '#7C3AED',  // main interactive shade\n      700: '#6D28D9',\n      800: '#5B21B6',\n      900: '#4C1D95',\n    },\n    danger: { 600: '#DC2626', 700: '#B91C1C' },  // only override what you need\n  }\n})\n```\n\n> **Note:** You can mix both — use a string for some groups and a scale object for others.\n\n### How it works\n\nAt startup, `provideUiSuite()` writes CSS custom properties onto `:root`:\n\n```\n--uicolor-primary-600: #7C3AED\n--uicolor-primary-700: #6D28D9\n...\n```\n\nAll UIsuite components reference these variables, so the entire UI re-themes instantly.\n\n### CSS-only alternative\n\nIf you prefer not to use the provider, you can override variables directly in your global CSS:\n\n```css\n/* styles.css */\n:root {\n  --uicolor-primary-600: #7C3AED;\n  --uicolor-primary-700: #6D28D9;\n}\n```\n\n### Full color variable reference\n\n| Group | CSS variable pattern | Default |\n|-------|---------------------|---------|\n| Primary | `--uicolor-primary-{100–900}` | Blue |\n| Success | `--uicolor-success-{100–900}` | Green |\n| Warning | `--uicolor-warning-{100–900}` | Amber |\n| Danger | `--uicolor-danger-{100–900}` | Red |\n| Accent | `--uicolor-accent-{100–900}` | Purple |\n| Slate | `--uicolor-slate-{100–900}` | Grey (neutral) |\n\n---\n\n## 📚 Components\n\n### Button (`uButton`)\n\n```html\n<uButton>Default</uButton>\n<uButton variant=\"outline\" color=\"primary\">Outline</uButton>\n<uButton variant=\"ghost\">Ghost</uButton>\n<uButton variant=\"destructive\">Delete</uButton>\n<uButton variant=\"secondary\">Secondary</uButton>\n<uButton variant=\"link\">Link</uButton>\n<uButton size=\"sm\">Small</uButton>\n<uButton size=\"lg\">Large</uButton>\n<uButton [disabled]=\"true\">Disabled</uButton>\n```\n\n**Inputs:**\n\n| Input | Type | Default | Description |\n|-------|------|---------|-------------|\n| `variant` | `'default' \\| 'outline' \\| 'ghost' \\| 'destructive' \\| 'secondary' \\| 'link'` | `'default'` | Visual style |\n| `size` | `'default' \\| 'sm' \\| 'lg' \\| 'icon' \\| 'icon-sm' \\| 'icon-lg'` | `'default'` | Size |\n| `color` | `'primary' \\| 'success' \\| 'warning' \\| 'danger' \\| 'accent' \\| 'white' \\| 'info'` | `'primary'` | Color palette |\n| `disabled` | `boolean` | `false` | Disables the button |\n| `type` | `'button' \\| 'submit' \\| 'reset'` | `'button'` | HTML button type |\n| `ariaLabel` | `string` | — | ARIA label |\n\n---\n\n### Card (`uCard`)\n\n```html\n<uCard>\n  <uCardHeader>\n    <uCardTitle>Card Title</uCardTitle>\n    <uCardDescription>Card description goes here.</uCardDescription>\n  </uCardHeader>\n  <uCardContent>\n    <p>Main content area</p>\n  </uCardContent>\n  <uCardFooter>\n    <uButton>Action</uButton>\n  </uCardFooter>\n</uCard>\n```\n\n---\n\n### Alert Dialog (`uAlertDialog`)\n\n```html\n<uAlertDialog [(isOpen)]=\"dialogOpen\" (action)=\"onAction($event)\">\n  <u-alert-dialog-header>\n    <u-alert-dialog-title>Are you sure?</u-alert-dialog-title>\n    <u-alert-dialog-description>\n      This action cannot be undone.\n    </u-alert-dialog-description>\n  </u-alert-dialog-header>\n  <u-alert-dialog-footer>\n    <uButton variant=\"outline\" (click)=\"dialogOpen = false\">Cancel</uButton>\n    <uButton variant=\"destructive\" (click)=\"confirm()\">Delete</uButton>\n  </u-alert-dialog-footer>\n</uAlertDialog>\n```\n\n---\n\n### Dropdown (`[uDropdown]`)\n\n```html\n<div [uDropdown]=\"menuRef\" placement=\"bottom-start\">\n  <uButton>Open Menu</uButton>\n</div>\n\n<uDropdownMenu #menuRef>\n  <button uDropdownItem>Profile</button>\n  <button uDropdownItem>Settings</button>\n  <hr uDropdownSeparator />\n  <button uDropdownItem variant=\"destructive\">Logout</button>\n</uDropdownMenu>\n```\n\n---\n\n### Tooltip (`[uTooltip]`)\n\n```html\n<uButton uTooltip=\"Save your work\" tooltipPlacement=\"top\">Save</uButton>\n```\n\n---\n\n### Datepicker (`[uDatepicker]`)\n\n```html\n<input [uDatepicker]=\"picker\" [(ngModel)]=\"date\" placeholder=\"Pick a date\" />\n<uDatepicker #picker></uDatepicker>\n```\n\n---\n\n### Text (`uText`)\n\n```html\n<uText size=\"lg\" weight=\"semibold\">Heading text</uText>\n<uText size=\"sm\" color=\"muted\">Secondary text</uText>\n```\n\n---\n\n## 🔧 TypeScript API\n\n```typescript\nimport {\n  // Provider function\n  provideUiSuite,\n\n  // Config interfaces\n  UiSuiteConfig,\n  UiSuiteColors,\n  UiSuiteColorScale,\n\n  // Injection token (advanced)\n  UISUITE_CONFIG,\n\n  // Theme service (advanced)\n  UiSuiteThemeService,\n\n  // Components\n  ButtonComponent,\n  CardComponent,\n  AlertDialogComponent,\n  DropdownMenuComponent,\n  TooltipComponent,\n  DatepickerComponent,\n  TextComponent,\n} from 'uisuite';\n```\n\n---\n\n## 🌐 SSR / Server-Side Rendering\n\nThe theme service automatically detects the platform using `isPlatformBrowser()` and skips DOM manipulation during SSR. CSS variables are applied on the client after hydration — no configuration needed.\n\n---\n\n## 📖 Documentation & Examples\n\nVisit [https://github.com/ksindhi/uisuite](https://github.com/ksindhi/uisuite) for full docs, live examples, and Storybook.\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n---\n\n## 🙏 Support\n\nIf you find this project useful, please give it a ⭐ on [GitHub](https://github.com/ksindhi/uisuite)!","readmeFilename":"README.md"}