alert-dialog

1'use client';
2 
3import * as React from 'react';
4import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
5 
6import { cn } from '@/registry/lib/utils';
7import { Button } from '@/registry/ui/button';
8 
9function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
10  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
11}
12 
13function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
14  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
15}
16 
17function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
18  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
19}
20 
21function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
22  return (
23    <AlertDialogPrimitive.Backdrop
24      data-slot="alert-dialog-overlay"
25      className={cn(
26        'fixed inset-0 isolate z-50 bg-black/80 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
27        className
28      )}
29      {...props}
30    />
31  );
32}
33 
34function AlertDialogContent({
35  className,
36  size = 'default',
37  ...props
38}: AlertDialogPrimitive.Popup.Props & {
39  size?: 'default' | 'sm';
40}) {
41  return (
42    <AlertDialogPortal>
43      <AlertDialogOverlay />
44      <AlertDialogPrimitive.Popup
45        data-slot="alert-dialog-content"
46        data-size={size}
47        className={cn(
48          'group/alert-dialog-content overflow-hidden fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-lg bg-surface ring-1 ring-primary/15 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
49          className
50        )}
51        {...props}
52      />
53    </AlertDialogPortal>
54  );
55}
56 
57function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
58  return (
59    <div
60      data-slot="alert-dialog-header"
61      className={cn(
62// … truncated