create-deesse-app 0.4.4 → 0.5.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/README.md +1 -2
- package/bin/cli.js +0 -0
- package/dist/bin/cli.js +0 -0
- package/dist/src/copy.d.ts +1 -1
- package/dist/src/copy.d.ts.map +1 -1
- package/dist/src/copy.js +3 -1
- package/dist/src/copy.js.map +1 -1
- package/dist/src/index.js +1 -1
- package/dist/src/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -11
- package/templates/default/drizzle/0000_cheerful_clea.sql +58 -0
- package/templates/default/drizzle/meta/0000_snapshot.json +405 -0
- package/templates/default/drizzle/meta/_journal.json +13 -0
- package/templates/default/drizzle.config.ts +11 -0
- package/templates/default/next.config.ts +1 -1
- package/templates/default/package.json +1 -0
- package/templates/default/src/app/(deesse)/admin/[[...slug]]/page.tsx +2 -2
- package/templates/default/src/app/(deesse)/admin/layout.tsx +5 -2
- package/templates/default/src/app/layout.tsx +1 -1
- package/templates/default/src/db/schema/auth-schema.ts +100 -0
- package/templates/default/src/deesse.config.ts +10 -1
- package/templates/default/src/deesse.pages.tsx +1 -0
- package/templates/default/src/lib/auth.ts +3 -0
- package/templates/default/src/lib/client.ts +7 -0
- package/templates/default/src/lib/deesse.ts +5 -0
- package/templates/without-admin/AGENTS.md +5 -0
- package/templates/without-admin/CLAUDE.md +1 -0
- package/templates/without-admin/README.md +36 -0
- package/templates/without-admin/components.json +25 -0
- package/templates/without-admin/drizzle.config.ts +11 -0
- package/templates/without-admin/eslint.config.mjs +18 -0
- package/templates/without-admin/next.config.ts +7 -0
- package/templates/without-admin/package-lock.json +11412 -0
- package/templates/without-admin/package.json +41 -0
- package/templates/without-admin/postcss.config.mjs +7 -0
- package/templates/without-admin/public/file.svg +1 -0
- package/templates/without-admin/public/globe.svg +1 -0
- package/templates/without-admin/public/nesalia.svg +50 -0
- package/templates/without-admin/public/next.svg +1 -0
- package/templates/without-admin/public/vercel.svg +1 -0
- package/templates/without-admin/public/window.svg +1 -0
- package/templates/without-admin/src/app/(deesse)/api/[...slug]/route.ts +5 -0
- package/templates/without-admin/src/app/(frontend)/(auth)/login/page.tsx +85 -0
- package/templates/without-admin/src/app/(frontend)/(auth)/signup/page.tsx +90 -0
- package/templates/without-admin/src/app/(frontend)/home/page.tsx +19 -0
- package/templates/without-admin/src/app/(frontend)/layout.tsx +14 -0
- package/templates/without-admin/src/app/(frontend)/page.tsx +50 -0
- package/templates/without-admin/src/app/globals.css +130 -0
- package/templates/without-admin/src/app/icon.svg +109 -0
- package/templates/without-admin/src/app/layout.tsx +37 -0
- package/templates/without-admin/src/components/header.tsx +123 -0
- package/templates/without-admin/src/components/password-input.tsx +50 -0
- package/templates/without-admin/src/components/providers/index.tsx +11 -0
- package/templates/without-admin/src/components/providers/theme-provider.tsx +11 -0
- package/templates/without-admin/src/components/ui/alert-dialog.tsx +199 -0
- package/templates/without-admin/src/components/ui/avatar.tsx +112 -0
- package/templates/without-admin/src/components/ui/button.tsx +67 -0
- package/templates/without-admin/src/components/ui/dialog.tsx +168 -0
- package/templates/without-admin/src/components/ui/dropdown-menu.tsx +269 -0
- package/templates/without-admin/src/components/ui/input.tsx +19 -0
- package/templates/without-admin/src/components/ui/label.tsx +24 -0
- package/templates/without-admin/src/components/ui/sonner.tsx +49 -0
- package/templates/without-admin/src/components/ui/tooltip.tsx +57 -0
- package/templates/without-admin/src/db/schema/auth-schema.ts +100 -0
- package/templates/without-admin/src/db/schema/index.ts +1 -0
- package/templates/without-admin/src/deesse.config.ts +18 -0
- package/templates/without-admin/src/lib/client.ts +7 -0
- package/templates/without-admin/src/lib/deesse.ts +5 -0
- package/templates/without-admin/src/lib/utils.ts +6 -0
- package/templates/without-admin/tsconfig.json +34 -0
- package/templates/minimal/.gitkeep +0 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { AppProvider } from '@/components/providers';
|
|
2
|
+
import { Header } from '@/components/header';
|
|
3
|
+
import type { Metadata } from 'next';
|
|
4
|
+
import { Geist, Geist_Mono } from 'next/font/google';
|
|
5
|
+
import './globals.css';
|
|
6
|
+
|
|
7
|
+
const geistSans = Geist({
|
|
8
|
+
variable: '--font-sans',
|
|
9
|
+
subsets: ['latin'],
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
const geistMono = Geist_Mono({
|
|
13
|
+
variable: '--font-mono',
|
|
14
|
+
subsets: ['latin'],
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export const metadata: Metadata = {
|
|
18
|
+
title: 'Create Deesse App',
|
|
19
|
+
description: 'Generated by create deesse app',
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export default function RootLayout({
|
|
23
|
+
children,
|
|
24
|
+
}: Readonly<{
|
|
25
|
+
children: React.ReactNode;
|
|
26
|
+
}>) {
|
|
27
|
+
return (
|
|
28
|
+
<html lang="en" className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} suppressHydrationWarning>
|
|
29
|
+
<body className="min-h-full flex flex-col font-sans">
|
|
30
|
+
<AppProvider>
|
|
31
|
+
<Header />
|
|
32
|
+
{children}
|
|
33
|
+
</AppProvider>
|
|
34
|
+
</body>
|
|
35
|
+
</html>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import Image from "next/image"
|
|
5
|
+
import Link from "next/link"
|
|
6
|
+
import { useRouter } from "next/navigation"
|
|
7
|
+
import { toast } from "sonner"
|
|
8
|
+
import { Button } from "@/components/ui/button"
|
|
9
|
+
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
10
|
+
import {
|
|
11
|
+
DropdownMenu,
|
|
12
|
+
DropdownMenuContent,
|
|
13
|
+
DropdownMenuItem,
|
|
14
|
+
DropdownMenuTrigger,
|
|
15
|
+
} from "@/components/ui/dropdown-menu"
|
|
16
|
+
import {
|
|
17
|
+
AlertDialog,
|
|
18
|
+
AlertDialogAction,
|
|
19
|
+
AlertDialogCancel,
|
|
20
|
+
AlertDialogContent,
|
|
21
|
+
AlertDialogDescription,
|
|
22
|
+
AlertDialogFooter,
|
|
23
|
+
AlertDialogHeader,
|
|
24
|
+
AlertDialogTitle,
|
|
25
|
+
} from "@/components/ui/alert-dialog"
|
|
26
|
+
import { client } from "@/lib/client"
|
|
27
|
+
|
|
28
|
+
export function Header() {
|
|
29
|
+
const router = useRouter()
|
|
30
|
+
const { data: session, isPending } = client.auth.useSession()
|
|
31
|
+
const [showLogoutDialog, setShowLogoutDialog] = React.useState(false)
|
|
32
|
+
|
|
33
|
+
const handleSignOut = async () => {
|
|
34
|
+
await client.auth.signOut()
|
|
35
|
+
toast.success("Signed out successfully")
|
|
36
|
+
router.push("/")
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (isPending) {
|
|
40
|
+
return (
|
|
41
|
+
<header className="flex h-14 items-center border-b border-border bg-background">
|
|
42
|
+
<div className="flex items-center justify-between w-full px-4 mx-auto max-w-7xl">
|
|
43
|
+
<Link href="/" className="flex items-center gap-2">
|
|
44
|
+
<Image
|
|
45
|
+
src="/nesalia.svg"
|
|
46
|
+
alt="Logo"
|
|
47
|
+
width={36}
|
|
48
|
+
height={36}
|
|
49
|
+
loading="eager"
|
|
50
|
+
/>
|
|
51
|
+
</Link>
|
|
52
|
+
</div>
|
|
53
|
+
</header>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<header className="flex h-14 items-center border-b border-border bg-background">
|
|
59
|
+
<div className="flex items-center justify-between w-full px-4 mx-auto max-w-7xl">
|
|
60
|
+
<Link href="/" className="flex items-center gap-2">
|
|
61
|
+
<Image
|
|
62
|
+
src="/nesalia.svg"
|
|
63
|
+
alt="Logo"
|
|
64
|
+
width={36}
|
|
65
|
+
height={36}
|
|
66
|
+
loading="eager"
|
|
67
|
+
/>
|
|
68
|
+
</Link>
|
|
69
|
+
<nav className="flex items-center gap-2">
|
|
70
|
+
{session ? (
|
|
71
|
+
<>
|
|
72
|
+
<Button variant="outline" asChild>
|
|
73
|
+
<Link href="/home">Dashboard</Link>
|
|
74
|
+
</Button>
|
|
75
|
+
<DropdownMenu>
|
|
76
|
+
<DropdownMenuTrigger asChild>
|
|
77
|
+
<Avatar className="cursor-pointer">
|
|
78
|
+
<AvatarImage
|
|
79
|
+
src={`https://vercel.com/api/www/avatar?s=64&u=${session.user.name}`}
|
|
80
|
+
alt={session.user.name ?? "User"}
|
|
81
|
+
/>
|
|
82
|
+
<AvatarFallback>
|
|
83
|
+
{session.user.name?.[0] ?? "U"}
|
|
84
|
+
</AvatarFallback>
|
|
85
|
+
</Avatar>
|
|
86
|
+
</DropdownMenuTrigger>
|
|
87
|
+
<DropdownMenuContent align="end">
|
|
88
|
+
<DropdownMenuItem onSelect={() => setShowLogoutDialog(true)}>
|
|
89
|
+
Sign out
|
|
90
|
+
</DropdownMenuItem>
|
|
91
|
+
</DropdownMenuContent>
|
|
92
|
+
</DropdownMenu>
|
|
93
|
+
|
|
94
|
+
<AlertDialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
|
|
95
|
+
<AlertDialogContent>
|
|
96
|
+
<AlertDialogHeader>
|
|
97
|
+
<AlertDialogTitle>Sign out</AlertDialogTitle>
|
|
98
|
+
<AlertDialogDescription>
|
|
99
|
+
Are you sure you want to sign out?
|
|
100
|
+
</AlertDialogDescription>
|
|
101
|
+
</AlertDialogHeader>
|
|
102
|
+
<AlertDialogFooter>
|
|
103
|
+
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
104
|
+
<AlertDialogAction onClick={handleSignOut}>Sign out</AlertDialogAction>
|
|
105
|
+
</AlertDialogFooter>
|
|
106
|
+
</AlertDialogContent>
|
|
107
|
+
</AlertDialog>
|
|
108
|
+
</>
|
|
109
|
+
) : (
|
|
110
|
+
<>
|
|
111
|
+
<Button variant="outline" asChild>
|
|
112
|
+
<Link href="/login">Login</Link>
|
|
113
|
+
</Button>
|
|
114
|
+
<Button asChild>
|
|
115
|
+
<Link href="/signup">Sign up</Link>
|
|
116
|
+
</Button>
|
|
117
|
+
</>
|
|
118
|
+
)}
|
|
119
|
+
</nav>
|
|
120
|
+
</div>
|
|
121
|
+
</header>
|
|
122
|
+
)
|
|
123
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { Eye, EyeOff } from "lucide-react"
|
|
5
|
+
|
|
6
|
+
import { cn } from "@/lib/utils"
|
|
7
|
+
import { Button } from "@/components/ui/button"
|
|
8
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
|
|
9
|
+
|
|
10
|
+
function PasswordInput({ className, ...props }: React.ComponentProps<"input">) {
|
|
11
|
+
const [showPassword, setShowPassword] = React.useState(false)
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<TooltipProvider>
|
|
15
|
+
<div className="relative">
|
|
16
|
+
<input
|
|
17
|
+
type={showPassword ? "text" : "password"}
|
|
18
|
+
data-slot="input"
|
|
19
|
+
className={cn(
|
|
20
|
+
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent pr-8 px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 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:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
|
21
|
+
className
|
|
22
|
+
)}
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
<Tooltip>
|
|
26
|
+
<TooltipTrigger asChild>
|
|
27
|
+
<Button
|
|
28
|
+
type="button"
|
|
29
|
+
variant="ghost"
|
|
30
|
+
size="icon"
|
|
31
|
+
className="absolute right-0 top-0 h-full px-2 py-1"
|
|
32
|
+
onClick={() => setShowPassword(!showPassword)}
|
|
33
|
+
>
|
|
34
|
+
{showPassword ? (
|
|
35
|
+
<EyeOff className="h-4 w-4 text-muted-foreground" />
|
|
36
|
+
) : (
|
|
37
|
+
<Eye className="h-4 w-4 text-muted-foreground" />
|
|
38
|
+
)}
|
|
39
|
+
</Button>
|
|
40
|
+
</TooltipTrigger>
|
|
41
|
+
<TooltipContent>
|
|
42
|
+
{showPassword ? "Hide password" : "Show password"}
|
|
43
|
+
</TooltipContent>
|
|
44
|
+
</Tooltip>
|
|
45
|
+
</div>
|
|
46
|
+
</TooltipProvider>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export { PasswordInput }
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ThemeProvider } from './theme-provider';
|
|
2
|
+
import { Toaster } from '@/components/ui/sonner';
|
|
3
|
+
|
|
4
|
+
export const AppProvider = ({ children }: { children: React.ReactNode }) => {
|
|
5
|
+
return (
|
|
6
|
+
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
|
|
7
|
+
{children}
|
|
8
|
+
<Toaster />
|
|
9
|
+
</ThemeProvider>
|
|
10
|
+
);
|
|
11
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { ThemeProvider as NextThemesProvider } from "next-themes"
|
|
5
|
+
|
|
6
|
+
export const ThemeProvider = ({
|
|
7
|
+
children,
|
|
8
|
+
...props
|
|
9
|
+
}: React.ComponentProps<typeof NextThemesProvider>) => {
|
|
10
|
+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
|
11
|
+
}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
|
|
5
|
+
|
|
6
|
+
import { cn } from "@/lib/utils"
|
|
7
|
+
import { Button } from "@/components/ui/button"
|
|
8
|
+
|
|
9
|
+
function AlertDialog({
|
|
10
|
+
...props
|
|
11
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
|
|
12
|
+
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function AlertDialogTrigger({
|
|
16
|
+
...props
|
|
17
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
|
|
18
|
+
return (
|
|
19
|
+
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function AlertDialogPortal({
|
|
24
|
+
...props
|
|
25
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
|
|
26
|
+
return (
|
|
27
|
+
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function AlertDialogOverlay({
|
|
32
|
+
className,
|
|
33
|
+
...props
|
|
34
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
|
|
35
|
+
return (
|
|
36
|
+
<AlertDialogPrimitive.Overlay
|
|
37
|
+
data-slot="alert-dialog-overlay"
|
|
38
|
+
className={cn(
|
|
39
|
+
"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
|
40
|
+
className
|
|
41
|
+
)}
|
|
42
|
+
{...props}
|
|
43
|
+
/>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
function AlertDialogContent({
|
|
48
|
+
className,
|
|
49
|
+
size = "default",
|
|
50
|
+
...props
|
|
51
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
|
|
52
|
+
size?: "default" | "sm"
|
|
53
|
+
}) {
|
|
54
|
+
return (
|
|
55
|
+
<AlertDialogPortal>
|
|
56
|
+
<AlertDialogOverlay />
|
|
57
|
+
<AlertDialogPrimitive.Content
|
|
58
|
+
data-slot="alert-dialog-content"
|
|
59
|
+
data-size={size}
|
|
60
|
+
className={cn(
|
|
61
|
+
"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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",
|
|
62
|
+
className
|
|
63
|
+
)}
|
|
64
|
+
{...props}
|
|
65
|
+
/>
|
|
66
|
+
</AlertDialogPortal>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function AlertDialogHeader({
|
|
71
|
+
className,
|
|
72
|
+
...props
|
|
73
|
+
}: React.ComponentProps<"div">) {
|
|
74
|
+
return (
|
|
75
|
+
<div
|
|
76
|
+
data-slot="alert-dialog-header"
|
|
77
|
+
className={cn(
|
|
78
|
+
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
|
|
79
|
+
className
|
|
80
|
+
)}
|
|
81
|
+
{...props}
|
|
82
|
+
/>
|
|
83
|
+
)
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
function AlertDialogFooter({
|
|
87
|
+
className,
|
|
88
|
+
...props
|
|
89
|
+
}: React.ComponentProps<"div">) {
|
|
90
|
+
return (
|
|
91
|
+
<div
|
|
92
|
+
data-slot="alert-dialog-footer"
|
|
93
|
+
className={cn(
|
|
94
|
+
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
|
|
95
|
+
className
|
|
96
|
+
)}
|
|
97
|
+
{...props}
|
|
98
|
+
/>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
function AlertDialogMedia({
|
|
103
|
+
className,
|
|
104
|
+
...props
|
|
105
|
+
}: React.ComponentProps<"div">) {
|
|
106
|
+
return (
|
|
107
|
+
<div
|
|
108
|
+
data-slot="alert-dialog-media"
|
|
109
|
+
className={cn(
|
|
110
|
+
"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
|
|
111
|
+
className
|
|
112
|
+
)}
|
|
113
|
+
{...props}
|
|
114
|
+
/>
|
|
115
|
+
)
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function AlertDialogTitle({
|
|
119
|
+
className,
|
|
120
|
+
...props
|
|
121
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
|
122
|
+
return (
|
|
123
|
+
<AlertDialogPrimitive.Title
|
|
124
|
+
data-slot="alert-dialog-title"
|
|
125
|
+
className={cn(
|
|
126
|
+
"font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
|
|
127
|
+
className
|
|
128
|
+
)}
|
|
129
|
+
{...props}
|
|
130
|
+
/>
|
|
131
|
+
)
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
function AlertDialogDescription({
|
|
135
|
+
className,
|
|
136
|
+
...props
|
|
137
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
|
138
|
+
return (
|
|
139
|
+
<AlertDialogPrimitive.Description
|
|
140
|
+
data-slot="alert-dialog-description"
|
|
141
|
+
className={cn(
|
|
142
|
+
"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
|
143
|
+
className
|
|
144
|
+
)}
|
|
145
|
+
{...props}
|
|
146
|
+
/>
|
|
147
|
+
)
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
function AlertDialogAction({
|
|
151
|
+
className,
|
|
152
|
+
variant = "default",
|
|
153
|
+
size = "default",
|
|
154
|
+
...props
|
|
155
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
|
|
156
|
+
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
|
157
|
+
return (
|
|
158
|
+
<Button variant={variant} size={size} asChild>
|
|
159
|
+
<AlertDialogPrimitive.Action
|
|
160
|
+
data-slot="alert-dialog-action"
|
|
161
|
+
className={cn(className)}
|
|
162
|
+
{...props}
|
|
163
|
+
/>
|
|
164
|
+
</Button>
|
|
165
|
+
)
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
function AlertDialogCancel({
|
|
169
|
+
className,
|
|
170
|
+
variant = "outline",
|
|
171
|
+
size = "default",
|
|
172
|
+
...props
|
|
173
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
|
|
174
|
+
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
|
175
|
+
return (
|
|
176
|
+
<Button variant={variant} size={size} asChild>
|
|
177
|
+
<AlertDialogPrimitive.Cancel
|
|
178
|
+
data-slot="alert-dialog-cancel"
|
|
179
|
+
className={cn(className)}
|
|
180
|
+
{...props}
|
|
181
|
+
/>
|
|
182
|
+
</Button>
|
|
183
|
+
)
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
export {
|
|
187
|
+
AlertDialog,
|
|
188
|
+
AlertDialogAction,
|
|
189
|
+
AlertDialogCancel,
|
|
190
|
+
AlertDialogContent,
|
|
191
|
+
AlertDialogDescription,
|
|
192
|
+
AlertDialogFooter,
|
|
193
|
+
AlertDialogHeader,
|
|
194
|
+
AlertDialogMedia,
|
|
195
|
+
AlertDialogOverlay,
|
|
196
|
+
AlertDialogPortal,
|
|
197
|
+
AlertDialogTitle,
|
|
198
|
+
AlertDialogTrigger,
|
|
199
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { Avatar as AvatarPrimitive } from "radix-ui"
|
|
5
|
+
|
|
6
|
+
import { cn } from "@/lib/utils"
|
|
7
|
+
|
|
8
|
+
function Avatar({
|
|
9
|
+
className,
|
|
10
|
+
size = "default",
|
|
11
|
+
...props
|
|
12
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
|
|
13
|
+
size?: "default" | "sm" | "lg"
|
|
14
|
+
}) {
|
|
15
|
+
return (
|
|
16
|
+
<AvatarPrimitive.Root
|
|
17
|
+
data-slot="avatar"
|
|
18
|
+
data-size={size}
|
|
19
|
+
className={cn(
|
|
20
|
+
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
|
21
|
+
className
|
|
22
|
+
)}
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function AvatarImage({
|
|
29
|
+
className,
|
|
30
|
+
...props
|
|
31
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
|
32
|
+
return (
|
|
33
|
+
<AvatarPrimitive.Image
|
|
34
|
+
data-slot="avatar-image"
|
|
35
|
+
className={cn(
|
|
36
|
+
"aspect-square size-full rounded-full object-cover",
|
|
37
|
+
className
|
|
38
|
+
)}
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function AvatarFallback({
|
|
45
|
+
className,
|
|
46
|
+
...props
|
|
47
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
|
48
|
+
return (
|
|
49
|
+
<AvatarPrimitive.Fallback
|
|
50
|
+
data-slot="avatar-fallback"
|
|
51
|
+
className={cn(
|
|
52
|
+
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
|
53
|
+
className
|
|
54
|
+
)}
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
|
61
|
+
return (
|
|
62
|
+
<span
|
|
63
|
+
data-slot="avatar-badge"
|
|
64
|
+
className={cn(
|
|
65
|
+
"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
|
|
66
|
+
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
|
67
|
+
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
|
68
|
+
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
|
69
|
+
className
|
|
70
|
+
)}
|
|
71
|
+
{...props}
|
|
72
|
+
/>
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
|
77
|
+
return (
|
|
78
|
+
<div
|
|
79
|
+
data-slot="avatar-group"
|
|
80
|
+
className={cn(
|
|
81
|
+
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
|
|
82
|
+
className
|
|
83
|
+
)}
|
|
84
|
+
{...props}
|
|
85
|
+
/>
|
|
86
|
+
)
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function AvatarGroupCount({
|
|
90
|
+
className,
|
|
91
|
+
...props
|
|
92
|
+
}: React.ComponentProps<"div">) {
|
|
93
|
+
return (
|
|
94
|
+
<div
|
|
95
|
+
data-slot="avatar-group-count"
|
|
96
|
+
className={cn(
|
|
97
|
+
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
|
|
98
|
+
className
|
|
99
|
+
)}
|
|
100
|
+
{...props}
|
|
101
|
+
/>
|
|
102
|
+
)
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
export {
|
|
106
|
+
Avatar,
|
|
107
|
+
AvatarImage,
|
|
108
|
+
AvatarFallback,
|
|
109
|
+
AvatarGroup,
|
|
110
|
+
AvatarGroupCount,
|
|
111
|
+
AvatarBadge,
|
|
112
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
3
|
+
import { Slot } from "radix-ui"
|
|
4
|
+
|
|
5
|
+
import { cn } from "@/lib/utils"
|
|
6
|
+
|
|
7
|
+
const buttonVariants = cva(
|
|
8
|
+
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
variant: {
|
|
12
|
+
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
|
13
|
+
outline:
|
|
14
|
+
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
|
15
|
+
secondary:
|
|
16
|
+
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
|
17
|
+
ghost:
|
|
18
|
+
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
|
19
|
+
destructive:
|
|
20
|
+
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
|
21
|
+
link: "text-primary underline-offset-4 hover:underline",
|
|
22
|
+
},
|
|
23
|
+
size: {
|
|
24
|
+
default:
|
|
25
|
+
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
26
|
+
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
|
27
|
+
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
|
28
|
+
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
|
29
|
+
icon: "size-8",
|
|
30
|
+
"icon-xs":
|
|
31
|
+
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
|
32
|
+
"icon-sm":
|
|
33
|
+
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
|
34
|
+
"icon-lg": "size-9",
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
defaultVariants: {
|
|
38
|
+
variant: "default",
|
|
39
|
+
size: "default",
|
|
40
|
+
},
|
|
41
|
+
}
|
|
42
|
+
)
|
|
43
|
+
|
|
44
|
+
function Button({
|
|
45
|
+
className,
|
|
46
|
+
variant = "default",
|
|
47
|
+
size = "default",
|
|
48
|
+
asChild = false,
|
|
49
|
+
...props
|
|
50
|
+
}: React.ComponentProps<"button"> &
|
|
51
|
+
VariantProps<typeof buttonVariants> & {
|
|
52
|
+
asChild?: boolean
|
|
53
|
+
}) {
|
|
54
|
+
const Comp = asChild ? Slot.Root : "button"
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<Comp
|
|
58
|
+
data-slot="button"
|
|
59
|
+
data-variant={variant}
|
|
60
|
+
data-size={size}
|
|
61
|
+
className={cn(buttonVariants({ variant, size, className }))}
|
|
62
|
+
{...props}
|
|
63
|
+
/>
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export { Button, buttonVariants }
|