@windrun-huaiin/third-ui 29.0.1 → 29.0.3

package/dist/clerk/fingerprint/fingerprint-provider.js

@@ -10,6 +10,8 @@ var nextIntl = require('next-intl');
 var React = require('react');
 var useFingerprint = require('./use-fingerprint.js');
 var ui = require('@windrun-huaiin/base-ui/ui');
+require('next/link');
+var xSwitchButton = require('../../main/buttons/x-switch-button.js');
 var fingerprintClient = require('./fingerprint-client.js');
 var fingerprintDebug = require('./fingerprint-debug.js');
 var fingerprintShared = require('./fingerprint-shared.js');
@@ -253,11 +255,7 @@ function FingerprintStatus() {
         setActiveDebugFingerprintId(nextFingerprintId);
         setTestResult(tpl(translations.messages.generatedTestFingerprintOverride, { fingerprintId: nextFingerprintId }));
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isOpen && (jsxRuntime.jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: utils.cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsxRuntime.jsx(icons.LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxRuntime.jsxs("div", { ref: modalRef, className: utils.cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsxRuntime.jsx("header", { className: "mb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 text-base font-bold tracking-wider", lib.themeIconColor), children: [jsxRuntime.jsx(icons.ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("button", { type: "button", onClick: () => setPanelMode((prev) => prev === 'info' ? 'test' : 'info'), className: utils.cn('inline-flex items-center gap-2 rounded-full border px-2 py-1 text-[11px] font-semibold shadow-sm transition-all duration-200', panelMode === 'test'
-                                                        ? utils.cn('border-transparent text-white', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass)
-                                                        : themedGhostButtonClass), "aria-pressed": panelMode === 'test', children: [jsxRuntime.jsx("span", { children: translations.panel.testModeLabel }), jsxRuntime.jsx("span", { className: utils.cn('relative inline-flex h-5 w-9 items-center rounded-full transition-colors', panelMode === 'test'
-                                                                ? 'bg-white/25'
-                                                                : 'bg-slate-300 dark:bg-slate-700'), children: jsxRuntime.jsx("span", { className: utils.cn('inline-block size-4 rounded-full shadow-sm transition-transform', panelMode === 'test' ? 'bg-white' : 'bg-white dark:bg-slate-100', panelMode === 'test' ? 'translate-x-4' : 'translate-x-0.5') }) })] }), jsxRuntime.jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] })] }) }), jsxRuntime.jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PanelSection, { icon: jsxRuntime.jsx(icons.FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsxRuntime.jsx(StatusTag, { value: userStatus, translations: translations }), items: [
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isOpen && (jsxRuntime.jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: utils.cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsxRuntime.jsx(icons.LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxRuntime.jsxs("div", { ref: modalRef, className: utils.cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsxRuntime.jsx("header", { className: "mb-4", children: jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-2 text-base font-bold tracking-wider", lib.themeIconColor), children: [jsxRuntime.jsx(icons.ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(xSwitchButton.XSwitchButton, { type: "button", checked: panelMode === 'test', onCheckedChange: (nextChecked) => setPanelMode(nextChecked ? 'test' : 'info'), checkedLabel: translations.panel.testModeLabel, uncheckedLabel: translations.panel.testModeLabel, size: "compact", className: "border px-2 py-1 text-[11px] shadow-sm" }), jsxRuntime.jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsxRuntime.jsx(icons.XIcon, { className: "size-4" }) })] })] }) }), jsxRuntime.jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PanelSection, { icon: jsxRuntime.jsx(icons.FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsxRuntime.jsx(StatusTag, { value: userStatus, translations: translations }), items: [
                                                     { label: translations.labels.userId, value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userId) || '' }) },
                                                     { label: translations.labels.nickName, value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userName) || '' }) },
                                                     { label: translations.labels.fingerprintId, value: jsxRuntime.jsx(ui.CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.fingerprintId) || fingerprintId || '' }) },

package/dist/clerk/fingerprint/fingerprint-provider.mjs

@@ -8,6 +8,8 @@ import { useMessages } from 'next-intl';
 import { createContext, useContext, useState, useRef, useEffect, useMemo } from 'react';
 import { useFingerprint } from './use-fingerprint.mjs';
 import { CopyableText } from '@windrun-huaiin/base-ui/ui';
+import 'next/link';
+import { XSwitchButton } from '../../main/buttons/x-switch-button.mjs';
 import { createFingerprintHeaders } from './fingerprint-client.mjs';
 import { getOrCreateDebugFingerprintOverride, regenerateDebugFingerprintOverride } from './fingerprint-debug.mjs';
 import { FINGERPRINT_SOURCE_REFER } from './fingerprint-shared.mjs';
@@ -251,11 +253,7 @@ function FingerprintStatus() {
         setActiveDebugFingerprintId(nextFingerprintId);
         setTestResult(tpl(translations.messages.generatedTestFingerprintOverride, { fingerprintId: nextFingerprintId }));
     };
-    return (jsxs(Fragment, { children: [!isOpen && (jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsx(LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxs("div", { ref: modalRef, className: cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsx("header", { className: "mb-4", children: jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxs("div", { className: cn("flex items-center gap-2 text-base font-bold tracking-wider", themeIconColor), children: [jsx(ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxs("div", { className: "flex items-center gap-2", children: [jsxs("button", { type: "button", onClick: () => setPanelMode((prev) => prev === 'info' ? 'test' : 'info'), className: cn('inline-flex items-center gap-2 rounded-full border px-2 py-1 text-[11px] font-semibold shadow-sm transition-all duration-200', panelMode === 'test'
-                                                        ? cn('border-transparent text-white', themeButtonGradientClass, themeButtonGradientHoverClass)
-                                                        : themedGhostButtonClass), "aria-pressed": panelMode === 'test', children: [jsx("span", { children: translations.panel.testModeLabel }), jsx("span", { className: cn('relative inline-flex h-5 w-9 items-center rounded-full transition-colors', panelMode === 'test'
-                                                                ? 'bg-white/25'
-                                                                : 'bg-slate-300 dark:bg-slate-700'), children: jsx("span", { className: cn('inline-block size-4 rounded-full shadow-sm transition-transform', panelMode === 'test' ? 'bg-white' : 'bg-white dark:bg-slate-100', panelMode === 'test' ? 'translate-x-4' : 'translate-x-0.5') }) })] }), jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsx(XIcon, { className: "size-4" }) })] })] }) }), jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxs(Fragment, { children: [jsx(PanelSection, { icon: jsx(FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsx(StatusTag, { value: userStatus, translations: translations }), items: [
+    return (jsxs(Fragment, { children: [!isOpen && (jsx("button", { onClick: handleToggle, type: "button", "aria-label": translations.panel.toggleAriaLabel, className: cn('fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full', themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300'), children: jsx(LightbulbIcon, { className: "size-6 text-white" }) })), isOpen && (jsxs(Fragment, { children: [jsx("div", { onClick: handleBackdropClick, className: "fixed inset-0 z-9998 bg-black/60 backdrop-blur-sm" }), jsxs("div", { ref: modalRef, className: cn('fixed inset-3 z-9999 mx-auto w-[min(95vw,520px)] overflow-y-auto rounded-2xl border', 'border-slate-200/70 bg-white/95 p-4 shadow-2xl backdrop-blur-sm', 'font-sans text-sm text-slate-700 dark:border-white/12 dark:bg-slate-950/95 dark:text-slate-200', 'sm:inset-auto md:left-2 sm:top-1 md:right-auto sm:w-[min(520px,95vw)] sm:p-5'), children: [jsx("header", { className: "mb-4", children: jsxs("div", { className: "flex items-start justify-between gap-3", children: [jsxs("div", { className: cn("flex items-center gap-2 text-base font-bold tracking-wider", themeIconColor), children: [jsx(ShieldUserIcon, { className: "size-4" }), translations.panel.title] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(XSwitchButton, { type: "button", checked: panelMode === 'test', onCheckedChange: (nextChecked) => setPanelMode(nextChecked ? 'test' : 'info'), checkedLabel: translations.panel.testModeLabel, uncheckedLabel: translations.panel.testModeLabel, size: "compact", className: "border px-2 py-1 text-[11px] shadow-sm" }), jsx("button", { type: "button", "aria-label": translations.panel.closeAriaLabel, className: "rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white", onClick: () => setIsOpen(false), children: jsx(XIcon, { className: "size-4" }) })] })] }) }), jsxs("section", { className: "space-y-1", children: [panelMode === 'info' ? (jsxs(Fragment, { children: [jsx(PanelSection, { icon: jsx(FingerprintIcon, { className: "size-4" }), title: translations.sections.user, rightInfo: jsx(StatusTag, { value: userStatus, translations: translations }), items: [
                                                     { label: translations.labels.userId, value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userId) || '' }) },
                                                     { label: translations.labels.nickName, value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.userName) || '' }) },
                                                     { label: translations.labels.fingerprintId, value: jsx(CopyableText, { text: (xUser === null || xUser === void 0 ? void 0 : xUser.fingerprintId) || fingerprintId || '' }) },

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

@@ -2,3 +2,4 @@ export * from './ads-alert-dialog';
 export * from './confirm-dialog';
 export * from './high-priority-confirm-dialog';
 export * from './info-dialog';
+export * from './undoable-confirm-dialog';

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

@@ -5,6 +5,7 @@ var adsAlertDialog = require('./ads-alert-dialog.js');
 var confirmDialog = require('./confirm-dialog.js');
 var highPriorityConfirmDialog = require('./high-priority-confirm-dialog.js');
 var infoDialog = require('./info-dialog.js');
+var undoableConfirmDialog = require('./undoable-confirm-dialog.js');
 
 
 
@@ -12,3 +13,4 @@ exports.AdsAlertDialog = adsAlertDialog.AdsAlertDialog;
 exports.ConfirmDialog = confirmDialog.ConfirmDialog;
 exports.HighPriorityConfirmDialog = highPriorityConfirmDialog.HighPriorityConfirmDialog;
 exports.InfoDialog = infoDialog.InfoDialog;
+exports.UndoableConfirmDialog = undoableConfirmDialog.UndoableConfirmDialog;

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

@@ -3,3 +3,4 @@ export { AdsAlertDialog } from './ads-alert-dialog.mjs';
 export { ConfirmDialog } from './confirm-dialog.mjs';
 export { HighPriorityConfirmDialog } from './high-priority-confirm-dialog.mjs';
 export { InfoDialog } from './info-dialog.mjs';
+export { UndoableConfirmDialog } from './undoable-confirm-dialog.mjs';

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface UndoableConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: React.ReactNode;
+    description: React.ReactNode;
+    pendingTitle?: React.ReactNode;
+    pendingDescription?: React.ReactNode;
+    cancelText?: string;
+    confirmText?: string;
+    undoText?: string;
+    countdownSeconds?: number;
+    onCancel?: () => void;
+    onConfirm: () => void | Promise<void>;
+    onUndo?: () => void;
+}
+export declare function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText, confirmText, undoText, countdownSeconds, onCancel, onConfirm, onUndo, }: UndoableConfirmDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,87 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var icons = require('@windrun-huaiin/base-ui/icons');
+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');
+
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', countdownSeconds = 5, 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 clearTimers = React.useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (intervalRef.current) {
+            window.clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    }, []);
+    const resetState = React.useCallback(() => {
+        clearTimers();
+        setPending(false);
+        setConfirming(false);
+        setRemainingSeconds(safeCountdownSeconds);
+    }, [clearTimers, safeCountdownSeconds]);
+    React.useEffect(() => {
+        if (open) {
+            setRemainingSeconds(safeCountdownSeconds);
+            return;
+        }
+        resetState();
+    }, [open, resetState, safeCountdownSeconds]);
+    React.useEffect(() => clearTimers, [clearTimers]);
+    const executeConfirm = React.useCallback(() => tslib.__awaiter(this, void 0, void 0, function* () {
+        clearTimers();
+        setConfirming(true);
+        try {
+            yield onConfirm();
+            onOpenChange(false);
+        }
+        finally {
+            setConfirming(false);
+        }
+    }), [clearTimers, onConfirm, onOpenChange]);
+    const startCountdown = () => {
+        clearTimers();
+        setPending(true);
+        setRemainingSeconds(safeCountdownSeconds);
+        intervalRef.current = window.setInterval(() => {
+            setRemainingSeconds((current) => Math.max(0, current - 1));
+        }, 1000);
+        timeoutRef.current = window.setTimeout(() => {
+            void executeConfirm();
+        }, (safeCountdownSeconds + 1) * 1000);
+    };
+    const handleCancel = () => {
+        resetState();
+        onOpenChange(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleUndo = () => {
+        resetState();
+        onOpenChange(false);
+        onUndo === null || onUndo === void 0 ? void 0 : 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 })] })) })] }) }));
+}
+
+exports.UndoableConfirmDialog = UndoableConfirmDialog;

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

@@ -0,0 +1,85 @@
+"use client";
+import { __awaiter } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Trash2Icon, CircleAlertIcon, XIcon, Undo2Icon } from '@windrun-huaiin/base-ui/icons';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { AlertDialog, AlertDialogContent, AlertDialogTitle, AlertDialogDescription } from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { dialogThemedOverlayClass, dialogHeaderClass, dialogTitleClass, closeButtonClass, dialogDescriptionClass, secondaryButtonClass, dangerButtonClass, dialogFooterClass, dialogContentClass } from './dialog-styles.mjs';
+
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', countdownSeconds = 5, onCancel, onConfirm, onUndo, }) {
+    const safeCountdownSeconds = Math.max(1, Math.floor(countdownSeconds));
+    const [pending, setPending] = React__default.useState(false);
+    const [remainingSeconds, setRemainingSeconds] = React__default.useState(safeCountdownSeconds);
+    const [confirming, setConfirming] = React__default.useState(false);
+    const timeoutRef = React__default.useRef(null);
+    const intervalRef = React__default.useRef(null);
+    const clearTimers = React__default.useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (intervalRef.current) {
+            window.clearInterval(intervalRef.current);
+            intervalRef.current = null;
+        }
+    }, []);
+    const resetState = React__default.useCallback(() => {
+        clearTimers();
+        setPending(false);
+        setConfirming(false);
+        setRemainingSeconds(safeCountdownSeconds);
+    }, [clearTimers, safeCountdownSeconds]);
+    React__default.useEffect(() => {
+        if (open) {
+            setRemainingSeconds(safeCountdownSeconds);
+            return;
+        }
+        resetState();
+    }, [open, resetState, safeCountdownSeconds]);
+    React__default.useEffect(() => clearTimers, [clearTimers]);
+    const executeConfirm = React__default.useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        clearTimers();
+        setConfirming(true);
+        try {
+            yield onConfirm();
+            onOpenChange(false);
+        }
+        finally {
+            setConfirming(false);
+        }
+    }), [clearTimers, onConfirm, onOpenChange]);
+    const startCountdown = () => {
+        clearTimers();
+        setPending(true);
+        setRemainingSeconds(safeCountdownSeconds);
+        intervalRef.current = window.setInterval(() => {
+            setRemainingSeconds((current) => Math.max(0, current - 1));
+        }, 1000);
+        timeoutRef.current = window.setTimeout(() => {
+            void executeConfirm();
+        }, (safeCountdownSeconds + 1) * 1000);
+    };
+    const handleCancel = () => {
+        resetState();
+        onOpenChange(false);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    };
+    const handleUndo = () => {
+        resetState();
+        onOpenChange(false);
+        onUndo === null || onUndo === void 0 ? void 0 : onUndo();
+    };
+    const displayTitle = pending ? pendingTitle !== null && pendingTitle !== void 0 ? pendingTitle : title : title;
+    const displayDescription = pending ? pendingDescription !== null && pendingDescription !== void 0 ? pendingDescription : description : description;
+    return (jsx(AlertDialog, { open: open, onOpenChange: (nextOpen) => {
+            if (!nextOpen) {
+                handleCancel();
+                return;
+            }
+            onOpenChange(nextOpen);
+        }, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleCancel, children: [jsxs("div", { className: dialogHeaderClass, children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: dialogTitleClass, children: [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 ? jsx(Trash2Icon, { className: "size-5" }) : jsx(CircleAlertIcon, { className: "size-5" }) }), jsx("span", { className: "min-w-0 truncate", children: displayTitle })] }) }), jsx("button", { type: "button", className: closeButtonClass, onClick: pending ? handleUndo : handleCancel, "aria-label": "Close", disabled: confirming, children: jsx(XIcon, { className: "size-4" }) })] }), jsx(AlertDialogDescription, { className: cn(dialogDescriptionClass, 'min-h-[44px]'), children: jsx("span", { children: displayDescription }) }), jsx("div", { className: "flex h-12 items-center justify-center py-1", children: jsxs("div", { className: "flex items-baseline justify-center gap-2", children: [jsx("span", { className: cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', themeIconColor), children: pending ? remainingSeconds : safeCountdownSeconds }), jsx("span", { className: cn('text-sm font-bold', themeIconColor), children: "s" })] }) }), jsx("div", { className: cn(dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center'), children: pending ? (jsxs("button", { type: "button", onClick: handleUndo, className: secondaryButtonClass, disabled: confirming, children: [jsx(Undo2Icon, { className: "mr-1.5 size-4" }), undoText] })) : (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: handleCancel, className: secondaryButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: startCountdown, className: dangerButtonClass, children: confirmText })] })) })] }) }));
+}
+
+export { UndoableConfirmDialog };

