@datawire-ai/busyfile-design-library 1.10.0 → 1.12.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 +26 -14
- package/dist/index.js +3063 -2603
- package/dist/index.umd.cjs +52 -26
- package/dist/style.css +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -281,25 +281,37 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
|
|
|
281
281
|
</div>
|
|
282
282
|
```
|
|
283
283
|
|
|
284
|
-
| Prop | Type
|
|
285
|
-
| ---------- |
|
|
286
|
-
| `variant` | `"primary" \| "success" \| "warning" \| "error" \| "
|
|
287
|
-
| `type` | `"filled" \| "outline"`
|
|
288
|
-
| `children` | `React.ReactNode`
|
|
284
|
+
| Prop | Type | Default | Description |
|
|
285
|
+
| ---------- | ------------------------------------------------------------------------------------------------------------------ | ----------- | -------------------------------------------------------------------- |
|
|
286
|
+
| `variant` | `"primary" \| "success" \| "warning" \| "error" \| "secondary" \| "neutral"` | `"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.). |
|
|
289
289
|
|
|
290
|
-
# Button
|
|
291
290
|
|
|
292
|
-
|
|
291
|
+
## Divider
|
|
292
|
+
The `Divider` component is used to separate content visually.
|
|
293
|
+
It supports `vertical` and `horizontal` orientations, with configurable thickness (size) and custom width/height.
|
|
293
294
|
|
|
294
|
-
|
|
295
|
+
```tsx
|
|
296
|
+
<div className="flex flex-col gap-4">
|
|
297
|
+
{/* Horizontal Divider */}
|
|
298
|
+
<Divider orientation="horizontal" size={2} />
|
|
299
|
+
|
|
300
|
+
{/* Vertical Divider */}
|
|
301
|
+
<div className="flex items-center gap-4">
|
|
302
|
+
<span>Left</span>
|
|
303
|
+
<Divider orientation="vertical" size={2} height={40} />
|
|
304
|
+
<span>Right</span>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
295
307
|
|
|
296
|
-
|
|
297
|
-
;
|
|
298
|
-
<Button variant="default">Default</Button>
|
|
299
|
-
<Button variant="primary">Primary</Button>
|
|
300
|
-
<Button variant="outline" size="sm">Outline Small</Button>
|
|
301
|
-
<Button size="icon"><Icon /></Button>
|
|
308
|
+
```
|
|
302
309
|
|
|
310
|
+
| Prop | Type | Default | Description |
|
|
311
|
+
| ------------- | ---------------------------------------- | -------------- | --------------------------------------------------------------------- |
|
|
312
|
+
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Orientation of the divider.
|
|
313
|
+
| `size` | `1 \| 2 \| 3 \| 4` | `1` | Thickness of the divider (height for horizontal, width for vertical).
|
|
314
|
+
| `color` | `string` | `#D9DAE4` | Color of the divider line.
|
|
303
315
|
|
|
304
316
|
|
|
305
317
|
|