{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "A letter that slides up out of its envelope.", "categories": [ "core" ], "files": [ { "path": "ui/dialog.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\n\n// Popups render in a layer on that copies the paper type of the nearest [data-paper]\n// element (and follows it if it changes). That keeps their theme without trapping them inside the\n// container's stacking context, so sticky headers can't cover them.\nfunction usePaperContainer() {\n const anchor = React.useRef(null);\n const [container, setContainer] = React.useState();\n React.useEffect(() => {\n const source = anchor.current?.closest(\"[data-paper]\");\n if (!source || source === document.documentElement) return;\n const layer = document.createElement(\"div\");\n layer.setAttribute(\"data-paper-layer\", \"\");\n const sync = () => layer.setAttribute(\"data-paper\", source.getAttribute(\"data-paper\") ?? \"\");\n sync();\n document.body.appendChild(layer);\n const observer = new MutationObserver(sync);\n observer.observe(source, { attributes: true, attributeFilter: [\"data-paper\"] });\n setContainer(layer);\n return () => {\n observer.disconnect();\n layer.remove();\n };\n }, []);\n return [anchor, container] as const;\n}\n\n/** A letter that slides up out of its envelope. */\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport function DialogContent({\n className = \"\",\n children,\n showClose = true,\n ...props\n}: React.ComponentProps & { showClose?: boolean }) {\n const [anchor, container] = usePaperContainer();\n\n return (\n <>\n