Drawer

1"use client";
2 
3import { X } from "lucide-react";
4import * as React from "react";
5import { Drawer as DrawerPrimitive } from "vaul";
6 
7import { cn } from "@/lib/utils";
8 
9const controlCornerClassName =
10  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
11 
12const surfaceCornerClassName =
13  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]";
14 
15const drawerThemeClassName =
16  "[--drw-surface:var(--popover,#ffffff)] [--drw-foreground:var(--popover-foreground,#111111)] [--drw-border:var(--border,#e3e7ec)] [--drw-ring:var(--ring,rgba(17,17,17,0.16))] [--drw-muted-foreground:var(--muted-foreground,#6d7480)] [--drw-muted:var(--muted,#f5f7fa)] [--drw-destructive:var(--destructive,#dc2626)] [--drw-destructive-foreground:var(--destructive-foreground,#ffffff)] [--color-accent:var(--drw-muted)] [--color-accent-foreground:var(--drw-foreground)] dark:[--drw-surface:var(--popover,#0a0a0a)] dark:[--drw-foreground:var(--popover-foreground,#f6f3ec)] dark:[--drw-border:var(--border,#2b2a25)] dark:[--drw-ring:var(--ring,rgba(246,243,236,0.18))] dark:[--drw-muted-foreground:var(--muted-foreground,#9a958a)] dark:[--drw-muted:var(--muted,#1a1a18)] dark:[--drw-destructive:var(--destructive,#f87171)] dark:[--drw-destructive-foreground:var(--destructive-foreground,#111111)]";
17 
18const drawerContentSizeClassNames = {
19  sm: cn(
20    "data-[vaul-drawer-direction=bottom]:max-h-[60vh]",
21    "data-[vaul-drawer-direction=top]:max-h-[60vh]",
22    "data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
23    "data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm"
24  ),
25  default: cn(
26    "data-[vaul-drawer-direction=bottom]:max-h-[min(80svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]",
27    "data-[vaul-drawer-direction=top]:max-h-[min(80svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]",
28    "data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-md",
29    "data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-md"
30  ),
31  lg: cn(
32    "data-[vaul-drawer-direction=bottom]:max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))]",
33// … truncated