@mezzanine-ui/react 1.0.0-beta.1 → 1.0.0-beta.3

package/Input/Input.d.ts

@@ -1,9 +1,11 @@
-import { Ref, ChangeEventHandler } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { DropdownOption } from '@mezzanine-ui/core/dropdown';
+import { ChangeEventHandler, Ref } from 'react';
+import { PopperPlacement } from '../Popper';
 import { TextFieldAffixProps, TextFieldProps } from '../TextField';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { ActionButtonProps } from './ActionButton';
-import { SelectButtonProps } from './SelectButton';
 import { PasswordStrengthIndicatorProps } from './PasswordStrengthIndicator';
+import { SelectButtonProps } from './SelectButton';
 /**
  * Base props shared by all Input variants
  */
@@ -152,6 +154,30 @@ export type SelectInputProps = InputBaseProps & {
     selectButton: SelectButtonProps & {
         position: 'prefix' | 'suffix' | 'both';
     };
+    /**
+     * The options of the dropdown.
+     */
+    options?: DropdownOption[];
+    /**
+     * The selected value of the dropdown.
+     */
+    selectedValue?: string;
+    /**
+     * The onChange event handler of the dropdown.
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * The width of the dropdown.
+     */
+    dropdownWidth?: number | string;
+    /**
+     * The max height of the dropdown.
+     */
+    dropdownMaxHeight?: number | string;
+    /**
+     * The placement of the dropdown.
+     */
+    dropdownPlacement?: PopperPlacement;
 };
 /**
  * 8. Password Input - Password input with visibility toggle

package/Input/Input.js

@@ -1,11 +1,12 @@
 '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 { useComposeRefs } from '../hooks/useComposeRefs.js';
-import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
 import { EyeIcon, EyeInvisibleIcon, SearchIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useRef, useState, useCallback } from 'react';
+import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Icon from '../Icon/Icon.js';
+import Dropdown from '../Dropdown/Dropdown.js';
 import SelectButton from './SelectButton/SelectButton.js';
 import ActionButton from './ActionButton/ActionButton.js';
 import SpinnerButton from './SpinnerButton/SpinnerButton.js';
@@ -158,16 +159,31 @@ const Input = forwardRef(function Input(props, ref) {
         }
         case 'select': {
             const selectProps = props;
-            const { selectButton } = selectProps;
+            const { selectButton, options, dropdownWidth = 120, dropdownMaxHeight = 114 } = selectProps;
+            const defaultOptions = options || [];
+            const selectedOptions = defaultOptions.length > 0
+                ? defaultOptions.map((option) => ({
+                    ...option,
+                    ...(option.id === selectProps.selectedValue
+                        ? { checkSite: 'suffix' }
+                        : {}),
+                }))
+                : [];
             if (selectButton.position === 'both' ||
                 selectButton.position === 'prefix') {
                 const { ...restSelectButtonProps } = selectButton;
-                prefixExternalButton = (jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, size: size }));
+                prefixExternalButton = (jsx(Dropdown, { options: selectedOptions, value: selectProps.selectedValue, customWidth: dropdownWidth, maxHeight: dropdownMaxHeight, placement: "bottom-start", onSelect: (option) => {
+                        var _a;
+                        (_a = selectProps.onSelect) === null || _a === void 0 ? void 0 : _a.call(selectProps, option.id);
+                    }, children: 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 }));
+                suffixExternalButton = (jsx(Dropdown, { options: selectedOptions, value: selectProps.selectedValue, customWidth: dropdownWidth, maxHeight: dropdownMaxHeight, placement: "bottom-start", onSelect: (option) => {
+                        var _a;
+                        (_a = selectProps.onSelect) === null || _a === void 0 ? void 0 : _a.call(selectProps, option.id);
+                    }, children: jsx(SelectButton, { ...restSelectButtonProps, disabled: restSelectButtonProps.disabled || disabled, size: size }) }));
             }
             break;
         }

package/Input/PasswordStrengthIndicator/PasswordStrengthIndicator.js

@@ -12,7 +12,7 @@ const PasswordStrengthIndicator = forwardRef(function PasswordStrengthIndicator(
     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))) }))] }));
+    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, { hintText: hintText.hint, severity: hintText.severity }, idx))) }))] }));
 });
 
 export { PasswordStrengthIndicator as default };

package/Modal/Modal.d.ts

@@ -1,34 +1,126 @@
-import { ModalSeverity, ModalSize } from '@mezzanine-ui/core/modal';
-import { SlideFadeOverlayProps } from '../_internal/SlideFadeOverlay';
+import { ModalSize, ModalStatusType } from '@mezzanine-ui/core/modal';
+import { ModalContainerProps } from './useModalContainer';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface ModalProps extends Omit<SlideFadeOverlayProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+import { ModalHeaderProps } from './ModalHeader';
+import { ModalFooterProps } from './ModalFooter';
+interface CommonModalProps extends Omit<ModalContainerProps, 'children'>, Pick<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'>, Partial<Omit<ModalHeaderProps, 'children' | 'className' | 'title'>>, Partial<Omit<ModalFooterProps, 'children' | 'className' | 'confirmText'>> {
     /**
      * Whether to force full screen on any breakpoint.
      * @default false
      */
     fullScreen?: boolean;
