@windrun-huaiin/third-ui 29.1.0 → 29.2.1

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

@@ -1,14 +1,15 @@
 "use client";
 import { __awaiter } from 'tslib';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } 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';
+import { useDialogLoadingAction } from './dialog-loading-action.mjs';
 
-function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, onCancel, onConfirm, onUndo, }) {
+function UndoableConfirmDialog({ open, onOpenChange, title, description, pendingTitle, pendingDescription, cancelText = 'Cancel', confirmText = 'Delete', undoText = 'Undo', emphasis = 'confirm', countdownSeconds = 5, loadingActions, loadingFullPage, 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);
@@ -17,6 +18,7 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
     const intervalRef = React__default.useRef(null);
     const cancelButtonClass = emphasis === 'cancel' ? dangerButtonClass : secondaryButtonClass;
     const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : dangerButtonClass;
+    const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, loadingFullPage, onOpenChange });
     const clearTimers = React__default.useCallback(() => {
         if (timeoutRef.current) {
             window.clearTimeout(timeoutRef.current);
@@ -45,13 +47,12 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
         clearTimers();
         setConfirming(true);
         try {
-            yield onConfirm();
-            onOpenChange(false);
+            yield runDialogAction('confirm', onConfirm);
         }
         finally {
             setConfirming(false);
         }
-    }), [clearTimers, onConfirm, onOpenChange]);
+    }), [clearTimers, onConfirm, runDialogAction]);
     const startCountdown = () => {
         clearTimers();
         setPending(true);
@@ -65,27 +66,27 @@ function UndoableConfirmDialog({ open, onOpenChange, title, description, pending
     };
     const handleCancel = () => {
         resetState();
-        onOpenChange(false);
-        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        void runDialogAction('cancel', onCancel);
     };
     const handleClose = React__default.useCallback(() => {
         resetState();
         onOpenChange(false);
     }, [onOpenChange, resetState]);
-    const handleUndo = () => {
+    const handleUndo = () => __awaiter(this, void 0, void 0, function* () {
         resetState();
-        onOpenChange(false);
-        onUndo === null || onUndo === void 0 ? void 0 : onUndo();
-    };
+        yield runDialogAction('undo', onUndo);
+    });
     const displayTitle = pending ? pendingTitle !== null && pendingTitle !== void 0 ? pendingTitle : title : title;
     const displayDescription = pending ? pendingDescription !== null && pendingDescription !== void 0 ? pendingDescription : description : description;
-    return (jsx(AlertDialog, { open: open, onOpenChange: (nextOpen) => {
-            if (!nextOpen) {
-                handleClose();
-                return;
-            }
-            onOpenChange(nextOpen);
-        }, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleClose, 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: handleClose, "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: cancelButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: startCountdown, className: confirmButtonClass, children: confirmText })] })) })] }) }));
+    return (jsxs(Fragment, { children: [jsx(AlertDialog, { open: open, onOpenChange: (nextOpen) => {
+                    if (!nextOpen) {
+                        handleClose();
+                        return;
+                    }
+                    onOpenChange(nextOpen);
+                }, children: jsxs(AlertDialogContent, { className: cn(dialogContentClass, 'border-red-300 dark:border-red-700'), overlayClassName: dialogThemedOverlayClass, onOverlayClick: pending ? undefined : handleClose, 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: handleClose, "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: () => {
+                                    void 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: cancelButtonClass, children: cancelText }), jsx("button", { type: "button", onClick: startCountdown, className: confirmButtonClass, children: confirmText })] })) })] }) }), dialogLoading] }));
 }
 
 export { UndoableConfirmDialog };

