Command

1"use client";
2 
3import { MagnifyingGlassIcon } from "@phosphor-icons/react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { Command as CommandPrimitive } from "cmdk";
6import type { Dialog as DialogPrimitive } from "radix-ui";
7import * as React from "react";
8import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
9import { cn } from "@/lib/utils";
10import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
11 
12/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
13const commandVariants = cva("flex h-full w-full flex-col overflow-hidden rounded-xl", {
14  variants: {
15    variant: {
16      default: "bg-popover text-popover-foreground",
17      glass: "text-foreground",
18    },
19  },
20  defaultVariants: {
21    variant: "glass",
22  },
23});
24 
25/* Role: bordered + veiled adaptive glass. */
26const ROLE = {
27  border: true,
28  veil: true,
29};
30 
31const Command = React.forwardRef<
32  React.ElementRef<typeof CommandPrimitive>,
33  React.ComponentPropsWithoutRef<typeof CommandPrimitive> & VariantProps<typeof commandVariants> & MaterialAxisProps
34>(({ className, variant = "glass", ...props }, ref) => {
35  const [axes, rest] = splitAxisProps(props);
36  const m = materialSurface(variant === "default" ? null : ROLE, axes);
37 
38  return (
39    <CommandPrimitive
40      ref={ref}
41      data-slot="command"
42      data-material={m?.["data-material"]}
43      className={cn(
44        m?.className,
45        commandVariants({
46          variant,
47        }),
48        className,
49      )}
50      {...rest}
51    />
52  );
53});
54Command.displayName = CommandPrimitive.displayName;
55 
56const CommandDialog = ({
57  title = "Command Palette",
58  description = "Search for a command to run...",
59  children,
60  className,
61  showCloseButton = true,
62  ...props
63}: DialogPrimitive.DialogProps & {
64  title?: string;
65  description?: string;
66  className?: string;
67  showCloseButton?: boolean;
68}) => {
69  return (
70    <Dialog {...props}>
71      {/* Radix a11y: DialogContent requires a title + description. */}
72      <DialogHeader className="sr-only">
73        <DialogTitle>{title}</DialogTitle>
74        <DialogDescription>{description}</DialogDescription>
75      </DialogHeader>
76      <DialogContent className={cn("overflow-hidden p-0 shadow-lg", className)} showCloseButton={showCloseButton}>
77// … truncated