import React from "react";
|
import { Command as CommandPrimitive } from "cmdk";
|
import { IconSearch } from "@humansignal/icons";
|
|
import { cn } from "@humansignal/shad/utils";
|
|
function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
|
return (
|
<CommandPrimitive
|
data-slot="command"
|
className={cn(
|
"bg-neutral-background border-neutral-border border flex h-full w-full flex-col overflow-hidden rounded-md",
|
className,
|
)}
|
{...props}
|
/>
|
);
|
}
|
|
function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
const ref = React.useRef<HTMLInputElement>(null);
|
return (
|
<div
|
data-slot="command-input-wrapper"
|
className="flex items-center gap-2 h-8 px-2 m-1 focus-within:border-neutral-border-bold border outline-none border-neutral-border rounded-smaller hover:border-neutral-border-bold shadow-inner box-border"
|
ref={ref}
|
>
|
<IconSearch className="text-neutral-content-subtlest w-6 h-6 flex-none" />
|
<CommandPrimitive.Input
|
data-slot="command-input"
|
className={cn(
|
"placeholder:text-neutral-content-subtler flex h-8 w-full rounded-md bg-transparent py-3 outline-hidden disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none border-0",
|
className,
|
)}
|
{...props}
|
/>
|
</div>
|
);
|
}
|
|
function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
|
return (
|
<CommandPrimitive.List
|
data-slot="command-list"
|
className={cn("max-h-[300px] scroll-py-2 overflow-x-hidden overflow-y-auto", className)}
|
{...props}
|
/>
|
);
|
}
|
|
function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />;
|
}
|
|
function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
return <CommandPrimitive.Group data-slot="command-group" className={cn(className)} {...props} />;
|
}
|
|
function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
return (
|
<CommandPrimitive.Separator
|
data-slot="command-separator"
|
className={cn("bg-border -mx-1 h-px", className)}
|
{...props}
|
/>
|
);
|
}
|
|
function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
return <CommandPrimitive.Item data-slot="command-item" className={cn(className)} {...props} />;
|
}
|
|
function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
|
return (
|
<span
|
data-slot="command-shortcut"
|
className={cn("text-neutral-content-subtle ml-auto text-xs tracking-widest", className)}
|
{...props}
|
/>
|
);
|
}
|
|
export {
|
Command,
|
CommandInput,
|
CommandList,
|
CommandEmpty,
|
CommandGroup,
|
CommandItem,
|
CommandShortcut,
|
CommandSeparator,
|
};
|