@datawire-ai/busyfile-design-library 1.22.0 → 1.24.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 +116 -72
- package/dist/index.js +1764 -1591
- package/dist/index.umd.cjs +44 -29
- package/dist/style.css +1 -1
- package/package.json +2 -1
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';
|
|
@@ -557,8 +557,10 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
|
|
|
557
557
|
|
|
558
558
|
### Usage
|
|
559
559
|
|
|
560
|
-
|
|
560
|
+
`````
|
|
561
|
+
|
|
561
562
|
tsx
|
|
563
|
+
|
|
562
564
|
<div className="flex gap-2 flex-wrap">
|
|
563
565
|
<Badge variant="primary">Primary</Badge>
|
|
564
566
|
<Badge variant="success">Success</Badge>
|
|
@@ -570,18 +572,20 @@ tsx
|
|
|
570
572
|
<Badge variant="pink">Pink</Badge>
|
|
571
573
|
<Badge variant="rose">Rose</Badge>
|
|
572
574
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
575
|
+
{/_ Outline badges _/}
|
|
576
|
+
<Badge variant="blue" type="outline">
|
|
577
|
+
Outlined
|
|
578
|
+
</Badge>
|
|
579
|
+
|
|
580
|
+
{/_ With icons _/}
|
|
581
|
+
<Badge variant="success">
|
|
582
|
+
<span className="mr-1">✔</span>
|
|
583
|
+
Success with Icon
|
|
584
|
+
</Badge>
|
|
577
585
|
|
|
578
|
-
{/* With icons */}
|
|
579
|
-
<Badge variant="success">
|
|
580
|
-
<span className="mr-1">✔</span>
|
|
581
|
-
Success with Icon
|
|
582
|
-
</Badge>
|
|
583
586
|
</div>
|
|
584
587
|
```
|
|
588
|
+
|
|
585
589
|
```tsx
|
|
586
590
|
| Prop | Type | Default | Description |
|
|
587
591
|
| ---------- | ----------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
|
|
@@ -640,8 +644,7 @@ The `Button` component is a core interactive element in the design system. It su
|
|
|
640
644
|
|
|
641
645
|
## Usage
|
|
642
646
|
|
|
643
|
-
|
|
644
|
-
;
|
|
647
|
+
```tsx
|
|
645
648
|
<Button variant="default">Default</Button>
|
|
646
649
|
<Button variant="primary">Primary</Button>
|
|
647
650
|
<Button variant="outline" size="sm">Outline Small</Button>
|
|
@@ -655,7 +658,7 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
|
|
|
655
658
|
|
|
656
659
|
### Usage
|
|
657
660
|
|
|
658
|
-
|
|
661
|
+
```tsx
|
|
659
662
|
<div className="flex gap-2 flex-wrap">
|
|
660
663
|
<Badge variant="primary">Primary</Badge>
|
|
661
664
|
<Badge variant="success">Success</Badge>
|
|
@@ -680,47 +683,87 @@ It supports multiple variants, types `(filled / outline)`, and accepts custom ch
|
|
|
680
683
|
</div>
|
|
681
684
|
```
|
|
682
685
|
|
|
683
|
-
| Prop | Type
|
|
684
|
-
| ---------- |
|
|
685
|
-
| `variant` | `"primary" \| "success" \| "warning" \| "error" \| "secondary" \| "neutral"` | `"primary"` | Color style of the badge.
|
|
686
|
-
| `type` | `"filled" \| "outline"`
|
|
687
|
-
| `children` | `React.ReactNode`
|
|
688
|
-
|
|
686
|
+
| Prop | Type | Default | Description |
|
|
687
|
+
| ---------- | ---------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
|
|
688
|
+
| `variant` | `"primary" \| "success" \| "warning" \| "error" \| "secondary" \| "neutral"` | `"primary"` | Color style of the badge. |
|
|
689
|
+
| `type` | `"filled" \| "outline"` | `"filled"` | Whether the badge is filled or outlined. |
|
|
690
|
+
| `children` | `React.ReactNode` | — | Content inside the badge (text, icons, avatars, flags, etc.). |
|
|
689
691
|
|
|
690
692
|
## Divider
|
|
693
|
+
|
|
691
694
|
The `Divider` component is used to separate content visually.
|
|
692
695
|
It supports `vertical` and `horizontal` orientations, with configurable thickness (size) and custom width/height.
|
|
693
696
|
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
697
|
+
```tsx
|
|
698
|
+
<div className="flex flex-col gap-4">
|
|
699
|
+
{/* Horizontal Divider */}
|
|
700
|
+
<Divider orientation="horizontal" size={2} />
|
|
701
|
+
|
|
702
|
+
{/* Vertical Divider */}
|
|
703
|
+
<div className="flex items-center gap-4">
|
|
704
|
+
<span>Left</span>
|
|
705
|
+
<Divider orientation="vertical" size={2} height={40} />
|
|
706
|
+
<span>Right</span>
|
|
707
|
+
</div>
|
|
708
|
+
</div>
|
|
707
709
|
```
|
|
708
710
|
|
|
709
|
-
| Prop | Type
|
|
710
|
-
| ------------- |
|
|
711
|
-
| `orientation` | `"horizontal" \| "vertical"`
|
|
712
|
-
| `size` | `1 \| 2 \| 3 \| 4`
|
|
713
|
-
| `color` | `string`
|
|
711
|
+
| Prop | Type | Default | Description |
|
|
712
|
+
| ------------- | ---------------------------- | -------------- | --------------------------------------------------------------------- |
|
|
713
|
+
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Orientation of the divider. |
|
|
714
|
+
| `size` | `1 \| 2 \| 3 \| 4` | `1` | Thickness of the divider (height for horizontal, width for vertical). |
|
|
715
|
+
| `color` | `string` | `#D9DAE4` | Color of the divider line. |
|
|
714
716
|
|
|
717
|
+
### BreadCrumb
|
|
715
718
|
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
719
|
+
A `breadcrumb` is a navigational element that helps users understand their current location within a website or application. Breadcrumbs enhance user experience by providing a clear path for navigation, allowing users to backtrack easily or move up within the site's hierarchy.
|
|
720
|
+
|
|
721
|
+
## Usage
|
|
722
|
+
|
|
723
|
+
```tsx
|
|
724
|
+
import {
|
|
725
|
+
Breadcrumb,
|
|
726
|
+
BreadcrumbList,
|
|
727
|
+
BreadcrumbItem,
|
|
728
|
+
BreadcrumbLink,
|
|
729
|
+
BreadcrumbPage,
|
|
730
|
+
BreadcrumbSeparator,
|
|
731
|
+
BreadcrumbEllipsis,
|
|
732
|
+
} from '@/components/ui/breadcrumb';
|
|
733
|
+
|
|
734
|
+
export default function Example() {
|
|
735
|
+
return (
|
|
736
|
+
<Breadcrumb>
|
|
737
|
+
<BreadcrumbList>
|
|
738
|
+
<BreadcrumbItem>
|
|
739
|
+
<BreadcrumbLink href="/">Home</BreadcrumbLink>
|
|
740
|
+
</BreadcrumbItem>
|
|
741
|
+
<BreadcrumbSeparator />
|
|
742
|
+
<BreadcrumbItem>
|
|
743
|
+
<BreadcrumbLink href="/projects">Projects</BreadcrumbLink>
|
|
744
|
+
</BreadcrumbItem>
|
|
745
|
+
<BreadcrumbSeparator />
|
|
746
|
+
<BreadcrumbItem>
|
|
747
|
+
<BreadcrumbPage>Project Alpha</BreadcrumbPage>
|
|
748
|
+
</BreadcrumbItem>
|
|
749
|
+
</BreadcrumbList>
|
|
750
|
+
</Breadcrumb>
|
|
751
|
+
);
|
|
752
|
+
}
|
|
722
753
|
```
|
|
723
754
|
|
|
755
|
+
### Props
|
|
756
|
+
|
|
757
|
+
| Component | Props | Description |
|
|
758
|
+
| ----------------------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
|
|
759
|
+
| **Breadcrumb** | All native `nav` props | Root container with `aria-label="breadcrumb"`. |
|
|
760
|
+
| **BreadcrumbList** | `className?` + all native `ol` props | Wrapper for breadcrumb items (`<ol>`). Adds spacing & layout classes. |
|
|
761
|
+
| **BreadcrumbItem** | `className?` + all native `li` props | Represents each breadcrumb node (`<li>`). |
|
|
762
|
+
| **BreadcrumbLink** | `asChild?: boolean`, `className?`, all native `a` props | Renders a link. If `asChild` is true, uses Radix `Slot` instead of `<a>`. |
|
|
763
|
+
| **BreadcrumbPage** | `className?` + all native `span` props | Represents the current page. Adds `aria-current="page"`. |
|
|
764
|
+
| **BreadcrumbSeparator** | `children?` (defaults to `<ChevronRight />`), `className?`, native `li` props | Separator between items. You can replace with custom icon/text. |
|
|
765
|
+
| **BreadcrumbEllipsis** | `className?` + all native `span` props | Renders an ellipsis with `MoreHorizontal` icon for collapsed paths. |
|
|
766
|
+
|
|
724
767
|
### Stepper
|
|
725
768
|
|
|
726
769
|
A re-usable stepper component to lead users through multi-step workflows (checkout, sign-up, forms, etc.).
|
|
@@ -728,12 +771,12 @@ Supports numeric, dots, progress, and labeled versions.
|
|
|
728
771
|
|
|
729
772
|
### Example
|
|
730
773
|
|
|
731
|
-
|
|
774
|
+
```tsx
|
|
732
775
|
const steps = [
|
|
733
|
-
{ title:
|
|
734
|
-
{ title:
|
|
735
|
-
{ title:
|
|
736
|
-
{ title:
|
|
776
|
+
{ title: 'Account Setup' },
|
|
777
|
+
{ title: 'Profile Info' },
|
|
778
|
+
{ title: 'Preferences' },
|
|
779
|
+
{ title: 'Confirmation' },
|
|
737
780
|
];
|
|
738
781
|
|
|
739
782
|
export default function Example() {
|
|
@@ -757,38 +800,40 @@ export default function Example() {
|
|
|
757
800
|
|
|
758
801
|
## Props
|
|
759
802
|
|
|
760
|
-
| Prop | Type
|
|
761
|
-
| -------------- |
|
|
762
|
-
| `steps` | `{ title?: string }[]`
|
|
763
|
-
| `variant` | `"numeric"
|
|
764
|
-
| `initialStep` | `number`
|
|
765
|
-
| `onStepChange` | `(step: number) => void`
|
|
766
|
-
| `showControls` | `boolean`
|
|
767
|
-
| `className` | `string`
|
|
803
|
+
| Prop | Type | Default | Description |
|
|
804
|
+
| -------------- | ------------------------ | ----------- | ---------------------------------- | ---------- | ----------- | --------------------------- |
|
|
805
|
+
| `steps` | `{ title?: string }[]` | `[]` | Steps with optional labels |
|
|
806
|
+
| `variant` | `"numeric" | "dots" | "progress" | "labeled"` | `"numeric"` | Visual style of the stepper |
|
|
807
|
+
| `initialStep` | `number` | `0` | Starting step index |
|
|
808
|
+
| `onStepChange` | `(step: number) => void` | `undefined` | Callback when step changes |
|
|
809
|
+
| `showControls` | `boolean` | `true` | Show back/next navigation controls |
|
|
810
|
+
| `className` | `string` | `undefined` | Additional Tailwind classes |
|
|
768
811
|
|
|
769
812
|
### SelectOption
|
|
813
|
+
|
|
770
814
|
A custom dropdown supporting single, multi(with chips), and grouped selections. Built with React and Tailwind CSS.
|
|
771
815
|
|
|
772
816
|
### Usage
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
import {
|
|
817
|
+
|
|
818
|
+
```tsx
|
|
819
|
+
import { useState } from 'react';
|
|
820
|
+
import { SelectOption } from '@/components/select-option';
|
|
776
821
|
|
|
777
822
|
const options = [
|
|
778
|
-
{ label:
|
|
779
|
-
{ label:
|
|
780
|
-
]
|
|
823
|
+
{ label: 'Option 1', value: 'opt1' },
|
|
824
|
+
{ label: 'Option 2', value: 'opt2' },
|
|
825
|
+
];
|
|
781
826
|
|
|
782
827
|
export default function Demo() {
|
|
783
|
-
const [single, setSingle] = useState(
|
|
784
|
-
const [multi, setMulti] = useState<string[]>([])
|
|
828
|
+
const [single, setSingle] = useState('');
|
|
829
|
+
const [multi, setMulti] = useState<string[]>([]);
|
|
785
830
|
|
|
786
831
|
return (
|
|
787
832
|
<>
|
|
788
833
|
<SelectOption
|
|
789
834
|
options={options}
|
|
790
835
|
value={single}
|
|
791
|
-
onChange={val => setSingle(val as string)}
|
|
836
|
+
onChange={(val) => setSingle(val as string)}
|
|
792
837
|
placeholder="Single select"
|
|
793
838
|
/>
|
|
794
839
|
|
|
@@ -796,12 +841,12 @@ export default function Demo() {
|
|
|
796
841
|
options={options}
|
|
797
842
|
multiple
|
|
798
843
|
value={multi}
|
|
799
|
-
onChange={val => setMulti(val as string[])}
|
|
844
|
+
onChange={(val) => setMulti(val as string[])}
|
|
800
845
|
placeholder="Multi select"
|
|
801
846
|
/>
|
|
802
847
|
</>
|
|
803
|
-
)
|
|
804
|
-
}
|
|
848
|
+
);
|
|
849
|
+
}
|
|
805
850
|
```
|
|
806
851
|
|
|
807
852
|
### Props
|
|
@@ -817,14 +862,13 @@ export default function Demo() {
|
|
|
817
862
|
| `value` | `string \| string[]` | internal | Controlled value |
|
|
818
863
|
| `onChange` | `(value: string \| string[]) => void` | optional | Callback when value changes |
|
|
819
864
|
|
|
820
|
-
|
|
821
865
|
### TypeScript
|
|
822
866
|
|
|
823
867
|
Full TypeScript support is included. No additional types package needed.
|
|
824
868
|
|
|
825
869
|
## Building
|
|
826
870
|
|
|
827
|
-
|
|
871
|
+
```tsx
|
|
828
872
|
bash
|
|
829
873
|
# Build for production
|
|
830
874
|
pnpm build
|
|
@@ -834,6 +878,6 @@ pnpm build:types
|
|
|
834
878
|
|
|
835
879
|
# Build Storybook
|
|
836
880
|
pnpm build-storybook
|
|
837
|
-
|
|
881
|
+
```
|
|
838
882
|
|
|
839
883
|
Made with ❤️ by the BusyFile team
|