create-ec-app 1.2.0 → 1.4.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 (81) hide show
  1. package/README.md +87 -0
  2. package/dist/index.js +115 -2
  3. package/dist/index.js.map +1 -1
  4. package/dist/pcf.d.ts.map +1 -1
  5. package/dist/pcf.js +82 -0
  6. package/dist/pcf.js.map +1 -1
  7. package/package.json +3 -1
  8. package/scripts/check-generated-css-scope.mjs +61 -0
  9. package/templates/base/package-lock.json +713 -1466
  10. package/templates/base/package.json +19 -19
  11. package/templates/base/src/App.tsx +1 -1
  12. package/templates/base/src/index.css +4 -1
  13. package/templates/base/src/main.tsx +4 -1
  14. package/templates/base/src/runtime/EcAppShell.tsx +29 -0
  15. package/templates/base/tsconfig.app.json +0 -1
  16. package/templates/base/tsconfig.json +1 -2
  17. package/templates/pcf/base/README.md +13 -0
  18. package/templates/pcf/base/index.ts +9 -3
  19. package/templates/pcf/base/package-lock.json +7290 -0
  20. package/templates/pcf/base/package.json +3 -3
  21. package/templates/targets/power-pages/src/App.patch.tsx +1 -1
  22. package/templates/targets/swa/package.patch.json +1 -1
  23. package/templates/targets/webresource/README.md +7 -6
  24. package/templates/ui/kendo/package.patch.json +2 -2
  25. package/templates/ui/kendo/src/main.patch.tsx +4 -1
  26. package/templates/ui/shadcn-ui/components.json +5 -2
  27. package/templates/ui/shadcn-ui/package.patch.json +4 -41
  28. package/templates/ui/shadcn-ui/src/index.patch.css +27 -9
  29. package/templates/ui/shadcn-ui/src/components/ui/accordion.tsx +0 -64
  30. package/templates/ui/shadcn-ui/src/components/ui/alert-dialog.tsx +0 -155
  31. package/templates/ui/shadcn-ui/src/components/ui/alert.tsx +0 -66
  32. package/templates/ui/shadcn-ui/src/components/ui/aspect-ratio.tsx +0 -11
  33. package/templates/ui/shadcn-ui/src/components/ui/avatar.tsx +0 -51
  34. package/templates/ui/shadcn-ui/src/components/ui/badge.tsx +0 -46
  35. package/templates/ui/shadcn-ui/src/components/ui/breadcrumb.tsx +0 -109
  36. package/templates/ui/shadcn-ui/src/components/ui/button-group.tsx +0 -83
  37. package/templates/ui/shadcn-ui/src/components/ui/button.tsx +0 -60
  38. package/templates/ui/shadcn-ui/src/components/ui/calendar.tsx +0 -216
  39. package/templates/ui/shadcn-ui/src/components/ui/card.tsx +0 -92
  40. package/templates/ui/shadcn-ui/src/components/ui/carousel.tsx +0 -239
  41. package/templates/ui/shadcn-ui/src/components/ui/chart.tsx +0 -357
  42. package/templates/ui/shadcn-ui/src/components/ui/checkbox.tsx +0 -32
  43. package/templates/ui/shadcn-ui/src/components/ui/collapsible.tsx +0 -31
  44. package/templates/ui/shadcn-ui/src/components/ui/command.tsx +0 -182
  45. package/templates/ui/shadcn-ui/src/components/ui/context-menu.tsx +0 -252
  46. package/templates/ui/shadcn-ui/src/components/ui/dialog.tsx +0 -141
  47. package/templates/ui/shadcn-ui/src/components/ui/drawer.tsx +0 -135
  48. package/templates/ui/shadcn-ui/src/components/ui/dropdown-menu.tsx +0 -255
  49. package/templates/ui/shadcn-ui/src/components/ui/empty.tsx +0 -104
  50. package/templates/ui/shadcn-ui/src/components/ui/field.tsx +0 -246
  51. package/templates/ui/shadcn-ui/src/components/ui/form.tsx +0 -167
  52. package/templates/ui/shadcn-ui/src/components/ui/hover-card.tsx +0 -44
  53. package/templates/ui/shadcn-ui/src/components/ui/input-group.tsx +0 -170
  54. package/templates/ui/shadcn-ui/src/components/ui/input-otp.tsx +0 -75
  55. package/templates/ui/shadcn-ui/src/components/ui/input.tsx +0 -21
  56. package/templates/ui/shadcn-ui/src/components/ui/item.tsx +0 -193
  57. package/templates/ui/shadcn-ui/src/components/ui/kbd.tsx +0 -28
  58. package/templates/ui/shadcn-ui/src/components/ui/label.tsx +0 -24
  59. package/templates/ui/shadcn-ui/src/components/ui/menubar.tsx +0 -274
  60. package/templates/ui/shadcn-ui/src/components/ui/navigation-menu.tsx +0 -168
  61. package/templates/ui/shadcn-ui/src/components/ui/pagination.tsx +0 -127
  62. package/templates/ui/shadcn-ui/src/components/ui/popover.tsx +0 -48
  63. package/templates/ui/shadcn-ui/src/components/ui/progress.tsx +0 -29
  64. package/templates/ui/shadcn-ui/src/components/ui/radio-group.tsx +0 -45
  65. package/templates/ui/shadcn-ui/src/components/ui/resizable.tsx +0 -54
  66. package/templates/ui/shadcn-ui/src/components/ui/scroll-area.tsx +0 -58
  67. package/templates/ui/shadcn-ui/src/components/ui/select.tsx +0 -185
  68. package/templates/ui/shadcn-ui/src/components/ui/separator.tsx +0 -28
  69. package/templates/ui/shadcn-ui/src/components/ui/sheet.tsx +0 -137
  70. package/templates/ui/shadcn-ui/src/components/ui/sidebar.tsx +0 -726
  71. package/templates/ui/shadcn-ui/src/components/ui/skeleton.tsx +0 -13
  72. package/templates/ui/shadcn-ui/src/components/ui/slider.tsx +0 -63
  73. package/templates/ui/shadcn-ui/src/components/ui/sonner.tsx +0 -38
  74. package/templates/ui/shadcn-ui/src/components/ui/spinner.tsx +0 -16
  75. package/templates/ui/shadcn-ui/src/components/ui/switch.tsx +0 -31
  76. package/templates/ui/shadcn-ui/src/components/ui/table.tsx +0 -114
  77. package/templates/ui/shadcn-ui/src/components/ui/tabs.tsx +0 -66
  78. package/templates/ui/shadcn-ui/src/components/ui/textarea.tsx +0 -18
  79. package/templates/ui/shadcn-ui/src/components/ui/toggle-group.tsx +0 -81
  80. package/templates/ui/shadcn-ui/src/components/ui/toggle.tsx +0 -45
  81. package/templates/ui/shadcn-ui/src/components/ui/tooltip.tsx +0 -61
