@windrun-huaiin/third-ui 29.0.4 → 29.2.0

package/dist/fuma/base/custom-header.js

@@ -137,11 +137,14 @@ function CustomNavbar(_a) {
         : '88rem';
     const minNavWidth = '15rem';
     const widthStyle = floating
-        ? { width: `clamp(${minNavWidth}, 100vw, ${resolvedMaxWidth})` }
+        ? {
+            width: `min(calc(100vw - 1rem), ${resolvedMaxWidth})`,
+            maxWidth: resolvedMaxWidth,
+        }
         : { width: '100%', maxWidth: resolvedMaxWidth, minWidth: minNavWidth };
     const headerStyle = Object.assign(Object.assign(Object.assign({}, cssVars), widthStyle), style);
-    return (jsxRuntime.jsx(navigationMenu.NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: jsxRuntime.jsxs("header", Object.assign({}, props, { style: headerStyle, className: utils.cn('rounded-2xl border px-4 py-1 transition-[background-color,box-shadow,transform] duration-300 backdrop-blur-xl shadow-lg shadow-black/5', floating
-                ? 'fixed left-1/2 top-[--fd-banner-height] z-1001 -translate-x-1/2'
+    return (jsxRuntime.jsx(navigationMenu.NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: jsxRuntime.jsxs("header", Object.assign({}, props, { style: headerStyle, className: utils.cn('rounded-2xl border px-4 py-1 transition-[background-color,box-shadow] duration-300 backdrop-blur-xl shadow-lg shadow-black/5', floating
+                ? 'fixed inset-x-0 top-[--fd-banner-height] z-1001 mx-auto'
                 : 'relative mx-auto w-full', 'border border-fd-border/60 bg-white/85 dark:border-white/20 dark:bg-neutral-900/75', value.length > 0 &&
                 'max-lg:rounded-b-3xl border-fd-border/60 bg-white dark:border-white/20 dark:bg-neutral-900', className), children: [jsxRuntime.jsx(navigationMenu.NavigationMenuList, { className: "flex w-full items-center gap-4 px-1", style: { height: 'var(--fd-header-height)' }, asChild: true, children: jsxRuntime.jsx("nav", { children: props.children }) }), jsxRuntime.jsx(navigationMenu.NavigationMenuViewport, {})] })) }));
 }

package/dist/fuma/base/custom-header.mjs

@@ -135,11 +135,14 @@ function CustomNavbar(_a) {
         : '88rem';
     const minNavWidth = '15rem';
     const widthStyle = floating
-        ? { width: `clamp(${minNavWidth}, 100vw, ${resolvedMaxWidth})` }
+        ? {
+            width: `min(calc(100vw - 1rem), ${resolvedMaxWidth})`,
+            maxWidth: resolvedMaxWidth,
+        }
         : { width: '100%', maxWidth: resolvedMaxWidth, minWidth: minNavWidth };
     const headerStyle = Object.assign(Object.assign(Object.assign({}, cssVars), widthStyle), style);
-    return (jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: jsxs("header", Object.assign({}, props, { style: headerStyle, className: cn('rounded-2xl border px-4 py-1 transition-[background-color,box-shadow,transform] duration-300 backdrop-blur-xl shadow-lg shadow-black/5', floating
-                ? 'fixed left-1/2 top-[--fd-banner-height] z-1001 -translate-x-1/2'
+    return (jsx(NavigationMenu, { value: value, onValueChange: setValue, asChild: true, children: jsxs("header", Object.assign({}, props, { style: headerStyle, className: cn('rounded-2xl border px-4 py-1 transition-[background-color,box-shadow] duration-300 backdrop-blur-xl shadow-lg shadow-black/5', floating
+                ? 'fixed inset-x-0 top-[--fd-banner-height] z-1001 mx-auto'
                 : 'relative mx-auto w-full', 'border border-fd-border/60 bg-white/85 dark:border-white/20 dark:bg-neutral-900/75', value.length > 0 &&
                 'max-lg:rounded-b-3xl border-fd-border/60 bg-white dark:border-white/20 dark:bg-neutral-900', className), children: [jsx(NavigationMenuList, { className: "flex w-full items-center gap-4 px-1", style: { height: 'var(--fd-header-height)' }, asChild: true, children: jsx("nav", { children: props.children }) }), jsx(NavigationMenuViewport, {})] })) }));
 }

package/dist/main/alert-dialog/confirm-dialog.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { DialogLoadingAction, DialogActionHandler } from './dialog-loading-action';
 export type ConfirmDialogType = 'normal' | 'danger';
+export type ConfirmDialogEmphasis = 'confirm' | 'cancel';
 interface ConfirmDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -8,8 +10,10 @@ interface ConfirmDialogProps {
     description: React.ReactNode;
     cancelText?: string;
     confirmText?: string;
-    onCancel?: () => void;
-    onConfirm?: () => void;
+    emphasis?: ConfirmDialogEmphasis;
+    loadingActions?: readonly DialogLoadingAction[];
+    onCancel?: DialogActionHandler;
+    onConfirm?: DialogActionHandler;
 }
-export declare function ConfirmDialog({ open, onOpenChange, type, title, description, cancelText, confirmText, onCancel, onConfirm, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, type, title, description, cancelText, confirmText, emphasis, loadingActions, onCancel, onConfirm, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/alert-dialog/confirm-dialog.js

@@ -7,6 +7,7 @@ var lib = require('@windrun-huaiin/base-ui/lib');
 var ui = require('@windrun-huaiin/base-ui/ui');
 var utils = require('@windrun-huaiin/lib/utils');
 var dialogStyles = require('./dialog-styles.js');
+var dialogLoadingAction = require('./dialog-loading-action.js');
 
 const confirmTypeClassMap = {
     normal: {
@@ -24,17 +25,21 @@ const confirmTypeClassMap = {
         Icon: icons.CircleAlertIcon,
     },
 };
-function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', onCancel, onConfirm, }) {
+function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', emphasis = 'confirm', loadingActions, onCancel, onConfirm, }) {
     const typeClass = confirmTypeClassMap[type];
     const Icon = typeClass.Icon;
+    const cancelButtonClass = emphasis === 'cancel' ? typeClass.action : dialogStyles.secondaryButtonClass;
+    const confirmButtonClass = emphasis === 'cancel' ? dialogStyles.secondaryButtonClass : typeClass.action;
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
     const handleCancel = () => {
+        void runDialogAction('cancel', onCancel);
+    };
+    const handleClose = () => {
         onOpenChange(false);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleCancel, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleCancel, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx(ui.AlertDialogCancel, { className: dialogStyles.secondaryButtonClass, onClick: handleCancel, children: cancelText }), jsxRuntime.jsx(ui.AlertDialogAction, { className: typeClass.action, onClick: () => {
-                                onOpenChange(false);
-                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-                            }, children: confirmText })] })] }) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx(ui.AlertDialogCancel, { className: cancelButtonClass, onClick: handleCancel, children: cancelText }), jsxRuntime.jsx(ui.AlertDialogAction, { className: confirmButtonClass, onClick: () => {
+                                        void runDialogAction('confirm', onConfirm);
+                                    }, children: confirmText })] })] }) }), dialogLoading] }));
 }
 
 exports.ConfirmDialog = ConfirmDialog;

