Bottom Sheet

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  AnimatePresence,
6  type HTMLMotionProps,
7  motion,
8  type PanInfo,
9  useDragControls,
10} from "motion/react";
11import { Dialog as SheetPrimitive } from "radix-ui";
12import {
13  type ComponentProps,
14  type ReactNode,
15  useCallback,
16  useEffect,
17  useState,
18} from "react";
19import { useControlledState } from "@/hooks/use-controlled-state";
20import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";
21import { EASE_DRAWER } from "@/lib/ease";
22import { getStrictContext } from "@/lib/get-strict-context";
23 
24// Vaul-style glide: a long, fully-damped tween reads smoother than a spring on
25// open — no settle/overshoot, just one clean decel. Same curve drives the
26// backdrop fade so the surface and scrim move as one.
27const DRAWER_TRANSITION = { duration: 0.5, ease: EASE_DRAWER } as const;
28 
29interface BottomSheetContextType {
30  open: boolean;
31  setOpen: (open: boolean) => void;
32}
33 
34const [BottomSheetProvider, useBottomSheet] =
35  getStrictContext<BottomSheetContextType>("BottomSheetContext");
36 
37type BottomSheetProps = ComponentProps<typeof SheetPrimitive.Root>;
38 
39function BottomSheet({
40  open,
41  defaultOpen,
42  onOpenChange,
43  ...props
44}: BottomSheetProps) {
45  const [isOpen, setIsOpen] = useControlledState({
46    value: open,
47    defaultValue: defaultOpen ?? false,
48    onChange: onOpenChange,
49  });
50 
51  return (
52    <BottomSheetProvider value={{ open: isOpen, setOpen: setIsOpen }}>
53      <SheetPrimitive.Root
54        data-slot="bottom-sheet"
55        onOpenChange={setIsOpen}
56        open={isOpen}
57        {...props}
58      />
59    </BottomSheetProvider>
60  );
61}
62 
63type BottomSheetTriggerProps = ComponentProps<typeof SheetPrimitive.Trigger>;
64 
65function BottomSheetTrigger(props: BottomSheetTriggerProps) {
66  return <SheetPrimitive.Trigger data-slot="bottom-sheet-trigger" {...props} />;
67}
68 
69type BottomSheetCloseProps = ComponentProps<typeof SheetPrimitive.Close>;
70 
71function BottomSheetClose(props: BottomSheetCloseProps) {
72  return <SheetPrimitive.Close data-slot="bottom-sheet-close" {...props} />;
73}
74 
75type BottomSheetOverlayProps = HTMLMotionProps<"div">;
76 
77function BottomSheetOverlay({ className, ...props }: BottomSheetOverlayProps) {
78  return (
79    <SheetPrimitive.Overlay asChild forceMount>
80      <motion.div
81        animate={{ opacity: 1 }}
82        className={cn(
83          "fixed inset-0 z-50 bg-background/40 backdrop-blur-sm",
84          className
85        )}
86        data-slot="bottom-sheet-overlay"
87// … truncated