-    /**
-     * Controls whether or not to hide close button at top-end.
-     * @default false
-     */
-    hideCloseIcon?: boolean;
     /**
      * Whether the modal is loading.
      * Controls the loading prop of confirm button in modal actions.
      */
     loading?: boolean;
     /**
-     * Controlls whether or not to display status icon before title. <br />
+     * Controls whether or not to display status icon before title.
      * Notice that giving a status will only display the regular title.
      * @default 'info'
      */
-    severity?: ModalSeverity;
+    modalStatusType?: ModalStatusType;
+    /**
+     * Controls whether or not to show dismiss button at top-end.
+     * @default false
+     */
+    showDismissButton?: boolean;
+}
+interface ExtendedSplitModalProps extends CommonModalProps {
+    /**
+     * Content for the left side in extendedSplit layout.
+     * Required when modalType is 'extendedSplit'.
+     */
+    extendedSplitLeftSideContent: React.ReactNode;
+    /**
+     * Content for the right side in extendedSplit layout.
+     * Required when modalType is 'extendedSplit'.
+     */
+    extendedSplitRightSideContent: React.ReactNode;
+    /**
+     * Controls the type/layout of the modal.
+     * - 'extendedSplit': Modal with split layout (footer inside left content)
+     */
+    modalType: 'extendedSplit';
     /**
      * Controls the size of the modal.
-     * @default "medium"
+     * For extendedSplit type, only 'wide' is allowed.
+     * @default 'wide'
+     */
+    size?: 'wide';
+}
+interface OtherModalProps extends CommonModalProps {
+    /**
+     * Content for the left side in extendedSplit layout.
+     * Cannot be provided when modalType is not 'extendedSplit'.
+     */
+    extendedSplitLeftSideContent?: never;
+    /**
+     * Content for the right side in extendedSplit layout.
+     * Cannot be provided when modalType is not 'extendedSplit'.
+     */
+    extendedSplitRightSideContent?: never;
+    /**
+     * Controls the type/layout of the modal.
+     * - 'standard': Default modal with body container
+     * - 'extended': Modal with left and right content areas
+     * - 'mediaPreview': Modal for media preview
+     * - 'verification': Modal for verification flows
+     * @default 'standard'
+     */
+    modalType: 'extended' | 'standard' | 'mediaPreview' | 'verification';
+    /**
+     * Controls the size of the modal.
+     * @default 'regular'
      */
     size?: ModalSize;
 }
+type BaseModalProps = ExtendedSplitModalProps | OtherModalProps;
+type ModalHeaderPropsWithHeader = {
+    /**
+     * Whether to show modal header.
+     */
+    showModalHeader: true;
+    /**
+     * The title of the modal header (required when showModalHeader is true).
+     */
+    title: string;
+};
+type ModalHeaderPropsWithoutHeader = {
+    /**
+     * Whether to show modal header.
+     * @default false
+     */
+    showModalHeader?: false;
+    /**
+     * The title of the modal header.
+     * Cannot be provided when showModalHeader is false.
+     */
+    title?: never;
+};
+type ModalFooterPropsWithFooter = {
+    /**
+     * Whether to show modal footer.
+     */
+    showModalFooter: true;
+    /**
+     * The confirm button text of the modal footer (required when showModalFooter is true).
+     */
+    confirmText: string;
+};
+type ModalFooterPropsWithoutFooter = {
+    /**
+     * Whether to show modal footer.
+     * @default false
+     */
+    showModalFooter?: false;
+    /**
+     * The confirm button text of the modal footer.
+     * Cannot be provided when showModalFooter is false.
+     */
+    confirmText?: never;
+};
+export type ModalProps = BaseModalProps & ((ModalHeaderPropsWithHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithHeader & ModalFooterPropsWithoutFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithFooter) | (ModalHeaderPropsWithoutHeader & ModalFooterPropsWithoutFooter));
 /**
  * The react component for `mezzanine` modal.
  */

