import * as SheetPrimitive from "@radix-ui/react-dialog"; import { cva, type VariantProps } from "class-variance-authority"; import { X } from "lucide-react"; import * as React from "react"; import classNames from "@calcom/lib/classNames"; const Sheet = SheetPrimitive.Root; const SheetTrigger = SheetPrimitive.Trigger; const SheetClose = SheetPrimitive.Close; const portalVariants = cva("fixed inset-0 z-50 flex", { variants: { position: { top: "items-start", bottom: "items-end", left: "justify-start", right: "justify-end", }, }, defaultVariants: { position: "right" }, }); interface SheetPortalProps extends SheetPrimitive.DialogPortalProps, VariantProps {} const SheetPortal = ({ position, className, children, ...props }: SheetPortalProps) => (
{children}
); SheetPortal.displayName = SheetPrimitive.Portal.displayName; const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( )); SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; const sheetVariants = cva( "fixed z-50 scale-100 gap-4 bg-default m-4 rounded-xl p-6 opacity-100 shadow-lg border", { variants: { position: { top: "animate-in slide-in-from-top w-full duration-200", bottom: "animate-in slide-in-from-bottom w-full duration-200", left: "animate-in slide-in-from-left h-full duration-200", right: "animate-in slide-in-from-right h-full duration-200", }, size: { content: "", default: "", sm: "", lg: "", xl: "", full: "", }, }, compoundVariants: [ { position: ["top", "bottom"], size: "content", class: "max-h-screen", }, { position: ["top", "bottom"], size: "default", class: "h-1/3", }, { position: ["top", "bottom"], size: "sm", class: "h-1/4", }, { position: ["top", "bottom"], size: "lg", class: "h-1/2", }, { position: ["top", "bottom"], size: "xl", class: "h-5/6", }, { position: ["top", "bottom"], size: "full", class: "h-screen", }, { position: ["right", "left"], size: "content", class: "max-w-screen", }, { position: ["right", "left"], size: "default", class: "w-1/3 max-h-[calc(100vh-2rem)]", }, { position: ["right", "left"], size: "sm", class: "w-1/4 max-h-[calc(100vh-2rem)]", }, { position: ["right", "left"], size: "lg", class: "w-1/2 h-[calc(100vh-2rem)]", }, { position: ["right", "left"], size: "xl", class: "w-5/6 h-[calc(100vh-2rem)]", }, { position: ["right", "left"], size: "full", class: "w-screen h-[calc(100vh-2rem)]", }, ], defaultVariants: { position: "right", size: "default", }, } ); export interface DialogContentProps extends React.ComponentPropsWithoutRef, VariantProps {} const SheetContent = React.forwardRef, DialogContentProps>( ({ position, size, className, children, ...props }, ref) => ( {children} Close ) ); SheetContent.displayName = SheetPrimitive.Content.displayName; const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (
); SheetHeader.displayName = "SheetHeader"; const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (
); SheetFooter.displayName = "SheetFooter"; const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetTitle.displayName = SheetPrimitive.Title.displayName; const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetDescription.displayName = SheetPrimitive.Description.displayName; export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };