1import * as React from "react"
  2import { Drawer as DrawerPrimitive } from "vaul"
  3
  4import { cn } from "@marzneshin/utils"
  5
  6const Drawer = ({
  7  shouldScaleBackground = true,
  8  ...props
  9}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
 10  <DrawerPrimitive.Root
 11    shouldScaleBackground={shouldScaleBackground}
 12    {...props}
 13  />
 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    className={cn("fixed inset-0 z-50 bg-black/80", className)}
 30    {...props}
 31  />
 32))
 33DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 34
 35const DrawerContent = React.forwardRef<
 36  React.ElementRef<typeof DrawerPrimitive.Content>,
 37  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 38>(({ className, children, ...props }, ref) => (
 39  <DrawerPortal>
 40    <DrawerOverlay />
 41    <DrawerPrimitive.Content
 42      ref={ref}
 43      className={cn(
 44        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
 45        className
 46      )}
 47      {...props}
 48    >
 49      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
 50      {children}
 51    </DrawerPrimitive.Content>
 52  </DrawerPortal>
 53))
 54DrawerContent.displayName = "DrawerContent"
 55
 56const DrawerHeader = ({
 57  className,
 58  ...props
 59}: React.HTMLAttributes<HTMLDivElement>) => (
 60  <div
 61    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
 62    {...props}
 63  />
 64)
 65DrawerHeader.displayName = "DrawerHeader"
 66
 67const DrawerFooter = ({
 68  className,
 69  ...props
 70}: React.HTMLAttributes<HTMLDivElement>) => (
 71  <div
 72    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 73    {...props}
 74  />
 75)
 76DrawerFooter.displayName = "DrawerFooter"
 77
 78const DrawerTitle = React.forwardRef<
 79  React.ElementRef<typeof DrawerPrimitive.Title>,
 80  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 81>(({ className, ...props }, ref) => (
 82  <DrawerPrimitive.Title
 83    ref={ref}
 84    className={cn(
 85      "text-lg font-semibold leading-none tracking-tight",
 86      className
 87    )}
 88    {...props}
 89  />
 90))
 91DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 92
 93const DrawerDescription = React.forwardRef<
 94  React.ElementRef<typeof DrawerPrimitive.Description>,
 95  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 96>(({ className, ...props }, ref) => (
 97  <DrawerPrimitive.Description
 98    ref={ref}
 99    className={cn("text-sm text-muted-foreground", className)}
100    {...props}
101  />
102))
103DrawerDescription.displayName = DrawerPrimitive.Description.displayName
104
105export {
106  Drawer,
107  DrawerPortal,
108  DrawerOverlay,
109  DrawerTrigger,
110  DrawerClose,
111  DrawerContent,
112  DrawerHeader,
113  DrawerFooter,
114  DrawerTitle,
115  DrawerDescription,
116}