package/dist/main/buttons/gradient-button.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { PressFeedback } from './use-press-feedback';
 type GradientButtonVariant = 'default' | 'soft' | 'subtle';
 export interface GradientButtonProps {
     title: React.ReactNode;
@@ -15,6 +16,7 @@ export interface GradientButtonProps {
     loadingText?: React.ReactNode;
     preventDoubleClick?: boolean;
     variant?: GradientButtonVariant;
+    pressFeedback?: PressFeedback;
 }
-export declare function GradientButton({ title, icon, iconForcePosition, align, disabled, className, href, openInNewTab, preserveReferrer, onClick, loadingText, preventDoubleClick, iconClassName, variant, }: GradientButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function GradientButton({ title, icon, iconForcePosition, align, disabled, className, href, openInNewTab, preserveReferrer, onClick, loadingText, preventDoubleClick, iconClassName, variant, pressFeedback, }: GradientButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/main/buttons/gradient-button.js

@@ -8,9 +8,15 @@ var icons = require('@windrun-huaiin/base-ui/icons');
 var lib = require('@windrun-huaiin/base-ui/lib');
 var Link = require('next/link');
 var React = require('react');
+var usePressFeedback = require('./use-press-feedback.js');
 
-function GradientButton({ title, icon, iconForcePosition, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, variant = 'default', }) {
+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';
+function GradientButton({ title, icon, iconForcePosition, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, variant = 'default', pressFeedback, }) {
     const [isLoading, setIsLoading] = React.useState(false);
+    const pressMode = usePressFeedback.resolvePressFeedbackMode(pressFeedback);
+    const { pressedKey, flash, getPressProps } = usePressFeedback.usePressFeedback(PRESS_FEEDBACK_MS);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
     const defaultIconClass = "h-4 w-4";
     const finalIconClass = utils.cn(variant === 'default' ? 'text-white' : lib.themeIconColor, iconClassName || defaultIconClass);
@@ -48,6 +54,12 @@ function GradientButton({ title, icon, iconForcePosition, align = 'left', disabl
         }
     });
     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;
     const iconNode = (() => {
@@ -81,8 +93,22 @@ function GradientButton({ title, icon, iconForcePosition, align = 'left', disabl
         : variant === 'subtle'
             ? utils.cn(lib.themeMainBgColor, lib.themeIconColor, 'border border-neutral-200 shadow-sm hover:shadow-md hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800')
             : utils.cn(lib.themeButtonGradientClass, lib.themeButtonGradientHoverClass, 'text-white shadow-lg hover:shadow-xl');
-    const buttonClassName = utils.cn(baseButtonStyles, variantClassName, 'text-base font-bold transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
-    return (jsxRuntime.jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (jsxRuntime.jsx("button", { type: "button", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (jsxRuntime.jsx(Link, Object.assign({ href: href || "#", className: utils.cn(buttonClassName, "no-underline hover:no-underline") }, (openInNewTab ? { target: "_blank", rel: preserveReferrer ? 'noopener' : 'noopener noreferrer' } : {}), { onClick: isDisabled ? (e) => e.preventDefault() : undefined, "aria-disabled": isDisabled, children: buttonContent }))) }));
+    const buttonClassName = utils.cn(baseButtonStyles, variantClassName, '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 (jsxRuntime.jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (jsxRuntime.jsx("button", Object.assign({ type: "button", className: buttonClassName, onClick: (event) => {
+                if (!isDisabled && pressMode !== 'none') {
+                    flash('root');
+                }
+                handleClick(event);
+            }, disabled: isDisabled }, pressProps, { children: buttonContent }))) : (jsxRuntime.jsx(Link, Object.assign({ href: href || "#", className: utils.cn(buttonClassName, "no-underline hover:no-underline") }, (openInNewTab ? { target: "_blank", rel: preserveReferrer ? 'noopener' : 'noopener noreferrer' } : {}), { onClick: (event) => {
+                if (isDisabled) {
+                    event.preventDefault();
+                    return;
+                }
+                if (pressMode !== 'none') {
+                    flash('root');
+                }
+            }, "aria-disabled": isDisabled }, pressProps, { children: buttonContent }))) }));
 }
 
 exports.GradientButton = GradientButton;

package/dist/main/buttons/gradient-button.mjs

@@ -6,9 +6,15 @@ import { Loader2Icon, ArrowRightIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeIconColor, themeBgColor, themeBorderColor, themeMainBgColor, themeButtonGradientClass, themeButtonGradientHoverClass } from '@windrun-huaiin/base-ui/lib';
 import Link from 'next/link';
 import React__default, { useState } from 'react';
+import { usePressFeedback, resolvePressFeedbackMode } from './use-press-feedback.mjs';
 
-function GradientButton({ title, icon, iconForcePosition, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, variant = 'default', }) {
+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';
+function GradientButton({ title, icon, iconForcePosition, align = 'left', disabled = false, className = "", href, openInNewTab = true, preserveReferrer = false, onClick, loadingText, preventDoubleClick = true, iconClassName, variant = 'default', pressFeedback, }) {
     const [isLoading, setIsLoading] = useState(false);
+    const pressMode = resolvePressFeedbackMode(pressFeedback);
+    const { pressedKey, flash, getPressProps } = usePressFeedback(PRESS_FEEDBACK_MS);
     const actualLoadingText = loadingText || (title === null || title === void 0 ? void 0 : title.toString().trim()) || 'Loading...';
     const defaultIconClass = "h-4 w-4";
     const finalIconClass = cn(variant === 'default' ? 'text-white' : themeIconColor, iconClassName || defaultIconClass);
@@ -46,6 +52,12 @@ function GradientButton({ title, icon, iconForcePosition, align = 'left', disabl
         }
     });
     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;
     const iconNode = (() => {
@@ -79,8 +91,22 @@ function GradientButton({ title, icon, iconForcePosition, align = 'left', disabl
         : variant === 'subtle'
             ? cn(themeMainBgColor, themeIconColor, 'border border-neutral-200 shadow-sm hover:shadow-md hover:bg-neutral-50 dark:border-neutral-800 dark:hover:bg-neutral-800')
             : cn(themeButtonGradientClass, themeButtonGradientHoverClass, 'text-white shadow-lg hover:shadow-xl');
-    const buttonClassName = cn(baseButtonStyles, variantClassName, 'text-base font-bold transition-all duration-300 rounded-full', alignmentClass, isDisabled && 'opacity-50 cursor-not-allowed', className);
-    return (jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (jsx("button", { type: "button", className: buttonClassName, onClick: handleClick, disabled: isDisabled, children: buttonContent })) : (jsx(Link, Object.assign({ href: href || "#", className: cn(buttonClassName, "no-underline hover:no-underline") }, (openInNewTab ? { target: "_blank", rel: preserveReferrer ? 'noopener' : 'noopener noreferrer' } : {}), { onClick: isDisabled ? (e) => e.preventDefault() : undefined, "aria-disabled": isDisabled, children: buttonContent }))) }));
+    const buttonClassName = cn(baseButtonStyles, variantClassName, '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 (jsx("div", { className: `flex flex-row gap-3 ${getAlignmentClass()}`, children: onClick ? (jsx("button", Object.assign({ type: "button", className: buttonClassName, onClick: (event) => {
+                if (!isDisabled && pressMode !== 'none') {
+                    flash('root');
+                }
+                handleClick(event);
+            }, disabled: isDisabled }, pressProps, { children: buttonContent }))) : (jsx(Link, Object.assign({ href: href || "#", className: cn(buttonClassName, "no-underline hover:no-underline") }, (openInNewTab ? { target: "_blank", rel: preserveReferrer ? 'noopener' : 'noopener noreferrer' } : {}), { onClick: (event) => {
+                if (isDisabled) {
+                    event.preventDefault();
+                    return;
+                }
+                if (pressMode !== 'none') {
+                    flash('root');
+                }
+            }, "aria-disabled": isDisabled }, pressProps, { children: buttonContent }))) }));
 }
 
 export { GradientButton };

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

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

