Drawer

1import * as React from "react"
2import { Drawer as DrawerPrimitive } from "vaul"
3 
4import { cn } from "@/registry/lib/surface"
5import { ThemedPortalShell } from "@/registry/lib/portal-container"
6 
7function Drawer({
8  ...props
9}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
10  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
11}
12 
13function DrawerTrigger({
14  ...props
15}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
16  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
17}
18 
19function DrawerPortal({
20  ...props
21}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
22  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
23}
24 
25function DrawerClose({
26  ...props
27}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
28  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
29}
30 
31function DrawerOverlay({
32  className,
33  ...props
34}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
35  return (
36    <DrawerPrimitive.Overlay
37      data-slot="drawer-overlay"
38      className={cn(
39        "fixed inset-0 z-50 bg-foreground/24 duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
40        className
41      )}
42      {...props}
43    />
44  )
45}
46 
47function DrawerContent({
48  className,
49  children,
50  ...props
51}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
52  return (
53    <DrawerPortal data-slot="drawer-portal">
54      <ThemedPortalShell>
55        <DrawerOverlay />
56        <DrawerPrimitive.Content
57          data-slot="drawer-content"
58          className={cn(
59// … truncated