banhaten 0.1.1 → 0.1.2
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 +20 -8
- package/package.json +8 -2
- package/registry/components/autocomplete.tsx +637 -0
- package/registry/components/avatar.tsx +258 -22
- package/registry/components/badge.tsx +97 -35
- package/registry/components/date-picker-state.ts +253 -0
- package/registry/components/date-picker.tsx +115 -158
- package/registry/components/expanded/EmptyState.tsx +155 -0
- package/registry/components/expanded/emptyState.css +111 -0
- package/registry/components/expanded/slideout.css +1 -0
- package/registry/components/expanded/table.css +1 -0
- package/registry/components/input-otp.tsx +574 -0
- package/registry/components/input.tsx +21 -11
- package/registry/components/menu.tsx +371 -8
- package/registry/components/popover.tsx +840 -0
- package/registry/components/select.tsx +4 -0
- package/registry/components/skeleton.css +57 -0
- package/registry/components/skeleton.tsx +482 -0
- package/registry/components/spinner.tsx +79 -11
- package/registry/components/textarea.tsx +1 -1
- package/registry/components/tooltip.tsx +4 -0
- package/registry/examples/autocomplete-demo.tsx +109 -0
- package/registry/examples/avatar-demo.tsx +102 -47
- package/registry/examples/badge-demo.tsx +16 -0
- package/registry/examples/expanded/command-bar-demo.tsx +236 -0
- package/registry/examples/expanded/empty-state-demo.tsx +39 -0
- package/registry/examples/input-demo.tsx +1 -1
- package/registry/examples/input-otp-demo.tsx +72 -0
- package/registry/examples/menu-demo.tsx +101 -88
- package/registry/examples/popover-demo.tsx +546 -0
- package/registry/examples/select-demo.tsx +1 -1
- package/registry/examples/skeleton-demo.tsx +56 -0
- package/registry/examples/spinner-demo.tsx +23 -1
- package/registry/examples/textarea-demo.tsx +1 -1
- package/registry/index.json +240 -8
- package/registry/styles/globals.css +88 -0
- package/src/cli/index.js +997 -62
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { InputOTP } from "@/components/ui/input-otp"
|
|
2
|
+
|
|
3
|
+
export function InputOTPDemo() {
|
|
4
|
+
return (
|
|
5
|
+
<div className="grid gap-6">
|
|
6
|
+
<div className="flex flex-wrap items-start gap-6">
|
|
7
|
+
<InputOTP
|
|
8
|
+
label="Verification code"
|
|
9
|
+
message="Enter the code from your authenticator."
|
|
10
|
+
name="verification-code"
|
|
11
|
+
/>
|
|
12
|
+
<InputOTP
|
|
13
|
+
defaultValue="482159"
|
|
14
|
+
label="Filled code"
|
|
15
|
+
state="filled"
|
|
16
|
+
/>
|
|
17
|
+
<InputOTP
|
|
18
|
+
defaultValue="482"
|
|
19
|
+
errorMessage="The code is incomplete."
|
|
20
|
+
label="Recovery code"
|
|
21
|
+
state="error"
|
|
22
|
+
/>
|
|
23
|
+
<InputOTP
|
|
24
|
+
defaultValue="482159"
|
|
25
|
+
label="Disabled code"
|
|
26
|
+
state="disabled"
|
|
27
|
+
/>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div className="flex flex-wrap items-start gap-6">
|
|
31
|
+
<InputOTP
|
|
32
|
+
defaultValue="482159"
|
|
33
|
+
label="Masked code"
|
|
34
|
+
mask
|
|
35
|
+
state="filled"
|
|
36
|
+
/>
|
|
37
|
+
<InputOTP
|
|
38
|
+
defaultValue="4821"
|
|
39
|
+
groupSize={2}
|
|
40
|
+
label="Four digit code"
|
|
41
|
+
length={4}
|
|
42
|
+
size="md"
|
|
43
|
+
state="filled"
|
|
44
|
+
variant="soft"
|
|
45
|
+
/>
|
|
46
|
+
<InputOTP
|
|
47
|
+
defaultValue="48215983"
|
|
48
|
+
groupSize={4}
|
|
49
|
+
label="Backup code"
|
|
50
|
+
length={8}
|
|
51
|
+
state="filled"
|
|
52
|
+
/>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div dir="rtl" className="flex flex-wrap items-start gap-6">
|
|
56
|
+
<InputOTP
|
|
57
|
+
defaultValue="482159"
|
|
58
|
+
dir="rtl"
|
|
59
|
+
label="رمز التحقق"
|
|
60
|
+
message="أدخل الرمز المرسل إليك."
|
|
61
|
+
state="filled"
|
|
62
|
+
/>
|
|
63
|
+
<InputOTP
|
|
64
|
+
dir="rtl"
|
|
65
|
+
errorMessage="الرمز غير مكتمل."
|
|
66
|
+
label="رمز الأمان"
|
|
67
|
+
state="error"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
@@ -1,109 +1,122 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
ArchiveIcon,
|
|
3
|
+
ChevronDownIcon,
|
|
4
|
+
ChevronRightIcon,
|
|
5
|
+
CopyIcon,
|
|
6
|
+
DownloadIcon,
|
|
7
|
+
FilePlusIcon,
|
|
8
|
+
FolderIcon,
|
|
9
|
+
PencilIcon,
|
|
10
|
+
PanelRightIcon,
|
|
11
|
+
PlusIcon,
|
|
12
|
+
} from "lucide-react"
|
|
2
13
|
|
|
14
|
+
import { Button } from "@/components/ui/button"
|
|
3
15
|
import {
|
|
4
|
-
|
|
5
|
-
MenuCaption,
|
|
16
|
+
MenuContent,
|
|
6
17
|
MenuItem,
|
|
7
|
-
MenuItemAction,
|
|
8
|
-
MenuItemAvatar,
|
|
9
|
-
MenuItemBadge,
|
|
10
|
-
MenuItemDescription,
|
|
11
18
|
MenuItemIcon,
|
|
12
19
|
MenuItemMeta,
|
|
13
20
|
MenuItemSwitch,
|
|
14
21
|
MenuItemText,
|
|
15
22
|
MenuItemTitle,
|
|
16
23
|
MenuLabel,
|
|
17
|
-
|
|
24
|
+
MenuPortal,
|
|
25
|
+
MenuRoot,
|
|
18
26
|
MenuSeparator,
|
|
27
|
+
MenuSub,
|
|
28
|
+
MenuSubContent,
|
|
29
|
+
MenuSubTrigger,
|
|
30
|
+
MenuTrigger,
|
|
19
31
|
} from "@/components/ui/menu"
|
|
20
32
|
|
|
21
33
|
export function MenuDemo() {
|
|
22
34
|
return (
|
|
23
|
-
<div className="flex
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
</MenuItem>
|
|
82
|
-
|
|
83
|
-
<MenuItem kind="progress">
|
|
84
|
-
<MenuProgress indicator="40%" label="Label" optional="(Optional)" />
|
|
85
|
-
</MenuItem>
|
|
86
|
-
<MenuSeparator />
|
|
87
|
-
<MenuItem kind="button">Button</MenuItem>
|
|
88
|
-
<MenuLabel caption="Caption" label="Label" />
|
|
89
|
-
<MenuCaption>Lorem ipsum dolor sit amet</MenuCaption>
|
|
90
|
-
</Menu>
|
|
91
|
-
|
|
92
|
-
<div dir="rtl">
|
|
93
|
-
<Menu aria-label="Arabic menu">
|
|
94
|
-
{Array.from({ length: 5 }).map((_, index) => (
|
|
95
|
-
<MenuItem key={index}>
|
|
35
|
+
<div className="flex min-h-[var(--bh-space-16xl-256)] items-start justify-center p-6">
|
|
36
|
+
<MenuRoot>
|
|
37
|
+
<MenuTrigger asChild>
|
|
38
|
+
<Button size="sm" variant="outline">
|
|
39
|
+
<PlusIcon aria-hidden="true" data-icon="inline-start" />
|
|
40
|
+
Actions
|
|
41
|
+
<ChevronDownIcon aria-hidden="true" data-icon="inline-end" />
|
|
42
|
+
</Button>
|
|
43
|
+
</MenuTrigger>
|
|
44
|
+
<MenuPortal>
|
|
45
|
+
<MenuContent align="start" aria-label="Actions menu" sideOffset={6}>
|
|
46
|
+
<MenuLabel label="Actions" />
|
|
47
|
+
<MenuItem>
|
|
48
|
+
<MenuItemIcon>
|
|
49
|
+
<FilePlusIcon aria-hidden="true" />
|
|
50
|
+
</MenuItemIcon>
|
|
51
|
+
<MenuItemText>
|
|
52
|
+
<MenuItemTitle>New file</MenuItemTitle>
|
|
53
|
+
</MenuItemText>
|
|
54
|
+
<MenuItemMeta>N</MenuItemMeta>
|
|
55
|
+
</MenuItem>
|
|
56
|
+
<MenuItem>
|
|
57
|
+
<MenuItemIcon>
|
|
58
|
+
<PencilIcon aria-hidden="true" />
|
|
59
|
+
</MenuItemIcon>
|
|
60
|
+
<MenuItemText>
|
|
61
|
+
<MenuItemTitle>Rename</MenuItemTitle>
|
|
62
|
+
</MenuItemText>
|
|
63
|
+
<MenuItemMeta>R</MenuItemMeta>
|
|
64
|
+
</MenuItem>
|
|
65
|
+
<MenuItem>
|
|
66
|
+
<MenuItemIcon>
|
|
67
|
+
<CopyIcon aria-hidden="true" />
|
|
68
|
+
</MenuItemIcon>
|
|
69
|
+
<MenuItemText>
|
|
70
|
+
<MenuItemTitle>Duplicate</MenuItemTitle>
|
|
71
|
+
</MenuItemText>
|
|
72
|
+
</MenuItem>
|
|
73
|
+
<MenuSub>
|
|
74
|
+
<MenuSubTrigger>
|
|
75
|
+
<MenuItemIcon>
|
|
76
|
+
<FolderIcon aria-hidden="true" />
|
|
77
|
+
</MenuItemIcon>
|
|
78
|
+
<MenuItemText>
|
|
79
|
+
<MenuItemTitle>Move to</MenuItemTitle>
|
|
80
|
+
</MenuItemText>
|
|
81
|
+
<MenuItemIcon position="trailing">
|
|
82
|
+
<ChevronRightIcon aria-hidden="true" data-rtl-flip="true" />
|
|
83
|
+
</MenuItemIcon>
|
|
84
|
+
</MenuSubTrigger>
|
|
85
|
+
<MenuSubContent aria-label="Move destination menu">
|
|
86
|
+
<MenuItem>Design system</MenuItem>
|
|
87
|
+
<MenuItem>Templates</MenuItem>
|
|
88
|
+
<MenuItem>Archive</MenuItem>
|
|
89
|
+
</MenuSubContent>
|
|
90
|
+
</MenuSub>
|
|
91
|
+
<MenuSeparator />
|
|
92
|
+
<MenuItem>
|
|
96
93
|
<MenuItemIcon>
|
|
97
|
-
<
|
|
94
|
+
<PanelRightIcon aria-hidden="true" />
|
|
98
95
|
</MenuItemIcon>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
96
|
+
<MenuItemText>
|
|
97
|
+
<MenuItemTitle>Show sidebar</MenuItemTitle>
|
|
98
|
+
</MenuItemText>
|
|
99
|
+
<MenuItemSwitch active />
|
|
100
|
+
</MenuItem>
|
|
101
|
+
<MenuItem>
|
|
102
|
+
<MenuItemIcon>
|
|
103
|
+
<DownloadIcon aria-hidden="true" />
|
|
104
|
+
</MenuItemIcon>
|
|
105
|
+
<MenuItemText>
|
|
106
|
+
<MenuItemTitle>Export</MenuItemTitle>
|
|
107
|
+
</MenuItemText>
|
|
108
|
+
</MenuItem>
|
|
109
|
+
<MenuItem disabled>
|
|
110
|
+
<MenuItemIcon>
|
|
111
|
+
<ArchiveIcon aria-hidden="true" />
|
|
102
112
|
</MenuItemIcon>
|
|
113
|
+
<MenuItemText>
|
|
114
|
+
<MenuItemTitle>Archive</MenuItemTitle>
|
|
115
|
+
</MenuItemText>
|
|
103
116
|
</MenuItem>
|
|
104
|
-
|
|
105
|
-
</
|
|
106
|
-
</
|
|
117
|
+
</MenuContent>
|
|
118
|
+
</MenuPortal>
|
|
119
|
+
</MenuRoot>
|
|
107
120
|
</div>
|
|
108
121
|
)
|
|
109
122
|
}
|