Command

1'use client';
2 
3import { Command as CommandPrimitive } from 'cmdk';
4import { SearchIcon } from 'lucide-react';
5import { cn } from '@/lib/classnames';
6import { Dialog } from '@/registry/niv/ui/dialog';
7import type { ComponentProps } from 'react';
8 
9function CommandRoot({
10  className,
11  ...props
12}: ComponentProps<typeof CommandPrimitive>) {
13  return (
14    <CommandPrimitive
15      className={cn(
16        'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
17        className,
18      )}
19      data-slot='command'
20      {...props}
21    />
22  );
23}
24 
25function CommandDialog({
26  title = 'Command Palette',
27  description = 'Search for a command to run...',
28  children,
29  className,
30  showCloseButton = true,
31  ...props
32}: ComponentProps<typeof Dialog> & {
33  title?: string;
34  description?: string;
35  className?: string;
36  showCloseButton?: boolean;
37}) {
38  return (
39    <Dialog {...props}>
40      <Dialog.Header className='sr-only'>
41        <Dialog.Title>{title}</Dialog.Title>
42        <Dialog.Description>{description}</Dialog.Description>
43      </Dialog.Header>
44      <Dialog.Content
45        className={cn('overflow-hidden p-0', className)}
46        showCloseButton={showCloseButton}
47      >
48        <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]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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'>
49          {children}
50        </Command>
51      </Dialog.Content>
52    </Dialog>
53  );
54}
55 
56function CommandInput({
57  className,
58  ...props
59}: ComponentProps<typeof CommandPrimitive.Input>) {
60  return (
61    <div
62      className='flex h-9 items-center gap-2 border-b px-3'
63      data-slot='command-input-wrapper'
64    >
65      <SearchIcon className='size-4 shrink-0 opacity-50' />
66      <CommandPrimitive.Input
67        className={cn(
68          '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',
69          className,
70        )}
71        data-slot='command-input'
72        {...props}
73      />
74    </div>
75  );
76}
77 
78function CommandList({
79  className,
80  ...props
81}: ComponentProps<typeof CommandPrimitive.List>) {
82  return (
83    <CommandPrimitive.List
84// … truncated