package/Modal/Modal.js

@@ -1,26 +1,31 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { modalClasses } from '@mezzanine-ui/core/modal';
-import { TimesIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useMemo } from 'react';
 import { ModalControlContext } from './ModalControl.js';
 import useModalContainer from './useModalContainer.js';
-import Icon from '../Icon/Icon.js';
+import ModalHeader from './ModalHeader.js';
+import ModalFooter from './ModalFooter.js';
+import ClearActions from '../ClearActions/ClearActions.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` modal.
  */
 const Modal = forwardRef(function Modal(props, ref) {
-    const { children, className, container, direction = 'down', disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, fullScreen = false, hideCloseIcon = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
+    const { actionsButtonLayout, annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, children, className, confirmButtonProps, confirmText, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, extendedSplitLeftSideContent, extendedSplitRightSideContent, fullScreen = false, loading = false, modalStatusType = 'info', modalType = 'standard', onBackdropClick, onCancel, onClose, onConfirm, open, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton, showDismissButton = false, showModalFooter = false, showModalHeader, showStatusTypeIcon, size = 'regular', statusTypeIconLayout, supportingText, supportingTextAlign, title, titleAlign, ...rest } = props;
     const modalControl = useMemo(() => ({
         loading,
-        severity,
-    }), [loading, severity]);
+        modalStatusType: modalStatusType,
+    }), [loading, modalStatusType]);
     const { Container: ModalContainer } = useModalContainer();
-    return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: modalClasses.overlay, container: container, direction: direction, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
+    const renderModalFooter = () => (jsx(ModalFooter, { actionsButtonLayout: actionsButtonLayout, annotation: annotation, auxiliaryContentButtonProps: auxiliaryContentButtonProps, auxiliaryContentButtonText: auxiliaryContentButtonText, auxiliaryContentChecked: auxiliaryContentChecked, auxiliaryContentLabel: auxiliaryContentLabel, auxiliaryContentOnChange: auxiliaryContentOnChange, auxiliaryContentOnClick: auxiliaryContentOnClick, auxiliaryContentType: auxiliaryContentType, cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, loading: loading, onCancel: onCancel, onConfirm: onConfirm, passwordButtonProps: passwordButtonProps, passwordButtonText: passwordButtonText, passwordChecked: passwordChecked, passwordCheckedLabel: passwordCheckedLabel, passwordCheckedOnChange: passwordCheckedOnChange, passwordOnClick: passwordOnClick, showCancelButton: showCancelButton }));
+    return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: modalClasses.overlay, container: container, disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.modalStatusType(modalStatusType), modalClasses.size(size), {
                     [modalClasses.fullScreen]: fullScreen,
-                    [modalClasses.withCloseIcon]: !hideCloseIcon,
-                }, className), role: "dialog", children: [children, !hideCloseIcon && (jsx(Icon, { className: modalClasses.closeIcon, icon: TimesIcon, onClick: onClose }))] }) }) }));
+                    [modalClasses.withCloseIcon]: showDismissButton,
+                }, className), role: "dialog", children: [showModalHeader && (jsx(ModalHeader, { showStatusTypeIcon: showStatusTypeIcon, statusTypeIconLayout: statusTypeIconLayout, supportingText: supportingText, supportingTextAlign: supportingTextAlign, title: title, titleAlign: titleAlign })), modalType === 'extendedSplit' && (jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplit, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitRight, children: extendedSplitRightSideContent }), jsxs("div", { className: modalClasses.modalBodyContainerExtendedSplitLeft, children: [jsx("div", { className: modalClasses.modalBodyContainerExtendedSplitLeftSideContent, children: extendedSplitLeftSideContent }), showModalFooter && renderModalFooter()] })] })), (modalType === 'standard' ||
+                        modalType === 'verification' ||
+                        modalType === 'extended' ||
+                        modalType === 'mediaPreview') && (jsxs(Fragment, { children: [jsx("div", { className: modalClasses.modalBodyContainer, children: children }), showModalFooter && renderModalFooter()] })), showDismissButton && (jsx(ClearActions, { onClick: onClose, className: modalClasses.closeIcon, variant: "base" }))] }) }) }));
 });
 
 export { Modal as default };

