"use client";
import * as React from "react";
import { Drawer as V } from "vaul";
import { cn } from "@/lib/utils";

export function Drawer({ shouldScaleBackground = true, ...p }: React.ComponentProps<typeof V.Root>) {
  return <V.Root shouldScaleBackground={shouldScaleBackground} {...p} />;
}
export const DrawerTrigger = V.Trigger;
export const DrawerPortal = V.Portal;
export const DrawerClose = V.Close;

export function DrawerOverlay({ className, ...p }: React.ComponentProps<typeof V.Overlay>) {
  return <V.Overlay className={cn("fixed inset-0 z-50 bg-overlay backdrop-blur-sm", className)} {...p} />;
}

export function DrawerContent({ className, children, ...p }: React.ComponentProps<typeof V.Content>) {
  return (
    <V.Portal>
      <DrawerOverlay />
      <V.Content
        className={cn(
          "fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85vh] flex-col rounded-t-xl bg-surface text-on-surface shadow-clay outline-none",
          className
        )}
        {...p}
      >
        <div aria-hidden className="mx-auto mt-4 h-2 w-16 shrink-0 rounded-full bg-surface-sunken shadow-well" />
        {children}
      </V.Content>
    </V.Portal>
  );
}
export function DrawerHeader({ className, ...p }: React.ComponentProps<"div">) {
  return <div className={cn("flex flex-col gap-1 p-6 text-center sm:text-left", className)} {...p} />;
}
export function DrawerFooter({ className, ...p }: React.ComponentProps<"div">) {
  return <div className={cn("mt-auto flex flex-col gap-2 p-6", className)} {...p} />;
}
export function DrawerTitle({ className, ...p }: React.ComponentProps<typeof V.Title>) {
  return <V.Title className={cn("text-xl font-extrabold tracking-tight", className)} {...p} />;
}
export function DrawerDescription({ className, ...p }: React.ComponentProps<typeof V.Description>) {
  return <V.Description className={cn("text-sm font-medium text-on-surface-muted", className)} {...p} />;
}
Installation
