Alert Dialog

1"use client";2​3import * as React from "react";4import { AlertDialog as AlertDialogPrimitive } from "radix-ui";5​6import { buttonVariants } from "@/components/ui/button";7import { usePortalContainer } from "@/lib/surface";8import { cn } from "@/lib/utils";9​10// A confirmation, drawn as the console's dialog (Figma 427:2715: Create Agent Identity, @test-agent is ready!): a white11// panel with 16px corners over the blurred, ink-tinted page, a 20px regular title and a 14px secondary line, 24px of12// padding, then the actions: the cancel as the lilac pill and the action as the purple pill (red for a destructive13// one), side by side at the end, stacked full width on phones. `size="sm"` is a 320px card with the title centered14// under an optional media tile (AlertDialogMedia). It has no close glyph: the person answers it. Opens from 96 percent15// with a fade, centered; closes faster.16function AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {17  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;18}19​20function AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {21  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;22}23​24function AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {25  const container = usePortalContainer();26  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" container={container} {...props} />;27}28​29function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {30  return (31    <AlertDialogPrimitive.Overlay32      data-slot="alert-dialog-overlay"33      className={cn("fixed inset-0 z-50 bg-scrim backdrop-blur-[var(--ds-blur-scrim)] data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in", className)}34      {...props}35    />36  );37}38​39function AlertDialogContent({ className, size = "default", ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & { size?: "default" | "sm" }) {40  return (41    <AlertDialogPortal>42      <AlertDialogOverlay />43      <AlertDialogPrimitive.Content44        data-slot="alert-dialog-content"45        data-size={size}46        className={cn(47          "group/alert-dialog fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 overflow-y-auto rounded-dialog bg-surface p-6 text-fg outline-none data-[size=default]:max-w-112 data-[size=sm]:max-w-80 data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in",48          className,49        )}50        {...props}51      />52    </AlertDialogPortal>53  );54}55​56function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {57  return <div data-slot="alert-dialog-header" className={cn("grid gap-1.5 group-data-[size=sm]/alert-dialog:justify-items-center group-data-[size=sm]/alert-dialog:text-center", className)} {...props} />;58}59​60function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {61  return (62    <div63      data-slot="alert-dialog-footer"64      className={cn("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end group-data-[size=sm]/alert-dialog:grid group-data-[size=sm]/alert-dialog:grid-cols-2 group-data-[size=sm]/alert-dialog:[&>*]:w-full", className)}65      {...props}66    />67  );68}69​70/** A 48px tile above the title (the console's pink channel tile): put a filled glyph inside. */71function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {72  return <div data-slot="alert-dialog-media" className={cn("mb-1.5 inline-flex size-12 items-center justify-center rounded-control bg-pink text-rose [&_svg:not([class*='size-'])]:size-7", className)} {...props} />;73}74​75function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {76  return <AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={cn("font-sans text-h3 leading-heading font-normal text-fg", className)} {...props} />;77}78​79function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {80  return <AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={cn("text-body leading-body text-fg-secondary", className)} {...props} />;81}82​83function AlertDialogAction({ className, variant = "default", ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & { variant?: "default" | "destructive" }) {84  return <AlertDialogPrimitive.Action data-slot="alert-dialog-action" className={cn(buttonVariants({ variant }), className)} {...props} />;85}86​87function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {88  return <AlertDialogPrimitive.Cancel data-slot="alert-dialog-cancel" className={cn(buttonVariants({ variant: "secondary" }), className)} {...props} />;89}90​91export {92  AlertDialog,93  AlertDialogAction,94  AlertDialogCancel,95  AlertDialogContent,96  AlertDialogDescription,97  AlertDialogFooter,98  AlertDialogHeader,99  AlertDialogMedia,100  AlertDialogOverlay,101  AlertDialogPortal,102  AlertDialogTitle,103  AlertDialogTrigger,104};