@sonny-ui/core 0.1.0-alpha.12 → 0.1.0-alpha.13

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 (17) hide show
  1. package/README.md +133 -133
  2. package/fesm2022/sonny-ui-core.mjs +52 -122
  3. package/fesm2022/sonny-ui-core.mjs.map +1 -1
  4. package/package.json +1 -1
  5. package/schematics/ng-generate/component/index.js +6 -6
  6. package/schematics/ng-generate/component/schema.json +32 -32
  7. package/src/lib/button/button.directive.ts +1 -1
  8. package/src/lib/calendar/calendar.component.ts +3 -14
  9. package/src/lib/combobox/combobox.component.ts +2 -15
  10. package/src/lib/file-input/file-input.component.ts +2 -14
  11. package/src/lib/rating/rating.component.ts +11 -18
  12. package/src/lib/select/select.component.ts +2 -15
  13. package/src/lib/slider/slider.component.ts +13 -19
  14. package/src/lib/switch/switch.component.ts +8 -15
  15. package/src/lib/toggle/toggle.directive.ts +4 -15
  16. package/src/styles/sonny-theme.css +33 -0
  17. package/types/sonny-ui-core.d.ts +1 -16
package/README.md CHANGED
@@ -1,133 +1,133 @@
1
- # @sonny-ui/core
2
-
3
- Beautiful, accessible Angular components built with **Tailwind CSS v4** and **Signals**. Inspired by [shadcn/ui](https://ui.shadcn.com/).
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
10
-
11
- ## Installation
12
-
13
- ### Automatic (recommended)
14
-
15
- ```bash
16
- ng add @sonny-ui/core
17
- ```
18
-
19
- This installs the package, adds Tailwind CSS v4 if needed, imports `sonny-theme.css`, and provides `SonnyUI` in your app config.
20
-
21
- Options:
22
- - `--project` — target project name
23
- - `--theme` — theme to install (default: `light`)
24
-
25
- ### Manual
26
-
27
- ```bash
28
- npm install @sonny-ui/core
29
- ```
30
-
31
- Then in your `app.config.ts`:
32
-
33
- ```typescript
34
- import { provideSonnyUI } from '@sonny-ui/core';
35
-
36
- export const appConfig = {
37
- providers: [
38
- provideSonnyUI({ theme: 'light' }),
39
- ],
40
- };
41
- ```
42
-
43
- And import the theme in your global styles:
44
-
45
- ```css
46
- @import '@sonny-ui/core/styles/sonny-theme.css';
47
- ```
48
-
49
- ### Requirements
50
-
51
- - Angular >= 21.0.0
52
- - Angular CDK >= 21.0.0
53
- - Tailwind CSS v4
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
68
-
69
- | Component | Description |
70
- |-----------|-------------|
71
- | **Accordion** | Expandable sections, single/multi mode |
72
- | **Avatar** | User images with fallback initials |
73
- | **Badge** | Status labels — 6 variants, 3 sizes |
74
- | **Breadcrumb** | Navigation trail with dynamic segments |
75
- | **Button** | 6 variants, 4 sizes, loading state, link mode |
76
- | **Button Group** | Grouped actions, horizontal/vertical |
77
- | **Card** | Content containers — 4 variants, selectable |
78
- | **Checkbox** | Signal-based with two-way binding |
79
- | **Combobox** | Searchable dropdown with keyboard navigation |
80
- | **Input** | Text input — default/error/success variants |
81
- | **Loader** | Spinner, dots, and bars variants |
82
- | **Modal** | Dialog overlays using Angular CDK |
83
- | **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
- | **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 |
92
- | **Toggle** | Pressed state buttons for toolbars |
93
-
94
- ## Theming
95
-
96
- SonnyUI uses CSS custom properties for theming. Available tokens:
97
-
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
106
- ```
107
-
108
- Toggle themes at runtime with `ThemeService`:
109
-
110
- ```typescript
111
- import { ThemeService } from '@sonny-ui/core';
112
-
113
- themeService = inject(ThemeService);
114
- themeService.setTheme('dark');
115
- ```
116
-
117
- ## Schematics
118
-
119
- Generate components into your project:
120
-
121
- ```bash
122
- ng generate @sonny-ui/core:component button
123
- ```
124
-
125
- ## Links
126
-
127
- - [Documentation](https://coci-dev.github.io/sonny-ui/)
128
- - [GitHub](https://github.com/coci-dev/sonny-ui)
129
- - [Issues](https://github.com/coci-dev/sonny-ui/issues)
130
-
131
- ## License
132
-
133
- MIT
1
+ # @sonny-ui/core
2
+
3
+ Beautiful, accessible Angular components built with **Tailwind CSS v4** and **Signals**. Inspired by [shadcn/ui](https://ui.shadcn.com/).
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
10
+
11
+ ## Installation
12
+
13
+ ### Automatic (recommended)
14
+
15
+ ```bash
16
+ ng add @sonny-ui/core
17
+ ```
18
+
19
+ This installs the package, adds Tailwind CSS v4 if needed, imports `sonny-theme.css`, and provides `SonnyUI` in your app config.
20
+
21
+ Options:
22
+ - `--project` — target project name
23
+ - `--theme` — theme to install (default: `light`)
24
+
25
+ ### Manual
26
+
27
+ ```bash
28
+ npm install @sonny-ui/core
29
+ ```
30
+
31
+ Then in your `app.config.ts`:
32
+
33
+ ```typescript
34
+ import { provideSonnyUI } from '@sonny-ui/core';
35
+
36
+ export const appConfig = {
37
+ providers: [
38
+ provideSonnyUI({ theme: 'light' }),
39
+ ],
40
+ };
41
+ ```
42
+
43
+ And import the theme in your global styles:
44
+
45
+ ```css
46
+ @import '@sonny-ui/core/styles/sonny-theme.css';
47
+ ```
48
+
49
+ ### Requirements
50
+
51
+ - Angular >= 21.0.0
52
+ - Angular CDK >= 21.0.0
53
+ - Tailwind CSS v4
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
68
+
69
+ | Component | Description |
70
+ |-----------|-------------|
71
+ | **Accordion** | Expandable sections, single/multi mode |
72
+ | **Avatar** | User images with fallback initials |
73
+ | **Badge** | Status labels — 6 variants, 3 sizes |
74
+ | **Breadcrumb** | Navigation trail with dynamic segments |
75
+ | **Button** | 6 variants, 4 sizes, loading state, link mode |
76
+ | **Button Group** | Grouped actions, horizontal/vertical |
77
+ | **Card** | Content containers — 4 variants, selectable |
78
+ | **Checkbox** | Signal-based with two-way binding |
79
+ | **Combobox** | Searchable dropdown with keyboard navigation |
80
+ | **Input** | Text input — default/error/success variants |
81
+ | **Loader** | Spinner, dots, and bars variants |
82
+ | **Modal** | Dialog overlays using Angular CDK |
83
+ | **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
+ | **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 |
92
+ | **Toggle** | Pressed state buttons for toolbars |
93
+
94
+ ## Theming
95
+
96
+ SonnyUI uses CSS custom properties for theming. Available tokens:
97
+
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
106
+ ```
107
+
108
+ Toggle themes at runtime with `ThemeService`:
109
+
110
+ ```typescript
111
+ import { ThemeService } from '@sonny-ui/core';
112
+
113
+ themeService = inject(ThemeService);
114
+ themeService.setTheme('dark');
115
+ ```
116
+
117
+ ## Schematics
118
+
119
+ Generate components into your project:
120
+
121
+ ```bash
122
+ ng generate @sonny-ui/core:component button
123
+ ```
124
+
125
+ ## Links
126
+
127
+ - [Documentation](https://coci-dev.github.io/sonny-ui/)
128
+ - [GitHub](https://github.com/coci-dev/sonny-ui)
129
+ - [Issues](https://github.com/coci-dev/sonny-ui/issues)
130
+
131
+ ## License
132
+
133
+ MIT