package/dist/main/buttons/index.js

@@ -2,6 +2,7 @@
 'use strict';
 
 var gradientButton = require('./gradient-button.js');
+var usePressFeedback = require('./use-press-feedback.js');
 var xButton = require('./x-button.js');
 var xSwitchButton = require('./x-switch-button.js');
 var xToggleButton = require('./x-toggle-button.js');
@@ -9,6 +10,8 @@ var xToggleButton = require('./x-toggle-button.js');
 
 
 exports.GradientButton = gradientButton.GradientButton;
+exports.resolvePressFeedbackMode = usePressFeedback.resolvePressFeedbackMode;
+exports.usePressFeedback = usePressFeedback.usePressFeedback;
 exports.XButton = xButton.XButton;
 exports.XSwitchButton = xSwitchButton.XSwitchButton;
 exports.XToggleButton = xToggleButton.XToggleButton;

package/dist/main/buttons/index.mjs

@@ -1,5 +1,6 @@
 "use client";
 export { GradientButton } from './gradient-button.mjs';
+export { resolvePressFeedbackMode, usePressFeedback } from './use-press-feedback.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/use-press-feedback.d.ts

@@ -0,0 +1,18 @@
+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 declare function resolvePressFeedbackMode(pressFeedback?: PressFeedback): PressFeedbackMode;
+export declare function usePressFeedback<T extends PressFeedbackKey>(durationMs?: number): {
+    pressedKey: T | null;
+    trigger: (key: T) => void;
+    release: (key: T) => void;
+    flash: (key: T) => void;
+    getPressProps: (key: T) => PressFeedbackProps<T>;
+};

