Drawer

1"use client";
2 
3import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
4import * as React from "react";
5 
6import { cn } from "@/lib/utils";
7 
8const Drawer = ({ ...props }: DrawerPrimitive.Root.Props) => (
9  <DrawerPrimitive.Root data-slot="drawer" {...props} />
10);
11 
12const DrawerTrigger = ({
13  asChild,
14  children,
15  ...props
16}: DrawerPrimitive.Trigger.Props & {
17  asChild?: boolean;
18}) => {
19  if (asChild && React.isValidElement(children)) {
20    return <DrawerPrimitive.Trigger data-slot="drawer-trigger" render={children} {...props} />;
21  }
22 
23  return (
24    <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props}>
25      {children}
26    </DrawerPrimitive.Trigger>
27  );
28};
29 
30const DrawerPortal = ({ ...props }: DrawerPrimitive.Portal.Props) => (
31  <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
32);
33 
34const DrawerClose = ({
35  asChild,
36  children,
37  ...props
38}: DrawerPrimitive.Close.Props & {
39  asChild?: boolean;
40}) => {
41  if (asChild && React.isValidElement(children)) {
42    return <DrawerPrimitive.Close data-slot="drawer-close" render={children} {...props} />;
43  }
44 
45  return (
46    <DrawerPrimitive.Close data-slot="drawer-close" {...props}>
47      {children}
48    </DrawerPrimitive.Close>
49  );
50};
51 
52const DrawerBackdrop = ({ className, ...props }: DrawerPrimitive.Backdrop.Props) => (
53  <DrawerPrimitive.Backdrop
54    className={cn(
55      "data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-overlay backdrop-blur-[10px] data-closed:animate-out data-open:animate-in data-closed:duration-300 data-open:duration-500 motion-reduce:transition-none",
56      className,
57    )}
58    data-slot="drawer-overlay"
59    {...props}
60  />
61);
62 
63const DrawerOverlay = DrawerBackdrop;
64 
65const DrawerViewport = ({ className, ...props }: DrawerPrimitive.Viewport.Props) => (
66  <DrawerPrimitive.Viewport
67    className={cn("fixed inset-0 z-50 outline-none", className)}
68    data-slot="drawer-viewport"
69    {...props}
70  />
71);
72 
73const DrawerPopup = ({ className, ...props }: DrawerPrimitive.Popup.Props) => (
74  <DrawerPrimitive.Popup
75    className={cn(
76      "group/drawer-content fixed z-50 flex h-auto flex-col bg-background shadow-lg transition ease-in-out data-closed:animate-out data-open:animate-in data-closed:duration-300 data-open:duration-500",
77// … truncated