@openconsole/shadcn 0.2.4 → 0.2.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.
- package/README.md +460 -380
- package/components/ai-elements/agent.tsx +141 -0
- package/components/ai-elements/artifact.tsx +148 -0
- package/components/ai-elements/attachments.tsx +426 -0
- package/components/ai-elements/audio-player.tsx +231 -0
- package/components/ai-elements/canvas.tsx +26 -0
- package/components/ai-elements/chain-of-thought.tsx +222 -0
- package/components/ai-elements/checkpoint.tsx +71 -0
- package/components/ai-elements/code-block.tsx +562 -0
- package/components/ai-elements/commit.tsx +458 -0
- package/components/ai-elements/confirmation.tsx +174 -0
- package/components/ai-elements/connection.tsx +28 -0
- package/components/ai-elements/context.tsx +409 -0
- package/components/ai-elements/controls.tsx +18 -0
- package/components/ai-elements/conversation.tsx +168 -0
- package/components/ai-elements/edge.tsx +143 -0
- package/components/ai-elements/environment-variables.tsx +324 -0
- package/components/ai-elements/file-tree.tsx +304 -0
- package/components/ai-elements/image.tsx +24 -0
- package/components/ai-elements/index.ts +51 -0
- package/components/ai-elements/inline-citation.tsx +296 -0
- package/components/ai-elements/jsx-preview.tsx +310 -0
- package/components/ai-elements/message.tsx +360 -0
- package/components/ai-elements/mic-selector.tsx +375 -0
- package/components/ai-elements/model-selector.tsx +213 -0
- package/components/ai-elements/node.tsx +71 -0
- package/components/ai-elements/open-in-chat.tsx +370 -0
- package/components/ai-elements/package-info.tsx +239 -0
- package/components/ai-elements/panel.tsx +15 -0
- package/components/ai-elements/persona.tsx +306 -0
- package/components/ai-elements/plan.tsx +147 -0
- package/components/ai-elements/prompt-input.tsx +1463 -0
- package/components/ai-elements/queue.tsx +274 -0
- package/components/ai-elements/reasoning.tsx +228 -0
- package/components/ai-elements/sandbox.tsx +132 -0
- package/components/ai-elements/schema-display.tsx +471 -0
- package/components/ai-elements/shimmer.tsx +77 -0
- package/components/ai-elements/snippet.tsx +145 -0
- package/components/ai-elements/sources.tsx +77 -0
- package/components/ai-elements/speech-input.tsx +323 -0
- package/components/ai-elements/stack-trace.tsx +528 -0
- package/components/ai-elements/suggestion.tsx +57 -0
- package/components/ai-elements/task.tsx +87 -0
- package/components/ai-elements/terminal.tsx +273 -0
- package/components/ai-elements/test-results.tsx +496 -0
- package/components/ai-elements/tool.tsx +173 -0
- package/components/ai-elements/toolbar.tsx +16 -0
- package/components/ai-elements/transcription.tsx +125 -0
- package/components/ai-elements/voice-selector.tsx +524 -0
- package/components/ai-elements/web-preview.tsx +281 -0
- package/components/index.ts +3 -0
- package/{accordion.tsx → components/ui/accordion.tsx} +66 -66
- package/{alert-dialog.tsx → components/ui/alert-dialog.tsx} +196 -196
- package/{alert.tsx → components/ui/alert.tsx} +66 -66
- package/{aspect-ratio.tsx → components/ui/aspect-ratio.tsx} +11 -11
- package/{avatar.tsx → components/ui/avatar.tsx} +53 -53
- package/{badge.tsx → components/ui/badge.tsx} +46 -46
- package/{breadcrumb.tsx → components/ui/breadcrumb.tsx} +109 -109
- package/{button-group.tsx → components/ui/button-group.tsx} +83 -83
- package/{button.tsx → components/ui/button.tsx} +60 -60
- package/{calendar.tsx → components/ui/calendar.tsx} +219 -219
- package/{card.tsx → components/ui/card.tsx} +92 -92
- package/{carousel.tsx → components/ui/carousel.tsx} +241 -241
- package/{chart.tsx → components/ui/chart.tsx} +374 -374
- package/{checkbox.tsx → components/ui/checkbox.tsx} +32 -32
- package/{collapsible.tsx → components/ui/collapsible.tsx} +33 -33
- package/{command.tsx → components/ui/command.tsx} +184 -184
- package/{context-menu.tsx → components/ui/context-menu.tsx} +252 -252
- package/{dialog.tsx → components/ui/dialog.tsx} +143 -143
- package/{direction.tsx → components/ui/direction.tsx} +22 -22
- package/{drawer.tsx → components/ui/drawer.tsx} +135 -135
- package/{dropdown-menu.tsx → components/ui/dropdown-menu.tsx} +257 -257
- package/{empty.tsx → components/ui/empty.tsx} +104 -104
- package/{field.tsx → components/ui/field.tsx} +248 -248
- package/{form.tsx → components/ui/form.tsx} +167 -167
- package/{hover-card.tsx → components/ui/hover-card.tsx} +44 -44
- package/{icon.tsx → components/ui/icon.tsx} +55 -55
- package/components/ui/index.ts +59 -0
- package/{input-group.tsx → components/ui/input-group.tsx} +170 -170
- package/{input-otp.tsx → components/ui/input-otp.tsx} +77 -77
- package/{input.tsx → components/ui/input.tsx} +21 -21
- package/{item.tsx → components/ui/item.tsx} +193 -193
- package/{kbd.tsx → components/ui/kbd.tsx} +28 -28
- package/{label.tsx → components/ui/label.tsx} +24 -24
- package/{menubar.tsx → components/ui/menubar.tsx} +276 -276
- package/{native-select.tsx → components/ui/native-select.tsx} +62 -62
- package/{navigation-menu.tsx → components/ui/navigation-menu.tsx} +168 -168
- package/{pagination.tsx → components/ui/pagination.tsx} +127 -127
- package/{popover.tsx → components/ui/popover.tsx} +89 -89
- package/{progress.tsx → components/ui/progress.tsx} +31 -31
- package/{radio-group.tsx → components/ui/radio-group.tsx} +45 -45
- package/{resizable.tsx → components/ui/resizable.tsx} +53 -53
- package/{scroll-area.tsx → components/ui/scroll-area.tsx} +58 -58
- package/{select.tsx → components/ui/select.tsx} +187 -187
- package/{separator.tsx → components/ui/separator.tsx} +28 -28
- package/{sheet.tsx → components/ui/sheet.tsx} +139 -139
- package/{sidebar.tsx → components/ui/sidebar.tsx} +724 -724
- package/{skeleton.tsx → components/ui/skeleton.tsx} +13 -13
- package/{slider.tsx → components/ui/slider.tsx} +63 -63
- package/{sonner.tsx → components/ui/sonner.tsx} +40 -40
- package/{spinner.tsx → components/ui/spinner.tsx} +16 -16
- package/{switch.tsx → components/ui/switch.tsx} +35 -35
- package/{table.tsx → components/ui/table.tsx} +116 -116
- package/{tabs.tsx → components/ui/tabs.tsx} +66 -66
- package/{textarea.tsx → components/ui/textarea.tsx} +18 -18
- package/{toggle-group.tsx → components/ui/toggle-group.tsx} +83 -83
- package/{toggle.tsx → components/ui/toggle.tsx} +47 -47
- package/{tooltip.tsx → components/ui/tooltip.tsx} +61 -61
- package/hooks/index.ts +1 -1
- package/hooks/use-mobile.ts +19 -19
- package/index.ts +3 -59
- package/lib/index.ts +1 -1
- package/lib/utils.ts +6 -6
- package/package.json +79 -1
- package/styles.css +124 -124
- package/tsconfig.json +0 -12
- package/tsconfig.tsbuildinfo +0 -1
|
@@ -1,252 +1,252 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
|
5
|
-
import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
|
|
6
|
-
|
|
7
|
-
import { cn } from "
|
|
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
|
-
"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
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
|
-
"z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
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
|
-
"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 bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
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
|
-
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
|
|
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
|
-
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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
|
-
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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
|
-
"px-2 py-1.5 text-sm font-medium text-foreground 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("-mx-1 my-1 h-px bg-border", 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
|
-
"ml-auto text-xs tracking-widest text-muted-foreground",
|
|
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
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
|
|
5
|
+
import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
|
|
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
|
+
"flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
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
|
+
"z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
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
|
+
"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 bg-popover p-1 text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
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
|
+
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
|
|
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
|
+
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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
|
+
"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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
|
+
"px-2 py-1.5 text-sm font-medium text-foreground 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("-mx-1 my-1 h-px bg-border", 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
|
+
"ml-auto text-xs tracking-widest text-muted-foreground",
|
|
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
|
+
}
|