bizz-components 0.1.0 → 0.2.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 +165 -121
  2. package/package.json +20 -26
  3. package/web/index.d.mts +227 -0
  4. package/web/index.js +1868 -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,153 @@ 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>
77
53
  ```
78
54
 
79
- | Input | Type | Default | Description |
55
+ | Attribute | Type | Default | Description |
80
56
  |---|---|---|---|
81
57
  | `variant` | `primary \| secondary \| disabled \| danger` | `primary` | Visual style |
82
58
  | `size` | `sm \| md \| lg` | `md` | Button size |
59
+ | `type` | `button \| submit \| reset` | `button` | Native button type |
83
60
  | `disabled` | `boolean` | `false` | Disables the button |
84
- | `loading` | `boolean` | `false` | Shows spinner, blocks clicks |
85
- | `fullWidth` | `boolean` | `false` | Stretches to container width |
61
+ | `loading` | `boolean` | `false` | Shows spinner, blocks interaction |
62
+ | `full-width` | `boolean` | `false` | Stretches to container width |
86
63
 
87
- | Output | Description |
88
- |---|---|
89
- | `clicked` | Emits `MouseEvent` on click |
64
+ | Event | Detail | Description |
65
+ |---|---|---|
66
+ | `bizz-click` | `MouseEvent` | Fired on click (not fired when disabled/loading) |
90
67
 
91
68
  ---
92
69
 
93
- ### BizzCard
70
+ ### `<bizz-card>`
94
71
 
95
72
  ```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>
73
+ <bizz-card elevation="raised" padding="md" clickable>
74
+ <img slot="card-media" src="cover.jpg" alt="Cover" />
75
+ <div slot="card-header">
76
+ <h4 class="bizz-h4">Project title</h4>
77
+ </div>
78
+ <p class="bizz-body">Description goes here.</p>
79
+ <div slot="card-footer">
80
+ <bizz-tag color="primary" size="sm">TypeScript</bizz-tag>
100
81
  </div>
101
- Body content goes here
102
- <div card-footer>Footer actions</div>
103
82
  </bizz-card>
104
83
  ```
105
84
 
106
- | Input | Type | Default | Description |
85
+ | Attribute | Type | Default | Description |
107
86
  |---|---|---|---|
108
87
  | `elevation` | `flat \| raised` | `raised` | Shadow depth |
109
88
  | `padding` | `none \| sm \| md \| lg` | `md` | Inner padding |
110
- | `clickable` | `boolean` | `false` | Hover lift + focus ring |
89
+ | `clickable` | `boolean` | `false` | Hover lift + focus ring, adds `role="button"` |
111
90
 
112
- **Slots:** `[card-media]`, `[card-header]`, default body, `[card-footer]`
91
+ **Slots:** `card-media`, `card-header`, default body, `card-footer`
113
92
 
114
93
  ---
115
94
 
116
- ### BizzTag
95
+ ### `<bizz-tag>`
117
96
 
118
97
  ```html
119
- <bizz-tag color="primary" size="md" [dismissible]="true" (dismissed)="remove()">
120
- Angular
121
- </bizz-tag>
98
+ <bizz-tag color="primary">TypeScript</bizz-tag>
99
+ <bizz-tag color="success" size="sm" dismissible>Published</bizz-tag>
122
100
  ```
123
101
 
124
- | Input | Type | Default | Description |
102
+ | Attribute | Type | Default | Description |
125
103
  |---|---|---|---|
126
104
  | `color` | `primary \| secondary \| success \| warning \| error` | `primary` | Semantic color |
127
105
  | `size` | `sm \| md` | `md` | Tag size |
128
106
  | `dismissible` | `boolean` | `false` | Shows close button |
129
107
 
130
- | Output | Description |
131
- |---|---|
132
- | `dismissed` | Emits when close button is clicked |
108
+ | Event | Detail | Description |
109
+ |---|---|---|
110
+ | `bizz-dismissed` | — | Fired when the close button is clicked |
133
111
 
134
112
  ---
135
113
 
136
- ### BizzInput
114
+ ### `<bizz-input>`
137
115
 
138
116
  ```html
139
117
  <bizz-input
140
118
  label="Email"
141
119
  placeholder="you@example.com"
142
120
  type="email"
143
- helperText="We'll never share your email."
144
- [required]="true"
145
- [(ngModel)]="email"
146
- />
121
+ helper-text="We'll never share your email."
122
+ required
123
+ ></bizz-input>
147
124
  ```
148
125
 
149
- Implements `ControlValueAccessor` — works with `ngModel` and reactive forms.
150
-
151
- | Input | Type | Default | Description |
126
+ | Attribute | Type | Default | Description |
152
127
  |---|---|---|---|
153
128
  | `label` | `string` | `''` | Field label |
154
129
  | `placeholder` | `string` | `''` | Placeholder text |
155
130
  | `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 |
