@tristan.stavast/blueprintx 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,97 @@
1
+ # BlueprintX
2
+
3
+ A modern, accessible Angular component library — standalone components, signal inputs, CSS-variable theming, and Angular CDK under the hood.
4
+
5
+ - **Angular 19+** · standalone · `OnPush` · signals
6
+ - **Runtime theming** — light/dark via CSS custom properties, swappable without a rebuild
7
+ - **Accessible by default** — native semantics, focus-visible rings, ARIA wiring
8
+
9
+ ## Installation
10
+
11
+ ```bash
12
+ npm install blueprintx @angular/cdk
13
+ ```
14
+
15
+ `@angular/cdk`, `@angular/core`, `@angular/common`, and `@angular/platform-browser` are peer dependencies.
16
+
17
+ ## Setup
18
+
19
+ Load a theme once, at your application root. Pick one:
20
+
21
+ ```scss
22
+ /* styles.scss */
23
+ @use 'blueprintx/themes/auto'; // light, switches to dark with the OS
24
+ // or 'blueprintx/themes/light' · 'blueprintx/themes/dark'
25
+ ```
26
+
27
+ Prefer plain CSS? Reference the prebuilt stylesheet instead:
28
+
29
+ ```json
30
+ // angular.json → architect.build.options.styles
31
+ ["node_modules/blueprintx/themes/auto.css", "src/styles.scss"]
32
+ ```
33
+
34
+ ## Usage
35
+
36
+ Components are standalone — import the ones you use directly:
37
+
38
+ ```ts
39
+ import { Component } from '@angular/core';
40
+ import { Button, Icon } from 'blueprintx';
41
+
42
+ @Component({
43
+ selector: 'app-demo',
44
+ imports: [Button, Icon],
45
+ template: `
46
+ <button bpx-button color="primary" (click)="save()">
47
+ <bpx-icon name="check" /> Save
48
+ </button>
49
+ <button bpx-button variant="soft" color="danger" [loading]="deleting()">Delete</button>
50
+ `,
51
+ })
52
+ export class Demo { /* ... */ }
53
+ ```
54
+
55
+ ### Button
56
+
57
+ | Input | Type | Default |
58
+ |---|---|---|
59
+ | `variant` | `solid \| soft \| outline \| ghost \| link` | `solid` |
60
+ | `color` | `primary \| neutral \| success \| warning \| danger \| info` | `primary` |
61
+ | `size` | `sm \| md \| lg` | `md` |
62
+ | `disabled` / `loading` / `fullWidth` / `iconOnly` | `boolean` | `false` |
63
+
64
+ Works on `<button>` or `<a>` — native semantics are preserved either way.
65
+
66
+ ### Icon
67
+
68
+ ```html
69
+ <bpx-icon name="warning" size="lg" label="Warning" />
70
+ ```
71
+
72
+ Register your own glyphs (24×24 viewBox, `currentColor`):
73
+
74
+ ```ts
75
+ import { IconRegistry } from 'blueprintx';
76
+ inject(IconRegistry).register('star', '<path d="…" fill="currentColor"/>');
77
+ ```
78
+
79
+ ## Theming
80
+
81
+ Every visual value is a CSS custom property (`--bpx-color-*`, `--bpx-space-*`, …).
82
+ Override any token under any scope:
83
+
84
+ ```css
85
+ .brand { --bpx-color-primary: #7c3aed; }
86
+ ```
87
+
88
+ Build a fully custom theme from the SCSS API:
89
+
90
+ ```scss
91
+ @use 'blueprintx/styles' as bpx;
92
+ :root { @include bpx.core-tokens; @include bpx.light-theme; }
93
+ ```
94
+
95
+ ## License
96
+
97
+ MIT