Drawer

1"use client";
2 
3import * as React from "react";
4import { Drawer as DrawerPrimitive } from "vaul";
5 
6import { cn } from "@/lib/utils";
7import {
8  overlaySurfaceVariants,
9  overlayVariants,
10  type OverlayProps,
11  type OverlaySurfaceProps,
12} from "@/components/ui/recipes";
13 
14/* ================================================================== */
15/*  DRAWER (vaul-based)                                                */
16/* ================================================================== */
17 
18const Drawer = ({
19  shouldScaleBackground = true,
20  ...props
21}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
22  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
23);
24Drawer.displayName = "Drawer";
25 
26const DrawerTrigger = DrawerPrimitive.Trigger;
27 
28const DrawerPortal = DrawerPrimitive.Portal;
29 
30const DrawerClose = DrawerPrimitive.Close;
31 
32const DrawerOverlay = React.forwardRef<
33  React.ElementRef<typeof DrawerPrimitive.Overlay>,
34  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & OverlayProps
35>(({ className, tone, ...props }, ref) => (
36  <DrawerPrimitive.Overlay
37    ref={ref}
38    className={cn(overlayVariants({ tone }), className)}
39    {...props}
40  />
41));
42DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
43 
44const DrawerContent = React.forwardRef<
45  React.ElementRef<typeof DrawerPrimitive.Content>,
46  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> &
47    OverlaySurfaceProps & {
48      overlayTone?: NonNullable<OverlayProps["tone"]>;
49      overlayClassName?: string;
50      handle?: boolean;
51    }
52>(
53  (
54    {
55      className,
56      children,
57      surface,
58      radius,
59      overlayTone,
60      overlayClassName,
61      handle = true,
62      ...props
63    },
64    ref,
65  ) => (
66    <DrawerPortal>
67      <DrawerOverlay tone={overlayTone} className={overlayClassName} />
68      <DrawerPrimitive.Content
69        ref={ref}
70        className={cn(
71          overlaySurfaceVariants({ surface, radius }),
72          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col",
73          "border-b-0",
74          "will-change-transform",
75          className,
76        )}
77        {...props}
78      >
79        {/* Drag handle */}
80        {handle && (
81          <div className="mx-auto mt-4 h-1.5 w-[60px] rounded-full bg-border-strong transition-colors duration-150 ease-out" />
82        )}
83        {children}
84      </DrawerPrimitive.Content>
85    </DrawerPortal>
86  ),
87);
88DrawerContent.displayName = "DrawerContent";
89 
90// … truncated