@tioelvis/next-template 2.4.7 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/README.md +42 -42
  2. package/package.json +44 -92
  3. package/src/actions/configure-package-json.js +32 -0
  4. package/src/actions/init-project.js +40 -0
  5. package/src/actions/init-shadcn-ui.js +48 -0
  6. package/src/actions/init-theme.js +28 -0
  7. package/src/actions/init-tioelvis-components.js +42 -0
  8. package/src/actions/install-main-packages.js +51 -0
  9. package/src/constants.js +234 -97
  10. package/src/lib/exception.js +9 -0
  11. package/src/lib/utils.js +55 -0
  12. package/src/main.js +158 -229
  13. package/src/template/eslint.config.mjs +15 -13
  14. package/src/template/postcss.config.mjs +3 -1
  15. package/src/template/src/app/globals.css +0 -122
  16. package/src/template/src/app/layout.tsx +7 -15
  17. package/src/template/src/app/page.tsx +6 -2
  18. package/src/template/tsconfig.json +9 -2
  19. package/src/themes/blue.css +141 -0
  20. package/src/themes/default.css +141 -0
  21. package/src/themes/green.css +141 -0
  22. package/src/themes/orange.css +141 -0
  23. package/src/themes/red.css +141 -0
  24. package/src/themes/rose.css +141 -0
  25. package/src/themes/violet.css +141 -0
  26. package/src/themes/yellow.css +141 -0
  27. package/src/tioelvis-components/max-width-wrapper.tsx +21 -0
  28. package/src/app/components/ui/accordion.json +0 -6
  29. package/src/app/components/ui/accordion.tsx +0 -64
  30. package/src/app/components/ui/alert-dialog.json +0 -6
  31. package/src/app/components/ui/alert-dialog.tsx +0 -157
  32. package/src/app/components/ui/alert.json +0 -6
  33. package/src/app/components/ui/alert.tsx +0 -66
  34. package/src/app/components/ui/aspect-ratio.json +0 -6
  35. package/src/app/components/ui/aspect-ratio.tsx +0 -11
  36. package/src/app/components/ui/avatar.json +0 -6
  37. package/src/app/components/ui/avatar.tsx +0 -53
  38. package/src/app/components/ui/badge.json +0 -6
  39. package/src/app/components/ui/badge.tsx +0 -46
  40. package/src/app/components/ui/breadcrumb.json +0 -6
  41. package/src/app/components/ui/breadcrumb.tsx +0 -107
  42. package/src/app/components/ui/button.json +0 -6
  43. package/src/app/components/ui/button.tsx +0 -58
  44. package/src/app/components/ui/calendar.json +0 -6
  45. package/src/app/components/ui/calendar.tsx +0 -213
  46. package/src/app/components/ui/card.json +0 -6
  47. package/src/app/components/ui/card.tsx +0 -92
  48. package/src/app/components/ui/carousel.json +0 -6
  49. package/src/app/components/ui/carousel.tsx +0 -236
  50. package/src/app/components/ui/chart.json +0 -6
  51. package/src/app/components/ui/chart.tsx +0 -347
  52. package/src/app/components/ui/checkbox.json +0 -6
  53. package/src/app/components/ui/checkbox.tsx +0 -30
  54. package/src/app/components/ui/collapsible.json +0 -6
  55. package/src/app/components/ui/collapsible.tsx +0 -33
  56. package/src/app/components/ui/command.json +0 -6
  57. package/src/app/components/ui/command.tsx +0 -182
  58. package/src/app/components/ui/context-menu.json +0 -6
  59. package/src/app/components/ui/context-menu.tsx +0 -249
  60. package/src/app/components/ui/dialog.json +0 -6
  61. package/src/app/components/ui/dialog.tsx +0 -141
  62. package/src/app/components/ui/drawer.json +0 -6
  63. package/src/app/components/ui/drawer.tsx +0 -134
  64. package/src/app/components/ui/dropdown-menu.json +0 -6
  65. package/src/app/components/ui/dropdown-menu.tsx +0 -256
  66. package/src/app/components/ui/form.json +0 -12
  67. package/src/app/components/ui/form.tsx +0 -167
  68. package/src/app/components/ui/hover-card.json +0 -6
  69. package/src/app/components/ui/hover-card.tsx +0 -49
  70. package/src/app/components/ui/input-otp.json +0 -6
  71. package/src/app/components/ui/input-otp.tsx +0 -76
  72. package/src/app/components/ui/input.json +0 -6
  73. package/src/app/components/ui/input.tsx +0 -21
  74. package/src/app/components/ui/label.json +0 -6
  75. package/src/app/components/ui/label.tsx +0 -24
  76. package/src/app/components/ui/menubar.json +0 -6
  77. package/src/app/components/ui/menubar.tsx +0 -273
  78. package/src/app/components/ui/navigation-menu.json +0 -6
  79. package/src/app/components/ui/navigation-menu.tsx +0 -164
  80. package/src/app/components/ui/pagination.json +0 -6
  81. package/src/app/components/ui/pagination.tsx +0 -124
  82. package/src/app/components/ui/popover.json +0 -6
  83. package/src/app/components/ui/popover.tsx +0 -55
  84. package/src/app/components/ui/progress.json +0 -6
  85. package/src/app/components/ui/progress.tsx +0 -30
  86. package/src/app/components/ui/radio-group.json +0 -6
  87. package/src/app/components/ui/radio-group.tsx +0 -43
  88. package/src/app/components/ui/resizable.json +0 -6
  89. package/src/app/components/ui/resizable.tsx +0 -55
  90. package/src/app/components/ui/scroll-area.json +0 -6
  91. package/src/app/components/ui/scroll-area.tsx +0 -55
  92. package/src/app/components/ui/select.json +0 -6
  93. package/src/app/components/ui/select.tsx +0 -179
  94. package/src/app/components/ui/separator.json +0 -6
  95. package/src/app/components/ui/separator.tsx +0 -28
  96. package/src/app/components/ui/sheet.json +0 -6
  97. package/src/app/components/ui/sheet.tsx +0 -145
  98. package/src/app/components/ui/sidebar.json +0 -6
  99. package/src/app/components/ui/sidebar.tsx +0 -718
  100. package/src/app/components/ui/skeleton.json +0 -6
  101. package/src/app/components/ui/skeleton.tsx +0 -13
  102. package/src/app/components/ui/slider.json +0 -6
  103. package/src/app/components/ui/slider.tsx +0 -61
  104. package/src/app/components/ui/sonner.json +0 -6
  105. package/src/app/components/ui/sonner.tsx +0 -25
  106. package/src/app/components/ui/switch.json +0 -6
  107. package/src/app/components/ui/switch.tsx +0 -30
  108. package/src/app/components/ui/table.json +0 -6
  109. package/src/app/components/ui/table.tsx +0 -115
  110. package/src/app/components/ui/tabs.json +0 -6
  111. package/src/app/components/ui/tabs.tsx +0 -66
  112. package/src/app/components/ui/textarea.json +0 -6
  113. package/src/app/components/ui/textarea.tsx +0 -18
  114. package/src/app/components/ui/toggle-group.json +0 -6
  115. package/src/app/components/ui/toggle-group.tsx +0 -71
  116. package/src/app/components/ui/toggle.json +0 -6
  117. package/src/app/components/ui/toggle.tsx +0 -47
  118. package/src/app/components/ui/tooltip.json +0 -6
  119. package/src/app/components/ui/tooltip.tsx +0 -60
  120. package/src/app/hooks/use-mobile.ts +0 -21
  121. package/src/app/lib/utils.ts +0 -6
  122. package/src/app/tsconfig.json +0 -27
  123. package/src/template/components.json +0 -21
  124. package/src/template/next-env.d.ts +0 -5
  125. package/src/template/public/.gitkeep +0 -0
  126. package/src/template/src/lib/constants.ts +0 -1
  127. package/src/template/src/lib/custom-axios-error.ts +0 -29
  128. package/src/template/src/lib/request.ts +0 -10
  129. package/src/template/src/lib/utils.ts +0 -6
  130. package/src/template/src/providers/query.provider.tsx +0 -12
  131. package/src/template/src/providers/theme.provider.tsx +0 -8
  132. package/src/utils.js +0 -113
  133. /package/src/template/{src/app → public}/favicon.ico +0 -0
