Command

1"use client";
2 
3import "./command.css";
4import { Dialog as BaseDialog } from "@base-ui/react/dialog";
5import React, { useState } from "react";
6import { cn } from "tailwind-variants";
7 
8import { CommandContext, useCommandContext } from "./command.context";
9import { commandVariants, type CommandVariants } from "./command.variants";
10 
11export type CommandRootProps = CommandVariants &
12  React.HTMLAttributes<HTMLDivElement> & {
13    value?: string;
14    onValueChange?: (value: string) => void;
15  };
16 
17export const CommandRoot = ({
18  children,
19  className,
20  size,
21  value,
22  onValueChange,
23  ...props
24}: CommandRootProps) => {
25  const [internalSearch, setInternalSearch] = useState("");
26  const search = value !== undefined ? value : internalSearch;
27  const setSearch = onValueChange ?? setInternalSearch;
28 
29  const slots = commandVariants({ size });
30 
31  return (
32    <CommandContext.Provider value={{ slots, search, setSearch }}>
33      <div className={cn(slots.root(), className)} {...props}>
34        {children}
35      </div>
36    </CommandContext.Provider>
37  );
38};
39 
40export type CommandDialogProps = React.ComponentProps<typeof BaseDialog.Root> & CommandRootProps;
41 
42export const CommandDialog = ({
43  children,
44  open,
45  onOpenChange,
46  defaultOpen,
47  className,
48  size,
49  ...props
50}: CommandDialogProps) => {
51  const slots = commandVariants({ size });
52 
53  return (
54    <BaseDialog.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
55      <BaseDialog.Portal>
56        <BaseDialog.Backdrop className={slots.dialogBackdrop()} />
57        <BaseDialog.Popup className={cn(slots.dialogPopup(), className)}>
58          <CommandRoot size={size} {...props}>
59            {children}
60          </CommandRoot>
61        </BaseDialog.Popup>
62      </BaseDialog.Portal>
63    </BaseDialog.Root>
64  );
65};
66 
67export type CommandInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
68  value?: string;
69  onValueChange?: (value: string) => void;
70};
71 
72export const CommandInput = ({ className, value, onValueChange, ...props }: CommandInputProps) => {
73  const { slots, search, setSearch } = useCommandContext();
74 
75  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
76    setSearch(e.target.value);
77    onValueChange?.(e.target.value);
78  };
79 
80  return (
81    <div className={slots.inputWrapper()}>
82      <svg
83        className="mr-2.5 h-4 w-4 shrink-0 text-muted-foreground"
84        fill="none"
85        stroke="currentColor"
86        strokeWidth="2"
87// … truncated