@tanstack/cta-ui 0.15.3 → 0.15.5

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 (88) hide show
  1. package/dist/assets/index-BLGJkAxX.css +1 -0
  2. package/dist/assets/index-DPjMQkKx.js +208 -0
  3. package/dist/assets/index-DPjMQkKx.js.map +1 -0
  4. package/dist/index.html +3 -2
  5. package/index.html +1 -0
  6. package/lib/engine-handling/create-app-wrapper.ts +3 -4
  7. package/lib/engine-handling/generate-initial-payload.ts +12 -20
  8. package/lib/engine-handling/server-environment.ts +2 -2
  9. package/lib/index.ts +33 -15
  10. package/lib-dist/engine-handling/create-app-wrapper.js +3 -2
  11. package/lib-dist/engine-handling/generate-initial-payload.d.ts +8 -6
  12. package/lib-dist/engine-handling/generate-initial-payload.js +9 -14
  13. package/lib-dist/engine-handling/server-environment.d.ts +3 -3
  14. package/lib-dist/index.d.ts +1 -0
  15. package/lib-dist/index.js +29 -11
  16. package/package.json +3 -32
  17. package/src/index.tsx +2 -42
  18. package/src/main.tsx +0 -1
  19. package/src/styles.css +2 -0
  20. package/src/types.d.ts +13 -8
  21. package/dist/assets/index-BktnQA5a.js +0 -213
  22. package/dist/assets/index-BktnQA5a.js.map +0 -1
  23. package/dist/assets/index-CpoUtYXp.css +0 -1
  24. package/dist/logo-color-100w.png +0 -0
  25. package/dist/logo192.png +0 -0
  26. package/dist/logo512.png +0 -0
  27. package/dist/tailwind.svg +0 -1
  28. package/dist/tanstack.png +0 -0
  29. package/dist/typescript.svg +0 -1
  30. package/lib/engine-handling/framework-registration.ts +0 -11
  31. package/lib-dist/engine-handling/framework-registration.d.ts +0 -1
  32. package/lib-dist/engine-handling/framework-registration.js +0 -10
  33. package/public/logo-color-100w.png +0 -0
  34. package/public/logo192.png +0 -0
  35. package/public/logo512.png +0 -0
  36. package/public/tailwind.svg +0 -1
  37. package/public/tanstack.png +0 -0
  38. package/public/typescript.svg +0 -1
  39. package/src/components/StatusList.tsx +0 -22
  40. package/src/components/add-on-info-dialog.tsx +0 -39
  41. package/src/components/background-animation.tsx +0 -229
  42. package/src/components/cta-sidebar.tsx +0 -50
  43. package/src/components/custom-add-on-dialog.tsx +0 -79
  44. package/src/components/file-navigator.tsx +0 -203
  45. package/src/components/file-tree.tsx +0 -35
  46. package/src/components/file-viewer.tsx +0 -67
  47. package/src/components/header.tsx +0 -31
  48. package/src/components/sidebar-items/add-ons.tsx +0 -94
  49. package/src/components/sidebar-items/mode-selector.tsx +0 -57
  50. package/src/components/sidebar-items/project-name.tsx +0 -28
  51. package/src/components/sidebar-items/run-add-ons.tsx +0 -71
  52. package/src/components/sidebar-items/run-create-app.tsx +0 -82
  53. package/src/components/sidebar-items/starter.tsx +0 -123
  54. package/src/components/sidebar-items/typescript-switch.tsx +0 -52
  55. package/src/components/starters-carousel.tsx +0 -45
  56. package/src/components/startup-dialog.tsx +0 -71
  57. package/src/components/toaster.tsx +0 -29
  58. package/src/components/ui/button.tsx +0 -61
  59. package/src/components/ui/carousel.tsx +0 -239
  60. package/src/components/ui/checkbox.tsx +0 -30
  61. package/src/components/ui/dialog.tsx +0 -138
  62. package/src/components/ui/dropdown-menu.tsx +0 -255
  63. package/src/components/ui/input.tsx +0 -21
  64. package/src/components/ui/label.tsx +0 -22
  65. package/src/components/ui/popover.tsx +0 -46
  66. package/src/components/ui/separator.tsx +0 -28
  67. package/src/components/ui/sheet.tsx +0 -137
  68. package/src/components/ui/sidebar.tsx +0 -726
  69. package/src/components/ui/skeleton.tsx +0 -13
  70. package/src/components/ui/sonner.tsx +0 -23
  71. package/src/components/ui/switch.tsx +0 -29
  72. package/src/components/ui/table.tsx +0 -114
  73. package/src/components/ui/tabs.tsx +0 -64
  74. package/src/components/ui/toggle-group.tsx +0 -71
  75. package/src/components/ui/toggle.tsx +0 -49
  76. package/src/components/ui/tooltip.tsx +0 -61
  77. package/src/components/ui/tree-view.tsx +0 -497
  78. package/src/file-classes.ts +0 -54
  79. package/src/hooks/use-mobile.ts +0 -19
  80. package/src/hooks/use-mounted.ts +0 -9
  81. package/src/hooks/use-preferred-reduced-motion.ts +0 -27
  82. package/src/hooks/use-streaming-status.ts +0 -70
  83. package/src/lib/api.ts +0 -92
  84. package/src/lib/utils.ts +0 -6
  85. package/src/store/add-ons.ts +0 -81
  86. package/src/store/project.ts +0 -347
  87. package/tests/store/add-ons.test.ts +0 -222
  88. package/vitest.config.ts +0 -6
