drawer

1"use client"
2 
3import * as React from "react"
4import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
5 
6import { cn } from "@/lib/utils"
7 
8type DrawerContextProps = {
9  hasSnapPoints: boolean
10  modal: DrawerPrimitive.Root.Props["modal"]
11  showSwipeHandle: boolean
12  swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
13}
14 
15const DrawerContext = React.createContext<DrawerContextProps | null>(null)
16 
17function useDrawer() {
18  const context = React.useContext(DrawerContext)
19 
20  if (!context) {
21    throw new Error("useDrawer must be used within a Drawer.")
22  }
23 
24  return context
25}
26 
27function Drawer({
28  modal = true,
29  showSwipeHandle = false,
30  snapPoints,
31  swipeDirection = "down",
32  ...props
33}: DrawerPrimitive.Root.Props & {
34  showSwipeHandle?: boolean
35}) {
36  const hasSnapPoints = snapPoints != null && snapPoints.length > 0
37  const contextValue = React.useMemo(
38    () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
39    [hasSnapPoints, modal, showSwipeHandle, swipeDirection]
40  )
41 
42  return (
43    <DrawerContext.Provider value={contextValue}>
44      <DrawerPrimitive.Root
45        data-slot="drawer"
46        modal={modal}
47        snapPoints={snapPoints}
48        swipeDirection={swipeDirection}
49        {...props}
50      />
51    </DrawerContext.Provider>
52  )
53}
54 
55function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
56  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
57}
58 
59function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
60  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
61}
62 
63function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
64  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
65}
66 
67function DrawerOverlay({
68  className,
69  ...props
70}: DrawerPrimitive.Backdrop.Props) {
71  return (
72    <DrawerPrimitive.Backdrop
73      data-slot="drawer-overlay"
74      className={cn(
75        "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
76        className
77      )}
78// … truncated