Command Palette

1"use client";
2 
3import * as React from "react";
4import * as DialogPrimitive from "@radix-ui/react-dialog";
5import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
6import { Search, X } from "lucide-react";
7 
8import { cn } from "@/lib/utils";
9import {
10  floatingItemVariants,
11  overlaySurfaceVariants,
12  overlayVariants,
13  type FloatingItemProps,
14  type OverlayProps,
15  type OverlaySurfaceProps,
16} from "@/components/ui/recipes";
17 
18/* ================================================================== */
19/*  COMMAND PALETTE — Cmd+K global search / command overlay            */
20/* ================================================================== */
21 
22/* ── Context ──────────────────────────────────────────────────────── */
23 
24interface CommandPaletteContextValue {
25  search: string;
26  setSearch: React.Dispatch<React.SetStateAction<string>>;
27  selectedItemId: string | null;
28  setSelectedItemId: React.Dispatch<React.SetStateAction<string | null>>;
29}
30 
31const CommandPaletteCtx = React.createContext<CommandPaletteContextValue>({
32  search: "",
33  setSearch: () => {},
34  selectedItemId: null,
35  setSelectedItemId: () => {},
36});
37 
38/* ── Root ─────────────────────────────────────────────────────────── */
39 
40interface CommandPaletteProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
41  children: React.ReactNode;
42}
43 
44function CommandPalette({ children, ...props }: CommandPaletteProps) {
45  const [search, setSearch] = React.useState("");
46  const [selectedItemId, setSelectedItemId] = React.useState<string | null>(null);
47 
48  // Reset search when closed
49  const handleOpenChange = (open: boolean) => {
50    if (!open) {
51      setSearch("");
52      setSelectedItemId(null);
53    }
54    props.onOpenChange?.(open);
55  };
56 
57  return (
58    <CommandPaletteCtx.Provider value={{ search, setSearch, selectedItemId, setSelectedItemId }}>
59      <DialogPrimitive.Root {...props} onOpenChange={handleOpenChange}>
60        {children}
61      </DialogPrimitive.Root>
62    </CommandPaletteCtx.Provider>
63  );
64}
65CommandPalette.displayName = "CommandPalette";
66 
67/* ── Trigger ──────────────────────────────────────────────────────── */
68 
69// … truncated