@tioelvis/next-template 2.4.8 → 3.0.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 +42 -42
- package/package.json +44 -92
- package/src/actions/configure-package-json.js +32 -0
- package/src/actions/init-project.js +40 -0
- package/src/actions/init-shadcn-ui.js +48 -0
- package/src/actions/init-theme.js +28 -0
- package/src/actions/init-tioelvis-components.js +42 -0
- package/src/actions/install-main-packages.js +51 -0
- package/src/constants.js +234 -97
- package/src/lib/exception.js +9 -0
- package/src/lib/utils.js +55 -0
- package/src/main.js +158 -229
- package/src/template/eslint.config.mjs +15 -13
- package/src/template/postcss.config.mjs +3 -1
- package/src/template/src/app/globals.css +0 -122
- package/src/template/src/app/layout.tsx +7 -15
- package/src/template/src/app/page.tsx +6 -2
- package/src/template/tsconfig.json +9 -2
- package/src/themes/blue.css +141 -0
- package/src/themes/default.css +141 -0
- package/src/themes/green.css +141 -0
- package/src/themes/orange.css +141 -0
- package/src/themes/red.css +141 -0
- package/src/themes/rose.css +141 -0
- package/src/themes/violet.css +141 -0
- package/src/themes/yellow.css +141 -0
- package/src/tioelvis-components/max-width-wrapper.tsx +21 -0
- package/src/app/components/ui/accordion.json +0 -6
- package/src/app/components/ui/accordion.tsx +0 -64
- package/src/app/components/ui/alert-dialog.json +0 -6
- package/src/app/components/ui/alert-dialog.tsx +0 -157
- package/src/app/components/ui/alert.json +0 -6
- package/src/app/components/ui/alert.tsx +0 -66
- package/src/app/components/ui/aspect-ratio.json +0 -6
- package/src/app/components/ui/aspect-ratio.tsx +0 -11
- package/src/app/components/ui/avatar.json +0 -6
- package/src/app/components/ui/avatar.tsx +0 -53
- package/src/app/components/ui/badge.json +0 -6
- package/src/app/components/ui/badge.tsx +0 -46
- package/src/app/components/ui/breadcrumb.json +0 -6
- package/src/app/components/ui/breadcrumb.tsx +0 -107
- package/src/app/components/ui/button.json +0 -6
- package/src/app/components/ui/button.tsx +0 -58
- package/src/app/components/ui/calendar.json +0 -6
- package/src/app/components/ui/calendar.tsx +0 -213
- package/src/app/components/ui/card.json +0 -6
- package/src/app/components/ui/card.tsx +0 -92
- package/src/app/components/ui/carousel.json +0 -6
- package/src/app/components/ui/carousel.tsx +0 -236
- package/src/app/components/ui/chart.json +0 -6
- package/src/app/components/ui/chart.tsx +0 -347
- package/src/app/components/ui/checkbox.json +0 -6
- package/src/app/components/ui/checkbox.tsx +0 -30
- package/src/app/components/ui/collapsible.json +0 -6
- package/src/app/components/ui/collapsible.tsx +0 -33
- package/src/app/components/ui/command.json +0 -6
- package/src/app/components/ui/command.tsx +0 -182
- package/src/app/components/ui/context-menu.json +0 -6
- package/src/app/components/ui/context-menu.tsx +0 -249
- package/src/app/components/ui/dialog.json +0 -6
- package/src/app/components/ui/dialog.tsx +0 -141
- package/src/app/components/ui/drawer.json +0 -6
- package/src/app/components/ui/drawer.tsx +0 -134
- package/src/app/components/ui/dropdown-menu.json +0 -6
- package/src/app/components/ui/dropdown-menu.tsx +0 -256
- package/src/app/components/ui/form.json +0 -12
- package/src/app/components/ui/form.tsx +0 -167
- package/src/app/components/ui/hover-card.json +0 -6
- package/src/app/components/ui/hover-card.tsx +0 -49
- package/src/app/components/ui/input-otp.json +0 -6
- package/src/app/components/ui/input-otp.tsx +0 -76
- package/src/app/components/ui/input.json +0 -6
- package/src/app/components/ui/input.tsx +0 -21
- package/src/app/components/ui/label.json +0 -6
- package/src/app/components/ui/label.tsx +0 -24
- package/src/app/components/ui/menubar.json +0 -6
- package/src/app/components/ui/menubar.tsx +0 -273
- package/src/app/components/ui/navigation-menu.json +0 -6
- package/src/app/components/ui/navigation-menu.tsx +0 -164
- package/src/app/components/ui/pagination.json +0 -6
- package/src/app/components/ui/pagination.tsx +0 -124
- package/src/app/components/ui/popover.json +0 -6
- package/src/app/components/ui/popover.tsx +0 -55
- package/src/app/components/ui/progress.json +0 -6
- package/src/app/components/ui/progress.tsx +0 -30
- package/src/app/components/ui/radio-group.json +0 -6
- package/src/app/components/ui/radio-group.tsx +0 -43
- package/src/app/components/ui/resizable.json +0 -6
- package/src/app/components/ui/resizable.tsx +0 -55
- package/src/app/components/ui/scroll-area.json +0 -6
- package/src/app/components/ui/scroll-area.tsx +0 -55
- package/src/app/components/ui/select.json +0 -6
- package/src/app/components/ui/select.tsx +0 -179
- package/src/app/components/ui/separator.json +0 -6
- package/src/app/components/ui/separator.tsx +0 -28
- package/src/app/components/ui/sheet.json +0 -6
- package/src/app/components/ui/sheet.tsx +0 -145
- package/src/app/components/ui/sidebar.json +0 -6
- package/src/app/components/ui/sidebar.tsx +0 -718
- package/src/app/components/ui/skeleton.json +0 -6
- package/src/app/components/ui/skeleton.tsx +0 -13
- package/src/app/components/ui/slider.json +0 -6
- package/src/app/components/ui/slider.tsx +0 -61
- package/src/app/components/ui/sonner.json +0 -6
- package/src/app/components/ui/sonner.tsx +0 -25
- package/src/app/components/ui/switch.json +0 -6
- package/src/app/components/ui/switch.tsx +0 -30
- package/src/app/components/ui/table.json +0 -6
- package/src/app/components/ui/table.tsx +0 -115
- package/src/app/components/ui/tabs.json +0 -6
- package/src/app/components/ui/tabs.tsx +0 -66
- package/src/app/components/ui/textarea.json +0 -6
- package/src/app/components/ui/textarea.tsx +0 -18
- package/src/app/components/ui/toggle-group.json +0 -6
- package/src/app/components/ui/toggle-group.tsx +0 -71
- package/src/app/components/ui/toggle.json +0 -6
- package/src/app/components/ui/toggle.tsx +0 -47
- package/src/app/components/ui/tooltip.json +0 -6
- package/src/app/components/ui/tooltip.tsx +0 -60
- package/src/app/hooks/use-mobile.ts +0 -21
- package/src/app/lib/utils.ts +0 -6
- package/src/app/tsconfig.json +0 -27
- package/src/template/components.json +0 -21
- package/src/template/next-env.d.ts +0 -5
- package/src/template/public/.gitkeep +0 -0
- package/src/template/src/lib/axios.ts +0 -39
- package/src/template/src/lib/constants.ts +0 -1
- package/src/template/src/lib/utils.ts +0 -6
- package/src/template/src/providers/query.provider.tsx +0 -12
- package/src/template/src/providers/theme.provider.tsx +0 -8
- package/src/utils.js +0 -113
- /package/src/template/{src/app → public}/favicon.ico +0 -0
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { Drawer as DrawerPrimitive } from "vaul";
|
|
5
|
-
|
|
6
|
-
import { cn } from "@/lib/utils";
|
|
7
|
-
|
|
8
|
-
function Drawer({
|
|
9
|
-
...props
|
|
10
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
|
|
11
|
-
return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function DrawerTrigger({
|
|
15
|
-
...props
|
|
16
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
|
|
17
|
-
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function DrawerPortal({
|
|
21
|
-
...props
|
|
22
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
|
|
23
|
-
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function DrawerClose({
|
|
27
|
-
...props
|
|
28
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
|
|
29
|
-
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function DrawerOverlay({
|
|
33
|
-
className,
|
|
34
|
-
...props
|
|
35
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
|
|
36
|
-
return (
|
|
37
|
-
<DrawerPrimitive.Overlay
|
|
38
|
-
data-slot="drawer-overlay"
|
|
39
|
-
className={cn(
|
|
40
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
|
41
|
-
className
|
|
42
|
-
)}
|
|
43
|
-
{...props}
|
|
44
|
-
/>
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function DrawerContent({
|
|
49
|
-
className,
|
|
50
|
-
children,
|
|
51
|
-
...props
|
|
52
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
|
|
53
|
-
return (
|
|
54
|
-
<DrawerPortal data-slot="drawer-portal">
|
|
55
|
-
<DrawerOverlay />
|
|
56
|
-
<DrawerPrimitive.Content
|
|
57
|
-
data-slot="drawer-content"
|
|
58
|
-
className={cn(
|
|
59
|
-
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
|
|
60
|
-
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
|
|
61
|
-
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
|
|
62
|
-
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
|
|
63
|
-
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
|
|
64
|
-
className
|
|
65
|
-
)}
|
|
66
|
-
{...props}>
|
|
67
|
-
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
|
|
68
|
-
{children}
|
|
69
|
-
</DrawerPrimitive.Content>
|
|
70
|
-
</DrawerPortal>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
75
|
-
return (
|
|
76
|
-
<div
|
|
77
|
-
data-slot="drawer-header"
|
|
78
|
-
className={cn(
|
|
79
|
-
"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
|
|
80
|
-
className
|
|
81
|
-
)}
|
|
82
|
-
{...props}
|
|
83
|
-
/>
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
88
|
-
return (
|
|
89
|
-
<div
|
|
90
|
-
data-slot="drawer-footer"
|
|
91
|
-
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
92
|
-
{...props}
|
|
93
|
-
/>
|
|
94
|
-
);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function DrawerTitle({
|
|
98
|
-
className,
|
|
99
|
-
...props
|
|
100
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
|
|
101
|
-
return (
|
|
102
|
-
<DrawerPrimitive.Title
|
|
103
|
-
data-slot="drawer-title"
|
|
104
|
-
className={cn("text-foreground font-semibold", className)}
|
|
105
|
-
{...props}
|
|
106
|
-
/>
|
|
107
|
-
);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
function DrawerDescription({
|
|
111
|
-
className,
|
|
112
|
-
...props
|
|
113
|
-
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
|
|
114
|
-
return (
|
|
115
|
-
<DrawerPrimitive.Description
|
|
116
|
-
data-slot="drawer-description"
|
|
117
|
-
className={cn("text-muted-foreground text-sm", className)}
|
|
118
|
-
{...props}
|
|
119
|
-
/>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
export {
|
|
124
|
-
Drawer,
|
|
125
|
-
DrawerPortal,
|
|
126
|
-
DrawerOverlay,
|
|
127
|
-
DrawerTrigger,
|
|
128
|
-
DrawerClose,
|
|
129
|
-
DrawerContent,
|
|
130
|
-
DrawerHeader,
|
|
131
|
-
DrawerFooter,
|
|
132
|
-
DrawerTitle,
|
|
133
|
-
DrawerDescription,
|
|
134
|
-
};
|
|
@@ -1,256 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
5
|
-
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
|
6
|
-
|
|
7
|
-
import { cn } from "@/lib/utils";
|
|
8
|
-
|
|
9
|
-
function DropdownMenu({
|
|
10
|
-
...props
|
|
11
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
|
|
12
|
-
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function DropdownMenuPortal({
|
|
16
|
-
...props
|
|
17
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
|
|
18
|
-
return (
|
|
19
|
-
<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
|
20
|
-
);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function DropdownMenuTrigger({
|
|
24
|
-
className,
|
|
25
|
-
...props
|
|
26
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
|
|
27
|
-
return (
|
|
28
|
-
<DropdownMenuPrimitive.Trigger
|
|
29
|
-
data-slot="dropdown-menu-trigger"
|
|
30
|
-
className={cn("cursor-pointer", className)}
|
|
31
|
-
{...props}
|
|
32
|
-
/>
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
function DropdownMenuContent({
|
|
37
|
-
className,
|
|
38
|
-
sideOffset = 4,
|
|
39
|
-
...props
|
|
40
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
|
|
41
|
-
return (
|
|
42
|
-
<DropdownMenuPrimitive.Portal>
|
|
43
|
-
<DropdownMenuPrimitive.Content
|
|
44
|
-
data-slot="dropdown-menu-content"
|
|
45
|
-
sideOffset={sideOffset}
|
|
46
|
-
className={cn(
|
|
47
|
-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
|
|
48
|
-
className
|
|
49
|
-
)}
|
|
50
|
-
{...props}
|
|
51
|
-
/>
|
|
52
|
-
</DropdownMenuPrimitive.Portal>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function DropdownMenuGroup({
|
|
57
|
-
...props
|
|
58
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
|
|
59
|
-
return (
|
|
60
|
-
<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
function DropdownMenuItem({
|
|
65
|
-
className,
|
|
66
|
-
inset,
|
|
67
|
-
variant = "default",
|
|
68
|
-
...props
|
|
69
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
|
|
70
|
-
inset?: boolean;
|
|
71
|
-
variant?: "default" | "destructive";
|
|
72
|
-
}) {
|
|
73
|
-
return (
|
|
74
|
-
<DropdownMenuPrimitive.Item
|
|
75
|
-
data-slot="dropdown-menu-item"
|
|
76
|
-
data-inset={inset}
|
|
77
|
-
data-variant={variant}
|
|
78
|
-
className={cn(
|
|
79
|
-
"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
80
|
-
className
|
|
81
|
-
)}
|
|
82
|
-
{...props}
|
|
83
|
-
/>
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function DropdownMenuCheckboxItem({
|
|
88
|
-
className,
|
|
89
|
-
children,
|
|
90
|
-
checked,
|
|
91
|
-
...props
|
|
92
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
|
|
93
|
-
return (
|
|
94
|
-
<DropdownMenuPrimitive.CheckboxItem
|
|
95
|
-
data-slot="dropdown-menu-checkbox-item"
|
|
96
|
-
className={cn(
|
|
97
|
-
"focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
98
|
-
className
|
|
99
|
-
)}
|
|
100
|
-
checked={checked}
|
|
101
|
-
{...props}>
|
|
102
|
-
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
|
103
|
-
<DropdownMenuPrimitive.ItemIndicator>
|
|
104
|
-
<CheckIcon className="size-4" />
|
|
105
|
-
</DropdownMenuPrimitive.ItemIndicator>
|
|
106
|
-
</span>
|
|
107
|
-
{children}
|
|
108
|
-
</DropdownMenuPrimitive.CheckboxItem>
|
|
109
|
-
);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
function DropdownMenuRadioGroup({
|
|
113
|
-
...props
|
|
114
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
|
|
115
|
-
return (
|
|
116
|
-
<DropdownMenuPrimitive.RadioGroup
|
|
117
|
-
data-slot="dropdown-menu-radio-group"
|
|
118
|
-
{...props}
|
|
119
|
-
/>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
function DropdownMenuRadioItem({
|
|
124
|
-
className,
|
|
125
|
-
children,
|
|
126
|
-
...props
|
|
127
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
|
|
128
|
-
return (
|
|
129
|
-
<DropdownMenuPrimitive.RadioItem
|
|
130
|
-
data-slot="dropdown-menu-radio-item"
|
|
131
|
-
className={cn(
|
|
132
|
-
"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
133
|
-
className
|
|
134
|
-
)}
|
|
135
|
-
{...props}>
|
|
136
|
-
<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
|
|
137
|
-
<DropdownMenuPrimitive.ItemIndicator>
|
|
138
|
-
<CircleIcon className="size-2 fill-current" />
|
|
139
|
-
</DropdownMenuPrimitive.ItemIndicator>
|
|
140
|
-
</span>
|
|
141
|
-
{children}
|
|
142
|
-
</DropdownMenuPrimitive.RadioItem>
|
|
143
|
-
);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
function DropdownMenuLabel({
|
|
147
|
-
className,
|
|
148
|
-
inset,
|
|
149
|
-
...props
|
|
150
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
|
|
151
|
-
inset?: boolean;
|
|
152
|
-
}) {
|
|
153
|
-
return (
|
|
154
|
-
<DropdownMenuPrimitive.Label
|
|
155
|
-
data-slot="dropdown-menu-label"
|
|
156
|
-
data-inset={inset}
|
|
157
|
-
className={cn(
|
|
158
|
-
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
|
|
159
|
-
className
|
|
160
|
-
)}
|
|
161
|
-
{...props}
|
|
162
|
-
/>
|
|
163
|
-
);
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
function DropdownMenuSeparator({
|
|
167
|
-
className,
|
|
168
|
-
...props
|
|
169
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
|
|
170
|
-
return (
|
|
171
|
-
<DropdownMenuPrimitive.Separator
|
|
172
|
-
data-slot="dropdown-menu-separator"
|
|
173
|
-
className={cn("bg-border -mx-1 my-1 h-px", className)}
|
|
174
|
-
{...props}
|
|
175
|
-
/>
|
|
176
|
-
);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
function DropdownMenuShortcut({
|
|
180
|
-
className,
|
|
181
|
-
...props
|
|
182
|
-
}: React.ComponentProps<"span">) {
|
|
183
|
-
return (
|
|
184
|
-
<span
|
|
185
|
-
data-slot="dropdown-menu-shortcut"
|
|
186
|
-
className={cn(
|
|
187
|
-
"text-muted-foreground ml-auto text-xs tracking-widest",
|
|
188
|
-
className
|
|
189
|
-
)}
|
|
190
|
-
{...props}
|
|
191
|
-
/>
|
|
192
|
-
);
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
function DropdownMenuSub({
|
|
196
|
-
...props
|
|
197
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
|
|
198
|
-
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
function DropdownMenuSubTrigger({
|
|
202
|
-
className,
|
|
203
|
-
inset,
|
|
204
|
-
children,
|
|
205
|
-
...props
|
|
206
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
|
|
207
|
-
inset?: boolean;
|
|
208
|
-
}) {
|
|
209
|
-
return (
|
|
210
|
-
<DropdownMenuPrimitive.SubTrigger
|
|
211
|
-
data-slot="dropdown-menu-sub-trigger"
|
|
212
|
-
data-inset={inset}
|
|
213
|
-
className={cn(
|
|
214
|
-
"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
|
|
215
|
-
className
|
|
216
|
-
)}
|
|
217
|
-
{...props}>
|
|
218
|
-
{children}
|
|
219
|
-
<ChevronRightIcon className="ml-auto size-4" />
|
|
220
|
-
</DropdownMenuPrimitive.SubTrigger>
|
|
221
|
-
);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
function DropdownMenuSubContent({
|
|
225
|
-
className,
|
|
226
|
-
...props
|
|
227
|
-
}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
|
|
228
|
-
return (
|
|
229
|
-
<DropdownMenuPrimitive.SubContent
|
|
230
|
-
data-slot="dropdown-menu-sub-content"
|
|
231
|
-
className={cn(
|
|
232
|
-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
|
|
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,167 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import * as LabelPrimitive from "@radix-ui/react-label";
|
|
5
|
-
import { Slot } from "@radix-ui/react-slot";
|
|
6
|
-
import {
|
|
7
|
-
Controller,
|
|
8
|
-
FormProvider,
|
|
9
|
-
useFormContext,
|
|
10
|
-
useFormState,
|
|
11
|
-
type ControllerProps,
|
|
12
|
-
type FieldPath,
|
|
13
|
-
type FieldValues,
|
|
14
|
-
} from "react-hook-form";
|
|
15
|
-
|
|
16
|
-
import { cn } from "@/lib/utils";
|
|
17
|
-
import { Label } from "@/components/ui/label";
|
|
18
|
-
|
|
19
|
-
const Form = FormProvider;
|
|
20
|
-
|
|
21
|
-
type FormFieldContextValue<
|
|
22
|
-
TFieldValues extends FieldValues = FieldValues,
|
|
23
|
-
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
|
24
|
-
> = {
|
|
25
|
-
name: TName;
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
|
29
|
-
{} as FormFieldContextValue
|
|
30
|
-
);
|
|
31
|
-
|
|
32
|
-
const FormField = <
|
|
33
|
-
TFieldValues extends FieldValues = FieldValues,
|
|
34
|
-
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
|
|
35
|
-
>({
|
|
36
|
-
...props
|
|
37
|
-
}: ControllerProps<TFieldValues, TName>) => {
|
|
38
|
-
return (
|
|
39
|
-
<FormFieldContext.Provider value={{ name: props.name }}>
|
|
40
|
-
<Controller {...props} />
|
|
41
|
-
</FormFieldContext.Provider>
|
|
42
|
-
);
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const useFormField = () => {
|
|
46
|
-
const fieldContext = React.useContext(FormFieldContext);
|
|
47
|
-
const itemContext = React.useContext(FormItemContext);
|
|
48
|
-
const { getFieldState } = useFormContext();
|
|
49
|
-
const formState = useFormState({ name: fieldContext.name });
|
|
50
|
-
const fieldState = getFieldState(fieldContext.name, formState);
|
|
51
|
-
|
|
52
|
-
if (!fieldContext) {
|
|
53
|
-
throw new Error("useFormField should be used within <FormField>");
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
const { id } = itemContext;
|
|
57
|
-
|
|
58
|
-
return {
|
|
59
|
-
id,
|
|
60
|
-
name: fieldContext.name,
|
|
61
|
-
formItemId: `${id}-form-item`,
|
|
62
|
-
formDescriptionId: `${id}-form-item-description`,
|
|
63
|
-
formMessageId: `${id}-form-item-message`,
|
|
64
|
-
...fieldState,
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
type FormItemContextValue = {
|
|
69
|
-
id: string;
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
const FormItemContext = React.createContext<FormItemContextValue>(
|
|
73
|
-
{} as FormItemContextValue
|
|
74
|
-
);
|
|
75
|
-
|
|
76
|
-
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
|
|
77
|
-
const id = React.useId();
|
|
78
|
-
|
|
79
|
-
return (
|
|
80
|
-
<FormItemContext.Provider value={{ id }}>
|
|
81
|
-
<div
|
|
82
|
-
data-slot="form-item"
|
|
83
|
-
className={cn("grid gap-2", className)}
|
|
84
|
-
{...props}
|
|
85
|
-
/>
|
|
86
|
-
</FormItemContext.Provider>
|
|
87
|
-
);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
function FormLabel({
|
|
91
|
-
className,
|
|
92
|
-
...props
|
|
93
|
-
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
|
94
|
-
const { error, formItemId } = useFormField();
|
|
95
|
-
|
|
96
|
-
return (
|
|
97
|
-
<Label
|
|
98
|
-
data-slot="form-label"
|
|
99
|
-
data-error={!!error}
|
|
100
|
-
className={cn("data-[error=true]:text-destructive", className)}
|
|
101
|
-
htmlFor={formItemId}
|
|
102
|
-
{...props}
|
|
103
|
-
/>
|
|
104
|
-
);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
|
|
108
|
-
const { error, formItemId, formDescriptionId, formMessageId } =
|
|
109
|
-
useFormField();
|
|
110
|
-
|
|
111
|
-
return (
|
|
112
|
-
<Slot
|
|
113
|
-
data-slot="form-control"
|
|
114
|
-
id={formItemId}
|
|
115
|
-
aria-describedby={
|
|
116
|
-
!error
|
|
117
|
-
? `${formDescriptionId}`
|
|
118
|
-
: `${formDescriptionId} ${formMessageId}`
|
|
119
|
-
}
|
|
120
|
-
aria-invalid={!!error}
|
|
121
|
-
{...props}
|
|
122
|
-
/>
|
|
123
|
-
);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
|
|
127
|
-
const { formDescriptionId } = useFormField();
|
|
128
|
-
|
|
129
|
-
return (
|
|
130
|
-
<p
|
|
131
|
-
data-slot="form-description"
|
|
132
|
-
id={formDescriptionId}
|
|
133
|
-
className={cn("text-muted-foreground text-sm", className)}
|
|
134
|
-
{...props}
|
|
135
|
-
/>
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
|
|
140
|
-
const { error, formMessageId } = useFormField();
|
|
141
|
-
const body = error ? String(error?.message ?? "") : props.children;
|
|
142
|
-
|
|
143
|
-
if (!body) {
|
|
144
|
-
return null;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
return (
|
|
148
|
-
<p
|
|
149
|
-
data-slot="form-message"
|
|
150
|
-
id={formMessageId}
|
|
151
|
-
className={cn("text-destructive text-sm", className)}
|
|
152
|
-
{...props}>
|
|
153
|
-
{body}
|
|
154
|
-
</p>
|
|
155
|
-
);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
export {
|
|
159
|
-
useFormField,
|
|
160
|
-
Form,
|
|
161
|
-
FormItem,
|
|
162
|
-
FormLabel,
|
|
163
|
-
FormControl,
|
|
164
|
-
FormDescription,
|
|
165
|
-
FormMessage,
|
|
166
|
-
FormField,
|
|
167
|
-
};
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
|
|
5
|
-
|
|
6
|
-
import { cn } from "@/lib/utils";
|
|
7
|
-
|
|
8
|
-
function HoverCard({
|
|
9
|
-
...props
|
|
10
|
-
}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
|
|
11
|
-
return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
function HoverCardTrigger({
|
|
15
|
-
className,
|
|
16
|
-
...props
|
|
17
|
-
}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
|
|
18
|
-
return (
|
|
19
|
-
<HoverCardPrimitive.Trigger
|
|
20
|
-
data-slot="hover-card-trigger"
|
|
21
|
-
className={cn("cursor-pointer", className)}
|
|
22
|
-
{...props}
|
|
23
|
-
/>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function HoverCardContent({
|
|
28
|
-
className,
|
|
29
|
-
align = "center",
|
|
30
|
-
sideOffset = 4,
|
|
31
|
-
...props
|
|
32
|
-
}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
|
|
33
|
-
return (
|
|
34
|
-
<HoverCardPrimitive.Portal data-slot="hover-card-portal">
|
|
35
|
-
<HoverCardPrimitive.Content
|
|
36
|
-
data-slot="hover-card-content"
|
|
37
|
-
align={align}
|
|
38
|
-
sideOffset={sideOffset}
|
|
39
|
-
className={cn(
|
|
40
|
-
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
|
|
41
|
-
className
|
|
42
|
-
)}
|
|
43
|
-
{...props}
|
|
44
|
-
/>
|
|
45
|
-
</HoverCardPrimitive.Portal>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export { HoverCard, HoverCardTrigger, HoverCardContent };
|