@mezzanine-ui/react 0.15.3 → 1.0.0-alpha.0

package/Input/Input.js

@@ -1,50 +1,215 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useRef } from 'react';
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useCallback } from 'react';
 import { inputClasses } from '@mezzanine-ui/core/input';
-import { selectClasses } from '@mezzanine-ui/core/select';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
-import { useInputWithTagsModeValue } from '../Form/useInputWithTagsModeValue.js';
-import { MezzanineConfig } from '../Provider/context.js';
+import { EyeIcon, EyeInvisibleIcon, SearchIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import SelectButton from './SelectButton/SelectButton.js';
+import ActionButton from './ActionButton/ActionButton.js';
+import SpinnerButton from './SpinnerButton/SpinnerButton.js';
 import TextField from '../TextField/TextField.js';
-import Tag from '../Tag/Tag.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
+import PasswordStrengthIndicator from './PasswordStrengthIndicator/PasswordStrengthIndicator.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` input.
  */
 const Input = forwardRef(function Input(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef: inputRefProp, mode = 'default', onChange: onChangeProp, placeholder, prefix, readOnly = false, required = requiredFromFormControl || false, size = globalSize, suffix, tagsProps, value: valueProp, } = props;
-    const { initialTagsValue, inputPosition = 'bottom', maxTagsLength, onTagsChange, } = tagsProps || {};
-    const tagsMode = mode === 'tags';
+    const { active, className, defaultValue, disabled = false, error = false, formatter, fullWidth = true, id, inputProps, inputType, inputRef: inputRefProp, name, onChange: onChangeProp, parser, placeholder, readonly, size = 'main', typing, variant = 'base', value: valueProp, } = props;
     const inputRef = useRef(null);
-    const [value, onChange, onClear] = useInputWithClearControlValue({
+    const [showPassword, setShowPassword] = useState(false);
+    const [value, onChange, onClearFromHook] = useInputWithClearControlValue({
         defaultValue,
         onChange: onChangeProp,
         ref: inputRef,
         value: valueProp,
     });
-    const [{ tags, tagsReachedMax }, tagsModeOnChange, tagsModeOnClear, tagsModeOnRemove, onKeyDown,] = useInputWithTagsModeValue({
-        defaultValue,
-        initialTagsValue,
-        maxTagsLength,
-        onTagsChange,
-        ref: inputRef,
-        skip: !tagsMode,
-        tagValueMaxLength: inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength,
-        value: valueProp,
-    });
+    // Handle formatter/parser logic
+    const handleChange = useCallback((event) => {
+        let newValue = event.target.value;
+        // Parse the formatted value back to raw value if parser is provided
+        if (parser) {
+            newValue = parser(newValue);
+        }
+        // Create a new event with parsed value for onChange callback
+        const syntheticEvent = {
+            ...event,
+            target: {
+                ...event.target,
+                value: newValue,
+            },
+        };
+        onChange(syntheticEvent);
+    }, [parser, onChange]);
+    // Format the display value
+    const displayValue = formatter ? formatter(value) : value;
     const composedInputRef = useComposeRefs([inputRefProp, inputRef]);
-    const active = !!value;
-    const mountInput = !tagsMode || !tagsReachedMax;
-    return (jsxs(TextField, { ref: ref, active: active, className: cx(inputClasses.host, tagsMode && inputClasses.tagsMode, inputPosition === 'top' && inputClasses.tagsModeInputOnTop, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: tagsMode ? tagsModeOnClear : onClear, prefix: mountInput ? prefix : undefined, suffix: mountInput ? suffix : undefined, size: size, children: [tagsMode && (jsx("div", { className: selectClasses.triggerTags, children: tags.map((tag) => (jsx(Tag, { closable: true, disabled: disabled, size: size, onClose: (e) => {
-                        e.stopPropagation();
-                        tagsModeOnRemove(tag);
-                    }, children: tag }, tag))) })), mountInput && (jsx("input", { ...inputProps, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: tagsMode ? tagsModeOnChange : onChange, onKeyDown: tagsMode ? onKeyDown : inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: composedInputRef, required: required, value: tagsMode ? undefined : value }))] }));
+    // Determine input type and props based on variant
+    let defaultInputType = 'text';
+    let prefix = undefined;
+    let suffix = undefined;
+    let clearable = false;
+    let onClear = undefined;
+    let inputStyle = {};
+    let defaultInputProps = {};
+    let prefixExternalButton = undefined;
+    let suffixExternalButton = undefined;
+    let showPasswordStrengthIndicator = false;
+    let passwordStrengthIndicatorProps = undefined;
+    // Handle different input types with type narrowing
+    switch (variant) {
+        case 'base': {
+            const baseProps = props;
+            if (baseProps.clearable) {
+                clearable = baseProps.clearable;
+                onClear = baseProps.onClear || onClearFromHook;
+            }
+            break;
+        }
+        case 'affix': {
+            const affixProps = props;
+            if (affixProps.clearable) {
+                clearable = affixProps.clearable;
+                onClear = affixProps.onClear || onClearFromHook;
+            }
+            prefix = affixProps.prefix;
+            suffix = affixProps.suffix;
+            break;
+        }
+        case 'search': {
+            const searchProps = props;
+            // 預設為可清除
+            clearable =
+                typeof searchProps.clearable !== 'undefined'
+                    ? searchProps.clearable
+                    : true;
+            if (clearable) {
+                onClear = searchProps.onClear || onClearFromHook;
+            }
+            // 預設有 search icon 在前綴
+            prefix = jsx(Icon, { icon: SearchIcon });
+            break;
+        }
+        case 'number': {
+            const numberProps = props;
+            const { step = 1, max, min } = numberProps;
+            // Input type 應是 number
+            defaultInputType = 'number';
+            // 額外的屬性
+            defaultInputProps = {
+                min: min,
+                max: max,
+                step: step,
+            };
+            break;
+        }
+        case 'unit': {
+            const unitProps = props;
+            const { step = 1, max, min, onSpinUp, onSpinDown } = unitProps;
+            // 預設置右對齊
+            inputStyle = { textAlign: 'right' };
+            // 允許填入 prefix/suffix
+            prefix = unitProps.prefix;
+            suffix = unitProps.suffix;
+            defaultInputProps = {
+                min: min,
+                max: max,
+                step: step,
+            };
+            if (unitProps.showSpinner) {
+                const handleSpinUp = () => {
+                    const currentValue = parseFloat(value || '0');
+                    const newValue = currentValue + step;
+                    if (typeof max === 'undefined' || newValue <= max) {
+                        onChange({
+                            target: { value: String(newValue) },
+                        });
+                    }
+                    onSpinUp === null || onSpinUp === void 0 ? void 0 : onSpinUp();
+                };
+                const handleSpinDown = () => {
+                    const currentValue = parseFloat(value || '0');
+                    const newValue = currentValue - step;
+                    if (typeof min === 'undefined' || newValue >= min) {
+                        onChange({
+                            target: { value: String(newValue) },
+                        });
+                    }
+                    onSpinDown === null || onSpinDown === void 0 ? void 0 : onSpinDown();
+                };
+                suffix = (jsxs(Fragment, { children: [unitProps.suffix, jsxs("div", { className: inputClasses.spinners, children: [jsx(SpinnerButton, { type: "up", size: size, disabled: disabled, onClick: handleSpinUp }), jsx(SpinnerButton, { type: "down", size: size, disabled: disabled, onClick: handleSpinDown })] })] }));
+            }
+            break;
+        }
+        case 'action': {
+            const actionProps = props;
+            const { actionButton } = actionProps;
+            if (actionButton.position === 'prefix') {
+                const { ...restActionButtonProps } = actionButton;
+                prefixExternalButton = (jsx(ActionButton, { ...restActionButtonProps, disabled: restActionButtonProps.disabled || disabled, size: size }));
+            }
+            if (actionButton.position === 'suffix') {
+                const { ...restActionButtonProps } = actionButton;
+                suffixExternalButton = (jsx(ActionButton, { ...restActionButtonProps, disabled: restActionButtonProps.disabled || disabled, size: size }));
+            }
+            break;
+        }
+        case 'select': {
+            const selectProps = props;
+            const { selectButton } = selectProps;
+            if (selectButton.position === 'both' ||
+                selectButton.position === 'prefix') {
+                const { ...restSelectButtonProps } = selectButton;
+                prefixExternalButton = (jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, size: size }));
+            }
+            if (selectButton.position === 'both' ||
+                selectButton.position === 'suffix') {
+                const { ...restSelectButtonProps } = selectButton;
+                suffixExternalButton = (jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, size: size }));
+            }
+            break;
+        }
+        case 'password': {
+            const passwordProps = props;
+            defaultInputType = showPassword ? 'text' : 'password';
+            if (passwordProps.clearable) {
+                onClear = passwordProps.onClear || onClearFromHook;
+            }
+            const handlePasswordToggle = (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    setShowPassword((prev) => !prev);
+                }
+            };
+            suffix = (jsx(Icon, { icon: showPassword ? EyeIcon : EyeInvisibleIcon, onClick: () => setShowPassword((prev) => !prev), role: "button", tabIndex: 0, "aria-label": showPassword ? 'Hide password' : 'Show password', onKeyDown: handlePasswordToggle }));
+            if (passwordProps.showPasswordStrengthIndicator) {
+                showPasswordStrengthIndicator = true;
+                passwordStrengthIndicatorProps =
+                    passwordProps.passwordStrengthIndicator;
+            }
+            break;
+        }
+    }
+    const interactiveProps = (() => {
+        if (disabled) {
+            return { disabled: true };
+        }
+        if (readonly) {
+            return { readonly: true };
+        }
+        if (typing) {
+            return { typing: true };
+        }
+        return {};
+    })();
+    return (jsxs("div", { ref: ref, className: cx(inputClasses.container, className), children: [jsxs("div", { className: cx(inputClasses.host, {
+                    [inputClasses.withPrefixExternalAction]: prefixExternalButton !== undefined,
+                    [inputClasses.withSuffixExternalAction]: suffixExternalButton !== undefined,
+                }), children: [prefixExternalButton, jsx(TextField, { active: active, className: cx(inputClasses.field, {
+                            [inputClasses.number]: variant === 'number',
+                        }, inputClasses.size(size)), clearable: clearable, error: error, fullWidth: fullWidth, onClear: onClear, size: size, prefix: prefix, suffix: suffix, ...interactiveProps, children: jsx("input", { ...defaultInputProps, ...inputProps, id: id, name: name, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readonly, disabled: disabled, onChange: formatter || parser ? handleChange : onChange, placeholder: placeholder, readOnly: readonly, ref: composedInputRef, style: { ...inputStyle, ...inputProps === null || inputProps === void 0 ? void 0 : inputProps.style }, type: inputType !== null && inputType !== void 0 ? inputType : defaultInputType, value: displayValue }) }), suffixExternalButton] }), variant === 'password' && showPasswordStrengthIndicator ? (jsx(PasswordStrengthIndicator, { ...(passwordStrengthIndicatorProps || {}), className: cx(inputClasses.indicatorContainer, passwordStrengthIndicatorProps === null || passwordStrengthIndicatorProps === void 0 ? void 0 : passwordStrengthIndicatorProps.className) })) : null] }));
 });
