{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "type": "registry:ui",
  "title": "Command",
  "description": "A searchable list of actions, built on cmdk. Use it inline, or as a ⌘K palette with CommandDialog.",
  "dependencies": [
    "cmdk@^1.1.1"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/dialog.json",
    "https://junco.madebytobi.com/r/icons.json",
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/command.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { SearchIcon } from \"@/lib/junco/icons\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\n\n/**\n * A searchable list of actions, built on cmdk. Use it inline, or as a ⌘K palette with CommandDialog:\n *\n *   <CommandDialog>\n *     <CommandInput placeholder=\"Search…\" />\n *     <CommandList>\n *       <CommandEmpty>No results.</CommandEmpty>\n *       <CommandGroup heading=\"Pages\">\n *         <CommandItem onSelect={() => go(\"/settings\")}>Settings<CommandShortcut>⌘,</CommandShortcut></CommandItem>\n *       </CommandGroup>\n *     </CommandList>\n *   </CommandDialog>\n */\nexport const Command = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive\n    ref={ref}\n    className={cn(\"flex size-full flex-col overflow-hidden rounded-card bg-popover text-popover-foreground\", className)}\n    {...props}\n  />\n));\nCommand.displayName = \"Command\";\n\nexport const CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <div className=\"flex items-center gap-2 border-b border-border px-3\" data-slot=\"command-input-wrapper\">\n    <SearchIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={cn(\n        \"flex h-11 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  </div>\n));\nCommandInput.displayName = \"CommandInput\";\n\nexport const CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List\n    ref={ref}\n    className={cn(\"max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1\", className)}\n    {...props}\n  />\n));\nCommandList.displayName = \"CommandList\";\n\nexport const CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Empty ref={ref} className={cn(\"py-8 text-center text-sm text-muted-foreground\", className)} {...props} />\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\nexport const CommandLoading = CommandPrimitive.Loading;\n\nexport const CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={cn(\n      \"overflow-hidden text-foreground\",\n      \"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-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));\nCommandGroup.displayName = \"CommandGroup\";\n\nexport const CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator ref={ref} className={cn(\"-mx-1 my-1 h-px bg-border\", className)} {...props} />\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\nexport const CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"group relative flex h-9 cursor-default items-center gap-2 rounded-control px-2 text-sm outline-none select-none\",\n      \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\",\n      \"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n      \"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nCommandItem.displayName = \"CommandItem\";\n\nexport function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return <span className={cn(\"ml-auto font-mono text-xs tracking-wide text-muted-foreground\", className)} {...props} />;\n}\n\nexport interface CommandDialogProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive> {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Letter that opens the palette with ⌘ (Mac) or Ctrl. Default \"k\". Pass null to turn the shortcut off. */\n  shortcut?: string | null;\n  /** Read by screen readers. Default \"Command palette\". */\n  title?: string;\n  description?: string;\n  classNames?: { content?: string; command?: string };\n}\n\nexport function CommandDialog({\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  shortcut = \"k\",\n  title = \"Command palette\",\n  description = \"Search for a command to run.\",\n  className,\n  classNames,\n  children,\n  ...props\n}: CommandDialogProps) {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  const openRef = React.useRef(open);\n  openRef.current = open;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolled(next);\n      onOpenChange?.(next);\n    },\n    [openProp, onOpenChange],\n  );\n\n  React.useEffect(() => {\n    if (!shortcut) return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key.toLowerCase() === shortcut.toLowerCase() && (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey) {\n        e.preventDefault();\n        setOpen(!openRef.current);\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [shortcut, setOpen]);\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogContent\n        showClose={false}\n        className={cn(\"top-[15dvh] translate-y-0 gap-0 overflow-hidden p-0 sm:top-[20dvh]\", classNames?.content)}\n      >\n        <DialogTitle isHidden>{title}</DialogTitle>\n        <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n        <Command className={cn(classNames?.command, className)} {...props}>\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/command",
  "meta": {
    "hash": "ad048739bd4d0f17",
    "source": "packages/react/src/components/command.tsx",
    "exports": [
      "Command",
      "CommandInput",
      "CommandList",
      "CommandEmpty",
      "CommandLoading",
      "CommandGroup",
      "CommandSeparator",
      "CommandItem",
      "CommandShortcut",
      "CommandDialogProps",
      "CommandDialog"
    ],
    "props": {
      "CommandDialog": {
        "extends": "React.ComponentPropsWithoutRef<typeof CommandPrimitive>",
        "props": [
          {
            "name": "open",
            "optional": true,
            "type": "boolean"
          },
          {
            "name": "defaultOpen",
            "optional": true,
            "type": "boolean"
          },
          {
            "name": "onOpenChange",
            "optional": true,
            "type": "(open: boolean) => void"
          },
          {
            "name": "shortcut",
            "optional": true,
            "type": "string | null",
            "description": "Letter that opens the palette with ⌘ (Mac) or Ctrl. Default \"k\". Pass null to turn the shortcut off."
          },
          {
            "name": "title",
            "optional": true,
            "type": "string",
            "description": "Read by screen readers. Default \"Command palette\"."
          },
          {
            "name": "description",
            "optional": true,
            "type": "string"
          },
          {
            "name": "classNames",
            "optional": true,
            "type": "{ content?: string; command?: string }"
          }
        ]
      }
    },
    "usage": "<CommandDialog>\n  <CommandInput placeholder=\"Search…\" />\n  <CommandList>\n    <CommandEmpty>No results.</CommandEmpty>\n    <CommandGroup heading=\"Pages\">\n      <CommandItem onSelect={() => go(\"/settings\")}>Settings<CommandShortcut>⌘,</CommandShortcut></CommandItem>\n    </CommandGroup>\n  </CommandList>\n</CommandDialog>",
    "docsUrl": "https://junco.madebytobi.com/docs/components/command"
  }
}