"use client"; import * as React from "react"; import { Drawer as DrawerPrimitive } from "vaul"; import { cn } from "@/lib/utils"; const Drawer = ({ shouldScaleBackground = true, // On iOS vaul freezes (position:fixed) while the drawer is open and // restores the old scroll offset on close. When a link inside the drawer // navigates, that restore fires AFTER the route change and drags the new // page to the previous page's scroll position — from the bottom of a long // page it looks like the link simply didn't work. This flag makes vaul // skip the restore when the URL changed; plain dismissals still restore. preventScrollRestoration = true, ...props }: React.ComponentProps) => ( ); Drawer.displayName = "Drawer"; const DrawerTrigger = DrawerPrimitive.Trigger; const DrawerPortal = DrawerPrimitive.Portal; const DrawerClose = DrawerPrimitive.Close; const DrawerOverlay = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName; const DrawerContent = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef & { direction?: "top" | "bottom" | "left" | "right"; /** Override the scrim styling — e.g. "bg-transparent" for a see-through * overlay that keeps the content behind the drawer visible while still * catching outside clicks to dismiss. */ overlayClassName?: string; } >(({ className, children, direction = "bottom", overlayClassName, ...props }, ref) => ( {(direction === "bottom" || direction === "top") && (

)} {children} )); DrawerContent.displayName = "DrawerContent"; const DrawerHeader = ({ className, ...props }: React.HTMLAttributes) => (

); DrawerHeader.displayName = "DrawerHeader"; const DrawerFooter = ({ className, ...props }: React.HTMLAttributes) => (

); DrawerFooter.displayName = "DrawerFooter"; const DrawerTitle = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); DrawerTitle.displayName = DrawerPrimitive.Title.displayName; const DrawerDescription = React.forwardRef< React.ComponentRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); DrawerDescription.displayName = DrawerPrimitive.Description.displayName; export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };