@eagami/ui 1.1.1 → 1.2.1

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 (5) hide show
  1. package/README.md +38 -127
  2. package/fesm2022/eagami-ui.mjs +1028 -465
  3. package/fesm2022/eagami-ui.mjs.map +1 -1
  4. package/package.json +5 -4
  5. package/types/eagami-ui.d.ts +237 -15
package/README.md CHANGED
@@ -1,30 +1,17 @@
1
+ <h1 align="center">Eagami UI</h1>
2
+
1
3
  <p align="center">
2
- <img src="docs/images/eagami-header.png" alt="eagami design system — elegant web design" width="800" />
4
+ <img src="assets/logo.png" alt="Eagami UI logo" width="150" height="150" />
3
5
  </p>
4
6
 
5
7
  <p align="center">
6
8
  <a href="https://www.npmjs.com/package/@eagami/ui"><img src="https://img.shields.io/npm/v/@eagami/ui.svg" alt="npm version" /></a>
7
- <a href="https://github.com/mwiraszka/eagami-design-system/actions/workflows/ci.yml"><img src="https://github.com/mwiraszka/eagami-design-system/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
8
- <a href="https://github.com/mwiraszka/eagami-design-system/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@eagami/ui.svg" alt="license" /></a>
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>
9
10
  </p>
10
11
 