@@ -1,76 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import { OTPInput, OTPInputContext } from "input-otp";
5
- import { MinusIcon } from "lucide-react";
6
-
7
- import { cn } from "@/lib/utils";
8
-
9
- function InputOTP({
10
- className,
11
- containerClassName,
12
- ...props
13
- }: React.ComponentProps<typeof OTPInput> & {
14
- containerClassName?: string;
15
- }) {
16
- return (
17
- <OTPInput
18
- data-slot="input-otp"
19
- containerClassName={cn(
20
- "flex items-center gap-2 has-disabled:opacity-50",
21
- containerClassName
22
- )}
23
- className={cn("disabled:cursor-not-allowed", className)}
24
- {...props}
25
- />
26
- );
27
- }
28
-
29
- function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
30
- return (
31
- <div
32
- data-slot="input-otp-group"
33
- className={cn("flex items-center", className)}
34
- {...props}
35
- />
36
- );
37
- }
38
-
39
- function InputOTPSlot({
40
- index,
41
- className,
42
- ...props
43
- }: React.ComponentProps<"div"> & {
44
- index: number;
45
- }) {
46
- const inputOTPContext = React.useContext(OTPInputContext);
47
- const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
48
-
49
- return (
50
- <div
51
- data-slot="input-otp-slot"
52
- data-active={isActive}
53
- className={cn(
54
- "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
55
- className
56
- )}
57
- {...props}>
58
- {char}
59
- {hasFakeCaret && (
60
- <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
61
- <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
62
- </div>
63
- )}
64
- </div>
65
- );
66
- }
67
-
68
- function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
69
- return (
70
- <div data-slot="input-otp-separator" role="separator" {...props}>
71
- <MinusIcon />
72
- </div>
73
- );
74
- }
75
-
76
- export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
@@ -1,6 +0,0 @@
1
- {
2
- "dependencies": [],
3
- "dev_dependence": [],
4
- "hooks": [],
5
- "supports": []
6
- }
@@ -1,21 +0,0 @@
1
- import * as React from "react";
2
-
3
- import { cn } from "@/lib/utils";
4
-
5
- function Input({ className, type, ...props }: React.ComponentProps<"input">) {
6
- return (
7
- <input
8
- type={type}
9
- data-slot="input"
10
- className={cn(
11
- "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 text-sm",
12
- "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13
- "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14
- className
15
- )}
16
- {...props}
17
- />
18
- );
19
- }
20
-
21
- export { Input };
@@ -1,6 +0,0 @@
1
- {
2
- "dependencies": ["@radix-ui/react-label"],
3
- "dev_dependence": [],
4
- "hooks": [],
5
- "supports": []
6
- }
@@ -1,24 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import * as LabelPrimitive from "@radix-ui/react-label";
5
-
6
- import { cn } from "@/lib/utils";
7
-
8
- function Label({
9
- className,
10
- ...props
11
- }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12
- return (
13
- <LabelPrimitive.Root
14
- data-slot="label"
15
- className={cn(
16
- "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:cursor-not-allowed group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
17
- className
18
- )}
19
- {...props}
20
- />
21
- );
22
- }
23
-
24
- export { Label };
@@ -1,6 +0,0 @@
1
- {
2
- "dependencies": ["@radix-ui/react-menubar"],
3
- "dev_dependence": [],
4
- "hooks": [],
5
- "supports": []
6
- }
@@ -1,273 +0,0 @@
1
- "use client";
2
-
3
- import * as React from "react";
4
- import * as MenubarPrimitive from "@radix-ui/react-menubar";
5
- import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
6
-
7
- import { cn } from "@/lib/utils";
8
-
9
- function Menubar({
10
- className,
11
- ...props
12
- }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
13
- return (
14
- <MenubarPrimitive.Root
15
- data-slot="menubar"
16
- className={cn(
17
- "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
18
- className
19
- )}
20
- {...props}
21
- />
22
- );
23
- }
24
-
25
- function MenubarMenu({
26
- ...props
27
- }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
28
- return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
29
- }
30
-
31
- function MenubarGroup({
32
- ...props
33
- }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
34
- return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
35
- }
36
-
37
- function MenubarPortal({
38
- ...props
39
- }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
40
- return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
41
- }
42
-
43
- function MenubarRadioGroup({
44
- ...props
45
- }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
46
- return (
47
- <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
48
- );
49
- }
50
-
51
- function MenubarTrigger({
52
- className,
53
- ...props
54
- }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
55
- return (
56
- <MenubarPrimitive.Trigger
57
- data-slot="menubar-trigger"
58
- className={cn(
59
- "focus:bg-accent cursor-pointer focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
60
- className
61
- )}
62
- {...props}
63
- />
64
- );
65
- }
66
-
67
- function MenubarContent({
68
- className,
69
- align = "start",
70
- alignOffset = -4,
71
- sideOffset = 8,
72
- ...props
73
- }: React.ComponentProps<typeof MenubarPrimitive.Content>) {
74
- return (
75
- <MenubarPortal>
76
- <MenubarPrimitive.Content
77
- data-slot="menubar-content"
78
- align={align}
79
- alignOffset={alignOffset}
80
- sideOffset={sideOffset}
81
- className={cn(
82
- "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
83
- className
84
- )}
85
- {...props}
86
- />
87
- </MenubarPortal>
88
- );
89
- }
90
-
91
- function MenubarItem({
92
- className,
93
- inset,
94
- variant = "default",
95
- ...props
96
- }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
97
- inset?: boolean;
98
- variant?: "default" | "destructive";
99
- }) {
100
- return (
101
- <MenubarPrimitive.Item
102
- data-slot="menubar-item"
103
- data-inset={inset}
104
- data-variant={variant}
105
- className={cn(
106
- "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
107
- className
108
- )}
109
- {...props}
110
- />
111
- );
112
- }
113
-
114
- function MenubarCheckboxItem({
115
- className,
116
- children,
117
- checked,
118
- ...props
119
- }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
120
- return (
121
- <MenubarPrimitive.CheckboxItem
122
- data-slot="menubar-checkbox-item"
123
- className={cn(
124
- "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
125
- className
126
- )}
127
- checked={checked}
128
- {...props}>
129
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
130
- <MenubarPrimitive.ItemIndicator>
131
- <CheckIcon className="size-4" />
132
- </MenubarPrimitive.ItemIndicator>
133
- </span>
134
- {children}
135
- </MenubarPrimitive.CheckboxItem>
136
- );
137
- }
138
-
139
- function MenubarRadioItem({
140
- className,
141
- children,
142
- ...props
143
- }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
144
- return (
145
- <MenubarPrimitive.RadioItem
146
- data-slot="menubar-radio-item"
147
- className={cn(
148
- "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
149
- className
150
- )}
151
- {...props}>
152
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
153
- <MenubarPrimitive.ItemIndicator>
154
- <CircleIcon className="size-2 fill-current" />
155
- </MenubarPrimitive.ItemIndicator>
156
- </span>
157
- {children}
158
- </MenubarPrimitive.RadioItem>
159
- );
160
- }
161
-
162
- function MenubarLabel({
163
- className,
164
- inset,
165
- ...props
166
- }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
167
- inset?: boolean;
168
- }) {
169
- return (
170
- <MenubarPrimitive.Label
171
- data-slot="menubar-label"
172
- data-inset={inset}
173
- className={cn(
174
- "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
175
- className
176
- )}
177
- {...props}
178
- />
179
- );
180
- }
181
-
182
- function MenubarSeparator({
183
- className,
184
- ...props
185
- }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
186
- return (
187
- <MenubarPrimitive.Separator
188
- data-slot="menubar-separator"
189
- className={cn("bg-border -mx-1 my-1 h-px", className)}
190
- {...props}
191
- />
192
- );
193
- }
194
-
195
- function MenubarShortcut({
196
- className,
197
- ...props
198
- }: React.ComponentProps<"span">) {
199
- return (
200
- <span
201
- data-slot="menubar-shortcut"
202
- className={cn(
203
- "text-muted-foreground ml-auto text-xs tracking-widest",
204
- className
205
- )}
206
- {...props}
207
- />
208
- );
209
- }
210
-
211
- function MenubarSub({
212
- ...props
213
- }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
214
- return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
215
- }
216
-
217
- function MenubarSubTrigger({
218
- className,
219
- inset,
220
- children,
221
- ...props
222
- }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
223
- inset?: boolean;
224
- }) {
225
- return (
226
- <MenubarPrimitive.SubTrigger
227
- data-slot="menubar-sub-trigger"
228
- data-inset={inset}
229
- className={cn(
230
- "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
231
- className
232
- )}
233
- {...props}>
234
- {children}
235
- <ChevronRightIcon className="ml-auto h-4 w-4" />
236
- </MenubarPrimitive.SubTrigger>
237
- );
238
- }
239
-
240
- function MenubarSubContent({
241
- className,
242
- ...props
243
- }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
244
- return (
245
- <MenubarPrimitive.SubContent
246
- data-slot="menubar-sub-content"
247
- className={cn(
248
- "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
249
- className
250
- )}
251
- {...props}
252
- />
253
- );
254
- }
255
-
256
- export {
257
- Menubar,
258
- MenubarPortal,
259
- MenubarMenu,
260
- MenubarTrigger,
261
- MenubarContent,
262
- MenubarGroup,
263
- MenubarSeparator,
264
- MenubarLabel,
265
- MenubarItem,
266
- MenubarShortcut,
267
- MenubarCheckboxItem,
268
- MenubarRadioGroup,
269
- MenubarRadioItem,
270
- MenubarSub,
271
- MenubarSubTrigger,
272
- MenubarSubContent,
273
- };
@@ -1,6 +0,0 @@
1
- {
2
- "dependencies": ["@radix-ui/react-navigation-menu"],
3
- "dev_dependence": [],
4
- "hooks": [],
5
- "supports": []
6
- }
@@ -1,164 +0,0 @@
1
- import * as React from "react";
2
- import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
3
- import { cva } from "class-variance-authority";
4
- import { ChevronDownIcon } from "lucide-react";
5
-
6
- import { cn } from "@/lib/utils";
7
-
8
- function NavigationMenu({
9
- className,
10
- children,
11
- viewport = true,
12
- ...props
13
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
14
- viewport?: boolean;
15
- }) {
16
- return (
17
- <NavigationMenuPrimitive.Root
18
- data-slot="navigation-menu"
19
- data-viewport={viewport}
20
- className={cn(
21
- "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
22
- className
23
- )}
24
- {...props}>
25
- {children}
26
- {viewport && <NavigationMenuViewport />}
27
- </NavigationMenuPrimitive.Root>
28
- );
29
- }
30
-
31
- function NavigationMenuList({
32
- className,
33
- ...props
34
- }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
35
- return (
36
- <NavigationMenuPrimitive.List
37
- data-slot="navigation-menu-list"
38
- className={cn(
39
- "group flex flex-1 list-none items-center justify-center gap-1",
40
- className
41
- )}
42
- {...props}
43
- />
44
- );
45
- }
46
-
47
- function NavigationMenuItem({
48
- className,
49
- ...props
50
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
51
- return (
52
- <NavigationMenuPrimitive.Item
53
- data-slot="navigation-menu-item"
54
- className={cn("relative", className)}
55
- {...props}
56
- />
57
- );
58
- }
59
-
60
- const navigationMenuTriggerStyle = cva(
61
- "group inline-flex h-9 w-max cursor-pointer items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
62
- );
63
-
64
- function NavigationMenuTrigger({
65
- className,
66
- children,
67
- ...props
68
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
69
- return (
70
- <NavigationMenuPrimitive.Trigger
71
- data-slot="navigation-menu-trigger"
72
- className={cn(navigationMenuTriggerStyle(), "group", className)}
73
- {...props}>
74
- {children}{" "}
75
- <ChevronDownIcon
76
- className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
77
- aria-hidden="true"
78
- />
79
- </NavigationMenuPrimitive.Trigger>
80
- );
81
- }
82
-
83
- function NavigationMenuContent({
84
- className,
85
- ...props
86
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
87
- return (
88
- <NavigationMenuPrimitive.Content
89
- data-slot="navigation-menu-content"
90
- className={cn(
91
- "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
92
- "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
93
- className
94
- )}
95
- {...props}
96
- />
97
- );
98
- }
99
-
100
- function NavigationMenuViewport({
101
- className,
102
- ...props
103
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
104
- return (
105
- <div
106
- className={cn(
107
- "absolute top-full left-0 isolate z-50 flex justify-center"
108
- )}>
109
- <NavigationMenuPrimitive.Viewport
110
- data-slot="navigation-menu-viewport"
111
- className={cn(
112
- "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
113
- className
114
- )}
115
- {...props}
116
- />
117
- </div>
118
- );
119
- }
120
-
121
- function NavigationMenuLink({
122
- className,
123
- ...props
124
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
125
- return (
126
- <NavigationMenuPrimitive.Link
127
- data-slot="navigation-menu-link"
128
- className={cn(
129
- "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
130
- className
131
- )}
132
- {...props}
133
- />
134
- );
135
- }
136
-
137
- function NavigationMenuIndicator({
138
- className,
139
- ...props
140
- }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
141
- return (
142
- <NavigationMenuPrimitive.Indicator
143
- data-slot="navigation-menu-indicator"
144
- className={cn(
145
- "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
146
- className
147
- )}
148
- {...props}>
149
- <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
150
- </NavigationMenuPrimitive.Indicator>
151
- );
152
- }
153
-
154
- export {
155
- NavigationMenu,
156
- NavigationMenuList,
157
- NavigationMenuItem,
158
- NavigationMenuContent,
159
- NavigationMenuTrigger,
160
- NavigationMenuLink,
161
- NavigationMenuIndicator,
162
- NavigationMenuViewport,
163
- navigationMenuTriggerStyle,
164
- };
@@ -1,6 +0,0 @@
1
- {
2
- "dependencies": [],
3
- "dev_dependence": [],
4
- "hooks": [],
5
- "supports": ["button"]
6
- }