-var Input$1 = Input;
 
-export { Input$1 as default };
+export { Input as default };

package/Input/PasswordStrengthIndicator/PasswordStrengthIndicator.d.ts

@@ -0,0 +1,31 @@
+import { InputStrength } from '@mezzanine-ui/core/input';
+import type { FormHintTextProps } from '../../Form/FormHintText';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface PasswordStrengthIndicatorProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The strength of password.
+     * @default 'weak'
+     */
+    strength?: InputStrength;
+    /**
+     * The text to show beside the strength indicator bar.
+     */
+    strengthText?: string;
+    /**
+     * The prefix text for strength text.
+     * @default '密碼強度：'
+     */
+    strengthTextPrefix?: string;
+    /**
+     * The hint texts to show below the strength indicator bar.
+     */
+    hintTexts?: {
+        severity: FormHintTextProps['severity'];
+        hint: string;
+    }[];
+}
+/**
+ * The react component for `mezzanine` password strength indicator.
+ */
+declare const PasswordStrengthIndicator: import("react").ForwardRefExoticComponent<PasswordStrengthIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export default PasswordStrengthIndicator;

package/Input/PasswordStrengthIndicator/PasswordStrengthIndicator.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { inputPasswordStrengthIndicatorClasses } from '@mezzanine-ui/core/input';
+import { forwardRef } from 'react';
+import FormHintText from '../../Form/FormHintText.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` password strength indicator.
+ */
+const PasswordStrengthIndicator = forwardRef(function PasswordStrengthIndicator(props, ref) {
+    const { className, strength = 'weak', strengthText: strengthTextProp, strengthTextPrefix = '密碼強度：', hintTexts, ...rest } = props;
+    const strengthText = strengthTextProp ||
+        (strength === 'weak' ? '低' : strength === 'medium' ? '中' : '高');
+    return (jsxs("div", { ref: ref, className: cx(inputPasswordStrengthIndicatorClasses.host, className), ...rest, children: [jsx("div", { className: cx(inputPasswordStrengthIndicatorClasses.bar, inputPasswordStrengthIndicatorClasses.barState(strength)) }), jsxs("span", { className: inputPasswordStrengthIndicatorClasses.text, children: [strengthTextPrefix, jsx("mark", { children: strengthText })] }), hintTexts && hintTexts.length > 0 && (jsx("div", { className: inputPasswordStrengthIndicatorClasses.hintTextGroup, children: hintTexts.map((hintText, idx) => (jsx(FormHintText, { severity: hintText.severity, children: hintText.hint }, idx))) }))] }));
+});
+
+export { PasswordStrengthIndicator as default };

