@sonny-ui/core 0.1.0-alpha.16 → 0.1.0-alpha.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +109 -55
  2. package/fesm2022/sonny-ui-core.mjs +599 -3
  3. package/fesm2022/sonny-ui-core.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/src/lib/avatar-group/avatar-group.component.spec.ts +74 -0
  6. package/src/lib/avatar-group/avatar-group.component.ts +89 -0
  7. package/src/lib/avatar-group/index.ts +1 -0
  8. package/src/lib/number-input/index.ts +2 -0
  9. package/src/lib/number-input/number-input.component.spec.ts +151 -0
  10. package/src/lib/number-input/number-input.component.ts +153 -0
  11. package/src/lib/number-input/number-input.variants.ts +17 -0
  12. package/src/lib/popover/index.ts +6 -0
  13. package/src/lib/popover/popover.directives.spec.ts +147 -0
  14. package/src/lib/popover/popover.directives.ts +155 -0
  15. package/src/lib/tag-input/index.ts +2 -0
  16. package/src/lib/tag-input/tag-input.component.spec.ts +190 -0
  17. package/src/lib/tag-input/tag-input.component.ts +173 -0
  18. package/src/lib/tag-input/tag-input.variants.ts +31 -0
  19. package/types/sonny-ui-core.d.ts +147 -2
package/README.md CHANGED
@@ -2,11 +2,12 @@
2
2
 
