bizz-components 0.1.0 → 0.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.
Files changed (12) hide show
  1. package/README.md +168 -122
  2. package/package.json +20 -26
  3. package/web/index.d.mts +227 -0
  4. package/web/index.js +2272 -0
  5. package/fesm2022/bizz-components.mjs +0 -222
  6. package/fesm2022/bizz-components.mjs.map +0 -1
  7. package/index.d.ts +0 -100
  8. package/src/lib/themes/primitives.css +0 -78
  9. package/src/lib/themes/theme-dark.css +0 -117
  10. package/src/lib/themes/theme-light.css +0 -117
  11. package/src/lib/tokens/tokens.css +0 -85
  12. package/src/lib/tokens/typography.css +0 -105
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # Bizz Components
1
+ # bizz-components
2
2
 
3
- An Angular component library built as part of the Bizz Design System. Includes fully themed UI components, design tokens, and Web Components (Angular Elements) support.
3
+ A framework-agnostic web component library built with [Lit](https://lit.dev). Ships native Custom Elements - use `<bizz-button>`, `<bizz-card>`, `<bizz-tag>`, `<bizz-input>`, and `<bizz-textarea>` in React, Vue, Angular, Svelte, or plain HTML.
4
4
 
5
- ---
5
+ Design tokens (colors, spacing, typography) are self-injected on first mount - no global CSS import required.
6
6
 
7
7
  ## Installation
8
8
 
@@ -10,199 +10,155 @@ An Angular component library built as part of the Bizz Design System. Includes f
10
10
  npm install bizz-components
11
11
  ```
12
12
 
13
- ### Peer dependencies
14
-
15
- ```bash
16
- npm install @angular/core @angular/common
17
- ```
18
-
19
- ---
13
+ ## Quick start
20
14
 
21
- ## Setup
15
+ Register all components once at your app's entry point:
22
16
 
23
- ### 1. Add the global styles
24
-
25
- In your project's `angular.json`, add the base tokens and typography to the `styles` array:
26
-
27
- ```json
28
- "styles": [
29
- "node_modules/bizz-components/tokens.css",
30
- "node_modules/bizz-components/typography.css"
31
- ]
17
+ ```js
18
+ import 'bizz-components/web';
32
19
  ```
33
20
 
34
- ### 2. Add the font
35
-
36
- In your `index.html`:
21
+ Then use the elements anywhere in your markup:
37
22
 
38
23
  ```html
39
- <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
40
- ```
24
+ <bizz-button variant="primary">Click me</bizz-button>
41
25
 
42
- ---
43
-
44
- ## Theming
45
-
46
- Apply a theme class to your root element:
26
+ <bizz-card elevation="raised">
27
+ <div slot="card-header"><h4>Title</h4></div>
28
+ <p>Card body content.</p>
29
+ <div slot="card-footer">Footer</div>
30
+ </bizz-card>
47
31
 
48
- ```html
49
- <html class="bizz-theme-light"> <!-- default -->
50
- <html class="bizz-theme-dark"> <!-- dark mode -->
32
+ <bizz-tag color="success">Published</bizz-tag>
51
33
  ```
52
34
 
53
- ### Customize colors
35
+ ### Font
54
36
 
55
- Override any of the 5 base colors — all shades regenerate automatically:
37
+ The library uses IBM Plex Sans. Add it to your `<head>`:
56
38
 
57
- ```css
58
- :root {
59
- --bizz-primary: #7c3aed;
60
- --bizz-secondary: #374151;
61
- --bizz-success: #059669;
62
- --bizz-warning: #d97706;
63
- --bizz-error: #dc2626;
64
- }
39
+ ```html
40
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
65
41
  ```
66
42
 
67
43
  ---
68
44
 
69
45
  ## Components
70
46
 
71
- ### BizzButton
47
+ ### `<bizz-button>`
72
48
 
73
49
  ```html
74
- <bizz-button variant="primary" size="md" (clicked)="onClick()">
75
- Click me
76
- </bizz-button>
50
+ <bizz-button variant="primary" size="md">Label</bizz-button>
51
+ <bizz-button variant="secondary" loading>Saving…</bizz-button>
52
+ <bizz-button variant="danger" full-width>Delete</bizz-button>
53
+ <bizz-button variant="warning">Caution</bizz-button>
54
+ <bizz-button variant="success">Confirm</bizz-button>
77
55
  ```
78
56
 
79
- | Input | Type | Default | Description |
57
+ | Attribute | Type | Default | Description |
80
58
  |---|---|---|---|
81
- | `variant` | `primary \| secondary \| disabled \| danger` | `primary` | Visual style |
59
+ | `variant` | `primary \| secondary \| danger \| warning \| success` | `primary` | Visual style |
82
60
  | `size` | `sm \| md \| lg` | `md` | Button size |
61
+ | `type` | `button \| submit \| reset` | `button` | Native button type |
83
62
  | `disabled` | `boolean` | `false` | Disables the button |
84
- | `loading` | `boolean` | `false` | Shows spinner, blocks clicks |
85
- | `fullWidth` | `boolean` | `false` | Stretches to container width |
63
+ | `loading` | `boolean` | `false` | Shows spinner, blocks interaction |
64
+ | `full-width` | `boolean` | `false` | Stretches to container width |
86
65
 
87
- | Output | Description |
88
- |---|---|
89
- | `clicked` | Emits `MouseEvent` on click |
66
+ | Event | Detail | Description |
67
+ |---|---|---|
68
+ | `bizz-click` | `MouseEvent` | Fired on click (not fired when disabled/loading) |
90
69
 
91
70
  ---
92
71
 
93
- ### BizzCard
72
+ ### `<bizz-card>`
94
73
 
95
74
  ```html
96
- <bizz-card elevation="raised" [clickable]="true">
97
- <div card-media><img src="..." /></div>
98
- <div card-header>
99
- <h4 class="bizz-h4">Title</h4>
75
+ <bizz-card elevation="raised" padding="md" clickable>
76
+ <img slot="card-media" src="cover.jpg" alt="Cover" />
77
+ <div slot="card-header">
78
+ <h4 class="bizz-h4">Project title</h4>
79
+ </div>
80
+ <p class="bizz-body">Description goes here.</p>
81
+ <div slot="card-footer">
82
+ <bizz-tag color="primary" size="sm">TypeScript</bizz-tag>
100
83
  </div>
101
- Body content goes here
102
- <div card-footer>Footer actions</div>
103
84
  </bizz-card>
104
85
  ```
105
86
 
106
- | Input | Type | Default | Description |
87
+ | Attribute | Type | Default | Description |
107
88
  |---|---|---|---|
108
89
  | `elevation` | `flat \| raised` | `raised` | Shadow depth |
109
90
  | `padding` | `none \| sm \| md \| lg` | `md` | Inner padding |
110
- | `clickable` | `boolean` | `false` | Hover lift + focus ring |
91
+ | `clickable` | `boolean` | `false` | Hover lift + focus ring, adds `role="button"` |
111
92
 
112
- **Slots:** `[card-media]`, `[card-header]`, default body, `[card-footer]`
93
+ **Slots:** `card-media`, `card-header`, default body, `card-footer`
113
94
 
114
95
  ---
115
96
 
116
- ### BizzTag
97
+ ### `<bizz-tag>`
117
98
 
118
99
  ```html
119
- <bizz-tag color="primary" size="md" [dismissible]="true" (dismissed)="remove()">
120
- Angular
121
- </bizz-tag>
100
+ <bizz-tag color="primary">TypeScript</bizz-tag>
101
+ <bizz-tag color="success" size="sm" dismissible>Published</bizz-tag>
122
102
  ```
123
103
 
124
- | Input | Type | Default | Description |
104
+ | Attribute | Type | Default | Description |
125
105
  |---|---|---|---|
126
106
  | `color` | `primary \| secondary \| success \| warning \| error` | `primary` | Semantic color |
127
107
  | `size` | `sm \| md` | `md` | Tag size |
128
108
  | `dismissible` | `boolean` | `false` | Shows close button |
129
109
 
130
- | Output | Description |
131
- |---|---|
132
- | `dismissed` | Emits when close button is clicked |
110
+ | Event | Detail | Description |
111
+ |---|---|---|
112
+ | `bizz-dismissed` | - | Fired when the close button is clicked |
133
113
 
134
114
  ---
135
115
 
136
- ### BizzInput
116
+ ### `<bizz-input>`
137
117
 
138
118
  ```html
139
119
  <bizz-input
140
120
  label="Email"
141
121
  placeholder="you@example.com"
142
122
  type="email"
143
- helperText="We'll never share your email."
144
- [required]="true"
145
- [(ngModel)]="email"
146
- />
123
+ helper-text="We'll never share your email."
124
+ required
125
+ ></bizz-input>
147
126
  ```
148
127
 
149
- Implements `ControlValueAccessor` — works with `ngModel` and reactive forms.
150
-
151
- | Input | Type | Default | Description |
128
+ | Attribute | Type | Default | Description |
152
129
  |---|---|---|---|
153
130
  | `label` | `string` | `''` | Field label |
154
131
  | `placeholder` | `string` | `''` | Placeholder text |
155
132
  | `type` | `text \| email \| password \| number \| tel \| url \| search` | `text` | Input type |
156
- | `helperText` | `string` | `''` | Helper text below field |
157
- | `errorText` | `string` | `''` | Error message (shows red border) |
158
- | `disabled` | `boolean` | `false` | Disables the input |
159
- | `required` | `boolean` | `false` | Red border on blur if empty |
133
+ | `value` | `string` | `''` | Current value |
134
+ | `helper-text` | `string` | `''` | Helper text below the field |
135
+ | `error-text` | `string` | `''` | Error message (shown after blur) |
136
+ | `disabled` | `boolean` | `false` | Disables the field |
137
+ | `required` | `boolean` | `false` | Marks as required, validates on blur |
160
138
 
161
- ---
139
+ **Slots:** `prefix`, `suffix` (for icons inside the field)
162
140
 
163
- ### BizzTextarea
164
-
165
- Same API as `BizzInput`, plus:
166
-
167
- | Input | Type | Default | Description |
168
- |---|---|---|---|
169
- | `rows` | `number` | `4` | Initial row count |
170
- | `autoResize` | `boolean` | `false` | Grows with content |
141
+ | Event | Detail | Description |
142
+ |---|---|---|
143
+ | `bizz-input` | `string` | Fired on every keystroke |
144
+ | `bizz-blur` | - | Fired on blur |
171
145
 
172
146
  ---
173
147
 
174
- ### BizzTimeline + BizzTimelineItem
148
+ ### `<bizz-textarea>`
175
149
 
176
- ```html
177
- <bizz-timeline>
178
- <bizz-timeline-item
179
- title="Senior Developer"
180
- subtitle="Acme Corp · Full-time"
181
- date="2023 — Present"
182
- status="active"
183
- >
184
- <p class="bizz-body-sm">Description...</p>
185
- <div timeline-tags>
186
- <bizz-tag color="primary" size="sm">Angular</bizz-tag>
187
- </div>
188
- </bizz-timeline-item>
189
- </bizz-timeline>
190
- ```
191
-
192
- | Input | Type | Default | Description |
193
- |---|---|---|---|
194
- | `title` | `string` | `''` | Role or event title |
195
- | `subtitle` | `string` | `''` | Company or secondary info |
196
- | `date` | `string` | `''` | Date range label |
197
- | `status` | `active \| completed \| default` | `default` | Dot style |
150
+ Same API as `<bizz-input>`, plus:
198
151
 
199
- **Slots:** default body, `[timeline-tags]`
152
+ | Attribute | Type | Default | Description |
153
+ |---|---|---|---|
154
+ | `rows` | `number` | `4` | Initial row count |
155
+ | `auto-resize` | `boolean` | `false` | Grows with content |
200
156
 
201
157
  ---
202
158
 
203
159
  ## Typography
204
160
 
205
- Typography is CSS utility classes — apply to any HTML element:
161
+ Typography classes apply to any HTML element outside the components:
206
162
 
207
163
  ```html
208
164
  <h1 class="bizz-h1">Heading 1</h1>
@@ -229,21 +185,111 @@ Typography is CSS utility classes — apply to any HTML element:
229
185
 
230
186
  ---
231
187
 
188
+ ## Theming
189
+
190
+ ### Dark mode
191
+
192
+ Wrap any section in `.bizz-theme-dark`:
193
+
194
+ ```html
195
+ <div class="bizz-theme-dark">
196
+ <bizz-button variant="primary">Dark button</bizz-button>
197
+ </div>
198
+ ```
199
+
200
+ ### Custom brand colors
201
+
202
+ Override the 5 base color variables - all shades regenerate automatically:
203
+
204
+ ```css
205
+ :root {
206
+ --bizz-primary: #7c3aed;
207
+ --bizz-secondary: #374151;
208
+ --bizz-success: #059669;
209
+ --bizz-warning: #d97706;
210
+ --bizz-error: #dc2626;
211
+ }
212
+ ```
213
+
214
+ ---
215
+
216
+ ## Framework usage
217
+
218
+ ### React / Next.js
219
+
220
+ ```tsx
221
+ import 'bizz-components/web';
222
+
223
+ export default function Page() {
224
+ return (
225
+ <bizz-button
226
+ variant="primary"
227
+ onBizzClick={(e) => console.log(e.detail)}
228
+ >
229
+ Click me
230
+ </bizz-button>
231
+ );
232
+ }
233
+ ```
234
+
235
+ For TypeScript prop types, add to your project:
236
+
237
+ ```ts
238
+ import type { BizzButtonElement } from 'bizz-components/web';
239
+
240
+ declare global {
241
+ namespace JSX {
242
+ interface IntrinsicElements {
243
+ 'bizz-button': Partial<BizzButtonElement> & React.HTMLAttributes<BizzButtonElement>;
244
+ }
245
+ }
246
+ }
247
+ ```
248
+
249
+ ### Vue
250
+
251
+ ```vue
252
+ <script setup>
253
+ import 'bizz-components/web';
254
+ </script>
255
+
256
+ <template>
257
+ <bizz-button variant="primary" @bizz-click="handleClick">
258
+ Click me
259
+ </bizz-button>
260
+ </template>
261
+ ```
262
+
263
+ ### Plain HTML
264
+
265
+ ```html
266
+ <script type="module">
267
+ import 'https://unpkg.com/bizz-components/web/index.js';
268
+ </script>
269
+
270
+ <bizz-button variant="primary">Click me</bizz-button>
271
+ ```
272
+
273
+ ---
274
+
232
275
  ## Building
233
276
 
234
277
  ```bash
235
- ng build bizz-components
278
+ npm run build:web
236
279
  ```
237
280
 
281
+ Outputs to `dist/bizz-components/web/`.
282
+
238
283
  ## Publishing
239
284
 
240
285
  ```bash
241
- cd dist/bizz-components
242
- npm publish --access public
286
+ npm run release
243
287
  ```
244
288
 
289
+ This builds the library and publishes the `dist/bizz-components/` directory to npm.
290
+
245
291
  ---
246
292
 
247
293
  ## License
248
294
 
249
- MIT © Beatriz Nascimento
295
+ MIT © Beatriz Nascimento 🦊
package/package.json CHANGED
@@ -1,36 +1,30 @@
1
1
  {
2
2
  "name": "bizz-components",
3
- "version": "0.1.0",
4
- "description": "Bizz Design System — Angular component library with theming",
3
+ "version": "0.3.0",
4
+ "description": "Framework-agnostic web component library - use <bizz-button>, <bizz-card>, <bizz-tag>, <bizz-input>, <bizz-textarea> in any framework",
5
5
  "author": "Beatriz Nascimento",
6
6
  "license": "MIT",
7
7
  "keywords": [
8
8
  "design-system",
9
- "components",
10
- "angular",
9
+ "web-components",
10
+ "custom-elements",
11
+ "lit",
11
12
  "theming",
12
- "storybook",
13
- "web-components"
13
+ "react",
14
+ "vue",
15
+ "angular"
14
16
  ],
15
- "peerDependencies": {
16
- "@angular/common": "^20.0.0",
17
- "@angular/core": "^20.0.0"
18
- },
19
- "dependencies": {
20
- "tslib": "^2.3.0"
21
- },
22
- "sideEffects": [
23
- "*.css"
24
- ],
25
- "module": "fesm2022/bizz-components.mjs",
26
- "typings": "index.d.ts",
27
17
  "exports": {
28
- "./package.json": {
29
- "default": "./package.json"
30
- },
31
- ".": {
32
- "types": "./index.d.ts",
33
- "default": "./fesm2022/bizz-components.mjs"
18
+ "./web": {
19
+ "types": "./web/index.d.mts",
20
+ "default": "./web/index.js"
34
21
  }
35
- }
36
- }
22
+ },
23
+ "files": [
24
+ "web"
25
+ ],
26
+ "sideEffects": [
27
+ "./src/web/tokens.ts",
28
+ "./web/index.js"
29
+ ]
30
+ }
package/web/index.d.mts ADDED
@@ -0,0 +1,227 @@
1
+ import * as lit_html from 'lit-html';
2
+ import * as lit from 'lit';
3
+ import { LitElement } from 'lit';
4
+
5
+ type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'warning' | 'success';
6
+ type ButtonSize = 'sm' | 'md' | 'lg';
7
+ type ButtonType = 'button' | 'submit' | 'reset';
8
+ declare class BizzButtonElement extends LitElement {
9
+ static styles: lit.CSSResult;
10
+ static properties: {
11
+ variant: {
12
+ type: StringConstructor;
13
+ reflect: boolean;
14
+ };
15
+ size: {
16
+ type: StringConstructor;
17
+ reflect: boolean;
18
+ };
19
+ type: {
20
+ type: StringConstructor;
21
+ };
22
+ disabled: {
23
+ type: BooleanConstructor;
24
+ };
25
+ loading: {
26
+ type: BooleanConstructor;
27
+ reflect: boolean;
28
+ };
29
+ fullWidth: {
30
+ type: BooleanConstructor;
31
+ attribute: string;
32
+ reflect: boolean;
33
+ };
34
+ };
35
+ variant: ButtonVariant;
36
+ size: ButtonSize;
37
+ type: ButtonType;
38
+ disabled: boolean;
39
+ loading: boolean;
40
+ fullWidth: boolean;
41
+ constructor();
42
+ private get isDisabled();
43
+ private handleClick;
44
+ render(): lit_html.TemplateResult<1>;
45
+ }
46
+ declare global {
47
+ interface HTMLElementTagNameMap {
48
+ 'bizz-button': BizzButtonElement;
49
+ }
50
+ }
51
+
52
+ type CardElevation = 'flat' | 'raised';
53
+ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
54
+ declare class BizzCardElement extends LitElement {
55
+ static styles: lit.CSSResult;
56
+ static properties: {
57
+ elevation: {
58
+ type: StringConstructor;
59
+ reflect: boolean;
60
+ };
61
+ padding: {
62
+ type: StringConstructor;
63
+ reflect: boolean;
64
+ };
65
+ clickable: {
66
+ type: BooleanConstructor;
67
+ reflect: boolean;
68
+ };
69
+ };
70
+ elevation: CardElevation;
71
+ padding: CardPadding;
72
+ clickable: boolean;
73
+ constructor();
74
+ updated(changed: Map<string, unknown>): void;
75
+ render(): lit_html.TemplateResult<1>;
76
+ }
77
+ declare global {
78
+ interface HTMLElementTagNameMap {
79
+ 'bizz-card': BizzCardElement;
80
+ }
81
+ }
82
+
83
+ type TagColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success';
84
+ type TagSize = 'sm' | 'md';
85
+ declare class BizzTagElement extends LitElement {
86
+ static styles: lit.CSSResult;
87
+ static properties: {
88
+ color: {
89
+ type: StringConstructor;
90
+ reflect: boolean;
91
+ };
92
+ size: {
93
+ type: StringConstructor;
94
+ reflect: boolean;
95
+ };
96
+ dismissible: {
97
+ type: BooleanConstructor;
98
+ };
99
+ };
100
+ color: TagColor;
101
+ size: TagSize;
102
+ dismissible: boolean;
103
+ constructor();
104
+ private handleDismiss;
105
+ render(): lit_html.TemplateResult<1>;
106
+ }
107
+ declare global {
108
+ interface HTMLElementTagNameMap {
109
+ 'bizz-tag': BizzTagElement;
110
+ }
111
+ }
112
+
113
+ type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
114
+ declare class BizzInputElement extends LitElement {
115
+ static styles: lit.CSSResult;
116
+ static properties: {
117
+ label: {
118
+ type: StringConstructor;
119
+ };
120
+ placeholder: {
121
+ type: StringConstructor;
122
+ };
123
+ type: {
124
+ type: StringConstructor;
125
+ };
126
+ helperText: {
127
+ type: StringConstructor;
128
+ attribute: string;
129
+ };
130
+ errorText: {
131
+ type: StringConstructor;
132
+ attribute: string;
133
+ };
134
+ disabled: {
135
+ type: BooleanConstructor;
136
+ };
137
+ required: {
138
+ type: BooleanConstructor;
139
+ };
140
+ value: {
141
+ type: StringConstructor;
142
+ };
143
+ _touched: {
144
+ state: boolean;
145
+ };
146
+ };
147
+ label: string;
148
+ placeholder: string;
149
+ type: InputType;
150
+ helperText: string;
151
+ errorText: string;
152
+ disabled: boolean;
153
+ required: boolean;
154
+ value: string;
155
+ private _touched;
156
+ constructor();
157
+ private get hasError();
158
+ private handleInput;
159
+ private handleBlur;
160
+ render(): lit_html.TemplateResult<1>;
161
+ }
162
+ declare global {
163
+ interface HTMLElementTagNameMap {
164
+ 'bizz-input': BizzInputElement;
165
+ }
166
+ }
167
+
168
+ declare class BizzTextareaElement extends LitElement {
169
+ static styles: lit.CSSResult;
170
+ static properties: {
171
+ label: {
172
+ type: StringConstructor;
173
+ };
174
+ placeholder: {
175
+ type: StringConstructor;
176
+ };
177
+ helperText: {
178
+ type: StringConstructor;
179
+ attribute: string;
180
+ };
181
+ errorText: {
182
+ type: StringConstructor;
183
+ attribute: string;
184
+ };
185
+ disabled: {
186
+ type: BooleanConstructor;
187
+ };
188
+ required: {
189
+ type: BooleanConstructor;
190
+ };
191
+ rows: {
192
+ type: NumberConstructor;
193
+ };
194
+ autoResize: {
195
+ type: BooleanConstructor;
196
+ attribute: string;
197
+ };
198
+ value: {
199
+ type: StringConstructor;
200
+ };
201
+ _touched: {
202
+ state: boolean;
203
+ };
204
+ };
205
+ label: string;
206
+ placeholder: string;
207
+ helperText: string;
208
+ errorText: string;
209
+ disabled: boolean;
210
+ required: boolean;
211
+ rows: number;
212
+ autoResize: boolean;
213
+ value: string;
214
+ private _touched;
215
+ constructor();
216
+ private get hasError();
217
+ private handleInput;
218
+ private handleBlur;
219
+ render(): lit_html.TemplateResult<1>;
220
+ }
221
+ declare global {
222
+ interface HTMLElementTagNameMap {
223
+ 'bizz-textarea': BizzTextareaElement;
224
+ }
225
+ }
226
+
227
+ export { BizzButtonElement, BizzCardElement, BizzInputElement, BizzTagElement, BizzTextareaElement, type ButtonSize, type ButtonType, type ButtonVariant, type CardElevation, type CardPadding, type InputType, type TagColor, type TagSize };