{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer", "title": "Drawer", "description": "A panel that slides in from the edge of the screen, typically used on smaller viewports.", "dependencies": [ "@base-ui/react@^1.6.0" ], "registryDependencies": [ "@nx-ui/utils" ], "files": [ { "path": "components/ui/drawer.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype DrawerContextProps = {\n hasSnapPoints: boolean\n modal: DrawerPrimitive.Root.Props[\"modal\"]\n showSwipeHandle: boolean\n swipeDirection: NonNullable\n}\n\nconst DrawerContext = React.createContext(null)\n\nfunction useDrawer() {\n const context = React.useContext(DrawerContext)\n\n if (!context) {\n throw new Error(\"useDrawer must be used within a Drawer.\")\n }\n\n return context\n}\n\nfunction Drawer({\n modal = true,\n showSwipeHandle = false,\n snapPoints,\n swipeDirection = \"down\",\n ...props\n}: DrawerPrimitive.Root.Props & {\n showSwipeHandle?: boolean\n}) {\n const hasSnapPoints = snapPoints != null && snapPoints.length > 0\n const contextValue = React.useMemo(\n () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),\n [hasSnapPoints, modal, showSwipeHandle, swipeDirection]\n )\n\n return (\n \n \n \n )\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n return \n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n return \n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n return \n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n )\n}\n\nfunction DrawerSwipeHandle({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DrawerContent({\n className,\n children,\n ...props\n}: DrawerPrimitive.Popup.Props) {\n const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()\n const swipeAxis =\n swipeDirection === \"down\" || swipeDirection === \"up\" ? \"y\" : \"x\"\n\n return (\n \n {modal === true && (\n \n )}\n \n \n {showSwipeHandle && }\n \n {children}\n \n \n \n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n return (\n \n )\n}\n\nfunction DrawerDescription({\n className,\n ...props\n}: DrawerPrimitive.Description.Props) {\n return (\n \n )\n}\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerSwipeHandle,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n}\n", "type": "registry:ui" } ], "type": "registry:ui" }