package/Input/PasswordStrengthIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export type { PasswordStrengthIndicatorProps } from './PasswordStrengthIndicator';
+export { default } from './PasswordStrengthIndicator';

package/Input/PasswordStrengthIndicator/index.js

@@ -0,0 +1 @@
+export { default } from './PasswordStrengthIndicator.js';

package/Input/SelectButton/SelectButton.d.ts

@@ -0,0 +1,20 @@
+import { InputSize } from '@mezzanine-ui/core/input';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface SelectButtonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'type' | 'disabled'> {
+    /**
+     * Whether the select button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The value of select button.
+     */
+    value?: string;
+    /**
+     * The size of select button.
+     * @default 'main'
+     */
+    size?: InputSize;
+}
+/** @TODO dropdown menu with button */
+declare const SelectButton: import("react").ForwardRefExoticComponent<SelectButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default SelectButton;

package/Input/SelectButton/SelectButton.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { inputSelectButtonClasses } from '@mezzanine-ui/core/input';
+import { forwardRef } from 'react';
+import Rotate from '../../Transition/Rotate.js';
+import { ChevronDownIcon } from '@mezzanine-ui/icons';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+/** @TODO dropdown menu with button */
+const SelectButton = forwardRef(function SelectButton(props, ref) {
+    const { className, disabled, value, size = 'main', ...rest } = props;
+    return (jsxs("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSelectButtonClasses.host, disabled && inputSelectButtonClasses.disabled, size === 'main' ? inputSelectButtonClasses.main : inputSelectButtonClasses.sub, className), title: value, ...rest, children: [jsx("span", { className: inputSelectButtonClasses.text, children: value }), jsx(Rotate
+            /** @TODO in=true when dropdown opened */
+            , { 
+                /** @TODO in=true when dropdown opened */
+                in: false, duration: MOTION_DURATION.fast, easing: MOTION_EASING.standard, children: jsx(Icon, { className: inputSelectButtonClasses.icon, icon: ChevronDownIcon, size: 16 }) })] }));
+});
+
+export { SelectButton as default };

