"use client" import * as React from "react" import * as SheetPrimitive from "@radix-ui/react-dialog" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" /** Root container that manages sheet open/close state. */ const Sheet = SheetPrimitive.Root /** Element that opens the sheet when clicked. */ const SheetTrigger = SheetPrimitive.Trigger /** Button that closes the sheet when clicked. */ const SheetClose = SheetPrimitive.Close /** Renders sheet content into a React portal outside the DOM tree. */ const SheetPortal = SheetPrimitive.Portal /** Semi-transparent backdrop behind the sheet content. */ const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetOverlay.displayName = SheetPrimitive.Overlay.displayName const sheetVariants = cva( "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", { variants: { side: { top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", }, }, defaultVariants: { side: "right", }, } ) interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps {} /** Slide-in panel that can appear from any edge of the viewport. */ const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps >(({ side = "right", className, children, ...props }, ref) => ( {children} Close )) SheetContent.displayName = SheetPrimitive.Content.displayName /** Flex container for sheet title and description at the top. */ const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

) SheetHeader.displayName = "SheetHeader" /** Bottom section of the sheet for action buttons. */ const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

) SheetFooter.displayName = "SheetFooter" /** Accessible heading rendered inside a SheetHeader. */ const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetTitle.displayName = SheetPrimitive.Title.displayName /** Muted description text rendered below the SheetTitle. */ const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SheetDescription.displayName = SheetPrimitive.Description.displayName export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, }