131
+ | `value` | `string` | `''` | Current value |
132
+ | `helper-text` | `string` | `''` | Helper text below the field |
133
+ | `error-text` | `string` | `''` | Error message (shown after blur) |
134
+ | `disabled` | `boolean` | `false` | Disables the field |
135
+ | `required` | `boolean` | `false` | Marks as required, validates on blur |
160
136
 
161
- ---
137
+ **Slots:** `prefix`, `suffix` (for icons inside the field)
162
138
 
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 |
139
+ | Event | Detail | Description |
140
+ |---|---|---|
141
+ | `bizz-input` | `string` | Fired on every keystroke |
142
+ | `bizz-blur` | — | Fired on blur |
171
143
 
172
144
  ---
173
145
 
174
- ### BizzTimeline + BizzTimelineItem
146
+ ### `<bizz-textarea>`
175
147
 
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 |
148
+ Same API as `<bizz-input>`, plus:
198
149
 
199
- **Slots:** default body, `[timeline-tags]`
150
+ | Attribute | Type | Default | Description |
151
+ |---|---|---|---|
152
+ | `rows` | `number` | `4` | Initial row count |
153
+ | `auto-resize` | `boolean` | `false` | Grows with content |
200
154
 
201
155
  ---
202
156
 
203
157
  ## Typography
204
158
 
205
- Typography is CSS utility classes — apply to any HTML element:
159
+ Typography classes apply to any HTML element outside the components:
206
160
 
207
161
  ```html
208
162
  <h1 class="bizz-h1">Heading 1</h1>
@@ -229,21 +183,111 @@ Typography is CSS utility classes — apply to any HTML element:
229
183
 
230
184
  ---
231
185
 
186
+ ## Theming
187
+
188
+ ### Dark mode
189
+
190
+ Wrap any section in `.bizz-theme-dark`:
191
+
192
+ ```html
193
+ <div class="bizz-theme-dark">
194
+ <bizz-button variant="primary">Dark button</bizz-button>
195
+ </div>
196
+ ```
197
+
198
+ ### Custom brand colors
199
+
200
+ Override the 5 base color variables — all shades regenerate automatically:
201
+
202
+ ```css
203
+ :root {
204
+ --bizz-primary: #7c3aed;
205
+ --bizz-secondary: #374151;
206
+ --bizz-success: #059669;
207
+ --bizz-warning: #d97706;
208
+ --bizz-error: #dc2626;
209
+ }
210
+ ```
211
+
212
+ ---
213
+
214
+ ## Framework usage
215
+
216
+ ### React / Next.js
217
+
218
+ ```tsx
219
+ import 'bizz-components/web';
220
+
221
+ export default function Page() {
222
+ return (
223
+ <bizz-button
224
+ variant="primary"
225
+ onBizzClick={(e) => console.log(e.detail)}
226
+ >
227
+ Click me
228
+ </bizz-button>
229
+ );
230
+ }
231
+ ```
232
+
233
+ For TypeScript prop types, add to your project:
234
+
235
+ ```ts
236
+ import type { BizzButtonElement } from 'bizz-components/web';
237
+
238
+ declare global {
239
+ namespace JSX {
240
+ interface IntrinsicElements {
241
+ 'bizz-button': Partial<BizzButtonElement> & React.HTMLAttributes<BizzButtonElement>;
242
+ }
243
+ }
244
+ }
245
+ ```
246
+
247
+ ### Vue
248
+
249
+ ```vue
250
+ <script setup>
251
+ import 'bizz-components/web';
252
+ </script>
253
+
254
+ <template>
255
+ <bizz-button variant="primary" @bizz-click="handleClick">
256
+ Click me
257
+ </bizz-button>
258
+ </template>
259
+ ```
260
+
261
+ ### Plain HTML
262
+
263
+ ```html
264
+ <script type="module">
265
+ import 'https://unpkg.com/bizz-components/web/index.js';
266
+ </script>
267
+
268
+ <bizz-button variant="primary">Click me</bizz-button>
269
+ ```
270
+
271
+ ---
272
+
232
273
  ## Building
233
274
 
234
275
  ```bash
235
- ng build bizz-components
276
+ npm run build:web
236
277
  ```
237
278
 
279
+ Outputs to `dist/bizz-components/web/`.
280
+
238
281
  ## Publishing
239
282
 
240
283
  ```bash
241
- cd dist/bizz-components
242
- npm publish --access public
284
+ npm run release
243
285
  ```
244
286
 
287
+ This builds the library and publishes the `dist/bizz-components/` directory to npm.
288
+
245
289
  ---
246
290
 
247
291
  ## License
248
292
 
249
- MIT © Beatriz Nascimento
293
+ 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.2.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' | 'disabled' | 'danger';
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 };