@mezzanine-ui/react 1.0.0-canary.2 → 1.0.0-canary.3

package/PageFooter/PageFooter.d.ts

@@ -1,15 +1,65 @@
-import { ReactNode } from 'react';
-import { ConfirmActionsProps } from '../ConfirmActions';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface PageFooterProps extends NativeElementPropsWithoutKeyAndRef<'footer'>, Pick<ConfirmActionsProps, 'cancelButtonProps' | 'cancelText' | 'confirmButtonProps' | 'confirmText' | 'danger' | 'loading' | 'hideCancelButton' | 'hideConfirmButton' | 'onCancel' | 'onConfirm'> {
+import type { ButtonProps } from '../Button';
+export type PageFooterType = 'standard' | 'overflow' | 'information';
+type PageFooterBaseProps = NativeElementPropsWithoutKeyAndRef<'footer'> & {
     /**
-     * The className of action wrapper.
+     * Action buttons configuration for primary and secondary actions.
+     * Renders buttons in the order: secondary (left), primary (right).
      */
-    actionClassName?: string;
+    actions?: {
+        primaryButtonProps?: ButtonProps;
+        secondaryButtonProps?: ButtonProps;
+    };
     /**
-     * The action element in the left.
+     * The className of annotation wrapper.
      */
-    children?: ReactNode;
-}
+    annotationClassName?: string;
+    /**
+     * The warning message in the middle.
+     */
+    warningMessage?: string;
+};
+type PageFooterStandardProps = PageFooterBaseProps & {
+    /**
+     * The type of PageFooter annotation.
+     * @default 'standard'
+     */
+    type?: 'standard';
+    /**
+     * Standard type: A ghost button with text.
+     * Children of the button.
+     */
+    annotation?: string;
+    /**
+     * Standard type: Button click handler.
+     */
+    onAnnotationClick?: ButtonProps['onClick'];
+};
+type PageFooterOverflowProps = PageFooterBaseProps & {
+    /**
+     * The type of PageFooter annotation.
+     */
+    type: 'overflow';
+    /**
+     * Overflow type: Icon for the icon-only button.
+     * @TODO Consider Dropdown integration after Dropdown redesign.
+     */
+    annotation?: ButtonProps['icon'];
+    /**
+     * Overflow type: Button click handler.
+     */
+    onAnnotationClick?: ButtonProps['onClick'];
+};
+type PageFooterInformationProps = PageFooterBaseProps & {
+    /**
+     * The type of PageFooter annotation.
+     */
+    type: 'information';
+    /**
+     * Information type: Plain text to display.
+     */
+    annotation?: string;
+};
+export type PageFooterProps = PageFooterStandardProps | PageFooterOverflowProps | PageFooterInformationProps;
 declare const PageFooter: import("react").ForwardRefExoticComponent<PageFooterProps & import("react").RefAttributes<HTMLElement>>;
 export default PageFooter;

package/PageFooter/PageFooter.js

