{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-modal",
  "type": "registry:component",
  "title": "Responsive modal",
  "description": "A modal that pops up in the center of the screen on desktop and slide up on mobile",
  "registryDependencies": [
    "avatar"
  ],
  "files": [
    {
      "path": "src/components/ui/responsive-modal.tsx",
      "content": "\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst Modal = DialogPrimitive.Root;\nconst ModalTrigger = DialogPrimitive.Trigger;\nconst ModalClose = DialogPrimitive.Close;\nconst ModalPortal = DialogPrimitive.Portal;\n\nconst ModalOverlay = (props: DialogPrimitive.DialogOverlayProps) => {\n\treturn (\n\t\t<DialogPrimitive.Overlay\n\t\t\t{...props}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm\",\n\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\tprops.className,\n\t\t\t)}\n\t\t/>\n\t);\n};\n\nconst ModalVariants = cva(\n\tcn(\n\t\t\"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out\",\n\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\"data-[state=closed]:duration-300 data-[state=open]:duration-500 overflow-y-auto\",\n\t\t\"lg:left-[50%] lg:top-[50%] lg:w-full lg:max-w-lg lg:translate-x-[-50%] lg:translate-y-[-50%]\",\n\t\t\"lg:border lg:duration-200 lg:data-[state=open]:animate-in lg:data-[state=closed]:animate-out\",\n\t\t\"lg:data-[state=closed]:fade-out-0 lg:data-[state=open]:fade-in-0\",\n\t\t\"lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95 lg:rounded-xl\",\n\t),\n\t{\n\t\tvariants: {\n\t\t\tside: {\n\t\t\t\ttop: \"inset-x-0 top-0 border-b rounded-b-xl max-h-[80dvh] lg:h-fit data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n\t\t\t\tbottom:\n\t\t\t\t\t\"inset-x-0 bottom-0 border-t lg:h-fit max-h-[80dvh] rounded-t-xl data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n\t\t\t\tleft: \"inset-y-0 left-0 h-full lg:h-fit w-3/4 border-r rounded-r-xl data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n\t\t\t\tright:\n\t\t\t\t\t\"inset-y-0 right-0 h-full lg:h-fit w-3/4 border-l rounded-l-xl data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"bottom\",\n\t\t},\n\t},\n);\n\ntype ModalContentProps = DialogPrimitive.DialogContentProps &\n\tVariantProps<typeof ModalVariants>;\n\nconst ModalContent = ({\n\tside = \"bottom\",\n\tclassName,\n\tchildren,\n\t...props\n}: ModalContentProps) => {\n\treturn (\n\t\t<ModalPortal>\n\t\t\t<ModalOverlay />\n\t\t\t<DialogPrimitive.Content\n\t\t\t\t{...props}\n\t\t\t\taria-describedby=\"responsive-modal-description\"\n\t\t\t\tclassName={cn(ModalVariants({ side }), className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<ModalClose className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n\t\t\t\t\t<X className=\"h-4 w-4\" />\n\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t</ModalClose>\n\t\t\t</DialogPrimitive.Content>\n\t\t</ModalPortal>\n\t);\n};\n\nconst ModalHeader = (props: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\t{...props}\n\t\tclassName={cn(\n\t\t\t\"flex flex-col space-y-2 text-center sm:text-left\",\n\t\t\tprops.className,\n\t\t)}\n\t/>\n);\n\nconst ModalFooter = (props: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\t{...props}\n\t\tclassName={cn(\n\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\tprops.className,\n\t\t)}\n\t/>\n);\n\nconst ModalTitle = (props: DialogPrimitive.DialogTitleProps) => (\n\t<DialogPrimitive.Title\n\t\t{...props}\n\t\tclassName={cn(\"text-lg font-semibold text-foreground\", props.className)}\n\t/>\n);\n\nconst ModalDescription = (props: DialogPrimitive.DialogDescriptionProps) => (\n\t<DialogPrimitive.Description\n\t\t{...props}\n\t\tclassName={cn(\"text-sm text-muted-foreground\", props.className)}\n\t/>\n);\n\nexport {\n\tModal,\n\tModalPortal,\n\tModalOverlay,\n\tModalTrigger,\n\tModalClose,\n\tModalContent,\n\tModalHeader,\n\tModalFooter,\n\tModalTitle,\n\tModalDescription,\n};\n",
      "type": "registry:component"
    }
  ]
}