"use client" import * as React from "react" import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer" import { X } from "lucide-react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { backdropMotion, drawerPanelMotion, type DrawerPanelSide, } from "@/lib/motion" import { cn } from "@/lib/utils" import { Button } from "./button" /** Layered overlay elevation — heaviest stack. */ const dialogElevation = "ds-elev-overlay" type DrawerOpenContextValue = { open: boolean side: DrawerPanelSide } const DrawerOpenContext = React.createContext( null ) function useDrawerContext() { const ctx = React.useContext(DrawerOpenContext) if (!ctx) { throw new Error("Drawer parts must be used within ") } return ctx } function sideToSwipeDirection( side: DrawerPanelSide ): NonNullable { if (side === "bottom") return "down" if (side === "top") return "up" return side } function Drawer({ open: openProp, defaultOpen = false, onOpenChange, side = "right", swipeDirection, ...props }: DrawerPrimitive.Root.Props & { side?: DrawerPanelSide }) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const isControlled = openProp !== undefined const open = isControlled ? openProp : uncontrolledOpen const handleOpenChange = React.useCallback< NonNullable >( (next, eventDetails) => { if (!isControlled) setUncontrolledOpen(next) onOpenChange?.(next, eventDetails) }, [isControlled, onOpenChange] ) return ( ) } function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) { return } function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) { return } function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) { return } function DrawerOverlay({ className, render, ...props }: DrawerPrimitive.Backdrop.Props) { const reduce = useReducedMotion() return ( } {...props} /> ) } const sideViewportClass: Record = { right: "items-stretch justify-end", left: "items-stretch justify-start", bottom: "items-end justify-center", top: "items-start justify-center", } const sidePopupClass: Record = { right: "h-full w-full max-w-sm border-l border-border-subtle sm:max-w-md", left: "h-full w-full max-w-sm border-r border-border-subtle sm:max-w-md", bottom: "max-h-[min(92dvh,40rem)] w-full border-t border-border-subtle rounded-t-[var(--radius)]", top: "max-h-[min(92dvh,40rem)] w-full border-b border-border-subtle rounded-b-[var(--radius)]", } function DrawerContent({ className, children, showCloseButton = true, render, ...props }: DrawerPrimitive.Popup.Props & { showCloseButton?: boolean }) { const { open, side } = useDrawerContext() const reduce = useReducedMotion() return ( {open ? ( } {...props} > {children} {showCloseButton ? ( } > Close ) : null} ) : null} ) } function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function DrawerFooter({ className, showCloseButton = false, children, ...props }: React.ComponentProps<"div"> & { showCloseButton?: boolean }) { return (

{children} {showCloseButton ? ( }> Close ) : null}

) } function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) { return ( ) } function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) { return ( ) } export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, }