{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-command",
  "type": "registry:ui",
  "title": "Responsive Command",
  "description": "A responsive command palette component that automatically adapts to screen size - drawer on mobile, modal on desktop.",
  "dependencies": [
    "cmdk",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/cmdk/responsive-command.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { Command as CommandPrimitive } from \"cmdk\";\r\n\r\nimport { SearchIcon } from \"lucide-react\";\r\n\r\nimport {\r\n  ResponsiveDialog,\r\n  ResponsiveDialogContent,\r\n  ResponsiveDialogDescription,\r\n  ResponsiveDialogHeader,\r\n  ResponsiveDialogTitle,\r\n  useResponsiveDialog,\r\n} from \"@/components/ui/revola\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\nconst ResponsiveCommand = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <CommandPrimitive\r\n      ref={ref}\r\n      className={cn(\"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nResponsiveCommand.displayName = CommandPrimitive.displayName;\r\n\r\nconst ResponsiveCommandDialog = ({\r\n  title = \"Command Palette\",\r\n  description = \"Search for a command to run...\",\r\n  children,\r\n  className,\r\n  showCloseButton = true,\r\n  ...props\r\n}: React.ComponentPropsWithoutRef<typeof ResponsiveDialog> & {\r\n  title?: string;\r\n  description?: string;\r\n  className?: string;\r\n  showCloseButton?: boolean;\r\n}) => {\r\n  return (\r\n    <ResponsiveDialog shouldScaleBackground={false} {...props}>\r\n      <ResponsiveDialogContent\r\n        showCloseButton={showCloseButton}\r\n        className={cn(\"mx-auto overflow-hidden bg-popover sm:max-w-lg [&>button:last-child]:hidden\", className)}\r\n      >\r\n        <ResponsiveDialogHeader className=\"sr-only\">\r\n          <ResponsiveDialogTitle>{title}</ResponsiveDialogTitle>\r\n          <ResponsiveDialogDescription>{description}</ResponsiveDialogDescription>\r\n        </ResponsiveDialogHeader>\r\n        <ResponsiveCommand className=\"max-h-[100svh] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2\">\r\n          {children}\r\n        </ResponsiveCommand>\r\n      </ResponsiveDialogContent>\r\n    </ResponsiveDialog>\r\n  );\r\n};\r\nResponsiveCommandDialog.displayName = \"ResponsiveCommandDialog\";\r\n\r\nconst ResponsiveCommandInput = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive.Input>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <div className=\"flex items-center border-b border-input px-5\" cmdk-input-wrapper=\"\">\r\n      <SearchIcon size={20} className=\"me-3 text-muted-foreground/80\" />\r\n      <CommandPrimitive.Input\r\n        ref={ref}\r\n        className={cn(\r\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground/70 disabled:cursor-not-allowed disabled:opacity-50\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  );\r\n});\r\nResponsiveCommandInput.displayName = CommandPrimitive.Input.displayName;\r\n\r\nconst ResponsiveCommandList = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive.List>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\r\n>(({ className, ...props }, ref) => {\r\n  let direction: \"top\" | \"bottom\" | \"left\" | \"right\" | undefined;\r\n  let onlyDialog = false;\r\n\r\n  try {\r\n    const context = useResponsiveDialog();\r\n    direction = context.direction;\r\n    onlyDialog = context.onlyDialog || false;\r\n  } catch {\r\n    direction = undefined;\r\n    onlyDialog = false;\r\n  }\r\n\r\n  return (\r\n    <CommandPrimitive.List\r\n      ref={ref}\r\n      className={cn(\r\n        \"flex-1 overflow-y-auto overflow-x-hidden sm:max-h-[320px]\",\r\n        direction && \"max-h-[calc(100svh-5rem)]\",\r\n        onlyDialog && \"max-h-[320px]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nResponsiveCommandList.displayName = CommandPrimitive.List.displayName;\r\n\r\nconst ResponsiveCommandLoading = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive.Loading>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>\r\n>(({ className, ...props }, ref) => (\r\n  <CommandPrimitive.Loading ref={ref} className={cn(\"py-6 text-center text-sm\", className)} {...props} />\r\n));\r\n\r\nResponsiveCommandLoading.displayName = CommandPrimitive.Loading.displayName;\r\n\r\nconst ResponsiveCommandEmpty = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive.Empty>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\r\n>(({ ...props }, ref) => {\r\n  return <CommandPrimitive.Empty ref={ref} className=\"py-6 text-center text-sm\" {...props} />;\r\n});\r\nResponsiveCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\r\n\r\nconst ResponsiveCommandGroup = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive.Group>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <CommandPrimitive.Group\r\n      className={cn(\r\n        \"overflow-hidden p-2 text-foreground [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nResponsiveCommandGroup.displayName = CommandPrimitive.Group.displayName;\r\n\r\nconst ResponsiveCommandSeparator = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\r\n>(({ className, ...props }, ref) => {\r\n  return <CommandPrimitive.Separator ref={ref} className={cn(\"-mx-1 h-px bg-border\", className)} {...props} />;\r\n});\r\nResponsiveCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\r\n\r\nconst ResponsiveCommandItem = React.forwardRef<\r\n  React.ComponentRef<typeof CommandPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <CommandPrimitive.Item\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex cursor-default select-none items-center gap-3 rounded-md px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\nResponsiveCommandItem.displayName = CommandPrimitive.Item.displayName;\r\n\r\nconst ResponsiveCommandShortcut = ({ className, ...props }: React.ComponentProps<\"kbd\">) => {\r\n  return (\r\n    <kbd\r\n      className={cn(\r\n        \"-me-1 ms-auto inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nexport {\r\n  ResponsiveCommand,\r\n  ResponsiveCommandDialog,\r\n  ResponsiveCommandEmpty,\r\n  ResponsiveCommandGroup,\r\n  ResponsiveCommandInput,\r\n  ResponsiveCommandItem,\r\n  ResponsiveCommandList,\r\n  ResponsiveCommandLoading,\r\n  ResponsiveCommandSeparator,\r\n  ResponsiveCommandShortcut,\r\n};\r\n",
      "type": "registry:ui"
    }
  ]
}