Command

1"use client";2​3import * as React from "react";4import { Command as CommandPrimitive } from "cmdk";5import { Dialog as DialogPrimitive } from "radix-ui";6import { MagnifyingGlassIcon } from "@phosphor-icons/react/ssr";7​8import { usePortalContainer } from "@/lib/surface";9import { cn } from "@/lib/utils";10​11// A command menu, extrapolated from the console (Figma 427:2715): a white panel with 8px corners; the search row is12// 48px with a 20px magnifying glass in muted purple and 14px ink text over the rail's hairline; groups open with 13px13// headings in the label purple ("Channels"), items are 36px rows with 8px corners, a 20px glyph in the action-glyph14// purple and the lilac under the selected row; shortcuts are 12px muted. CommandDialog puts it in the console's dialog15// (16px corners, the blurred ink-tinted page) and opens without motion: it is summoned by keyboard many times a day.16function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {17  return <CommandPrimitive data-slot="command" className={cn("flex size-full flex-col overflow-hidden rounded-control bg-surface text-fg", className)} {...props} />;18}19​20function CommandDialog({21  title = "Command menu",22  description = "Search for a command to run",23  children,24  className,25  showCloseButton = false,26  ...props27}: React.ComponentProps<typeof DialogPrimitive.Root> & { title?: string; description?: string; className?: string; showCloseButton?: boolean }) {28  const container = usePortalContainer();29  return (30    <DialogPrimitive.Root data-slot="command-dialog" {...props}>31      <DialogPrimitive.Portal container={container}>32        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-scrim backdrop-blur-[var(--ds-blur-scrim)]" />33        <DialogPrimitive.Content34          className={cn("fixed top-[18dvh] left-1/2 z-50 w-[calc(100%-2rem)] max-w-140 -translate-x-1/2 overflow-hidden rounded-dialog bg-surface p-1.5 text-fg outline-none", className)}35          aria-describedby={undefined}36        >37          <DialogPrimitive.Title className="sr-only">{title}</DialogPrimitive.Title>38          <DialogPrimitive.Description className="sr-only">{description}</DialogPrimitive.Description>39          <Command className="rounded-control [&_[data-slot=command-list]]:max-h-96">{children}</Command>40          {showCloseButton && <DialogPrimitive.Close className="sr-only">Close</DialogPrimitive.Close>}41        </DialogPrimitive.Content>42      </DialogPrimitive.Portal>43    </DialogPrimitive.Root>44  );45}46​47function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {48  return (49    <div data-slot="command-input-wrapper" className="flex h-12 shrink-0 items-center gap-2.5 border-b border-line-subtle px-3.5">50      <MagnifyingGlassIcon aria-hidden className="size-5.5 shrink-0 text-fg-muted" />51      <CommandPrimitive.Input52        data-slot="command-input"53        className={cn("h-full w-full min-w-0 bg-transparent font-sans text-body leading-tight text-fg outline-none placeholder:text-fg-subtle disabled:cursor-not-allowed disabled:opacity-50", className)}54        {...props}55      />56    </div>57  );58}59​60function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {61  return <CommandPrimitive.List data-slot="command-list" className={cn("max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto overscroll-contain p-1", className)} {...props} />;62}63​64function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {65  return <CommandPrimitive.Empty data-slot="command-empty" className={cn("py-8 text-center text-body text-fg-muted", className)} {...props} />;66}67​68function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {69  return (70    <CommandPrimitive.Group71      data-slot="command-group"72      className={cn("overflow-hidden text-fg [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-body-sm [&_[cmdk-group-heading]]:leading-tight [&_[cmdk-group-heading]]:text-fg-label", className)}73      {...props}74    />75  );76}77​78function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {79  return <CommandPrimitive.Separator data-slot="command-separator" className={cn("-mx-1 my-1 h-px bg-line-subtle", className)} {...props} />;80}81​82function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {83  return (84    <CommandPrimitive.Item85      data-slot="command-item"86      className={cn(87        "relative flex h-9 cursor-default items-center gap-2.5 rounded-control px-2.5 font-sans text-body leading-tight text-fg outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-subtle [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5.5 [&_svg:not([class*='text-'])]:text-icon-secondary",88        className,89      )}90      {...props}91    />92  );93}94​95function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {96  return <span data-slot="command-shortcut" className={cn("ml-auto pl-4 font-sans text-caption text-fg-muted", className)} {...props} />;97}98​99export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };