@datawire-ai/busyfile-design-library 1.24.0 → 1.25.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 +38 -62
- package/dist/index.js +3628 -3372
- package/dist/index.umd.cjs +72 -72
- package/dist/style.css +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -358,7 +358,7 @@ A `radio button` is a user interface element that allows the user to select one
|
|
|
358
358
|
|
|
359
359
|
## Usage
|
|
360
360
|
|
|
361
|
-
|
|
361
|
+
```tsx
|
|
362
362
|
'use client';
|
|
363
363
|
|
|
364
364
|
import { RadioGroup, RadioGroupItem } from './radio-button';
|
|
@@ -375,6 +375,7 @@ export default function Example() {
|
|
|
375
375
|
);
|
|
376
376
|
}
|
|
377
377
|
```
|
|
378
|
+
|
|
378
379
|
### Props
|
|
379
380
|
|
|
380
381
|
| Prop | Type | Default | Description |
|
|
@@ -387,13 +388,12 @@ export default function Example() {
|
|
|
387
388
|
| `className` | `string` | – | Tailwind/custom classes for the root wrapper. |
|
|
388
389
|
| `children` | `React.ReactNode` | – | One or more `<RadioGroupItem />`. |
|
|
389
390
|
|
|
390
|
-
|
|
391
391
|
The `Skeleton` component is used to display a placeholder while content is loading. It supports custom dimensions, border radius, and animations.
|
|
392
392
|
It also includes a SkeletonText variant for rendering multiple placeholder text lines.
|
|
393
393
|
|
|
394
394
|
## Usage
|
|
395
395
|
|
|
396
|
-
|
|
396
|
+
```tsx
|
|
397
397
|
import { Skeleton, SkeletonText } from "@/components/ui/skeleton";
|
|
398
398
|
|
|
399
399
|
// Basic skeleton block
|
|
@@ -420,58 +420,6 @@ import { Skeleton, SkeletonText } from "@/components/ui/skeleton";
|
|
|
420
420
|
| `borderRadius` | `number \| string` | `4px` | Border radius (px or CSS value). |
|
|
421
421
|
| `style` | `React.CSSProperties` | `-` | Inline styles override. |
|
|
422
422
|
|
|
423
|
-
|
|
424
|
-
## Badge
|
|
425
|
-
|
|
426
|
-
The `Badge` component is used to display small status indicators, tags, or labels.
|
|
427
|
-
It supports multiple variants, types `(filled / outline)`, and accepts custom children (icons, avatars, flags, etc.).
|
|
428
|
-
|
|
429
|
-
### Usage
|
|
430
|
-
|
|
431
|
-
````tsx
|
|
432
|
-
<div className="flex gap-2 flex-wrap">
|
|
433
|
-
<Badge variant="primary">Primary</Badge>
|
|
434
|
-
<Badge variant="success">Success</Badge>
|
|
435
|
-
<Badge variant="warning">Warning</Badge>
|
|
436
|
-
<Badge variant="error">Error</Badge>
|
|
437
|
-
<Badge variant="gray">Gray</Badge>
|
|
438
|
-
<Badge variant="blue">Blue</Badge>
|
|
439
|
-
<Badge variant="purple">Purple</Badge>
|
|
440
|
-
<Badge variant="pink">Pink</Badge>
|
|
441
|
-
<Badge variant="rose">Rose</Badge>
|
|
442
|
-
|
|
443
|
-
{/* Outline badges */}
|
|
444
|
-
<Badge variant="blue" type="outline">
|
|
445
|
-
Outlined
|
|
446
|
-
</Badge>
|
|
447
|
-
|
|
448
|
-
{/* With icons */}
|
|
449
|
-
<Badge variant="success">
|
|
450
|
-
<span className="mr-1">✔</span>
|
|
451
|
-
Success with Icon
|
|
452
|
-
</Badge>
|
|
453
|
-
</div>
|
|
454
|
-
```
|
|
455
|
-
|
|
456
|
-
| Prop | Type | Default | Description |
|
|
457
|
-
| ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
|
|
458
|
-
| `variant` | `"primary" \| "success" \| "warning" \| "error" \| "gray" \| "neutral" \| "blue" \| "purple" \| "pink" \| "rose"` | `"primary"` | Color style of the badge. |
|
|
459
|
-
| `type` | `"filled" \| "outline"` | `"filled"` | Whether the badge is filled or outlined. |
|
|
460
|
-
| `children` | `React.ReactNode` | — | Content inside the badge (text, icons, avatars, flags, etc.). |
|
|
461
|
-
|
|
462
|
-
# Button
|
|
463
|
-
|
|
464
|
-
The `Button` component is a core interactive element in the design system. It supports multiple variants, sizes, and icons while ensuring accessibility and consistency.
|
|
465
|
-
|
|
466
|
-
## Usage
|
|
467
|
-
|
|
468
|
-
```tsx
|
|
469
|
-
<Button variant="default">Default</Button>
|
|
470
|
-
<Button variant="primary">Primary</Button>
|
|
471
|
-
<Button variant="outline" size="sm">Outline Small</Button>
|
|
472
|
-
<Button size="icon"><Icon /></Button>
|
|
473
|
-
```
|
|
474
|
-
|
|
475
423
|
### Typography
|
|
476
424
|
|
|
477
425
|
The BusyFile Design System provides a consistent typography scale based on Nunito with predefined sizes and line-heights from Figma.
|
|
@@ -542,6 +490,7 @@ These tokens can be used directly as Tailwind utility classes like bg-primary-30
|
|
|
542
490
|
|
|
543
491
|
### Usage
|
|
544
492
|
|
|
493
|
+
```tsx
|
|
545
494
|
<div className="bg-primary-30 text-white p-4 rounded">
|
|
546
495
|
Primary Button
|
|
547
496
|
</div>
|
|
@@ -557,7 +506,7 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
|
|
|
557
506
|
|
|
558
507
|
### Usage
|
|
559
508
|
|
|
560
|
-
|
|
509
|
+
```
|
|
561
510
|
|
|
562
511
|
tsx
|
|
563
512
|
|
|
@@ -586,13 +535,40 @@ Success with Icon
|
|
|
586
535
|
</div>
|
|
587
536
|
```
|
|
588
537
|
|
|
538
|
+
````
|
|
539
|
+
|
|
540
|
+
# Checkbox
|
|
541
|
+
|
|
542
|
+
The `Checkbox` is a user interface element that allows the user to select one or more options from a list of independent options. They are typically used in interfaces where the user needs to choose one or more options from a set of options, such as in a filter menu.
|
|
543
|
+
|
|
544
|
+
## Usage
|
|
545
|
+
|
|
589
546
|
```tsx
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
547
|
+
import { Checkbox } from '@/components/ui/checkbox';
|
|
548
|
+
|
|
549
|
+
export function Example() {
|
|
550
|
+
return (
|
|
551
|
+
<div className="flex items-center gap-2">
|
|
552
|
+
<Checkbox id="terms" />
|
|
553
|
+
<label htmlFor="terms" className="text-sm text-neutral-black-1">
|
|
554
|
+
Accept terms and conditions
|
|
555
|
+
</label>
|
|
556
|
+
</div>
|
|
557
|
+
);
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
### Props
|
|
561
|
+
|
|
562
|
+
| Prop | Type | Default | Description |
|
|
563
|
+
| ----------------- | ----------------------------------------------- | ------- | -------------------------------------------------------------- |
|
|
564
|
+
| `className` | `string` | `—` | Custom class names for styling. |
|
|
565
|
+
| `checked` | `boolean \| "indeterminate"` | `—` | Controlled state of the checkbox. |
|
|
566
|
+
| `defaultChecked` | `boolean` | `false` | Uncontrolled initial checked state. |
|
|
567
|
+
| `disabled` | `boolean` | `false` | Disables the checkbox when true. |
|
|
568
|
+
| `onCheckedChange` | `(checked: boolean \| "indeterminate") => void` | `—` | Callback fired when the checked state changes. |
|
|
569
|
+
| `id` | `string` | `—` | Used to associate the checkbox with a `<label>` via `htmlFor`. |
|
|
570
|
+
| `name` | `string` | `—` | Name of the checkbox input (useful in forms). |
|
|
571
|
+
| `value` | `string` | `—` | Value associated with the checkbox input. |
|
|
596
572
|
|
|
597
573
|
# Timeline
|
|
598
574
|
|