@kaufmann-lab/ui 0.1.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 ADDED
@@ -0,0 +1,64 @@
1
+ # @kaufmann-lab/ui
2
+
3
+ Shared Angular component library for the Kaufmann frontends. Consumed by Portal
4
+ LATAM, Portal OTD and Portal Star — including the Ionic mobile app, which is
5
+ still Angular underneath.
6
+
7
+ ## Requirements
8
+
9
+ Angular 22 and TypeScript ~6.0.3. Angular is a peer dependency, so the library
10
+ uses whatever Angular version the host application already has installed. All
11
+ consumers must be on the same Angular major.
12
+
13
+ ## Install
14
+
15
+ ```bash
16
+ pnpm add @kaufmann-lab/ui
17
+ ```
18
+
19
+ ## Usage
20
+
21
+ Every component is standalone — there is no module to import. Add the component
22
+ to the `imports` of whichever component uses it:
23
+
24
+ ```ts
25
+ import { Component } from '@angular/core';
26
+ import { Button } from '@kaufmann-lab/ui';
27
+
28
+ @Component({
29
+ selector: 'app-customers',
30
+ imports: [Button],
31
+ template: `<kf-button (click)="save()">Save</kf-button>`,
32
+ })
33
+ export class Customers {}
34
+ ```
35
+
36
+ Styles ship compiled inside each component with view encapsulation. Nothing to
37
+ import in `angular.json`, no global stylesheet to wire up.
38
+
39
+ ## Components
40
+
41
+ ### `<kf-button>`
42
+
43
+ Wraps a native `<button>`, so keyboard handling, focus and form submission work
44
+ as expected. `(click)` bubbles from the inner button — bind it on the host.
45
+
46
+ | Input | Type | Default | Notes |
47
+ | --- | --- | --- | --- |
48
+ | `variant` | `'primary' \| 'ghost'` | `'primary'` | |
49
+ | `disabled` | `boolean` | `false` | Bare attribute works: `<kf-button disabled>` |
50
+ | `type` | `'button' \| 'submit' \| 'reset'` | `'submit'` | Matches the native default |
51
+
52
+ ```html
53
+ <kf-button (click)="save()">Save</kf-button>
54
+ <kf-button variant="ghost">Cancel</kf-button>
55
+ <kf-button type="button" disabled>Unavailable</kf-button>
56
+ ```
57
+
58
+ Theming is done through a CSS custom property on the host:
59
+
60
+ ```css
61
+ kf-button {
62
+ --kf-button-accent: #00693e;
63
+ }
64
+ ```