3
3
  Beautiful, accessible Angular components built with **Tailwind CSS v4** and **Signals**. Inspired by [shadcn/ui](https://ui.shadcn.com/).
4
4
 
5
- - **Directive-based** — no wrapper components, applies directly to your elements
6
- - **Signal inputs** — reactive state with Angular's signal system
7
- - **Zoneless** — built for zoneless change detection
8
- - **Themeable** — CSS custom properties with light/dark mode support
9
- - **Accessible** — WAI-ARIA compliant interactive components
5
+ - **Directive & Component-based** — lightweight directives for simple elements, full components for complex interactions
6
+ - **Signal inputs** — `input()`, `model()`, `output()`, `computed()`, `linkedSignal()` — pure Angular 21 signals API
7
+ - **Zoneless** — built for `provideZonelessChangeDetection()`
8
+ - **Themeable** — CSS custom properties with light, dark, and corporate themes
9
+ - **Accessible** — WAI-ARIA compliant, keyboard navigation, screen reader support
10
+ - **Reactive Forms** — ControlValueAccessor on all form components
10
11
 
11
12
  ## Installation
12
13
 
@@ -18,10 +19,6 @@ ng add @sonny-ui/core
18
19
 
19
20
  This installs the package, adds Tailwind CSS v4 if needed, imports `sonny-theme.css`, and provides `SonnyUI` in your app config.
20
21
 
21
- Options:
22
- - `--project` — target project name
23
- - `--theme` — theme to install (default: `light`)
24
-
25
22
  ### Manual
26
23
 
27
24
  ```bash
@@ -31,11 +28,13 @@ npm install @sonny-ui/core
31
28
  Then in your `app.config.ts`:
32
29
 
33
30
  ```typescript
31
+ import { provideZonelessChangeDetection } from '@angular/core';
34
32
  import { provideSonnyUI } from '@sonny-ui/core';
35
33
 
36
34
  export const appConfig = {
37
35
  providers: [
38
- provideSonnyUI({ theme: 'light' }),
36
+ provideZonelessChangeDetection(),
37
+ provideSonnyUI({ defaultTheme: 'light' }),
39
38
  ],
40
39
  };
41
40
  ```
@@ -43,7 +42,8 @@ export const appConfig = {
43
42
  And import the theme in your global styles:
44
43
 
45
44
  ```css
46
- @import '@sonny-ui/core/styles/sonny-theme.css';
45
+ @import "tailwindcss";
46
+ @import "@sonny-ui/core/styles/sonny-theme.css";
47
47
  ```
48
48
 
49
49
  ### Requirements
@@ -52,60 +52,109 @@ And import the theme in your global styles:
52
52
  - Angular CDK >= 21.0.0
53
53
  - Tailwind CSS v4
54
54
 
55
- ## Usage
56
-
57
- ```typescript
58
- import { SnyButton } from '@sonny-ui/core';
59
-
60
- @Component({
61
- imports: [SnyButton],
62
- template: `<button snyButton variant="primary" size="md">Click me</button>`,
63
- })
64
- export class MyComponent {}
65
- ```
66
-
67
- ## Components
55
+ ## Components (60+)
68
56
 
57
+ ### Layout & Navigation
69
58
  | Component | Description |
70
59
  |-----------|-------------|
71
60
  | **Accordion** | Expandable sections, single/multi mode |
72
- | **Avatar** | User images with fallback initials |
73
- | **Badge** | Status labels — 6 variants, 3 sizes |
74
61
  | **Breadcrumb** | Navigation trail with dynamic segments |
75
- | **Button** | 6 variants, 4 sizes, loading state, link mode |
76
- | **Button Group** | Grouped actions, horizontal/vertical |
62
+ | **Navbar** | Responsive navigation bar with variants |
63
+ | **Tabs** | Tabbed content with triggers and panels |
64
+ | **Steps** | Step-by-step progress indicator |
65
+ | **Pagination** | Page navigation with sibling/boundary counts |
66
+ | **Divider** | Horizontal/vertical content separator |
67
+
68
+ ### Data Display
69
+ | Component | Description |
70
+ |-----------|-------------|
71
+ | **Table** | Default/striped/bordered, 3 densities, sticky header |
72
+ | **Data Table** | Full-featured: sorting, filtering, pagination, row selection, expansion, column visibility, custom cell templates, bulk actions, loading skeleton, JSON export |
77
73
  | **Card** | Content containers — 4 variants, selectable |
78
- | **Checkbox** | Signal-based with two-way binding |
79
- | **Combobox** | Searchable dropdown with keyboard navigation |
74
+ | **Badge** | Status labels — 6 variants, 3 sizes |
75
+ | **Avatar** | User images with fallback initials |
76
+ | **Avatar Group** | Stacked avatars with overflow counter, fallback initials |
77
+ | **Stat** | Statistic display with label/value/change |
78
+ | **Timeline** | Chronological event display |
79
+ | **List** | Styled list items |
80
+ | **Kbd** | Keyboard shortcut display |
81
+ | **Status** | Status indicator dots |
82
+ | **Indicator** | Positioned badge indicators |
83
+ | **Diff** | Side-by-side content comparison |
84
+
85
+ ### Form Controls
86
+ | Component | Description |
87
+ |-----------|-------------|
80
88
  | **Input** | Text input — default/error/success variants |
81
- | **Loader** | Spinner, dots, and bars variants |
82
- | **Modal** | Dialog overlays using Angular CDK |
89
+ | **Textarea** | Multi-line text input |
90
+ | **Select** | Dropdown selection with search |
91
+ | **Combobox** | Searchable dropdown with keyboard navigation |
92
+ | **Checkbox** | Signal-based with two-way binding |
83
93
  | **Radio** | Signal-based radio groups |
84
- | **Select** | Dropdown selection with options array |
85
- | **Sheet** | Slide-out panels from any side |
86
- | **Skeleton** | Loading placeholders — line/circular/rounded |
87
- | **Slider** | Range input with min/max/step |
88
94
  | **Switch** | Toggle switches with two-way binding |
89
- | **Table** | Default/striped/bordered, 3 densities, sticky header |
90
- | **Tabs** | Tabbed content with triggers and panels |
91
- | **Toast** | Notifications — 4 variants, positioned, with actions |
95
+ | **Slider** | Range input with min/max/step, drag support |
92
96
  | **Toggle** | Pressed state buttons for toolbars |
97
+ | **Rating** | Star rating with half-star support |
98
+ | **File Input** | File upload with drag & drop |
99
+ | **Fieldset** | Grouped form fields with legend |
100
+ | **Calendar** | Date grid with single/range selection, hover preview |
101
+ | **Date Picker** | Single date with calendar dropdown, clearable, min/max |
102
+ | **Date Range Picker** | Date range with dual calendar, preset ranges, responsive |
103
+ | **Color Picker** | Visual color selector with saturation panel, hue slider, HEX/RGB/HSL, presets, favorites, EyeDropper API |
104
+ | **Number Input** | Numeric stepper with +/- buttons, min/max/step, ArrowUp/Down |
105
+ | **OTP Input** | One-time password input with auto-focus, paste, mask, separator, status feedback |
106
+ | **Tag Input** | Tag/chip creator with Enter/comma, validation, maxTags, Backspace remove |
107
+ | **Validator** | Form validation message display |
108
+
109
+ ### Feedback & Overlays
110
+ | Component | Description |
111
+ |-----------|-------------|
112
+ | **Alert** | Callout messages — 5 variants, dismissible |
113
+ | **Toast** | Notifications — 4 variants, positioned, with actions |
114
+ | **Modal / Dialog** | Dialog overlays using Angular CDK |
115
+ | **Sheet** | Slide-out panels from any side |
116
+ | **Drawer** | Bottom/side drawer panels |
117
+ | **Tooltip** | Hover/focus tooltips |
118
+ | **Dropdown Menu** | Context menus with items, separators, labels |
119
+ | **Command Palette** | Searchable command menu with groups, keyboard nav, service-based |
120
+ | **Popover** | Floating panel with trigger, positioning, click-outside, escape |
93
121
 
94
- ## Theming
122
+ ### Visual
123
+ | Component | Description |
124
+ |-----------|-------------|
125
+ | **Button** | 6 variants, 4 sizes, loading state, link mode |
126
+ | **Button Group** | Grouped actions, horizontal/vertical |
127
+ | **Loader** | Spinner, dots, and bars variants |
128
+ | **Skeleton** | Loading placeholders — line/circular/rounded |
129
+ | **Progress** | Linear progress bar |
130
+ | **Radial Progress** | Circular progress indicator |
131
+ | **Carousel** | Image/content slider |
132
+ | **Chat Bubble** | Message bubbles for chat UI |
133
+ | **Dock** | macOS-style dock with hover scaling |
134
+ | **FAB** | Floating action button |
135
+ | **Link** | Styled anchor with variants |
95
136
 
96
- SonnyUI uses CSS custom properties for theming. Available tokens:
137
+ ## Usage
97
138
 
98
- ```css
99
- --sny-background, --sny-foreground,
100
- --sny-primary, --sny-primary-foreground,
101
- --sny-secondary, --sny-secondary-foreground,
102
- --sny-accent, --sny-accent-foreground,
103
- --sny-muted, --sny-muted-foreground,
104
- --sny-destructive, --sny-destructive-foreground,
105
- --sny-border, --sny-ring, --sny-radius
139
+ ```typescript
140
+ import { SnyButtonDirective, SnyCardDirective } from '@sonny-ui/core';
141
+
142
+ @Component({
143
+ imports: [SnyButtonDirective, SnyCardDirective],
144
+ template: `
145
+ <div snyCard padding="md">
146
+ <h3>My Card</h3>
147
+ <button snyBtn variant="default">Click me</button>
148
+ <button snyBtn variant="outline">Cancel</button>
149
+ </div>
150
+ `,
151
+ })
152
+ export class MyComponent {}
106
153
  ```
107
154
 
108
- Toggle themes at runtime with `ThemeService`:
155
+ ## Theming
156
+
157
+ Three built-in themes: **light**, **dark**, **corporate**. Toggle at runtime:
109
158
 
110
159
  ```typescript
111
160
  import { ThemeService } from '@sonny-ui/core';
@@ -114,18 +163,23 @@ themeService = inject(ThemeService);
114
163
  themeService.setTheme('dark');
115
164
  ```
116
165
 
117
- ## Schematics
166
+ CSS custom properties:
118
167
 
119
- Generate components into your project:
120
-
121
- ```bash
122
- ng generate @sonny-ui/core:component button
168
+ ```css
169
+ --sny-background, --sny-foreground,
170
+ --sny-primary, --sny-primary-foreground,
171
+ --sny-secondary, --sny-secondary-foreground,
172
+ --sny-accent, --sny-accent-foreground,
173
+ --sny-muted, --sny-muted-foreground,
174
+ --sny-destructive, --sny-destructive-foreground,
175
+ --sny-border, --sny-ring, --sny-radius
123
176
  ```
124
177
 
125
178
  ## Links
126
179
 
127
180
  - [Documentation](https://coci-dev.github.io/sonny-ui/)
128
181
  - [GitHub](https://github.com/coci-dev/sonny-ui)
182
+ - [npm](https://www.npmjs.com/package/@sonny-ui/core)
129
183
  - [Issues](https://github.com/coci-dev/sonny-ui/issues)
130
184
 
131
185
  ## License