@eagami/ui 0.5.0 → 0.6.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 +86 -17
- package/fesm2022/eagami-ui.mjs +580 -212
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +5 -6
- package/src/styles/tokens/_elevation.scss +14 -14
- package/src/styles/tokens/_motion.scss +20 -19
- package/src/styles/tokens/_shape.scss +11 -11
- package/src/styles/tokens/_spacing.scss +40 -40
- package/types/eagami-ui.d.ts +125 -3
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ Every component is standalone, signal-based, and fully themed via design tokens.
|
|
|
38
38
|
- **Dark mode built in** — automatic via `prefers-color-scheme`, no extra setup
|
|
39
39
|
- **Accessible** — ARIA attributes, keyboard navigation, focus management, and screen reader support throughout
|
|
40
40
|
- **Form-ready** — `ControlValueAccessor` on all form components (Input, Textarea, Checkbox, Switch, Radio, Dropdown)
|
|
41
|
-
- **Lightweight** —
|
|
41
|
+
- **Lightweight** — zero runtime dependencies beyond Angular
|
|
42
42
|
- **Tree-shakeable** — only the components you import end up in your bundle
|
|
43
43
|
|
|
44
44
|
## Installation
|
|
@@ -329,27 +329,97 @@ Add the toast outlet once in your root template:
|
|
|
329
329
|
|
|
330
330
|
<img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/toast.png" alt="Toast component" width="560" />
|
|
331
331
|
|
|
332
|
+
---
|
|
333
|
+
|
|
334
|
+
### Code Input
|
|
335
|
+
|
|
336
|
+
Verification code input with auto-advance, paste support, and arrow key navigation. Configurable `length` (default 6). Full `ControlValueAccessor` support.
|
|
337
|
+
|
|
338
|
+
```html
|
|
339
|
+
<ea-code-input [(value)]="code" [length]="6" (completed)="verify()" />
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
<img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/code-input.png" alt="Code input component" width="560" />
|
|
343
|
+
|
|
344
|
+
---
|
|
345
|
+
|
|
346
|
+
### Tabs
|
|
347
|
+
|
|
348
|
+
Tab navigation with keyboard support (Arrow keys, Home/End). Variants: `underline` | `filled`. Sizes: `sm` | `md` | `lg`.
|
|
349
|
+
|
|
350
|
+
```html
|
|
351
|
+
<ea-tabs activeTab="account" variant="underline">
|
|
352
|
+
<ea-tab value="account" label="Account">Account content</ea-tab>
|
|
353
|
+
<ea-tab value="security" label="Security">Security content</ea-tab>
|
|
354
|
+
</ea-tabs>
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
<img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/tabs.png" alt="Tabs component" width="560" />
|
|
358
|
+
|
|
359
|
+
---
|
|
360
|
+
|
|
361
|
+
### Alert
|
|
362
|
+
|
|
363
|
+
Semantic alert banners. Variants: `default` | `success` | `warning` | `error` | `info`. Optional `dismissible` close button with two-way `visible` binding.
|
|
364
|
+
|
|
365
|
+
```html
|
|
366
|
+
<ea-alert variant="success">Changes saved successfully.</ea-alert>
|
|
367
|
+
<ea-alert variant="error" [dismissible]="true">Something went wrong.</ea-alert>
|
|
368
|
+
```
|
|
369
|
+
|
|
370
|
+
<img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/alert.png" alt="Alert component" width="560" />
|
|
371
|
+
|
|
372
|
+
---
|
|
373
|
+
|
|
374
|
+
### Skeleton
|
|
375
|
+
|
|
376
|
+
Loading placeholder with animated pulse. Variants: `text` | `circle` | `rect`. Custom `width` and `height`. Respects `prefers-reduced-motion`.
|
|
377
|
+
|
|
378
|
+
```html
|
|
379
|
+
<ea-skeleton variant="text" width="200px" />
|
|
380
|
+
<ea-skeleton variant="circle" width="48px" height="48px" />
|
|
381
|
+
<ea-skeleton variant="rect" width="100%" height="120px" />
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
<img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/skeleton.png" alt="Skeleton component" width="560" />
|
|
385
|
+
|
|
386
|
+
---
|
|
387
|
+
|
|
388
|
+
### Accordion
|
|
389
|
+
|
|
390
|
+
Expandable content sections. Supports single or `multi` expand mode. Built-in chevron animation and disabled state.
|
|
391
|
+
|
|
392
|
+
```html
|
|
393
|
+
<ea-accordion>
|
|
394
|
+
<ea-accordion-item label="Section 1">Content for section 1</ea-accordion-item>
|
|
395
|
+
<ea-accordion-item label="Section 2">Content for section 2</ea-accordion-item>
|
|
396
|
+
</ea-accordion>
|
|
397
|
+
```
|
|
398
|
+
|
|
399
|
+
<img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/accordion.png" alt="Accordion component" width="560" />
|
|
400
|
+
|
|
332
401
|
## Icons
|
|
333
402
|
|
|
334
403
|
Built-in SVG icon components following the Feather icon style (24x24 viewBox, stroke-based, inherits `currentColor`):
|
|
335
404
|
|
|
336
405
|
| Tag | Preview |
|
|
337
406
|
|---|---|
|
|
338
|
-
| `<ea-icon-alert-circle />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/alert-circle.png" width="
|
|
339
|
-
| `<ea-icon-camera />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/camera.png" width="
|
|
340
|
-
| `<ea-icon-
|
|
341
|
-
| `<ea-icon-
|
|
342
|
-
| `<ea-icon-eye
|
|
343
|
-
| `<ea-icon-
|
|
344
|
-
| `<ea-icon-
|
|
345
|
-
| `<ea-icon-
|
|
346
|
-
| `<ea-icon-
|
|
347
|
-
| `<ea-icon-
|
|
348
|
-
| `<ea-icon-
|
|
349
|
-
| `<ea-icon-
|
|
350
|
-
| `<ea-icon-
|
|
351
|
-
| `<ea-icon-
|
|
352
|
-
| `<ea-icon-
|
|
407
|
+
| `<ea-icon-alert-circle />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/alert-circle.png" width="48" height="48" alt="alert-circle" /> |
|
|
408
|
+
| `<ea-icon-camera />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/camera.png" width="48" height="48" alt="camera" /> |
|
|
409
|
+
| `<ea-icon-chevron-down />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/chevron-down.png" width="48" height="48" alt="chevron-down" /> |
|
|
410
|
+
| `<ea-icon-check />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/check.png" width="48" height="48" alt="check" /> |
|
|
411
|
+
| `<ea-icon-eye />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/eye.png" width="48" height="48" alt="eye" /> |
|
|
412
|
+
| `<ea-icon-eye-off />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/eye-off.png" width="48" height="48" alt="eye-off" /> |
|
|
413
|
+
| `<ea-icon-google />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/google.png" width="48" height="48" alt="google" /> |
|
|
414
|
+
| `<ea-icon-info />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/info.png" width="48" height="48" alt="info" /> |
|
|
415
|
+
| `<ea-icon-loader />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/loader.png" width="48" height="48" alt="loader" /> |
|
|
416
|
+
| `<ea-icon-minus />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/minus.png" width="48" height="48" alt="minus" /> |
|
|
417
|
+
| `<ea-icon-plus />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/plus.png" width="48" height="48" alt="plus" /> |
|
|
418
|
+
| `<ea-icon-rotate-ccw />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/rotate-ccw.png" width="48" height="48" alt="rotate-ccw" /> |
|
|
419
|
+
| `<ea-icon-trash />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/trash.png" width="48" height="48" alt="trash" /> |
|
|
420
|
+
| `<ea-icon-upload />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/upload.png" width="48" height="48" alt="upload" /> |
|
|
421
|
+
| `<ea-icon-user />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/user.png" width="48" height="48" alt="user" /> |
|
|
422
|
+
| `<ea-icon-x />` | <img src="https://raw.githubusercontent.com/mwiraszka/eagami-design-system/main/docs/images/icons/x.png" width="48" height="48" alt="x" /> |
|
|
353
423
|
|
|
354
424
|
## Theming
|
|
355
425
|
|
|
@@ -381,7 +451,6 @@ See [`src/styles/tokens/`](src/styles/tokens/) for the full token reference.
|
|
|
381
451
|
| `@angular/common` | `^21.0.0` |
|
|
382
452
|
| `@angular/core` | `^21.0.0` |
|
|
383
453
|
| `@angular/forms` | `^21.0.0` |
|
|
384
|
-
| `rxjs` | `^7.0.0` |
|
|
385
454
|
|
|
386
455
|
## Development
|
|
387
456
|
|