{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sheet", "type": "registry:ui", "title": "Sheet", "description": "A folder that slides in from the edge, with a tab.", "categories": [ "core" ], "files": [ { "path": "ui/sheet.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as SheetPrimitive } 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 folder that slides in from the edge of the desk. */\nexport const Sheet = SheetPrimitive.Root;\nexport const SheetTrigger = SheetPrimitive.Trigger;\nexport const SheetClose = SheetPrimitive.Close;\n\nconst sides = {\n right:\n \"inset-y-0 right-0 h-full w-[88%] max-w-md border-l data-[state=open]:animate-[paper-slide-in-right_.35s_cubic-bezier(.2,.9,.3,1)_both] data-[state=closed]:animate-[paper-slide-out-right_.25s_ease-in_both]\",\n left: \"inset-y-0 left-0 h-full w-[88%] max-w-md border-r data-[state=open]:animate-[paper-slide-in-left_.35s_cubic-bezier(.2,.9,.3,1)_both] data-[state=closed]:animate-[paper-slide-out-left_.25s_ease-in_both]\",\n bottom:\n \"inset-x-0 bottom-0 max-h-[85vh] border-t data-[state=open]:animate-[paper-slide-in-bottom_.35s_cubic-bezier(.2,.9,.3,1)_both] data-[state=closed]:animate-[paper-slide-out-bottom_.25s_ease-in_both]\",\n} as const;\n\n// the folder tab that sticks out of the sheet\nconst tabs = {\n right: \"left-0 top-10 -translate-x-full rounded-l-[6px] border-r-0 px-1.5 py-4 [writing-mode:vertical-rl] rotate-180\",\n left: \"right-0 top-10 translate-x-full rounded-r-[6px] border-l-0 px-1.5 py-4 [writing-mode:vertical-rl]\",\n bottom: \"left-8 top-0 -translate-y-full rounded-t-[6px] border-b-0 px-4 py-1.5\",\n} as const;\n\nexport function SheetContent({\n className = \"\",\n side = \"right\",\n tab,\n children,\n ...props\n}: React.ComponentProps & { side?: keyof typeof sides; tab?: React.ReactNode }) {\n const [anchor, container] = usePaperContainer();\n return (\n <>\n \n )}\n

\n {children}\n \n ×\n \n \n \n \n );\n}\n\nexport function SheetHeader({ className = \"\", ...props }: React.HTMLAttributes) {\n return

;\n}\n\nexport function SheetFooter({ className = \"\", ...props }: React.HTMLAttributes) {\n return

;\n}\n\nexport function SheetTitle({ className = \"\", style, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport function SheetDescription({ className = \"\", ...props }: React.ComponentProps) {\n return ;\n}\n" } ], "dependencies": [ "radix-ui" ] }