@sonny-ui/core 0.1.0-alpha.2 → 0.1.0-alpha.3
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.
- package/README.md +98 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,30 +1,122 @@
|
|
|
1
1
|
# @sonny-ui/core
|
|
2
2
|
|
|
3
|
-
Angular
|
|
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
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
13
|
+
### Automatic (recommended)
|
|
14
|
+
|
|
7
15
|
```bash
|
|
8
16
|
ng add @sonny-ui/core
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
|
|
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
|
|
12
26
|
|
|
13
27
|
```bash
|
|
14
28
|
npm install @sonny-ui/core
|
|
15
29
|
```
|
|
16
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/src/styles/sonny-theme.css';
|
|
47
|
+
```
|
|
48
|
+
|
|
17
49
|
### Requirements
|
|
18
50
|
|
|
19
|
-
- Angular
|
|
20
|
-
- Angular CDK
|
|
51
|
+
- Angular >= 21.0.0
|
|
52
|
+
- Angular CDK >= 21.0.0
|
|
21
53
|
- Tailwind CSS v4
|
|
22
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
|
+
|
|
23
67
|
## Components
|
|
24
68
|
|
|
25
|
-
|
|
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
|
|
26
118
|
|
|
27
|
-
|
|
119
|
+
Generate components into your project:
|
|
28
120
|
|
|
29
121
|
```bash
|
|
30
122
|
ng generate @sonny-ui/core:component button
|
package/package.json
CHANGED