UI Dialog

1"use client";
2 
3import { type RemocnTheme, useRemocnTheme } from "@/lib/remocn-ui";
4 
5export type DialogState = "opened" | "closed";
6 
7export interface DialogProps {
8  state?: DialogState;
9  style?: DialogStyle;
10  title?: string;
11  description?: string;
12  actionLabel?: string;
13  cancelLabel?: string;
14  theme?: Partial<RemocnTheme>;
15  className?: string;
16}
17 
18const POPUP_WIDTH = 440;
19const MAX_OVERLAY_ALPHA = 0.5;
20 
21export interface DialogStyle {
22  overlayOpacity: number;
23  popupOpacity: number;
24  popupScale: number;
25  popupTranslateY: number;
26}
27 
28export interface DialogStyleContext {
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 dialogStyleContext(theme: RemocnTheme): DialogStyleContext {
40  return {
41    popoverBg: theme.popover,
42    popoverFg: theme.popoverForeground,
43    mutedFg: theme.mutedForeground,
44    border: theme.border,
45    radius: theme.radius,
46    actionBg: theme.primary,
47    actionFg: theme.primaryForeground,
48    cancelFg: theme.foreground,
49  };
50}
51 
52export function dialogStyle(
53  state: DialogState,
54  _ctx: DialogStyleContext,
55): DialogStyle {
56  switch (state) {
57    case "opened":
58      return {
59        overlayOpacity: 1,
60        popupOpacity: 1,
61        popupScale: 1,
62        popupTranslateY: 0,
63      };
64    default:
65      return {
66        overlayOpacity: 0,
67        popupOpacity: 0,
68        popupScale: 0.95,
69        popupTranslateY: 8,
70      };
71  }
72}
73 
74export function Dialog({
75  state = "closed",
76  style,
77  title = "Edit profile",
78  description = "Make changes to your profile here. Click save when you're done.",
79  actionLabel = "Save changes",
80  cancelLabel = "Cancel",
81  theme: themeOverride,
82  className,
83}: DialogProps) {
84  const theme = useRemocnTheme(themeOverride, "light");
85 
86  const ctx = dialogStyleContext(theme);
87  const v = style ?? dialogStyle(state, ctx);
88 
89  const buttonBase: React.CSSProperties = {
90    height: 40,
91    padding: "0 20px",
92    fontSize: 15,
93    fontWeight: 500,
94    letterSpacing: "-0.01em",
95    borderRadius: ctx.radius,
96    display: "inline-flex",
97    alignItems: "center",
98    justifyContent: "center",
99    cursor: "pointer",
100  };
101 
102  return (
103    <div
104      style={{
105        position: "absolute",
106        inset: 0,
107        display: "flex",
108        alignItems: "center",
109        justifyContent: "center",
110        fontFamily:
111          "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
112// … truncated