@create-lft-app/nextjs 3.2.0 → 3.3.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 +549 -549
- package/package.json +48 -48
- package/template/.claude/skills/anti-patterns.md +150 -0
- package/template/.claude/skills/drizzle-schema.md +178 -0
- package/template/.claude/skills/formatting.md +56 -0
- package/template/.claude/skills/module-architecture.md +143 -0
- package/template/.claude/skills/supabase-server-actions.md +199 -0
- package/template/.claude/skills/ui-patterns.md +161 -0
- package/template/CLAUDE.md +114 -1239
- package/template/drizzle.config.ts +12 -12
- package/template/eslint.config.mjs +16 -16
- package/template/gitignore +36 -36
- package/template/next.config.ts +7 -7
- package/template/package.json +86 -86
- package/template/postcss.config.mjs +7 -7
- package/template/proxy.ts +12 -12
- package/template/public/logolft.svg +11 -11
- package/template/src/app/(auth)/dashboard/dashboard-content.tsx +124 -124
- package/template/src/app/(auth)/dashboard/page.tsx +9 -9
- package/template/src/app/(auth)/layout.tsx +7 -7
- package/template/src/app/(auth)/users/page.tsx +9 -9
- package/template/src/app/(auth)/users/users-content.tsx +26 -26
- package/template/src/app/(public)/layout.tsx +7 -7
- package/template/src/app/(public)/login/page.tsx +17 -17
- package/template/src/app/api/webhooks/route.ts +20 -20
- package/template/src/app/globals.css +249 -249
- package/template/src/app/layout.tsx +37 -37
- package/template/src/app/page.tsx +5 -5
- package/template/src/app/providers.tsx +27 -27
- package/template/src/components/layout/main-content.tsx +28 -28
- package/template/src/components/layout/sidebar-context.tsx +33 -33
- package/template/src/components/layout/sidebar.tsx +141 -141
- package/template/src/components/tables/data-table-column-header.tsx +68 -68
- package/template/src/components/tables/data-table-date-filter.tsx +203 -203
- package/template/src/components/tables/data-table-faceted-filter.tsx +185 -185
- package/template/src/components/tables/data-table-filters-dropdown.tsx +130 -130
- package/template/src/components/tables/data-table-number-filter.tsx +295 -295
- package/template/src/components/tables/data-table-pagination.tsx +99 -99
- package/template/src/components/tables/data-table-toolbar.tsx +140 -140
- package/template/src/components/tables/data-table-view-options.tsx +63 -63
- package/template/src/components/tables/data-table.tsx +148 -148
- package/template/src/components/tables/index.ts +9 -9
- package/template/src/components/ui/accordion.tsx +58 -58
- package/template/src/components/ui/alert-dialog.tsx +165 -165
- package/template/src/components/ui/alert.tsx +66 -66
- package/template/src/components/ui/animations/index.ts +44 -44
- package/template/src/components/ui/avatar.tsx +55 -55
- package/template/src/components/ui/badge.tsx +50 -50
- package/template/src/components/ui/button.tsx +118 -118
- package/template/src/components/ui/calendar.tsx +220 -220
- package/template/src/components/ui/card.tsx +113 -113
- package/template/src/components/ui/checkbox.tsx +38 -38
- package/template/src/components/ui/collapsible.tsx +33 -33
- package/template/src/components/ui/command.tsx +196 -196
- package/template/src/components/ui/dialog.tsx +156 -156
- package/template/src/components/ui/dropdown-menu.tsx +280 -280
- package/template/src/components/ui/form.tsx +171 -171
- package/template/src/components/ui/icons.tsx +167 -167
- package/template/src/components/ui/input.tsx +28 -28
- package/template/src/components/ui/label.tsx +25 -25
- package/template/src/components/ui/motion.tsx +197 -197
- package/template/src/components/ui/page-transition.tsx +166 -166
- package/template/src/components/ui/popover.tsx +59 -59
- package/template/src/components/ui/progress.tsx +32 -32
- package/template/src/components/ui/radio-group.tsx +45 -45
- package/template/src/components/ui/scroll-area.tsx +63 -63
- package/template/src/components/ui/select.tsx +208 -208
- package/template/src/components/ui/separator.tsx +28 -28
- package/template/src/components/ui/sheet.tsx +170 -170
- package/template/src/components/ui/sidebar.tsx +726 -726
- package/template/src/components/ui/skeleton.tsx +15 -15
- package/template/src/components/ui/slider.tsx +58 -58
- package/template/src/components/ui/sonner.tsx +47 -47
- package/template/src/components/ui/spinner.tsx +27 -27
- package/template/src/components/ui/submit-button.tsx +47 -47
- package/template/src/components/ui/switch.tsx +31 -31
- package/template/src/components/ui/table.tsx +120 -120
- package/template/src/components/ui/tabs.tsx +75 -75
- package/template/src/components/ui/textarea.tsx +26 -26
- package/template/src/components/ui/tooltip.tsx +70 -70
- package/template/src/config/navigation.ts +59 -59
- package/template/src/config/roles.ts +27 -27
- package/template/src/config/site.ts +12 -12
- package/template/src/db/index.ts +12 -12
- package/template/src/db/schema/index.ts +1 -1
- package/template/src/db/schema/users.ts +16 -16
- package/template/src/db/seed.ts +39 -39
- package/template/src/hooks/index.ts +3 -3
- package/template/src/hooks/use-mobile.ts +21 -21
- package/template/src/hooks/useDataTable.ts +82 -82
- package/template/src/hooks/useDebounce.ts +49 -49
- package/template/src/hooks/useMediaQuery.ts +36 -36
- package/template/src/lib/date/config.ts +36 -36
- package/template/src/lib/date/formatters.ts +127 -127
- package/template/src/lib/date/index.ts +26 -26
- package/template/src/lib/excel/exporter.ts +89 -89
- package/template/src/lib/excel/index.ts +14 -14
- package/template/src/lib/excel/parser.ts +96 -96
- package/template/src/lib/query-client.ts +35 -35
- package/template/src/lib/supabase/admin.ts +23 -23
- package/template/src/lib/supabase/client.ts +11 -11
- package/template/src/lib/supabase/proxy.ts +67 -67
- package/template/src/lib/supabase/server.ts +38 -38
- package/template/src/lib/supabase/types.ts +53 -53
- package/template/src/lib/utils.ts +6 -6
- package/template/src/lib/validations/common.ts +75 -75
- package/template/src/lib/validations/index.ts +20 -20
- package/template/src/modules/auth/actions/auth-actions.ts +59 -59
- package/template/src/modules/auth/components/login-form.tsx +68 -68
- package/template/src/modules/auth/hooks/useAuth.ts +38 -38
- package/template/src/modules/auth/hooks/useAuthMutations.ts +43 -43
- package/template/src/modules/auth/hooks/useAuthQueries.ts +43 -43
- package/template/src/modules/auth/index.ts +12 -12
- package/template/src/modules/auth/schemas/auth.schema.ts +32 -32
- package/template/src/modules/auth/stores/useAuthStore.ts +37 -37
- package/template/src/modules/users/actions/users-actions.ts +166 -166
- package/template/src/modules/users/columns.tsx +106 -106
- package/template/src/modules/users/components/users-list.tsx +48 -48
- package/template/src/modules/users/hooks/useUsers.ts +39 -39
- package/template/src/modules/users/hooks/useUsersMutations.ts +55 -55
- package/template/src/modules/users/hooks/useUsersQueries.ts +35 -35
- package/template/src/modules/users/index.ts +30 -30
- package/template/src/modules/users/schemas/users.schema.ts +51 -51
- package/template/src/modules/users/stores/useUsersStore.ts +60 -60
- package/template/src/modules/users/types/auth-user.types.ts +42 -42
- package/template/src/modules/users/utils/user-mapper.ts +32 -32
- package/template/src/stores/index.ts +1 -1
- package/template/src/stores/useUiStore.ts +55 -55
- package/template/src/types/api.ts +28 -28
- package/template/src/types/index.ts +2 -2
- package/template/src/types/table.ts +34 -34
- package/template/supabase/config.toml +94 -94
- package/template/tsconfig.json +42 -42
|
@@ -1,165 +1,165 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
|
5
|
-
|
|
6
|
-
import { cn } from "@/lib/utils"
|
|
7
|
-
import { buttonVariants } 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",
|
|
40
|
-
"bg-background/60 dark:bg-background/80",
|
|
41
|
-
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
42
|
-
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
43
|
-
className
|
|
44
|
-
)}
|
|
45
|
-
{...props}
|
|
46
|
-
/>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function AlertDialogContent({
|
|
51
|
-
className,
|
|
52
|
-
...props
|
|
53
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
|
54
|
-
return (
|
|
55
|
-
<AlertDialogPortal>
|
|
56
|
-
<AlertDialogOverlay />
|
|
57
|
-
<AlertDialogPrimitive.Content
|
|
58
|
-
data-slot="alert-dialog-content"
|
|
59
|
-
className={cn(
|
|
60
|
-
"fixed left-[50%] top-[50%] z-50",
|
|
61
|
-
"translate-x-[-50%] translate-y-[-50%]",
|
|
62
|
-
"grid w-full max-w-lg gap-4 border bg-background p-6",
|
|
63
|
-
"duration-200",
|
|
64
|
-
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
65
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
66
|
-
className
|
|
67
|
-
)}
|
|
68
|
-
{...props}
|
|
69
|
-
/>
|
|
70
|
-
</AlertDialogPortal>
|
|
71
|
-
)
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
function AlertDialogHeader({
|
|
75
|
-
className,
|
|
76
|
-
...props
|
|
77
|
-
}: React.ComponentProps<"div">) {
|
|
78
|
-
return (
|
|
79
|
-
<div
|
|
80
|
-
data-slot="alert-dialog-header"
|
|
81
|
-
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
|
82
|
-
{...props}
|
|
83
|
-
/>
|
|
84
|
-
)
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
function AlertDialogFooter({
|
|
88
|
-
className,
|
|
89
|
-
...props
|
|
90
|
-
}: React.ComponentProps<"div">) {
|
|
91
|
-
return (
|
|
92
|
-
<div
|
|
93
|
-
data-slot="alert-dialog-footer"
|
|
94
|
-
className={cn(
|
|
95
|
-
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
96
|
-
className
|
|
97
|
-
)}
|
|
98
|
-
{...props}
|
|
99
|
-
/>
|
|
100
|
-
)
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
function AlertDialogTitle({
|
|
104
|
-
className,
|
|
105
|
-
...props
|
|
106
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
|
107
|
-
return (
|
|
108
|
-
<AlertDialogPrimitive.Title
|
|
109
|
-
data-slot="alert-dialog-title"
|
|
110
|
-
className={cn("text-lg font-semibold", className)}
|
|
111
|
-
{...props}
|
|
112
|
-
/>
|
|
113
|
-
)
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
function AlertDialogDescription({
|
|
117
|
-
className,
|
|
118
|
-
...props
|
|
119
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
|
120
|
-
return (
|
|
121
|
-
<AlertDialogPrimitive.Description
|
|
122
|
-
data-slot="alert-dialog-description"
|
|
123
|
-
className={cn("text-muted-foreground text-sm", className)}
|
|
124
|
-
{...props}
|
|
125
|
-
/>
|
|
126
|
-
)
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
function AlertDialogAction({
|
|
130
|
-
className,
|
|
131
|
-
...props
|
|
132
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
|
133
|
-
return (
|
|
134
|
-
<AlertDialogPrimitive.Action
|
|
135
|
-
className={cn(buttonVariants(), className)}
|
|
136
|
-
{...props}
|
|
137
|
-
/>
|
|
138
|
-
)
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
function AlertDialogCancel({
|
|
142
|
-
className,
|
|
143
|
-
...props
|
|
144
|
-
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
|
145
|
-
return (
|
|
146
|
-
<AlertDialogPrimitive.Cancel
|
|
147
|
-
className={cn(buttonVariants({ variant: "outline" }), className)}
|
|
148
|
-
{...props}
|
|
149
|
-
/>
|
|
150
|
-
)
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
export {
|
|
154
|
-
AlertDialog,
|
|
155
|
-
AlertDialogPortal,
|
|
156
|
-
AlertDialogOverlay,
|
|
157
|
-
AlertDialogTrigger,
|
|
158
|
-
AlertDialogContent,
|
|
159
|
-
AlertDialogHeader,
|
|
160
|
-
AlertDialogFooter,
|
|
161
|
-
AlertDialogTitle,
|
|
162
|
-
AlertDialogDescription,
|
|
163
|
-
AlertDialogAction,
|
|
164
|
-
AlertDialogCancel,
|
|
165
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
|
5
|
+
|
|
6
|
+
import { cn } from "@/lib/utils"
|
|
7
|
+
import { buttonVariants } 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",
|
|
40
|
+
"bg-background/60 dark:bg-background/80",
|
|
41
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
42
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
43
|
+
className
|
|
44
|
+
)}
|
|
45
|
+
{...props}
|
|
46
|
+
/>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function AlertDialogContent({
|
|
51
|
+
className,
|
|
52
|
+
...props
|
|
53
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
|
|
54
|
+
return (
|
|
55
|
+
<AlertDialogPortal>
|
|
56
|
+
<AlertDialogOverlay />
|
|
57
|
+
<AlertDialogPrimitive.Content
|
|
58
|
+
data-slot="alert-dialog-content"
|
|
59
|
+
className={cn(
|
|
60
|
+
"fixed left-[50%] top-[50%] z-50",
|
|
61
|
+
"translate-x-[-50%] translate-y-[-50%]",
|
|
62
|
+
"grid w-full max-w-lg gap-4 border bg-background p-6",
|
|
63
|
+
"duration-200",
|
|
64
|
+
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
65
|
+
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
66
|
+
className
|
|
67
|
+
)}
|
|
68
|
+
{...props}
|
|
69
|
+
/>
|
|
70
|
+
</AlertDialogPortal>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function AlertDialogHeader({
|
|
75
|
+
className,
|
|
76
|
+
...props
|
|
77
|
+
}: React.ComponentProps<"div">) {
|
|
78
|
+
return (
|
|
79
|
+
<div
|
|
80
|
+
data-slot="alert-dialog-header"
|
|
81
|
+
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
|
82
|
+
{...props}
|
|
83
|
+
/>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function AlertDialogFooter({
|
|
88
|
+
className,
|
|
89
|
+
...props
|
|
90
|
+
}: React.ComponentProps<"div">) {
|
|
91
|
+
return (
|
|
92
|
+
<div
|
|
93
|
+
data-slot="alert-dialog-footer"
|
|
94
|
+
className={cn(
|
|
95
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
96
|
+
className
|
|
97
|
+
)}
|
|
98
|
+
{...props}
|
|
99
|
+
/>
|
|
100
|
+
)
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function AlertDialogTitle({
|
|
104
|
+
className,
|
|
105
|
+
...props
|
|
106
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
|
107
|
+
return (
|
|
108
|
+
<AlertDialogPrimitive.Title
|
|
109
|
+
data-slot="alert-dialog-title"
|
|
110
|
+
className={cn("text-lg font-semibold", className)}
|
|
111
|
+
{...props}
|
|
112
|
+
/>
|
|
113
|
+
)
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
function AlertDialogDescription({
|
|
117
|
+
className,
|
|
118
|
+
...props
|
|
119
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
|
120
|
+
return (
|
|
121
|
+
<AlertDialogPrimitive.Description
|
|
122
|
+
data-slot="alert-dialog-description"
|
|
123
|
+
className={cn("text-muted-foreground text-sm", className)}
|
|
124
|
+
{...props}
|
|
125
|
+
/>
|
|
126
|
+
)
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function AlertDialogAction({
|
|
130
|
+
className,
|
|
131
|
+
...props
|
|
132
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
|
|
133
|
+
return (
|
|
134
|
+
<AlertDialogPrimitive.Action
|
|
135
|
+
className={cn(buttonVariants(), className)}
|
|
136
|
+
{...props}
|
|
137
|
+
/>
|
|
138
|
+
)
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
function AlertDialogCancel({
|
|
142
|
+
className,
|
|
143
|
+
...props
|
|
144
|
+
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
|
|
145
|
+
return (
|
|
146
|
+
<AlertDialogPrimitive.Cancel
|
|
147
|
+
className={cn(buttonVariants({ variant: "outline" }), className)}
|
|
148
|
+
{...props}
|
|
149
|
+
/>
|
|
150
|
+
)
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
export {
|
|
154
|
+
AlertDialog,
|
|
155
|
+
AlertDialogPortal,
|
|
156
|
+
AlertDialogOverlay,
|
|
157
|
+
AlertDialogTrigger,
|
|
158
|
+
AlertDialogContent,
|
|
159
|
+
AlertDialogHeader,
|
|
160
|
+
AlertDialogFooter,
|
|
161
|
+
AlertDialogTitle,
|
|
162
|
+
AlertDialogDescription,
|
|
163
|
+
AlertDialogAction,
|
|
164
|
+
AlertDialogCancel,
|
|
165
|
+
}
|
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
import { cva, type VariantProps } from "class-variance-authority"
|
|
3
|
-
|
|
4
|
-
import { cn } from "@/lib/utils"
|
|
5
|
-
|
|
6
|
-
const alertVariants = cva(
|
|
7
|
-
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
|
8
|
-
{
|
|
9
|
-
variants: {
|
|
10
|
-
variant: {
|
|
11
|
-
default: "bg-card text-card-foreground",
|
|
12
|
-
destructive:
|
|
13
|
-
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
|
14
|
-
},
|
|
15
|
-
},
|
|
16
|
-
defaultVariants: {
|
|
17
|
-
variant: "default",
|
|
18
|
-
},
|
|
19
|
-
}
|
|
20
|
-
)
|
|
21
|
-
|
|
22
|
-
function Alert({
|
|
23
|
-
className,
|
|
24
|
-
variant,
|
|
25
|
-
...props
|
|
26
|
-
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
|
27
|
-
return (
|
|
28
|
-
<div
|
|
29
|
-
data-slot="alert"
|
|
30
|
-
role="alert"
|
|
31
|
-
className={cn(alertVariants({ variant }), className)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
38
|
-
return (
|
|
39
|
-
<div
|
|
40
|
-
data-slot="alert-title"
|
|
41
|
-
className={cn(
|
|
42
|
-
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
|
43
|
-
className
|
|
44
|
-
)}
|
|
45
|
-
{...props}
|
|
46
|
-
/>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function AlertDescription({
|
|
51
|
-
className,
|
|
52
|
-
...props
|
|
53
|
-
}: React.ComponentProps<"div">) {
|
|
54
|
-
return (
|
|
55
|
-
<div
|
|
56
|
-
data-slot="alert-description"
|
|
57
|
-
className={cn(
|
|
58
|
-
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
|
59
|
-
className
|
|
60
|
-
)}
|
|
61
|
-
{...props}
|
|
62
|
-
/>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export { Alert, AlertTitle, AlertDescription }
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
import { cva, type VariantProps } from "class-variance-authority"
|
|
3
|
+
|
|
4
|
+
import { cn } from "@/lib/utils"
|
|
5
|
+
|
|
6
|
+
const alertVariants = cva(
|
|
7
|
+
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: "bg-card text-card-foreground",
|
|
12
|
+
destructive:
|
|
13
|
+
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
defaultVariants: {
|
|
17
|
+
variant: "default",
|
|
18
|
+
},
|
|
19
|
+
}
|
|
20
|
+
)
|
|
21
|
+
|
|
22
|
+
function Alert({
|
|
23
|
+
className,
|
|
24
|
+
variant,
|
|
25
|
+
...props
|
|
26
|
+
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
|
27
|
+
return (
|
|
28
|
+
<div
|
|
29
|
+
data-slot="alert"
|
|
30
|
+
role="alert"
|
|
31
|
+
className={cn(alertVariants({ variant }), className)}
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
|
38
|
+
return (
|
|
39
|
+
<div
|
|
40
|
+
data-slot="alert-title"
|
|
41
|
+
className={cn(
|
|
42
|
+
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
|
|
43
|
+
className
|
|
44
|
+
)}
|
|
45
|
+
{...props}
|
|
46
|
+
/>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function AlertDescription({
|
|
51
|
+
className,
|
|
52
|
+
...props
|
|
53
|
+
}: React.ComponentProps<"div">) {
|
|
54
|
+
return (
|
|
55
|
+
<div
|
|
56
|
+
data-slot="alert-description"
|
|
57
|
+
className={cn(
|
|
58
|
+
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
|
|
59
|
+
className
|
|
60
|
+
)}
|
|
61
|
+
{...props}
|
|
62
|
+
/>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export { Alert, AlertTitle, AlertDescription }
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
// Motion primitives y variantes
|
|
2
|
-
export {
|
|
3
|
-
MotionDiv,
|
|
4
|
-
MotionSpan,
|
|
5
|
-
MotionButton,
|
|
6
|
-
MotionUl,
|
|
7
|
-
MotionLi,
|
|
8
|
-
MotionNav,
|
|
9
|
-
MotionSection,
|
|
10
|
-
MotionArticle,
|
|
11
|
-
MotionHeader,
|
|
12
|
-
MotionFooter,
|
|
13
|
-
MotionMain,
|
|
14
|
-
MotionAside,
|
|
15
|
-
FadeIn,
|
|
16
|
-
ScaleIn,
|
|
17
|
-
StaggerList,
|
|
18
|
-
StaggerItem,
|
|
19
|
-
AnimatePresence,
|
|
20
|
-
// Variantes
|
|
21
|
-
fadeIn,
|
|
22
|
-
fadeInUp,
|
|
23
|
-
fadeInDown,
|
|
24
|
-
fadeInLeft,
|
|
25
|
-
fadeInRight,
|
|
26
|
-
scaleIn,
|
|
27
|
-
slideInFromBottom,
|
|
28
|
-
slideInFromTop,
|
|
29
|
-
staggerContainer,
|
|
30
|
-
staggerItem,
|
|
31
|
-
// Transiciones
|
|
32
|
-
springTransition,
|
|
33
|
-
easeTransition,
|
|
34
|
-
smoothTransition,
|
|
35
|
-
} from '../motion'
|
|
36
|
-
|
|
37
|
-
// Page transitions
|
|
38
|
-
export {
|
|
39
|
-
PageTransition,
|
|
40
|
-
PageSection,
|
|
41
|
-
PageHeader,
|
|
42
|
-
PageTitle,
|
|
43
|
-
PageDescription,
|
|
44
|
-
} from '../page-transition'
|
|
1
|
+
// Motion primitives y variantes
|
|
2
|
+
export {
|
|
3
|
+
MotionDiv,
|
|
4
|
+
MotionSpan,
|
|
5
|
+
MotionButton,
|
|
6
|
+
MotionUl,
|
|
7
|
+
MotionLi,
|
|
8
|
+
MotionNav,
|
|
9
|
+
MotionSection,
|
|
10
|
+
MotionArticle,
|
|
11
|
+
MotionHeader,
|
|
12
|
+
MotionFooter,
|
|
13
|
+
MotionMain,
|
|
14
|
+
MotionAside,
|
|
15
|
+
FadeIn,
|
|
16
|
+
ScaleIn,
|
|
17
|
+
StaggerList,
|
|
18
|
+
StaggerItem,
|
|
19
|
+
AnimatePresence,
|
|
20
|
+
// Variantes
|
|
21
|
+
fadeIn,
|
|
22
|
+
fadeInUp,
|
|
23
|
+
fadeInDown,
|
|
24
|
+
fadeInLeft,
|
|
25
|
+
fadeInRight,
|
|
26
|
+
scaleIn,
|
|
27
|
+
slideInFromBottom,
|
|
28
|
+
slideInFromTop,
|
|
29
|
+
staggerContainer,
|
|
30
|
+
staggerItem,
|
|
31
|
+
// Transiciones
|
|
32
|
+
springTransition,
|
|
33
|
+
easeTransition,
|
|
34
|
+
smoothTransition,
|
|
35
|
+
} from '../motion'
|
|
36
|
+
|
|
37
|
+
// Page transitions
|
|
38
|
+
export {
|
|
39
|
+
PageTransition,
|
|
40
|
+
PageSection,
|
|
41
|
+
PageHeader,
|
|
42
|
+
PageTitle,
|
|
43
|
+
PageDescription,
|
|
44
|
+
} from '../page-transition'
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
|
5
|
-
|
|
6
|
-
import { cn } from "@/lib/utils"
|
|
7
|
-
|
|
8
|
-
function Avatar({
|
|
9
|
-
className,
|
|
10
|
-
...props
|
|
11
|
-
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
|
12
|
-
return (
|
|
13
|
-
<AvatarPrimitive.Root
|
|
14
|
-
data-slot="avatar"
|
|
15
|
-
className={cn(
|
|
16
|
-
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
|
17
|
-
className
|
|
18
|
-
)}
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function AvatarImage({
|
|
25
|
-
className,
|
|
26
|
-
...props
|
|
27
|
-
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
|
28
|
-
return (
|
|
29
|
-
<AvatarPrimitive.Image
|
|
30
|
-
data-slot="avatar-image"
|
|
31
|
-
className={cn("aspect-square size-full", className)}
|
|
32
|
-
{...props}
|
|
33
|
-
/>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function AvatarFallback({
|
|
38
|
-
className,
|
|
39
|
-
...props
|
|
40
|
-
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
|
41
|
-
return (
|
|
42
|
-
<AvatarPrimitive.Fallback
|
|
43
|
-
data-slot="avatar-fallback"
|
|
44
|
-
className={cn(
|
|
45
|
-
"flex h-full w-full items-center justify-center rounded-full",
|
|
46
|
-
"bg-muted",
|
|
47
|
-
"text-sm font-medium text-muted-foreground",
|
|
48
|
-
className
|
|
49
|
-
)}
|
|
50
|
-
{...props}
|
|
51
|
-
/>
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
export { Avatar, AvatarImage, AvatarFallback }
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
|
5
|
+
|
|
6
|
+
import { cn } from "@/lib/utils"
|
|
7
|
+
|
|
8
|
+
function Avatar({
|
|
9
|
+
className,
|
|
10
|
+
...props
|
|
11
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
|
|
12
|
+
return (
|
|
13
|
+
<AvatarPrimitive.Root
|
|
14
|
+
data-slot="avatar"
|
|
15
|
+
className={cn(
|
|
16
|
+
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
|
17
|
+
className
|
|
18
|
+
)}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
function AvatarImage({
|
|
25
|
+
className,
|
|
26
|
+
...props
|
|
27
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
|
|
28
|
+
return (
|
|
29
|
+
<AvatarPrimitive.Image
|
|
30
|
+
data-slot="avatar-image"
|
|
31
|
+
className={cn("aspect-square size-full", className)}
|
|
32
|
+
{...props}
|
|
33
|
+
/>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function AvatarFallback({
|
|
38
|
+
className,
|
|
39
|
+
...props
|
|
40
|
+
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
|
|
41
|
+
return (
|
|
42
|
+
<AvatarPrimitive.Fallback
|
|
43
|
+
data-slot="avatar-fallback"
|
|
44
|
+
className={cn(
|
|
45
|
+
"flex h-full w-full items-center justify-center rounded-full",
|
|
46
|
+
"bg-muted",
|
|
47
|
+
"text-sm font-medium text-muted-foreground",
|
|
48
|
+
className
|
|
49
|
+
)}
|
|
50
|
+
{...props}
|
|
51
|
+
/>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export { Avatar, AvatarImage, AvatarFallback }
|