{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer", "title": "Drawer", "description": "Panel that slides in from an edge of the screen and can be swiped closed, built on Base UI Drawer.", "dependencies": [ "@base-ui/react@^1.8.0" ], "files": [ { "path": "registry/rapid/ui/drawer/drawer.tsx", "content": "'use client'\n\nimport { Drawer as DrawerPrimitive } from '@base-ui/react/drawer'\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\ntype DrawerContextProps = {\n\thasSnapPoints: boolean\n\tmodal: DrawerPrimitive.Root.Props['modal']\n\tshowSwipeHandle: boolean\n\tswipeDirection: NonNullable\n}\n\nconst DrawerContext = React.createContext(null)\n\nfunction useDrawer() {\n\tconst context = React.useContext(DrawerContext)\n\n\tif (!context) {\n\t\tthrow new Error('useDrawer must be used within a Drawer.')\n\t}\n\n\treturn context\n}\n\nfunction Drawer({\n\tmodal = true,\n\tshowSwipeHandle = false,\n\tsnapPoints,\n\tswipeDirection = 'down',\n\t...props\n}: DrawerPrimitive.Root.Props & {\n\tshowSwipeHandle?: boolean\n}) {\n\tconst hasSnapPoints = snapPoints != null && snapPoints.length > 0\n\tconst contextValue = React.useMemo(\n\t\t() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),\n\t\t[hasSnapPoints, modal, showSwipeHandle, swipeDirection],\n\t)\n\n\treturn (\n\t\t\n\t\t\t\n\t\t\n\t)\n}\n\nfunction DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {\n\treturn \n}\n\nfunction DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {\n\treturn \n}\n\nfunction DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {\n\treturn \n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DrawerSwipeHandle({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {\n\tconst { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()\n\tconst swipeAxis = swipeDirection === 'down' || swipeDirection === 'up' ? 'y' : 'x'\n\n\treturn (\n\t\t\n\t\t\t{modal === true && }\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{showSwipeHandle && }\n\t\t\t\t\t\n\t\t\t\t\t\t{children}\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t)\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n\treturn (\n\t\t\n\t)\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {\n\treturn (\n\t\t\n\t)\n}\n\nexport {\n\tDrawer,\n\tDrawerPortal,\n\tDrawerOverlay,\n\tDrawerSwipeHandle,\n\tDrawerTrigger,\n\tDrawerClose,\n\tDrawerContent,\n\tDrawerHeader,\n\tDrawerFooter,\n\tDrawerTitle,\n\tDrawerDescription,\n}\n", "type": "registry:ui", "target": "components/ui/drawer.tsx" } ], "meta": { "new": true }, "type": "registry:ui" }