@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.
Files changed (133) hide show
  1. package/README.md +549 -549
  2. package/package.json +48 -48
  3. package/template/.claude/skills/anti-patterns.md +150 -0
  4. package/template/.claude/skills/drizzle-schema.md +178 -0
  5. package/template/.claude/skills/formatting.md +56 -0
  6. package/template/.claude/skills/module-architecture.md +143 -0
  7. package/template/.claude/skills/supabase-server-actions.md +199 -0
  8. package/template/.claude/skills/ui-patterns.md +161 -0
  9. package/template/CLAUDE.md +114 -1239
  10. package/template/drizzle.config.ts +12 -12
  11. package/template/eslint.config.mjs +16 -16
  12. package/template/gitignore +36 -36
  13. package/template/next.config.ts +7 -7
  14. package/template/package.json +86 -86
  15. package/template/postcss.config.mjs +7 -7
  16. package/template/proxy.ts +12 -12
  17. package/template/public/logolft.svg +11 -11
  18. package/template/src/app/(auth)/dashboard/dashboard-content.tsx +124 -124
  19. package/template/src/app/(auth)/dashboard/page.tsx +9 -9
  20. package/template/src/app/(auth)/layout.tsx +7 -7
  21. package/template/src/app/(auth)/users/page.tsx +9 -9
  22. package/template/src/app/(auth)/users/users-content.tsx +26 -26
  23. package/template/src/app/(public)/layout.tsx +7 -7
  24. package/template/src/app/(public)/login/page.tsx +17 -17
  25. package/template/src/app/api/webhooks/route.ts +20 -20
  26. package/template/src/app/globals.css +249 -249
  27. package/template/src/app/layout.tsx +37 -37
  28. package/template/src/app/page.tsx +5 -5
  29. package/template/src/app/providers.tsx +27 -27
  30. package/template/src/components/layout/main-content.tsx +28 -28
  31. package/template/src/components/layout/sidebar-context.tsx +33 -33
  32. package/template/src/components/layout/sidebar.tsx +141 -141
  33. package/template/src/components/tables/data-table-column-header.tsx +68 -68
  34. package/template/src/components/tables/data-table-date-filter.tsx +203 -203
  35. package/template/src/components/tables/data-table-faceted-filter.tsx +185 -185
  36. package/template/src/components/tables/data-table-filters-dropdown.tsx +130 -130
  37. package/template/src/components/tables/data-table-number-filter.tsx +295 -295
  38. package/template/src/components/tables/data-table-pagination.tsx +99 -99
  39. package/template/src/components/tables/data-table-toolbar.tsx +140 -140
  40. package/template/src/components/tables/data-table-view-options.tsx +63 -63
  41. package/template/src/components/tables/data-table.tsx +148 -148
  42. package/template/src/components/tables/index.ts +9 -9
  43. package/template/src/components/ui/accordion.tsx +58 -58
  44. package/template/src/components/ui/alert-dialog.tsx +165 -165
  45. package/template/src/components/ui/alert.tsx +66 -66
  46. package/template/src/components/ui/animations/index.ts +44 -44
  47. package/template/src/components/ui/avatar.tsx +55 -55
  48. package/template/src/components/ui/badge.tsx +50 -50
  49. package/template/src/components/ui/button.tsx +118 -118
  50. package/template/src/components/ui/calendar.tsx +220 -220
  51. package/template/src/components/ui/card.tsx +113 -113
  52. package/template/src/components/ui/checkbox.tsx +38 -38
  53. package/template/src/components/ui/collapsible.tsx +33 -33
  54. package/template/src/components/ui/command.tsx +196 -196
  55. package/template/src/components/ui/dialog.tsx +156 -156
  56. package/template/src/components/ui/dropdown-menu.tsx +280 -280
  57. package/template/src/components/ui/form.tsx +171 -171
  58. package/template/src/components/ui/icons.tsx +167 -167
  59. package/template/src/components/ui/input.tsx +28 -28
  60. package/template/src/components/ui/label.tsx +25 -25
  61. package/template/src/components/ui/motion.tsx +197 -197
  62. package/template/src/components/ui/page-transition.tsx +166 -166
  63. package/template/src/components/ui/popover.tsx +59 -59
  64. package/template/src/components/ui/progress.tsx +32 -32
  65. package/template/src/components/ui/radio-group.tsx +45 -45
  66. package/template/src/components/ui/scroll-area.tsx +63 -63
  67. package/template/src/components/ui/select.tsx +208 -208
  68. package/template/src/components/ui/separator.tsx +28 -28
  69. package/template/src/components/ui/sheet.tsx +170 -170
  70. package/template/src/components/ui/sidebar.tsx +726 -726
  71. package/template/src/components/ui/skeleton.tsx +15 -15
  72. package/template/src/components/ui/slider.tsx +58 -58
  73. package/template/src/components/ui/sonner.tsx +47 -47
  74. package/template/src/components/ui/spinner.tsx +27 -27
  75. package/template/src/components/ui/submit-button.tsx +47 -47
  76. package/template/src/components/ui/switch.tsx +31 -31
  77. package/template/src/components/ui/table.tsx +120 -120
  78. package/template/src/components/ui/tabs.tsx +75 -75
  79. package/template/src/components/ui/textarea.tsx +26 -26
  80. package/template/src/components/ui/tooltip.tsx +70 -70
  81. package/template/src/config/navigation.ts +59 -59
  82. package/template/src/config/roles.ts +27 -27
  83. package/template/src/config/site.ts +12 -12
  84. package/template/src/db/index.ts +12 -12
  85. package/template/src/db/schema/index.ts +1 -1
  86. package/template/src/db/schema/users.ts +16 -16
  87. package/template/src/db/seed.ts +39 -39
  88. package/template/src/hooks/index.ts +3 -3
  89. package/template/src/hooks/use-mobile.ts +21 -21
  90. package/template/src/hooks/useDataTable.ts +82 -82
  91. package/template/src/hooks/useDebounce.ts +49 -49
  92. package/template/src/hooks/useMediaQuery.ts +36 -36
  93. package/template/src/lib/date/config.ts +36 -36
  94. package/template/src/lib/date/formatters.ts +127 -127
  95. package/template/src/lib/date/index.ts +26 -26
  96. package/template/src/lib/excel/exporter.ts +89 -89
  97. package/template/src/lib/excel/index.ts +14 -14
  98. package/template/src/lib/excel/parser.ts +96 -96
  99. package/template/src/lib/query-client.ts +35 -35
  100. package/template/src/lib/supabase/admin.ts +23 -23
  101. package/template/src/lib/supabase/client.ts +11 -11
  102. package/template/src/lib/supabase/proxy.ts +67 -67
  103. package/template/src/lib/supabase/server.ts +38 -38
  104. package/template/src/lib/supabase/types.ts +53 -53
  105. package/template/src/lib/utils.ts +6 -6
  106. package/template/src/lib/validations/common.ts +75 -75
  107. package/template/src/lib/validations/index.ts +20 -20
  108. package/template/src/modules/auth/actions/auth-actions.ts +59 -59
  109. package/template/src/modules/auth/components/login-form.tsx +68 -68
  110. package/template/src/modules/auth/hooks/useAuth.ts +38 -38
  111. package/template/src/modules/auth/hooks/useAuthMutations.ts +43 -43
  112. package/template/src/modules/auth/hooks/useAuthQueries.ts +43 -43
  113. package/template/src/modules/auth/index.ts +12 -12
  114. package/template/src/modules/auth/schemas/auth.schema.ts +32 -32
  115. package/template/src/modules/auth/stores/useAuthStore.ts +37 -37
  116. package/template/src/modules/users/actions/users-actions.ts +166 -166
  117. package/template/src/modules/users/columns.tsx +106 -106
  118. package/template/src/modules/users/components/users-list.tsx +48 -48
  119. package/template/src/modules/users/hooks/useUsers.ts +39 -39
  120. package/template/src/modules/users/hooks/useUsersMutations.ts +55 -55
  121. package/template/src/modules/users/hooks/useUsersQueries.ts +35 -35
  122. package/template/src/modules/users/index.ts +30 -30
  123. package/template/src/modules/users/schemas/users.schema.ts +51 -51
  124. package/template/src/modules/users/stores/useUsersStore.ts +60 -60
  125. package/template/src/modules/users/types/auth-user.types.ts +42 -42
  126. package/template/src/modules/users/utils/user-mapper.ts +32 -32
  127. package/template/src/stores/index.ts +1 -1
  128. package/template/src/stores/useUiStore.ts +55 -55
  129. package/template/src/types/api.ts +28 -28
  130. package/template/src/types/index.ts +2 -2
  131. package/template/src/types/table.ts +34 -34
  132. package/template/supabase/config.toml +94 -94
  133. package/template/tsconfig.json +42 -42
