| ... | ... | @@ -4,6 +4,7 @@ import type { ComponentProps, ReactNode } from "react"; |
| 4 | 4 | import { cn } from "../../lib/utils"; |
| 5 | 5 | import { AnimatedHeight } from "../AnimatedHeight"; |
| 6 | 6 | import { DialogPopup, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "./dialog"; |
| 7 | import { ScrollArea } from "./scroll-area"; |
| 7 | 8 | |
| 8 | 9 | /** Compose a wizard from its header, panel, and footer; flow logic stays with the caller. */ |
| 9 | 10 | export function WizardPopup({ |
| ... | ... | @@ -14,14 +15,10 @@ export function WizardPopup({ |
| 14 | 15 | readonly size?: "default" | "wide"; |
| 15 | 16 | }) { |
| 16 | 17 | return ( |
| 17 | | <DialogPopup |
| 18 | | {...props} |
| 19 | | className={cn( |
| 20 | | "overflow-x-hidden overflow-y-auto", |
| 21 | | size === "wide" ? "max-w-3xl" : "max-w-xl", |
| 22 | | )} |
| 23 | | > |
| 24 | | <div className="flex min-h-0 flex-col">{children}</div> |
| 18 | <DialogPopup {...props} className={size === "wide" ? "max-w-3xl" : "max-w-xl"}> |
| 19 | <ScrollArea className="*:data-[slot=scroll-area-scrollbar]:data-[orientation=vertical]:my-4"> |
| 20 | <div className="flex min-h-0 flex-col">{children}</div> |
| 21 | </ScrollArea> |
| 25 | 22 | </DialogPopup> |
| 26 | 23 | ); |
| 27 | 24 | } |