Alert Dialog

1"use client";
2 
3import "./alert-dialog.css";
4import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
5import React from "react";
6import { cn } from "tailwind-variants";
7 
8import { AlertDialogContext, useAlertDialogContext } from "./alert-dialog.context";
9import { alertDialogVariants, type AlertDialogVariants } from "./alert-dialog.variants";
10 
11export type AlertDialogProps = AlertDialogVariants &
12  React.ComponentProps<typeof BaseAlertDialog.Root>;
13 
14export const AlertDialogRoot = ({ children, size, variant, ...props }: AlertDialogProps) => {
15  const slots = alertDialogVariants({ size, variant });
16 
17  return (
18    <AlertDialogContext.Provider value={{ slots }}>
19      <BaseAlertDialog.Root {...props}>{children}</BaseAlertDialog.Root>
20    </AlertDialogContext.Provider>
21  );
22};
23 
24export type AlertDialogTriggerProps = React.ComponentProps<typeof BaseAlertDialog.Trigger> & {
25  render?: React.ReactElement;
26  asChild?: boolean;
27};
28 
29export const AlertDialogTrigger = ({
30  className,
31  children,
32  render,
33  asChild: _asChild,
34  ...props
35}: AlertDialogTriggerProps) => {
36  const { slots } = useAlertDialogContext();
37  const renderElement = render ?? (React.isValidElement(children) ? children : undefined);
38  return (
39    <BaseAlertDialog.Trigger
40      className={cn(slots.trigger(), className)}
41      {...props}
42      {...(renderElement ? { render: renderElement } : { children })}
43    />
44  );
45};
46 
47export type AlertDialogPortalProps = React.ComponentProps<typeof BaseAlertDialog.Portal>;
48 
49export const AlertDialogPortal = (props: AlertDialogPortalProps) => {
50  return <BaseAlertDialog.Portal {...props} />;
51};
52 
53export type AlertDialogBackdropProps = React.ComponentProps<typeof BaseAlertDialog.Backdrop>;
54 
55export const AlertDialogBackdrop = ({ className, ...props }: AlertDialogBackdropProps) => {
56  const { slots } = useAlertDialogContext();
57  return <BaseAlertDialog.Backdrop className={cn(slots.backdrop(), className)} {...props} />;
58};
59 
60export const AlertDialogOverlay = AlertDialogBackdrop;
61export type AlertDialogOverlayProps = AlertDialogBackdropProps;
62 
63export type AlertDialogPopupProps = React.ComponentProps<typeof BaseAlertDialog.Popup>;
64 
65export const AlertDialogPopup = ({ className, ...props }: AlertDialogPopupProps) => {
66  const { slots } = useAlertDialogContext();
67  return <BaseAlertDialog.Popup className={cn(slots.popup(), className)} {...props} />;
68};
69 
70export type AlertDialogTitleProps = React.ComponentProps<typeof BaseAlertDialog.Title>;
71 
72// … truncated