@@ -1,120 +1,120 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
-
5
- import { cn } from "@/lib/utils"
6
-
7
- function Table({ className, ...props }: React.ComponentProps<"table">) {
8
- return (
9
- <div
10
- data-slot="table-container"
11
- className="relative w-full overflow-x-auto"
12
- >
13
- <table
14
- data-slot="table"
15
- className={cn("w-full caption-bottom text-sm", className)}
16
- {...props}
17
- />
18
- </div>
19
- )
20
- }
21
-
22
- function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
23
- return (
24
- <thead
25
- data-slot="table-header"
26
- className={cn("[&_tr]:border-b", className)}
27
- {...props}
28
- />
29
- )
30
- }
31
-
32
- function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
33
- return (
34
- <tbody
35
- data-slot="table-body"
36
- className={cn("[&_tr:last-child]:border-0", className)}
37
- {...props}
38
- />
39
- )
40
- }
41
-
42
- function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
43
- return (
44
- <tfoot
45
- data-slot="table-footer"
46
- className={cn(
47
- "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
48
- className
49
- )}
50
- {...props}
51
- />
52
- )
53
- }
54
-
55
- function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
56
- return (
57
- <tr
58
- data-slot="table-row"
59
- className={cn(
60
- "border-b border-border transition-colors",
61
- "hover:bg-accent/50 dark:hover:bg-accent/30",
62
- "data-[state=selected]:bg-accent",
63
- className
64
- )}
65
- {...props}
66
- />
67
- )
68
- }
69
-
70
- function TableHead({ className, ...props }: React.ComponentProps<"th">) {
71
- return (
72
- <th
73
- data-slot="table-head"
74
- className={cn(
75
- "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
76
- "[&:has([role=checkbox])]:pr-0",
77
- className
78
- )}
79
- {...props}
80
- />
81
- )
82
- }
83
-
84
- function TableCell({ className, ...props }: React.ComponentProps<"td">) {
85
- return (
86
- <td
87
- data-slot="table-cell"
88
- className={cn(
89
- "px-4 py-3 align-middle",
90
- "[&:has([role=checkbox])]:pr-0",
91
- className
92
- )}
93
- {...props}
94
- />
95
- )
96
- }
97
-
98
- function TableCaption({
99
- className,
100
- ...props
101
- }: React.ComponentProps<"caption">) {
102
- return (
103
- <caption
104
- data-slot="table-caption"
105
- className={cn("text-muted-foreground mt-4 text-sm", className)}
106
- {...props}
107
- />
108
- )
109
- }
110
-
111
- export {
112
- Table,
113
- TableHeader,
114
- TableBody,
115
- TableFooter,
116
- TableHead,
117
- TableRow,
118
- TableCell,
119
- TableCaption,
120
- }
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ function Table({ className, ...props }: React.ComponentProps<"table">) {
8
+ return (
9
+ <div
10
+ data-slot="table-container"
11
+ className="relative w-full overflow-x-auto"
12
+ >
13
+ <table
14
+ data-slot="table"
15
+ className={cn("w-full caption-bottom text-sm", className)}
16
+ {...props}
17
+ />
18
+ </div>
19
+ )
20
+ }
21
+
22
+ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
23
+ return (
24
+ <thead
25
+ data-slot="table-header"
26
+ className={cn("[&_tr]:border-b", className)}
27
+ {...props}
28
+ />
29
+ )
30
+ }
31
+
32
+ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
33
+ return (
34
+ <tbody
35
+ data-slot="table-body"
36
+ className={cn("[&_tr:last-child]:border-0", className)}
37
+ {...props}
38
+ />
39
+ )
40
+ }
41
+
42
+ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
43
+ return (
44
+ <tfoot
45
+ data-slot="table-footer"
46
+ className={cn(
47
+ "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
48
+ className
49
+ )}
50
+ {...props}
51
+ />
52
+ )
53
+ }
54
+
55
+ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
56
+ return (
57
+ <tr
58
+ data-slot="table-row"
59
+ className={cn(
60
+ "border-b border-border transition-colors",
61
+ "hover:bg-accent/50 dark:hover:bg-accent/30",
62
+ "data-[state=selected]:bg-accent",
63
+ className
64
+ )}
65
+ {...props}
66
+ />
67
+ )
68
+ }
69
+
70
+ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
71
+ return (
72
+ <th
73
+ data-slot="table-head"
74
+ className={cn(
75
+ "h-12 px-4 text-left align-middle font-medium text-muted-foreground",
76
+ "[&:has([role=checkbox])]:pr-0",
77
+ className
78
+ )}
79
+ {...props}
80
+ />
81
+ )
82
+ }
83
+
84
+ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
85
+ return (
86
+ <td
87
+ data-slot="table-cell"
88
+ className={cn(
89
+ "px-4 py-3 align-middle",
90
+ "[&:has([role=checkbox])]:pr-0",
91
+ className
92
+ )}
93
+ {...props}
94
+ />
95
+ )
96
+ }
97
+
98
+ function TableCaption({
99
+ className,
100
+ ...props
101
+ }: React.ComponentProps<"caption">) {
102
+ return (
103
+ <caption
104
+ data-slot="table-caption"
105
+ className={cn("text-muted-foreground mt-4 text-sm", className)}
106
+ {...props}
107
+ />
108
+ )
109
+ }
110
+
111
+ export {
112
+ Table,
113
+ TableHeader,
114
+ TableBody,
115
+ TableFooter,
116
+ TableHead,
117
+ TableRow,
118
+ TableCell,
119
+ TableCaption,
120
+ }
@@ -1,75 +1,75 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as TabsPrimitive from "@radix-ui/react-tabs"
5
-
6
- import { cn } from "@/lib/utils"
7
-
8
- function Tabs({
9
- className,
10
- ...props
11
- }: React.ComponentProps<typeof TabsPrimitive.Root>) {
12
- return (
13
- <TabsPrimitive.Root
14
- data-slot="tabs"
15
- className={cn("flex flex-col gap-2", className)}
16
- {...props}
17
- />
18
- )
19
- }
20
-
21
- function TabsList({
22
- className,
23
- ...props
24
- }: React.ComponentProps<typeof TabsPrimitive.List>) {
25
- return (
26
- <TabsPrimitive.List
27
- data-slot="tabs-list"
28
- className={cn(
29
- "inline-flex h-10 items-center justify-center",
30
- "rounded-md bg-muted p-1",
31
- "text-muted-foreground",
32
- className
33
- )}
34
- {...props}
35
- />
36
- )
37
- }
38
-
39
- function TabsTrigger({
40
- className,
41
- ...props
42
- }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
43
- return (
44
- <TabsPrimitive.Trigger
45
- data-slot="tabs-trigger"
46
- className={cn(
47
- "inline-flex items-center justify-center whitespace-nowrap",
48
- "rounded-sm px-3 py-1.5",
49
- "text-sm font-medium",
50
- "transition-all duration-150",
51
- "ring-offset-background",
52
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
53
- "disabled:pointer-events-none disabled:opacity-50",
54
- "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
55
- className
56
- )}
57
- {...props}
58
- />
59
- )
60
- }
61
-
62
- function TabsContent({
63
- className,
64
- ...props
65
- }: React.ComponentProps<typeof TabsPrimitive.Content>) {
66
- return (
67
- <TabsPrimitive.Content
68
- data-slot="tabs-content"
69
- className={cn("flex-1 outline-none", className)}
70
- {...props}
71
- />
72
- )
73
- }
74
-
75
- export { Tabs, TabsList, TabsTrigger, TabsContent }
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import * as TabsPrimitive from "@radix-ui/react-tabs"
5
+
6
+ import { cn } from "@/lib/utils"
7
+
8
+ function Tabs({
9
+ className,
10
+ ...props
11
+ }: React.ComponentProps<typeof TabsPrimitive.Root>) {
12
+ return (
13
+ <TabsPrimitive.Root
14
+ data-slot="tabs"
15
+ className={cn("flex flex-col gap-2", className)}
16
+ {...props}
17
+ />
18
+ )
19
+ }
20
+
21
+ function TabsList({
22
+ className,
23
+ ...props
24
+ }: React.ComponentProps<typeof TabsPrimitive.List>) {
25
+ return (
26
+ <TabsPrimitive.List
27
+ data-slot="tabs-list"
28
+ className={cn(
29
+ "inline-flex h-10 items-center justify-center",
30
+ "rounded-md bg-muted p-1",
31
+ "text-muted-foreground",
32
+ className
33
+ )}
34
+ {...props}
35
+ />
36
+ )
37
+ }
38
+
39
+ function TabsTrigger({
40
+ className,
41
+ ...props
42
+ }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
43
+ return (
44
+ <TabsPrimitive.Trigger
45
+ data-slot="tabs-trigger"
46
+ className={cn(
47
+ "inline-flex items-center justify-center whitespace-nowrap",
48
+ "rounded-sm px-3 py-1.5",
49
+ "text-sm font-medium",
50
+ "transition-all duration-150",
51
+ "ring-offset-background",
52
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
53
+ "disabled:pointer-events-none disabled:opacity-50",
54
+ "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
55
+ className
56
+ )}
57
+ {...props}
58
+ />
59
+ )
60
+ }
61
+
62
+ function TabsContent({
63
+ className,
64
+ ...props
65
+ }: React.ComponentProps<typeof TabsPrimitive.Content>) {
66
+ return (
67
+ <TabsPrimitive.Content
68
+ data-slot="tabs-content"
69
+ className={cn("flex-1 outline-none", className)}
70
+ {...props}
71
+ />
72
+ )
73
+ }
74
+
75
+ export { Tabs, TabsList, TabsTrigger, TabsContent }
@@ -1,26 +1,26 @@
1
- import * as React from "react"
2
-
3
- import { cn } from "@/lib/utils"
4
-
5
- function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
6
- return (
7
- <textarea
8
- data-slot="textarea"
9
- className={cn(
10
- "flex min-h-[80px] w-full",
11
- "rounded-md border border-input bg-transparent",
12
- "px-3 py-2",
13
- "text-sm",
14
- "transition-colors duration-150",
15
- "placeholder:text-muted-foreground",
16
- "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
17
- "disabled:cursor-not-allowed disabled:opacity-50",
18
- "resize-none",
19
- className
20
- )}
21
- {...props}
22
- />
23
- )
24
- }
25
-
26
- export { Textarea }
1
+ import * as React from "react"
2
+
3
+ import { cn } from "@/lib/utils"
4
+
5
+ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
6
+ return (
7
+ <textarea
8
+ data-slot="textarea"
9
+ className={cn(
10
+ "flex min-h-[80px] w-full",
11
+ "rounded-md border border-input bg-transparent",
12
+ "px-3 py-2",
13
+ "text-sm",
14
+ "transition-colors duration-150",
15
+ "placeholder:text-muted-foreground",
16
+ "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
17
+ "disabled:cursor-not-allowed disabled:opacity-50",
18
+ "resize-none",
19
+ className
20
+ )}
21
+ {...props}
22
+ />
23
+ )
24
+ }
25
+
26
+ export { Textarea }
@@ -1,70 +1,70 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5
-
6
- import { cn } from "@/lib/utils"
7
-
8
- function TooltipProvider({
9
- delayDuration = 0,
10
- ...props
11
- }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
12
- return (
13
- <TooltipPrimitive.Provider
14
- data-slot="tooltip-provider"
15
- delayDuration={delayDuration}
16
- {...props}
17
- />
18
- )
19
- }
20
-
21
- function Tooltip({
22
- ...props
23
- }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
24
- return (
25
- <TooltipProvider>
26
- <TooltipPrimitive.Root data-slot="tooltip" {...props} />
27
- </TooltipProvider>
28
- )
29
- }
30
-
31
- function TooltipTrigger({
32
- ...props
33
- }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
34
- return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
35
- }
36
-
37
- function TooltipContent({
38
- className,
39
- sideOffset = 4,
40
- children,
41
- ...props
42
- }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
43
- return (
44
- <TooltipPrimitive.Portal>
45
- <TooltipPrimitive.Content
46
- data-slot="tooltip-content"
47
- sideOffset={sideOffset}
48
- className={cn(
49
- "z-50 overflow-hidden",
50
- "border border-border/50",
51
- "bg-popover backdrop-blur-lg",
52
- "border-border",
53
- "px-3 py-1.5 text-xs",
54
- "animate-in fade-in-0 zoom-in-95",
55
- "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
56
- "data-[side=bottom]:slide-in-from-top-2",
57
- "data-[side=left]:slide-in-from-right-2",
58
- "data-[side=right]:slide-in-from-left-2",
59
- "data-[side=top]:slide-in-from-bottom-2",
60
- className
61
- )}
62
- {...props}
63
- >
64
- {children}
65
- </TooltipPrimitive.Content>
66
- </TooltipPrimitive.Portal>
67
- )
68
- }
69
-
70
- export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import * as TooltipPrimitive from "@radix-ui/react-tooltip"
5
+
6
+ import { cn } from "@/lib/utils"
7
+
8
+ function TooltipProvider({
9
+ delayDuration = 0,
10
+ ...props
11
+ }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
12
+ return (
13
+ <TooltipPrimitive.Provider
14
+ data-slot="tooltip-provider"
15
+ delayDuration={delayDuration}
16
+ {...props}
17
+ />
18
+ )
19
+ }
20
+
21
+ function Tooltip({
22
+ ...props
23
+ }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
24
+ return (
25
+ <TooltipProvider>
26
+ <TooltipPrimitive.Root data-slot="tooltip" {...props} />
27
+ </TooltipProvider>
28
+ )
29
+ }
30
+
31
+ function TooltipTrigger({
32
+ ...props
33
+ }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
34
+ return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
35
+ }
36
+
37
+ function TooltipContent({
38
+ className,
39
+ sideOffset = 4,
40
+ children,
41
+ ...props
42
+ }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
43
+ return (
44
+ <TooltipPrimitive.Portal>
45
+ <TooltipPrimitive.Content
46
+ data-slot="tooltip-content"
47
+ sideOffset={sideOffset}
48
+ className={cn(
49
+ "z-50 overflow-hidden",
50
+ "border border-border/50",
51
+ "bg-popover backdrop-blur-lg",
52
+ "border-border",
53
+ "px-3 py-1.5 text-xs",
54
+ "animate-in fade-in-0 zoom-in-95",
55
+ "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
56
+ "data-[side=bottom]:slide-in-from-top-2",
57
+ "data-[side=left]:slide-in-from-right-2",
58
+ "data-[side=right]:slide-in-from-left-2",
59
+ "data-[side=top]:slide-in-from-bottom-2",
60
+ className
61
+ )}
62
+ {...props}
63
+ >
64
+ {children}
65
+ </TooltipPrimitive.Content>
66
+ </TooltipPrimitive.Portal>
67
+ )
68
+ }
69
+
70
+ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }