command

1import type { DialogRootProps } from "@kobalte/core/dialog";
2import { cn } from "~/lib/utils.ts";
3import IconCheck from "~icons/lucide/check";
4import IconSearch from "~icons/lucide/search";
5 
6import * as CommandPrimitive from "cmdk-solid";
7import type {
8  Component,
9  ComponentProps,
10  ParentProps,
11  VoidProps,
12} from "solid-js";
13 
14import { mergeProps, splitProps } from "solid-js";
15import {
16  Dialog,
17  DialogContent,
18  DialogDescription,
19  DialogHeader,
20  DialogTitle,
21} from "./dialog.tsx";
22import { InputGroup, InputGroupAddon } from "./input-group.tsx";
23 
24const Command: Component<ParentProps<CommandPrimitive.CommandRootProps>> = (
25  props,
26) => {
27  const [local, others] = splitProps(props, ["class"]);
28 
29  return (
30    <CommandPrimitive.CommandRoot
31      data-slot="command"
32      class={cn(
33        "bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden",
34        local.class,
35      )}
36      {...others}
37    />
38  );
39};
40 
41type CommandDialogProps = ParentProps<DialogRootProps> & {
42  title?: string;
43  description?: string;
44  class?: string;
45  showCloseButton?: boolean;
46};
47 
48const CommandDialog: Component<CommandDialogProps> = (rawProps) => {
49  const props = mergeProps(
50    {
51      title: "Command Palette",
52      description: "Search for a command to run...",
53      showCloseButton: false,
54    },
55    rawProps,
56  );
57  const [local, others] = splitProps(props, [
58    "title",
59    "description",
60    "children",
61    "class",
62    "showCloseButton",
63  ]);
64 
65  return (
66    <Dialog {...others}>
67      <DialogHeader class="sr-only">
68        <DialogTitle>{local.title}</DialogTitle>
69        <DialogDescription>{local.description}</DialogDescription>
70      </DialogHeader>
71      <DialogContent
72        class={cn(
73          "rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0",
74          local.class,
75        )}
76        showCloseButton={local.showCloseButton}
77      >
78        {local.children}
79      </DialogContent>
80    </Dialog>
81  );
82};
83 
84const CommandInput: Component<VoidProps<CommandPrimitive.CommandInputProps>> = (
85  props,
86) => {
87  const [local, others] = splitProps(props, ["class"]);
88 
89  return (
90    <div data-slot="command-input-wrapper" class="p-1 pb-0">
91      <InputGroup class="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
92        <CommandPrimitive.CommandInput
93          data-slot="command-input"
94          class={cn(
95// … truncated