{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "sheet",
"title": "Sheet",
"description": "A panel that slides in from an edge of the screen to complement the main content, built on Base UI.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"utils",
"@persianlabsui/button"
],
"files": [
{
"path": "registry/base/ui/sheet.tsx",
"content": "\"use client\"\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\nimport { XIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\ntype SheetSide = \"top\" | \"right\" | \"bottom\" | \"left\" | \"start\" | \"end\"\n\n/**\n * SheetContent renders through a Portal, so it doesn't inherit `dir` from a\n * nearby wrapper (only from document.documentElement). SheetTrigger measures\n * the ambient direction where it's actually rendered and pushes it here so\n * SheetContent can apply it explicitly to the portaled popup, and so a\n * logical `side=\"start\"`/`\"end\"` can resolve to the correct physical edge.\n */\nconst SheetDirContext = React.createContext<{\n dir: \"ltr\" | \"rtl\"\n setDir: (dir: \"ltr\" | \"rtl\") => void\n}>({ dir: \"ltr\", setDir: () => {} })\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n const [dir, setDir] = React.useState<\"ltr\" | \"rtl\">(\"ltr\")\n const contextValue = React.useMemo(() => ({ dir, setDir }), [dir])\n\n return (\n \n \n \n )\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n const ref = React.useRef(null)\n const { setDir } = React.useContext(SheetDirContext)\n\n React.useEffect(() => {\n function update() {\n if (!ref.current) return\n setDir(getComputedStyle(ref.current).direction === \"rtl\" ? \"rtl\" : \"ltr\")\n }\n\n update()\n\n const observer = new MutationObserver(update)\n observer.observe(document.documentElement, {\n attributes: true,\n attributeFilter: [\"dir\"],\n subtree: true,\n })\n\n return () => observer.disconnect()\n }, [setDir])\n\n return (\n \n )\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n return \n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n return \n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"end\",\n showCloseButton = true,\n ...props\n}: SheetPrimitive.Popup.Props & {\n side?: SheetSide\n showCloseButton?: boolean\n}) {\n const { dir } = React.useContext(SheetDirContext)\n\n // Resolve logical start/end to the physical edge for the ambient direction.\n const resolvedSide: Exclude =\n side === \"start\"\n ? dir === \"rtl\"\n ? \"right\"\n : \"left\"\n : side === \"end\"\n ? dir === \"rtl\"\n ? \"left\"\n : \"right\"\n : side\n\n return (\n \n \n \n {/* Safe-area padding lives on this inner, non-animated wrapper rather\n than the translate-animated Popup above — env() padding on the\n same element being translated caused visibly laggy open/close\n transitions. */}\n \n {children}\n \n {showCloseButton && (\n \n }\n >\n \n Close\n \n )}\n \n \n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: SheetPrimitive.Description.Props) {\n return (\n \n )\n}\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}