@datawire-ai/busyfile-design-library 1.9.0 → 1.10.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 (5) hide show
  1. package/README.md +55 -33
  2. package/dist/index.js +669 -640
  3. package/dist/index.umd.cjs +14 -14
  4. package/dist/style.css +1 -1
  5. package/package.json +4 -2
package/README.md CHANGED
@@ -51,6 +51,7 @@ pnpm test
51
51
  5. Submit a pull request
52
52
 
53
53
  ## PRs & Changeset Process
54
+
54
55
  - [ ] **Do not run `changeset` until your PR is ready for merge**
55
56
  - [ ] Complete all required changes
56
57
  - [ ] Apply PR review feedback
@@ -71,7 +72,7 @@ pnpm test
71
72
  ```
72
73
  src/
73
74
  ├── components/ # React components
74
- │ └── ui/
75
+ │ └── ui/
75
76
  │ ├── badge/ # Badge component
76
77
  │ │ ├── badge.tsx
77
78
  │ │ ├── badge.types.ts
@@ -86,7 +87,7 @@ src/
86
87
  | ├── button.stories.tsx
87
88
  │ ├── divider/ # Divider component
88
89
  │ │ ├── divider.tsx
89
- │ │ ├── divider.types.ts
90
+ │ │ ├── divider.types.ts
90
91
  │ │ └── divider.test.tsx
91
92
  | ├── divider.stories.tsx
92
93
  │ └── index.ts # Component exports
@@ -152,7 +153,6 @@ module.exports = {
152
153
  };
153
154
  ```
154
155
 
155
-
156
156
  ### Typography
157
157
 
158
158
  The BusyFile Design System provides a consistent typography scale based on Nunito with predefined sizes and line-heights from Figma.
@@ -169,8 +169,8 @@ The BusyFile Design System provides a consistent typography scale based on Nunit
169
169
  | `--text-sm` | 0.875rem | 1.6rem | `text-sm` |
170
170
  | `--text-xs` | 0.75rem | 1.6rem | `text-xs` |
171
171
 
172
-
173
172
  ### Usage
173
+
174
174
  <p className="text-display-lg font-sans">
175
175
  Large Display Heading
176
176
  </p>
@@ -179,13 +179,13 @@ The BusyFile Design System provides a consistent typography scale based on Nunit
179
179
  Body text using medium size
180
180
  </p>
181
181
 
182
-
183
182
  ### Colors
184
183
 
185
184
  The BusyFile Design System defines a unified color palette for primary, neutral, and semantic states.
186
185
  These tokens can be used directly as Tailwind utility classes like bg-primary-30 or text-neutral-60.
187
186
 
188
187
  ### Primary Colors
188
+
189
189
  | Token | Hex | Example Class |
190
190
  | -------------------- | --------- | --------------- |
191
191
  | `--color-primary-0` | `#36060a` | `bg-primary-0` |
@@ -196,8 +196,6 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
196
196
  | `--color-primary-50` | `#f5b5b9` | `bg-primary-50` |
197
197
  | `--color-primary-60` | `#fceaea` | `bg-primary-60` |
198
198
 
199
-
200
-
201
199
  ### Neutral Colors
202
200
 
203
201
  | Token | Hex | Example Class |
@@ -216,6 +214,7 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
216
214
  | `--color-neutral-99` | `#f1f1f1` | `bg-neutral-99` |
217
215
 
218
216
  ### Semantic Colors
217
+
219
218
  | State | Light | Dark | Example Classes |
220
219
  | ----------- | --------- | --------- | ------------------------------ |
221
220
  | **Error** | `#f9dcdf` | `#bf2234` | `bg-error-l`, `bg-error-d` |
@@ -232,6 +231,23 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
232
231
  Error Alert
233
232
  </div>
234
233
 
234
+ # Card
235
+
236
+ The `Card` component provides a flexible container with two variants `(widget1, widget2)` for displaying grouped content consistently across applications.
237
+
238
+ ## Usage
239
+
240
+ ```tsx
241
+ <Card variant="widget-1">
242
+ <h3 className="text-lg font-semibold">Widget 1 Card</h3>
243
+ <p>This is a card with inner shadow and white background.</p>
244
+ </Card>
245
+
246
+ <Card variant="widget-2">
247
+ <h3 className="text-lg font-semibold">Widget 2 Card</h3>
248
+ <p>This card has a border with a subtle shadow.</p>
249
+ </Card>
250
+ ```
235
251
 