package/dist/main/alert-dialog/confirm-dialog.mjs

@@ -1,10 +1,11 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { CircleAlertIcon, CircleQuestionMarkIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeBgColor, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from '@windrun-huaiin/base-ui/ui';
 import { cn } from '@windrun-huaiin/lib/utils';
-import { dangerButtonClass, primaryButtonClass, dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, secondaryButtonClass, dialogContentClass } from './dialog-styles.mjs';
+import { dangerButtonClass, primaryButtonClass, secondaryButtonClass, dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
+import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
 const confirmTypeClassMap = {
     normal: {
@@ -22,17 +23,21 @@ const confirmTypeClassMap = {
         Icon: CircleAlertIcon,
     },
 };
-function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', onCancel, onConfirm, }) {
+function ConfirmDialog({ open, onOpenChange, type = 'normal', title, description, cancelText = 'Cancel', confirmText = 'Confirm', emphasis = 'confirm', loadingActions, onCancel, onConfirm, }) {
     const typeClass = confirmTypeClassMap[type];
     const Icon = typeClass.Icon;
+    const cancelButtonClass = emphasis === 'cancel' ? typeClass.action : secondaryButtonClass;
+    const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : typeClass.action;
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
     const handleCancel = () => {
+        void runDialogAction('cancel', onCancel);
+    };
+    const handleClose = () => {
         onOpenChange(false);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleCancel, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleCancel, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx(AlertDialogCancel, { className: secondaryButtonClass, onClick: handleCancel, children: cancelText }), jsx(AlertDialogAction, { className: typeClass.action, onClick: () => {
-                                onOpenChange(false);
-                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-                            }, children: confirmText })] })] }) }));
+    return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx(AlertDialogCancel, { className: cancelButtonClass, onClick: handleCancel, children: cancelText }), jsx(AlertDialogAction, { className: confirmButtonClass, onClick: () => {
+                                        void runDialogAction('confirm', onConfirm);
+                                    }, children: confirmText })] })] }) }), dialogLoading] }));
 }
 
 export { ConfirmDialog };

