Sheet

1"use client";
2 
3import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
4import { tv, type VariantProps } from "tailwind-variants";
5import { XIcon } from "lucide-react";
6 
7import { cn } from "@/lib/classes";
8 
9interface SheetProps extends SheetPrimitive.Root.Props {}
10 
11function Sheet(props: SheetProps) {
12  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
13}
14 
15interface SheetTriggerProps extends SheetPrimitive.Trigger.Props {}
16 
17function SheetTrigger(props: SheetTriggerProps) {
18  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
19}
20 
21interface SheetCloseProps extends SheetPrimitive.Close.Props {}
22 
23function SheetClose(props: SheetCloseProps) {
24  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
25}
26 
27interface SheetPortalProps extends SheetPrimitive.Portal.Props {}
28 
29function SheetPortal(props: SheetPortalProps) {
30  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
31}
32 
33interface SheetBackdropProps extends SheetPrimitive.Backdrop.Props {}
34 
35function SheetBackdrop({ className, ...props }: SheetBackdropProps) {
36  return (
37    <SheetPrimitive.Backdrop
38      data-slot="sheet-backdrop"
39      className={cn(
40        "fixed inset-0 bg-black/32 backdrop-blur-sm z-50 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute",
41        className
42      )}
43      {...props}
44    />
45  );
46}
47 
48const sheetVariants = tv({
49  slots: {
50    viewport: "fixed inset-0 z-50 flex",
51    popup: "group bg-background flex flex-col gap-4 min-h-0 max-h-full",
52  },
53  variants: {
54    side: {
55      right: {
56        viewport: "justify-end",
57        popup:
58          "w-3/4 border-l sm:max-w-sm [transition-property:translate,opacity,scale,border-radius] will-change-[translate,opacity,scale,border-radius] duration-300 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-starting-style:opacity-0 data-starting-style:translate-x-full data-ending-style:opacity-0 data-ending-style:translate-x-full opacity-[calc(1-var(--nested-dialogs)*0.25)] -translate-x-[calc(2.5rem*var(--nested-dialogs))] scale-[calc(1-0.15*var(--nested-dialogs))] data-nested-dialog-open:rounded-lg",
59      },
60      left: {
61        viewport: "justify-start",
62        popup:
63// … truncated