package/dist/main/buttons/use-press-feedback.js

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var React = require('react');
+
+function resolvePressFeedbackMode(pressFeedback) {
+    if (pressFeedback === false || pressFeedback === 'none') {
+        return 'none';
+    }
+    if (pressFeedback === 'solid') {
+        return 'solid';
+    }
+    return 'subtle';
+}
+function usePressFeedback(durationMs = 180) {
+    const [pressedKey, setPressedKey] = React.useState(null);
+    function release(key) {
+        setPressedKey((current) => (current === key ? null : current));
+    }
+    function trigger(key) {
+        setPressedKey(key);
+    }
+    function flash(key) {
+        setPressedKey(key);
+        window.setTimeout(() => {
+            setPressedKey((current) => (current === key ? null : current));
+        }, durationMs);
+    }
+    function getPressProps(key) {
+        return {
+            onPointerDown: () => trigger(key),
+            onPointerUp: () => release(key),
+            onPointerLeave: () => release(key),
+            onPointerCancel: () => release(key),
+            onBlur: () => release(key),
+        };
+    }
+    return { pressedKey, trigger, release, flash, getPressProps };
+}
+
+exports.resolvePressFeedbackMode = resolvePressFeedbackMode;
+exports.usePressFeedback = usePressFeedback;

package/dist/main/buttons/use-press-feedback.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useState } from 'react';
+
+function resolvePressFeedbackMode(pressFeedback) {
+    if (pressFeedback === false || pressFeedback === 'none') {
+        return 'none';
+    }
+    if (pressFeedback === 'solid') {
+        return 'solid';
+    }
+    return 'subtle';
+}
+function usePressFeedback(durationMs = 180) {
+    const [pressedKey, setPressedKey] = useState(null);
+    function release(key) {
+        setPressedKey((current) => (current === key ? null : current));
+    }
+    function trigger(key) {
+        setPressedKey(key);
+    }
+    function flash(key) {
+        setPressedKey(key);
+        window.setTimeout(() => {
+            setPressedKey((current) => (current === key ? null : current));
+        }, durationMs);
+    }
+    function getPressProps(key) {
+        return {
+            onPointerDown: () => trigger(key),
+            onPointerUp: () => release(key),
+            onPointerLeave: () => release(key),
+            onPointerCancel: () => release(key),
+            onBlur: () => release(key),
+        };
+    }
+    return { pressedKey, trigger, release, flash, getPressProps };
+}
+
+export { resolvePressFeedbackMode, usePressFeedback };

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { PressFeedback } from './use-press-feedback';
 type XButtonVariant = 'default' | 'soft' | 'subtle';
 interface BaseButtonConfig {
     icon: ReactNode;
@@ -21,6 +22,7 @@ interface SingleButtonProps {
     className?: string;
     iconClassName?: string;
     variant?: XButtonVariant;
+    pressFeedback?: PressFeedback;
 }
 interface SplitButtonProps {
     type: 'split';
@@ -33,6 +35,7 @@ interface SplitButtonProps {
     dropdownButtonClassName?: string;
     iconClassName?: string;
     variant?: XButtonVariant;
+    pressFeedback?: PressFeedback;
 }
 type xButtonProps = SingleButtonProps | SplitButtonProps;
 export declare function XButton(props: xButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -7,12 +7,18 @@ var React = require('react');
 var icons = require('@windrun-huaiin/base-ui/icons');
 var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
+var usePressFeedback = require('./use-press-feedback.js');
 
+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';
 function XButton(props) {
     var _a, _b, _c;
     const [isLoading, setIsLoading] = React.useState(false);
     const [menuOpen, setMenuOpen] = React.useState(false);
-    const menuRef = React.useRef(null);
+    const splitRef = React.useRef(null);
+    const pressMode = usePressFeedback.resolvePressFeedbackMode(props.pressFeedback);
+    const { pressedKey, flash, getPressProps } = usePressFeedback.usePressFeedback(PRESS_FEEDBACK_MS);
     const { iconClassName } = props;
     const defaultIconClass = "w-5 h-5";
     const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : 'default';
@@ -30,7 +36,7 @@ function XButton(props) {
     React.useEffect(() => {
         if (props.type === 'split') {
             const handleClickOutside = (event) => {
-                if (menuRef.current && !menuRef.current.contains(event.target)) {
+                if (splitRef.current && !splitRef.current.contains(event.target)) {
                     setMenuOpen(false);
                 }
             };
@@ -56,7 +62,8 @@ function XButton(props) {
             setIsLoading(false);
         }
     });
-    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'
         ? utils.cn(lib.themeBgColor, lib.themeIconColor, lib.themeBorderColor, "border hover:brightness-95")
         : variant === 'subtle'
@@ -72,18 +79,41 @@ function XButton(props) {
         : variant === 'subtle'
             ? utils.cn("bg-transparent hover:bg-neutral-50 dark:hover:bg-neutral-800 sm:border-l", lib.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";
+    const splitContainerVariantClass = variant === 'soft'
+        ? utils.cn('border', lib.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 || ((_b = button.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
-        return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.Loader2Icon, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(button.icon), jsxRuntime.jsx("span", { children: button.text })] })) }));
+        return (jsxRuntime.jsx("button", Object.assign({ onClick: () => {
+                if (!isDisabled && pressMode !== 'none') {
+                    flash('single');
+                }
+                handleButtonClick(button.onClick);
+            }, disabled: isDisabled }, (pressMode !== 'none' && !isDisabled ? getPressProps('single') : {}), { className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isPressed && getButtonPressClass(), isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.Loader2Icon, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(button.icon), jsxRuntime.jsx("span", { children: button.text })] })) })));
     }
     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 || ((_c = mainButton.text) === null || _c === void 0 ? void 0 : _c.trim()) || 'Loading...';