package/dist/main/alert-dialog/dialog-loading-action.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type DialogLoadingAction = 'cancel' | 'confirm' | 'undo';
+export type DialogActionHandler = () => void | Promise<void>;
+interface UseDialogLoadingActionOptions {
+    loadingActions?: readonly DialogLoadingAction[];
+    onOpenChange: (open: boolean) => void;
+}
+export declare function useDialogLoadingAction({ loadingActions, onOpenChange, }: UseDialogLoadingActionOptions): {
+    dialogLoading: React.ReactPortal | null;
+    runDialogAction: (action: DialogLoadingAction, handler?: DialogActionHandler) => Promise<void>;
+};
+export {};

package/dist/main/alert-dialog/dialog-loading-action.js

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var loading = require('../loading.js');
+
+function useDialogLoadingAction({ loadingActions, onOpenChange, }) {
+    const [mounted, setMounted] = React.useState(false);
+    const [loading$1, setLoading] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    const runDialogAction = React.useCallback((action, handler) => tslib.__awaiter(this, void 0, void 0, function* () {
+        onOpenChange(false);
+        if (!handler) {
+            return;
+        }
+        if (!(loadingActions === null || loadingActions === void 0 ? void 0 : loadingActions.includes(action))) {
+            yield handler();
+            return;
+        }
+        setLoading(true);
+        try {
+            yield handler();
+        }
+        finally {
+            setLoading(false);
+        }
+    }), [loadingActions, onOpenChange]);
+    const dialogLoading = mounted && loading$1
+        ? reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000", children: jsxRuntime.jsx(loading.Loading, { className: "h-full w-full" }) }), document.body)
+        : null;
+    return {
+        dialogLoading,
+        runDialogAction,
+    };
+}
+
+exports.useDialogLoadingAction = useDialogLoadingAction;

package/dist/main/alert-dialog/dialog-loading-action.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { __awaiter } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { createPortal } from 'react-dom';
+import { Loading } from '../loading.mjs';
+
+function useDialogLoadingAction({ loadingActions, onOpenChange, }) {
+    const [mounted, setMounted] = React__default.useState(false);
+    const [loading, setLoading] = React__default.useState(false);
+    React__default.useEffect(() => {
+        setMounted(true);
+    }, []);
+    const runDialogAction = React__default.useCallback((action, handler) => __awaiter(this, void 0, void 0, function* () {
+        onOpenChange(false);
+        if (!handler) {
+            return;
+        }
+        if (!(loadingActions === null || loadingActions === void 0 ? void 0 : loadingActions.includes(action))) {
+            yield handler();
+            return;
+        }
+        setLoading(true);
+        try {
+            yield handler();
+        }
+        finally {
+            setLoading(false);
+        }
+    }), [loadingActions, onOpenChange]);
+    const dialogLoading = mounted && loading
+        ? createPortal(jsx("div", { className: "fixed inset-0 z-10000", children: jsx(Loading, { className: "h-full w-full" }) }), document.body)
+        : null;
+    return {
+        dialogLoading,
+        runDialogAction,
+    };
+}
+
+export { useDialogLoadingAction };

