"use client"; import { useRef, useState, useSyncExternalStore } from "react"; import type { PointerEvent, ReactElement, ReactNode } from "react"; import * as Dialog from "@radix-ui/react-dialog"; export type DrawerSide = "right" | "left" | "bottom"; export type DrawerSheetProps = { title: string; description?: string; children?: ReactNode; footer?: ReactNode; trigger?: ReactElement; side?: DrawerSide; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; dragToClose?: boolean; reducedMotion?: boolean; className?: string; }; const motionQuery = "(prefers-reduced-motion: reduce)"; function subscribeMotion(callback: () => void) { const media = window.matchMedia(motionQuery); media.addEventListener?.("change", callback); return () => media.removeEventListener?.("change", callback); } function usePrefersReducedMotion(force?: boolean) { const preferred = useSyncExternalStore(subscribeMotion, () => window.matchMedia(motionQuery).matches, () => false); return force ?? preferred; } const drawerCss = "@keyframes compass-fade-in{from{opacity:0}}@keyframes compass-fade-out{to{opacity:0}}" + "@keyframes compass-in-right{from{transform:translateX(100%)}}@keyframes compass-out-right{to{transform:translateX(100%)}}" + "@keyframes compass-in-left{from{transform:translateX(-100%)}}@keyframes compass-out-left{to{transform:translateX(-100%)}}" + "@keyframes compass-in-bottom{from{transform:translateY(100%)}}@keyframes compass-out-bottom{to{transform:translateY(100%)}}" + ".compass-drawer-overlay[data-state=open]{animation:compass-fade-in 200ms ease-out}" + ".compass-drawer-overlay[data-state=closed]{animation:compass-fade-out 160ms ease-in}" + ".compass-drawer[data-side=right][data-state=open]{animation:compass-in-right 280ms cubic-bezier(.22,1,.36,1)}" + ".compass-drawer[data-side=right][data-state=closed]{animation:compass-out-right 180ms ease-in}" + ".compass-drawer[data-side=left][data-state=open]{animation:compass-in-left 280ms cubic-bezier(.22,1,.36,1)}" + ".compass-drawer[data-side=left][data-state=closed]{animation:compass-out-left 180ms ease-in}" + ".compass-drawer[data-side=bottom][data-state=open]{animation:compass-in-bottom 300ms cubic-bezier(.22,1,.36,1)}" + ".compass-drawer[data-side=bottom][data-state=closed]{animation:compass-out-bottom 200ms ease-in}" + ".compass-drawer[data-reduced=true],.compass-drawer-overlay[data-reduced=true]{animation:none!important}" + "@media (prefers-reduced-motion: reduce){.compass-drawer,.compass-drawer-overlay{animation:none!important}}"; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; const sideClass: Record = { right: "inset-y-0 right-0 h-full w-[min(26rem,100vw)] border-l", left: "inset-y-0 left-0 h-full w-[min(26rem,100vw)] border-r", bottom: "inset-x-0 bottom-0 mx-auto max-h-[85dvh] w-full max-w-3xl rounded-t-xl border-x border-t pb-[env(safe-area-inset-bottom)]", }; export function DrawerSheet({ title, description, children, footer, trigger, side = "right", open, defaultOpen = false, onOpenChange, dragToClose = true, reducedMotion, className = "", }: DrawerSheetProps) { const [uncontrolled, setUncontrolled] = useState(defaultOpen); const isOpen = open ?? uncontrolled; const reduce = usePrefersReducedMotion(reducedMotion); const [offset, setOffset] = useState(0); const [dragging, setDragging] = useState(false); const panel = useRef(null); const body = useRef(null); const gesture = useRef<{ x: number; y: number; t: number; id: number; active: boolean } | null>(null); const setOpen = (next: boolean) => { if (open === undefined) setUncontrolled(next); onOpenChange?.(next); }; const distance = (event: PointerEvent) => { const start = gesture.current; if (!start) return { along: 0, across: 0 }; const dx = event.clientX - start.x; const dy = event.clientY - start.y; if (side === "bottom") return { along: dy, across: dx }; return { along: side === "right" ? dx : -dx, across: dy }; }; const onPointerDown = (event: PointerEvent) => { if (!dragToClose) return; const target = event.target as HTMLElement; const onHandle = Boolean(target.closest("[data-drawer-handle]")); if (event.pointerType === "mouse" && !onHandle) return; if (!onHandle && target.closest("button, a, input, textarea, select, [role=slider], [contenteditable=true]")) return; if (side === "bottom" && !onHandle && (body.current?.scrollTop ?? 0) > 0) return; gesture.current = { x: event.clientX, y: event.clientY, t: performance.now(), id: event.pointerId, active: false }; }; const onPointerMove = (event: PointerEvent) => { const start = gesture.current; if (!start || start.id !== event.pointerId) return; const { along, across } = distance(event); if (!start.active) { if (Math.abs(across) > Math.abs(along) && Math.abs(across) > 8) { gesture.current = null; return; } if (along < 6) return; start.active = true; setDragging(true); event.currentTarget.setPointerCapture?.(event.pointerId); } setOffset(Math.max(0, along)); }; const onPointerEnd = (event: PointerEvent) => { const start = gesture.current; if (!start || start.id !== event.pointerId) return; const along = Math.max(0, distance(event).along); gesture.current = null; if (!start.active) return; setDragging(false); const size = side === "bottom" ? panel.current?.offsetHeight ?? 1 : panel.current?.offsetWidth ?? 1; const velocity = along / Math.max(1, performance.now() - start.t); if (along > size * 0.3 || velocity > 0.6) setOpen(false); else setOffset(0); }; const transform = offset === 0 ? undefined : side === "bottom" ? "translateY(" + offset + "px)" : "translateX(" + (side === "right" ? offset : -offset) + "px)"; return ( {trigger ? {trigger} : null} setOffset(0)} style={{ transform, transition: dragging || reduce ? "none" : "transform 220ms cubic-bezier(.22,1,.36,1)", touchAction: side === "bottom" ? "pan-x" : "pan-y", }} className={ "compass-drawer fixed z-50 flex flex-col border-[#DCE1E6] bg-white text-[#16202A] shadow-[0_24px_64px_-24px_rgba(16,32,48,0.45)] outline-none dark:border-[#253240] dark:bg-[#121A22] dark:text-[#E4EAF0] " + sideClass[side] + " " + className } > {side === "bottom" ? ( ) : null}

{title} {description ? ( {description} ) : ( {title} )}

{children}

{footer ?

{footer}

: null} ); }