package/Input/SelectButton/index.d.ts

@@ -0,0 +1,2 @@
+export type { SelectButtonProps } from './SelectButton';
+export { default } from './SelectButton';

package/Input/SelectButton/index.js

@@ -0,0 +1 @@
+export { default } from './SelectButton.js';

package/Input/SpinnerButton/SpinnerButton.d.ts

@@ -0,0 +1,19 @@
+import { InputSize } from '@mezzanine-ui/core/input';
+import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
+export interface SpinnerButtonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'button'>, 'type' | 'disabled'> {
+    /**
+     * Whether the spinner button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of spinner button.
+     * @default 'main'
+     */
+    size?: InputSize;
+    /**
+     * The type of spinner button.
+     */
+    type: 'up' | 'down';
+}
+declare const SpinnerButton: import("react").ForwardRefExoticComponent<SpinnerButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default SpinnerButton;

package/Input/SpinnerButton/SpinnerButton.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { inputSpinnerButtonClasses } from '@mezzanine-ui/core/input';
+import { forwardRef } from 'react';
+import { CaretUpFlatIcon, CaretDownFlatIcon } from '@mezzanine-ui/icons';
+import Icon from '../../Icon/Icon.js';
+import cx from 'clsx';
+
+const SpinnerButton = forwardRef(function SpinnerButton(props, ref) {
+    const { className, disabled, size = 'main', type, ...rest } = props;
+    return (jsx("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSpinnerButtonClasses.host, disabled && inputSpinnerButtonClasses.disabled, size === 'main' ? inputSpinnerButtonClasses.main : inputSpinnerButtonClasses.sub, className), title: type === 'up' ? 'Increase value' : 'Decrease value', ...rest, children: jsx(Icon, { icon: type === 'up' ? CaretUpFlatIcon : CaretDownFlatIcon }) }));
+});
+
+export { SpinnerButton as default };

package/Input/SpinnerButton/index.d.ts

@@ -0,0 +1,2 @@
+export type { SpinnerButtonProps } from './SpinnerButton';
+export { default } from './SpinnerButton';

package/Input/SpinnerButton/index.js

@@ -0,0 +1 @@
+export { default } from './SpinnerButton.js';

package/Input/index.d.ts

@@ -1,2 +1,3 @@
-export type { InputSize } from '@mezzanine-ui/core/input';
-export { InputProps, default } from './Input';
+export type { InputSize, InputStrength } from '@mezzanine-ui/core/input';
+export type { InputBaseProps, ClearableInput, NumberInput, BaseInputProps, WithAffixInputProps, SearchInputProps, NumberInputProps, UnitInputProps, ActionInputProps, SelectInputProps, WithPasswordStrengthIndicator, PasswordInputProps, InputProps, } from './Input';
+export { default } from './Input';

package/Menu/Menu.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext } from 'react';
 import { toMenuCssVars, menuClasses } from '@mezzanine-ui/core/menu';
@@ -20,6 +21,5 @@ const Menu = forwardRef(function Menu(props, ref) {
     };
     return (jsx("ul", { ...rest, ref: ref, className: cx(menuClasses.host, menuClasses.size(size), className), role: role, style: style, children: children }));
 });
