Drawer

1"use client";
2// beui.dev/components/motion/drawer
3 
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useEffect, type ReactNode } from "react";
6import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
7import { cn } from "@/lib/utils";
8 
9export interface DrawerProps {
10  open: boolean;
11  onOpenChange: (open: boolean) => void;
12  side?: "left" | "right";
13  children: ReactNode;
14  /** Class for the panel surface. */
15  className?: string;
16  /** Class for the backdrop. */
17  backdropClassName?: string;
18  ariaLabel?: string;
19  /** Close when the backdrop is clicked. Default true. */
20  dismissable?: boolean;
21}
22 
23export function Drawer({
24  open,
25  onOpenChange,
26  side = "right",
27  children,
28  className,
29  backdropClassName,
30  ariaLabel,
31  dismissable = true,
32}: DrawerProps) {
33  const reduce = useReducedMotion();
34 
35  useEffect(() => {
36    if (!open) return;
37    const onKey = (e: KeyboardEvent) => {
38      if (e.key === "Escape") onOpenChange(false);
39    };
40    window.addEventListener("keydown", onKey);
41    const prevOverflow = document.body.style.overflow;
42    document.body.style.overflow = "hidden";
43    return () => {
44      window.removeEventListener("keydown", onKey);
45      document.body.style.overflow = prevOverflow;
46    };
47  }, [open, onOpenChange]);
48 
49  const offscreen = side === "right" ? "100%" : "-100%";
50 
51  return (
52    <AnimatePresence>
53      {open ? (
54        <div className="fixed inset-0 z-50">
55          <motion.button
56            type="button"
57            aria-label="Close"
58            tabIndex={dismissable ? 0 : -1}
59            onClick={() => dismissable && onOpenChange(false)}
60            initial={{ opacity: 0 }}
61            animate={{ opacity: 1 }}
62            exit={{ opacity: 0 }}
63            transition={{ duration: 0.25, ease: EASE_OUT }}
64            className={cn(
65              "absolute inset-0 h-full w-full cursor-default bg-black/40 backdrop-blur-sm",
66              backdropClassName,
67            )}
68          />
69          <motion.aside
70            role="dialog"
71            aria-modal="true"
72            aria-label={ariaLabel}
73            initial={reduce ? { opacity: 0 } : { x: offscreen }}
74            animate={reduce ? { opacity: 1 } : { x: 0 }}
75            exit={reduce ? { opacity: 0 } : { x: offscreen }}
76            transition={reduce ? { duration: 0.2, ease: EASE_OUT } : SPRING_PANEL}
77            className={cn(
78              "absolute inset-y-0 flex w-80 max-w-[85vw] flex-col bg-background shadow-2xl",
79// … truncated