package/dist/main/buttons/index.d.ts

@@ -1,3 +1,4 @@
 export * from './gradient-button';
 export * from './x-button';
+export * from './x-switch-button';
 export * from './x-toggle-button';

package/dist/main/buttons/index.js

@@ -3,10 +3,12 @@
 
 var gradientButton = require('./gradient-button.js');
 var xButton = require('./x-button.js');
+var xSwitchButton = require('./x-switch-button.js');
 var xToggleButton = require('./x-toggle-button.js');
 
 
 
 exports.GradientButton = gradientButton.GradientButton;
 exports.XButton = xButton.XButton;
+exports.XSwitchButton = xSwitchButton.XSwitchButton;
 exports.XToggleButton = xToggleButton.XToggleButton;

package/dist/main/buttons/index.mjs

@@ -1,4 +1,5 @@
 "use client";
 export { GradientButton } from './gradient-button.mjs';
 export { XButton } from './x-button.mjs';
+export { XSwitchButton } from './x-switch-button.mjs';
 export { XToggleButton } from './x-toggle-button.mjs';

package/dist/main/buttons/x-switch-button.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type XSwitchButtonSize = 'default' | 'compact';
+export type XSwitchButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'defaultValue' | 'children'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    checkedLabel?: React.ReactNode;
+    uncheckedLabel?: React.ReactNode;
+    labelPosition?: 'left' | 'right';
+    size?: XSwitchButtonSize;
+    className?: string;
+    labelClassName?: string;
+    trackClassName?: string;
+    thumbClassName?: string;
+    checkedClassName?: string;
+    uncheckedClassName?: string;
+    checkedTrackClassName?: string;
+    uncheckedTrackClassName?: string;
+    checkedThumbClassName?: string;
+    uncheckedThumbClassName?: string;
+};
+export declare function XSwitchButton({ checked, defaultChecked, onCheckedChange, checkedLabel, uncheckedLabel, labelPosition, size, className, labelClassName, trackClassName, thumbClassName, checkedClassName, uncheckedClassName, checkedTrackClassName, uncheckedTrackClassName, checkedThumbClassName, uncheckedThumbClassName, disabled, type, onClick, ...props }: XSwitchButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/main/buttons/x-switch-button.js

@@ -0,0 +1,63 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var lib = require('@windrun-huaiin/base-ui/lib');
+var utils = require('@windrun-huaiin/lib/utils');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function XSwitchButton(_a) {
+    var { checked, defaultChecked = false, onCheckedChange, checkedLabel, uncheckedLabel, labelPosition = 'left', size = 'default', className, labelClassName, trackClassName, thumbClassName, checkedClassName, uncheckedClassName, checkedTrackClassName, uncheckedTrackClassName, checkedThumbClassName, uncheckedThumbClassName, disabled, type = 'button', onClick } = _a, props = tslib.__rest(_a, ["checked", "defaultChecked", "onCheckedChange", "checkedLabel", "uncheckedLabel", "labelPosition", "size", "className", "labelClassName", "trackClassName", "thumbClassName", "checkedClassName", "uncheckedClassName", "checkedTrackClassName", "uncheckedTrackClassName", "checkedThumbClassName", "uncheckedThumbClassName", "disabled", "type", "onClick"]);
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = React__namespace.useState(defaultChecked);
+    const active = isControlled ? checked : internalChecked;
+    const currentLabel = active ? checkedLabel : uncheckedLabel;
+    const hasLabel = currentLabel !== undefined && currentLabel !== null && currentLabel !== false;
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        const nextChecked = !active;
+        if (!isControlled) {
+            setInternalChecked(nextChecked);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
+    }
+    const trackSizeClass = size === 'compact' ? 'h-5 w-9' : 'h-6 w-11';
+    const thumbSizeClass = size === 'compact' ? 'size-4' : 'size-5';
+    const thumbTranslateClass = active
+        ? size === 'compact'
+            ? 'translate-x-4'
+            : 'translate-x-5'
+        : 'translate-x-0.5';
+    const labelNode = hasLabel ? (jsxRuntime.jsx("span", { className: utils.cn('min-w-0', labelClassName), children: currentLabel })) : null;
+    const defaultCheckedClassName = utils.cn('border-transparent text-white shadow-sm', lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass);
+    const defaultUncheckedClassName = utils.cn('border-slate-200 bg-white/90 text-slate-700 shadow-sm hover:border-current hover:bg-slate-50', 'dark:border-white/20 dark:bg-slate-900/90 dark:text-slate-200 dark:shadow-white/5 dark:hover:bg-slate-800', lib.themeIconColor);
+    const trackNode = (jsxRuntime.jsx("span", { "aria-hidden": "true", className: utils.cn('relative inline-flex shrink-0 items-center rounded-full transition-colors', trackSizeClass, active ? 'bg-white/25' : 'bg-slate-300 dark:bg-slate-700', trackClassName, active ? checkedTrackClassName : uncheckedTrackClassName), children: jsxRuntime.jsx("span", { className: utils.cn('inline-block rounded-full bg-white shadow-sm transition-transform dark:bg-slate-100', thumbSizeClass, thumbTranslateClass, thumbClassName, active ? checkedThumbClassName : uncheckedThumbClassName) }) }));
+    return (jsxRuntime.jsx("button", Object.assign({ type: type, role: "switch", "aria-checked": active, disabled: disabled, onClick: handleClick, className: utils.cn('inline-flex items-center gap-2 rounded-full font-semibold transition-all duration-200', active ? defaultCheckedClassName : defaultUncheckedClassName, className, active
+            ? checkedClassName
+            : uncheckedClassName, disabled && 'cursor-not-allowed opacity-60') }, props, { children: labelPosition === 'left' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [labelNode, trackNode] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [trackNode, labelNode] })) })));
+}
+
+exports.XSwitchButton = XSwitchButton;