package/dist/main/alert-dialog/high-priority-confirm-dialog.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
+import { DialogLoadingAction, DialogActionHandler } from "./dialog-loading-action";
 interface HighPriorityConfirmDialogProps {
     open: boolean;
-    onCancel: () => void;
-    onConfirm: () => void;
+    onOpenChange: (open: boolean) => void;
+    onCancel: DialogActionHandler;
+    onConfirm: DialogActionHandler;
     title: string;
     description: React.ReactNode;
     confirmText?: string;
     cancelText?: string;
+    loadingActions?: readonly DialogLoadingAction[];
 }
-export declare function HighPriorityConfirmDialog({ open, onCancel, onConfirm, title, description, confirmText, cancelText, }: HighPriorityConfirmDialogProps): React.ReactPortal | null;
+export declare function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText, cancelText, loadingActions, }: HighPriorityConfirmDialogProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/main/alert-dialog/high-priority-confirm-dialog.js

@@ -8,16 +8,25 @@ var icons = require('@windrun-huaiin/base-ui/icons');
 var utils = require('@windrun-huaiin/lib/utils');
 var dialogStyles = require('./dialog-styles.js');
 var lib = require('@windrun-huaiin/base-ui/lib');
+var dialogLoadingAction = require('./dialog-loading-action.js');
 