-    return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0", menuOpen && "z-90", className), children: [jsxRuntime.jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: utils.cn("flex-1 min-w-0 sm:min-w-[100px] sm:flex-initial rounded-l-full", baseButtonClass, splitMainButtonVariantClass, isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, title: mainButton.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.Loader2Icon, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(mainButton.icon), jsxRuntime.jsx("span", { children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", onClick: () => setMenuOpen(!menuOpen), disabled: isLoading, className: utils.cn("w-12 rounded-r-full", baseButtonClass, splitDropdownVariantClass, isLoading && disabledClass, dropdownButtonClassName), "aria-label": "Open menu", children: jsxRuntime.jsx(icons.ChevronDownIcon, { className: utils.cn(chevronIconClass, menuOpen && "rotate-180", "transition-transform") }) }), menuOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: utils.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), children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { type: "button", onClick: () => {
+    return (jsxRuntime.jsxs("div", { className: utils.cn("relative inline-flex flex-row items-stretch w-full sm:w-fit rounded-full gap-0", splitContainerVariantClass, menuOpen && "z-90", className), ref: splitRef, children: [jsxRuntime.jsx("button", Object.assign({ onClick: () => {
+                    if (!isMainDisabled && pressMode !== 'none') {
+                        flash('main');
+                    }
+                    handleButtonClick(mainButton.onClick);
+                }, disabled: isMainDisabled }, (pressMode !== 'none' && !isMainDisabled ? getPressProps('main') : {}), { className: utils.cn("flex-1 min-w-0 sm:min-w-[100px] sm:flex-initial rounded-l-full", baseButtonClass, splitMainButtonVariantClass, isMainPressed && getButtonPressClass(), isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
+                    e.preventDefault(); }, title: mainButton.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.Loader2Icon, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(mainButton.icon), jsxRuntime.jsx("span", { children: mainButton.text })] })) })), jsxRuntime.jsx("button", Object.assign({ type: "button", onClick: () => {
+                    if (!isLoading && pressMode !== 'none') {
+                        flash('dropdown');
+                    }
+                    setMenuOpen(!menuOpen);
+                }, disabled: isLoading }, (pressMode !== 'none' && !isLoading ? getPressProps('dropdown') : {}), { className: utils.cn("w-12 rounded-r-full", baseButtonClass, splitDropdownVariantClass, isDropdownPressed && getButtonPressClass(), isLoading && disabledClass, dropdownButtonClassName), "aria-label": "Open menu", children: jsxRuntime.jsx(icons.ChevronDownIcon, { className: utils.cn(chevronIconClass, menuOpen && "rotate-180", "transition-transform") }) })), menuOpen && (jsxRuntime.jsx("div", { className: utils.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), children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { type: "button", onClick: () => {
                         setMenuOpen(false);
                         handleButtonClick(item.onClick);
                     }, disabled: item.disabled || isLoading, className: utils.cn("w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors", item.disabled && disabledClass, item.splitTopBorder && "border-t border-neutral-200 dark:border-neutral-700"), children: [renderIcon(item.icon), jsxRuntime.jsx("span", { className: "flex-1", children: item.text }), item.tag && (jsxRuntime.jsx("span", { className: utils.cn("px-1.5 py-0.5 text-xs rounded", item.tag.color || "bg-blue-100 text-blue-800"), children: item.tag.text }))] }, index))) }))] }));

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

