@windrun-huaiin/third-ui 29.1.0 → 29.2.0

package/src/main/alert-dialog/dialog-loading-action.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Loading } from '../loading';
+
+export type DialogLoadingAction = 'cancel' | 'confirm' | 'undo';
+export type DialogActionHandler = () => void | Promise<void>;
+
+interface UseDialogLoadingActionOptions {
+  loadingActions?: readonly DialogLoadingAction[];
+  onOpenChange: (open: boolean) => void;
+}
+
+export function useDialogLoadingAction({
+  loadingActions,
+  onOpenChange,
+}: UseDialogLoadingActionOptions) {
+  const [mounted, setMounted] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const runDialogAction = React.useCallback(async (
+    action: DialogLoadingAction,
+    handler?: DialogActionHandler
+  ) => {
+    onOpenChange(false);
+
+    if (!handler) {
+      return;
+    }
+
+    if (!loadingActions?.includes(action)) {
+      await handler();
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await handler();
+    } finally {
+      setLoading(false);
+    }
+  }, [loadingActions, onOpenChange]);
+
+  const dialogLoading = mounted && loading
+    ? createPortal(
+      <div className="fixed inset-0 z-10000">
+        <Loading className="h-full w-full" />
+      </div>,
+      document.body
+    )
+    : null;
+
+  return {
+    dialogLoading,
+    runDialogAction,
+  };
+}

package/src/main/alert-dialog/high-priority-confirm-dialog.tsx

@@ -15,16 +15,18 @@ import {
   secondaryButtonClass,
 } from "./dialog-styles";
 import { themeBgColor, themeBorderColor, themeIconColor } from "@windrun-huaiin/base-ui/lib";
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from "./dialog-loading-action";
 
 interface HighPriorityConfirmDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onCancel: () => void;
-  onConfirm: () => void;
+  onCancel: DialogActionHandler;
+  onConfirm: DialogActionHandler;
   title: string;
   description: React.ReactNode;
   confirmText?: string;
   cancelText?: string;
+  loadingActions?: readonly DialogLoadingAction[];
 }
 
 export function HighPriorityConfirmDialog({
@@ -36,65 +38,76 @@ export function HighPriorityConfirmDialog({
   description,
   confirmText = "Confirm",
   cancelText = "Cancel",
+  loadingActions,
 }: HighPriorityConfirmDialogProps) {
   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;
+  if (!mounted) return dialogLoading;
 
   const handleClose = () => {
     onOpenChange(false);
   };
 
-  return createPortal(
-    <div className="fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
-      <div 
-        className={cn(highPrioritySurfaceClass, "scale-100")}
-        role="dialog"
-        aria-modal="true"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className={dialogHeaderClass}>
-          <h3 className={highPriorityTitleClass}>
-            <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor)}>
-              <FAQSIcon className={cn('size-5', themeIconColor)} />
-            </span>
-            <span className="min-w-0 truncate">{title}</span>
-          </h3>
-          <button
-            type="button"
-            className={closeButtonClass}
-            onClick={handleClose}
-            aria-label="Close"
+  return (
+    <>
+      {open && createPortal(
+        <div className="fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
+          <div
+            className={cn(highPrioritySurfaceClass, "scale-100")}
+            role="dialog"
+            aria-modal="true"
+            onClick={(e) => e.stopPropagation()}
           >
-            <XIcon className="size-4" />
-          </button>
-        </div>
-        <div className={dialogDescriptionClass}>
-          {description}
-        </div>
-        <div className={dialogFooterClass}>
-          <button
-            type="button"
-            onClick={onCancel}
-            className={secondaryButtonClass}
-          >
-            {cancelText}
-          </button>
-          <button
-            type="button"
-            onClick={onConfirm}
-            className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
-          >
-            {confirmText}
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
+            <div className={dialogHeaderClass}>
+              <h3 className={highPriorityTitleClass}>
+                <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor)}>
+                  <FAQSIcon className={cn('size-5', themeIconColor)} />
+                </span>
+                <span className="min-w-0 truncate">{title}</span>
+              </h3>
+              <button
+                type="button"
+                className={closeButtonClass}
+                onClick={handleClose}
+                aria-label="Close"
+              >
+                <XIcon className="size-4" />
+              </button>
+            </div>
+            <div className={dialogDescriptionClass}>
+              {description}
+            </div>
+            <div className={dialogFooterClass}>
+              <button
+                type="button"
+                onClick={() => {
+                  void runDialogAction('cancel', onCancel);
+                }}
+                className={secondaryButtonClass}
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  void runDialogAction('confirm', onConfirm);
+                }}
+                className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
+              >
+                {confirmText}
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+      {dialogLoading}
+    </>
   );
 }

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