-var Menu$1 = Menu;
 
-export { Menu$1 as default };
+export { Menu as default };

package/Menu/MenuDivider.js

@@ -10,6 +10,5 @@ const MenuDivider = forwardRef(function MenuDivider(props, ref) {
     const { className, ...rest } = props;
     return jsx("hr", { ...rest, ref: ref, className: cx(menuDividerClasses.host, className) });
 });
-var MenuDivider$1 = MenuDivider;
 
-export { MenuDivider$1 as default };
+export { MenuDivider as default };

package/Menu/MenuItem.js

@@ -21,6 +21,5 @@ const MenuItem = forwardRef(function MenuItem(props, ref) {
             }
         }, onKeyDown: onKeyDown, role: role, children: [jsx("div", { className: menuItemClasses.label, children: children }), active && jsx(Icon, { className: menuItemClasses.activeIcon, icon: CheckIcon })] }));
 });
-var MenuItem$1 = MenuItem;
 
-export { MenuItem$1 as default };
+export { MenuItem as default };

package/Menu/MenuItemGroup.js

@@ -10,6 +10,5 @@ const MenuItemGroup = forwardRef(function MenuItemGroup(props, ref) {
     const { children, className, label, ...rest } = props;
     return (jsxs("li", { ref: ref, ...rest, className: cx(menuItemGroupClasses.host, className), children: [jsx("span", { className: menuItemGroupClasses.label, children: label }), jsx("ul", { className: menuItemGroupClasses.items, children: children })] }));
 });