-function HighPriorityConfirmDialog({ open, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", }) {
+function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", loadingActions, }) {
     const [mounted, setMounted] = React.useState(false);
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
     React.useEffect(() => {
         // Ensure portal target exists and prevent hydration mismatch
         setTimeout(() => setMounted(true), 0);
     }, []);
-    if (!open || !mounted)
-        return null;
-    return reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxRuntime.jsxs("div", { className: utils.cn(dialogStyles.highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsxs("h3", { className: dialogStyles.highPriorityTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', lib.themeBgColor, lib.themeBorderColor), children: jsxRuntime.jsx(icons.FAQSIcon, { className: utils.cn('size-5', lib.themeIconColor) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: onCancel, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx("div", { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx("button", { type: "button", onClick: onCancel, className: dialogStyles.secondaryButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: onConfirm, className: utils.cn(dialogStyles.primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body);
+    if (!mounted)
+        return dialogLoading;
+    const handleClose = () => {
+        onOpenChange(false);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [open && reactDom.createPortal(jsxRuntime.jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxRuntime.jsxs("div", { className: utils.cn(dialogStyles.highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsxs("h3", { className: dialogStyles.highPriorityTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', lib.themeBgColor, lib.themeBorderColor), children: jsxRuntime.jsx(icons.FAQSIcon, { className: utils.cn('size-5', lib.themeIconColor) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx("div", { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsxs("div", { className: dialogStyles.dialogFooterClass, children: [jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                        void runDialogAction('cancel', onCancel);
+                                    }, className: dialogStyles.secondaryButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                        void runDialogAction('confirm', onConfirm);
+                                    }, className: utils.cn(dialogStyles.primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body), dialogLoading] }));
 }
 
 exports.HighPriorityConfirmDialog = HighPriorityConfirmDialog;

package/dist/main/alert-dialog/high-priority-confirm-dialog.mjs

@@ -1,21 +1,30 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { FAQSIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { dialogHeaderClass, highPriorityTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, secondaryButtonClass, primaryButtonClass, highPrioritySurfaceClass } from './dialog-styles.mjs';
 import { themeIconColor, themeBgColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
+import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
-function HighPriorityConfirmDialog({ open, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", }) {
+function HighPriorityConfirmDialog({ open, onOpenChange, onCancel, onConfirm, title, description, confirmText = "Confirm", cancelText = "Cancel", loadingActions, }) {
     const [mounted, setMounted] = useState(false);
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
     useEffect(() => {
         // Ensure portal target exists and prevent hydration mismatch
         setTimeout(() => setMounted(true), 0);
     }, []);
-    if (!open || !mounted)
-        return null;
-    return createPortal(jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxs("div", { className: cn(highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: dialogHeaderClass, children: [jsxs("h3", { className: highPriorityTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor), children: jsx(FAQSIcon, { className: cn('size-5', themeIconColor) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }), jsx("button", { type: "button", className: closeButtonClass, onClick: onCancel, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx("div", { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx("button", { type: "button", onClick: onCancel, className: secondaryButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: onConfirm, className: cn(primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body);
+    if (!mounted)
+        return dialogLoading;
+    const handleClose = () => {
+        onOpenChange(false);
+    };
+    return (jsxs(Fragment, { children: [open && createPortal(jsx("div", { className: "fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300", children: jsxs("div", { className: cn(highPrioritySurfaceClass, "scale-100"), role: "dialog", "aria-modal": "true", onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: dialogHeaderClass, children: [jsxs("h3", { className: highPriorityTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor), children: jsx(FAQSIcon, { className: cn('size-5', themeIconColor) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx("div", { className: dialogDescriptionClass, children: description }), jsxs("div", { className: dialogFooterClass, children: [jsx("button", { type: "button", onClick: () => {
+                                        void runDialogAction('cancel', onCancel);
+                                    }, className: secondaryButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: () => {
+                                        void runDialogAction('confirm', onConfirm);
+                                    }, className: cn(primaryButtonClass, "hover:scale-105 active:scale-95"), children: confirmText })] })] }) }), document.body), dialogLoading] }));
 }
 
 export { HighPriorityConfirmDialog };

package/dist/main/alert-dialog/index.d.ts

@@ -3,3 +3,4 @@ export * from './confirm-dialog';
 export * from './high-priority-confirm-dialog';
 export * from './info-dialog';
 export * from './undoable-confirm-dialog';
+export type { DialogLoadingAction } from './dialog-loading-action';

package/dist/main/alert-dialog/info-dialog.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DialogLoadingAction, DialogActionHandler } from './dialog-loading-action';
 export type InfoDialogType = 'info' | 'warn' | 'success' | 'error';
 interface InfoDialogProps {
     open: boolean;
@@ -7,7 +8,8 @@ interface InfoDialogProps {
     title: React.ReactNode;
     description: React.ReactNode;
     confirmText?: string;
-    onConfirm?: () => void;
+    loadingActions?: readonly DialogLoadingAction[];
+    onConfirm?: DialogActionHandler;
 }
-export declare function InfoDialog({ open, onOpenChange, type, title, description, confirmText, onConfirm, }: InfoDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoDialog({ open, onOpenChange, type, title, description, confirmText, loadingActions, onConfirm, }: InfoDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/alert-dialog/info-dialog.js

@@ -6,6 +6,7 @@ var icons = require('@windrun-huaiin/base-ui/icons');
 var ui = require('@windrun-huaiin/base-ui/ui');
 var utils = require('@windrun-huaiin/lib/utils');
 var dialogStyles = require('./dialog-styles.js');
+var dialogLoadingAction = require('./dialog-loading-action.js');
 
 const infoTypeClassMap = {
     info: {
@@ -37,14 +38,14 @@ const infoTypeClassMap = {
         Icon: icons.BadgeXIcon,
     },
 };
-function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', onConfirm, }) {
+function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', loadingActions, onConfirm, }) {
     const typeClass = infoTypeClassMap[type];
     const Icon = typeClass.Icon;
     const handleClose = () => onOpenChange(false);
-    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsx("div", { className: dialogStyles.dialogFooterClass, children: jsxRuntime.jsx(ui.AlertDialogAction, { className: utils.cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
-                            onOpenChange(false);
-                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-                        }, children: confirmText }) })] }) }));
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, typeClass.content), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: utils.cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsxRuntime.jsx(Icon, { className: utils.cn('size-5', typeClass.icon) }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: dialogStyles.dialogDescriptionClass, children: description }), jsxRuntime.jsx("div", { className: dialogStyles.dialogFooterClass, children: jsxRuntime.jsx(ui.AlertDialogAction, { className: utils.cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
+                                    void runDialogAction('confirm', onConfirm);
+                                }, children: confirmText }) })] }) }), dialogLoading] }));
 }
 
 exports.InfoDialog = InfoDialog;

package/dist/main/alert-dialog/info-dialog.mjs

@@ -1,9 +1,10 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { BadgeXIcon, BadgeCheckIcon, BadgeAlertIcon, BadgeInfoIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
 import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction } from '@windrun-huaiin/base-ui/ui';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
+import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
 const infoTypeClassMap = {
     info: {
@@ -35,14 +36,14 @@ const infoTypeClassMap = {
         Icon: BadgeXIcon,
     },
 };
-function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', onConfirm, }) {
+function InfoDialog({ open, onOpenChange, type = 'info', title, description, confirmText = 'OK', loadingActions, onConfirm, }) {
     const typeClass = infoTypeClassMap[type];
     const Icon = typeClass.Icon;
     const handleClose = () => onOpenChange(false);
-    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsx("div", { className: dialogFooterClass, children: jsx(AlertDialogAction, { className: cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
-                            onOpenChange(false);
-                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-                        }, children: confirmText }) })] }) }));
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
+    return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, typeClass.content), overlayClassName: dialogThemedOverlayClass, onOverlayClick: handleClose, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [jsx("span", { className: cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap), children: jsx(Icon, { className: cn('size-5', typeClass.icon) }) }), jsx("span", { className: "min-w-0 truncate", children: title })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: handleClose, "aria-label": "Close", children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: dialogDescriptionClass, children: description }), jsx("div", { className: dialogFooterClass, children: jsx(AlertDialogAction, { className: cn('inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60', typeClass.action), onClick: () => {
+                                    void runDialogAction('confirm', onConfirm);
+                                }, children: confirmText }) })] }) }), dialogLoading] }));
 }
 
 export { InfoDialog };

