command

1"use client"
2 
3import * as React from "react"
4import { Command as CommandBase } from "cmdk-base"
5import { SearchIcon } from "lucide-react"
6 
7import {
8	Dialog,
9	DialogContent,
10	DialogDescription,
11	DialogHeader,
12	DialogTitle,
13} from "@/components/ui/dialog"
14 
15import { cn } from "@/lib/utils"
16 
17function Command({
18	className,
19	...props
20}: React.ComponentProps<typeof CommandBase>) {
21	return (
22		<CommandBase
23			data-slot="command"
24			className={cn(
25				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md border outline-none",
26				className
27			)}
28			{...props}
29		/>
30	)
31}
32 
33function CommandDialog({
34	title = "Command Palette",
35	description = "Search for a command to run...",
36	className,
37	showCloseButton = false,
38	children,
39	...props
40}: React.ComponentProps<typeof Dialog> & {
41	title?: string
42	description?: string
43	className?: string
44	showCloseButton?: boolean
45	children?: React.ReactNode
46}) {
47	return (
48		<Dialog {...props}>
49			<DialogHeader className="sr-only">
50				<DialogTitle>{title}</DialogTitle>
51				<DialogDescription>{description}</DialogDescription>
52			</DialogHeader>
53			<DialogContent
54				className={cn("overflow-hidden p-0", className)}
55				showCloseButton={showCloseButton}
56			>
57				<Command>{children}</Command>
58			</DialogContent>
59		</Dialog>
60	)
61}
62 
63function CommandInput({
64	className,
65	disabled,
66	...props
67}: React.ComponentProps<typeof CommandBase.Input>) {
68	return (
69		<div
70			data-slot="command-input-wrapper"
71			className="flex h-9 items-center gap-2 border-b px-3"
72		>
73			<SearchIcon className="size-4 shrink-0 opacity-50" />
74			<CommandBase.Input
75				data-slot="command-input"
76				className={cn(
77					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
78					className
79				)}
80				data-disabled={disabled}
81				disabled={disabled}
82				{...props}
83			/>
84		</div>
85	)
86}
87 
88function CommandList({
89	className,
90	...props
91}: React.ComponentProps<typeof CommandBase.List>) {
92	return (
93		<CommandBase.List
94			data-slot="command-list"
95			className={cn(
96				"max-h-[300px] overflow-x-hidden overflow-y-auto outline-hidden",
97				className
98			)}
99			{...props}
100		/>
101	)
102}
103 
104function CommandEmpty({
105	...props
106}: React.ComponentProps<typeof CommandBase.Empty>) {
107	return (
108		<CommandBase.Empty
109			data-slot="command-empty"
110			className="py-6 text-center text-sm"
111			{...props}
112		/>
113	)
114}
115 
116function CommandGroup({
117	className,
118	...props
119// … truncated