package/dist/main/buttons/x-switch-button.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+function XSwitchButton(_a) {
+    var { checked, defaultChecked = false, onCheckedChange, checkedLabel, uncheckedLabel, labelPosition = 'left', size = 'default', className, labelClassName, trackClassName, thumbClassName, checkedClassName, uncheckedClassName, checkedTrackClassName, uncheckedTrackClassName, checkedThumbClassName, uncheckedThumbClassName, disabled, type = 'button', onClick } = _a, props = __rest(_a, ["checked", "defaultChecked", "onCheckedChange", "checkedLabel", "uncheckedLabel", "labelPosition", "size", "className", "labelClassName", "trackClassName", "thumbClassName", "checkedClassName", "uncheckedClassName", "checkedTrackClassName", "uncheckedTrackClassName", "checkedThumbClassName", "uncheckedThumbClassName", "disabled", "type", "onClick"]);
+    const isControlled = checked !== undefined;
+    const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+    const active = isControlled ? checked : internalChecked;
+    const currentLabel = active ? checkedLabel : uncheckedLabel;
+    const hasLabel = currentLabel !== undefined && currentLabel !== null && currentLabel !== false;
+    function handleClick(event) {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        const nextChecked = !active;
+        if (!isControlled) {
+            setInternalChecked(nextChecked);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(nextChecked);
+    }
+    const trackSizeClass = size === 'compact' ? 'h-5 w-9' : 'h-6 w-11';
+    const thumbSizeClass = size === 'compact' ? 'size-4' : 'size-5';
+    const thumbTranslateClass = active
+        ? size === 'compact'
+            ? 'translate-x-4'
+            : 'translate-x-5'
+        : 'translate-x-0.5';
+    const labelNode = hasLabel ? (jsx("span", { className: cn('min-w-0', labelClassName), children: currentLabel })) : null;
+    const defaultCheckedClassName = cn('border-transparent text-white shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass);
+    const defaultUncheckedClassName = cn('border-slate-200 bg-white/90 text-slate-700 shadow-sm hover:border-current hover:bg-slate-50', 'dark:border-white/20 dark:bg-slate-900/90 dark:text-slate-200 dark:shadow-white/5 dark:hover:bg-slate-800', themeIconColor);
+    const trackNode = (jsx("span", { "aria-hidden": "true", className: cn('relative inline-flex shrink-0 items-center rounded-full transition-colors', trackSizeClass, active ? 'bg-white/25' : 'bg-slate-300 dark:bg-slate-700', trackClassName, active ? checkedTrackClassName : uncheckedTrackClassName), children: jsx("span", { className: cn('inline-block rounded-full bg-white shadow-sm transition-transform dark:bg-slate-100', thumbSizeClass, thumbTranslateClass, thumbClassName, active ? checkedThumbClassName : uncheckedThumbClassName) }) }));
+    return (jsx("button", Object.assign({ type: type, role: "switch", "aria-checked": active, disabled: disabled, onClick: handleClick, className: cn('inline-flex items-center gap-2 rounded-full font-semibold transition-all duration-200', active ? defaultCheckedClassName : defaultUncheckedClassName, className, active
+            ? checkedClassName
+            : uncheckedClassName, disabled && 'cursor-not-allowed opacity-60') }, props, { children: labelPosition === 'left' ? (jsxs(Fragment, { children: [labelNode, trackNode] })) : (jsxs(Fragment, { children: [trackNode, labelNode] })) })));
+}
+
+export { XSwitchButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "29.0.1",
+  "version": "29.0.3",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -227,7 +227,7 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^29.0.0",
+    "@windrun-huaiin/base-ui": "^29.0.1",
     "@windrun-huaiin/lib": "^29.0.0",
     "@windrun-huaiin/contracts": "^29.0.0"
   },

package/src/clerk/fingerprint/fingerprint-provider.tsx

@@ -20,6 +20,7 @@ import React, { createContext, useContext, useEffect, useMemo, useRef, useState
 import type { FingerprintContextType, FingerprintProviderProps } from './types';
 import { useFingerprint } from './use-fingerprint';
 import { CopyableText } from '@windrun-huaiin/base-ui/ui';
+import { XSwitchButton } from '../../main/buttons';
 import { createFingerprintHeaders } from './fingerprint-client';
 import {
   getOrCreateDebugFingerprintOverride,
@@ -436,35 +437,15 @@ export function FingerprintStatus() {
                   {translations.panel.title}
                 </div>
                 <div className="flex items-center gap-2">
-                  <button
+                  <XSwitchButton
                     type="button"
-                    onClick={() => setPanelMode((prev) => prev === 'info' ? 'test' : 'info')}
-                    className={cn(
-                      'inline-flex items-center gap-2 rounded-full border px-2 py-1 text-[11px] font-semibold shadow-sm transition-all duration-200',
-                      panelMode === 'test'
-                        ? cn('border-transparent text-white', themeButtonGradientClass, themeButtonGradientHoverClass)
-                        : themedGhostButtonClass
-                    )}
-                    aria-pressed={panelMode === 'test'}
-                  >
-                    <span>{translations.panel.testModeLabel}</span>
-                    <span
-                      className={cn(
-                        'relative inline-flex h-5 w-9 items-center rounded-full transition-colors',
-                        panelMode === 'test'
-                          ? 'bg-white/25'
-                          : 'bg-slate-300 dark:bg-slate-700'
-                      )}
-                    >
-                      <span
-                        className={cn(
-                          'inline-block size-4 rounded-full shadow-sm transition-transform',
-                          panelMode === 'test' ? 'bg-white' : 'bg-white dark:bg-slate-100',
-                          panelMode === 'test' ? 'translate-x-4' : 'translate-x-0.5'
-                        )}
-                      />
-                    </span>
-                  </button>
+                    checked={panelMode === 'test'}
+                    onCheckedChange={(nextChecked) => setPanelMode(nextChecked ? 'test' : 'info')}
+                    checkedLabel={translations.panel.testModeLabel}
+                    uncheckedLabel={translations.panel.testModeLabel}
+                    size="compact"
+                    className="border px-2 py-1 text-[11px] shadow-sm"
+                  />
                   <button
                     type="button"
                     aria-label={translations.panel.closeAriaLabel}

package/src/main/alert-dialog/index.ts

@@ -4,4 +4,4 @@ export * from './ads-alert-dialog';
 export * from './confirm-dialog';
 export * from './high-priority-confirm-dialog';
 export * from './info-dialog';
-
+export * from './undoable-confirm-dialog';

package/src/main/alert-dialog/undoable-confirm-dialog.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import React from 'react';
+import { CircleAlertIcon, Trash2Icon, Undo2Icon, XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+} from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import {
+  closeButtonClass,
+  dangerButtonClass,
+  dialogContentClass,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogThemedOverlayClass,
+  dialogTitleClass,
+  secondaryButtonClass,
+} from './dialog-styles';
+
+export interface UndoableConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  description: React.ReactNode;
+  pendingTitle?: React.ReactNode;
+  pendingDescription?: React.ReactNode;
+  cancelText?: string;
+  confirmText?: string;
+  undoText?: string;
+  countdownSeconds?: number;
+  onCancel?: () => void;
+  onConfirm: () => void | Promise<void>;
+  onUndo?: () => void;
+}
+
+export function UndoableConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  pendingTitle,
+  pendingDescription,
+  cancelText = 'Cancel',
+  confirmText = 'Delete',
+  undoText = 'Undo',
+  countdownSeconds = 5,
+  onCancel,
+  onConfirm,
+  onUndo,
+}: UndoableConfirmDialogProps) {
+  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<number | null>(null);
+  const intervalRef = React.useRef<number | null>(null);
+
+  const clearTimers = React.useCallback(() => {
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    if (intervalRef.current) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  const resetState = React.useCallback(() => {
+    clearTimers();
+    setPending(false);
+    setConfirming(false);
+    setRemainingSeconds(safeCountdownSeconds);
+  }, [clearTimers, safeCountdownSeconds]);
+
+  React.useEffect(() => {
+    if (open) {
+      setRemainingSeconds(safeCountdownSeconds);
+      return;
+    }
+
+    resetState();
+  }, [open, resetState, safeCountdownSeconds]);
+
+  React.useEffect(() => clearTimers, [clearTimers]);
+
+  const executeConfirm = React.useCallback(async () => {
+    clearTimers();
+    setConfirming(true);
+
+    try {
+      await onConfirm();
+      onOpenChange(false);
+    } finally {
+      setConfirming(false);
+    }
+  }, [clearTimers, onConfirm, onOpenChange]);
+
+  const startCountdown = () => {
+    clearTimers();
+    setPending(true);
+    setRemainingSeconds(safeCountdownSeconds);
+
+    intervalRef.current = window.setInterval(() => {
+      setRemainingSeconds((current) => Math.max(0, current - 1));
+    }, 1000);
+
+    timeoutRef.current = window.setTimeout(() => {
+      void executeConfirm();
+    }, (safeCountdownSeconds + 1) * 1000);
+  };
+
+  const handleCancel = () => {
+    resetState();
+    onOpenChange(false);
+    onCancel?.();
+  };
+
+  const handleUndo = () => {
+    resetState();
+    onOpenChange(false);
+    onUndo?.();
+  };
+
+  const displayTitle = pending ? pendingTitle ?? title : title;
+  const displayDescription = pending ? pendingDescription ?? description : description;
+  return (
+    <AlertDialog open={open} onOpenChange={(nextOpen) => {
+      if (!nextOpen) {
+        handleCancel();
+        return;
+      }
+
+      onOpenChange(nextOpen);
+    }}>
+      <AlertDialogContent
+        className={cn(dialogContentClass, 'border-red-300 dark:border-red-700')}
+        overlayClassName={dialogThemedOverlayClass}
+        onOverlayClick={pending ? undefined : handleCancel}
+      >
+        <div className={dialogHeaderClass}>
+          <AlertDialogTitle asChild>
+            <div className={dialogTitleClass}>
+              <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">
+                {pending ? <Trash2Icon className="size-5" /> : <CircleAlertIcon className="size-5" />}
+              </span>
+              <span className="min-w-0 truncate">{displayTitle}</span>
+            </div>
+          </AlertDialogTitle>
+          <button
+            type="button"
+            className={closeButtonClass}
+            onClick={pending ? handleUndo : handleCancel}
+            aria-label="Close"
+            disabled={confirming}
+          >
+            <XIcon className="size-4" />
+          </button>
+        </div>
+
+        <AlertDialogDescription className={cn(dialogDescriptionClass, 'min-h-[44px]')}>
+          <span>{displayDescription}</span>
+        </AlertDialogDescription>
+
+        <div className="flex h-12 items-center justify-center py-1">
+          <div className="flex items-baseline justify-center gap-2">
+            <span className={cn('text-4xl font-black leading-none tabular-nums', pending && 'animate-bounce', themeIconColor)}>
+              {pending ? remainingSeconds : safeCountdownSeconds}
+            </span>
+            <span className={cn('text-sm font-bold', themeIconColor)}>
+              s
+            </span>
+          </div>
+        </div>
+
+        <div className={cn(dialogFooterClass, 'min-h-[88px] sm:min-h-10 sm:items-center')}>
+          {pending ? (
+            <button
+              type="button"
+              onClick={handleUndo}
+              className={secondaryButtonClass}
+              disabled={confirming}
+            >
+              <Undo2Icon className="mr-1.5 size-4" />
+              {undoText}
+            </button>
+          ) : (
+            <>
+              <button
+                type="button"
+                onClick={handleCancel}
+                className={secondaryButtonClass}
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={startCountdown}
+                className={dangerButtonClass}
+              >
+                {confirmText}
+              </button>
+            </>
+          )}
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/main/buttons/index.ts

@@ -2,4 +2,5 @@
 
 export * from './gradient-button';
 export * from './x-button';
+export * from './x-switch-button';
 export * from './x-toggle-button';

package/src/main/buttons/x-switch-button.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import * as React from 'react';
+import {
+  themeButtonGradientClass,
+  themeButtonGradientHoverClass,
+  themeIconColor,
+} from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+
+export type XSwitchButtonSize = 'default' | 'compact';
+
+export type XSwitchButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'onChange' | 'value' | 'defaultValue' | 'children'
+> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  checkedLabel?: React.ReactNode;
+  uncheckedLabel?: React.ReactNode;
+  labelPosition?: 'left' | 'right';
+  size?: XSwitchButtonSize;
+  className?: string;
+  labelClassName?: string;
+  trackClassName?: string;
+  thumbClassName?: string;
+  checkedClassName?: string;
+  uncheckedClassName?: string;
+  checkedTrackClassName?: string;
+  uncheckedTrackClassName?: string;
+  checkedThumbClassName?: string;
+  uncheckedThumbClassName?: string;
+};
+
+export function XSwitchButton({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  checkedLabel,
+  uncheckedLabel,
+  labelPosition = 'left',
+  size = 'default',
+  className,
+  labelClassName,
+  trackClassName,
+  thumbClassName,
+  checkedClassName,
+  uncheckedClassName,
+  checkedTrackClassName,
+  uncheckedTrackClassName,
+  checkedThumbClassName,
+  uncheckedThumbClassName,
+  disabled,
+  type = 'button',
+  onClick,
+  ...props
+}: XSwitchButtonProps) {
+  const isControlled = checked !== undefined;
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);
+  const active = isControlled ? checked : internalChecked;
+  const currentLabel = active ? checkedLabel : uncheckedLabel;
+  const hasLabel = currentLabel !== undefined && currentLabel !== null && currentLabel !== false;
+
+  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
+    onClick?.(event);
+
+    if (event.defaultPrevented || disabled) {
+      return;
+    }
+
+    const nextChecked = !active;
+
+    if (!isControlled) {
+      setInternalChecked(nextChecked);
+    }
+
+    onCheckedChange?.(nextChecked);
+  }
+
+  const trackSizeClass = size === 'compact' ? 'h-5 w-9' : 'h-6 w-11';
+  const thumbSizeClass = size === 'compact' ? 'size-4' : 'size-5';
+  const thumbTranslateClass = active
+    ? size === 'compact'
+      ? 'translate-x-4'
+      : 'translate-x-5'
+    : 'translate-x-0.5';
+
+  const labelNode = hasLabel ? (
+    <span className={cn('min-w-0', labelClassName)}>
+      {currentLabel}
+    </span>
+  ) : null;
+
+  const defaultCheckedClassName = cn(
+    'border-transparent text-white shadow-sm',
+    themeButtonGradientClass,
+    themeButtonGradientHoverClass
+  );
+  const defaultUncheckedClassName = cn(
+    'border-slate-200 bg-white/90 text-slate-700 shadow-sm hover:border-current hover:bg-slate-50',
+    'dark:border-white/20 dark:bg-slate-900/90 dark:text-slate-200 dark:shadow-white/5 dark:hover:bg-slate-800',
+    themeIconColor
+  );
+
+  const trackNode = (
+    <span
+      aria-hidden="true"
+      className={cn(
+        'relative inline-flex shrink-0 items-center rounded-full transition-colors',
+        trackSizeClass,
+        active ? 'bg-white/25' : 'bg-slate-300 dark:bg-slate-700',
+        trackClassName,
+        active ? checkedTrackClassName : uncheckedTrackClassName
+      )}
+    >
+      <span
+        className={cn(
+          'inline-block rounded-full bg-white shadow-sm transition-transform dark:bg-slate-100',
+          thumbSizeClass,
+          thumbTranslateClass,
+          thumbClassName,
+          active ? checkedThumbClassName : uncheckedThumbClassName
+        )}
+      />
+    </span>
+  );
+
+  return (
+    <button
+      type={type}
+      role="switch"
+      aria-checked={active}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        'inline-flex items-center gap-2 rounded-full font-semibold transition-all duration-200',
+        active ? defaultCheckedClassName : defaultUncheckedClassName,
+        className,
+        active
+          ? checkedClassName
+          : uncheckedClassName,
+        disabled && 'cursor-not-allowed opacity-60'
+      )}
+      {...props}
+    >
+      {labelPosition === 'left' ? (
+        <>
+          {labelNode}
+          {trackNode}
+        </>
+      ) : (
+        <>
+          {trackNode}
+          {labelNode}
+        </>
+      )}
+    </button>
+  );
+}

package/src/styles/fuma.css

@@ -11,6 +11,7 @@
 
   /* 文档主区域补一小段底部缓冲，减少 footer 刚进入视口就与 TOC 相撞 */
   #nd-page {
+    padding-top: 5rem !important;
     padding-bottom: 5rem !important;
     min-height: calc(100dvh - 5rem) !important;
   }