@eagami/ui 0.6.0 → 0.7.0
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 +63 -36
- package/fesm2022/eagami-ui.mjs +239 -155
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +2 -1
- package/types/eagami-ui.d.ts +51 -4
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<img src="
|
|
2
|
+
<img src="docs/images/eagami-header.png" alt="eagami design system — elegant web design." width="800" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
A lightweight, accessible Angular component library built on CSS custom properties. Ready to use out of the box — install, import, and start building.
|
|
@@ -91,7 +91,7 @@ Variants: `primary` | `secondary` | `ghost` | `danger`. Sizes: `sm` | `md` | `lg
|
|
|
91
91
|
</ea-button>
|
|
92
92
|
```
|
|
93
93
|
|
|
94
|
-
<img src="
|
|
94
|
+
<img src="docs/images/button.png" alt="Button component" width="560" />
|
|
95
95
|
|
|
96
96
|
---
|
|
97
97
|
|
|
@@ -108,7 +108,7 @@ Full `ControlValueAccessor` support. Types: `text` | `email` | `password` | `num
|
|
|
108
108
|
[(value)]="email" />
|
|
109
109
|
```
|
|
110
110
|
|
|
111
|
-
<img src="
|
|
111
|
+
<img src="docs/images/input.png" alt="Input component" width="560" />
|
|
112
112
|
|
|
113
113
|
---
|
|
114
114
|
|
|
@@ -125,7 +125,7 @@ Mirrors the Input API with `ControlValueAccessor`. Configurable `rows`, `resize`
|
|
|
125
125
|
[(value)]="message" />
|
|
126
126
|
```
|
|
127
127
|
|
|
128
|
-
<img src="
|
|
128
|
+
<img src="docs/images/textarea.png" alt="Textarea component" width="560" />
|
|
129
129
|
|
|
130
130
|
---
|
|
131
131
|
|
|
@@ -137,7 +137,7 @@ Mirrors the Input API with `ControlValueAccessor`. Configurable `rows`, `resize`
|
|
|
137
137
|
<ea-checkbox label="Accept terms and conditions" [(checked)]="accepted" />
|
|
138
138
|
```
|
|
139
139
|
|
|
140
|
-
<img src="
|
|
140
|
+
<img src="docs/images/checkbox.png" alt="Checkbox component" width="560" />
|
|
141
141
|
|
|
142
142
|
---
|
|
143
143
|
|
|
@@ -149,7 +149,7 @@ Toggle switch with `ControlValueAccessor`. Sizes: `sm` | `md` | `lg`.
|
|
|
149
149
|
<ea-switch label="Enable notifications" [(checked)]="notificationsOn" />
|
|
150
150
|
```
|
|
151
151
|
|
|
152
|
-
<img src="
|
|
152
|
+
<img src="docs/images/switch.png" alt="Switch component" width="560" />
|
|
153
153
|
|
|
154
154
|
---
|
|
155
155
|
|
|
@@ -165,7 +165,7 @@ Composite pattern with `ControlValueAccessor`. Supports `vertical` and `horizont
|
|
|
165
165
|
</ea-radio-group>
|
|
166
166
|
```
|
|
167
167
|
|
|
168
|
-
<img src="
|
|
168
|
+
<img src="docs/images/radio.png" alt="Radio group component" width="560" />
|
|
169
169
|
|
|
170
170
|
---
|
|
171
171
|
|
|
@@ -181,7 +181,7 @@ Select dropdown with `ControlValueAccessor` and keyboard navigation (Arrow keys,
|
|
|
181
181
|
[(value)]="selectedCountry" />
|
|
182
182
|
```
|
|
183
183
|
|
|
184
|
-
<img src="
|
|
184
|
+
<img src="docs/images/dropdown.png" alt="Dropdown component" width="560" />
|
|
185
185
|
|
|
186
186
|
---
|
|
187
187
|
|
|
@@ -200,7 +200,7 @@ Content container with variants: `elevated` | `outlined` | `filled`. Padding: `n
|
|
|
200
200
|
</ea-card>
|
|
201
201
|
```
|
|
202
202
|
|
|
203
|
-
<img src="
|
|
203
|
+
<img src="docs/images/card.png" alt="Card component" width="560" />
|
|
204
204
|
|
|
205
205
|
---
|
|
206
206
|
|
|
@@ -214,7 +214,7 @@ Image with initials or icon fallback. Sizes: `xs` | `sm` | `md` | `lg` | `xl`. S
|
|
|
214
214
|
<ea-avatar /> <!-- shows fallback user icon -->
|
|
215
215
|
```
|
|
216
216
|
|
|
217
|
-
<img src="
|
|
217
|
+
<img src="docs/images/avatar.png" alt="Avatar component" width="560" />
|
|
218
218
|
|
|
219
219
|
---
|
|
220
220
|
|
|
@@ -229,7 +229,7 @@ Canvas-based image editor with drag-and-drop upload, pan, zoom (slider + scroll
|
|
|
229
229
|
(cropped)="onCropped($event)" />
|
|
230
230
|
```
|
|
231
231
|
|
|
232
|
-
<img src="
|
|
232
|
+
<img src="docs/images/avatar-editor.png" alt="Avatar editor component" width="560" />
|
|
233
233
|
|
|
234
234
|
---
|
|
235
235
|
|
|
@@ -242,7 +242,7 @@ Semantic status indicators. Variants: `default` | `success` | `warning` | `error
|
|
|
242
242
|
<ea-badge variant="error">Failed</ea-badge>
|
|
243
243
|
```
|
|
244
244
|
|
|
245
|
-
<img src="
|
|
245
|
+
<img src="docs/images/badge.png" alt="Badge component" width="560" />
|
|
246
246
|
|
|
247
247
|
---
|
|
248
248
|
|
|
@@ -254,7 +254,7 @@ SVG loading indicator with `role="status"` for accessibility. Sizes: `sm` | `md`
|
|
|
254
254
|
<ea-spinner size="md" label="Loading data" />
|
|
255
255
|
```
|
|
256
256
|
|
|
257
|
-
<img src="
|
|
257
|
+
<img src="docs/images/spinner.png" alt="Spinner component" width="560" />
|
|
258
258
|
|
|
259
259
|
---
|
|
260
260
|
|
|
@@ -268,7 +268,7 @@ Visual separator with optional label. Orientation: `horizontal` | `vertical`.
|
|
|
268
268
|
<ea-divider orientation="vertical" />
|
|
269
269
|
```
|
|
270
270
|
|
|
271
|
-
<img src="
|
|
271
|
+
<img src="docs/images/divider.png" alt="Divider component" width="560" />
|
|
272
272
|
|
|
273
273
|
---
|
|
274
274
|
|
|
@@ -327,7 +327,7 @@ Add the toast outlet once in your root template:
|
|
|
327
327
|
<ea-toast />
|
|
328
328
|
```
|
|
329
329
|
|
|
330
|
-
<img src="
|
|
330
|
+
<img src="docs/images/toast.png" alt="Toast component" width="560" />
|
|
331
331
|
|
|
332
332
|
---
|
|
333
333
|
|
|
@@ -339,7 +339,7 @@ Verification code input with auto-advance, paste support, and arrow key navigati
|
|
|
339
339
|
<ea-code-input [(value)]="code" [length]="6" (completed)="verify()" />
|
|
340
340
|
```
|
|
341
341
|
|
|
342
|
-
<img src="
|
|
342
|
+
<img src="docs/images/code-input.png" alt="Code input component" width="560" />
|
|
343
343
|
|
|
344
344
|
---
|
|
345
345
|
|
|
@@ -354,7 +354,7 @@ Tab navigation with keyboard support (Arrow keys, Home/End). Variants: `underlin
|
|
|
354
354
|
</ea-tabs>
|
|
355
355
|
```
|
|
356
356
|
|
|
357
|
-
<img src="
|
|
357
|
+
<img src="docs/images/tabs.png" alt="Tabs component" width="560" />
|
|
358
358
|
|
|
359
359
|
---
|
|
360
360
|
|
|
@@ -367,7 +367,7 @@ Semantic alert banners. Variants: `default` | `success` | `warning` | `error` |
|
|
|
367
367
|
<ea-alert variant="error" [dismissible]="true">Something went wrong.</ea-alert>
|
|
368
368
|
```
|
|
369
369
|
|
|
370
|
-
<img src="
|
|
370
|
+
<img src="docs/images/alert.png" alt="Alert component" width="560" />
|
|
371
371
|
|
|
372
372
|
---
|
|
373
373
|
|
|
@@ -381,7 +381,7 @@ Loading placeholder with animated pulse. Variants: `text` | `circle` | `rect`. C
|
|
|
381
381
|
<ea-skeleton variant="rect" width="100%" height="120px" />
|
|
382
382
|
```
|
|
383
383
|
|
|
384
|
-
<img src="
|
|
384
|
+
<img src="docs/images/skeleton.png" alt="Skeleton component" width="560" />
|
|
385
385
|
|
|
386
386
|
---
|
|
387
387
|
|
|
@@ -396,7 +396,34 @@ Expandable content sections. Supports single or `multi` expand mode. Built-in ch
|
|
|
396
396
|
</ea-accordion>
|
|
397
397
|
```
|
|
398
398
|
|
|
399
|
-
<img src="
|
|
399
|
+
<img src="docs/images/accordion.png" alt="Accordion component" width="560" />
|
|
400
|
+
|
|
401
|
+
### Progress Bar
|
|
402
|
+
|
|
403
|
+
Linear progress indicator with determinate and indeterminate modes. Variants: `default` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`. Optional `label` and `showValue` display.
|
|
404
|
+
|
|
405
|
+
```html
|
|
406
|
+
<ea-progress-bar [value]="72" label="Uploading" [showValue]="true" />
|
|
407
|
+
<ea-progress-bar variant="success" [value]="100" />
|
|
408
|
+
<ea-progress-bar [indeterminate]="true" label="Processing…" />
|
|
409
|
+
```
|
|
410
|
+
|
|
411
|
+
<img src="docs/images/progress-bar.png" alt="Progress bar component" width="560" />
|
|
412
|
+
|
|
413
|
+
---
|
|
414
|
+
|
|
415
|
+
### Tag
|
|
416
|
+
|
|
417
|
+
Inline label with optional remove button. Variants: `default` | `primary` | `success` | `warning` | `error` | `info`. Sizes: `sm` | `md` | `lg`.
|
|
418
|
+
|
|
419
|
+
```html
|
|
420
|
+
<ea-tag variant="primary">TypeScript</ea-tag>
|
|
421
|
+
<ea-tag variant="success" [removable]="true" (removed)="onRemove()">Active</ea-tag>
|
|
422
|
+
```
|
|
423
|
+
|
|
424
|
+
<img src="docs/images/tag.png" alt="Tag component" width="560" />
|
|
425
|
+
|
|
426
|
+
---
|
|
400
427
|
|
|
401
428
|
## Icons
|
|
402
429
|
|
|
@@ -404,22 +431,22 @@ Built-in SVG icon components following the Feather icon style (24x24 viewBox, st
|
|
|
404
431
|
|
|
405
432
|
| Tag | Preview |
|
|
406
433
|
|---|---|
|
|
407
|
-
| `<ea-icon-alert-circle />` | <img src="
|
|
408
|
-
| `<ea-icon-camera />` | <img src="
|
|
409
|
-
| `<ea-icon-chevron-down />` | <img src="
|
|
410
|
-
| `<ea-icon-check />` | <img src="
|
|
411
|
-
| `<ea-icon-eye />` | <img src="
|
|
412
|
-
| `<ea-icon-eye-off />` | <img src="
|
|
413
|
-
| `<ea-icon-google />` | <img src="
|
|
414
|
-
| `<ea-icon-info />` | <img src="
|
|
415
|
-
| `<ea-icon-loader />` | <img src="
|
|
416
|
-
| `<ea-icon-minus />` | <img src="
|
|
417
|
-
| `<ea-icon-plus />` | <img src="
|
|
418
|
-
| `<ea-icon-rotate-ccw />` | <img src="
|
|
419
|
-
| `<ea-icon-trash />` | <img src="
|
|
420
|
-
| `<ea-icon-upload />` | <img src="
|
|
421
|
-
| `<ea-icon-user />` | <img src="
|
|
422
|
-
| `<ea-icon-x />` | <img src="
|
|
434
|
+
| `<ea-icon-alert-circle />` | <img src="docs/images/icons/alert-circle.png" width="48" height="48" alt="alert-circle" /> |
|
|
435
|
+
| `<ea-icon-camera />` | <img src="docs/images/icons/camera.png" width="48" height="48" alt="camera" /> |
|
|
436
|
+
| `<ea-icon-chevron-down />` | <img src="docs/images/icons/chevron-down.png" width="48" height="48" alt="chevron-down" /> |
|
|
437
|
+
| `<ea-icon-check />` | <img src="docs/images/icons/check.png" width="48" height="48" alt="check" /> |
|
|
438
|
+
| `<ea-icon-eye />` | <img src="docs/images/icons/eye.png" width="48" height="48" alt="eye" /> |
|
|
439
|
+
| `<ea-icon-eye-off />` | <img src="docs/images/icons/eye-off.png" width="48" height="48" alt="eye-off" /> |
|
|
440
|
+
| `<ea-icon-google />` | <img src="docs/images/icons/google.png" width="48" height="48" alt="google" /> |
|
|
441
|
+
| `<ea-icon-info />` | <img src="docs/images/icons/info.png" width="48" height="48" alt="info" /> |
|
|
442
|
+
| `<ea-icon-loader />` | <img src="docs/images/icons/loader.png" width="48" height="48" alt="loader" /> |
|
|
443
|
+
| `<ea-icon-minus />` | <img src="docs/images/icons/minus.png" width="48" height="48" alt="minus" /> |
|
|
444
|
+
| `<ea-icon-plus />` | <img src="docs/images/icons/plus.png" width="48" height="48" alt="plus" /> |
|
|
445
|
+
| `<ea-icon-rotate-ccw />` | <img src="docs/images/icons/rotate-ccw.png" width="48" height="48" alt="rotate-ccw" /> |
|
|
446
|
+
| `<ea-icon-trash />` | <img src="docs/images/icons/trash.png" width="48" height="48" alt="trash" /> |
|
|
447
|
+
| `<ea-icon-upload />` | <img src="docs/images/icons/upload.png" width="48" height="48" alt="upload" /> |
|
|
448
|
+
| `<ea-icon-user />` | <img src="docs/images/icons/user.png" width="48" height="48" alt="user" /> |
|
|
449
|
+
| `<ea-icon-x />` | <img src="docs/images/icons/x.png" width="48" height="48" alt="x" /> |
|
|
423
450
|
|
|
424
451
|
## Theming
|
|
425
452
|
|