"use client"; import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"; import { cn } from "~/lib/utils"; const AlertDialogCreateHandle = AlertDialogPrimitive.createHandle; const AlertDialog = AlertDialogPrimitive.Root; const AlertDialogPortal = AlertDialogPrimitive.Portal; function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) { return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;} function AlertDialogBackdrop({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) { return ( <AlertDialogPrimitive.Backdrop className={cn( "fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className, )} data-slot="alert-dialog-backdrop" {...props} /> );} function AlertDialogViewport({ className, ...props }: AlertDialogPrimitive.Viewport.Props) { return ( <AlertDialogPrimitive.Viewport className={cn( "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 p-4 backdrop-blur-[2px] dark:bg-black/28", className, )} data-slot="alert-dialog-viewport" {...props} /> );} function AlertDialogPopup({ className, bottomStickOnMobile = true, ...props}: AlertDialogPrimitive.Popup.Props & { bottomStickOnMobile?: boolean;}) { return ( <AlertDialogPortal> <AlertDialogBackdrop /> <AlertDialogViewport className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")} > <AlertDialogPrimitive.Popup className={cn( "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", bottomStickOnMobile && "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none", className, )} data-slot="alert-dialog-popup" {...props} /> </AlertDialogViewport> </AlertDialogPortal> );} function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) { return ( <div className={cn("flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left", className)} data-slot="alert-dialog-header" {...props} /> );} function AlertDialogFooter({ className, variant = "default", ...props}: React.ComponentProps<"div"> & { variant?: "default" | "bare";}) { return ( <div className={cn( "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "default" && "border-t bg-muted/72 py-4", variant === "bare" && "pb-6", className, )} data-slot="alert-dialog-footer" {...props} /> );} function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) { return ( <AlertDialogPrimitive.Title className={cn("font-heading font-semibold text-xl leading-none", className)} data-slot="alert-dialog-title" {...props} /> );} function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) { return ( <AlertDialogPrimitive.Description className={cn("text-muted-foreground text-sm", className)} data-slot="alert-dialog-description" {...props} /> );} function AlertDialogClose(props: AlertDialogPrimitive.Close.Props) { return <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />;} export { AlertDialogCreateHandle, AlertDialog, AlertDialogPortal, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogTrigger, AlertDialogPopup, AlertDialogPopup as AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, AlertDialogViewport,};
"use client";
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
import { cn } from "~/lib/utils";
const AlertDialogCreateHandle = AlertDialogPrimitive.createHandle;
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {
return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
}
function AlertDialogBackdrop({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
return (
<AlertDialogPrimitive.Backdrop
className={cn(
"fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
className,
)}
data-slot="alert-dialog-backdrop"
{...props}
/>
);
}
function AlertDialogViewport({ className, ...props }: AlertDialogPrimitive.Viewport.Props) {
return (
<AlertDialogPrimitive.Viewport
className={cn(
"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center bg-white/48 p-4 backdrop-blur-[2px] dark:bg-black/28",
className,
)}
data-slot="alert-dialog-viewport"
{...props}
/>
);
}
function AlertDialogPopup({
className,
bottomStickOnMobile = true,
...props
}: AlertDialogPrimitive.Popup.Props & {
bottomStickOnMobile?: boolean;
}) {
return (
<AlertDialogPortal>
<AlertDialogBackdrop />
<AlertDialogViewport
className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}
>
<AlertDialogPrimitive.Popup
className={cn(
"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
bottomStickOnMobile &&
"max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
className,
)}
data-slot="alert-dialog-popup"
{...props}
/>
</AlertDialogViewport>
</AlertDialogPortal>
);
}
function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
className={cn("flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left", className)}
data-slot="alert-dialog-header"
{...props}
/>
);
}
function AlertDialogFooter({
className,
variant = "default",
...props
}: React.ComponentProps<"div"> & {
variant?: "default" | "bare";
}) {
return (
<div
className={cn(
"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",
variant === "default" && "border-t bg-muted/72 py-4",
variant === "bare" && "pb-6",
className,
)}
data-slot="alert-dialog-footer"
{...props}
/>
);
}
function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {
return (
<AlertDialogPrimitive.Title
className={cn("font-heading font-semibold text-xl leading-none", className)}
data-slot="alert-dialog-title"
{...props}
/>
);
}
function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {
return (
<AlertDialogPrimitive.Description
className={cn("text-muted-foreground text-sm", className)}
data-slot="alert-dialog-description"
{...props}
/>
);
}
function AlertDialogClose(props: AlertDialogPrimitive.Close.Props) {
return <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />;
}
export {
AlertDialogCreateHandle,
AlertDialog,
AlertDialogPortal,
AlertDialogBackdrop,
AlertDialogBackdrop as AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogPopup,
AlertDialogPopup as AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogClose,
AlertDialogViewport,
};