@@ -5,3 +5,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/src/main/alert-dialog/info-dialog.tsx

@@ -25,6 +25,7 @@ import {
   dialogThemedOverlayClass,
   dialogTitleClass,
 } from './dialog-styles';
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from './dialog-loading-action';
 
 export type InfoDialogType = 'info' | 'warn' | 'success' | 'error';
 type InfoDialogIcon = typeof BadgeInfoIcon;
@@ -36,7 +37,8 @@ interface InfoDialogProps {
   title: React.ReactNode;
   description: React.ReactNode;
   confirmText?: string;
-  onConfirm?: () => void;
+  loadingActions?: readonly DialogLoadingAction[];
+  onConfirm?: DialogActionHandler;
 }
 
 const infoTypeClassMap: Record<InfoDialogType, {
@@ -83,57 +85,61 @@ export function InfoDialog({
   title,
   description,
   confirmText = 'OK',
+  loadingActions,
   onConfirm,
 }: InfoDialogProps) {
   const typeClass = infoTypeClassMap[type];
   const Icon = typeClass.Icon;
   const handleClose = () => onOpenChange(false);
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
 
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent
-        className={cn(dialogContentClass, typeClass.content)}
-        overlayClassName={dialogThemedOverlayClass}
-        onOverlayClick={handleClose}
-      >
-        <div className={dialogHeaderClass}>
-          <AlertDialogTitle asChild>
-            <div className={dialogTitleClass}>
-              <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
-                <Icon className={cn('size-5', typeClass.icon)} />
-              </span>
-              <span className="min-w-0 truncate">{title}</span>
-            </div>
-          </AlertDialogTitle>
-          <button
-            type="button"
-            className={closeButtonClass}
-            onClick={handleClose}
-            aria-label="Close"
-          >
-            <XIcon className="size-4" />
-          </button>
-        </div>
+    <>
+      <AlertDialog open={open} onOpenChange={onOpenChange}>
+        <AlertDialogContent
+          className={cn(dialogContentClass, typeClass.content)}
+          overlayClassName={dialogThemedOverlayClass}
+          onOverlayClick={handleClose}
+        >
+          <div className={dialogHeaderClass}>
+            <AlertDialogTitle asChild>
+              <div className={dialogTitleClass}>
+                <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
+                  <Icon className={cn('size-5', typeClass.icon)} />
+                </span>
+                <span className="min-w-0 truncate">{title}</span>
+              </div>
+            </AlertDialogTitle>
+            <button
+              type="button"
+              className={closeButtonClass}
+              onClick={handleClose}
+              aria-label="Close"
+            >
+              <XIcon className="size-4" />
+            </button>
+          </div>
 
-        <AlertDialogDescription className={dialogDescriptionClass}>
-          {description}
-        </AlertDialogDescription>
+          <AlertDialogDescription className={dialogDescriptionClass}>
+            {description}
+          </AlertDialogDescription>
 
-        <div className={dialogFooterClass}>
-          <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?.();
-            }}
-          >
-            {confirmText}
-          </AlertDialogAction>
-        </div>
-      </AlertDialogContent>
-    </AlertDialog>
+          <div className={dialogFooterClass}>
+            <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);
+              }}
+            >
+              {confirmText}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+      {dialogLoading}
+    </>
   );
 }

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

