Drawer

1"use client";
2 
3import * as React from "react";
4import { Drawer as DrawerPrimitive } from "vaul";
5 
6import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8 
9/* Role: borderless adaptive glass. */
10const ROLE = {};
11 
12const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
13  <DrawerPrimitive.Root data-slot="drawer" shouldScaleBackground={shouldScaleBackground} {...props} />
14);
15Drawer.displayName = "Drawer";
16 
17const DrawerTrigger = DrawerPrimitive.Trigger;
18 
19const DrawerPortal = DrawerPrimitive.Portal;
20 
21const DrawerClose = DrawerPrimitive.Close;
22 
23const DrawerOverlay = React.forwardRef<
24  React.ElementRef<typeof DrawerPrimitive.Overlay>,
25  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
26>(({ className, ...props }, ref) => (
27  <DrawerPrimitive.Overlay
28    ref={ref}
29    data-slot="drawer-overlay"
30    className={cn("fixed inset-0 z-50 bg-transparent backdrop-blur-md", className)}
31    {...props}
32  />
33));
34DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
35 
36const DrawerContent = React.forwardRef<
37  React.ElementRef<typeof DrawerPrimitive.Content>,
38  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> &
39    MaterialAxisProps & {
40      variant?: "default" | "glass";
41    }
42>(({ className, children, variant = "glass", ...props }, ref) => {
43  const [axes, rest] = splitAxisProps(props);
44  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
45  const variants = {
46    default: "bg-background",
47    glass: "text-foreground",
48  };
49 
50  const m = materialSurface(variant === "default" ? null : ROLE, axes);
51 
52  return (
53    <DrawerPortal data-slot="drawer-portal">
54      <DrawerOverlay />
55      <DrawerPrimitive.Content
56        ref={ref}
57        data-slot="drawer-content"
58        data-material={m?.["data-material"]}
59        className={cn(
60          m?.className,
61          "group/drawer-content fixed z-50 flex h-auto flex-col",
62          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b",
63// … truncated