-var MenuItemGroup$1 = MenuItemGroup;
 
-export { MenuItemGroup$1 as default };
+export { MenuItemGroup as default };

package/Menu/index.d.ts

@@ -1,5 +1,9 @@
 export type { MenuSize } from '@mezzanine-ui/core/menu';
-export { MenuProps, default } from './Menu';
-export { MenuDividerProps, default as MenuDivider } from './MenuDivider';
-export { MenuItemProps, default as MenuItem } from './MenuItem';
-export { MenuItemGroupProps, default as MenuItemGroup } from './MenuItemGroup';
+export type { MenuProps } from './Menu';
+export { default } from './Menu';
+export type { MenuDividerProps } from './MenuDivider';
+export { default as MenuDivider } from './MenuDivider';
+export type { MenuItemProps } from './MenuItem';
+export { default as MenuItem } from './MenuItem';
+export type { MenuItemGroupProps } from './MenuItemGroup';
+export { default as MenuItemGroup } from './MenuItemGroup';

package/Message/Message.d.ts

@@ -1,9 +1,9 @@
 import { MessageSeverity } from '@mezzanine-ui/core/message';
 import { IconDefinition } from '@mezzanine-ui/icons';
-import { FC, Key } from 'react';
+import type { FC, Key } from 'react';
 import { Notifier, NotifierData, NotifierConfig } from '../Notifier';
