| 57 | } |
| 58 | |
| 59 | function SheetPopup({ |
| 60 | className, |
| 61 | children, |
| 62 | showCloseButton = true, |
| 63 | side = "right", |
| 64 | inset = false, |
| 65 | ...props |
| 66 | }: SheetPrimitive.Popup.Props & { |
| 67 | showCloseButton?: boolean; |
| 68 | side?: "right" | "left" | "top" | "bottom"; |
| 69 | inset?: boolean; |
| 70 | }) { |
| 71 | return ( |
| 72 | <SheetPortal> |
| 73 | <SheetBackdrop /> |
| 74 | <SheetViewport inset={inset} side={side}> |
| 75 | <SheetPrimitive.Popup |
| 76 | className={cn( |
| 77 | "relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover bg-clip-padding text-popover-foreground shadow-lg transition-[opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]", |
| 78 | side === "bottom" && |
| 79 | "row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8", |
| 80 | side === "top" && |
| 81 | "data-ending-style:-translate-y-8 data-starting-style:-translate-y-8 border-b", |
| 82 | side === "left" && |
| 83 | "data-ending-style:-translate-x-8 data-starting-style:-translate-x-8 w-[calc(100%-(--spacing(12)))] max-w-md border-e", |
| 84 | side === "right" && |
| 85 | "col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8", |
| 86 | inset && |
| 87 | "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", |
| 88 | className, |
| 89 | )} |
| 90 | data-slot="sheet-popup" |
| 91 | {...props} |
| 92 | > |
| 93 | {children} |
| 94 | {showCloseButton && ( |
| 95 | <SheetPrimitive.Close |
| 96 | aria-label="Close" |
| 97 | className="absolute end-2 top-2" |
| 98 | render={<Button size="icon" variant="ghost" />} |
| 99 | > |
| 100 | <XIcon /> |
| 101 | </SheetPrimitive.Close> |
| 102 | )} |
| 103 | </SheetPrimitive.Popup> |
| 104 | </SheetViewport> |
| 105 | </SheetPortal> |
| 106 | ); |
| 107 | } |
| 108 | |
| 109 | function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { |
| 110 | return ( |