Drawer

1"use client"
2 
3import * as React from "react"
4import * as DialogPrimitive from "@radix-ui/react-dialog"
5 
6import { cn } from "@/lib/utils"
7 
8export type DrawerSide = "top" | "right" | "bottom" | "left"
9 
10export interface DrawerContentProps extends React.ComponentProps<
11  typeof DialogPrimitive.Content
12> {
13  /** Edge the drawer comes in from. */
14  side?: DrawerSide
15  /** How much of the screen it covers when open. Any CSS length. */
16  size?: string
17  /** Draw the notch you take hold of. */
18  showHandle?: boolean
19  /** Allow the swipe, the overlay and `Escape` to close the drawer. */
20  dismissible?: boolean
21}
22 
23/** Off screen, as a share of the panel. */
24const CLOSED: Record<DrawerSide, string> = {
25  top: "0 -100%",
26  bottom: "0 100%",
27  left: "-100% 0",
28  right: "100% 0",
29}
30 
31const PANEL: Record<DrawerSide, string> = {
32  top: "inset-x-0 top-0 h-[var(--drawer-size)] w-full rounded-b-2xl border-b",
33  bottom:
34    "inset-x-0 bottom-0 h-[var(--drawer-size)] w-full rounded-t-2xl border-t",
35  left: "inset-y-0 left-0 h-full w-[var(--drawer-size)] rounded-r-2xl border-r",
36  right:
37    "inset-y-0 right-0 h-full w-[var(--drawer-size)] rounded-l-2xl border-l",
38}
39 
40/** Where the contents start from as they settle into the landed panel. */
41const RISE: Record<DrawerSide, string> = {
42  top: "0 -14px",
43  bottom: "0 14px",
44  left: "-14px 0",
45  right: "14px 0",
46}
47 
48const HANDLE_POSITION: Record<DrawerSide, string> = {
49  top: "inset-x-0 bottom-0 justify-center",
50  bottom: "inset-x-0 top-0 justify-center",
51  left: "inset-y-0 right-0 flex-col justify-center",
52  right: "inset-y-0 left-0 flex-col justify-center",
53}
54 
55/** Milliseconds. Arriving and settling back. */
56const OPEN_MS = 260
57/** Leaving. An exit can be quicker than an entrance without feeling cut off. */
58const CLOSE_MS = 200
59/** Pixels per millisecond past which a flick closes on its own. */
60const VELOCITY_THRESHOLD = 0.2
61/** Share of the panel dragged away before it closes. */
62const CLOSE_THRESHOLD = 0.25
63/** After the content is scrolled, this long before a drag can start. */
64const SCROLL_LOCK_MS = 100
65/** The drag waits this long after opening, so the arrival can be scrolled. */
66const OPEN_GUARD_MS = OPEN_MS
67/** Open: the whole panel on screen, against its edge. */
68const AT_REST = "0 0"
69 
70const isVertical = (side: DrawerSide) => side === "top" || side === "bottom"
71/** Which way is out: down and right are positive, up and left are not. */
72const outwardSign = (side: DrawerSide) =>
73  side === "bottom" || side === "right" ? 1 : -1
74// … truncated