@@ -1,138 +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
- hideCloseButton,
51
- ...props
52
- }: React.ComponentProps<typeof DialogPrimitive.Content> & {
53
- hideCloseButton?: 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 p-6 shadow-lg duration-200 sm:max-w-lg bg-opacity-70 backdrop-blur-md border-3 border-white/20',
62
- className,
63
- )}
64
- {...props}
65
- >
66
- {children}
67
- {!hideCloseButton && (
68
- <DialogPrimitive.Close 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">
69
- <XIcon />
70
- <span className="sr-only">Close</span>
71
- </DialogPrimitive.Close>
72
- )}
73
- </DialogPrimitive.Content>
74
- </DialogPortal>
75
- )
76
- }
77
-
78
- function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
79
- return (
80
- <div
81
- data-slot="dialog-header"
82
- className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
83
- {...props}
84
- />
85
- )
86
- }
87
-
88
- function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
89
- return (
90
- <div
91
- data-slot="dialog-footer"
92
- className={cn(
93
- 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
94
- className,
95
- )}
96
- {...props}
97
- />
98
- )
99
- }
100
-
101
- function DialogTitle({
102
- className,
103
- ...props
104
- }: React.ComponentProps<typeof DialogPrimitive.Title>) {
105
- return (
106
- <DialogPrimitive.Title
107
- data-slot="dialog-title"
108
- className={cn('text-lg leading-none font-semibold', className)}
109
- {...props}
110
- />
111
- )
112
- }
113
-
114
- function DialogDescription({
115
- className,
116
- ...props
117
- }: React.ComponentProps<typeof DialogPrimitive.Description>) {
118
- return (
119
- <DialogPrimitive.Description
120
- data-slot="dialog-description"
121
- className={cn('text-muted-foreground text-sm', className)}
122
- {...props}
123
- />
124
- )
125
- }
126
-
127
- export {
128
- Dialog,
129
- DialogClose,
130
- DialogContent,
131
- DialogDescription,
132
- DialogFooter,
133
- DialogHeader,
134
- DialogOverlay,
135
- DialogPortal,
136
- DialogTitle,
137
- DialogTrigger,
138
- }
@@ -1,255 +0,0 @@
1
- import * as React from "react"
2
- import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
3
- import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
4
-
5
- import { cn } from "@/lib/utils"
6
-
7
- function DropdownMenu({
8
- ...props
9
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
10
- return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
11
- }
12
-
13
- function DropdownMenuPortal({
14
- ...props
15
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
16
- return (
17
- <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
18
- )
19
- }
20
-
21
- function DropdownMenuTrigger({
22
- ...props
23
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
24
- return (
25
- <DropdownMenuPrimitive.Trigger
26
- data-slot="dropdown-menu-trigger"
27
- {...props}
28
- />
29
- )
30
- }
31
-
32
- function DropdownMenuContent({
33
- className,
34
- sideOffset = 4,
35
- ...props
36
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
37
- return (
38
- <DropdownMenuPrimitive.Portal>
39
- <DropdownMenuPrimitive.Content
40
- data-slot="dropdown-menu-content"
41
- sideOffset={sideOffset}
42
- className={cn(
43
- "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-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
44
- className
45
- )}
46
- {...props}
47
- />
48
- </DropdownMenuPrimitive.Portal>
49
- )
50
- }
51
-
52
- function DropdownMenuGroup({
53
- ...props
54
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
55
- return (
56
- <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
57
- )
58
- }
59
-
60
- function DropdownMenuItem({
61
- className,
62
- inset,
63
- variant = "default",
64
- ...props
65
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
66
- inset?: boolean
67
- variant?: "default" | "destructive"
68
- }) {
69
- return (
70
- <DropdownMenuPrimitive.Item
71
- data-slot="dropdown-menu-item"
72
- data-inset={inset}
73
- data-variant={variant}
74
- className={cn(
75
- "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",
76
- className
77
- )}
78
- {...props}
79
- />
80
- )
81
- }
82
-
83
- function DropdownMenuCheckboxItem({
84
- className,
85
- children,
86
- checked,
87
- ...props
88
- }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
89
- return (
90
- <DropdownMenuPrimitive.CheckboxItem
91
- data-slot="dropdown-menu-checkbox-item"
92
- className={cn(
93
- "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",
94
- className
95
- )}
96
- checked={checked}
97
- {...props}
98
- >
99
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
100
- <DropdownMenuPrimitive.ItemIndicator>
101
- <CheckIcon className="size-4" />
102
- </DropdownMenuPrimitive.ItemIndicator>
103
- </span>
104
- {children}
105
- </DropdownMenuPrimitive.CheckboxItem>
106
- )
107
- }
108
-
109
- function DropdownMenuRadioGroup({
110
- ...props
111
- }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
112
- return (
113
- <DropdownMenuPrimitive.RadioGroup
114
- data-slot="dropdown-menu-radio-group"
115
- {...props}
116
- />
117
- )
118
- }
119
-
120
- function DropdownMenuRadioItem({
121
- className,
122
- children,
123
- ...props
124
- }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
125
- return (
126
- <DropdownMenuPrimitive.RadioItem
127
- data-slot="dropdown-menu-radio-item"
128
- className={cn(
129
- "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",
130
- className
131
- )}
132
- {...props}
133
- >
134
- <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
135
- <DropdownMenuPrimitive.ItemIndicator>
136
- <CircleIcon className="size-2 fill-current" />
137
- </DropdownMenuPrimitive.ItemIndicator>
138
- </span>
139
- {children}
140
- </DropdownMenuPrimitive.RadioItem>
141
- )
142
- }
143
-
144
- function DropdownMenuLabel({
145
- className,
146
- inset,
147
- ...props
148
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
149
- inset?: boolean
150
- }) {
151
- return (
152
- <DropdownMenuPrimitive.Label
153
- data-slot="dropdown-menu-label"
154
- data-inset={inset}
155
- className={cn(
156
- "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
157
- className
158
- )}
159
- {...props}
160
- />
161
- )
162
- }
163
-
164
- function DropdownMenuSeparator({
165
- className,
166
- ...props
167
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
168
- return (
169
- <DropdownMenuPrimitive.Separator
170
- data-slot="dropdown-menu-separator"
171
- className={cn("bg-border -mx-1 my-1 h-px", className)}
172
- {...props}
173
- />
174
- )
175
- }
176
-
177
- function DropdownMenuShortcut({
178
- className,
179
- ...props
180
- }: React.ComponentProps<"span">) {
181
- return (
182
- <span
183
- data-slot="dropdown-menu-shortcut"
184
- className={cn(
185
- "text-muted-foreground ml-auto text-xs tracking-widest",
186
- className
187
- )}
188
- {...props}
189
- />
190
- )
191
- }
192
-
193
- function DropdownMenuSub({
194
- ...props
195
- }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
196
- return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
197
- }
198
-
199
- function DropdownMenuSubTrigger({
200
- className,
201
- inset,
202
- children,
203
- ...props
204
- }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
205
- inset?: boolean
206
- }) {
207
- return (
208
- <DropdownMenuPrimitive.SubTrigger
209
- data-slot="dropdown-menu-sub-trigger"
210
- data-inset={inset}
211
- className={cn(
212
- "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
213
- className
214
- )}
215
- {...props}
216
- >
217
- {children}
218
- <ChevronRightIcon className="ml-auto size-4" />
219
- </DropdownMenuPrimitive.SubTrigger>
220
- )
221
- }
222
-
223
- function DropdownMenuSubContent({
224
- className,
225
- ...props
226
- }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
227
- return (
228
- <DropdownMenuPrimitive.SubContent
229
- data-slot="dropdown-menu-sub-content"
230
- className={cn(
231
- "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-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
232
- className
233
- )}
234
- {...props}
235
- />
236
- )
237
- }
238
-
239
- export {
240
- DropdownMenu,
241
- DropdownMenuPortal,
242
- DropdownMenuTrigger,
243
- DropdownMenuContent,
244
- DropdownMenuGroup,
245
- DropdownMenuLabel,
246
- DropdownMenuItem,
247
- DropdownMenuCheckboxItem,
248
- DropdownMenuRadioGroup,
249
- DropdownMenuRadioItem,
250
- DropdownMenuSeparator,
251
- DropdownMenuShortcut,
252
- DropdownMenuSub,
253
- DropdownMenuSubTrigger,
254
- DropdownMenuSubContent,
255
- }
@@ -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 text-base 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:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md: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,22 +0,0 @@
1
- import * as React from "react"
2
- import * as LabelPrimitive from "@radix-ui/react-label"
3
-
4
- import { cn } from "@/lib/utils"
5
-
6
- function Label({
7
- className,
8
- ...props
9
- }: React.ComponentProps<typeof LabelPrimitive.Root>) {
10
- return (
11
- <LabelPrimitive.Root
12
- data-slot="label"
13
- className={cn(
14
- "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
15
- className
16
- )}
17
- {...props}
18
- />
19
- )
20
- }
21
-
22
- export { Label }
@@ -1,46 +0,0 @@
1
- import * as React from "react"
2
- import * as PopoverPrimitive from "@radix-ui/react-popover"
3
-
4
- import { cn } from "@/lib/utils"
5
-
6
- function Popover({
7
- ...props
8
- }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
9
- return <PopoverPrimitive.Root data-slot="popover" {...props} />
10
- }
11
-
12
- function PopoverTrigger({
13
- ...props
14
- }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
15
- return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
16
- }
17
-
18
- function PopoverContent({
19
- className,
20
- align = "center",
21
- sideOffset = 4,
22
- ...props
23
- }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
24
- return (
25
- <PopoverPrimitive.Portal>
26
- <PopoverPrimitive.Content
27
- data-slot="popover-content"
28
- align={align}
29
- sideOffset={sideOffset}
30
- className={cn(
31
- "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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
32
- className
33
- )}
34
- {...props}
35
- />
36
- </PopoverPrimitive.Portal>
37
- )
38
- }
39
-
40
- function PopoverAnchor({
41
- ...props
42
- }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
43
- return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
44
- }
45
-
46
- export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
@@ -1,28 +0,0 @@
1
- "use client"
2
-
3
- import * as React from "react"
4
- import * as SeparatorPrimitive from "@radix-ui/react-separator"
5
-
6
- import { cn } from "@/lib/utils"
7
-
8
- function Separator({
9
- className,
10
- orientation = "horizontal",
11
- decorative = true,
12
- ...props
13
- }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14
- return (
15
- <SeparatorPrimitive.Root
16
- data-slot="separator-root"
17
- decorative={decorative}
18
- orientation={orientation}
19
- className={cn(
20
- "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21
- className
22
- )}
23
- {...props}
24
- />
25
- )
26
- }
27
-
28
- export { Separator }
@@ -1,137 +0,0 @@
1
- import * as React from "react"
2
- import * as SheetPrimitive from "@radix-ui/react-dialog"
3
- import { XIcon } from "lucide-react"
4
-
5
- import { cn } from "@/lib/utils"
6
-
7
- function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
8
- return <SheetPrimitive.Root data-slot="sheet" {...props} />
9
- }
10
-
11
- function SheetTrigger({
12
- ...props
13
- }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
14
- return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
15
- }
16
-
17
- function SheetClose({
18
- ...props
19
- }: React.ComponentProps<typeof SheetPrimitive.Close>) {
20
- return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
21
- }
22
-
23
- function SheetPortal({
24
- ...props
25
- }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
26
- return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
27
- }
28
-
29
- function SheetOverlay({
30
- className,
31
- ...props
32
- }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
33
- return (
34
- <SheetPrimitive.Overlay
35
- data-slot="sheet-overlay"
36
- className={cn(
37
- "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",
38
- className
39
- )}
40
- {...props}
41
- />
42
- )
43
- }
44
-
45
- function SheetContent({
46
- className,
47
- children,
48
- side = "right",
49
- ...props
50
- }: React.ComponentProps<typeof SheetPrimitive.Content> & {
51
- side?: "top" | "right" | "bottom" | "left"
52
- }) {
53
- return (
54
- <SheetPortal>
55
- <SheetOverlay />
56
- <SheetPrimitive.Content
57
- data-slot="sheet-content"
58
- className={cn(
59
- "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
60
- side === "right" &&
61
- "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
62
- side === "left" &&
63
- "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
64
- side === "top" &&
65
- "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
66
- side === "bottom" &&
67
- "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
68
- className
69
- )}
70
- {...props}
71
- >
72
- {children}
73
- <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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">
74
- <XIcon className="size-4" />
75
- <span className="sr-only">Close</span>
76
- </SheetPrimitive.Close>
77
- </SheetPrimitive.Content>
78
- </SheetPortal>
79
- )
80
- }
81
-
82
- function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
83
- return (
84
- <div
85
- data-slot="sheet-header"
86
- className={cn("flex flex-col gap-1.5 p-4", className)}
87
- {...props}
88
- />
89
- )
90
- }
91
-
92
- function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
93
- return (
94
- <div
95
- data-slot="sheet-footer"
96
- className={cn("mt-auto flex flex-col gap-2 p-4", className)}
97
- {...props}
98
- />
99
- )
100
- }
101
-
102
- function SheetTitle({
103
- className,
104
- ...props
105
- }: React.ComponentProps<typeof SheetPrimitive.Title>) {
106
- return (
107
- <SheetPrimitive.Title
108
- data-slot="sheet-title"
109
- className={cn("text-foreground font-semibold", className)}
110
- {...props}
111
- />
112
- )
113
- }
114
-
115
- function SheetDescription({
116
- className,
117
- ...props
118
- }: React.ComponentProps<typeof SheetPrimitive.Description>) {
119
- return (
120
- <SheetPrimitive.Description
121
- data-slot="sheet-description"
122
- className={cn("text-muted-foreground text-sm", className)}
123
- {...props}
124
- />
125
- )
126
- }
127
-
128
- export {
129
- Sheet,
130
- SheetTrigger,
131
- SheetClose,
132
- SheetContent,
133
- SheetHeader,
134
- SheetFooter,
135
- SheetTitle,
136
- SheetDescription,
137
- }