nanocode/RetroUI/public/r/command.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command",
  "type": "registry:component",
  "title": "Command",
  "description": "Fast, keyboard-first command palette powered by cmdk.",
  "dependencies": [
    "cmdk",
    "@radix-ui/react-dialog",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/retroui/Command.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Dialog } from \"@/components/retroui/Dialog\";\nimport { type DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Check, LucideIcon, Search } from \"lucide-react\";\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        \"flex h-full w-full flex-col overflow-hidden rounded bg-background text-foreground border-border shadow-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype CommandDialogProps = DialogProps & { className?: string };\n\nconst CommandDialog = ({\n  children,\n  className,\n  ...props\n}: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content\n        className={cn(\n          \"overflow-hidden p-0 shadow-lg rounded w-full max-w-md\",\n          className,\n        )}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      className=\"flex items-center border-border border-b px-3\"\n      cmdk-input-wrapper=\"\"\n      data-slot=\"command-input\"\n    >\n      <Search className=\"me-2 h-4 w-4 shrink-0 opacity-50 text-foreground\" />\n      <CommandPrimitive.Input\n        className={cn(\n          \"flex h-11 w-full rounded bg-transparent py-3 text-sm outline-hidden text-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-body\",\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-[400px] overflow-auto overscroll-contain transition-[height]  h-[calc(min(300px,var(--cmdk-list-height)))] bg-background\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm text-muted-foreground font-body\"\n      {...props}\n    />\n  );\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground [&_[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 font-body\",\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(\"h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex text-foreground cursor-pointer gap-2 select-none items-center rounded px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground transition-all font-body\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ms-auto text-xs tracking-widest text-muted-foreground font-body\",\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\ninterface CommandCheckProps {\n  icon?: LucideIcon;\n  className?: string;\n}\n\nfunction CommandCheck({\n  icon: Icon = Check,\n  className,\n  ...props\n}: CommandCheckProps) {\n  return (\n    <Icon\n      data-slot=\"command-check\"\n      data-check=\"true\"\n      className={cn(\"size-4 ms-auto text-primary\", className)}\n      {...props}\n    />\n  );\n}\n\nconst CommandComponent = Object.assign(Command, {\n  Check: CommandCheck,\n  Dialog: CommandDialog,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Input: CommandInput,\n  Item: CommandItem,\n  List: CommandList,\n  Separator: CommandSeparator,\n  Shortcut: CommandShortcut,\n});\n\nexport { CommandComponent as Command };\n",
      "type": "registry:component",
      "target": "components/retroui/Command.tsx"
    }
  ]
}