@openconsole/shadcn 0.2.2 → 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/components/ui/icon.tsx +55 -0
- 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/icon.tsx +0 -21
- package/tsconfig.json +0 -12
- package/tsconfig.tsbuildinfo +0 -1
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { CheckIcon } from "lucide-react"
|
|
5
|
-
import { Checkbox as CheckboxPrimitive } from "radix-ui"
|
|
6
|
-
|
|
7
|
-
import { cn } from "
|
|
8
|
-
|
|
9
|
-
function Checkbox({
|
|
10
|
-
className,
|
|
11
|
-
...props
|
|
12
|
-
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
|
13
|
-
return (
|
|
14
|
-
<CheckboxPrimitive.Root
|
|
15
|
-
data-slot="checkbox"
|
|
16
|
-
className={cn(
|
|
17
|
-
"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
|
|
18
|
-
className
|
|
19
|
-
)}
|
|
20
|
-
{...props}
|
|
21
|
-
>
|
|
22
|
-
<CheckboxPrimitive.Indicator
|
|
23
|
-
data-slot="checkbox-indicator"
|
|
24
|
-
className="grid place-content-center text-current transition-none"
|
|
25
|
-
>
|
|
26
|
-
<CheckIcon className="size-3.5" />
|
|
27
|
-
</CheckboxPrimitive.Indicator>
|
|
28
|
-
</CheckboxPrimitive.Root>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export { Checkbox }
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { CheckIcon } from "lucide-react"
|
|
5
|
+
import { Checkbox as CheckboxPrimitive } from "radix-ui"
|
|
6
|
+
|
|
7
|
+
import { cn } from "../../lib/utils"
|
|
8
|
+
|
|
9
|
+
function Checkbox({
|
|
10
|
+
className,
|
|
11
|
+
...props
|
|
12
|
+
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
|
|
13
|
+
return (
|
|
14
|
+
<CheckboxPrimitive.Root
|
|
15
|
+
data-slot="checkbox"
|
|
16
|
+
className={cn(
|
|
17
|
+
"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...props}
|
|
21
|
+
>
|
|
22
|
+
<CheckboxPrimitive.Indicator
|
|
23
|
+
data-slot="checkbox-indicator"
|
|
24
|
+
className="grid place-content-center text-current transition-none"
|
|
25
|
+
>
|
|
26
|
+
<CheckIcon className="size-3.5" />
|
|
27
|
+
</CheckboxPrimitive.Indicator>
|
|
28
|
+
</CheckboxPrimitive.Root>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export { Checkbox }
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
4
|
-
|
|
5
|
-
function Collapsible({
|
|
6
|
-
...props
|
|
7
|
-
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
|
8
|
-
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function CollapsibleTrigger({
|
|
12
|
-
...props
|
|
13
|
-
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
|
14
|
-
return (
|
|
15
|
-
<CollapsiblePrimitive.CollapsibleTrigger
|
|
16
|
-
data-slot="collapsible-trigger"
|
|
17
|
-
{...props}
|
|
18
|
-
/>
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function CollapsibleContent({
|
|
23
|
-
...props
|
|
24
|
-
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
|
25
|
-
return (
|
|
26
|
-
<CollapsiblePrimitive.CollapsibleContent
|
|
27
|
-
data-slot="collapsible-content"
|
|
28
|
-
{...props}
|
|
29
|
-
/>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
4
|
+
|
|
5
|
+
function Collapsible({
|
|
6
|
+
...props
|
|
7
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
|
|
8
|
+
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function CollapsibleTrigger({
|
|
12
|
+
...props
|
|
13
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
|
|
14
|
+
return (
|
|
15
|
+
<CollapsiblePrimitive.CollapsibleTrigger
|
|
16
|
+
data-slot="collapsible-trigger"
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
function CollapsibleContent({
|
|
23
|
+
...props
|
|
24
|
+
}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
|
|
25
|
+
return (
|
|
26
|
+
<CollapsiblePrimitive.CollapsibleContent
|
|
27
|
+
data-slot="collapsible-content"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { Collapsible, CollapsibleTrigger, CollapsibleContent };
|
|
@@ -1,184 +1,184 @@
|
|
|
1
|
-
"use client"
|
|
2
|
-
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import { Command as CommandPrimitive } from "cmdk"
|
|
5
|
-
import { SearchIcon } from "lucide-react"
|
|
6
|
-
|
|
7
|
-
import { cn } from "
|
|
8
|
-
import {
|
|
9
|
-
Dialog,
|
|
10
|
-
DialogContent,
|
|
11
|
-
DialogDescription,
|
|
12
|
-
DialogHeader,
|
|
13
|
-
DialogTitle,
|
|
14
|
-
} from "./dialog"
|
|
15
|
-
|
|
16
|
-
function Command({
|
|
17
|
-
className,
|
|
18
|
-
...props
|
|
19
|
-
}: React.ComponentProps<typeof CommandPrimitive>) {
|
|
20
|
-
return (
|
|
21
|
-
<CommandPrimitive
|
|
22
|
-
data-slot="command"
|
|
23
|
-
className={cn(
|
|
24
|
-
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
|
25
|
-
className
|
|
26
|
-
)}
|
|
27
|
-
{...props}
|
|
28
|
-
/>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function CommandDialog({
|
|
33
|
-
title = "Command Palette",
|
|
34
|
-
description = "Search for a command to run...",
|
|
35
|
-
children,
|
|
36
|
-
className,
|
|
37
|
-
showCloseButton = true,
|
|
38
|
-
...props
|
|
39
|
-
}: React.ComponentProps<typeof Dialog> & {
|
|
40
|
-
title?: string
|
|
41
|
-
description?: string
|
|
42
|
-
className?: string
|
|
43
|
-
showCloseButton?: boolean
|
|
44
|
-
}) {
|
|
45
|
-
return (
|
|
46
|
-
<Dialog {...props}>
|
|
47
|
-
<DialogHeader className="sr-only">
|
|
48
|
-
<DialogTitle>{title}</DialogTitle>
|
|
49
|
-
<DialogDescription>{description}</DialogDescription>
|
|
50
|
-
</DialogHeader>
|
|
51
|
-
<DialogContent
|
|
52
|
-
className={cn("overflow-hidden p-0", className)}
|
|
53
|
-
showCloseButton={showCloseButton}
|
|
54
|
-
>
|
|
55
|
-
<Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[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">
|
|
56
|
-
{children}
|
|
57
|
-
</Command>
|
|
58
|
-
</DialogContent>
|
|
59
|
-
</Dialog>
|
|
60
|
-
)
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
function CommandInput({
|
|
64
|
-
className,
|
|
65
|
-
...props
|
|
66
|
-
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
|
67
|
-
return (
|
|
68
|
-
<div
|
|
69
|
-
data-slot="command-input-wrapper"
|
|
70
|
-
className="flex h-9 items-center gap-2 border-b px-3"
|
|
71
|
-
>
|
|
72
|
-
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
|
73
|
-
<CommandPrimitive.Input
|
|
74
|
-
data-slot="command-input"
|
|
75
|
-
className={cn(
|
|
76
|
-
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
|
77
|
-
className
|
|
78
|
-
)}
|
|
79
|
-
{...props}
|
|
80
|
-
/>
|
|
81
|
-
</div>
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
function CommandList({
|
|
86
|
-
className,
|
|
87
|
-
...props
|
|
88
|
-
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
|
89
|
-
return (
|
|
90
|
-
<CommandPrimitive.List
|
|
91
|
-
data-slot="command-list"
|
|
92
|
-
className={cn(
|
|
93
|
-
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
|
|
94
|
-
className
|
|
95
|
-
)}
|
|
96
|
-
{...props}
|
|
97
|
-
/>
|
|
98
|
-
)
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function CommandEmpty({
|
|
102
|
-
...props
|
|
103
|
-
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
|
104
|
-
return (
|
|
105
|
-
<CommandPrimitive.Empty
|
|
106
|
-
data-slot="command-empty"
|
|
107
|
-
className="py-6 text-center text-sm"
|
|
108
|
-
{...props}
|
|
109
|
-
/>
|
|
110
|
-
)
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
function CommandGroup({
|
|
114
|
-
className,
|
|
115
|
-
...props
|
|
116
|
-
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
|
117
|
-
return (
|
|
118
|
-
<CommandPrimitive.Group
|
|
119
|
-
data-slot="command-group"
|
|
120
|
-
className={cn(
|
|
121
|
-
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
|
122
|
-
className
|
|
123
|
-
)}
|
|
124
|
-
{...props}
|
|
125
|
-
/>
|
|
126
|
-
)
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
function CommandSeparator({
|
|
130
|
-
className,
|
|
131
|
-
...props
|
|
132
|
-
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
|
133
|
-
return (
|
|
134
|
-
<CommandPrimitive.Separator
|
|
135
|
-
data-slot="command-separator"
|
|
136
|
-
className={cn("-mx-1 h-px bg-border", className)}
|
|
137
|
-
{...props}
|
|
138
|
-
/>
|
|
139
|
-
)
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
function CommandItem({
|
|
143
|
-
className,
|
|
144
|
-
...props
|
|
145
|
-
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
|
146
|
-
return (
|
|
147
|
-
<CommandPrimitive.Item
|
|
148
|
-
data-slot="command-item"
|
|
149
|
-
className={cn(
|
|
150
|
-
"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 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
151
|
-
className
|
|
152
|
-
)}
|
|
153
|
-
{...props}
|
|
154
|
-
/>
|
|
155
|
-
)
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
function CommandShortcut({
|
|
159
|
-
className,
|
|
160
|
-
...props
|
|
161
|
-
}: React.ComponentProps<"span">) {
|
|
162
|
-
return (
|
|
163
|
-
<span
|
|
164
|
-
data-slot="command-shortcut"
|
|
165
|
-
className={cn(
|
|
166
|
-
"ml-auto text-xs tracking-widest text-muted-foreground",
|
|
167
|
-
className
|
|
168
|
-
)}
|
|
169
|
-
{...props}
|
|
170
|
-
/>
|
|
171
|
-
)
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
export {
|
|
175
|
-
Command,
|
|
176
|
-
CommandDialog,
|
|
177
|
-
CommandInput,
|
|
178
|
-
CommandList,
|
|
179
|
-
CommandEmpty,
|
|
180
|
-
CommandGroup,
|
|
181
|
-
CommandItem,
|
|
182
|
-
CommandShortcut,
|
|
183
|
-
CommandSeparator,
|
|
184
|
-
}
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { Command as CommandPrimitive } from "cmdk"
|
|
5
|
+
import { SearchIcon } from "lucide-react"
|
|
6
|
+
|
|
7
|
+
import { cn } from "../../lib/utils"
|
|
8
|
+
import {
|
|
9
|
+
Dialog,
|
|
10
|
+
DialogContent,
|
|
11
|
+
DialogDescription,
|
|
12
|
+
DialogHeader,
|
|
13
|
+
DialogTitle,
|
|
14
|
+
} from "./dialog"
|
|
15
|
+
|
|
16
|
+
function Command({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: React.ComponentProps<typeof CommandPrimitive>) {
|
|
20
|
+
return (
|
|
21
|
+
<CommandPrimitive
|
|
22
|
+
data-slot="command"
|
|
23
|
+
className={cn(
|
|
24
|
+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
|
25
|
+
className
|
|
26
|
+
)}
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function CommandDialog({
|
|
33
|
+
title = "Command Palette",
|
|
34
|
+
description = "Search for a command to run...",
|
|
35
|
+
children,
|
|
36
|
+
className,
|
|
37
|
+
showCloseButton = true,
|
|
38
|
+
...props
|
|
39
|
+
}: React.ComponentProps<typeof Dialog> & {
|
|
40
|
+
title?: string
|
|
41
|
+
description?: string
|
|
42
|
+
className?: string
|
|
43
|
+
showCloseButton?: boolean
|
|
44
|
+
}) {
|
|
45
|
+
return (
|
|
46
|
+
<Dialog {...props}>
|
|
47
|
+
<DialogHeader className="sr-only">
|
|
48
|
+
<DialogTitle>{title}</DialogTitle>
|
|
49
|
+
<DialogDescription>{description}</DialogDescription>
|
|
50
|
+
</DialogHeader>
|
|
51
|
+
<DialogContent
|
|
52
|
+
className={cn("overflow-hidden p-0", className)}
|
|
53
|
+
showCloseButton={showCloseButton}
|
|
54
|
+
>
|
|
55
|
+
<Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[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">
|
|
56
|
+
{children}
|
|
57
|
+
</Command>
|
|
58
|
+
</DialogContent>
|
|
59
|
+
</Dialog>
|
|
60
|
+
)
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function CommandInput({
|
|
64
|
+
className,
|
|
65
|
+
...props
|
|
66
|
+
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
|
67
|
+
return (
|
|
68
|
+
<div
|
|
69
|
+
data-slot="command-input-wrapper"
|
|
70
|
+
className="flex h-9 items-center gap-2 border-b px-3"
|
|
71
|
+
>
|
|
72
|
+
<SearchIcon className="size-4 shrink-0 opacity-50" />
|
|
73
|
+
<CommandPrimitive.Input
|
|
74
|
+
data-slot="command-input"
|
|
75
|
+
className={cn(
|
|
76
|
+
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
|
77
|
+
className
|
|
78
|
+
)}
|
|
79
|
+
{...props}
|
|
80
|
+
/>
|
|
81
|
+
</div>
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function CommandList({
|
|
86
|
+
className,
|
|
87
|
+
...props
|
|
88
|
+
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
|
89
|
+
return (
|
|
90
|
+
<CommandPrimitive.List
|
|
91
|
+
data-slot="command-list"
|
|
92
|
+
className={cn(
|
|
93
|
+
"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
|
|
94
|
+
className
|
|
95
|
+
)}
|
|
96
|
+
{...props}
|
|
97
|
+
/>
|
|
98
|
+
)
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
function CommandEmpty({
|
|
102
|
+
...props
|
|
103
|
+
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
|
104
|
+
return (
|
|
105
|
+
<CommandPrimitive.Empty
|
|
106
|
+
data-slot="command-empty"
|
|
107
|
+
className="py-6 text-center text-sm"
|
|
108
|
+
{...props}
|
|
109
|
+
/>
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
function CommandGroup({
|
|
114
|
+
className,
|
|
115
|
+
...props
|
|
116
|
+
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
|
117
|
+
return (
|
|
118
|
+
<CommandPrimitive.Group
|
|
119
|
+
data-slot="command-group"
|
|
120
|
+
className={cn(
|
|
121
|
+
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
|
122
|
+
className
|
|
123
|
+
)}
|
|
124
|
+
{...props}
|
|
125
|
+
/>
|
|
126
|
+
)
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function CommandSeparator({
|
|
130
|
+
className,
|
|
131
|
+
...props
|
|
132
|
+
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
|
133
|
+
return (
|
|
134
|
+
<CommandPrimitive.Separator
|
|
135
|
+
data-slot="command-separator"
|
|
136
|
+
className={cn("-mx-1 h-px bg-border", className)}
|
|
137
|
+
{...props}
|
|
138
|
+
/>
|
|
139
|
+
)
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
function CommandItem({
|
|
143
|
+
className,
|
|
144
|
+
...props
|
|
145
|
+
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
|
146
|
+
return (
|
|
147
|
+
<CommandPrimitive.Item
|
|
148
|
+
data-slot="command-item"
|
|
149
|
+
className={cn(
|
|
150
|
+
"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 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
151
|
+
className
|
|
152
|
+
)}
|
|
153
|
+
{...props}
|
|
154
|
+
/>
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
function CommandShortcut({
|
|
159
|
+
className,
|
|
160
|
+
...props
|
|
161
|
+
}: React.ComponentProps<"span">) {
|
|
162
|
+
return (
|
|
163
|
+
<span
|
|
164
|
+
data-slot="command-shortcut"
|
|
165
|
+
className={cn(
|
|
166
|
+
"ml-auto text-xs tracking-widest text-muted-foreground",
|
|
167
|
+
className
|
|
168
|
+
)}
|
|
169
|
+
{...props}
|
|
170
|
+
/>
|
|
171
|
+
)
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
export {
|
|
175
|
+
Command,
|
|
176
|
+
CommandDialog,
|
|
177
|
+
CommandInput,
|
|
178
|
+
CommandList,
|
|
179
|
+
CommandEmpty,
|
|
180
|
+
CommandGroup,
|
|
181
|
+
CommandItem,
|
|
182
|
+
CommandShortcut,
|
|
183
|
+
CommandSeparator,
|
|
184
|
+
}
|