Drawer

1"use client";
2 
3import * as React from "react";
4import {
5  Dialog as BaseDialog,
6  type DialogRootChangeEventDetails,
7} from "@base-ui/react/dialog";
8import { mergeProps } from "@base-ui/react/merge-props";
9import { useRender } from "@base-ui/react/use-render";
10import { cva } from "class-variance-authority";
11import { cn } from "@/lib/utils";
12import { Button } from "@/registry/default/button/button";
13import {
14  INNER_EDGE_FROM_ATTACH_SIDE,
15  elevatedSurface,
16  flushSurface,
17  type SurfaceLevel,
18} from "@/registry/default/lib/elevated";
19import {
20  ScrollArea,
21  type ScrollAreaProps,
22} from "@/registry/default/scroll-area/scroll-area";
23 
24import "./drawer.css";
25 
26import type { SnapPoint, DrawerDirection } from "./lib/drawer-utils";
27import {
28  DIRECTION_CONFIG,
29  parsePixelValue,
30  findSnapPointIndex,
31  getSnapPointValue,
32  snapPointToRatio,
33  supportsScrollTimeline,
34  supportsScrollState,
35} from "./lib/drawer-utils";
36import { useScrollSnap } from "./hooks/use-scroll-snap";
37import { useVirtualKeyboard } from "./hooks/use-virtual-keyboard";
38import { useVisualViewportHeight } from "./hooks/use-visual-viewport-height";
39 
40import { HugeiconsIcon } from "@hugeicons/react";
41import { Cancel01Icon } from "@hugeicons/core-free-icons";
42export type { SnapPoint, DrawerDirection };
43 
44const createDrawerHandle = BaseDialog.createHandle;
45 
46const drawerContentVariants = cva(
47  [
48    "text-popover-foreground flex flex-col",
49    "relative",
50    "ease-[cubic-bezier(.32,.72,0,1)] transition-[transform,scale,translate] duration-400  will-change-transform",
51    "motion-reduce:transition-none",
52    // Nested drawer support: scale down parent when child opens (interpolated during drag)
53    "scale-[calc(1-0.05*max(0,var(--nested-dialogs,0)-var(--nested-drag-progress,0)))]",
54    // Disable transitions on parent while child is being dragged
55    "data-[nested-dragging]:transition-none",
56    // Nested drawer support: overlay dim effect — uses ::before to stay clear of the elevation rim's ::after
57    "before:pointer-events-none before:absolute before:inset-0 before:z-50 before:hidden before:rounded-[inherit] before:bg-black/15 before:opacity-0 before:transition-[opacity,display] before:transition-discrete before:duration-300",
58    "data-nested-dialog-open:before:block data-nested-dialog-open:before:opacity-100",
59    "starting:data-nested-dialog-open:before:opacity-0",
60  ],
61  {
62    variants: {
63      variant: {
64// … truncated