UI Alert Dialog

1"use client";
2 
3import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type AlertDialogState = "closed" | "opened";
6 
7export interface AlertDialogProps {
8  state?: AlertDialogState;
9  style?: AlertDialogStyle;
10  title?: string;
11  description?: string;
12  actionLabel?: string;
13  cancelLabel?: string;
14  theme?: Partial<RemocnTheme>;
15  className?: string;
16}
17 
18const POPUP_WIDTH = 400;
19const MAX_OVERLAY_ALPHA = 0.5;
20 
21export interface AlertDialogStyle {
22  overlayOpacity: number;
23  popupOpacity: number;
24  popupScale: number;
25  popupTranslateY: number;
26}
27 
28export interface AlertDialogStyleContext {
29  popoverBg: string;
30  popoverFg: string;
31  mutedFg: string;
32  border: string;
33  radius: number;
34  actionBg: string;
35  actionFg: string;
36  cancelFg: string;
37}
38 
39export function alertDialogStyleContext(
40  theme: RemocnTheme,
41): AlertDialogStyleContext {
42  return {
43    popoverBg: theme.popover,
44    popoverFg: theme.popoverForeground,
45    mutedFg: theme.mutedForeground,
46    border: theme.border,
47    radius: theme.radius,
48    actionBg: theme.destructive,
49    actionFg: theme.destructiveForeground,
50    cancelFg: theme.foreground,
51  };
52}
53 
54export function alertDialogStyle(
55  state: AlertDialogState,
56  _ctx: AlertDialogStyleContext,
57): AlertDialogStyle {
58  switch (state) {
59    case "opened":
60      return {
61        overlayOpacity: 1,
62        popupOpacity: 1,
63        popupScale: 1,
64        popupTranslateY: 0,
65      };
66    default:
67      return {
68        overlayOpacity: 0,
69        popupOpacity: 0,
70        popupScale: 0.95,
71        popupTranslateY: 8,
72      };
73  }
74}
75 
76export function AlertDialog({
77  state = "closed",
78  style,
79  title = "Delete account?",
80  description = "This action cannot be undone. This will permanently remove your data from our servers.",
81  actionLabel = "Delete",
82  cancelLabel = "Cancel",
83  theme: themeOverride,
84  className,
85}: AlertDialogProps) {
86  const theme = useRemocnTheme(themeOverride, "light");
87 
88  const ctx = alertDialogStyleContext(theme);
89  const v = style ?? alertDialogStyle(state, ctx);
90 
91  const buttonBase: React.CSSProperties = {
92    height: 40,
93    padding: "0 20px",
94    fontSize: 15,
95    fontWeight: 500,
96    letterSpacing: "-0.01em",
97    borderRadius: ctx.radius,
98    display: "inline-flex",
99    alignItems: "center",
100    justifyContent: "center",
101    cursor: "pointer",
102  };
103 
104  return (
105    <div
106      style={{
107        position: "absolute",
108        inset: 0,
109        display: "flex",
110        alignItems: "center",
111// … truncated