Command

1import type { Component, ComponentProps, ParentProps, VoidProps } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { DialogRootProps } from "@kobalte/core/dialog"
5import * as CommandPrimitive from "cmdk-solid"
6 
7import { cn } from "~/lib/utils"
8import { Dialog, DialogContent } from "~/registry/ui/dialog"
9 
10const Command: Component<ParentProps<CommandPrimitive.CommandRootProps>> = (props) => {
11  const [local, others] = splitProps(props, ["class"])
12 
13  return (
14    <CommandPrimitive.CommandRoot
15      class={cn(
16        "flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground blur-none",
17        local.class
18      )}
19      {...others}
20    />
21  )
22}
23 
24const CommandDialog: Component<ParentProps<DialogRootProps>> = (props) => {
25  const [local, others] = splitProps(props, ["children"])
26 
27  return (
28    <Dialog {...others}>
29      <DialogContent class="overflow-hidden p-0">
30        <Command class="[&_[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-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
31          {local.children}
32        </Command>
33      </DialogContent>
34    </Dialog>
35  )
36}
37 
38const CommandInput: Component<VoidProps<CommandPrimitive.CommandInputProps>> = (props) => {
39  const [local, others] = splitProps(props, ["class"])
40 
41  return (
42    <div class="flex items-center border-b px-3" cmdk-input-wrapper="">
43      <svg
44        xmlns="http://www.w3.org/2000/svg"
45        viewBox="0 0 24 24"
46        fill="none"
47        stroke="currentColor"
48        stroke-width="2"
49        stroke-linecap="round"
50        stroke-linejoin="round"
51        class="mr-2 size-4 shrink-0 opacity-50"
52      >
53        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
54        <path d="M21 21l-6 -6" />
55      </svg>
56      <CommandPrimitive.CommandInput
57        class={cn(
58          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
59          local.class
60        )}
61        {...others}
62      />
63    </div>
64  )
65}
66 
67const CommandList: Component<ParentProps<CommandPrimitive.CommandListProps>> = (props) => {
68  const [local, others] = splitProps(props, ["class"])
69 
70  return (
71    <CommandPrimitive.CommandList
72// … truncated