Drawer (Base UI)

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
5import { ComponentProps, createContext, use } from "react";
6 
7function resolveClassName<S>(
8  className: string | ((state: S) => string | undefined) | undefined,
9  state: S,
10): string | undefined {
11  return typeof className === "function" ? className(state) : className;
12}
13 
14const DrawerContext =
15  createContext<DrawerPrimitive.Root.Props["swipeDirection"]>("down");
16 
17function DrawerProvider({ ...props }: DrawerPrimitive.Provider.Props) {
18  return <DrawerPrimitive.Provider {...props} />;
19}
20 
21function Drawer({
22  swipeDirection = "down",
23  ...props
24}: DrawerPrimitive.Root.Props) {
25  return (
26    <DrawerContext value={swipeDirection}>
27      <DrawerPrimitive.Root
28        data-slot="drawer"
29        swipeDirection={swipeDirection}
30        {...props}
31      />
32    </DrawerContext>
33  );
34}
35 
36function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
37  return <DrawerPrimitive.Trigger {...props} data-slot="drawer-trigger" />;
38}
39 
40function DrawerPortal({ className, ...props }: DrawerPrimitive.Portal.Props) {
41  return (
42    <DrawerPrimitive.Portal
43      data-slot="drawer-portal"
44      className={(state) => cn("z-50", resolveClassName(className, state))}
45      {...props}
46    />
47  );
48}
49 
50function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
51  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
52}
53 
54function DrawerContent({ className, ...props }: DrawerPrimitive.Content.Props) {
55  return (
56    <DrawerPrimitive.Content
57      data-slot="drawer-content"
58      className={(state) =>
59        cn(
60          "transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-nested-drawer-open/popup:opacity-0 group-data-nested-drawer-swiping/popup:opacity-100",
61          resolveClassName(className, state),
62        )
63      }
64      {...props}
65    />
66  );
67}
68 
69export const drawerPopupClassName = ({
70  swipeDirection,
71}: DrawerPrimitive.Popup.State) => {
72  return cn(
73    "group/popup relative",
74    "[--bleed:3rem] outline-1 outline-foreground/5 bg-background text-foreground dark:outline-border overflow-y-auto overscroll-contain touch-auto data-swiping:select-none",
75    "data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
76    // Nested drawer stacking variables (no-ops when not nested)
77// … truncated