@datawire-ai/busyfile-design-library 1.5.0 → 1.6.1
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 +61 -10
- package/dist/index.js +469 -420
- package/dist/index.umd.cjs +14 -14
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -71,15 +71,33 @@ pnpm test
|
|
|
71
71
|
```
|
|
72
72
|
src/
|
|
73
73
|
├── components/ # React components
|
|
74
|
-
│ └── ui/
|
|
75
|
-
│ ├──
|
|
76
|
-
│
|
|
77
|
-
├──
|
|
78
|
-
│
|
|
79
|
-
|
|
80
|
-
├──
|
|
81
|
-
├──
|
|
82
|
-
|
|
74
|
+
│ └── ui/
|
|
75
|
+
│ ├── badge/ # Badge component
|
|
76
|
+
│ │ ├── badge.tsx
|
|
77
|
+
│ │ ├── badge.types.ts
|
|
78
|
+
│ │ ├── badge.utils.ts
|
|
79
|
+
│ │ └── badge.test.tsx
|
|
80
|
+
├── badge.stories.tsx
|
|
81
|
+
│ ├── button/ # Button component
|
|
82
|
+
│ │ ├── button.tsx
|
|
83
|
+
│ │ ├── button.types.ts
|
|
84
|
+
│ │ ├── button.utils.ts
|
|
85
|
+
│ │ └── button.test.tsx
|
|
86
|
+
| ├── button.stories.tsx
|
|
87
|
+
│ ├── divider/ # Divider component
|
|
88
|
+
│ │ ├── divider.tsx
|
|
89
|
+
│ │ ├── divider.types.ts
|
|
90
|
+
│ │ └── divider.test.tsx
|
|
91
|
+
| ├── divider.stories.tsx
|
|
92
|
+
│ └── index.ts # Component exports
|
|
93
|
+
├── lib/ # Utility functions
|
|
94
|
+
│ └── utils.ts
|
|
95
|
+
├── styles/
|
|
96
|
+
│ └── style.css # Global styles
|
|
97
|
+
├── App.tsx # Demo application
|
|
98
|
+
├── main.tsx # Application entry point
|
|
99
|
+
└── index.ts # Main package exports
|
|
100
|
+
|
|
83
101
|
```
|
|
84
102
|
|
|
85
103
|
## Testing
|
|
@@ -215,6 +233,40 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
|
|
|
215
233
|
</div>
|
|
216
234
|
|
|
217
235
|
|
|
236
|
+
## Badge
|
|
237
|
+
|
|
238
|
+
The `Badge` component is used to display small status indicators, tags, or labels.
|
|
239
|
+
It supports multiple variants, types `(filled / outline)`, and accepts custom children (icons, avatars, flags, etc.).
|
|
240
|
+
|
|
241
|
+
### Usage
|
|
242
|
+
```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>
|
|
263
|
+
```
|
|
264
|
+
|
|
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.). |
|
|
218
270
|
|
|
219
271
|
# Button
|
|
220
272
|
|
|
@@ -229,7 +281,6 @@ The `Button` component is a core interactive element in the design system. It su
|
|
|
229
281
|
<Button variant="outline" size="sm">Outline Small</Button>
|
|
230
282
|
<Button size="icon"><Icon /></Button>
|
|
231
283
|
|
|
232
|
-
|
|
233
284
|
### TypeScript
|
|
234
285
|
|
|
235
286
|
Full TypeScript support is included. No additional types package needed.
|