-import { SlideFadeProps } from '../Transition';
-export interface MessageConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<SlideFadeProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'direction'> {
+import { TranslateProps } from '../Transition';
+export interface MessageConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<TranslateProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'from'> {
 }
 export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfigProps {
     /**
@@ -25,7 +25,9 @@ export interface MessageData extends Omit<NotifierData, 'onClose'>, MessageConfi
      */
     severity?: MessageSeverity;
 }
-export type MessageType = FC<MessageData> & Notifier<MessageData, MessageConfigProps> & Record<string, (message: MessageData['children'], props?: Omit<MessageData, 'children' | 'severity' | 'icon'>) => Key>;
+export type MessageType = FC<MessageData> & Notifier<MessageData, MessageConfigProps> & Record<string, (message: MessageData['children'], props?: Omit<MessageData, 'children' | 'severity' | 'icon'> & {
+    key?: Key;
+}) => Key>;
 /**
  * The react component for `mezzanine` message.
  *

package/Message/Message.js

@@ -1,7 +1,9 @@
-import { useState, useEffect, createElement } from 'react';
+'use client';
+import { useState, useRef, useCallback, useEffect, createElement } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { messageClasses, messageIcons } from '@mezzanine-ui/core/message';
-import SlideFade from '../Transition/SlideFade.js';
+import { messageTimerController } from './MessageTimerController.js';
+import Translate from '../Transition/Translate.js';
 import Icon from '../Icon/Icon.js';
 import { createNotifier } from '../Notifier/createNotifier.js';
 import cx from 'clsx';
@@ -15,16 +17,72 @@ import cx from 'clsx';
 const Message = ((props) => {
     const { children, duration, icon, reference, severity, onExited: onExitedProp, ...restTransitionProps } = props;
     const [open, setOpen] = useState(true);
+    const timerRef = useRef(null);
+    const remainingTimeRef = useRef(duration || 0);
+    const startTimeRef = useRef(Date.now());
+    // 清理計時器
+    const clearTimer = useCallback(() => {
+        if (timerRef.current) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    // 開始計時器
+    const startTimer = useCallback((time) => {
+        clearTimer();
+        if (time > 0) {
+            startTimeRef.current = Date.now();
+            remainingTimeRef.current = time;
+            timerRef.current = window.setTimeout(() => {
+                setOpen(false);
+            }, time);
+        }
+    }, [clearTimer]);
+    // 暫停計時器
+    const pauseTimer = useCallback(() => {
+        if (timerRef.current) {
+            clearTimer();
+            const elapsed = Date.now() - startTimeRef.current;
+            remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+        }
+    }, [clearTimer]);
+    // 恢復計時器
+    const resumeTimer = useCallback(() => {
+        if (remainingTimeRef.current > 0) {
+            startTimer(remainingTimeRef.current);
+        }
+    }, [startTimer]);
+    // 初始設定計時器
     useEffect(() => {
         if (open && duration) {
-            const timer = window.setTimeout(() => {
-                setOpen(false);
-            }, duration);
+            startTimer(duration);
+        }
+        else if (open && duration === false) {
+            // duration 為 false 時，清除計時器（不自動關閉）
+            clearTimer();
+        }
+        return () => {
+            clearTimer();
+        };
+    }, [open, duration, clearTimer, startTimer]);
+    // 註冊到全域控制器
+    useEffect(() => {
+        if (reference && duration) {
+            messageTimerController.register(reference, {
+                pause: pauseTimer,
+                resume: resumeTimer,
+            });
             return () => {
-                window.clearTimeout(timer);
+                messageTimerController.unregister(reference);
             };
         }
-    }, [open, duration]);
+    }, [reference, duration, pauseTimer, resumeTimer]);
+    // 清理計時器（組件卸載時）
+    useEffect(() => {
+        return () => {
+            clearTimer();
+        };
+    }, [clearTimer]);
     const onExited = (node) => {
         if (onExitedProp) {
             onExitedProp(node);
@@ -32,11 +90,24 @@ const Message = ((props) => {
         if (reference)
             Message.remove(reference);
     };
-    return (jsx(SlideFade, { in: open, appear: true, onExited: onExited, ...restTransitionProps, children: jsxs("div", { className: cx(messageClasses.host, severity ? messageClasses.severity(severity) : ''), children: [icon ? jsx(Icon, { className: messageClasses.icon, icon: icon }) : null, jsx("span", { className: messageClasses.content, children: children })] }) }));
+    const handleMouseEnter = () => {
+        messageTimerController.pause();
+    };
+    const handleMouseLeave = () => {
+        messageTimerController.resume();
+    };
+    const handleFocus = () => {
+        messageTimerController.pause();
+    };
+    const handleBlur = () => {
+        messageTimerController.resume();
+    };
+    return (jsx(Translate, { in: open, appear: true, onExited: onExited, from: "bottom", ...restTransitionProps, children: jsxs("div", { className: cx(messageClasses.host, severity ? messageClasses.severity(severity) : ''), onBlur: handleBlur, onFocus: handleFocus, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "status", children: [icon ? (jsx(Icon, { className: messageClasses.icon, icon: icon, spin: severity === 'loading' })) : null, jsx("span", { className: messageClasses.content, children: children })] }) }));
 });
 const { add, config, destroy, remove } = createNotifier({
     duration: 3000,
-    render: (message) => createElement(Message, { ...message, key: undefined }),
+    maxCount: 4,
+    render: (message) => (createElement(Message, { ...message, reference: message.key, key: undefined })),
     setRoot: (root) => {
         root === null || root === void 0 ? void 0 : root.setAttribute('class', messageClasses.root);
     },
@@ -62,12 +133,17 @@ const severities = [
         key: 'info',
         icon: messageIcons.info,
     },
+    {
+        key: 'loading',
+        icon: messageIcons.loading,
+    },
 ];
 const validSeverities = [
     'success',
     'warning',
     'error',
     'info',
+    'loading',
 ];
 severities.forEach((severity) => {
     Message[severity.key] = (message, props) => Message.add({
@@ -77,8 +153,8 @@ severities.forEach((severity) => {
             ? severity.key
             : undefined,
         icon: severity.icon,
+        duration: severity.key === 'loading' ? false : props === null || props === void 0 ? void 0 : props.duration,
     });
 });
-var Message$1 = Message;
 
-export { Message$1 as default };
+export { Message as default };