{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-dialog",
  "title": "Responsive Dialog",
  "registryDependencies": [
    "button",
    "dialog",
    "drawer",
    "use-is-mobile"
  ],
  "files": [
    {
      "path": "components/ui/responsive-dialog.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport { useIsMobile } from \"@/components/ui/use-is-mobile\"\nimport { cn } from \"cn\"\n\ntype ResponsiveDialogContextValue = { isMobile: boolean }\n\nconst ResponsiveDialogContext = React.createContext<ResponsiveDialogContextValue | null>(null)\n\nfunction useResponsiveDialog() {\n  const context = React.useContext(ResponsiveDialogContext)\n\n  if (!context) {\n    throw new Error(\"Responsive dialog parts must be used inside ResponsiveDialog.\")\n  }\n\n  return context\n}\n\nfunction ResponsiveDialog({ children, ...props }: React.ComponentProps<typeof Dialog>) {\n  const isMobile = useIsMobile()\n  const context = React.useMemo(() => ({ isMobile }), [isMobile])\n\n  return (\n    <ResponsiveDialogContext.Provider value={context}>\n      {isMobile ? (\n        <Drawer showSwipeHandle {...(props as React.ComponentProps<typeof Drawer>)}>\n          {children}\n        </Drawer>\n      ) : (\n        <Dialog {...props}>{children}</Dialog>\n      )}\n    </ResponsiveDialogContext.Provider>\n  )\n}\n\nfunction ResponsiveDialogTrigger(\n  props: React.ComponentProps<typeof DialogTrigger>\n) {\n  const { isMobile } = useResponsiveDialog()\n  return isMobile ? <DrawerTrigger {...(props as React.ComponentProps<typeof DrawerTrigger>)} /> : <DialogTrigger {...props} />\n}\n\nfunction ResponsiveDialogClose(props: React.ComponentProps<typeof DialogClose>) {\n  const { isMobile } = useResponsiveDialog()\n  return isMobile ? <DrawerClose {...(props as React.ComponentProps<typeof DrawerClose>)} /> : <DialogClose {...props} />\n}\n\nfunction ResponsiveDialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogContent> & {\n  showCloseButton?: boolean\n}) {\n  const { isMobile } = useResponsiveDialog()\n\n  if (isMobile) {\n    return (\n      <DrawerContent\n        className={cn(\"max-h-[90dvh]\", className)}\n        {...(props as React.ComponentProps<typeof DrawerContent>)}\n      >\n        {children}\n        {showCloseButton && (\n          <DrawerClose\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3 bg-secondary\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DrawerClose>\n        )}\n      </DrawerContent>\n    )\n  }\n\n  return (\n    <DialogContent className={className} showCloseButton={showCloseButton} {...props}>\n      {children}\n    </DialogContent>\n  )\n}\n\nfunction ResponsiveDialogHeader(props: React.ComponentProps<\"div\">) {\n  const { isMobile } = useResponsiveDialog()\n  return isMobile ? <DrawerHeader {...props} /> : <DialogHeader {...props} />\n}\n\nfunction ResponsiveDialogFooter(props: React.ComponentProps<\"div\">) {\n  const { isMobile } = useResponsiveDialog()\n  return isMobile ? <DrawerFooter {...props} /> : <DialogFooter {...props} />\n}\n\nfunction ResponsiveDialogTitle(props: React.ComponentProps<typeof DialogTitle>) {\n  const { isMobile } = useResponsiveDialog()\n  return isMobile ? <DrawerTitle {...props} /> : <DialogTitle {...props} />\n}\n\nfunction ResponsiveDialogDescription(\n  props: React.ComponentProps<typeof DialogDescription>\n) {\n  const { isMobile } = useResponsiveDialog()\n  return isMobile ? <DrawerDescription {...props} /> : <DialogDescription {...props} />\n}\n\nexport {\n  ResponsiveDialog,\n  ResponsiveDialogClose,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}