drawer

1"use client"
2 
3import * as React from "react"
4import { Drawer as BaseDrawer } from "vaul-base"
5 
6import { cn } from "@/lib/utils"
7 
8function Drawer({ ...props }: React.ComponentProps<typeof BaseDrawer.Root>) {
9	return <BaseDrawer.Root data-slot="drawer" {...props} />
10}
11 
12function DrawerTrigger({
13	...props
14}: React.ComponentProps<typeof BaseDrawer.Trigger>) {
15	return <BaseDrawer.Trigger data-slot="drawer-trigger" {...props} />
16}
17 
18function DrawerPortal({
19	...props
20}: React.ComponentProps<typeof BaseDrawer.Portal>) {
21	return <BaseDrawer.Portal data-slot="drawer-portal" {...props} />
22}
23 
24function DrawerClose({
25	...props
26}: React.ComponentProps<typeof BaseDrawer.Close>) {
27	return <BaseDrawer.Close data-slot="drawer-close" {...props} />
28}
29 
30function DrawerOverlay({
31	className,
32	...props
33}: React.ComponentProps<typeof BaseDrawer.Overlay>) {
34	return (
35		<BaseDrawer.Overlay
36			data-slot="drawer-overlay"
37			className={cn(
38				"fixed inset-0 bg-black/50 transition-all duration-200 [&[data-ending-style]]:opacity-0 [&[data-starting-style]]:opacity-0",
39				className
40			)}
41			{...props}
42		/>
43	)
44}
45 
46function DrawerContent({
47	className,
48	children,
49	...props
50}: React.ComponentProps<typeof BaseDrawer.Content>) {
51	return (
52		<DrawerPortal>
53			<DrawerOverlay />
54			<BaseDrawer.Content
55				data-slot="drawer-content"
56				className={cn(
57					"group/drawer-content bg-popover text-popover-foreground fixed z-50 flex h-auto flex-col outline-none",
58					"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-lg data-[vaul-drawer-direction=top]:border-b",
59					"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
60					"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-lg data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
61// … truncated