@mezzanine-ui/react 1.0.0-rc.5 → 1.0.0-rc.7

package/Form/useInputControlValue.js

@@ -2,6 +2,25 @@ import { useLastCallback } from '../hooks/useLastCallback.js';
 import { useControlValueState } from './useControlValueState.js';
 
 const equalityFn = (a, b) => a === b;
+/**
+ * 管理 Input／Textarea 文字值的受控狀態 Hook。
+ *
+ * 支援受控（`value`）與非受控（`defaultValue`）兩種用法，
+ * 回傳當前文字值與穩定的 `onChange` 事件處理器。
+ *
+ * @example
+ * ```tsx
+ * import { useInputControlValue } from '@mezzanine-ui/react';
+ *
+ * function MyInput({ value, onChange }) {
+ *   const [inputValue, handleChange] = useInputControlValue({ value, onChange });
+ *   return <input value={inputValue} onChange={handleChange} />;
+ * }
+ * ```
+ *
+ * @see {@link Input} 搭配的元件
+ * @see {@link Textarea} 搭配的元件
+ */
 function useInputControlValue(props) {
     const { defaultValue = '', onChange: onChangeProp, value: valueProp } = props;
     const [value, setValue] = useControlValueState({

package/Form/useInputWithClearControlValue.d.ts

@@ -3,4 +3,24 @@ import { UseInputControlValueProps } from './useInputControlValue';
 export interface UseInputWithClearControlValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
     ref: RefObject<E | null>;
 }
+/**
+ * 為可清除 Input 提供值管理的受控狀態 Hook。
+ *
+ * 在 `useInputControlValue` 的基礎上額外提供 `onClear` 清除處理器，
+ * 透過操作原生 DOM ref 模擬一個值為空字串的 change 事件，確保受控流程完整。
+ *
+ * @example
+ * ```tsx
+ * import { useInputWithClearControlValue } from '@mezzanine-ui/react';
+ *
+ * const inputRef = useRef<HTMLInputElement>(null);
+ * const [value, onChange, onClear] = useInputWithClearControlValue({
+ *   ref: inputRef,
+ *   value: controlledValue,
+ *   onChange: handleChange,
+ * });
+ * ```
+ *
+ * @see {@link Input} 搭配的元件（clearable 變體）
+ */
 export declare function useInputWithClearControlValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: UseInputWithClearControlValueProps<E>): readonly [string, (event: ChangeEvent<E>) => void, (event: MouseEvent) => void];

package/Form/useInputWithClearControlValue.js

@@ -1,5 +1,25 @@
 import { useInputControlValue } from './useInputControlValue.js';
 
+/**
+ * 為可清除 Input 提供值管理的受控狀態 Hook。
+ *
+ * 在 `useInputControlValue` 的基礎上額外提供 `onClear` 清除處理器，
+ * 透過操作原生 DOM ref 模擬一個值為空字串的 change 事件，確保受控流程完整。
+ *
+ * @example
+ * ```tsx
+ * import { useInputWithClearControlValue } from '@mezzanine-ui/react';
+ *
+ * const inputRef = useRef<HTMLInputElement>(null);
+ * const [value, onChange, onClear] = useInputWithClearControlValue({
+ *   ref: inputRef,
+ *   value: controlledValue,
+ *   onChange: handleChange,
+ * });
+ * ```
+ *
+ * @see {@link Input} 搭配的元件（clearable 變體）
+ */
 function useInputWithClearControlValue(props) {
     const { defaultValue, onChange: onChangeProp, ref, value: valueProp } = props;
     const [value, onChange] = useInputControlValue({

package/Form/useRadioControlValue.d.ts

@@ -8,4 +8,23 @@ export interface UseRadioControlValueProps extends UseSwitchControlValueProps {
     radioGroup?: RadioGroupControlContextValue;
     value?: string;
 }
+/**
+ * 管理 Radio 選取狀態的受控 Hook。
+ *
+ * 支援獨立使用與在 RadioGroup 內使用兩種情境：
+ * 當傳入 `radioGroup` 上下文時，會以群組的 `value` 與本身的 `value` 進行比對來決定是否選中。
+ *
+ * @example
+ * ```tsx
+ * import { useRadioControlValue } from '@mezzanine-ui/react';
+ *
+ * const [checked, handleChange] = useRadioControlValue({
+ *   value: 'option-a',
+ *   radioGroup: { value: selectedValue, onChange: handleGroupChange },
+ * });
+ * ```
+ *
+ * @see {@link Radio} 搭配的元件
+ * @see {@link RadioGroup} 搭配的元件
+ */
 export declare function useRadioControlValue(props: UseRadioControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];

package/Form/useRadioControlValue.js

@@ -1,5 +1,24 @@
 import { useSwitchControlValue } from './useSwitchControlValue.js';
 
+/**
+ * 管理 Radio 選取狀態的受控 Hook。
+ *
+ * 支援獨立使用與在 RadioGroup 內使用兩種情境：
+ * 當傳入 `radioGroup` 上下文時，會以群組的 `value` 與本身的 `value` 進行比對來決定是否選中。
+ *
+ * @example
+ * ```tsx
+ * import { useRadioControlValue } from '@mezzanine-ui/react';
+ *
+ * const [checked, handleChange] = useRadioControlValue({
+ *   value: 'option-a',
+ *   radioGroup: { value: selectedValue, onChange: handleGroupChange },
+ * });
+ * ```
+ *
+ * @see {@link Radio} 搭配的元件
+ * @see {@link RadioGroup} 搭配的元件
+ */
 function useRadioControlValue(props) {
     const { checked: checkedProp, defaultChecked, onChange: onChangeProp, radioGroup, value, } = props;
     const { onChange: onChangeFromGroup } = radioGroup || {};

package/Form/useSelectValueControl.d.ts

@@ -29,4 +29,23 @@ export type SelectSingleValueControl = SelectBaseValueControl & {
     value: SelectValue | null;
 };
 export type SelectValueControl = SelectMultipleValueControl | SelectSingleValueControl;
+/**
+ * 管理 Select 單選／多選值的受控狀態 Hook。
+ *
+ * 根據 `mode` 分別處理單選（`single`）與多選（`multiple`）邏輯，
+ * 提供 `value`、`onChange` 與 `onClear` 等操作介面。
+ *
+ * @example
+ * ```tsx
+ * import { useSelectValueControl } from '@mezzanine-ui/react';
+ *
+ * const control = useSelectValueControl({
+ *   mode: 'single',
+ *   value: selectedOption,
+ *   onChange: (option) => setSelectedOption(option),
+ * });
+ * ```
+ *
+ * @see {@link Select} 搭配的元件
+ */
 export declare const useSelectValueControl: (props: UseSelectValueControl) => SelectMultipleValueControl | SelectSingleValueControl;

package/Form/useSelectValueControl.js

@@ -76,6 +76,25 @@ function useSelectBaseValueControl(props) {
         },
     };
 }
+/**
+ * 管理 Select 單選／多選值的受控狀態 Hook。
+ *
+ * 根據 `mode` 分別處理單選（`single`）與多選（`multiple`）邏輯，
+ * 提供 `value`、`onChange` 與 `onClear` 等操作介面。
+ *
+ * @example
+ * ```tsx
+ * import { useSelectValueControl } from '@mezzanine-ui/react';
+ *
+ * const control = useSelectValueControl({
+ *   mode: 'single',
+ *   value: selectedOption,
+ *   onChange: (option) => setSelectedOption(option),
+ * });
+ * ```
+ *
+ * @see {@link Select} 搭配的元件
+ */
 const useSelectValueControl = (props) => {
     if (props.mode === 'multiple') {
         // eslint-disable-next-line react-hooks/rules-of-hooks

package/Form/useSwitchControlValue.d.ts

@@ -4,4 +4,22 @@ export interface UseSwitchControlValueProps {
     defaultChecked?: boolean;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }
+/**
+ * 管理布林開關（checked）狀態的受控 Hook。
+ *
+ * 適用於任何基於 `<input type="checkbox">` 的切換元件，
+ * 回傳當前勾選狀態與穩定的 `onChange` 事件處理器。
+ *
+ * @example
+ * ```tsx
+ * import { useSwitchControlValue } from '@mezzanine-ui/react';
+ *
+ * const [checked, handleChange] = useSwitchControlValue({
+ *   defaultChecked: false,
+ *   onChange: (e) => console.log(e.target.checked),
+ * });
+ * ```
+ *
+ * @see {@link Switch} 搭配的元件
+ */
 export declare function useSwitchControlValue(props: UseSwitchControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];

package/Form/useSwitchControlValue.js

@@ -2,6 +2,24 @@ import { useLastCallback } from '../hooks/useLastCallback.js';
 import { useControlValueState } from './useControlValueState.js';
 
 const equalityFn = (a, b) => a === b;
+/**
+ * 管理布林開關（checked）狀態的受控 Hook。
+ *
+ * 適用於任何基於 `<input type="checkbox">` 的切換元件，
+ * 回傳當前勾選狀態與穩定的 `onChange` 事件處理器。
+ *
+ * @example
+ * ```tsx
+ * import { useSwitchControlValue } from '@mezzanine-ui/react';
+ *
+ * const [checked, handleChange] = useSwitchControlValue({
+ *   defaultChecked: false,
+ *   onChange: (e) => console.log(e.target.checked),
+ * });
+ * ```
+ *
+ * @see {@link Switch} 搭配的元件
+ */
 function useSwitchControlValue(props) {
     const { checked: checkedProp, defaultChecked = false, onChange: onChangeProp, } = props;
     const [checked, setChecked] = useControlValueState({

package/Icon/Icon.d.ts

@@ -25,7 +25,29 @@ export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
     title?: string;
 }
 /**
- * The react component for `mezzanine` icon.
+ * 渲染來自 `@mezzanine-ui/icons` 的 SVG 圖示元件。
+ *
+ * 透過 `icon` prop 傳入圖示定義物件，支援調整顏色、尺寸與旋轉動畫。
+ * 當元件綁定 `onClick` 或 `onMouseOver` 事件時，游標樣式會自動切換為 pointer。
+ * 可透過 `title` prop 提供無障礙標題文字。
+ *
+ * @example
+ * ```tsx
+ * import Icon from '@mezzanine-ui/react/Icon';
+ * import { SearchIcon, LoadingIcon, CheckCircleFilledIcon } from '@mezzanine-ui/icons';
+ *
+ * // 基本用法
+ * <Icon icon={SearchIcon} />
+ *
+ * // 自訂顏色與尺寸
+ * <Icon icon={CheckCircleFilledIcon} color="success" size={24} />
+ *
+ * // 旋轉動畫（常用於載入狀態）
+ * <Icon icon={LoadingIcon} spin />
+ *
+ * // 加入無障礙標題
+ * <Icon icon={SearchIcon} title="搜尋" />
+ * ```
  */
 declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLElement>>;
 export default Icon;

package/Icon/Icon.js

@@ -4,7 +4,29 @@ import { toIconCssVars, iconClasses } from '@mezzanine-ui/core/icon';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` icon.
+ * 渲染來自 `@mezzanine-ui/icons` 的 SVG 圖示元件。
+ *
+ * 透過 `icon` prop 傳入圖示定義物件，支援調整顏色、尺寸與旋轉動畫。
+ * 當元件綁定 `onClick` 或 `onMouseOver` 事件時，游標樣式會自動切換為 pointer。
+ * 可透過 `title` prop 提供無障礙標題文字。
+ *
+ * @example
+ * ```tsx
+ * import Icon from '@mezzanine-ui/react/Icon';
+ * import { SearchIcon, LoadingIcon, CheckCircleFilledIcon } from '@mezzanine-ui/icons';
+ *
+ * // 基本用法
+ * <Icon icon={SearchIcon} />
+ *
+ * // 自訂顏色與尺寸
+ * <Icon icon={CheckCircleFilledIcon} color="success" size={24} />
+ *
+ * // 旋轉動畫（常用於載入狀態）
+ * <Icon icon={LoadingIcon} spin />
+ *
+ * // 加入無障礙標題
+ * <Icon icon={SearchIcon} title="搜尋" />
+ * ```
  */
 const Icon = forwardRef(function Icon(props, ref) {
     const { className, color, icon, size, spin = false, style: styleProp, title, ...rest } = props;

package/Input/Input.d.ts

@@ -205,7 +205,37 @@ export type PasswordInputProps = InputBaseProps & ClearableInput & WithPasswordS
 };
 export type InputProps = BaseInputProps | WithAffixInputProps | SearchInputProps | NumberInputProps | MeasureInputProps | ActionInputProps | SelectInputProps | PasswordInputProps;
 /**
- * The react component for `mezzanine` input.
+ * 多功能輸入框元件，透過 `variant` 支援多種輸入類型。
+ *
+ * 支援以下八種 variant：`base`（基本輸入）、`affix`（帶前後綴裝飾）、`search`（搜尋，預設帶清除鍵）、
+ * `number`（原生數字輸入）、`measure`（格式化數字，可選轉盤按鈕）、`action`（帶操作按鈕）、
+ * `select`（帶下拉選單按鈕）、`password`（密碼，可切換可見性並顯示強度指示器）。
+ * `measure` variant 會自動以千分位格式化顯示值，並在 `onChange` 時回傳原始數值。
+ *
+ * @example
+ * ```tsx
+ * import Input from '@mezzanine-ui/react/Input';
+ *
+ * // 基本輸入（可清除）
+ * <Input variant="base" clearable placeholder="請輸入文字" />
+ *
+ * // 搜尋輸入
+ * <Input variant="search" placeholder="搜尋關鍵字" />
+ *
+ * // 密碼輸入（含強度指示器）
+ * <Input
+ *   variant="password"
+ *   placeholder="請輸入密碼"
+ *   showPasswordStrengthIndicator
+ *   passwordStrengthIndicator={{ strength: 2 }}
+ * />
+ *
+ * // 數字計量輸入（含轉盤按鈕）
+ * <Input variant="measure" suffix="px" showSpinner min={0} max={100} />
+ * ```
+ *
+ * @see {@link FormField} 用於包裹 Input 並提供標籤與錯誤訊息
+ * @see {@link TextField} Input 底層使用的文字框容器元件
  */
 declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Input;

package/Input/Input.js

@@ -17,7 +17,37 @@ import PasswordStrengthIndicator from './PasswordStrengthIndicator/PasswordStren
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` input.
+ * 多功能輸入框元件，透過 `variant` 支援多種輸入類型。
+ *
+ * 支援以下八種 variant：`base`（基本輸入）、`affix`（帶前後綴裝飾）、`search`（搜尋，預設帶清除鍵）、
+ * `number`（原生數字輸入）、`measure`（格式化數字，可選轉盤按鈕）、`action`（帶操作按鈕）、
+ * `select`（帶下拉選單按鈕）、`password`（密碼，可切換可見性並顯示強度指示器）。
+ * `measure` variant 會自動以千分位格式化顯示值，並在 `onChange` 時回傳原始數值。
+ *
+ * @example
+ * ```tsx
+ * import Input from '@mezzanine-ui/react/Input';
+ *
+ * // 基本輸入（可清除）
+ * <Input variant="base" clearable placeholder="請輸入文字" />
+ *
+ * // 搜尋輸入
+ * <Input variant="search" placeholder="搜尋關鍵字" />
+ *
+ * // 密碼輸入（含強度指示器）
+ * <Input
+ *   variant="password"
+ *   placeholder="請輸入密碼"
+ *   showPasswordStrengthIndicator
+ *   passwordStrengthIndicator={{ strength: 2 }}
+ * />
+ *
+ * // 數字計量輸入（含轉盤按鈕）
+ * <Input variant="measure" suffix="px" showSpinner min={0} max={100} />
+ * ```
+ *
+ * @see {@link FormField} 用於包裹 Input 並提供標籤與錯誤訊息
+ * @see {@link TextField} Input 底層使用的文字框容器元件
  */
 const Input = forwardRef(function Input(props, ref) {
     const { active, className, defaultValue, disabled = false, error = false, formatter: formatterProp, fullWidth = true, id, inputProps, inputType, inputRef: inputRefProp, name, onChange: onChangeProp, parser: parserProp, placeholder, readonly, size = 'main', typing, variant = 'base', value: valueProp, } = props;

package/Input/SpinnerButton/SpinnerButton.js

@@ -8,7 +8,7 @@ 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 }) }));
+    return (jsx("button", { ref: ref, type: "button", disabled: disabled, className: cx(inputSpinnerButtonClasses.host, disabled && inputSpinnerButtonClasses.disabled, size === 'main' ? inputSpinnerButtonClasses.main : inputSpinnerButtonClasses.sub, className), "aria-label": type === 'up' ? 'Increase value' : 'Decrease value', title: type === 'up' ? 'Increase value' : 'Decrease value', ...rest, children: jsx(Icon, { "aria-hidden": "true", icon: type === 'up' ? CaretUpFlatIcon : CaretDownFlatIcon }) }));
 });
 
 export { SpinnerButton as default };

package/Message/Message.d.ts

@@ -1,7 +1,7 @@
 import { MessageSeverity } from '@mezzanine-ui/core/message';
 import { IconDefinition } from '@mezzanine-ui/icons';
 import type { FC, Key } from 'react';
-import { Notifier, NotifierData, NotifierConfig } from '../Notifier';
+import { NotifierData, NotifierConfig } from '../Notifier';
 import { TranslateProps } from '../Transition';
 export interface MessageConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<TranslateProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'from'> {
 }
@@ -25,14 +25,64 @@ 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'> & {
+/**
+ * Props accepted by Message severity shorthand methods such as `Message.success`.
+ * Includes an optional `key` to identify the message for later updates or dismissal.
+ */
+export type MessageShorthandProps = Omit<MessageData, 'children' | 'severity' | 'icon'> & {
     key?: Key;
-}) => Key>;
+};
+/**
+ * Signature shared by all Message severity shorthand methods.
+ * @param message - The notification content.
+ * @param props   - Optional configuration; mirrors {@link MessageData} minus `children`, `severity`, and `icon`.
+ */
+export type MessageShorthandMethod = (message: MessageData['children'], props?: MessageShorthandProps) => Key;
+/** Static severity shorthand methods attached to the {@link Message} component. */
+export interface MessageSeverityMethods {
+    /** Display an error message. */
+    error: MessageShorthandMethod;
+    /** Display an informational message. */
+    info: MessageShorthandMethod;
+    /** Display a loading message that will **not** auto-close. */
+    loading: MessageShorthandMethod;
+    /** Display a success message. */
+    success: MessageShorthandMethod;
+    /** Display a warning message. */
+    warning: MessageShorthandMethod;
+}
 /**
  * The react component for `mezzanine` message.
  *
- * Use the API from the Message instance such as `Message.add` and `Message.success`
- * to display a notification message globally.
+ * Trigger messages imperatively via severity shorthand methods:
+ *
+ * @example
+ * ```tsx
+ * import Message from '@mezzanine-ui/react/message';
+ *
+ * Message.success('Saved!');
+ * Message.error('Something went wrong.');
+ *
+ * // With custom key for later update/dismissal
+ * const key = Message.loading('Uploading…');
+ * Message.success('Done!', { key });
+ * ```
+ *
+ * @see {@link MessageData} for the full set of options accepted by `Message.add`.
  */