@@ -5,12 +5,18 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import { Loader2Icon, ChevronDownIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeIconColor, themeBgColor, themeBorderColor, themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
+import { resolvePressFeedbackMode, usePressFeedback } from './use-press-feedback.mjs';
 
+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';
 function XButton(props) {
     var _a, _b, _c;
     const [isLoading, setIsLoading] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
-    const menuRef = useRef(null);
+    const splitRef = useRef(null);
+    const pressMode = resolvePressFeedbackMode(props.pressFeedback);
+    const { pressedKey, flash, getPressProps } = usePressFeedback(PRESS_FEEDBACK_MS);
     const { iconClassName } = props;
     const defaultIconClass = "w-5 h-5";
     const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : 'default';
@@ -28,7 +34,7 @@ function XButton(props) {
     useEffect(() => {
         if (props.type === 'split') {
             const handleClickOutside = (event) => {
-                if (menuRef.current && !menuRef.current.contains(event.target)) {
+                if (splitRef.current && !splitRef.current.contains(event.target)) {
                     setMenuOpen(false);
                 }
             };
@@ -54,7 +60,8 @@ function XButton(props) {
             setIsLoading(false);
         }
     });
-    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, themeIconColor, themeBorderColor, "border hover:brightness-95")
         : variant === 'subtle'
@@ -70,18 +77,41 @@ function XButton(props) {
         : variant === 'subtle'
             ? cn("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";
+    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 || ((_b = button.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
-        return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(Loader2Icon, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(button.icon), jsx("span", { children: button.text })] })) }));
+        return (jsx("button", Object.assign({ 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), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(Loader2Icon, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(button.icon), jsx("span", { children: button.text })] })) })));
     }
     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 || ((_c = mainButton.text) === null || _c === void 0 ? void 0 : _c.trim()) || 'Loading...';