@@ -1,12 +1,43 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { pageFooterClasses } from '@mezzanine-ui/core/page-footer';
-import ConfirmActions from '../ConfirmActions/ConfirmActions.js';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import Typography from '../Typography/Typography.js';
 import cx from 'clsx';
 
 const PageFooter = forwardRef(function PageFooter(props, ref) {
-    const { className, actionClassName, cancelButtonProps, cancelText, children, danger, loading, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, onCancel, onConfirm, ...rest } = props;
-    return (jsxs("footer", { ref: ref, ...rest, className: cx(pageFooterClasses.host, className), children: [jsx("div", { className: actionClassName, children: children }), jsx(ConfirmActions, { cancelText: cancelText, confirmText: confirmText, cancelButtonProps: cancelButtonProps, confirmButtonProps: confirmButtonProps, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: loading, onCancel: onCancel, onConfirm: onConfirm })] }));
+    var _a;
+    const { actions, annotation, annotationClassName, className, type = 'standard', warningMessage, ...rest } = props;
+    // Filter out onAnnotationClick from rest props to avoid React warnings
+    if ('onAnnotationClick' in rest) {
+        delete rest.onAnnotationClick;
+    }
+    const { children: primaryButtonText, ...restPrimaryButtonProps } = (_a = actions === null || actions === void 0 ? void 0 : actions.primaryButtonProps) !== null && _a !== void 0 ? _a : {};
+    // Render annotation based on type
+    const renderAnnotation = () => {
+        if (!annotation)
+            return null;
+        switch (type) {
+            case 'standard': {
+                return (jsx(Button, { onClick: 'onAnnotationClick' in props
+                        ? props.onAnnotationClick
+                        : undefined, size: "main", variant: "base-ghost", children: annotation }));
+            }
+            case 'overflow': {
+                // @TODO Consider Dropdown integration after Dropdown redesign
+                return (jsx(Button, { icon: annotation, onClick: 'onAnnotationClick' in props
+                        ? props.onAnnotationClick
+                        : undefined, size: "main", variant: "base-ghost" }));
+            }
+            case 'information': {
+                return (jsx(Typography, { color: "text-neutral", variant: "caption", children: annotation }));
+            }
+            default:
+                return null;
+        }
+    };
+    return (jsxs("footer", { ref: ref, ...rest, className: cx(pageFooterClasses.host, className), children: [jsx("div", { className: cx(pageFooterClasses.annotation, annotationClassName), children: renderAnnotation() }), jsx("div", { className: pageFooterClasses.message, children: warningMessage ? (jsx(Typography, { variant: "caption", color: "text-warning", align: "right", children: warningMessage })) : null }), jsxs(ButtonGroup, { children: [(actions === null || actions === void 0 ? void 0 : actions.secondaryButtonProps) && (jsx(Button, { size: "main", variant: "base-secondary", ...actions.secondaryButtonProps })), jsx(Button, { size: "main", variant: "base-primary", ...restPrimaryButtonProps, children: primaryButtonText || 'Button' })] })] }));
 });
 
 export { PageFooter as default };

package/Popover/Popover.js

@@ -1,23 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { popoverClasses } from '@mezzanine-ui/core/popover';
+import { offset } from '@floating-ui/react-dom';
 import { useClickAway } from '../hooks/useClickAway.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Popper from '../Popper/Popper.js';
 import cx from 'clsx';
 