package/Modal/ModalBodyForVerification.d.ts

@@ -0,0 +1,59 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ModalBodyForVerificationProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange'> {
+    /**
+     * Whether to auto focus the first input when mounted.
+     * @default true
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether the inputs are disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the inputs are in error state.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Number of verification code digits.
+     * @default 4
+     */
+    length?: number;
+    /**
+     * Called when verification code changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when all digits are filled.
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Called when resend link is clicked.
+     */
+    onResend?: () => void;
+    /**
+     * Whether the inputs are readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Prompt text before resend link.
+     * @default "收不到驗證碼？"
+     */
+    resendPrompt?: string;
+    /**
+     * Resend link text.
+     * @default "點此重新寄送"
+     */
+    resendText?: string;
+    /**
+     * Current verification code value.
+     */
+    value?: string;
+}
+/**
+ * The react component for verification code input in modal.
+ */
+declare const ModalBodyForVerification: import("react").ForwardRefExoticComponent<ModalBodyForVerificationProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ModalBodyForVerification;

package/Modal/ModalBodyForVerification.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { modalClasses } from '@mezzanine-ui/core/modal';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+/**
+ * The react component for verification code input in modal.
+ */
+const ModalBodyForVerification = forwardRef(function ModalBodyForVerification(props, ref) {
+    const { autoFocus = true, className, disabled = false, error = false, length = 4, onChange, onComplete, onResend, readOnly = false, resendPrompt = '收不到驗證碼？', resendText = '點此重新寄送', value = '', ...rest } = props;
+    const [codes, setCodes] = useState(value
+        .split('')
+        .slice(0, length)
+        .concat(Array(length - value.length).fill('')));
+    const inputRefs = useRef([]);
+    // Auto focus first input when mounted
+    useEffect(() => {
+        var _a;
+        if (autoFocus && !disabled && !readOnly) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus, disabled, readOnly]);
+    const handleChange = (index, newValue) => {
+        var _a;
+        if (disabled || readOnly)
+            return;
+        // Only allow single digit/letter
+        const sanitized = newValue.slice(-1);
+        const newCodes = [...codes];
+        newCodes[index] = sanitized;
+        setCodes(newCodes);
+        const fullValue = newCodes.join('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(fullValue);
+        // Auto focus next input
+        if (sanitized && index < length - 1) {
+            (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        // Call onComplete when all filled
+        if (fullValue.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(fullValue);
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        var _a, _b, _c;
+        // Handle backspace
+        if (e.key === 'Backspace') {
+            if (disabled || readOnly)
+                return;
+            if (!codes[index] && index > 0) {
+                // If current is empty, focus previous
+                (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                // Clear current
+                const newCodes = [...codes];
+                newCodes[index] = '';
+                setCodes(newCodes);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newCodes.join(''));
+            }
+        }
+        // Handle arrow keys
+        else if (e.key === 'ArrowLeft' && index > 0) {
+            (_b = inputRefs.current[index - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            (_c = inputRefs.current[index + 1]) === null || _c === void 0 ? void 0 : _c.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        var _a;
+        if (disabled || readOnly)
+            return;
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text').slice(0, length);
+        const newCodes = pastedData
+            .split('')
+            .concat(Array(length - pastedData.length).fill(''));
+        setCodes(newCodes);
+        onChange === null || onChange === void 0 ? void 0 : onChange(pastedData);
+        // Focus the next empty input or the last input
+        const nextEmptyIndex = Math.min(pastedData.length, length - 1);
+        (_a = inputRefs.current[nextEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        if (pastedData.length === length) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(pastedData);
+        }
+    };
+    const handleInputChange = (index, e) => {
+        handleChange(index, e.target.value);
+    };
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalBodyVerification, className), children: [jsx("div", { className: modalClasses.modalBodyVerificationInputs, children: Array.from({ length }).map((_, index) => (jsx("input", { ref: (el) => {
+                        inputRefs.current[index] = el;
+                    }, type: "text", inputMode: "numeric", maxLength: 1, value: codes[index] || '', onChange: (e) => handleInputChange(index, e), onKeyDown: (e) => handleKeyDown(index, e), onPaste: handlePaste, className: cx(modalClasses.modalBodyVerificationInput, {
+                        [modalClasses.modalBodyVerificationInputError]: error,
+                    }), autoComplete: "off", disabled: disabled, readOnly: readOnly }, index))) }), onResend && (jsxs("div", { className: modalClasses.modalBodyVerificationResend, children: [jsx(Typography, { variant: "caption", color: "text-neutral", children: resendPrompt }), jsx(Typography, { variant: "caption", color: "text-neutral", className: modalClasses.modalBodyVerificationResendLink, onClick: onResend, component: "span", style: { cursor: 'pointer', textDecoration: 'underline' }, children: resendText })] }))] }));
+});
+
+export { ModalBodyForVerification as default };

package/Modal/ModalControl.d.ts

@@ -1,6 +1,6 @@
-import { ModalSeverity } from '@mezzanine-ui/core/modal';
+import { ModalStatusType } from '@mezzanine-ui/core/modal';
 export interface ModalControl {
     loading: boolean;
-    severity: ModalSeverity;
+    modalStatusType: ModalStatusType;
 }
 export declare const ModalControlContext: import("react").Context<ModalControl>;

package/Modal/ModalControl.js

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 
 const ModalControlContext = createContext({
     loading: false,
-    severity: 'info',
+    modalStatusType: 'info',
 });
 
 export { ModalControlContext };

package/Modal/ModalFooter.d.ts

@@ -1,5 +1,123 @@
+import { ReactNode } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export type ModalFooterProps = NativeElementPropsWithoutKeyAndRef<'div'>;
+import { ButtonProps } from '../Button/Button';
+export interface ModalFooterProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Layout of action buttons.
+     * - 'fixed': Buttons maintain fixed width
+     * - 'fill': Buttons expand to fill available space equally
+     * @default 'fixed'
+     */
+    actionsButtonLayout?: 'fill' | 'fixed';
+    /**
+     * Text to display as annotation on the left side.
+     * Only used when auxiliaryContentType is 'annotation'.
+     */
+    annotation?: ReactNode;
+    /**
+     * Props for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentButtonProps?: ButtonProps;
+    /**
+     * Text for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentButtonText?: ReactNode;
+    /**
+     * Whether the auxiliary content control (checkbox/toggle) is checked.
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentChecked?: boolean;
+    /**
+     * Label text for the auxiliary content control (checkbox/toggle).
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentLabel?: string;
+    /**
+     * Change handler for auxiliary content control (checkbox/toggle).
+     * Only used when auxiliaryContentType is 'checkbox' or 'toggle'.
+     */
+    auxiliaryContentOnChange?: (checked: boolean) => void;
+    /**
+     * Click handler for the auxiliary content button.
+     * Only used when auxiliaryContentType is 'button'.
+     */
+    auxiliaryContentOnClick?: ButtonProps['onClick'];
+    /**
+     * Type of auxiliary content to show on the left side of the footer.
+     * - 'annotation': Display text annotation
+     * - 'button': Display a button
+     * - 'checkbox': Display a checkbox control
+     * - 'toggle': Display a toggle control
+     * - 'password': Display password-specific controls (remember me + forgot password)
+     * @default undefined (no auxiliary content)
+     */
+    auxiliaryContentType?: 'annotation' | 'button' | 'checkbox' | 'toggle' | 'password';
+    /**
+     * Additional props for the cancel button.
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * Text content of the cancel button.
+     */
+    cancelText?: ReactNode;
+    /**
+     * Additional props for the confirm button.
+     */
+    confirmButtonProps?: ButtonProps;
+    /**
+     * Text content of the confirm button.
+     */
+    confirmText?: ReactNode;
+    /**
+     * Whether confirm button is loading and cancel button is disabled.
+     */
+    loading?: boolean;
+    /**
+     * Click handler for the cancel button.
+     */
+    onCancel?: ButtonProps['onClick'];
+    /**
+     * Click handler for the confirm button.
+     */
+    onConfirm?: ButtonProps['onClick'];
+    /**
+     * Props for the password auxiliary button.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordButtonProps?: ButtonProps;
+    /**
+     * Text for the password auxiliary button (e.g., "Forgot password?").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordButtonText?: ReactNode;
+    /**
+     * Whether the password checkbox is checked (e.g., "Remember me").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordChecked?: boolean;
+    /**
+     * Label for the password checkbox (e.g., "Remember me").
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordCheckedLabel?: string;
+    /**
+     * Change handler for the password checkbox.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordCheckedOnChange?: (checked: boolean) => void;
+    /**
+     * Click handler for the password auxiliary button.
+     * Only used when auxiliaryContentType is 'password'.
+     */
+    passwordOnClick?: ButtonProps['onClick'];
+    /**
+     * Whether to show the cancel button.
+     * @default true
+     */
+    showCancelButton?: boolean;
+}
 /**
  * The react component for `mezzanine` modal footer.
  */

package/Modal/ModalFooter.js

@@ -1,14 +1,26 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { modalClasses } from '@mezzanine-ui/core/modal';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import Toggle from '../Toggle/Toggle.js';
+import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` modal footer.
  */
 const ModalFooter = forwardRef(function ModalFooter(props, ref) {
-    const { children, className, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(modalClasses.footer, className), children: children }));
+    const { children, className, actionsButtonLayout = 'fixed', annotation, auxiliaryContentButtonProps, auxiliaryContentButtonText, auxiliaryContentChecked, auxiliaryContentLabel, auxiliaryContentOnChange, auxiliaryContentOnClick, auxiliaryContentType, cancelButtonProps, cancelText, confirmButtonProps, confirmText, loading, onCancel, onConfirm, passwordButtonProps, passwordButtonText, passwordChecked, passwordCheckedLabel, passwordCheckedOnChange, passwordOnClick, showCancelButton = true, ...rest } = props;
+    const { disabled: cancelButtonDisabled = loading } = cancelButtonProps || {};
+    const isActionsButtonFillLayout = actionsButtonLayout === 'fill' && !auxiliaryContentType;
+    return (jsxs("div", { ...rest, ref: ref, className: cx(modalClasses.modalFooter, {
+            [modalClasses.modalFooter + '--password-mode']: auxiliaryContentType === 'password',
+            [modalClasses.modalFooter + '--with-auxiliary-content']: !!auxiliaryContentType && auxiliaryContentType !== 'password',
+        }, className), children: [auxiliaryContentType === 'password' && (jsxs("div", { className: modalClasses.modalFooterPasswordContainer, children: [jsx(Checkbox, { checked: passwordChecked, label: passwordCheckedLabel, onChange: (e) => passwordCheckedOnChange === null || passwordCheckedOnChange === void 0 ? void 0 : passwordCheckedOnChange(e.target.checked) }), jsx(Button, { variant: "base-text-link", ...passwordButtonProps, onClick: passwordOnClick, children: passwordButtonText })] })), auxiliaryContentType && auxiliaryContentType !== 'password' && (jsxs("div", { className: modalClasses.modalFooterAuxiliaryContentContainer, children: [auxiliaryContentType === 'annotation' && (jsx(Typography, { variant: "caption", color: "text-neutral", children: annotation })), auxiliaryContentType === 'button' && (jsx(Button, { variant: "base-text-link", ...auxiliaryContentButtonProps, onClick: auxiliaryContentOnClick, children: auxiliaryContentButtonText })), auxiliaryContentType === 'checkbox' && (jsx(Checkbox, { checked: auxiliaryContentChecked, label: auxiliaryContentLabel, onChange: (e) => auxiliaryContentOnChange === null || auxiliaryContentOnChange === void 0 ? void 0 : auxiliaryContentOnChange(e.target.checked) })), auxiliaryContentType === 'toggle' && (jsx(Toggle, { checked: auxiliaryContentChecked, label: auxiliaryContentLabel, onChange: (e) => auxiliaryContentOnChange === null || auxiliaryContentOnChange === void 0 ? void 0 : auxiliaryContentOnChange(e.target.checked) }))] })), jsxs(ButtonGroup, { className: cx(modalClasses.modalFooterActionsButtonContainer, {
+                    [modalClasses.modalFooterActionsButtonContainer + '--fill-layout']: isActionsButtonFillLayout,
+                }), children: [showCancelButton && (jsx(Button, { variant: "base-secondary", ...cancelButtonProps, disabled: cancelButtonDisabled, onClick: onCancel, className: modalClasses.modalFooterActionsButton, children: cancelText })), jsx(Button, { variant: "base-primary", ...confirmButtonProps, loading: loading, onClick: onConfirm, className: modalClasses.modalFooterActionsButton, children: confirmText })] }), children] }));
 });
 
 export { ModalFooter as default };