{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"portal","type":"registry:component","description":"react portal component.","files":[{"path":"registry/components/portal.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nfunction Portal({ className, ...props }: React.ComponentProps<\"div\">) {\n\tconst [mounted, setMounted] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tsetMounted(true);\n\n\t\tconst originalStyle = window.getComputedStyle(document.body).overflow;\n\t\tconst scrollbarWidth =\n\t\t\twindow.innerWidth - document.documentElement.clientWidth;\n\t\tconst originalPaddingRight = document.body.style.paddingRight;\n\n\t\tdocument.body.style.overflow = \"hidden\";\n\t\tif (scrollbarWidth > 0) {\n\t\t\tdocument.body.style.paddingRight = `${scrollbarWidth}px`;\n\t\t}\n\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = originalStyle;\n\t\t\tdocument.body.style.paddingRight = originalPaddingRight;\n\t\t};\n\t}, []);\n\n\tif (!mounted) {\n\t\treturn null;\n\t}\n\n\treturn createPortal(\n\t\t<div\n\t\t\tclassName={cn(\"fixed inset-0 isolate z-40 flex flex-col\", className)}\n\t\t\t{...props}\n\t\t/>,\n\t\tdocument.body\n\t);\n}\n\nfunction PortalBackdrop({ className, ...props }: React.ComponentProps<\"div\">) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 -z-1 bg-background/95 backdrop-blur-sm duration-500 data-[state=closed]:animate-out data-[state=open]:animate-in supports-backdrop-filter:bg-background/60\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Portal, PortalBackdrop };\n"}]}