-const offsetModifier = {
-    name: 'offset',
-    options: {
-        offset: [0, 8],
-    },
-};
+const offsetMiddleware = offset({ mainAxis: 8 });
 /**
  * The react component for `mezzanine` popover.
  */
 const Popover = forwardRef(function Popover(props, ref) {
     const { children, className, disableClickAway = false, onClose, open, options = {}, title, ...rest } = props;
-    const { modifiers = [] } = options;
+    const { middleware = [] } = options;
     const popoverRef = useRef(null);
     const composedRef = useComposeRefs([ref, popoverRef]);
     useClickAway(() => {
@@ -32,7 +28,7 @@ const Popover = forwardRef(function Popover(props, ref) {
     }, popoverRef, [open, disableClickAway, onClose, popoverRef]);
     return (jsxs(Popper, { ...rest, ref: composedRef, className: cx(popoverClasses.host, className), open: open, options: {
             ...options,
-            modifiers: [offsetModifier, ...modifiers],
+            middleware: [offsetMiddleware, ...middleware],
         }, children: [title && jsx("div", { className: popoverClasses.title, children: title }), children && jsx("div", { className: popoverClasses.content, children: children })] }));
 });
 

package/Popper/Popper.d.ts

@@ -1,21 +1,26 @@
-import { Options as _PopperOptions } from '@popperjs/core';
 import { Ref } from 'react';
-import { Modifier, usePopper } from 'react-popper';
+import { UseFloatingOptions, UseFloatingReturn, Placement, Strategy } from '@floating-ui/react-dom';
 import { ElementGetter } from '../utils/getElement';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { PortalProps } from '../Portal';
-export type { Placement as PopperPlacement, PositioningStrategy as PopperPositionStrategy, } from '@popperjs/core';
-export type PopperOptions<Modifiers> = Omit<Partial<_PopperOptions>, 'modifiers'> & {
-    modifiers?: ReadonlyArray<Modifier<Modifiers>>;
-};
-export type PopperController = ReturnType<typeof usePopper>;
+export type PopperPlacement = Placement;
+export type PopperPositionStrategy = Strategy;
+export type PopperController = UseFloatingReturn;
 export interface PopperProps extends Pick<PortalProps, 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * The ref of trigger Element.
      */
     anchor?: ElementGetter;
     /**
-     * Provide `controllerRef` if you need access to `usePopper` results.
+     * Whether to show arrow element on the popper
+     */
+    arrow?: {
+        enabled: boolean;
+        className: string;
+        padding?: number;
+    } | null;
+    /**
+     * Provide `controllerRef` if you need access to `useFloating` results.
      */
     controllerRef?: Ref<PopperController>;
     /**
@@ -24,9 +29,9 @@ export interface PopperProps extends Pick<PortalProps, 'container' | 'disablePor
      */
     open?: boolean;
     /**
-     * The options of usePopper hook of react-popper.
+     * The options of useFloating hook from @floating-ui/react-dom.
      */
-    options?: PopperOptions<any>;
+    options?: UseFloatingOptions;
 }
 declare const Popper: import("react").ForwardRefExoticComponent<PopperProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Popper;

package/Popper/Popper.js

@@ -1,30 +1,101 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useImperativeHandle } from 'react';
-import { usePopper } from 'react-popper';
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
+import { useFloating, arrow } from '@floating-ui/react-dom';
+import { spacingPrefix } from '@mezzanine-ui/system/spacing';
 import { getElement } from '../utils/getElement.js';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { getCSSVariableValue } from '../utils/get-css-variable-value.js';
 import Portal from '../Portal/Portal.js';
 
 const Popper = forwardRef(function Popper(props, ref) {
-    const { anchor, children, container, controllerRef, disablePortal, open = false, options, style, ...rest } = props;
-    const [popperEl, setPopperEl] = useState(null);
-    const composedRef = useComposeRefs([ref, setPopperEl]);
+    var _a, _b, _c, _d;
+    const { anchor, arrow: arrow$1, children, container, controllerRef, disablePortal, open = false, options, style, ...rest } = props;
+    const arrowRef = useRef(null);
     const anchorEl = getElement(anchor);
-    const { attributes, forceUpdate, state, styles, update } = usePopper(anchorEl, popperEl, options);
-    useImperativeHandle(controllerRef, () => ({
-        attributes,
-        forceUpdate,
-        state,
-        styles,
-        update,
-    }));
+    const floatingReturn = useFloating({
+        ...options,
+        middleware: [
+            ...((_a = options === null || options === void 0 ? void 0 : options.middleware) !== null && _a !== void 0 ? _a : []),
+            (arrow$1 === null || arrow$1 === void 0 ? void 0 : arrow$1.enabled)
+                ? arrow({
+                    element: arrowRef.current,
+                    padding: arrow$1.padding || 0,
+                })
+                : null,
+        ],
+        elements: {
+            reference: anchorEl,
+        },
+    });
+    const { refs, floatingStyles, update } = floatingReturn;
+    const composedRef = useComposeRefs([ref, refs.setFloating]);
+    useImperativeHandle(controllerRef, () => floatingReturn, [floatingReturn]);
+    useEffect(() => {
+        if (anchorEl) {
+            refs.setReference(anchorEl);
+        }
+    }, [anchorEl, refs]);
+    useEffect(() => {
+        if (open && update) {
+            update();
+        }
+    }, [open, update]);
+    // 計算箭頭的位置和旋轉角度
+    const arrowX = (_b = floatingReturn.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
+    const arrowY = (_c = floatingReturn.middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y;
+    const placement = floatingReturn.placement;
+    // 根據 placement 決定箭頭的靜態位置和旋轉
+    const getArrowStyles = useCallback(() => {
+        const staticSide = {
+            top: {
+                property: 'bottom',
+                value: '-6px',
+            },
+            right: {
+                property: 'left',
+                value: '-8px',
+            },
+            bottom: {
+                property: 'top',
+                value: '-6px',
+            },
+            left: {
+                property: 'right',
+                value: '-8px',
+            },
+        }[placement.split('-')[0]];
+        const arrowStyles = {
+            width: getCSSVariableValue(`--${spacingPrefix}-size-element-slim`),
+            height: getCSSVariableValue(`--${spacingPrefix}-size-element-tight`),
+            transformOrigin: 'center',
+            position: 'absolute',
+            left: typeof arrowX === 'number' ? `${arrowX}px` : undefined,
+            top: typeof arrowY === 'number' ? `${arrowY}px` : undefined,
+            [staticSide.property]: staticSide.value,
+        };
+        // 根據 placement 旋轉箭頭
+        const rotation = {
+            top: '0deg',
+            right: '90deg',
+            bottom: '180deg',
+            left: '-90deg',
+        }[placement.split('-')[0]];
+        if (rotation) {
+            arrowStyles.transform = `rotate(${rotation})`;
+        }
+        return arrowStyles;
+    }, [arrowX, arrowY, placement]);
     if (!open) {
         return null;
     }
-    return (jsx(Portal, { container: container, disablePortal: disablePortal, children: jsx("div", { ...rest, ref: composedRef, style: {
+    return (jsx(Portal, { container: container, disablePortal: disablePortal, children: jsxs("div", { ...rest, ref: composedRef, "data-popper-placement": floatingReturn.placement, style: {
                 ...style,
-                ...styles.popper,
-            }, ...attributes.popper, children: children }) }));
+                ...floatingStyles,
+                visibility: ((_d = floatingReturn.middlewareData.hide) === null || _d === void 0 ? void 0 : _d.referenceHidden)
+                    ? 'hidden'
+                    : 'visible',
+            }, children: [(arrow$1 === null || arrow$1 === void 0 ? void 0 : arrow$1.enabled) ? (jsx("svg", { viewBox: "0 0 12 6", fill: "none", ref: arrowRef, className: arrow$1 === null || arrow$1 === void 0 ? void 0 : arrow$1.className, style: getArrowStyles(), children: jsx("path", { d: "M6.70711 5.29289C6.31658 5.68342 5.68342 5.68342 5.29289 5.29289L0 0L12 6.05683e-07L6.70711 5.29289Z", fill: "currentColor" }) })) : null, children] }) }));
 });
 
 export { Popper as default };

package/Popper/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Popper';
-export type { PopperPlacement, PopperPositionStrategy, PopperOptions, PopperController, PopperProps, } from './Popper';
+export type { PopperPlacement, PopperPositionStrategy, PopperController, PopperProps, } from './Popper';

package/Portal/Portal.d.ts

@@ -1,5 +1,5 @@
-import { FC, ReactNode } from 'react';
-import { ElementGetter } from '../utils/getElement';
+import { ReactNode, RefObject } from 'react';
+import { type PortalLayer } from './portalRegistry';
 export interface PortalProps {
     /**
      * The element you want to portal.
@@ -7,14 +7,22 @@ export interface PortalProps {
     children?: ReactNode;
     /**
      * The destination where to portal.
+     * If provided, it will override the default portal container.
+     * Accepts HTMLElement, RefObject, or null.
      */
-    container?: ElementGetter;
+    container?: HTMLElement | RefObject<HTMLElement | null> | RefObject<HTMLElement> | null;
     /**
      * Whether to disable portal.
      * If true, it will be a normal component.
      * @default false
      */
     disablePortal?: boolean;
+    /**
+     * The portal layer to use.
+     * - 'alert': Portal to alert container (above root, sticky)
+     * - 'default': Portal to default container (inside root, fixed)
+     * @default 'default'
+     */
+    layer?: PortalLayer;
 }
-declare const Portal: FC<PortalProps>;
-export default Portal;
+export default function Portal({ children, container: containerProp, disablePortal, layer, }: PortalProps): import("react/jsx-runtime").JSX.Element | null;

package/Portal/Portal.js

@@ -1,23 +1,38 @@
+'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { getElement } from '../utils/getElement.js';
+import { getContainer } from './portalRegistry.js';
 
-const Portal = (props) => {
-    const { children, container, disablePortal = false } = props;
-    const [portalElement, setPortalElement] = useState(() => disablePortal ? null : getElement(container));
+function Portal({ children, container: containerProp, disablePortal = false, layer = 'default', }) {
+    const [container, setContainer] = useState(null);
+    // Extract ref.current for dependency tracking
+    const refCurrent = containerProp && 'current' in containerProp
+        ? containerProp.current
+        : undefined;
     useEffect(() => {
-        if (!disablePortal) {
-            setPortalElement(getElement(container) || document.body);
+        if (disablePortal)
+            return;
+        if (containerProp) {
+            // Handle RefObject
+            if ('current' in containerProp) {
+                setContainer(containerProp.current);
+                return;
+            }
+            // Handle HTMLElement
+            setContainer(containerProp);
+            return;
         }
-    }, [container, disablePortal]);
+        const targetContainer = getContainer(layer);
+        setContainer(targetContainer);
+    }, [containerProp, disablePortal, layer, refCurrent]);
     /** This element is fully client side, so `return null` on server side */
     if (typeof window === 'undefined')
         return null;
-    if (disablePortal || !portalElement) {
+    if (disablePortal || !container) {
         return jsx(Fragment, { children: children });
     }
-    return createPortal(children, portalElement);
-};
+    return createPortal(children, container);
+}
 
 export { Portal as default };

package/Portal/index.d.ts

@@ -1,2 +1,4 @@
 export type { PortalProps } from './Portal';
+export type { PortalLayer } from './portalRegistry';
 export { default } from './Portal';
+export { getContainer, getRootElement, initializePortals, resetPortals, } from './portalRegistry';

package/Portal/index.js

@@ -1 +1,2 @@
 export { default } from './Portal.js';
+export { getContainer, getRootElement, initializePortals, resetPortals } from './portalRegistry.js';

package/Portal/portalRegistry.d.ts

@@ -0,0 +1,17 @@
+export type PortalLayer = 'alert' | 'default';
+/**
+ * Initialize portal containers.
+ * This function can be called manually in your app's entry point,
+ * or it will be called automatically when the first Portal is rendered.
+ *
+ * @param rootSelector - Optional root element or selector string.
+ *                       Defaults to document.body
+ */
+export declare function initializePortals(rootSelector?: string | HTMLElement): void;
+export declare function getContainer(layer: PortalLayer): HTMLElement | null;
+export declare function getRootElement(): HTMLElement | null;
+/**
+ * Reset portal system state. Only for testing purposes.
+ * @internal
+ */
+export declare function resetPortals(): void;

package/Portal/portalRegistry.js

@@ -0,0 +1,99 @@
+// Module-level state
+let containers = {
+    alert: null,
+    default: null,
+};
+let rootElement = null;
+let initialized = false;
+let alertHeight = 0;
+function findRootElement(rootProp) {
+    if (rootProp instanceof HTMLElement)
+        return rootProp;
+    if (typeof rootProp === 'string') {
+        const element = document.querySelector(rootProp);
+        if (element instanceof HTMLElement)
+            return element;
+    }
+    return document.body;
+}
+function observeAlertHeight() {
+    if (!containers.alert || !containers.default)
+        return;
+    const updatePortalTop = () => {
+        if (!containers.alert || !containers.default)
+            return;
+        const height = containers.alert.offsetHeight;
+        if (height !== alertHeight) {
+            alertHeight = height;
+            containers.default.style.top = `${height}px`;
+            containers.default.style.height = `calc(100% - ${height}px)`;
+        }
+    };
+    // Use ResizeObserver to track alert container height changes
+    const observer = new ResizeObserver(updatePortalTop);
+    observer.observe(containers.alert);
+    // Initial update
+    updatePortalTop();
+}
+function createContainers() {
+    if (!rootElement)
+        return;
+    const alertContainer = document.createElement('div');
+    alertContainer.id = 'mzn-alert-container';
+    alertContainer.className = 'mzn-portal-alert';
+    const portalContainer = document.createElement('div');
+    portalContainer.id = 'mzn-portal-container';
+    portalContainer.className = 'mzn-portal-default';
+    rootElement.insertBefore(alertContainer, rootElement.firstChild);
+    rootElement.appendChild(portalContainer);
+    containers = {
+        alert: alertContainer,
+        default: portalContainer,
+    };
+    // Observe alert height changes and update portal container position
+    observeAlertHeight();
+}
+/**
+ * Initialize portal containers.
+ * This function can be called manually in your app's entry point,
+ * or it will be called automatically when the first Portal is rendered.
+ *
+ * @param rootSelector - Optional root element or selector string.
+ *                       Defaults to document.body
+ */
+function initializePortals(rootSelector) {
+    if (initialized || typeof window === 'undefined')
+        return;
+    initialized = true;
+    rootElement = findRootElement(rootSelector);
+    if (!rootElement)
+        return;
+    createContainers();
+}
+function getContainer(layer) {
+    if (!initialized && typeof window !== 'undefined') {
+        initializePortals();
+    }
+    return containers[layer];
+}
+function getRootElement() {
+    if (!initialized && typeof window !== 'undefined') {
+        initializePortals();
+    }
+    return rootElement;
+}
+/**
+ * Reset portal system state. Only for testing purposes.
+ * @internal
+ */
+function resetPortals() {
+    containers = {
+        alert: null,
+        default: null,
+    };
+    rootElement = null;
+    initialized = false;
+    alertHeight = 0;
+}
+
+export { getContainer, getRootElement, initializePortals, resetPortals };

package/Provider/ConfigProvider.d.ts

@@ -4,5 +4,6 @@ export interface ConfigProviderProps {
     children?: ReactNode;
     size?: MezzanineConfigContext['size'];
 }
+/** @deprecated 未來不提供此設定 */
 declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
 export default ConfigProvider;

package/Provider/ConfigProvider.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { MezzanineConfig } from './context.js';
 
+/** @deprecated 未來不提供此設定 */
 function ConfigProvider(props) {
     const { children, size } = props;
     const context = useMemo(() => ({

package/ResultState/ResultState.d.ts

@@ -0,0 +1,36 @@
+import type { ResultStateSize, ResultStateType } from '@mezzanine-ui/core/result-state';
+import type { ButtonProps } from '../Button';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ResultStateProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Action buttons configuration for primary and secondary actions.
+     * Renders buttons in the order: secondary (left), primary (right).
+     */
+    actions?: {
+        primaryButtonProps?: ButtonProps;
+        secondaryButtonProps?: ButtonProps;
+    };
+    /**
+     * Optional description text displayed below the title.
+     * Provides additional context or details about the result state.
+     */
+    description?: string;
+    /**
+     * The size variant of the result state.
+     * Controls typography, spacing, and overall dimensions.
+     * @default 'main'
+     */
+    size?: ResultStateSize;
+    /**
+     * The title text for the result state.
+     * This is the main heading that describes the state.
+     */
+    title: string;
+    /**
+     * The type of result state, which determines the icon and color theme.
+     * @default 'information'
+     */
+    type?: ResultStateType;
+}
+declare const ResultState: import("react").ForwardRefExoticComponent<ResultStateProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ResultState;

package/ResultState/ResultState.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { resultStateClasses } from '@mezzanine-ui/core/result-state';
+import { forwardRef, useMemo } from 'react';
+import { DangerousFilledIcon, ErrorFilledIcon, WarningFilledIcon, QuestionFilledIcon, CheckedFilledIcon, InfoFilledIcon } from '@mezzanine-ui/icons';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const iconMap = {
+    information: InfoFilledIcon,
+    success: CheckedFilledIcon,
+    help: QuestionFilledIcon,
+    warning: WarningFilledIcon,
+    error: ErrorFilledIcon,
+    failure: DangerousFilledIcon,
+};
+const ResultState = forwardRef(function ResultState(props, ref) {
+    const { actions, className, description, size = 'main', title, type = 'information', ...rest } = props;
+    const icon = useMemo(() => iconMap[type], [type]);
+    return (jsx("div", { ...rest, ref: ref, className: cx(resultStateClasses.host, resultStateClasses.type(type), resultStateClasses.size(size), className), children: jsxs("div", { className: resultStateClasses.container, children: [jsx(Icon, { className: resultStateClasses.icon, icon: icon }), jsx("h3", { className: resultStateClasses.title, children: title }), description && jsx("p", { className: resultStateClasses.description, children: description }), actions && (jsxs(ButtonGroup, { className: resultStateClasses.actions, children: [actions.secondaryButtonProps && (jsx(Button, { size: "main", variant: "base-secondary", ...actions.secondaryButtonProps })), actions.primaryButtonProps && (jsx(Button, { size: "main", variant: "base-primary", ...actions.primaryButtonProps }))] }))] }) }));
+});
+
+export { ResultState as default };

package/ResultState/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ResultState';
+export * from './ResultState';

package/ResultState/index.js

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