{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-sheet",
  "title": "Responsive Sheet",
  "registryDependencies": [
    "button",
    "drawer",
    "sheet",
    "use-is-mobile"
  ],
  "files": [
    {
      "path": "components/ui/responsive-sheet.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/components/ui/drawer\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\"\nimport { useIsMobile } from \"@/components/ui/use-is-mobile\"\nimport { cn } from \"cn\"\n\ntype ResponsiveSheetContextValue = { isMobile: boolean }\nconst ResponsiveSheetContext = React.createContext<ResponsiveSheetContextValue | null>(null)\n\nfunction useResponsiveSheet() {\n  const context = React.useContext(ResponsiveSheetContext)\n  if (!context) throw new Error(\"Responsive sheet parts must be used inside ResponsiveSheet.\")\n  return context\n}\n\nfunction ResponsiveSheet({ children, ...props }: React.ComponentProps<typeof Sheet>) {\n  const isMobile = useIsMobile()\n  const context = React.useMemo(() => ({ isMobile }), [isMobile])\n\n  return (\n    <ResponsiveSheetContext.Provider value={context}>\n      {isMobile ? (\n        <Drawer showSwipeHandle {...(props as React.ComponentProps<typeof Drawer>)}>\n          {children}\n        </Drawer>\n      ) : (\n        <Sheet {...props}>{children}</Sheet>\n      )}\n    </ResponsiveSheetContext.Provider>\n  )\n}\n\nfunction ResponsiveSheetTrigger(props: React.ComponentProps<typeof SheetTrigger>) {\n  const { isMobile } = useResponsiveSheet()\n  return isMobile ? <DrawerTrigger {...(props as React.ComponentProps<typeof DrawerTrigger>)} /> : <SheetTrigger {...props} />\n}\n\nfunction ResponsiveSheetClose(props: React.ComponentProps<typeof SheetClose>) {\n  const { isMobile } = useResponsiveSheet()\n  return isMobile ? <DrawerClose {...(props as React.ComponentProps<typeof DrawerClose>)} /> : <SheetClose {...props} />\n}\n\nfunction ResponsiveSheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetContent> & {\n  showCloseButton?: boolean\n}) {\n  const { isMobile } = useResponsiveSheet()\n\n  if (isMobile) {\n    return (\n      <DrawerContent className={cn(\"max-h-[90dvh]\", className)} {...(props as React.ComponentProps<typeof DrawerContent>)}>\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    <SheetContent\n      className={className}\n      side={side}\n      showCloseButton={showCloseButton}\n      {...props}\n    >\n      {children}\n    </SheetContent>\n  )\n}\n\nfunction ResponsiveSheetHeader(props: React.ComponentProps<\"div\">) {\n  const { isMobile } = useResponsiveSheet()\n  return isMobile ? <DrawerHeader {...props} /> : <SheetHeader {...props} />\n}\n\nfunction ResponsiveSheetFooter(props: React.ComponentProps<\"div\">) {\n  const { isMobile } = useResponsiveSheet()\n  return isMobile ? <DrawerFooter {...props} /> : <SheetFooter {...props} />\n}\n\nfunction ResponsiveSheetTitle(props: React.ComponentProps<typeof SheetTitle>) {\n  const { isMobile } = useResponsiveSheet()\n  return isMobile ? <DrawerTitle {...props} /> : <SheetTitle {...props} />\n}\n\nfunction ResponsiveSheetDescription(props: React.ComponentProps<typeof SheetDescription>) {\n  const { isMobile } = useResponsiveSheet()\n  return isMobile ? <DrawerDescription {...props} /> : <SheetDescription {...props} />\n}\n\nexport {\n  ResponsiveSheet,\n  ResponsiveSheetClose,\n  ResponsiveSheetContent,\n  ResponsiveSheetDescription,\n  ResponsiveSheetFooter,\n  ResponsiveSheetHeader,\n  ResponsiveSheetTitle,\n  ResponsiveSheetTrigger,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}