{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "title": "Command",
  "description": "A fast, keyboard-first list of commands and results with fuzzy search — inline, or as a ⌘K palette on top of the page.",
  "dependencies": [
    "cmdk",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://www.prfct.dev/r/utils.json",
    "https://www.prfct.dev/r/dialog.json",
    "https://www.prfct.dev/r/kbd.json",
    "https://www.prfct.dev/r/locale.json"
  ],
  "files": [
    {
      "path": "components/ui/command.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon, SearchIcon } from \"lucide-react\"\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { useLocale } from \"@/components/ui/locale\"\n\n/**\n * cmdk scrolls the selected item (and its group heading) into view after\n * every render with `Element.scrollIntoView`, which also scrolls the page —\n * an inline Command below the fold would yank the page on load. Scope that\n * scrolling to the list itself.\n */\nfunction containScroll(element: HTMLElement | null) {\n  if (!element) return\n  element.scrollIntoView = () => {\n    const list = element.closest<HTMLElement>(\"[cmdk-list]\")\n    if (!list) return\n    const inset =\n      Number.parseFloat(getComputedStyle(list).scrollPaddingTop) || 0\n    const item = element.getBoundingClientRect()\n    const box = list.getBoundingClientRect()\n    if (item.top < box.top + inset) {\n      list.scrollTop -= box.top + inset - item.top\n    } else if (item.bottom > box.bottom - inset) {\n      list.scrollTop += item.bottom - (box.bottom - inset)\n    }\n  }\n}\n\nfunction assignRef<T>(ref: React.Ref<T> | undefined, value: T | null) {\n  if (typeof ref === \"function\") ref(value)\n  else if (ref) (ref as React.RefObject<T | null>).current = value\n}\n\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-xl bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title,\n  description,\n  children,\n  className,\n  showCloseButton = false,\n  commandProps,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  /** Props for the inner `Command`, e.g. `shouldFilter` or `loop`. */\n  commandProps?: React.ComponentProps<typeof Command>\n  children: React.ReactNode\n}) {\n  // Palette parts go straight inside. A `Command` of your own (the shadcn\n  // pattern) becomes the root instead of nesting inside a second one.\n  const { messages } = useLocale()\n  const ownRoot = React.Children.toArray(children).some(\n    (child) => React.isValidElement(child) && child.type === Command\n  )\n\n  return (\n    <Dialog {...props}>\n      <DialogContent\n        className={cn(\n          // Anchored high on the page so results grow downward without jumping.\n          \"top-[12vh] bottom-auto max-w-xl gap-0 overflow-hidden rounded-2xl p-0 sm:top-[18vh]\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        <DialogHeader className=\"sr-only\">\n          <DialogTitle>{title ?? messages.commandPalette}</DialogTitle>\n          <DialogDescription>\n            {description ?? messages.commandDescription}\n          </DialogDescription>\n        </DialogHeader>\n        {ownRoot ? (\n          children\n        ) : (\n          <Command\n            {...commandProps}\n            className={cn(\n              \"rounded-none bg-transparent\",\n              commandProps?.className\n            )}\n          >\n            {children}\n          </Command>\n        )}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-12 shrink-0 items-center gap-2.5 border-b px-4\"\n    >\n      <SearchIcon\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 text-muted-foreground\"\n      />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"h-full w-full bg-transparent text-[0.9375rem] text-foreground outline-hidden placeholder:text-muted-foreground 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-[min(24rem,60dvh)] scroll-py-2 scrollbar-thin overflow-x-hidden overflow-y-auto overscroll-contain p-2 outline-none\",\n        \"h-[calc(var(--cmdk-list-height)+1rem)] transition-[height] duration-base ease-standard\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Shown when nothing matches. A listbox with no options is invalid, so the\n * message is exposed as a disabled option — the pattern GOV.UK's accessible\n * autocomplete uses: screen readers reach it and hear \"No results\".\n */\nfunction CommandEmpty({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty asChild {...props}>\n      <div\n        data-slot=\"command-empty\"\n        role=\"option\"\n        aria-disabled=\"true\"\n        aria-selected=\"false\"\n        className={cn(\n          \"py-10 text-center text-sm text-muted-foreground\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </CommandPrimitive.Empty>\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ref,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      containScroll(\n        node?.querySelector<HTMLElement>(\"[cmdk-group-heading]\") ?? null\n      )\n      assignRef(ref, node)\n    },\n    [ref]\n  )\n\n  return (\n    <CommandPrimitive.Group\n      ref={setRef}\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden text-foreground not-first:mt-2\",\n        \"**:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:pt-1 **:[[cmdk-group-heading]]:pb-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\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      // A listbox may only own options and groups; the line is decoration.\n      aria-hidden=\"true\"\n      className={cn(\"-mx-2 my-2 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ref,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  const setRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      containScroll(node)\n      assignRef(ref, node)\n    },\n    [ref]\n  )\n\n  return (\n    <CommandPrimitive.Item\n      ref={setRef}\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex min-h-9 cursor-default items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-foreground outline-hidden select-none\",\n        \"data-selected:bg-accent data-selected:text-accent-foreground\",\n        \"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-selected:[&_svg:not([class*='text-'])]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <CheckIcon className=\"ml-auto hidden group-data-[checked=true]/command-item:block\" />\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 flex items-center gap-1 text-xs tracking-wide text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Keyboard hints shown along the bottom edge of a command palette. */\nfunction CommandFooter({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const { messages } = useLocale()\n  return (\n    <div\n      data-slot=\"command-footer\"\n      className={cn(\n        \"flex h-10 shrink-0 items-center gap-4 border-t bg-surface px-4 text-xs text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <span className=\"flex items-center gap-1.5\">\n            <Kbd>↑</Kbd>\n            <Kbd>↓</Kbd> {messages.navigateHint}\n          </span>\n          <span className=\"flex items-center gap-1.5\">\n            <Kbd>↵</Kbd> {messages.selectHint}\n          </span>\n          <span className=\"ml-auto flex items-center gap-1.5\">\n            <Kbd>esc</Kbd> {messages.closeHint}\n          </span>\n        </>\n      )}\n    </div>\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}