@camox/ui 0.36.0 → 0.36.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/dist/components/alert-dialog.d.ts +58 -0
- package/dist/components/alert-dialog.js +96 -0
- package/dist/components/alert.d.ts +28 -0
- package/dist/components/alert.js +45 -0
- package/dist/components/avatar.d.ts +34 -0
- package/dist/components/avatar.js +52 -0
- package/dist/components/badge.d.ts +19 -0
- package/dist/components/badge.js +44 -0
- package/dist/components/button-group.d.ts +28 -0
- package/dist/components/button-group.js +43 -0
- package/dist/components/button.d.ts +18 -0
- package/dist/components/button.js +46 -0
- package/dist/components/command.d.ts +58 -0
- package/dist/components/command.js +89 -0
- package/dist/components/dialog.d.ts +53 -0
- package/dist/components/dialog.js +93 -0
- package/dist/components/dropdown-menu.d.ts +90 -0
- package/dist/components/dropdown-menu.js +138 -0
- package/dist/components/floating-toolbar.d.ts +9 -0
- package/dist/components/floating-toolbar.js +15 -0
- package/dist/components/input-group.d.ts +45 -0
- package/dist/components/input-group.js +82 -0
- package/dist/components/input.d.ts +11 -0
- package/dist/components/input.js +17 -0
- package/dist/components/kbd.d.ts +13 -0
- package/dist/components/kbd.js +21 -0
- package/dist/components/label.d.ts +10 -0
- package/dist/components/label.js +15 -0
- package/dist/components/panel.d.ts +50 -0
- package/dist/components/panel.js +56 -0
- package/dist/components/popover.d.ts +34 -0
- package/dist/components/popover.js +57 -0
- package/dist/components/select.d.ts +55 -0
- package/dist/components/select.js +99 -0
- package/dist/components/separator.d.ts +11 -0
- package/dist/components/separator.js +16 -0
- package/dist/components/sheet.d.ts +46 -0
- package/dist/components/sheet.js +93 -0
- package/dist/components/skeleton.d.ts +9 -0
- package/dist/components/skeleton.js +14 -0
- package/dist/components/spinner.d.ts +9 -0
- package/dist/components/spinner.js +16 -0
- package/dist/components/switch.d.ts +13 -0
- package/dist/components/switch.js +20 -0
- package/dist/components/tabs.d.ts +29 -0
- package/dist/components/tabs.js +46 -0
- package/dist/components/textarea.d.ts +10 -0
- package/dist/components/textarea.js +15 -0
- package/dist/components/toaster.d.ts +11 -0
- package/dist/components/toaster.js +21 -0
- package/dist/components/toggle.d.ts +18 -0
- package/dist/components/toggle.js +37 -0
- package/dist/components/tooltip.d.ts +25 -0
- package/dist/components/tooltip.js +42 -0
- package/dist/lib/utils.d.ts +10 -0
- package/dist/lib/utils.js +14 -0
- package/package.json +61 -58
- package/src/components/alert-dialog.tsx +0 -160
- package/src/components/alert.tsx +0 -73
- package/src/components/avatar.tsx +0 -91
- package/src/components/badge.tsx +0 -56
- package/src/components/button-group.tsx +0 -78
- package/src/components/button.tsx +0 -58
- package/src/components/command.tsx +0 -176
- package/src/components/dialog.tsx +0 -135
- package/src/components/dropdown-menu.tsx +0 -256
- package/src/components/floating-toolbar.tsx +0 -17
- package/src/components/input-group.tsx +0 -146
- package/src/components/input.tsx +0 -20
- package/src/components/kbd.tsx +0 -26
- package/src/components/label.tsx +0 -18
- package/src/components/panel.tsx +0 -109
- package/src/components/popover.tsx +0 -80
- package/src/components/select.tsx +0 -188
- package/src/components/separator.tsx +0 -20
- package/src/components/sheet.tsx +0 -127
- package/src/components/skeleton.tsx +0 -13
- package/src/components/spinner.tsx +0 -16
- package/src/components/switch.tsx +0 -30
- package/src/components/tabs.tsx +0 -73
- package/src/components/textarea.tsx +0 -18
- package/src/components/toaster.tsx +0 -24
- package/src/components/toggle.tsx +0 -43
- package/src/components/tooltip.tsx +0 -52
- package/src/lib/utils.ts +0 -15
- package/src/styles/globals.css +0 -144
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
import { Menu as MenuPrimitive } from "@base-ui/react/menu";
|
|
2
|
-
import { ChevronRightIcon, CheckIcon } from "lucide-react";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
|
|
5
|
-
import { cn } from "../lib/utils";
|
|
6
|
-
|
|
7
|
-
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
|
8
|
-
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
|
12
|
-
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
|
16
|
-
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
function DropdownMenuContent({
|
|
20
|
-
align = "start",
|
|
21
|
-
alignOffset = 0,
|
|
22
|
-
side = "bottom",
|
|
23
|
-
sideOffset = 4,
|
|
24
|
-
className,
|
|
25
|
-
...props
|
|
26
|
-
}: MenuPrimitive.Popup.Props &
|
|
27
|
-
Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
|
|
28
|
-
return (
|
|
29
|
-
<MenuPrimitive.Portal>
|
|
30
|
-
<MenuPrimitive.Positioner
|
|
31
|
-
className="isolate z-50 outline-none"
|
|
32
|
-
align={align}
|
|
33
|
-
alignOffset={alignOffset}
|
|
34
|
-
side={side}
|
|
35
|
-
sideOffset={sideOffset}
|
|
36
|
-
>
|
|
37
|
-
<MenuPrimitive.Popup
|
|
38
|
-
data-slot="dropdown-menu-content"
|
|
39
|
-
className={cn(
|
|
40
|
-
"z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
41
|
-
className,
|
|
42
|
-
)}
|
|
43
|
-
{...props}
|
|
44
|
-
/>
|
|
45
|
-
</MenuPrimitive.Positioner>
|
|
46
|
-
</MenuPrimitive.Portal>
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
|
51
|
-
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
function DropdownMenuLabel({
|
|
55
|
-
className,
|
|
56
|
-
inset,
|
|
57
|
-
...props
|
|
58
|
-
}: MenuPrimitive.GroupLabel.Props & {
|
|
59
|
-
inset?: boolean;
|
|
60
|
-
}) {
|
|
61
|
-
return (
|
|
62
|
-
<MenuPrimitive.GroupLabel
|
|
63
|
-
data-slot="dropdown-menu-label"
|
|
64
|
-
data-inset={inset}
|
|
65
|
-
className={cn(
|
|
66
|
-
"px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
|
|
67
|
-
className,
|
|
68
|
-
)}
|
|
69
|
-
{...props}
|
|
70
|
-
/>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function DropdownMenuItem({
|
|
75
|
-
className,
|
|
76
|
-
inset,
|
|
77
|
-
variant = "default",
|
|
78
|
-
...props
|
|
79
|
-
}: MenuPrimitive.Item.Props & {
|
|
80
|
-
inset?: boolean;
|
|
81
|
-
variant?: "default" | "destructive";
|
|
82
|
-
}) {
|
|
83
|
-
return (
|
|
84
|
-
<MenuPrimitive.Item
|
|
85
|
-
data-slot="dropdown-menu-item"
|
|
86
|
-
data-inset={inset}
|
|
87
|
-
data-variant={variant}
|
|
88
|
-
className={cn(
|
|
89
|
-
"group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
|
90
|
-
className,
|
|
91
|
-
)}
|
|
92
|
-
{...props}
|
|
93
|
-
/>
|
|
94
|
-
);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
|
98
|
-
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function DropdownMenuSubTrigger({
|
|
102
|
-
className,
|
|
103
|
-
inset,
|
|
104
|
-
children,
|
|
105
|
-
...props
|
|
106
|
-
}: MenuPrimitive.SubmenuTrigger.Props & {
|
|
107
|
-
inset?: boolean;
|
|
108
|
-
}) {
|
|
109
|
-
return (
|
|
110
|
-
<MenuPrimitive.SubmenuTrigger
|
|
111
|
-
data-slot="dropdown-menu-sub-trigger"
|
|
112
|
-
data-inset={inset}
|
|
113
|
-
className={cn(
|
|
114
|
-
"flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
115
|
-
className,
|
|
116
|
-
)}
|
|
117
|
-
{...props}
|
|
118
|
-
>
|
|
119
|
-
{children}
|
|
120
|
-
<ChevronRightIcon className="ml-auto" />
|
|
121
|
-
</MenuPrimitive.SubmenuTrigger>
|
|
122
|
-
);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
function DropdownMenuSubContent({
|
|
126
|
-
align = "start",
|
|
127
|
-
alignOffset = -3,
|
|
128
|
-
side = "right",
|
|
129
|
-
sideOffset = 0,
|
|
130
|
-
className,
|
|
131
|
-
...props
|
|
132
|
-
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
|
133
|
-
return (
|
|
134
|
-
<DropdownMenuContent
|
|
135
|
-
data-slot="dropdown-menu-sub-content"
|
|
136
|
-
className={cn(
|
|
137
|
-
"w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
138
|
-
className,
|
|
139
|
-
)}
|
|
140
|
-
align={align}
|
|
141
|
-
alignOffset={alignOffset}
|
|
142
|
-
side={side}
|
|
143
|
-
sideOffset={sideOffset}
|
|
144
|
-
{...props}
|
|
145
|
-
/>
|
|
146
|
-
);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
function DropdownMenuCheckboxItem({
|
|
150
|
-
className,
|
|
151
|
-
children,
|
|
152
|
-
checked,
|
|
153
|
-
inset,
|
|
154
|
-
...props
|
|
155
|
-
}: MenuPrimitive.CheckboxItem.Props & {
|
|
156
|
-
inset?: boolean;
|
|
157
|
-
}) {
|
|
158
|
-
return (
|
|
159
|
-
<MenuPrimitive.CheckboxItem
|
|
160
|
-
data-slot="dropdown-menu-checkbox-item"
|
|
161
|
-
data-inset={inset}
|
|
162
|
-
className={cn(
|
|
163
|
-
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
164
|
-
className,
|
|
165
|
-
)}
|
|
166
|
-
checked={checked}
|
|
167
|
-
{...props}
|
|
168
|
-
>
|
|
169
|
-
<span
|
|
170
|
-
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
|
171
|
-
data-slot="dropdown-menu-checkbox-item-indicator"
|
|
172
|
-
>
|
|
173
|
-
<MenuPrimitive.CheckboxItemIndicator>
|
|
174
|
-
<CheckIcon />
|
|
175
|
-
</MenuPrimitive.CheckboxItemIndicator>
|
|
176
|
-
</span>
|
|
177
|
-
{children}
|
|
178
|
-
</MenuPrimitive.CheckboxItem>
|
|
179
|
-
);
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
|
183
|
-
return <MenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
function DropdownMenuRadioItem({
|
|
187
|
-
className,
|
|
188
|
-
children,
|
|
189
|
-
inset,
|
|
190
|
-
...props
|
|
191
|
-
}: MenuPrimitive.RadioItem.Props & {
|
|
192
|
-
inset?: boolean;
|
|
193
|
-
}) {
|
|
194
|
-
return (
|
|
195
|
-
<MenuPrimitive.RadioItem
|
|
196
|
-
data-slot="dropdown-menu-radio-item"
|
|
197
|
-
data-inset={inset}
|
|
198
|
-
className={cn(
|
|
199
|
-
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
200
|
-
className,
|
|
201
|
-
)}
|
|
202
|
-
{...props}
|
|
203
|
-
>
|
|
204
|
-
<span
|
|
205
|
-
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
|
206
|
-
data-slot="dropdown-menu-radio-item-indicator"
|
|
207
|
-
>
|
|
208
|
-
<MenuPrimitive.RadioItemIndicator>
|
|
209
|
-
<CheckIcon />
|
|
210
|
-
</MenuPrimitive.RadioItemIndicator>
|
|
211
|
-
</span>
|
|
212
|
-
{children}
|
|
213
|
-
</MenuPrimitive.RadioItem>
|
|
214
|
-
);
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
|
|
218
|
-
return (
|
|
219
|
-
<MenuPrimitive.Separator
|
|
220
|
-
data-slot="dropdown-menu-separator"
|
|
221
|
-
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
|
222
|
-
{...props}
|
|
223
|
-
/>
|
|
224
|
-
);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
|
|
228
|
-
return (
|
|
229
|
-
<span
|
|
230
|
-
data-slot="dropdown-menu-shortcut"
|
|
231
|
-
className={cn(
|
|
232
|
-
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
|
233
|
-
className,
|
|
234
|
-
)}
|
|
235
|
-
{...props}
|
|
236
|
-
/>
|
|
237
|
-
);
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
export {
|
|
241
|
-
DropdownMenu,
|
|
242
|
-
DropdownMenuPortal,
|
|
243
|
-
DropdownMenuTrigger,
|
|
244
|
-
DropdownMenuContent,
|
|
245
|
-
DropdownMenuGroup,
|
|
246
|
-
DropdownMenuLabel,
|
|
247
|
-
DropdownMenuItem,
|
|
248
|
-
DropdownMenuCheckboxItem,
|
|
249
|
-
DropdownMenuRadioGroup,
|
|
250
|
-
DropdownMenuRadioItem,
|
|
251
|
-
DropdownMenuSeparator,
|
|
252
|
-
DropdownMenuShortcut,
|
|
253
|
-
DropdownMenuSub,
|
|
254
|
-
DropdownMenuSubTrigger,
|
|
255
|
-
DropdownMenuSubContent,
|
|
256
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { cn } from "../lib/utils";
|
|
2
|
-
|
|
3
|
-
function FloatingToolbar({ className, ...props }: React.ComponentProps<"menu">) {
|
|
4
|
-
return (
|
|
5
|
-
<menu
|
|
6
|
-
role="toolbar"
|
|
7
|
-
data-slot="floating-toolbar"
|
|
8
|
-
className={cn(
|
|
9
|
-
"absolute left-[50%] z-30 flex translate-x-[-50%] items-center rounded-xl border-1 bg-background p-2 shadow-2xl transition-all duration-200",
|
|
10
|
-
className,
|
|
11
|
-
)}
|
|
12
|
-
{...props}
|
|
13
|
-
/>
|
|
14
|
-
);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export { FloatingToolbar };
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import { cva, type VariantProps } from "class-variance-authority";
|
|
4
|
-
import * as React from "react";
|
|
5
|
-
|
|
6
|
-
import { cn } from "../lib/utils";
|
|
7
|
-
import { Button } from "./button";
|
|
8
|
-
import { Input } from "./input";
|
|
9
|
-
import { Textarea } from "./textarea";
|
|
10
|
-
|
|
11
|
-
function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
12
|
-
return (
|
|
13
|
-
<div
|
|
14
|
-
data-slot="input-group"
|
|
15
|
-
role="group"
|
|
16
|
-
className={cn(
|
|
17
|
-
"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
|
|
18
|
-
className,
|
|
19
|
-
)}
|
|
20
|
-
{...props}
|
|
21
|
-
/>
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const inputGroupAddonVariants = cva(
|
|
26
|
-
"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
|
|
27
|
-
{
|
|
28
|
-
variants: {
|
|
29
|
-
align: {
|
|
30
|
-
"inline-start": "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
|
|
31
|
-
"inline-end": "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
|
|
32
|
-
"block-start":
|
|
33
|
-
"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
|
|
34
|
-
"block-end":
|
|
35
|
-
"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
defaultVariants: {
|
|
39
|
-
align: "inline-start",
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
);
|
|
43
|
-
|
|
44
|
-
function InputGroupAddon({
|
|
45
|
-
className,
|
|
46
|
-
align = "inline-start",
|
|
47
|
-
...props
|
|
48
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
|
|
49
|
-
return (
|
|
50
|
-
<div
|
|
51
|
-
role="group"
|
|
52
|
-
data-slot="input-group-addon"
|
|
53
|
-
data-align={align}
|
|
54
|
-
className={cn(inputGroupAddonVariants({ align }), className)}
|
|
55
|
-
onClick={(e) => {
|
|
56
|
-
if ((e.target as HTMLElement).closest("button")) {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
e.currentTarget.parentElement?.querySelector("input")?.focus();
|
|
60
|
-
}}
|
|
61
|
-
{...props}
|
|
62
|
-
/>
|
|
63
|
-
);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
|
|
67
|
-
variants: {
|
|
68
|
-
size: {
|
|
69
|
-
xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
|
|
70
|
-
sm: "",
|
|
71
|
-
"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
|
|
72
|
-
"icon-sm": "size-8 p-0 has-[>svg]:p-0",
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
defaultVariants: {
|
|
76
|
-
size: "xs",
|
|
77
|
-
},
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
function InputGroupButton({
|
|
81
|
-
className,
|
|
82
|
-
type = "button",
|
|
83
|
-
variant = "ghost",
|
|
84
|
-
size = "xs",
|
|
85
|
-
...props
|
|
86
|
-
}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
|
|
87
|
-
VariantProps<typeof inputGroupButtonVariants> & {
|
|
88
|
-
type?: "button" | "submit" | "reset";
|
|
89
|
-
}) {
|
|
90
|
-
return (
|
|
91
|
-
<Button
|
|
92
|
-
type={type}
|
|
93
|
-
data-size={size}
|
|
94
|
-
variant={variant}
|
|
95
|
-
className={cn(inputGroupButtonVariants({ size }), className)}
|
|
96
|
-
{...props}
|
|
97
|
-
/>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
|
|
102
|
-
return (
|
|
103
|
-
<span
|
|
104
|
-
className={cn(
|
|
105
|
-
"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
106
|
-
className,
|
|
107
|
-
)}
|
|
108
|
-
{...props}
|
|
109
|
-
/>
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
|
|
114
|
-
return (
|
|
115
|
-
<Input
|
|
116
|
-
data-slot="input-group-control"
|
|
117
|
-
className={cn(
|
|
118
|
-
"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
|
|
119
|
-
className,
|
|
120
|
-
)}
|
|
121
|
-
{...props}
|
|
122
|
-
/>
|
|
123
|
-
);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
|
127
|
-
return (
|
|
128
|
-
<Textarea
|
|
129
|
-
data-slot="input-group-control"
|
|
130
|
-
className={cn(
|
|
131
|
-
"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
|
|
132
|
-
className,
|
|
133
|
-
)}
|
|
134
|
-
{...props}
|
|
135
|
-
/>
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
export {
|
|
140
|
-
InputGroup,
|
|
141
|
-
InputGroupAddon,
|
|
142
|
-
InputGroupButton,
|
|
143
|
-
InputGroupText,
|
|
144
|
-
InputGroupInput,
|
|
145
|
-
InputGroupTextarea,
|
|
146
|
-
};
|
package/src/components/input.tsx
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Input as InputPrimitive } from "@base-ui/react/input";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
|
7
|
-
return (
|
|
8
|
-
<InputPrimitive
|
|
9
|
-
type={type}
|
|
10
|
-
data-slot="input"
|
|
11
|
-
className={cn(
|
|
12
|
-
"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
13
|
-
className,
|
|
14
|
-
)}
|
|
15
|
-
{...props}
|
|
16
|
-
/>
|
|
17
|
-
);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export { Input };
|
package/src/components/kbd.tsx
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { cn } from "../lib/utils";
|
|
2
|
-
|
|
3
|
-
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
|
|
4
|
-
return (
|
|
5
|
-
<kbd
|
|
6
|
-
data-slot="kbd"
|
|
7
|
-
className={cn(
|
|
8
|
-
"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
|
|
9
|
-
className,
|
|
10
|
-
)}
|
|
11
|
-
{...props}
|
|
12
|
-
/>
|
|
13
|
-
);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
17
|
-
return (
|
|
18
|
-
<kbd
|
|
19
|
-
data-slot="kbd-group"
|
|
20
|
-
className={cn("inline-flex items-center gap-1", className)}
|
|
21
|
-
{...props}
|
|
22
|
-
/>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export { Kbd, KbdGroup };
|
package/src/components/label.tsx
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils";
|
|
4
|
-
|
|
5
|
-
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
|
6
|
-
return (
|
|
7
|
-
<label
|
|
8
|
-
data-slot="label"
|
|
9
|
-
className={cn(
|
|
10
|
-
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
|
11
|
-
className,
|
|
12
|
-
)}
|
|
13
|
-
{...props}
|
|
14
|
-
/>
|
|
15
|
-
);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { Label };
|
package/src/components/panel.tsx
DELETED
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
import { cn } from "../lib/utils";
|
|
4
|
-
|
|
5
|
-
export const Panel = ({
|
|
6
|
-
children,
|
|
7
|
-
className,
|
|
8
|
-
render,
|
|
9
|
-
...props
|
|
10
|
-
}: Omit<React.ComponentProps<"section">, "children"> & {
|
|
11
|
-
render?: React.ReactElement<{ className?: string }>;
|
|
12
|
-
children?: React.ReactNode;
|
|
13
|
-
}) => {
|
|
14
|
-
if (render) {
|
|
15
|
-
return React.cloneElement(render, {
|
|
16
|
-
...props,
|
|
17
|
-
className: cn(
|
|
18
|
-
"flex flex-col bg-background border-2 border-border shadow-xl rounded-lg overflow-hidden",
|
|
19
|
-
className,
|
|
20
|
-
render.props.className,
|
|
21
|
-
),
|
|
22
|
-
children,
|
|
23
|
-
} as Record<string, unknown>);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
return (
|
|
27
|
-
<section
|
|
28
|
-
className={cn(
|
|
29
|
-
"flex flex-col bg-background border-2 border-border shadow-xl rounded-lg overflow-hidden",
|
|
30
|
-
className,
|
|
31
|
-
)}
|
|
32
|
-
{...props}
|
|
33
|
-
>
|
|
34
|
-
{children}
|
|
35
|
-
</section>
|
|
36
|
-
);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export const PanelHeader = ({
|
|
40
|
-
children,
|
|
41
|
-
className,
|
|
42
|
-
render,
|
|
43
|
-
...props
|
|
44
|
-
}: Omit<React.ComponentProps<"header">, "children"> & {
|
|
45
|
-
render?: React.ReactElement<{ className?: string }>;
|
|
46
|
-
children?: React.ReactNode;
|
|
47
|
-
}) => {
|
|
48
|
-
if (render) {
|
|
49
|
-
return React.cloneElement(render, {
|
|
50
|
-
...props,
|
|
51
|
-
className: cn("p-4 border-b-2 border-border", className, render.props.className),
|
|
52
|
-
children,
|
|
53
|
-
} as Record<string, unknown>);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
return (
|
|
57
|
-
<header className={cn("p-4 border-b-2 border-border", className)} {...props}>
|
|
58
|
-
{children}
|
|
59
|
-
</header>
|
|
60
|
-
);
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
export const PanelTitle = ({
|
|
64
|
-
children,
|
|
65
|
-
className,
|
|
66
|
-
render,
|
|
67
|
-
...props
|
|
68
|
-
}: Omit<React.ComponentProps<"h3">, "children"> & {
|
|
69
|
-
render?: React.ReactElement<{ className?: string }>;
|
|
70
|
-
children?: React.ReactNode;
|
|
71
|
-
}) => {
|
|
72
|
-
if (render) {
|
|
73
|
-
return React.cloneElement(render, {
|
|
74
|
-
...props,
|
|
75
|
-
className: cn("text-lg leading-none font-semibold", className, render.props.className),
|
|
76
|
-
children,
|
|
77
|
-
} as Record<string, unknown>);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
return (
|
|
81
|
-
<h3 className={cn("text-lg leading-none font-semibold", className)} {...props}>
|
|
82
|
-
{children}
|
|
83
|
-
</h3>
|
|
84
|
-
);
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export const PanelContent = ({
|
|
88
|
-
children,
|
|
89
|
-
className,
|
|
90
|
-
render,
|
|
91
|
-
...props
|
|
92
|
-
}: Omit<React.ComponentProps<"main">, "children"> & {
|
|
93
|
-
render?: React.ReactElement<{ className?: string }>;
|
|
94
|
-
children?: React.ReactNode;
|
|
95
|
-
}) => {
|
|
96
|
-
if (render) {
|
|
97
|
-
return React.cloneElement(render, {
|
|
98
|
-
...props,
|
|
99
|
-
className: cn("grow overflow-auto", className, render.props.className),
|
|
100
|
-
children,
|
|
101
|
-
} as Record<string, unknown>);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
return (
|
|
105
|
-
<main className={cn("grow overflow-auto", className)} {...props}>
|
|
106
|
-
{children}
|
|
107
|
-
</main>
|
|
108
|
-
);
|
|
109
|
-
};
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import { cn } from "../lib/utils";
|
|
5
|
-
|
|
6
|
-
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
|
|
7
|
-
return <PopoverPrimitive.Root data-slot="popover" {...props} />;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
|
|
11
|
-
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function PopoverContent({
|
|
15
|
-
className,
|
|
16
|
-
align = "center",
|
|
17
|
-
alignOffset = 0,
|
|
18
|
-
side = "bottom",
|
|
19
|
-
sideOffset = 4,
|
|
20
|
-
anchor,
|
|
21
|
-
...props
|
|
22
|
-
}: PopoverPrimitive.Popup.Props &
|
|
23
|
-
Pick<
|
|
24
|
-
PopoverPrimitive.Positioner.Props,
|
|
25
|
-
"align" | "alignOffset" | "side" | "sideOffset" | "anchor"
|
|
26
|
-
>) {
|
|
27
|
-
return (
|
|
28
|
-
<PopoverPrimitive.Portal>
|
|
29
|
-
<PopoverPrimitive.Positioner
|
|
30
|
-
align={align}
|
|
31
|
-
alignOffset={alignOffset}
|
|
32
|
-
side={side}
|
|
33
|
-
sideOffset={sideOffset}
|
|
34
|
-
anchor={anchor}
|
|
35
|
-
className="isolate z-50"
|
|
36
|
-
>
|
|
37
|
-
<PopoverPrimitive.Popup
|
|
38
|
-
data-slot="popover-content"
|
|
39
|
-
className={cn(
|
|
40
|
-
"z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
|
41
|
-
className,
|
|
42
|
-
)}
|
|
43
|
-
{...props}
|
|
44
|
-
/>
|
|
45
|
-
</PopoverPrimitive.Positioner>
|
|
46
|
-
</PopoverPrimitive.Portal>
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
51
|
-
return (
|
|
52
|
-
<div
|
|
53
|
-
data-slot="popover-header"
|
|
54
|
-
className={cn("flex flex-col gap-1 text-sm", className)}
|
|
55
|
-
{...props}
|
|
56
|
-
/>
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
|
|
61
|
-
return (
|
|
62
|
-
<PopoverPrimitive.Title
|
|
63
|
-
data-slot="popover-title"
|
|
64
|
-
className={cn("font-medium", className)}
|
|
65
|
-
{...props}
|
|
66
|
-
/>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
|
|
71
|
-
return (
|
|
72
|
-
<PopoverPrimitive.Description
|
|
73
|
-
data-slot="popover-description"
|
|
74
|
-
className={cn("text-muted-foreground", className)}
|
|
75
|
-
{...props}
|
|
76
|
-
/>
|
|
77
|
-
);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
|