236
252
  ## Badge
237
253
 
@@ -239,34 +255,37 @@ The `Badge` component is used to display small status indicators, tags, or label
239
255
  It supports multiple variants, types `(filled / outline)`, and accepts custom children (icons, avatars, flags, etc.).
240
256
 
241
257
  ### Usage
258
+
242
259
  ```tsx
243
- <div className="flex gap-2 flex-wrap">
244
- <Badge variant="primary">Primary</Badge>
245
- <Badge variant="success">Success</Badge>
246
- <Badge variant="warning">Warning</Badge>
247
- <Badge variant="error">Error</Badge>
248
- <Badge variant="gray">Gray</Badge>
249
- <Badge variant="blue">Blue</Badge>
250
- <Badge variant="purple">Purple</Badge>
251
- <Badge variant="pink">Pink</Badge>
252
- <Badge variant="rose">Rose</Badge>
253
-
254
- {/* Outline badges */}
255
- <Badge variant="blue" type="outline">Outlined</Badge>
256
-
257
- {/* With icons */}
258
- <Badge variant="success">
259
- <span className="mr-1">✔</span>
260
- Success with Icon
261
- </Badge>
262
- </div>
260
+ <div className="flex gap-2 flex-wrap">
261
+ <Badge variant="primary">Primary</Badge>
262
+ <Badge variant="success">Success</Badge>
263
+ <Badge variant="warning">Warning</Badge>
264
+ <Badge variant="error">Error</Badge>
265
+ <Badge variant="gray">Gray</Badge>
266
+ <Badge variant="blue">Blue</Badge>
267
+ <Badge variant="purple">Purple</Badge>
268
+ <Badge variant="pink">Pink</Badge>
269
+ <Badge variant="rose">Rose</Badge>
270
+
271
+ {/* Outline badges */}
272
+ <Badge variant="blue" type="outline">
273
+ Outlined
274
+ </Badge>
275
+
276
+ {/* With icons */}
277
+ <Badge variant="success">
278
+ <span className="mr-1">✔</span>
279
+ Success with Icon
280
+ </Badge>
281
+ </div>
263
282
  ```
264
283
 
265
- | Prop | Type | Default | Description |
266
- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------- |
267
- | `variant` | `"primary" \| "success" \| "warning" \| "error" \| "gray" \| "neutral" \| "blue" \| "purple" \| "pink" \| "rose"` | `"primary"` | Color style of the badge. |
268
- | `type` | `"filled" \| "outline"` | `"filled"` | Whether the badge is filled or outlined. |
269
- | `children` | `React.ReactNode` | — | Content inside the badge (text, icons, avatars, flags, etc.). |
284
+ | Prop | Type | Default | Description |
285
+ | ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
286
+ | `variant` | `"primary" \| "success" \| "warning" \| "error" \| "gray" \| "neutral" \| "blue" \| "purple" \| "pink" \| "rose"` | `"primary"` | Color style of the badge. |
287
+ | `type` | `"filled" \| "outline"` | `"filled"` | Whether the badge is filled or outlined. |
288
+ | `children` | `React.ReactNode` | — | Content inside the badge (text, icons, avatars, flags, etc.). |
270
289
 
271
290
  # Button
272
291
 
@@ -274,7 +293,7 @@ The `Button` component is a core interactive element in the design system. It su
274
293
 
275
294
  ## Usage
276
295
 
277
- ```tsx
296
+ ````tsx
278
297
  ;
279
298
  <Button variant="default">Default</Button>
280
299
  <Button variant="primary">Primary</Button>
@@ -389,6 +408,9 @@ pnpm build:types
389
408
 
390
409
  # Build Storybook
391
410
  pnpm build-storybook
411
+ ````
412
+
392
413
  ```
393
414
 
394
415
  Made with ❤️ by the BusyFile team
416
+ ```