package/dist/main/alert-dialog/undoable-confirm-dialog.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import type { ConfirmDialogEmphasis } from './confirm-dialog';
+import { DialogLoadingAction, DialogActionHandler } from './dialog-loading-action';
 export interface UndoableConfirmDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -9,9 +11,11 @@ export interface UndoableConfirmDialogProps {
     cancelText?: string;
     confirmText?: string;
     undoText?: string;
+    emphasis?: ConfirmDialogEmphasis;
     countdownSeconds?: number;
-    onCancel?: () => void;
-    onConfirm: () => void | Promise<void>;
-    onUndo?: () => void;
+    loadingActions?: readonly DialogLoadingAction[];
+    onCancel?: DialogActionHandler;
+    onConfirm: DialogActionHandler;
+    onUndo?: DialogActionHandler;
 }
-export declare function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText, confirmText, undoText, countdownSeconds, onCancel, onConfirm, onUndo, }: UndoableConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText, confirmText, undoText, emphasis, countdownSeconds, loadingActions, onCancel, onConfirm, onUndo, }: UndoableConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/alert-dialog/undoable-confirm-dialog.js

@@ -9,14 +9,18 @@ var lib = require('@windrun-huaiin/base-ui/lib');
 var ui = require('@windrun-huaiin/base-ui/ui');
 var utils = require('@windrun-huaiin/lib/utils');
 var dialogStyles = require('./dialog-styles.js');
+var dialogLoadingAction = require('./dialog-loading-action.js');
 
-function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', countdownSeconds = 5, onCancel, onConfirm, onUndo, }) {
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, loadingActions, onCancel, onConfirm, onUndo, }) {
     const safeCountdownSeconds = Math.max(1, Math.floor(countdownSeconds));
     const [pending, setPending] = React.useState(false);
     const [remainingSeconds, setRemainingSeconds] = React.useState(safeCountdownSeconds);
     const [confirming, setConfirming] = React.useState(false);
     const timeoutRef = React.useRef(null);
     const intervalRef = React.useRef(null);
+    const cancelButtonClass = emphasis === 'cancel' ? dialogStyles.dangerButtonClass : dialogStyles.secondaryButtonClass;
+    const confirmButtonClass = emphasis === 'cancel' ? dialogStyles.secondaryButtonClass : dialogStyles.dangerButtonClass;
+    const { dialogLoading, runDialogAction } = dialogLoadingAction.useDialogLoadingAction({ loadingActions, onOpenChange });
     const clearTimers = React.useCallback(() => {
         if (timeoutRef.current) {
             window.clearTimeout(timeoutRef.current);
@@ -45,13 +49,12 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
         clearTimers();
         setConfirming(true);
         try {
-            yield onConfirm();
-            onOpenChange(false);
+            yield runDialogAction('confirm', onConfirm);
         }
         finally {
             setConfirming(false);
         }
-    }), [clearTimers, onConfirm, onOpenChange]);
+    }), [clearTimers, onConfirm, runDialogAction]);
     const startCountdown = () => {
         clearTimers();
         setPending(true);
@@ -65,23 +68,27 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
     };
     const handleCancel = () => {
         resetState();
-        onOpenChange(false);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        void runDialogAction('cancel', onCancel);
     };
