sheet

1"use client"
2 
3import * as React from "react"
4import { Dialog as BaseSheet } from "@base-ui/react/dialog"
5import { XIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function Sheet({ ...props }: React.ComponentProps<typeof BaseSheet.Root>) {
10	return <BaseSheet.Root data-slot="sheet" {...props} />
11}
12 
13function SheetTrigger({
14	...props
15}: React.ComponentProps<typeof BaseSheet.Trigger>) {
16	return <BaseSheet.Trigger data-slot="sheet-trigger" {...props} />
17}
18 
19function SheetClose({
20	...props
21}: React.ComponentProps<typeof BaseSheet.Close>) {
22	return <BaseSheet.Close data-slot="sheet-close" {...props} />
23}
24 
25function SheetPortal({
26	...props
27}: React.ComponentProps<typeof BaseSheet.Portal>) {
28	return <BaseSheet.Portal data-slot="sheet-portal" {...props} />
29}
30 
31function SheetOverlay({
32	className,
33	...props
34}: React.ComponentProps<typeof BaseSheet.Backdrop>) {
35	return (
36		<BaseSheet.Backdrop
37			data-slot="sheet-overlay"
38			className={cn(
39				"fixed inset-0 bg-black/50 transition-all duration-200 [&[data-ending-style]]:opacity-0 [&[data-starting-style]]:opacity-0",
40				className
41			)}
42			{...props}
43		/>
44	)
45}
46 
47function SheetContent({
48	className,
49	children,
50	side = "right",
51	...props
52}: React.ComponentProps<typeof BaseSheet.Popup> & {
53	side?: "top" | "right" | "bottom" | "left"
54}) {
55	return (
56		<SheetPortal>
57			<SheetOverlay />
58			<BaseSheet.Popup
59				data-slot="sheet-content"
60				className={cn(
61					"bg-popover text-popover-foreground fixed z-50 flex max-h-[calc(100vh-2rem)] flex-col gap-4 rounded-lg shadow-lg outline-hidden transition ease-in-out data-closed:duration-200 data-open:duration-500",
62					side === "right" &&
63						"inset-y-0 top-4 right-0 h-full w-3/4 origin-right -translate-x-4 border sm:max-w-sm [&[data-ending-style]]:translate-x-full [&[data-starting-style]]:translate-x-full",
64					side === "left" &&
65						"inset-y-0 top-4 left-0 h-full w-3/4 origin-left translate-x-4 border sm:max-w-sm [&[data-ending-style]]:-translate-x-full [&[data-starting-style]]:-translate-x-full",
66					side === "top" &&
67						"inset-x-0 top-0 mx-auto h-auto w-[calc(100vw-2rem)] origin-top translate-y-4 border [&[data-ending-style]]:-translate-y-full [&[data-starting-style]]:-translate-y-full",
68					side === "bottom" &&
69						"inset-x-0 bottom-0 mx-auto h-auto w-[calc(100vw-2rem)] origin-bottom -translate-y-4 border [&[data-ending-style]]:translate-y-full [&[data-starting-style]]:translate-y-full",
70					className
71				)}
72				{...props}
73			>
74				{children}
75// … truncated