@cogito.ai/cli 0.3.5 → 0.4.1
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/index.js +20 -1
- package/dist/templates/web-nextjs/apps/docs/.source/browser.ts +1 -1
- package/dist/templates/web-nextjs/apps/docs/.source/server.ts +3 -2
- package/dist/templates/web-nextjs/apps/docs/content/docs/decisions/meta.json +1 -1
- package/dist/templates/web-nextjs/apps/docs/content/docs/decisions/turbo-package-manager.mdx +70 -0
- package/dist/templates/web-nextjs/apps/docs/package.json +1 -1
- package/dist/templates/web-nextjs/apps/web/messages/en.json +5 -1
- package/dist/templates/web-nextjs/apps/web/messages/zh.json +5 -1
- package/dist/templates/web-nextjs/apps/web/package.json +27 -0
- package/dist/templates/web-nextjs/apps/web/postcss.config.mjs +8 -0
- package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(auth)/login/page.tsx +87 -93
- package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(auth)/signup/page.tsx +116 -98
- package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/dashboard/page.tsx +38 -29
- package/dist/templates/web-nextjs/apps/web/src/app/[locale]/(protected)/layout.tsx +2 -5
- package/dist/templates/web-nextjs/apps/web/src/app/[locale]/layout.tsx +4 -7
- package/dist/templates/web-nextjs/apps/web/src/app/[locale]/privacy/page.tsx +23 -0
- package/dist/templates/web-nextjs/apps/web/src/app/[locale]/terms/page.tsx +23 -0
- package/dist/templates/web-nextjs/apps/web/src/app/route.ts +13 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/app-sidebar.tsx +188 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/chart-area-interactive.tsx +291 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/data-table.tsx +807 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/data.json +614 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/nav-documents.tsx +92 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/nav-main.tsx +58 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/nav-secondary.tsx +42 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/nav-user.tsx +118 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/page.tsx +40 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/section-cards.tsx +102 -0
- package/dist/templates/web-nextjs/apps/web/src/components/dashboard/site-header.tsx +30 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/alert-dialog.tsx +196 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/avatar.tsx +109 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/badge.tsx +48 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/breadcrumb.tsx +109 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/button.tsx +14 -2
- package/dist/templates/web-nextjs/apps/web/src/components/ui/card.tsx +92 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/chart.tsx +374 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/checkbox.tsx +32 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/collapsible.tsx +33 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/command.tsx +184 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/dialog.tsx +158 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/drawer.tsx +135 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/dropdown-menu.tsx +257 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/field.tsx +248 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/input-otp.tsx +77 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/pagination.tsx +127 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/popover.tsx +89 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/progress.tsx +31 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/radio-group.tsx +45 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/scroll-area.tsx +58 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/select.tsx +190 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/separator.tsx +29 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/sheet.tsx +143 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/sidebar.tsx +726 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/skeleton.tsx +13 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/slider.tsx +63 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/sonner.tsx +11 -25
- package/dist/templates/web-nextjs/apps/web/src/components/ui/switch.tsx +35 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/table.tsx +116 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/tabs.tsx +91 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/textarea.tsx +18 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/toggle-group.tsx +83 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/toggle.tsx +47 -0
- package/dist/templates/web-nextjs/apps/web/src/components/ui/tooltip.tsx +57 -0
- package/dist/templates/web-nextjs/apps/web/src/features/auth/server.ts +15 -0
- package/dist/templates/web-nextjs/apps/web/src/hooks/use-mobile.ts +21 -0
- package/dist/templates/web-nextjs/package.json +10 -0
- package/dist/templates/web-nextjs/packages/openspec-docs-sync/package.json +0 -3
- package/dist/templates/web-nextjs/pnpm-lock.yaml +1561 -96
- package/dist/templates/web-nextjs/pnpm-workspace.yaml +15 -0
- package/dist/templates/web-nextjs/turbo.json +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { Collapsible as CollapsiblePrimitive } from "radix-ui"
|
|
4
|
+
|
|
5
|
+
function Collapsible({
|
|
6
|
+
...props
|
|
7
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
|
8
|
+
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function CollapsibleTrigger({
|
|
12
|
+
...props
|
|
13
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
|
14
|
+
return (
|
|
15
|
+
<CollapsiblePrimitive.CollapsibleTrigger
|
|
16
|
+
data-slot="collapsible-trigger"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function CollapsibleContent({
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
|
25
|
+
return (
|
|
26
|
+
<CollapsiblePrimitive.CollapsibleContent
|
|
27
|
+
data-slot="collapsible-content"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { Command as CommandPrimitive } from "cmdk"
|
|
5
|
+
import { SearchIcon } from "lucide-react"
|
|
6
|
+
|
|
7
|
+
import { cn } from "@/lib/utils"
|
|
8
|
+
import {
|
|
9
|
+
Dialog,
|
|
10
|
+
DialogContent,
|
|
11
|
+
DialogDescription,
|
|
12
|
+
DialogHeader,
|
|
13
|
+
DialogTitle,
|
|
14
|
+
} from "@/components/ui/dialog"
|
|
15
|
+
|
|
16
|
+
function Command({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: React.ComponentProps<typeof CommandPrimitive>) {
|
|
20
|
+
return (
|
|
21
|
+
<CommandPrimitive
|
|
22
|
+
data-slot="command"
|
|
23
|
+
className={cn(
|
|
24
|
+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
|
25
|
+
className
|
|
26
|
+
)}
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function CommandDialog({
|
|
33
|
+
title = "Command Palette",
|
|
34
|
+
description = "Search for a command to run...",
|
|
35
|
+
children,
|
|
36
|
+
className,
|
|
37
|
+
showCloseButton = true,
|
|
38
|
+
...props
|
|
39
|
+
}: React.ComponentProps<typeof Dialog> & {
|
|
40
|
+
title?: string
|
|
41
|
+
description?: string
|
|
42
|
+
className?: string
|
|
43
|
+
showCloseButton?: boolean
|
|
44
|
+
}) {
|
|
45
|
+
return (
|
|
46
|
+
<Dialog {...props}>
|
|
47
|
+
<DialogHeader className="sr-only">
|
|
48
|
+
<DialogTitle>{title}</DialogTitle>
|
|
49
|
+
<DialogDescription>{description}</DialogDescription>
|
|
50
|
+
</DialogHeader>
|
|
51
|
+
<DialogContent
|
|
52
|
+
className={cn("overflow-hidden p-0", className)}
|
|
53
|
+
showCloseButton={showCloseButton}
|
|
54
|
+
>
|
|
55
|
+
<Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
|
56
|
+
{children}
|
|
57
|
+
</Command>
|
|
58
|
+
</DialogContent>
|
|
59
|
+
</Dialog>
|
|
60
|
+
)
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function CommandInput({
|
|
64
|
+
className,
|
|
65
|
+
...props
|
|
66
|
+
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
|
67
|
+
return (
|
|
68
|
+
<div
|
|
69
|
+
data-slot="command-input-wrapper"
|
|
70
|
+
className="flex h-9 items-center gap-2 border-b px-3"
|
|
71
|
+
>
|
|
72
|
+
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
|
73
|
+
<CommandPrimitive.Input
|
|
74
|
+
data-slot="command-input"
|
|
75
|
+
className={cn(
|
|
76
|
+
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
|
77
|
+
className
|
|
78
|
+
)}
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
</div>
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function CommandList({
|
|
86
|
+
className,
|
|
87
|
+
...props
|
|
88
|
+
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
|
89
|
+
return (
|
|
90
|
+
<CommandPrimitive.List
|
|
91
|
+
data-slot="command-list"
|
|
92
|
+
className={cn(
|
|
93
|
+
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
|
|
94
|
+
className
|
|
95
|
+
)}
|
|
96
|
+
{...props}
|
|
97
|
+
/>
|
|
98
|
+
)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
function CommandEmpty({
|
|
102
|
+
...props
|
|
103
|
+
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
|
104
|
+
return (
|
|
105
|
+
<CommandPrimitive.Empty
|
|
106
|
+
data-slot="command-empty"
|
|
107
|
+
className="py-6 text-center text-sm"
|
|
108
|
+
{...props}
|
|
109
|
+
/>
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
function CommandGroup({
|
|
114
|
+
className,
|
|
115
|
+
...props
|
|
116
|
+
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
|
117
|
+
return (
|
|
118
|
+
<CommandPrimitive.Group
|
|
119
|
+
data-slot="command-group"
|
|
120
|
+
className={cn(
|
|
121
|
+
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
|
122
|
+
className
|
|
123
|
+
)}
|
|
124
|
+
{...props}
|
|
125
|
+
/>
|
|
126
|
+
)
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function CommandSeparator({
|
|
130
|
+
className,
|
|
131
|
+
...props
|
|
132
|
+
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
|
133
|
+
return (
|
|
134
|
+
<CommandPrimitive.Separator
|
|
135
|
+
data-slot="command-separator"
|
|
136
|
+
className={cn("-mx-1 h-px bg-border", className)}
|
|
137
|
+
{...props}
|
|
138
|
+
/>
|
|
139
|
+
)
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
function CommandItem({
|
|
143
|
+
className,
|
|
144
|
+
...props
|
|
145
|
+
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
|
146
|
+
return (
|
|
147
|
+
<CommandPrimitive.Item
|
|
148
|
+
data-slot="command-item"
|
|
149
|
+
className={cn(
|
|
150
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
151
|
+
className
|
|
152
|
+
)}
|
|
153
|
+
{...props}
|
|
154
|
+
/>
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function CommandShortcut({
|
|
159
|
+
className,
|
|
160
|
+
...props
|
|
161
|
+
}: React.ComponentProps<"span">) {
|
|
162
|
+
return (
|
|
163
|
+
<span
|
|
164
|
+
data-slot="command-shortcut"
|
|
165
|
+
className={cn(
|
|
166
|
+
"ml-auto text-xs tracking-widest text-muted-foreground",
|
|
167
|
+
className
|
|
168
|
+
)}
|
|
169
|
+
{...props}
|
|
170
|
+
/>
|
|
171
|
+
)
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
export {
|
|
175
|
+
Command,
|
|
176
|
+
CommandDialog,
|
|
177
|
+
CommandInput,
|
|
178
|
+
CommandList,
|
|
179
|
+
CommandEmpty,
|
|
180
|
+
CommandGroup,
|
|
181
|
+
CommandItem,
|
|
182
|
+
CommandShortcut,
|
|
183
|
+
CommandSeparator,
|
|
184
|
+
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { XIcon } from "lucide-react"
|
|
5
|
+
import { Dialog as DialogPrimitive } from "radix-ui"
|
|
6
|
+
|
|
7
|
+
import { cn } from "@/lib/utils"
|
|
8
|
+
import { Button } from "@/components/ui/button"
|
|
9
|
+
|
|
10
|
+
function Dialog({
|
|
11
|
+
...props
|
|
12
|
+
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
|
13
|
+
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function DialogTrigger({
|
|
17
|
+
...props
|
|
18
|
+
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
|
19
|
+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function DialogPortal({
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
|
25
|
+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function DialogClose({
|
|
29
|
+
...props
|
|
30
|
+
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
|
31
|
+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function DialogOverlay({
|
|
35
|
+
className,
|
|
36
|
+
...props
|
|
37
|
+
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
|
38
|
+
return (
|
|
39
|
+
<DialogPrimitive.Overlay
|
|
40
|
+
data-slot="dialog-overlay"
|
|
41
|
+
className={cn(
|
|
42
|
+
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
|
43
|
+
className
|
|
44
|
+
)}
|
|
45
|
+
{...props}
|
|
46
|
+
/>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function DialogContent({
|
|
51
|
+
className,
|
|
52
|
+
children,
|
|
53
|
+
showCloseButton = true,
|
|
54
|
+
...props
|
|
55
|
+
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
56
|
+
showCloseButton?: boolean
|
|
57
|
+
}) {
|
|
58
|
+
return (
|
|
59
|
+
<DialogPortal data-slot="dialog-portal">
|
|
60
|
+
<DialogOverlay />
|
|
61
|
+
<DialogPrimitive.Content
|
|
62
|
+
data-slot="dialog-content"
|
|
63
|
+
className={cn(
|
|
64
|
+
"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
|
|
65
|
+
className
|
|
66
|
+
)}
|
|
67
|
+
{...props}
|
|
68
|
+
>
|
|
69
|
+
{children}
|
|
70
|
+
{showCloseButton && (
|
|
71
|
+
<DialogPrimitive.Close
|
|
72
|
+
data-slot="dialog-close"
|
|
73
|
+
className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
|
74
|
+
>
|
|
75
|
+
<XIcon />
|
|
76
|
+
<span className="sr-only">Close</span>
|
|
77
|
+
</DialogPrimitive.Close>
|
|
78
|
+
)}
|
|
79
|
+
</DialogPrimitive.Content>
|
|
80
|
+
</DialogPortal>
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
85
|
+
return (
|
|
86
|
+
<div
|
|
87
|
+
data-slot="dialog-header"
|
|
88
|
+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
|
89
|
+
{...props}
|
|
90
|
+
/>
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
function DialogFooter({
|
|
95
|
+
className,
|
|
96
|
+
showCloseButton = false,
|
|
97
|
+
children,
|
|
98
|
+
...props
|
|
99
|
+
}: React.ComponentProps<"div"> & {
|
|
100
|
+
showCloseButton?: boolean
|
|
101
|
+
}) {
|
|
102
|
+
return (
|
|
103
|
+
<div
|
|
104
|
+
data-slot="dialog-footer"
|
|
105
|
+
className={cn(
|
|
106
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
107
|
+
className
|
|
108
|
+
)}
|
|
109
|
+
{...props}
|
|
110
|
+
>
|
|
111
|
+
{children}
|
|
112
|
+
{showCloseButton && (
|
|
113
|
+
<DialogPrimitive.Close asChild>
|
|
114
|
+
<Button variant="outline">Close</Button>
|
|
115
|
+
</DialogPrimitive.Close>
|
|
116
|
+
)}
|
|
117
|
+
</div>
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
function DialogTitle({
|
|
122
|
+
className,
|
|
123
|
+
...props
|
|
124
|
+
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
|
125
|
+
return (
|
|
126
|
+
<DialogPrimitive.Title
|
|
127
|
+
data-slot="dialog-title"
|
|
128
|
+
className={cn("text-lg leading-none font-semibold", className)}
|
|
129
|
+
{...props}
|
|
130
|
+
/>
|
|
131
|
+
)
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
function DialogDescription({
|
|
135
|
+
className,
|
|
136
|
+
...props
|
|
137
|
+
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
|
138
|
+
return (
|
|
139
|
+
<DialogPrimitive.Description
|
|
140
|
+
data-slot="dialog-description"
|
|
141
|
+
className={cn("text-sm text-muted-foreground", className)}
|
|
142
|
+
{...props}
|
|
143
|
+
/>
|
|
144
|
+
)
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
export {
|
|
148
|
+
Dialog,
|
|
149
|
+
DialogClose,
|
|
150
|
+
DialogContent,
|
|
151
|
+
DialogDescription,
|
|
152
|
+
DialogFooter,
|
|
153
|
+
DialogHeader,
|
|
154
|
+
DialogOverlay,
|
|
155
|
+
DialogPortal,
|
|
156
|
+
DialogTitle,
|
|
157
|
+
DialogTrigger,
|
|
158
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
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
|
+
"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
|
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 fixed z-50 flex h-auto flex-col bg-background",
|
|
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
|
+
>
|
|
68
|
+
<div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
|
|
69
|
+
{children}
|
|
70
|
+
</DrawerPrimitive.Content>
|
|
71
|
+
</DrawerPortal>
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
76
|
+
return (
|
|
77
|
+
<div
|
|
78
|
+
data-slot="drawer-header"
|
|
79
|
+
className={cn(
|
|
80
|
+
"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",
|
|
81
|
+
className
|
|
82
|
+
)}
|
|
83
|
+
{...props}
|
|
84
|
+
/>
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
89
|
+
return (
|
|
90
|
+
<div
|
|
91
|
+
data-slot="drawer-footer"
|
|
92
|
+
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
93
|
+
{...props}
|
|
94
|
+
/>
|
|
95
|
+
)
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
function DrawerTitle({
|
|
99
|
+
className,
|
|
100
|
+
...props
|
|
101
|
+
}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
|
|
102
|
+
return (
|
|
103
|
+
<DrawerPrimitive.Title
|
|
104
|
+
data-slot="drawer-title"
|
|
105
|
+
className={cn("font-semibold text-foreground", className)}
|
|
106
|
+
{...props}
|
|
107
|
+
/>
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
function DrawerDescription({
|
|
112
|
+
className,
|
|
113
|
+
...props
|
|
114
|
+
}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
|
|
115
|
+
return (
|
|
116
|
+
<DrawerPrimitive.Description
|
|
117
|
+
data-slot="drawer-description"
|
|
118
|
+
className={cn("text-sm text-muted-foreground", className)}
|
|
119
|
+
{...props}
|
|
120
|
+
/>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
export {
|
|
125
|
+
Drawer,
|
|
126
|
+
DrawerPortal,
|
|
127
|
+
DrawerOverlay,
|
|
128
|
+
DrawerTrigger,
|
|
129
|
+
DrawerClose,
|
|
130
|
+
DrawerContent,
|
|
131
|
+
DrawerHeader,
|
|
132
|
+
DrawerFooter,
|
|
133
|
+
DrawerTitle,
|
|
134
|
+
DrawerDescription,
|
|
135
|
+
}
|