{"_id":"@afkarbase/ui","_rev":"3-eec4d59072a5504d7146044c3a6cce8f","name":"@afkarbase/ui","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.0":{"name":"@afkarbase/ui","version":"0.1.0","keywords":["angular","material","material-design","material-3","ui","components","ui-library","angular-components","design-system","theme","accessibility","m3","typescript"],"author":{"name":"Afkarbase"},"license":"MIT","_id":"@afkarbase/ui@0.1.0","maintainers":[{"name":"emadideen","email":"emadideen@gmail.com"}],"homepage":"https://github.com/afkarbase/ui#readme","bugs":{"url":"https://github.com/afkarbase/ui/issues"},"dist":{"shasum":"e99b1d7cd1769799d3fdafa5d80944983ceb5b6d","tarball":"https://registry.npmjs.org/@afkarbase/ui/-/ui-0.1.0.tgz","fileCount":58,"integrity":"sha512-48lPoK+yC83JXSSNT41oi/nDdcpxT/djUTv6RoOhAWNrmYgWVtWCmQ4NM53Qx1eRFW/ddywt+ly9aqGg6XgtOQ==","signatures":[{"sig":"MEUCICNAv5Zp6gW7LhNJ7WWm+3j8VQwa921MZe7NsAOr9DGkAiEAx7m73XmPovPtI1H2AHND1jArwI4ltz3MvM2FESI2YXY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9305306},"module":"fesm2022/afkarbase-ui.mjs","exports":{".":{"types":"./types/afkarbase-ui.d.ts","default":"./fesm2022/afkarbase-ui.mjs"},"./charts":{"types":"./types/afkarbase-ui-charts.d.ts","default":"./fesm2022/afkarbase-ui-charts.mjs"},"./styles":{"css":"./styles/index.css","sass":"./styles/scss/index.scss","default":"./styles/index.css"},"./material":"./styles/material.css","./styles/*":{"css":"./styles/*.css","sass":"./styles/scss/*.scss","default":"./styles/*.css"},"./themes/dark":"./styles/themes/dark.css","./package.json":{"default":"./package.json"},"./themes/light":"./styles/themes/light.css","./themes/high-contrast":"./styles/themes/high-contrast.css"},"gitHead":"e61fa5c5302a8d04510b739c6d9583d9dea7f2fe","typings":"types/afkarbase-ui.d.ts","_npmUser":{"name":"emadideen","email":"emadideen@gmail.com"},"repository":{"url":"git+https://github.com/afkarbase/ui.git","type":"git"},"_npmVersion":"11.6.2","description":"Modern Angular Material Design 3 UI component library with comprehensive theming and accessibility features","directories":{},"sideEffects":false,"_nodeVersion":"24.13.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.0.0 || ^20.0.0","@angular/forms":"^19.0.0 || ^20.0.0","@angular/common":"^19.0.0 || ^20.0.0","@angular/animations":"^19.0.0 || ^20.0.0"},"peerDependenciesMeta":{"@angular/forms":{"optional":true},"@angular/animations":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.0_1770664745968_0.46140633595243186","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@afkarbase/ui","version":"0.3.0","keywords":["angular","material","material-design","material-3","ui","components","ui-library","angular-components","design-system","theme","accessibility","m3","typescript"],"author":{"name":"Afkarbase"},"license":"MIT","_id":"@afkarbase/ui@0.3.0","maintainers":[{"name":"emadideen","email":"emadideen@gmail.com"}],"homepage":"https://github.com/afkarbase/ui#readme","bugs":{"url":"https://github.com/afkarbase/ui/issues"},"dist":{"shasum":"cb085ff5d5b6816fc13e57bc66d3a2aea2c72ba1","tarball":"https://registry.npmjs.org/@afkarbase/ui/-/ui-0.3.0.tgz","fileCount":69,"integrity":"sha512-g6yl7oHdaNnS7myCBzmM+SwFzGTTAh9jARZP0r4Sv5PRHAnt47gVGw/9gpf27ODrfOxs+y13k9abumKkKMTyuQ==","signatures":[{"sig":"MEYCIQDk5a4m1jpC+8az1xi4/Jtg3XJy1alsFMetL4jw/0mP8gIhAL8gRCCa0cnKmGTdvNqajiGzQGl+PslY/72cbo19/PVu","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12051816},"module":"fesm2022/afkarbase-ui.mjs","exports":{".":{"types":"./types/afkarbase-ui.d.ts","default":"./fesm2022/afkarbase-ui.mjs"},"./charts":{"types":"./types/afkarbase-ui-charts.d.ts","default":"./fesm2022/afkarbase-ui-charts.mjs"},"./styles":{"css":"./styles/index.css","sass":"./styles/scss/index.scss","default":"./styles/index.css"},"./material":"./styles/material.css","./styles/*":{"css":"./styles/*.css","sass":"./styles/scss/*.scss","default":"./styles/*.css"},"./themes/dark":"./styles/themes/dark.css","./package.json":{"default":"./package.json"},"./themes/light":"./styles/themes/light.css","./themes/high-contrast":"./styles/themes/high-contrast.css"},"gitHead":"69b8a0c674e0518c71913b3072467ee37b281777","typings":"types/afkarbase-ui.d.ts","_npmUser":{"name":"emadideen","email":"emadideen@gmail.com"},"repository":{"url":"git+https://github.com/afkarbase/ui.git","type":"git"},"schematics":"./schematics/collection.json","_npmVersion":"10.9.7","description":"Modern Angular Material Design 3 UI component library with comprehensive theming and accessibility features","directories":{},"sideEffects":false,"_nodeVersion":"22.22.2","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^19.0.0 || ^20.0.0 || ^21.0.0","@angular/forms":"^19.0.0 || ^20.0.0 || ^21.0.0","@angular/common":"^19.0.0 || ^20.0.0 || ^21.0.0","@angular/router":"^19.0.0 || ^20.0.0 || ^21.0.0","@angular/animations":"^19.0.0 || ^20.0.0 || ^21.0.0"},"peerDependenciesMeta":{"@angular/forms":{"optional":true},"@angular/router":{"optional":true},"@angular/animations":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ui_0.3.0_1776950722399_0.3069644989378002","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@afkarbase/ui","version":"0.4.0","description":"Modern Angular Material Design 3 UI component library with comprehensive theming and accessibility features","author":{"name":"Afkarbase"},"license":"MIT","keywords":["angular","material","material-design","material-3","ui","components","ui-library","angular-components","design-system","theme","accessibility","m3","typescript"],"homepage":"https://github.com/afkarbase/ui#readme","repository":{"type":"git","url":"git+https://github.com/afkarbase/ui.git"},"bugs":{"url":"https://github.com/afkarbase/ui/issues"},"peerDependencies":{"@angular/core":"^22.0.0","@angular/common":"^22.0.0","@angular/platform-browser":"^22.0.0","@angular/forms":"^22.0.0","@angular/router":"^22.0.0"},"dependencies":{"dompurify":"^3.4.14","tslib":"^2.3.0"},"schematics":"./schematics/collection.json","types":"./types/afkarbase-ui.d.ts","sideEffects":["./styles/**/*.css","./styles/**/*.scss"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"exports":{"./styles":{"sass":"./styles/scss/index.scss","css":"./styles/index.css","default":"./styles/index.css"},"./styles/*.scss":{"sass":"./styles/scss/*.scss","default":"./styles/scss/*.scss"},"./styles/*.css":{"default":"./styles/*.css"},"./material":"./styles/material.css","./themes/light":"./styles/themes/light.css","./themes/dark":"./styles/themes/dark.css","./themes/high-contrast":"./styles/themes/high-contrast.css","./package.json":{"default":"./package.json"},".":{"types":"./types/afkarbase-ui.d.ts","default":"./fesm2022/afkarbase-ui.mjs"}},"module":"fesm2022/afkarbase-ui.mjs","typings":"types/afkarbase-ui.d.ts","type":"module","_id":"@afkarbase/ui@0.4.0","gitHead":"bdb3f69d4284b94fe659dd074b5f899a02c485e2","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-tvAEbgLlnblhMP8az2iSy3wsb/JD2o2Y/aJsmF87kcrlkHl9XRjXCjrSnaDPxHSv4DGblRBFBQFp/70yDzXqyQ==","shasum":"86ad011253471734baa262d628d44fe8441ab238","tarball":"https://registry.npmjs.org/@afkarbase/ui/-/ui-0.4.0.tgz","fileCount":116,"unpackedSize":14068298,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHQQ9CaccwuPcPmn3oo78QqtDz7Mq89VaqYr09KuwwNGAiAuKmIcQpP0klV9zx6LYeyLyzL6MyQH+n6RW0gs+Mnxsw=="}]},"_npmUser":{"name":"emadideen","email":"emadideen@gmail.com"},"directories":{},"maintainers":[{"name":"emadideen","email":"emadideen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.4.0_1788593230507_0.3730350261784996"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-09T19:19:05.913Z","modified":"2026-09-05T07:27:10.905Z","0.1.0":"2026-02-09T19:19:06.215Z","0.3.0":"2026-04-23T13:25:22.635Z","0.4.0":"2026-09-05T07:27:10.729Z"},"bugs":{"url":"https://github.com/afkarbase/ui/issues"},"author":{"name":"Afkarbase"},"license":"MIT","homepage":"https://github.com/afkarbase/ui#readme","keywords":["angular","material","material-design","material-3","ui","components","ui-library","angular-components","design-system","theme","accessibility","m3","typescript"],"repository":{"type":"git","url":"git+https://github.com/afkarbase/ui.git"},"description":"Modern Angular Material Design 3 UI component library with comprehensive theming and accessibility features","maintainers":[{"name":"emadideen","email":"emadideen@gmail.com"}],"readme":"# @afkarbase/ui\n\nAngular UI component library — Material Design 3 inspired, zero Angular Material dependency.\n\n**v0.2.0** · Angular 19/20/21 · MIT License\n\n---\n\n## Installation\n\n```bash\nnpm install @afkarbase/ui\n```\n\n**Required peer dependencies:**\n```bash\nnpm install @angular/core @angular/common\n```\n\n**Optional peer dependencies** (install if you use the corresponding features):\n```bash\nnpm install @angular/forms       # form components (inputs, select, checkbox…)\nnpm install @angular/animations  # animated transitions\nnpm install @angular/router      # breadcrumbs, navigation\n```\n\n---\n\n## Quick Start\n\n**1. Import the library styles** in your `angular.json` or global stylesheet:\n\n```scss\n// styles.scss\n@use '@afkarbase/ui/styles';         // base styles + component styles\n@use '@afkarbase/ui/themes/light';   // light theme tokens\n```\n\nFor dark theme, add the dark stylesheet or let ThemeService toggle it at runtime:\n\n```scss\n@use '@afkarbase/ui/themes/dark';\n```\n\n**2. Import the component** you need (all components are standalone):\n\n```typescript\nimport { UiButton } from '@afkarbase/ui';\n\n@Component({\n  imports: [UiButton],\n  // ...\n})\n```\n\n**3. Use it in your template:**\n\n```html\n<button uiButton=\"filled\">Get started</button>\n<button uiButton=\"outlined\" [loading]=\"saving\">Save</button>\n<a uiButton=\"text\" href=\"/docs\">Documentation</a>\n```\n\n---\n\n## Features\n\n| Feature | Description |\n|---|---|\n| **Zero Material dependency** | No `@angular/material` or `@angular/cdk` — no version conflicts |\n| **Standalone components** | Each component is fully standalone; import only what you use |\n| **CSS token theming** | Every visual property is a `--ui-*` CSS custom property |\n| **Light / Dark / High-contrast** | Built-in theme stylesheets, runtime switching via `ThemeService` |\n| **RTL & LTR** | Full bidirectional layout support via `UiDirectionality` |\n| **Density variants** | Compact, default, and comfortable density via CSS token overrides |\n| **Accessibility** | ARIA roles, keyboard navigation, focus rings, reduced-motion support |\n| **Signal-based services** | `ThemeService` and `UiDirectionality` expose Angular signals |\n| **Angular 19 / 20 / 21** | Tested across supported versions |\n| **Testing harnesses** | `UiButtonHarness`, `UiCheckboxHarness`, `UiInputHarness`, and more |\n\n---\n\n## Component Inventory\n\n### Actions\n\n| Component | Selector | Description |\n|---|---|---|\n| Button | `button[uiButton]`, `a[uiButton]` | Five variants: filled, outlined, text, elevated, tonal |\n| IconButton | `button[uiIconButton]`, `a[uiIconButton]` | Icon-only button with standard/filled/outlined/tonal variants |\n| FAB | `ui-fab` | Floating action button |\n| ButtonToggle | `ui-button-toggle` / `ui-button-toggle-group` | Toggle button group |\n| SegmentedButton | `ui-segmented-button` / `ui-segmented-button-group` | Segmented control |\n\n### Display\n\n| Component | Selector | Description |\n|---|---|---|\n| Card | `ui-card` | Surface container with header, content, actions, media slots |\n| Avatar | `ui-avatar` / `ui-avatar-group` | User avatars with image, initials, and icon support |\n| Icon | `ui-icon` | Inline SVG / ligature icon |\n| Badge | `ui-badge` | Numeric or dot indicator |\n| Chip | `ui-chip` / `ui-chip-set` / `ui-chip-listbox` | Input, filter, and suggestion chips |\n| Divider | `ui-divider` | Horizontal or vertical separator |\n| ProgressBar | `ui-progress-bar` | Determinate and indeterminate progress |\n| Timeline | `ui-timeline` / `ui-timeline-item` | Vertical timeline with custom icons |\n| ExpansionPanel | `ui-expansion-panel` / `ui-accordion` | Collapsible content panels |\n| Toolbar | `ui-toolbar` | App bar / page toolbar |\n\n### Form\n\n| Component | Selector | Description |\n|---|---|---|\n| FormField | `ui-form-field` | Wrapper providing label, hint, error, and prefix/suffix slots |\n| TextInput | `ui-text-input` | Single-line text field |\n| Textarea | `ui-textarea` | Multi-line text field with auto-resize |\n| PasswordInput | `ui-password-input` | Password field with show/hide toggle |\n| NumberInput | `ui-number-input` | Numeric input with stepper |\n| SearchInput | `ui-search-input` | Search field with clear button |\n| PhoneInput | `ui-phone-input` | Phone number input with country code |\n| Select | `ui-select` | Single and multi-select dropdown |\n| Autocomplete | `ui-autocomplete` | Combobox with filtered suggestions |\n| Checkbox | `ui-checkbox` | Material checkbox with indeterminate state |\n| Radio | `ui-radio-button` / `ui-radio-group` | Radio button group |\n| ToggleSwitch | `ui-toggle-switch` | On/off toggle (slide toggle) |\n| Slider | `ui-slider` | Single and range value slider |\n| WYSIWYG | `ui-wysiwyg` | Rich text editor |\n\n### Feedback & Overlays\n\n| Component | Selector / Service | Description |\n|---|---|---|\n| Alert | `ui-alert` | Inline alert with severity variants |\n| Tooltip | `[uiTooltip]` | Lightweight hover/focus tooltip |\n| Dialog | `UiDialog` service | Modal dialog with custom content |\n| Snackbar | `UiSnackBar` service | Brief dismissible notification |\n| Toast | `UiToastService` service | Stacked toast notifications |\n| BottomSheet | service | Bottom sheet overlay |\n| ProgressSpinner | `ui-progress-spinner` | Circular determinate/indeterminate spinner |\n| Skeleton | `ui-skeleton` | Content placeholder |\n| EmptyState | `ui-empty-state` | Zero-result / no-data illustration |\n\n### Navigation\n\n| Component | Selector | Description |\n|---|---|---|\n| Drawer | `ui-drawer-container` / `ui-drawer` | Side navigation drawer (modal and persistent) |\n| NavRail | `ui-nav-rail` / `ui-nav-rail-item` | Vertical navigation rail |\n| Menu | `ui-menu` / `[uiMenuTriggerFor]` | Contextual dropdown menu |\n| Breadcrumbs | `ui-breadcrumbs` | Page hierarchy breadcrumb trail |\n| Stepper | `ui-stepper` | Linear/non-linear wizard stepper |\n| Paginator | `ui-paginator` | Page navigation with size control |\n| Tree | `ui-tree` / `ui-tree-node` | Hierarchical tree view |\n\n### List\n\n| Component | Selector | Description |\n|---|---|---|\n| List | `ui-list` / `ui-list-item` | Structured list with leading/trailing slots |\n| SelectionList | `ui-selection-list` / `ui-selection-list-option` | Checkable list items |\n\n### Utilities & Extras\n\n| Component | Selector | Description |\n|---|---|---|\n| DatePicker | `ui-date` | Calendar date picker |\n| TimePicker | `ui-time` | Clock time picker |\n| ColorPicker | `ui-color-picker` | Color selection widget |\n| FileUpload | `ui-file-upload` | Drag-and-drop file input |\n| CommandPalette | `ui-command-palette` | Searchable command menu (Cmd+K style) |\n| CodeBlock | `ui-code` | Syntax-highlighted code block |\n| Popover | `ui-popover` / `[uiPopoverTriggerFor]` | Anchored floating content panel |\n| ErrorBoundary | `ui-error-boundary` | Catches and displays Angular render errors |\n| Chips | `ui-chip-input` / `ui-chip-option-listbox` | Tag input and multi-select chip list |\n\n### Directives\n\n| Directive | Selector | Description |\n|---|---|---|\n| Ripple | `[uiRipple]` | Material ink ripple effect |\n| TrapFocus | `[uiTrapFocus]` | Keyboard focus trap for overlays |\n| Autofocus | `[uiAutofocus]` | Focus element on render |\n| ClickOutside | `[uiClickOutside]` | Emit event on outside click |\n| LongPress | `[uiLongPress]` | Detect long-press gestures |\n| Drag & Drop | `[uiDrag]` / `[uiDropList]` / `[uiDragHandle]` | Drag-and-drop primitives |\n\n---\n\n## Theming\n\nThe library uses a three-layer CSS custom property system:\n\n```\ncore tokens (--ui-palette-*, --ui-spacing-*, …)\n    ↓\nsemantic tokens (--ui-sys-color-primary, --ui-sys-color-surface, …)\n    ↓\ncomponent tokens (--ui-button-container-color, …)\n```\n\n### Built-in themes\n\n```scss\n@use '@afkarbase/ui/styles';            // required: base + component styles\n@use '@afkarbase/ui/themes/light';      // light color scheme\n@use '@afkarbase/ui/themes/dark';       // dark color scheme\n@use '@afkarbase/ui/themes/high-contrast'; // high contrast\n```\n\n### Overriding tokens\n\nOverride at any level using CSS custom properties:\n\n```css\n:root {\n  /* Semantic tokens */\n  --ui-sys-color-primary: #1a73e8;\n  --ui-sys-color-secondary: #5f6368;\n\n  /* Component-level override */\n  --ui-button-container-color: #1a73e8;\n  --ui-button-label-text-color: #ffffff;\n\n  /* Density */\n  --ui-density: -1;   /* -2 compact | 0 default | 2 comfortable */\n}\n```\n\n### `ThemeService`\n\nInject `ThemeService` to control the active theme at runtime:\n\n```typescript\nimport { ThemeService } from '@afkarbase/ui';\n\n@Component({ /* … */ })\nexport class AppComponent {\n  private theme = inject(ThemeService);\n\n  // Switch mode\n  setDark()   { this.theme.setTheme('dark'); }\n  setLight()  { this.theme.setTheme('light'); }\n  setSystem() { this.theme.setTheme('system'); }\n  toggle()    { this.theme.toggleTheme(); }\n\n  // Dynamic source color (generates full M3 palette from one seed color)\n  setBrand(color: string) { this.theme.setSourceColor(color); }\n\n  // Accessibility\n  enableHighContrast() { this.theme.setHighContrast(true); }\n  enableReducedMotion() { this.theme.setReducedMotion(true); }\n\n  // Signals (use in templates with Angular's signal reactivity)\n  isDark      = this.theme.isDark;         // Signal<boolean>\n  currentMode = this.theme.currentTheme;   // Signal<'light' | 'dark' | 'system'>\n}\n```\n\n```html\n<button (click)=\"toggle()\">\n  {{ isDark() ? 'Switch to Light' : 'Switch to Dark' }}\n</button>\n```\n\n---\n\n## RTL Support\n\nAll components flip their layout automatically based on the document `dir` attribute. Use `UiDirectionality` to read or set direction at runtime:\n\n```typescript\nimport { UiDirectionality } from '@afkarbase/ui';\n\n@Component({ /* … */ })\nexport class AppComponent {\n  private dir = inject(UiDirectionality);\n\n  isRtl  = this.dir.isRtl;    // Signal<boolean>\n  dirVal = this.dir.direction; // Signal<'ltr' | 'rtl'>\n\n  setRtl() { this.dir.setDirection('rtl'); }\n  setLtr() { this.dir.setDirection('ltr'); }\n}\n```\n\nTo set the initial direction, add `dir=\"rtl\"` to your `<html>` element:\n\n```html\n<html lang=\"ar\" dir=\"rtl\">\n```\n\n`UiDirectionality` observes `<html dir=\"…\">` via `MutationObserver` and updates its signals when the attribute changes at runtime.\n\n---\n\n## Accessibility\n\n- All interactive components are keyboard operable and follow ARIA authoring practices.\n- Focus rings are visible by default and styled via `--ui-focus-ring-color` / `--ui-focus-ring-width`.\n- Reduced motion: set via `ThemeService.setReducedMotion(true)` or the OS preference is respected automatically.\n- Form components implement `ControlValueAccessor` with correct `aria-label`, `aria-describedby`, and `aria-invalid` wiring.\n- `LiveAnnouncer` service is available for dynamic screen-reader announcements.\n\n---\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for development setup, coding standards, and the PR workflow.\n\nIssues and feature requests: [github.com/afkarbase/ui/issues](https://github.com/afkarbase/ui/issues)\n\n---\n\n## License\n\nMIT © Afkarbase\n","readmeFilename":"README.md"}