11
- A lightweight, accessible Angular component library built on CSS custom properties, with portable design system integration guides for Flutter and React ([see more](#framework-integration)). Ready to use out of the box — install, import, and start building.
12
-
13
- Every component is standalone, signal-based, and fully themed via design tokens. No wrapping modules, no complex setup, no runtime style conflicts. Designed to be AI-friendly with clear APIs, consistent patterns, and comprehensive documentation that makes it easy for both developers and AI assistants to work with.
14
-
15
- **Component reference and live examples:** [eagami.com/ui](https://eagami.com/ui)
16
-
17
- ## Features
12
+ A lightweight, accessible Angular component library built on CSS custom properties. Standalone, signal-based, fully themable, and localized in five languages out of the box.
18
13
 
19
- - **Zero configuration** — works immediately after install with sensible defaults
20
- - **Standalone components** — no `NgModule` boilerplate, just import and use
21
- - **Signal-based** — built on Angular's modern reactivity primitives (`input()`, `model()`, `output()`, `effect()`)
22
- - **Full theming via CSS custom properties** — override any design token on `:root` or scope overrides to individual components
23
- - **Dark mode built in** — automatic via `prefers-color-scheme`, no extra setup
24
- - **Accessible** — ARIA attributes, keyboard navigation, focus management, and screen reader support throughout
25
- - **Form-ready** — `ControlValueAccessor` on every form control (input, textarea, checkbox, switch, radio, dropdown, autocomplete, date picker, slider, code input, segmented)
26
- - **Tree-shakeable** — only the components you import end up in your bundle
27
- - **Tiny** — the entire library is **70 KB gzipped**, and only the components you import end up in your bundle
14
+ **Live documentation:** [eagami.com/ui](https://eagami.com/ui)
28
15
 
29
16
  ## Installation
30
17
 
@@ -32,136 +19,60 @@ Every component is standalone, signal-based, and fully themed via design tokens.
32
19
  npm install @eagami/ui
33
20
  # or
34
21
  pnpm add @eagami/ui
22
+ # or
23
+ yarn add @eagami/ui
35
24
  ```
36
25
 
37
- Add the global stylesheet to your `angular.json` (or import it in your root SCSS):
26
+ Add the global stylesheet to your `angular.json`:
38
27
 
39
28
  ```json
40
29
  "styles": ["node_modules/@eagami/ui/src/styles/eagami-ui.scss"]
41
30
  ```
42
31
 
43
- Load the fonts in your `index.html`:
44
-
45
- ```html
46
- <link rel="preconnect" href="https://fonts.googleapis.com" />
47
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
48
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Syne:wght@400;500;600;700&display=swap" />
49
- ```
50
-
51
- ## Quick start
32
+ See the [Setup](https://eagami.com/ui/setup) page for fonts and your first component import.
52
33
 
53
- ```typescript
54
- import { ButtonComponent } from '@eagami/ui';
55
-
56
- @Component({
57
- imports: [ButtonComponent],
58
- template: `<ea-button variant="primary" (clicked)="save()">Save</ea-button>`,
59
- })
60
- export class MyComponent {
61
- save() { /* ... */ }
62
- }
63
- ```
64
-
65
- No modules to register, no providers to configure. Every component works the same way — import it, drop it in your template.
34
+ ## Features
66
35
 
67
- > **Upgrading from v0.x?** See [MIGRATION.md](MIGRATION.md) for the full list of breaking changes and a find/replace table that covers most upgrades in one pass.
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
68
44
 
69
45
  ## What's included
70
46
 
71
- - **Form controls** — Input, Textarea, Checkbox, Switch, Radio, Dropdown, Autocomplete, Date picker, Slider, Code input, Segmented
72
- - **Overlays** — Dialog, Drawer, Tooltip, Menu, Toast
73
- - **Navigation** — Tabs, Breadcrumbs, Paginator, Accordion
74
- - **Display** — Card, Badge, Tag, Alert, Avatar, Skeleton, Spinner, Progress bar, Empty state, Divider, Eagami wordmark
75
- - **Data** — Data table
76
- - **Specialised** — Avatar editor
77
- - **Icons** — 52 stroke-based SVG icon components (`<ea-icon-*>`)
47
+ - **Form controls**: Input, Textarea, Checkbox, Switch, Radio, Dropdown, Autocomplete, Date picker, Slider, Code input, Segmented, Avatar editor
48
+ - **Overlays**: Dialog, Drawer, Tooltip, Menu, Toast
49
+ - **Navigation**: Tabs, Breadcrumbs, Paginator, Accordion
50
+ - **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-*>`)
78
52
 
79
- Full per-component documentation — props, events, examples, and accessibility notes — lives at **[eagami.com/ui](https://eagami.com/ui)**.
53
+ Full API and live demos at [eagami.com/ui/components](https://eagami.com/ui/components).
80
54
 
81
55
  ## Theming
82
56
 
83
- All visual properties are controlled through CSS custom properties defined on `:root`. Override any token to customise the entire library:
57
+ 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.
84
58
 
85
- ```css
86
- :root {
87
- --color-primary-600: #2563eb;
88
- --font-family-sans: 'Inter', sans-serif;
89
- --radius-md: 0.5rem;
90
- }
91
- ```
92
-
93
- Component-level overrides are available where useful:
94
-
95
- ```css
96
- .my-card {
97
- --ea-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
98
- --ea-button-font-weight: 600;
99
- }
100
- ```
59
+ ## Internationalization
101
60
 
102
- See [`src/styles/tokens/`](src/styles/tokens/) for the full token reference.
61
+ Built-in strings ship in English, French (France), Greek, Polish, and Spanish (Spain), with runtime switching via `EagamiI18nService`. See [internationalization](https://eagami.com/ui/i18n) for setup and per-string overrides.
103
62
 
104
63
  ## Framework integration
105
64
 
106
- `@eagami/ui` is an Angular library, but its design tokens, rules, and component API conventions are framework-agnostic. For projects that can't consume the Angular package directly yet still want to adhere to the same design system, two self-contained integration guides are provided — each copy-and-paste ready and written to be readable by both human developers and AI coding agents:
107
-
108
- - **[design-system-flutter.md](design-system-flutter.md)** — Dart `ThemeExtension`, `MaterialApp` wiring, reduced-motion handling, and widget API conventions for Flutter projects
109
- - **[design-system-react.md](design-system-react.md)** — CSS custom properties, TypeScript constants, and component prop conventions for React projects (plain CSS, CSS Modules, styled-components, emotion, or Tailwind)
110
-
111
- Both files contain the full token set, mandatory design rules, theme setup, usage patterns, component API conventions, and accessibility requirements. Copy the relevant file into the target project and follow it when building UI.
112
-
113
- ## Peer dependencies
114
-
115
- | Package | Version |
116
- |---------|---------|
117
- | `@angular/common` | `^21.0.0` |
118
- | `@angular/core` | `^21.0.0` |
119
- | `@angular/forms` | `^21.0.0` |
120
-
121
- ## Browser support
122
-
123
- Components are authored for modern evergreen browsers and follow Angular's default [browserslist](https://github.com/browserslist/browserslist) configuration. Specifically:
124
-
125
- - **Chrome / Edge** — last 2 stable versions
126
- - **Firefox** — last 2 stable versions, plus the current ESR
127
- - **Safari** — last 2 stable versions
128
- - **Modern mobile browsers** (iOS Safari, Chrome Android)
129
-
130
- The library is published as ES2022. Internet Explorer and pre-Chromium Edge are not supported.
131
-
132
- ### Runtime requirements
133
-
134
- | Tool | Minimum |
135
- |------|---------|
136
- | Node.js | 20.x (for build/dev tooling) |
137
- | Angular | 21.0 |
138
- | TypeScript | 5.5 |
139
-
140
- ## Development
141
-
142
- ```bash
143
- pnpm install # Install dependencies
144
- pnpm sandbox # Run sandbox dev app on http://localhost:4200
145
- pnpm storybook # Run Storybook on http://localhost:6006
146
- pnpm test # Run tests
147
- pnpm build # Build the library
148
- pnpm lint # Lint
149
- ```
150
-
151
- ## Icons
152
-
153
- The icon set is derived from [Feather Icons](https://feathericons.com/) (© Cole Bemis, MIT). Stroke style, dimensions, and most paths match Feather one-for-one. Browse the full set at [eagami.com/ui/icons](https://eagami.com/ui/icons).
154
-
155
- ### Brand icons
65
+ `@eagami/ui` is Angular-only, but its design tokens are framework-agnostic. Copy-and-paste guides for non-Angular targets:
156
66
 
157
- The following icons depict third-party trademarks and are provided **only for nominative use** — i.e. identifying the brand they represent in a UI (a "Sign in with Google" button, a "Share to Facebook" link, etc.). They are not licensed for general decorative use. Consumers are responsible for following each brand's guidelines and should consult them before shipping:
67
+ - **[eagami-ui-flutter.md](https://github.com/mwiraszka/eagami/blob/main/eagami-ui-flutter.md)** for Flutter projects
68
+ - **[eagami-ui-react.md](https://github.com/mwiraszka/eagami/blob/main/eagami-ui-react.md)** for React projects
158
69
 
159
- - **Facebook** — [Brand resources](https://about.meta.com/brand/resources/facebookapp/logo/)
160
- - **GitHub** — [Logos and usage](https://github.com/logos)
161
- - **Google** — [Sign-in branding guidelines](https://developers.google.com/identity/branding-guidelines)
162
- - **Microsoft** — [Trademark and brand guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks)
163
- - **X (Twitter)** — [Brand toolkit](https://about.x.com/en/who-we-are/brand-toolkit)
70
+ ## Compatibility
164
71
 
165
- ## License
72
+ | | |
73
+ |---|---|
74
+ | Angular | `^21.0.0` (peer dep) |
75
+ | Node | `>= 20` for build/dev tooling |
76
+ | Browsers | Last 2 stable versions of Chrome, Edge, Firefox (plus current ESR), Safari |
166
77
 
167
- MIT
78
+ > **Upgrading from v0.x?** See [MIGRATION.md](MIGRATION.md).