@windrun-huaiin/third-ui 29.0.4 → 29.2.0

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

@@ -21,6 +21,8 @@ import {
   dialogTitleClass,
   secondaryButtonClass,
 } from './dialog-styles';
+import type { ConfirmDialogEmphasis } from './confirm-dialog';
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from './dialog-loading-action';
 
 export interface UndoableConfirmDialogProps {
   open: boolean;
@@ -32,10 +34,12 @@ 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 function UndoableConfirmDialog({
@@ -48,7 +52,9 @@ export function UndoableConfirmDialog({
   cancelText = 'Cancel',
   confirmText = 'Delete',
   undoText = 'Undo',
+  emphasis = 'confirm',
   countdownSeconds = 5,
+  loadingActions,
   onCancel,
   onConfirm,
   onUndo,
@@ -59,6 +65,9 @@ export function UndoableConfirmDialog({
   const [confirming, setConfirming] = React.useState(false);
   const timeoutRef = React.useRef<number | null>(null);
   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) {
@@ -95,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();
@@ -118,98 +126,105 @@ export function UndoableConfirmDialog({
 
   const handleCancel = () => {
     resetState();
-    onOpenChange(false);
-    onCancel?.();
+    void runDialogAction('cancel', onCancel);
   };
-
-  const handleUndo = () => {
+  const handleClose = React.useCallback(() => {
     resetState();
     onOpenChange(false);
-    onUndo?.();
+  }, [onOpenChange, resetState]);
+
+  const handleUndo = async () => {
+    resetState();
+    await runDialogAction('undo', 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 ? (
+    <>
+      <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>
-          ) : (
-            <>
+          </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={handleCancel}
+                onClick={() => {
+                  void handleUndo();
+                }}
                 className={secondaryButtonClass}
+                disabled={confirming}
               >
-                {cancelText}
+                <Undo2Icon className="mr-1.5 size-4" />
+                {undoText}
               </button>
-              <button
-                type="button"
-                onClick={startCountdown}
-                className={dangerButtonClass}
-              >
-                {confirmText}
-              </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>

package/src/main/buttons/index.ts

@@ -1,6 +1,7 @@
 'use client';
 
 export * from './gradient-button';
+export * from './use-press-feedback';
 export * from './x-button';
 export * from './x-switch-button';
 export * from './x-toggle-button';

package/src/main/buttons/use-press-feedback.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+
+export type PressFeedbackKey = string;
+export type PressFeedbackMode = 'none' | 'subtle' | 'solid';
+export type PressFeedback = boolean | PressFeedbackMode;
+
+export interface PressFeedbackProps<T extends PressFeedbackKey> {
+  onPointerDown: () => void;
+  onPointerUp: () => void;
+  onPointerLeave: () => void;
+  onPointerCancel: () => void;
+  onBlur: () => void;
+}
+
+export function resolvePressFeedbackMode(pressFeedback?: PressFeedback): PressFeedbackMode {
+  if (pressFeedback === false || pressFeedback === 'none') {
+    return 'none';
+  }
+
+  if (pressFeedback === 'solid') {
+    return 'solid';
+  }
+
+  return 'subtle';
+}
+
+export function usePressFeedback<T extends PressFeedbackKey>(durationMs = 180) {
+  const [pressedKey, setPressedKey] = useState<T | null>(null);
+
+  function release(key: T) {
+    setPressedKey((current) => (current === key ? null : current));
+  }
+
+  function trigger(key: T) {
+    setPressedKey(key);
+  }
+
+  function flash(key: T) {
+    setPressedKey(key);
+    window.setTimeout(() => {
+      setPressedKey((current) => (current === key ? null : current));
+    }, durationMs);
+  }
+
+  function getPressProps(key: T): PressFeedbackProps<T> {
+    return {
+      onPointerDown: () => trigger(key),
+      onPointerUp: () => release(key),
+      onPointerLeave: () => release(key),
+      onPointerCancel: () => release(key),
+      onBlur: () => release(key),
+    };
+  }
+
+  return { pressedKey, trigger, release, flash, getPressProps };
+}

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

@@ -4,8 +4,14 @@ import React, { useState, useRef, useEffect, ReactNode } from 'react'
 import { ChevronDownIcon, Loader2Icon } from '@windrun-huaiin/base-ui/icons'
 import { themeBgColor, themeBorderColor, themeIconColor, themeMainBgColor } from '@windrun-huaiin/base-ui/lib'
 import { cn } from '@windrun-huaiin/lib/utils'
+import { PressFeedback, resolvePressFeedbackMode, usePressFeedback } from './use-press-feedback'
 
 type XButtonVariant = 'default' | 'soft' | 'subtle'
+type XButtonPressKey = 'single' | 'main' | 'dropdown'
+
+const PRESS_FEEDBACK_MS = 180
+const xButtonPressSubtleClass = 'translate-y-px scale-[0.98] shadow-inner brightness-95'
+const xButtonPressSolidClass = 'translate-y-[2px] scale-[0.95] shadow-[inset_0_2px_4px_rgba(15,23,42,0.18)] brightness-95'
 
 interface BaseButtonConfig {
   icon: ReactNode
@@ -30,6 +36,7 @@ interface SingleButtonProps {
   className?: string
   iconClassName?: string
   variant?: XButtonVariant
+  pressFeedback?: PressFeedback
 }
 
 interface SplitButtonProps {
@@ -43,6 +50,7 @@ interface SplitButtonProps {
   dropdownButtonClassName?: string
   iconClassName?: string
   variant?: XButtonVariant
+  pressFeedback?: PressFeedback
 }
 
 type xButtonProps = SingleButtonProps | SplitButtonProps
@@ -50,7 +58,9 @@ type xButtonProps = SingleButtonProps | SplitButtonProps
 export function XButton(props: xButtonProps) {
   const [isLoading, setIsLoading] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
-  const menuRef = useRef<HTMLDivElement>(null)
+  const splitRef = useRef<HTMLDivElement>(null)
+  const pressMode = resolvePressFeedbackMode(props.pressFeedback)
+  const { pressedKey, flash, getPressProps } = usePressFeedback<XButtonPressKey>(PRESS_FEEDBACK_MS)
 
   const { iconClassName } = props
   const defaultIconClass = "w-5 h-5"
@@ -76,7 +86,7 @@ export function XButton(props: xButtonProps) {
   useEffect(() => {
     if (props.type === 'split') {
       const handleClickOutside = (event: MouseEvent) => {
-        if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        if (splitRef.current && !splitRef.current.contains(event.target as Node)) {
           setMenuOpen(false)
         }
       }
@@ -104,7 +114,8 @@ export function XButton(props: xButtonProps) {
     }
   }
 
-  const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-colors"
+  const getButtonPressClass = () => pressMode === 'solid' ? xButtonPressSolidClass : xButtonPressSubtleClass
+  const baseButtonClass = "flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold transition-[transform,background-color,filter,box-shadow,border-color,color]"
   const singleButtonVariantClass = variant === 'soft'
     ? cn(
         themeBgColor,
@@ -141,25 +152,38 @@ export function XButton(props: xButtonProps) {
           "bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:border-l",
           themeIconColor,
           "border-neutral-200 dark:border-neutral-800"
-        )
-      : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
+      )
+    : "bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-700 sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700"
+  const splitContainerVariantClass = variant === 'soft'
+    ? cn('border', themeBorderColor)
+    : variant === 'subtle'
+      ? 'border border-neutral-200 dark:border-neutral-800'
+      : null
   const disabledClass = "opacity-60 cursor-not-allowed"
 
   if (props.type === 'single') {
     const { button, loadingText, minWidth = 'min-w-[110px]', className = '' } = props
     const isDisabled = button.disabled || isLoading
+    const isPressed = pressMode !== 'none' && pressedKey === 'single' && !button.disabled
     const actualLoadingText = loadingText || button.text?.trim() || 'Loading...'
 
     return (
       <button
-        onClick={() => handleButtonClick(button.onClick)}
+        onClick={() => {
+          if (!isDisabled && pressMode !== 'none') {
+            flash('single')
+          }
+          handleButtonClick(button.onClick)
+        }}
         disabled={isDisabled}
+        {...(pressMode !== 'none' && !isDisabled ? getPressProps('single') : {})}
         className={cn(
           "w-full sm:w-auto",
           minWidth,
           baseButtonClass,
           singleButtonVariantClass,
           "rounded-full",
+          isPressed && getButtonPressClass(),
           isDisabled && disabledClass,
           className
         )}
@@ -182,21 +206,33 @@ export function XButton(props: xButtonProps) {
 
   const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props
   const isMainDisabled = mainButton.disabled || isLoading
+  const isMainPressed = pressMode !== 'none' && pressedKey === 'main' && !mainButton.disabled
+  const isDropdownPressed = pressMode !== 'none' && pressedKey === 'dropdown' && !isLoading
   const actualLoadingText = loadingText || mainButton.text?.trim() || 'Loading...'
 
   return (
     <div className={cn(
-      "relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0",
+      "relative inline-flex flex-row items-stretch w-full sm:w-fit rounded-full gap-0",
+      splitContainerVariantClass,
       menuOpen && "z-90",
       className
-    )}>
+    )}
+      ref={splitRef}
+    >
       <button
-        onClick={() => handleButtonClick(mainButton.onClick)}
+        onClick={() => {
+          if (!isMainDisabled && pressMode !== 'none') {
+            flash('main')
+          }
+          handleButtonClick(mainButton.onClick)
+        }}
         disabled={isMainDisabled}
+        {...(pressMode !== 'none' && !isMainDisabled ? getPressProps('main') : {})}
         className={cn(
           "flex-1 min-w-0 sm:min-w-[100px] sm:flex-initial rounded-l-full",
           baseButtonClass,
           splitMainButtonVariantClass,
+          isMainPressed && getButtonPressClass(),
           isMainDisabled && disabledClass,
           mainButtonClassName
         )}
@@ -218,12 +254,19 @@ export function XButton(props: xButtonProps) {
 
       <button
         type="button"
-        onClick={() => setMenuOpen(!menuOpen)}
+        onClick={() => {
+          if (!isLoading && pressMode !== 'none') {
+            flash('dropdown')
+          }
+          setMenuOpen(!menuOpen)
+        }}
         disabled={isLoading}
+        {...(pressMode !== 'none' && !isLoading ? getPressProps('dropdown') : {})}
         className={cn(
           "w-12 rounded-r-full",
           baseButtonClass,
           splitDropdownVariantClass,
+          isDropdownPressed && getButtonPressClass(),
           isLoading && disabledClass,
           dropdownButtonClassName
         )}
@@ -234,7 +277,6 @@ export function XButton(props: xButtonProps) {
 
       {menuOpen && (
         <div
-          ref={menuRef}
           className={cn(
             "absolute top-full right-0 mt-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg z-50 overflow-hidden",
             menuWidth