@@ -22,6 +22,7 @@ import {
   secondaryButtonClass,
 } from './dialog-styles';
 import type { ConfirmDialogEmphasis } from './confirm-dialog';
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from './dialog-loading-action';
 
 export interface UndoableConfirmDialogProps {
   open: boolean;
@@ -35,9 +36,10 @@ export interface UndoableConfirmDialogProps {
   undoText?: string;
   emphasis?: ConfirmDialogEmphasis;
   countdownSeconds?: number;
-  onCancel?: () => void;
-  onConfirm: () => void | Promise<void>;
-  onUndo?: () => void;
+  loadingActions?: readonly DialogLoadingAction[];
+  onCancel?: DialogActionHandler;
+  onConfirm: DialogActionHandler;
+  onUndo?: DialogActionHandler;
 }
 
 export function UndoableConfirmDialog({
@@ -52,6 +54,7 @@ export function UndoableConfirmDialog({
   undoText = 'Undo',
   emphasis = 'confirm',
   countdownSeconds = 5,
+  loadingActions,
   onCancel,
   onConfirm,
   onUndo,
@@ -64,6 +67,7 @@ export function UndoableConfirmDialog({
   const intervalRef = React.useRef<number | null>(null);
   const cancelButtonClass = emphasis === 'cancel' ? dangerButtonClass : secondaryButtonClass;
   const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : dangerButtonClass;
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
 
   const clearTimers = React.useCallback(() => {
     if (timeoutRef.current) {
@@ -100,12 +104,11 @@ export function UndoableConfirmDialog({
     setConfirming(true);
 
     try {
-      await onConfirm();
-      onOpenChange(false);
+      await runDialogAction('confirm', onConfirm);
     } finally {
       setConfirming(false);
     }
-  }, [clearTimers, onConfirm, onOpenChange]);
+  }, [clearTimers, onConfirm, runDialogAction]);
 
   const startCountdown = () => {
     clearTimers();
@@ -123,102 +126,105 @@ export function UndoableConfirmDialog({
 
   const handleCancel = () => {
     resetState();
-    onOpenChange(false);
-    onCancel?.();
+    void runDialogAction('cancel', onCancel);
   };
   const handleClose = React.useCallback(() => {
     resetState();
     onOpenChange(false);
   }, [onOpenChange, resetState]);
 
-  const handleUndo = () => {
+  const handleUndo = async () => {
     resetState();
-    onOpenChange(false);
-    onUndo?.();
+    await runDialogAction('undo', onUndo);
   };
 
   const displayTitle = pending ? pendingTitle ?? title : title;
   const displayDescription = pending ? pendingDescription ?? description : description;
   return (
-    <AlertDialog open={open} onOpenChange={(nextOpen) => {
-      if (!nextOpen) {
-        handleClose();
-        return;
-      }
-
-      onOpenChange(nextOpen);
-    }}>
-      <AlertDialogContent
-        className={cn(dialogContentClass, 'border-red-300 dark:border-red-700')}
-        overlayClassName={dialogThemedOverlayClass}
-        onOverlayClick={pending ? undefined : handleClose}
-      >
-        <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={handleClose}
-            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 ? (
+    <>
+      <AlertDialog open={open} onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          handleClose();
+          return;
+        }
+
+        onOpenChange(nextOpen);
+      }}>
+        <AlertDialogContent
+          className={cn(dialogContentClass, 'border-red-300 dark:border-red-700')}
+          overlayClassName={dialogThemedOverlayClass}
+          onOverlayClick={pending ? undefined : handleClose}
+        >
+          <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"
-              onClick={handleUndo}
-              className={secondaryButtonClass}
+              className={closeButtonClass}
+              onClick={handleClose}
+              aria-label="Close"
               disabled={confirming}
             >
-              <Undo2Icon className="mr-1.5 size-4" />
-              {undoText}
+              <XIcon className="size-4" />
             </button>
-          ) : (
-            <>
-              <button
-                type="button"
-                onClick={handleCancel}
-                className={cancelButtonClass}
-              >
-                {cancelText}
-              </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={startCountdown}
-                className={confirmButtonClass}
+                onClick={() => {
+                  void handleUndo();
+                }}
+                className={secondaryButtonClass}
+                disabled={confirming}
               >
-                {confirmText}
+                <Undo2Icon className="mr-1.5 size-4" />
+                {undoText}
               </button>
-            </>
-          )}
-        </div>
-      </AlertDialogContent>
-    </AlertDialog>
+            ) : (
+              <>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  className={cancelButtonClass}
+                >
+                  {cancelText}
+                </button>
+                <button
+                  type="button"
+                  onClick={startCountdown}
+                  className={confirmButtonClass}
+                >
+                  {confirmText}
+                </button>
+              </>
+            )}
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+      {dialogLoading}
+    </>
   );
 }

package/src/main/buttons/gradient-button.tsx

@@ -12,9 +12,14 @@ import {
 } from "@windrun-huaiin/base-ui/lib";
 import Link from "next/link";
 import React, { useState } from 'react';
+import { PressFeedback, resolvePressFeedbackMode, usePressFeedback } from './use-press-feedback';
 
 type GradientButtonVariant = 'default' | 'soft' | 'subtle';
 
+const PRESS_FEEDBACK_MS = 180;
+const gradientPressSubtleClass = 'translate-y-px scale-[0.98] shadow-inner brightness-95';
+const gradientPressSolidClass = 'translate-y-[2px] scale-[0.96] shadow-[inset_0_2px_4px_rgba(15,23,42,0.22)] brightness-90';
+
 export interface GradientButtonProps {
   title: React.ReactNode;
   icon?: React.ReactNode;
@@ -30,6 +35,7 @@ export interface GradientButtonProps {
   loadingText?: React.ReactNode;
   preventDoubleClick?: boolean;
   variant?: GradientButtonVariant;
+  pressFeedback?: PressFeedback;
 }
 
 export function GradientButton({
@@ -47,8 +53,11 @@ export function GradientButton({
   preventDoubleClick = true,
   iconClassName,
   variant = 'default',
+  pressFeedback,
 }: GradientButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
+  const pressMode = resolvePressFeedbackMode(pressFeedback);
+  const { pressedKey, flash, getPressProps } = usePressFeedback<'root'>(PRESS_FEEDBACK_MS);
   const actualLoadingText = loadingText || title?.toString().trim() || 'Loading...';
 
   const defaultIconClass = "h-4 w-4";
@@ -94,6 +103,12 @@ export function GradientButton({
   };
 
   const isDisabled = disabled || isLoading;
+  const isPressed = pressMode !== 'none' && pressedKey === 'root' && !disabled;
+  const pressClassName = isPressed
+    ? pressMode === 'solid'
+      ? gradientPressSolidClass
+      : gradientPressSubtleClass
+    : null;
   const displayTitle = isLoading ? actualLoadingText : title;
   const iconProvided = icon !== undefined;
 
@@ -163,11 +178,13 @@ export function GradientButton({
   const buttonClassName = cn(
     baseButtonStyles,
     variantClassName,
-    'text-base font-bold transition-all duration-300 rounded-full',
+    'text-base font-bold transition-[transform,background-color,filter,box-shadow,border-color,color] duration-300 rounded-full',
     alignmentClass,
+    pressClassName,
     isDisabled && 'opacity-50 cursor-not-allowed',
     className,
   );
+  const pressProps = pressMode !== 'none' && !isDisabled ? getPressProps('root') : {};
 
   return (
     <div className={`flex flex-row gap-3 ${getAlignmentClass()}`}>
@@ -175,8 +192,14 @@ export function GradientButton({
         <button
           type="button"
           className={buttonClassName}
-          onClick={handleClick}
+          onClick={(event) => {
+            if (!isDisabled && pressMode !== 'none') {
+              flash('root');
+            }
+            handleClick(event);
+          }}
           disabled={isDisabled}
+          {...pressProps}
         >
           {buttonContent}
         </button>
@@ -185,8 +208,18 @@ export function GradientButton({
           href={href || "#"}
           className={cn(buttonClassName, "no-underline hover:no-underline")}
           {...(openInNewTab ? { target: "_blank", rel: preserveReferrer ? 'noopener' : 'noopener noreferrer' } : {})}
-          onClick={isDisabled ? (e) => e.preventDefault() : undefined}
+          onClick={(event) => {
+            if (isDisabled) {
+              event.preventDefault();
+              return;
+            }
+
+            if (pressMode !== 'none') {
+              flash('root');
+            }
+          }}
           aria-disabled={isDisabled}
+          {...pressProps}
         >
           {buttonContent}
         </Link>