{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A command palette in the style of Spotlight, built on cmdk.",
  "dependencies": [
    "cmdk",
    "lucide-react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/dialog"
  ],
  "files": [
    {
      "path": "registry/macos/ui/command.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { CheckIcon, SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/macos/ui/dialog\"\n\n// cmdk keeps the highlighted item in view with scrollIntoView, which also\n// scrolls the page when the palette sits below the fold (it runs on mount).\n// Items and group headings scroll only their list instead.\nfunction scrollInList(node: HTMLElement | null | undefined) {\n  if (!node) return\n  node.scrollIntoView = () => {\n    const list = node.closest<HTMLElement>(\"[cmdk-list]\")\n    if (!list) return\n    const inset = parseFloat(getComputedStyle(list).scrollPaddingTop) || 0\n    const item = node.getBoundingClientRect()\n    const box = list.getBoundingClientRect()\n    if (item.top < box.top + inset) list.scrollTop -= box.top + inset - item.top\n    else if (item.bottom > box.bottom - inset) list.scrollTop += item.bottom - box.bottom + inset\n  }\n}\n\nfunction listScrollRef(ref: React.Ref<HTMLDivElement> | undefined, target = (node: HTMLDivElement): HTMLElement | null => node) {\n  return (node: HTMLDivElement | null) => {\n    if (node) scrollInList(target(node))\n    if (typeof ref === \"function\") ref(node)\n    else if (ref) ref.current = node\n  }\n}\n\n// A command palette in the style of Spotlight: a large search field over a\n// list of results; the highlighted one is filled with the accent color.\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-[16px] bg-mac-window text-mac-body text-mac-label shadow-[0_0_0_1px_var(--mac-grid)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-[22%] translate-y-0 gap-0 overflow-hidden rounded-[26px] p-0 sm:max-w-[640px] [&_[data-slot=command]]:rounded-none [&_[data-slot=command]]:bg-transparent [&_[data-slot=command]]:shadow-none\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"flex h-12 shrink-0 items-center gap-2.5 border-b border-mac-grid px-4\">\n      <SearchIcon className=\"size-[18px] shrink-0 text-mac-label-secondary\" strokeWidth={2.25} />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"h-full w-full bg-transparent text-[17px] text-mac-label outline-hidden placeholder:text-mac-label-tertiary disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"max-h-80 scroll-py-1.5 overflow-x-hidden overflow-y-auto p-1.5 outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-mac-body text-mac-label-secondary\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ref,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      ref={listScrollRef(ref, (node) => node.querySelector<HTMLElement>(\"[cmdk-group-heading]\"))}\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden text-mac-label **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:pt-2 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:text-mac-subheadline **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:text-mac-label-secondary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"mx-2.5 my-1.5 h-px bg-mac-grid\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ref,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      ref={listScrollRef(ref)}\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex h-8 cursor-default items-center gap-2.5 rounded-[8px] px-2.5 text-mac-body outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-mac-accent data-[selected=true]:text-white [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-mac-label-secondary data-[selected=true]:*:[svg]:text-white\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <CheckIcon\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\" />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-mac-body tracking-wider text-mac-label-tertiary group-data-[selected=true]/command-item:text-white/75\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}