@@ -1,182 +0,0 @@
1
- import * as React from "react"
2
- import { Command as CommandPrimitive } from "cmdk"
3
- import { SearchIcon } from "lucide-react"
4
-
5
- import { cn } from "@/lib/utils"
6
- import {
7
- Dialog,
8
- DialogContent,
9
- DialogDescription,
10
- DialogHeader,
11
- DialogTitle,
12
- } from "@/components/ui/dialog"
13
-
14
- function Command({
15
- className,
16
- ...props
17
- }: React.ComponentProps<typeof CommandPrimitive>) {
18
- return (
19
- <CommandPrimitive
20
- data-slot="command"
21
- className={cn(
22
- "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
23
- className
24
- )}
25
- {...props}
26
- />
27
- )
28
- }
29
-
30
- function CommandDialog({
31
- title = "Command Palette",
32
- description = "Search for a command to run...",
33
- children,
34
- className,
35
- showCloseButton = true,
36
- ...props
37
- }: React.ComponentProps<typeof Dialog> & {
38
- title?: string
39
- description?: string
40
- className?: string
41
- showCloseButton?: boolean
42
- }) {
43
- return (
44
- <Dialog {...props}>
45
- <DialogHeader className="sr-only">
46
- <DialogTitle>{title}</DialogTitle>
47
- <DialogDescription>{description}</DialogDescription>
48
- </DialogHeader>
49
- <DialogContent
50
- className={cn("overflow-hidden p-0", className)}
51
- showCloseButton={showCloseButton}
52
- >
53
- <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
54
- {children}
55
- </Command>
56
- </DialogContent>
57
- </Dialog>
58
- )
59
- }
60
-
61
- function CommandInput({
62
- className,
63
- ...props
64
- }: React.ComponentProps<typeof CommandPrimitive.Input>) {
65
- return (
66
- <div
67
- data-slot="command-input-wrapper"
68
- className="flex h-9 items-center gap-2 border-b px-3"
69
- >
70
- <SearchIcon className="size-4 shrink-0 opacity-50" />
71
- <CommandPrimitive.Input
72
- data-slot="command-input"
73
- className={cn(
74
- "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
75
- className
76
- )}
77
- {...props}
78
- />
79
- </div>
80
- )
81
- }
82
-
83
- function CommandList({
84
- className,
85
- ...props
86
- }: React.ComponentProps<typeof CommandPrimitive.List>) {
87
- return (
88
- <CommandPrimitive.List
89
- data-slot="command-list"
90
- className={cn(
91
- "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
92
- className
93
- )}
94
- {...props}
95
- />
96
- )
97
- }
98
-
99
- function CommandEmpty({
100
- ...props
101
- }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
102
- return (
103
- <CommandPrimitive.Empty
104
- data-slot="command-empty"
105
- className="py-6 text-center text-sm"
106
- {...props}
107
- />
108
- )
109
- }
110
-
111
- function CommandGroup({
112
- className,
113
- ...props
114
- }: React.ComponentProps<typeof CommandPrimitive.Group>) {
115
- return (
116
- <CommandPrimitive.Group
117
- data-slot="command-group"
118
- className={cn(
119
- "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
120
- className
121
- )}
122
- {...props}
123
- />
124
- )
125
- }
126
-
127
- function CommandSeparator({
128
- className,
129
- ...props
130
- }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
131
- return (
132
- <CommandPrimitive.Separator
133
- data-slot="command-separator"
134
- className={cn("bg-border -mx-1 h-px", className)}
135
- {...props}
136
- />
137
- )
138
- }
139
-
140
- function CommandItem({
141
- className,
142
- ...props
143
- }: React.ComponentProps<typeof CommandPrimitive.Item>) {
144
- return (
145
- <CommandPrimitive.Item
146
- data-slot="command-item"
147
- className={cn(
148
- "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
149
- className
150
- )}
151
- {...props}
152
- />
153
- )
154
- }
155
-
156
- function CommandShortcut({
157
- className,
158
- ...props
159
- }: React.ComponentProps<"span">) {
160
- return (
161
- <span
162
- data-slot="command-shortcut"
163
- className={cn(
164
- "text-muted-foreground ml-auto text-xs tracking-widest",
165
- className
166
- )}
167
- {...props}
168
- />
169
- )
170
- }
171
-
172
- export {
173
- Command,
174
- CommandDialog,
175
- CommandInput,
176
- CommandList,
177
- CommandEmpty,
178
- CommandGroup,
179
- CommandItem,
180
- CommandShortcut,
181
- CommandSeparator,
182
- }
@@ -1,252 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
5
- import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
6
-
7
- import { cn } from "@/lib/utils"
8
-
9
- function ContextMenu({
10
- ...props
11
- }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
12
- return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
13
- }
14
-
15
- function ContextMenuTrigger({
16
- ...props
17
- }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
18
- return (
19
- <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
20
- )
21
- }
22
-
23
- function ContextMenuGroup({
24
- ...props
25
- }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
26
- return (
27
- <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
28
- )
29
- }
30
-
31
- function ContextMenuPortal({
32
- ...props
33
- }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
34
- return (
35
- <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
36
- )
37
- }
38
-
39
- function ContextMenuSub({
40
- ...props
41
- }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
42
- return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
43
- }
44
-
45
- function ContextMenuRadioGroup({
46
- ...props
47
- }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
48
- return (
49
- <ContextMenuPrimitive.RadioGroup
50
- data-slot="context-menu-radio-group"
51
- {...props}
52
- />
53
- )
54
- }
55
-
56
- function ContextMenuSubTrigger({
57
- className,
58
- inset,
59
- children,
60
- ...props
61
- }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
62
- inset?: boolean
63
- }) {
64
- return (
65
- <ContextMenuPrimitive.SubTrigger
66
- data-slot="context-menu-sub-trigger"
67
- data-inset={inset}
68
- className={cn(
69
- "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
70
- className
71
- )}
72
- {...props}
73
- >
74
- {children}
75
- <ChevronRightIcon className="ml-auto" />
76
- </ContextMenuPrimitive.SubTrigger>
77
- )
78
- }
79
-
80
- function ContextMenuSubContent({
81
- className,
82
- ...props
83
- }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
84
- return (
85
- <ContextMenuPrimitive.SubContent
86
- data-slot="context-menu-sub-content"
87
- className={cn(
88
- "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-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
89
- className
90
- )}
91
- {...props}
92
- />
93
- )
94
- }
95
-
96
- function ContextMenuContent({
97
- className,
98
- ...props
99
- }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
100
- return (
101
- <ContextMenuPrimitive.Portal>
102
- <ContextMenuPrimitive.Content
103
- data-slot="context-menu-content"
104
- className={cn(
105
- "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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
106
- className
107
- )}
108
- {...props}
109
- />
110
- </ContextMenuPrimitive.Portal>
111
- )
112
- }
113
-
114
- function ContextMenuItem({
115
- className,
116
- inset,
117
- variant = "default",
118
- ...props
119
- }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
120
- inset?: boolean
121
- variant?: "default" | "destructive"
122
- }) {
123
- return (
124
- <ContextMenuPrimitive.Item
125
- data-slot="context-menu-item"
126
- data-inset={inset}
127
- data-variant={variant}
128
- className={cn(
129
- "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-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
130
- className
131
- )}
132
- {...props}
133
- />
134
- )
135
- }
136
-
137
- function ContextMenuCheckboxItem({
138
- className,
139
- children,
140
- checked,
141
- ...props
142
- }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
143
- return (
144
- <ContextMenuPrimitive.CheckboxItem
145
- data-slot="context-menu-checkbox-item"
146
- className={cn(
147
- "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
148
- className
149
- )}
150
- checked={checked}
151
- {...props}
152
- >
153
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
154
- <ContextMenuPrimitive.ItemIndicator>
155
- <CheckIcon className="size-4" />
156
- </ContextMenuPrimitive.ItemIndicator>
157
- </span>
158
- {children}
159
- </ContextMenuPrimitive.CheckboxItem>
160
- )
161
- }
162
-
163
- function ContextMenuRadioItem({
164
- className,
165
- children,
166
- ...props
167
- }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
168
- return (
169
- <ContextMenuPrimitive.RadioItem
170
- data-slot="context-menu-radio-item"
171
- className={cn(
172
- "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
173
- className
174
- )}
175
- {...props}
176
- >
177
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
178
- <ContextMenuPrimitive.ItemIndicator>
179
- <CircleIcon className="size-2 fill-current" />
180
- </ContextMenuPrimitive.ItemIndicator>
181
- </span>
182
- {children}
183
- </ContextMenuPrimitive.RadioItem>
184
- )
185
- }
186
-
187
- function ContextMenuLabel({
188
- className,
189
- inset,
190
- ...props
191
- }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
192
- inset?: boolean
193
- }) {
194
- return (
195
- <ContextMenuPrimitive.Label
196
- data-slot="context-menu-label"
197
- data-inset={inset}
198
- className={cn(
199
- "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
200
- className
201
- )}
202
- {...props}
203
- />
204
- )
205
- }
206
-
207
- function ContextMenuSeparator({
208
- className,
209
- ...props
210
- }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
211
- return (
212
- <ContextMenuPrimitive.Separator
213
- data-slot="context-menu-separator"
214
- className={cn("bg-border -mx-1 my-1 h-px", className)}
215
- {...props}
216
- />
217
- )
218
- }
219
-
220
- function ContextMenuShortcut({
221
- className,
222
- ...props
223
- }: React.ComponentProps<"span">) {
224
- return (
225
- <span
226
- data-slot="context-menu-shortcut"
227
- className={cn(
228
- "text-muted-foreground ml-auto text-xs tracking-widest",
229
- className
230
- )}
231
- {...props}
232
- />
233
- )
234
- }
235
-
236
- export {
237
- ContextMenu,
238
- ContextMenuTrigger,
239
- ContextMenuContent,
240
- ContextMenuItem,
241
- ContextMenuCheckboxItem,
242
- ContextMenuRadioItem,
243
- ContextMenuLabel,
244
- ContextMenuSeparator,
245
- ContextMenuShortcut,
246
- ContextMenuGroup,
247
- ContextMenuPortal,
248
- ContextMenuSub,
249
- ContextMenuSubContent,
250
- ContextMenuSubTrigger,
251
- ContextMenuRadioGroup,
252
- }
@@ -1,141 +0,0 @@
1
- import * as React from "react"
2
- import * as DialogPrimitive from "@radix-ui/react-dialog"
3
- import { XIcon } from "lucide-react"
4
-
5
- import { cn } from "@/lib/utils"
6
-
7
- function Dialog({
8
- ...props
9
- }: React.ComponentProps<typeof DialogPrimitive.Root>) {
10
- return <DialogPrimitive.Root data-slot="dialog" {...props} />
11
- }
12
-
13
- function DialogTrigger({
14
- ...props
15
- }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
16
- return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
17
- }
18
-
19
- function DialogPortal({
20
- ...props
21
- }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
22
- return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
23
- }
24
-
25
- function DialogClose({
26
- ...props
27
- }: React.ComponentProps<typeof DialogPrimitive.Close>) {
28
- return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
29
- }
30
-
31
- function DialogOverlay({
32
- className,
33
- ...props
34
- }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
35
- return (
36
- <DialogPrimitive.Overlay
37
- data-slot="dialog-overlay"
38
- className={cn(
39
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
40
- className
41
- )}
42
- {...props}
43
- />
44
- )
45
- }
46
-
47
- function DialogContent({
48
- className,
49
- children,
50
- showCloseButton = true,
51
- ...props
52
- }: React.ComponentProps<typeof DialogPrimitive.Content> & {
53
- showCloseButton?: boolean
54
- }) {
55
- return (
56
- <DialogPortal data-slot="dialog-portal">
57
- <DialogOverlay />
58
- <DialogPrimitive.Content
59
- data-slot="dialog-content"
60
- className={cn(
61
- "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
62
- className
63
- )}
64
- {...props}
65
- >
66
- {children}
67
- {showCloseButton && (
68
- <DialogPrimitive.Close
69
- data-slot="dialog-close"
70
- className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
71
- >
72
- <XIcon />
73
- <span className="sr-only">Close</span>
74
- </DialogPrimitive.Close>
75
- )}
76
- </DialogPrimitive.Content>
77
- </DialogPortal>
78
- )
79
- }
80
-
81
- function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
82
- return (
83
- <div
84
- data-slot="dialog-header"
85
- className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
86
- {...props}
87
- />
88
- )
89
- }
90
-
91
- function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
92
- return (
93
- <div
94
- data-slot="dialog-footer"
95
- className={cn(
96
- "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
97
- className
98
- )}
99
- {...props}
100
- />
101
- )
102
- }
103
-
104
- function DialogTitle({
105
- className,
106
- ...props
107
- }: React.ComponentProps<typeof DialogPrimitive.Title>) {
108
- return (
109
- <DialogPrimitive.Title
110
- data-slot="dialog-title"
111
- className={cn("text-lg leading-none font-semibold", className)}
112
- {...props}
113
- />
114
- )
115
- }
116
-
117
- function DialogDescription({
118
- className,
119
- ...props
120
- }: React.ComponentProps<typeof DialogPrimitive.Description>) {
121
- return (
122
- <DialogPrimitive.Description
123
- data-slot="dialog-description"
124
- className={cn("text-muted-foreground text-sm", className)}
125
- {...props}
126
- />
127
- )
128
- }
129
-
130
- export {
131
- Dialog,
132
- DialogClose,
133
- DialogContent,
134
- DialogDescription,
135
- DialogFooter,
136
- DialogHeader,
137
- DialogOverlay,
138
- DialogPortal,
139
- DialogTitle,
140
- DialogTrigger,
141
- }
@@ -1,135 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import { Drawer as DrawerPrimitive } from "vaul"
5
-
6
- import { cn } from "@/lib/utils"
7
-
8
- function Drawer({
9
- ...props
10
- }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
11
- return <DrawerPrimitive.Root data-slot="drawer" {...props} />
12
- }
13
-
14
- function DrawerTrigger({
15
- ...props
16
- }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
17
- return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
18
- }
19
-
20
- function DrawerPortal({
21
- ...props
22
- }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
23
- return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
24
- }
25
-
26
- function DrawerClose({
27
- ...props
28
- }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
29
- return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
30
- }
31
-
32
- function DrawerOverlay({
33
- className,
34
- ...props
35
- }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
36
- return (
37
- <DrawerPrimitive.Overlay
38
- data-slot="drawer-overlay"
39
- className={cn(
40
- "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
41
- className
42
- )}
43
- {...props}
44
- />
45
- )
46
- }
47
-
48
- function DrawerContent({
49
- className,
50
- children,
51
- ...props
52
- }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
53
- return (
54
- <DrawerPortal data-slot="drawer-portal">
55
- <DrawerOverlay />
56
- <DrawerPrimitive.Content
57
- data-slot="drawer-content"
58
- className={cn(
59
- "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
60
- "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
61
- "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
62
- "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
63
- "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
64
- className
65
- )}
66
- {...props}
67
- >
68
- <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
69
- {children}
70
- </DrawerPrimitive.Content>
71
- </DrawerPortal>
72
- )
73
- }
74
-
75
- function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
76
- return (
77
- <div
78
- data-slot="drawer-header"
79
- className={cn(
80
- "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
81
- className
82
- )}
83
- {...props}
84
- />
85
- )
86
- }
87
-
88
- function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
89
- return (
90
- <div
91
- data-slot="drawer-footer"
92
- className={cn("mt-auto flex flex-col gap-2 p-4", className)}
93
- {...props}
94
- />
95
- )
96
- }
97
-
98
- function DrawerTitle({
99
- className,
100
- ...props
101
- }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
102
- return (
103
- <DrawerPrimitive.Title
104
- data-slot="drawer-title"
105
- className={cn("text-foreground font-semibold", className)}
106
- {...props}
107
- />
108
- )
109
- }
110
-
111
- function DrawerDescription({
112
- className,
113
- ...props
114
- }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
115
- return (
116
- <DrawerPrimitive.Description
117
- data-slot="drawer-description"
118
- className={cn("text-muted-foreground text-sm", className)}
119
- {...props}
120
- />
121
- )
122
- }
123
-
124
- export {
125
- Drawer,
126
- DrawerPortal,
127
- DrawerOverlay,
128
- DrawerTrigger,
129
- DrawerClose,
130
- DrawerContent,
131
- DrawerHeader,
132
- DrawerFooter,
133
- DrawerTitle,
134
- DrawerDescription,
135
- }