-    const handleUndo = () => {
+    const handleClose = React.useCallback(() => {
         resetState();
         onOpenChange(false);
-        onUndo === null || onUndo === void 0 ? void 0 : onUndo();
-    };
+    }, [onOpenChange, resetState]);
+    const handleUndo = () => tslib.__awaiter(this, void 0, void 0, function* () {
+        resetState();
+        yield runDialogAction('undo', onUndo);
+    });
     const displayTitle = pending ? pendingTitle !== null && pendingTitle !== void 0 ? pendingTitle : title : title;
     const displayDescription = pending ? pendingDescription !== null && pendingDescription !== void 0 ? pendingDescription : description : description;
-    return (jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: (nextOpen) => {
-            if (!nextOpen) {
-                handleCancel();
-                return;
-            }
-            onOpenChange(nextOpen);
-        }, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleCancel, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsxRuntime.jsx(icons.Trash2Icon, { className: "size-5" }) : jsxRuntime.jsx(icons.CircleAlertIcon, { className: "size-5" }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: displayTitle })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: pending ? handleUndo : handleCancel, "aria-label": "Close", disabled: confirming, children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: utils.cn(dialogStyles.dialogDescriptionClass, 'min-h-[44px]'), children: jsxRuntime.jsx("span", { children: displayDescription }) }), jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsxRuntime.jsx("span", { className: utils.cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', lib.themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsxRuntime.jsx("span", { className: utils.cn('text-sm font-bold', lib.themeIconColor), children: "s" })] }) }), jsxRuntime.jsx("div", { className: utils.cn(dialogStyles.dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxRuntime.jsxs("button", { type: "button", onClick: handleUndo, className: dialogStyles.secondaryButtonClass, disabled: confirming, children: [jsxRuntime.jsx(icons.Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleCancel, className: dialogStyles.secondaryButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: startCountdown, className: dialogStyles.dangerButtonClass, children: confirmText })] })) })] }) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ui.AlertDialog, { open: open, onOpenChange: (nextOpen) => {
+                    if (!nextOpen) {
+                        handleClose();
+                        return;
+                    }
+                    onOpenChange(nextOpen);
+                }, children: jsxRuntime.jsxs(ui.AlertDialogContent, { className: utils.cn(dialogStyles.dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogStyles.dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleClose, children: [jsxRuntime.jsxs("div", { className: dialogStyles.dialogHeaderClass, children: [jsxRuntime.jsx(ui.AlertDialogTitle, { asChild: true, children: jsxRuntime.jsxs("div", { className: dialogStyles.dialogTitleClass, children: [jsxRuntime.jsx("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600 ring-1 ring-red-200 dark:bg-red-950 dark:text-red-300 dark:ring-red-900", children: pending ? jsxRuntime.jsx(icons.Trash2Icon, { className: "size-5" }) : jsxRuntime.jsx(icons.CircleAlertIcon, { className: "size-5" }) }), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: displayTitle })] }) }), jsxRuntime.jsx("button", { type: "button", className: dialogStyles.closeButtonClass, onClick: handleClose, "aria-label": "Close", disabled: confirming, children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] }), jsxRuntime.jsx(ui.AlertDialogDescription, { className: utils.cn(dialogStyles.dialogDescriptionClass, 'min-h-[44px]'), children: jsxRuntime.jsx("span", { children: displayDescription }) }), jsxRuntime.jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxRuntime.jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsxRuntime.jsx("span", { className: utils.cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', lib.themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsxRuntime.jsx("span", { className: utils.cn('text-sm font-bold', lib.themeIconColor), children: "s" })] }) }), jsxRuntime.jsx("div", { className: utils.cn(dialogStyles.dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxRuntime.jsxs("button", { type: "button", onClick: () => {
+                                    void handleUndo();
+                                }, className: dialogStyles.secondaryButtonClass, disabled: confirming, children: [jsxRuntime.jsx(icons.Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { type: "button", onClick: handleCancel, className: cancelButtonClass, children: cancelText }), jsxRuntime.jsx("button", { type: "button", onClick: startCountdown, className: confirmButtonClass, children: confirmText })] })) })] }) }), dialogLoading] }));
 }
 
 exports.UndoableConfirmDialog = UndoableConfirmDialog;