-    return (jsxs("div", { className: cn("relative flex flex-row items-stretch w-full sm:w-auto rounded-full gap-0", menuOpen && "z-90", className), children: [jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: cn("flex-1 min-w-0 sm:min-w-[100px] sm:flex-initial rounded-l-full", baseButtonClass, splitMainButtonVariantClass, isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, title: mainButton.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(Loader2Icon, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(mainButton.icon), jsx("span", { children: mainButton.text })] })) }), jsx("button", { type: "button", onClick: () => setMenuOpen(!menuOpen), disabled: isLoading, className: cn("w-12 rounded-r-full", baseButtonClass, splitDropdownVariantClass, isLoading && disabledClass, dropdownButtonClassName), "aria-label": "Open menu", children: jsx(ChevronDownIcon, { className: cn(chevronIconClass, menuOpen && "rotate-180", "transition-transform") }) }), menuOpen && (jsx("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), children: menuItems.map((item, index) => (jsxs("button", { type: "button", onClick: () => {
+    return (jsxs("div", { className: cn("relative inline-flex flex-row items-stretch w-full sm:w-fit rounded-full gap-0", splitContainerVariantClass, menuOpen && "z-90", className), ref: splitRef, children: [jsx("button", Object.assign({ 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), onMouseDown: e => { if (e.button === 2)
+                    e.preventDefault(); }, title: mainButton.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(Loader2Icon, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(mainButton.icon), jsx("span", { children: mainButton.text })] })) })), jsx("button", Object.assign({ type: "button", 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), "aria-label": "Open menu", children: jsx(ChevronDownIcon, { className: cn(chevronIconClass, menuOpen && "rotate-180", "transition-transform") }) })), menuOpen && (jsx("div", { 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), children: menuItems.map((item, index) => (jsxs("button", { type: "button", onClick: () => {
                         setMenuOpen(false);
                         handleButtonClick(item.onClick);
                     }, disabled: item.disabled || isLoading, className: cn("w-full flex items-center gap-2 px-3 py-2 text-sm text-left hover:bg-neutral-100 dark:hover:bg-neutral-700 transition-colors", item.disabled && disabledClass, item.splitTopBorder && "border-t border-neutral-200 dark:border-neutral-700"), children: [renderIcon(item.icon), jsx("span", { className: "flex-1", children: item.text }), item.tag && (jsx("span", { className: cn("px-1.5 py-0.5 text-xs rounded", item.tag.color || "bg-blue-100 text-blue-800"), children: item.tag.text }))] }, index))) }))] }));

package/dist/main/calendar/calendar-date-range-input.d.ts

@@ -0,0 +1,17 @@
+import { type PressFeedback } from '../buttons/use-press-feedback';
+import { type RandomCalendarRange } from './random-date-range-dialog';
+export type CalendarDateRangeValue = RandomCalendarRange;
+export type CalendarDateRangeInputProps = {
+    value: CalendarDateRangeValue;
+    onChange: (value: CalendarDateRangeValue) => void;
+    placeholder?: string;
+    defaultRangeDays?: number;
+    disabled?: boolean;
+    className?: string;
+    showDayCount?: boolean;
+    dayCountUnit?: string;
+    themedCalendarIcon?: boolean;
+    clearPressFeedback?: PressFeedback;
+    onOpenChange?: (open: boolean) => void;
+};
+export declare function CalendarDateRangeInput({ value, onChange, placeholder, defaultRangeDays, disabled, className, showDayCount, dayCountUnit, themedCalendarIcon, clearPressFeedback, onOpenChange, }: CalendarDateRangeInputProps): import("react/jsx-runtime").JSX.Element;