MicroClub 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 '@/lib/utils';
7import { McButton } from '@/components/ui/mc-button';
8 
9function McAlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
10  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
11}
12 
13function McAlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
14  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
15}
16 
17function McAlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
18  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
19}
20 
21function McAlertDialogOverlay({ 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/10 duration-100 supports-backdrop-filter:backdrop-blur-xs 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 McAlertDialogContent({
35  className,
36  size = 'default',
37  ...props
38}: AlertDialogPrimitive.Popup.Props & {
39  size?: 'default' | 'sm';
40}) {
41  return (
42    <McAlertDialogPortal>
43      <McAlertDialogOverlay />
44      <AlertDialogPrimitive.Popup
45        data-slot="alert-dialog-content"
46        data-size={size}
47        className={cn(
48          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4',
49          'rounded-xl bg-background p-4 ring-1 ring-inset ring-border duration-100 outline-none shadow-[0px_4px_12px_-4px_#00000014] ',
50          'data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in',
51          'data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
52          className
53        )}
54        {...props}
55      />
56    </McAlertDialogPortal>
57  );
58}
59 
60function McAlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
61  return (
62    <div
63      data-slot="alert-dialog-footer"
64      className={cn(
65        ' mx-6 mb-6 mt-4 flex flex-col-reverse gap-2   ',
66        'group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 ',
67        'sm:flex-row sm:justify-end',
68        className
69      )}
70// … truncated