Sheet

1"use client";
2 
3import { X } from "@phosphor-icons/react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { Dialog as DialogPrimitive } from "radix-ui";
6import * as React from "react";
7 
8import { type MaterialAxisProps, type MaterialProps, materialSurface, splitAxisProps } from "@/lib/material";
9import { cn } from "@/lib/utils";
10 
11/* Role: bordered adaptive glass at the elevated blur tier. */
12const ROLE: MaterialProps = {
13  border: true,
14  size: "lg",
15};
16 
17const Sheet = DialogPrimitive.Root;
18 
19const SheetTrigger = DialogPrimitive.Trigger;
20 
21const SheetClose = DialogPrimitive.Close;
22 
23const SheetPortal = DialogPrimitive.Portal;
24 
25const SheetOverlay = React.forwardRef<
26  React.ElementRef<typeof DialogPrimitive.Overlay>,
27  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
28>(({ className, ...props }, ref) => (
29  <DialogPrimitive.Overlay
30    data-slot="sheet-overlay"
31    className={cn(
32      "fixed inset-0 z-50 bg-transparent backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
33      className,
34    )}
35    {...props}
36    ref={ref}
37  />
38));
39SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
40 
41const sheetVariants = cva(
42  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
43  {
44    variants: {
45      side: {
46        top: "inset-x-0 top-0 rounded-b-xl border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
47        bottom: "inset-x-0 bottom-0 rounded-t-xl border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
48        left: "inset-y-0 left-0 h-full w-3/4 rounded-r-xl border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
49        right:
50          "inset-y-0 right-0 h-full w-3/4 rounded-l-xl border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
51      },
52    },
53    defaultVariants: {
54      side: "right",
55    },
56  },
57);
58 
59interface SheetContentProps
60  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
61    VariantProps<typeof sheetVariants>,
62    MaterialAxisProps {
63  variant?: "default" | "glass";
64  showCloseButton?: boolean;
65}
66 
67const SheetContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, SheetContentProps>(
68// … truncated