-declare const Message: MessageType;
+declare const Message: FC<MessageData> & {
+    add: (notifier: MessageData & {
+        key?: Key;
+    }) => Key;
+    config: (configs: MessageConfigProps) => void;
+    destroy: VoidFunction;
+    remove: (key: Key) => void;
+    error: (message: MessageData["children"], props?: MessageShorthandProps) => Key;
+    info: (message: MessageData["children"], props?: MessageShorthandProps) => Key;
+    loading: (message: MessageData["children"], props?: MessageShorthandProps) => Key;
+    success: (message: MessageData["children"], props?: MessageShorthandProps) => Key;
+    warning: (message: MessageData["children"], props?: MessageShorthandProps) => Key;
+};
+/** Full type of the {@link Message} component including all static notification API methods. */
+export type MessageType = typeof Message;
 export default Message;

package/Message/Message.js

@@ -1,25 +1,21 @@
 '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 { messageIcons, messageClasses } from '@mezzanine-ui/core/message';
 import { messageTimerController } from './MessageTimerController.js';
 import Translate from '../Transition/Translate.js';
+import Spin from '../Spin/Spin.js';
 import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
 import { createNotifier } from '../Notifier/createNotifier.js';
+import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` message.
- *
- * Use the API from the Message instance such as `Message.add` and `Message.success`
- * to display a notification message globally.
- */
-const Message = ((props) => {
+/** @internal Underlying React element rendered by the Message notifier. */
+const MessageFC = (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 startTimeRef = useRef(0);
     // 清理計時器
     const clearTimer = useCallback(() => {
         if (timerRef.current) {
@@ -102,59 +98,70 @@ const Message = ((props) => {
     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 })] }) }));
-});
+    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: [severity === 'loading' ? (jsx("span", { className: messageClasses.icon, children: jsx(Spin, { loading: true, size: "minor" }) })) : icon ? (jsx(Icon, { className: messageClasses.icon, icon: icon })) : null, jsx("span", { className: messageClasses.content, children: children })] }) }));
+};
 const { add, config, destroy, remove } = createNotifier({
     duration: 3000,
     maxCount: 4,
-    render: (message) => (createElement(Message, { ...message, reference: message.key, key: undefined })),
+    render: (message) => (createElement(MessageFC, { ...message, reference: message.key, key: undefined })),
     setRoot: (root) => {
         root === null || root === void 0 ? void 0 : root.setAttribute('class', messageClasses.root);
     },
 });
-Message.add = add;
-Message.config = config;
-Message.destroy = destroy;
-Message.remove = remove;
-const severities = [
-    {
-        key: 'success',
-        icon: messageIcons.success,
-    },
-    {
-        key: 'warning',
-        icon: messageIcons.warning,
-    },
-    {
-        key: 'error',
+/**
+ * The react component for `mezzanine` message.
+ *
+ * Trigger messages imperatively via severity shorthand methods:
+ *
+ * @example
+ * ```tsx
+ * import Message from '@mezzanine-ui/react/message';
+ *
+ * Message.success('Saved!');
+ * Message.error('Something went wrong.');
+ *
+ * // With custom key for later update/dismissal
+ * const key = Message.loading('Uploading…');
+ * Message.success('Done!', { key });
+ * ```
+ *
+ * @see {@link MessageData} for the full set of options accepted by `Message.add`.
+ */
+const Message = Object.assign(MessageFC, {
+    add,
+    config,
+    destroy,
+    remove,
+    error: (message, props) => add({
+        ...props,
+        children: message,
         icon: messageIcons.error,
-    },
-    {
-        key: 'info',
+        severity: 'error',
+    }),
+    info: (message, props) => add({
+        ...props,
+        children: message,
         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({
+        severity: 'info',
+    }),
+    loading: (message, props) => add({
+        ...props,
+        children: message,
+        severity: 'loading',
+        duration: false,
+    }),
+    success: (message, props) => add({
         ...props,
         children: message,
-        severity: validSeverities.includes(severity.key)
-            ? severity.key
-            : undefined,
-        icon: severity.icon,
-        duration: severity.key === 'loading' ? false : props === null || props === void 0 ? void 0 : props.duration,
-    });
+        icon: messageIcons.success,
+        severity: 'success',
+    }),
+    warning: (message, props) => add({
+        ...props,
+        children: message,
+        icon: messageIcons.warning,
+        severity: 'warning',
+    }),
 });
 
 export { Message as default };