drawer

1'use client';
2 
3/**
4 * CSS custom properties:
5 * --backdrop-opacity    Backdrop darkness at rest (default: 0.4)
6 *
7 * Slots: drawer, drawer-trigger, drawer-portal, drawer-backdrop,
8 *        drawer-viewport, drawer-popup, drawer-content,
9 *        drawer-title, drawer-description, drawer-close
10 */
11 
12import * as React from 'react';
13import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
14 
15import { cn } from '@/registry/lib/utils';
16 
17function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
18  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
19}
20 
21function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
22  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
23}
24 
25function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
26  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
27}
28 
29function DrawerBackdrop({ className, ...props }: DrawerPrimitive.Backdrop.Props) {
30  return (
31    <DrawerPrimitive.Backdrop
32      data-slot="drawer-backdrop"
33      className={cn(
34        '[--backdrop-opacity:0.4] fixed inset-0 z-40 bg-black',
35        'opacity-[calc(var(--backdrop-opacity)*(1-var(--drawer-swipe-progress)))]',
36        'transition-opacity duration-500 ease-out',
37        'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-[350ms]',
38        className
39      )}
40      {...props}
41    />
42  );
43}
44 
45function DrawerViewport({ className, ...props }: DrawerPrimitive.Viewport.Props) {
46  return (
47    <DrawerPrimitive.Viewport
48      data-slot="drawer-viewport"
49      className={cn('fixed inset-0 z-50 flex flex-col justify-end', className)}
50      {...props}
51    />
52  );
53}
54 
55function DrawerPopup({ className, ...props }: DrawerPrimitive.Popup.Props) {
56  return (
57    <DrawerPrimitive.Popup
58      data-slot="drawer-popup"
59      className={cn(
60        'w-full outline-none',
61        '[transform:translateY(var(--drawer-swipe-movement-y))]',
62        'transition-transform duration-500 ease-[cubic-bezier(0.45,1.005,0,1.005)]',
63        'data-[starting-style]:translate-y-full data-[ending-style]:translate-y-full',
64        'data-[ending-style]:duration-[350ms] data-[ending-style]:ease-in',
65        'data-[swiping]:select-none',
66        className
67      )}
68      {...props}
69    />
70  );
71}
72 
73function DrawerContent({ className, ...props }: DrawerPrimitive.Content.Props) {
74  return (
75    <DrawerPrimitive.Content
76      data-slot="drawer-content"
77      className={cn(
78// … truncated