@eagami/ui 1.2.1 → 1.3.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 +14 -13
- package/fesm2022/eagami-ui.mjs +11423 -1897
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +1607 -742
package/README.md
CHANGED
|
@@ -9,10 +9,19 @@
|
|
|
9
9
|
<a href="https://github.com/mwiraszka/eagami/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@eagami/ui.svg" alt="license" /></a>
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
`@eagami/ui` is a lightweight, accessible Angular component library. Sensible defaults out of the box, with a fully customizable design to fit any brand.
|
|
13
13
|
|
|
14
14
|
**Live documentation:** [eagami.com/ui](https://eagami.com/ui)
|
|
15
15
|
|
|
16
|
+
## Design principles
|
|
17
|
+
|
|
18
|
+
- **Accessible.** Keyboard navigation, focus management, screen-reader support, and reduced-motion handling are built into every component.
|
|
19
|
+
- **Lightweight.** Each component imports independently and the bundle only ships what you use.
|
|
20
|
+
- **Themeable.** Fully customizable with [design tokens](https://eagami.com/ui/design-tokens) while maintaining a unified look across every page. Light and dark variants ship together and default to the user's system preference.
|
|
21
|
+
- **Localized.** Built-in component text ships in English, French, Greek, Polish, and Spanish.
|
|
22
|
+
- **Modern.** Regularly updated with the latest Angular features and modern web standards.
|
|
23
|
+
- **Unlocked.** Every component is plain Angular and CSS with no vendor lock-in, so the source can be read, copied, or modified like any other code in your project.
|
|
24
|
+
|
|
16
25
|
## Installation
|
|
17
26
|
|
|
18
27
|
```bash
|
|
@@ -31,27 +40,19 @@ Add the global stylesheet to your `angular.json`:
|
|
|
31
40
|
|
|
32
41
|
See the [Setup](https://eagami.com/ui/setup) page for fonts and your first component import.
|
|
33
42
|
|
|
34
|
-
## Features
|
|
35
|
-
|
|
36
|
-
- Standalone components; no `NgModule` boilerplate
|
|
37
|
-
- Signal-based APIs (`input()`, `model()`, `output()`)
|
|
38
|
-
- Tree-shakeable; ~70 KB gzipped for the whole library
|
|
39
|
-
- Themed via CSS custom properties on `:root`
|
|
40
|
-
- Dark mode automatic via `prefers-color-scheme`
|
|
41
|
-
- Accessible: ARIA, keyboard, focus management, reduced motion
|
|
42
|
-
- Localized in English, French, Greek, Polish, Spanish
|
|
43
|
-
- `ControlValueAccessor` on every form control
|
|
44
|
-
|
|
45
43
|
## What's included
|
|
46
44
|
|
|
47
45
|
- **Form controls**: Input, Textarea, Checkbox, Switch, Radio, Dropdown, Autocomplete, Date picker, Slider, Code input, Segmented, Avatar editor
|
|
48
46
|
- **Overlays**: Dialog, Drawer, Tooltip, Menu, Toast
|
|
49
47
|
- **Navigation**: Tabs, Breadcrumbs, Paginator, Accordion
|
|
50
48
|
- **Display**: Card, Badge, Tag, Alert, Avatar, Skeleton, Spinner, Progress bar, Empty state, Divider, Eagami wordmark, Data table
|
|
51
|
-
- **Icons**: 100 stroke-based SVG icon components (`<ea-icon-*>`)
|
|
52
49
|
|
|
53
50
|
Full API and live demos at [eagami.com/ui/components](https://eagami.com/ui/components).
|
|
54
51
|
|
|
52
|
+
## Icons
|
|
53
|
+
|
|
54
|
+
Standalone Angular components (`<ea-icon-*>`) that inherit their color and scale with `font-size`, so they render at any size. Derived from [Feather Icons](https://feathericons.com/) by [Cole Bemis](https://github.com/colebemis) and used under the [MIT License](https://github.com/feathericons/feather/blob/master/LICENSE). A small coloured brand-icon set is bundled for nominative use only. See [icons](https://eagami.com/ui/icons) for the full set and per-brand guideline links.
|
|
55
|
+
|
|
55
56
|
## Theming
|
|
56
57
|
|
|
57
58
|
Every visual property is a CSS custom property on `:root`, so overriding any token retunes the whole library. See [design tokens](https://eagami.com/ui/design-tokens) for the full reference and theming examples.
|