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

package/Accordion/AccordionControlContext.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from 'react';
 
 const AccordionControlContext = createContext(undefined);

package/Accordion/AccordionDetails.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useMemo } from 'react';
 import { accordionClasses } from '@mezzanine-ui/core/accordion';

package/Accordion/AccordionSummary.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useContext, useCallback, useMemo } from 'react';
 import { ChevronDownIcon } from '@mezzanine-ui/icons';
@@ -34,18 +35,17 @@ const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
         }
         return result;
     }, [detailsId, expanded]);
-    const DefaultIcon = useCallback((iconProps) => {
-        const { className: iconClassNames = '' } = iconProps;
-        return (jsx(Icon, { color: disabled ? 'disabled' : 'primary', className: cx(accordionClasses.summaryIcon, {
-                [accordionClasses.summaryIconExpanded]: expanded,
-                [accordionClasses.summaryIconDisabled]: disabled,
-            }, iconClassNames, iconClassNameProp), icon: ChevronDownIcon, onClick: onToggle, onMouseDown: (evt) => evt.preventDefault(), role: "button" }));
-    }, [disabled, expanded, iconClassNameProp, onToggle]);
+    const defaultIconElement = useMemo(() => (jsx(Icon, { color: disabled ? 'neutral-faint' : 'neutral', className: cx(accordionClasses.summaryIcon, {
+            [accordionClasses.summaryIconExpanded]: expanded,
+            [accordionClasses.summaryIconDisabled]: disabled,
+        }, iconClassNameProp), icon: ChevronDownIcon, onClick: onToggle, onMouseDown: (evt) => evt.preventDefault(), role: "button" })), [disabled, expanded, iconClassNameProp, onToggle]);
+    const defaultIconWithPrefixClassName = useMemo(() => (jsx(Icon, { color: disabled ? 'neutral-faint' : 'neutral', className: cx(accordionClasses.summaryIcon, {
+            [accordionClasses.summaryIconExpanded]: expanded,
+            [accordionClasses.summaryIconDisabled]: disabled,
+        }, accordionClasses.summaryMainPartPrefix, iconClassNameProp), icon: ChevronDownIcon, onClick: onToggle, onMouseDown: (evt) => evt.preventDefault(), role: "button" })), [disabled, expanded, iconClassNameProp, onToggle]);
     return (jsxs("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.summary, {
             [accordionClasses.summaryDisabled]: disabled,
-        }, className), onClick: onToggle, onKeyDown: onKeyDown, role: "button", tabIndex: 0, children: [jsxs("div", { className: accordionClasses.summaryMainPart, children: [suffixActions
-                        ? prefixIcon || (jsx(DefaultIcon, { className: accordionClasses.summaryMainPartPrefix }))
-                        : null, children] }), suffixActions || jsx(DefaultIcon, {})] }));
+        }, className), onClick: onToggle, onKeyDown: onKeyDown, role: "button", tabIndex: 0, children: [jsxs("div", { className: accordionClasses.summaryMainPart, children: [suffixActions ? prefixIcon || defaultIconWithPrefixClassName : null, children] }), suffixActions || defaultIconElement] }));
 });
 
 export { AccordionSummary as default };

package/Accordion/index.d.ts

@@ -1,3 +1,6 @@
-export { AccordionProps, default } from './Accordion';
-export { AccordionSummaryProps, default as AccordionSummary, } from './AccordionSummary';
-export { AccordionDetailsProps, default as AccordionDetails, } from './AccordionDetails';
+export type { AccordionProps } from './Accordion';
+export { default } from './Accordion';
+export { default as AccordionSummary } from './AccordionSummary';
+export type { AccordionSummaryProps } from './AccordionSummary';
+export { default as AccordionDetails } from './AccordionDetails';
+export type { AccordionDetailsProps } from './AccordionDetails';

package/Alert/index.d.ts

@@ -1,2 +1,3 @@
-export { AlertSeverity } from '@mezzanine-ui/core/alert';
-export { AlertProps, default } from './Alert';
+export type { AlertSeverity } from '@mezzanine-ui/core/alert';
+export type { AlertProps } from './Alert';
+export { default } from './Alert';

package/AlertBanner/AlertBanner.d.ts

@@ -0,0 +1,93 @@
+import type { Key, MouseEvent, ReactElement } from 'react';
+import { AlertBannerSeverity } from '@mezzanine-ui/core/alert-banner';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { ButtonPropsBase } from '../Button';
+import { Notifier, NotifierConfig, NotifierData } from '../Notifier';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface AlertBannerAction extends Omit<ButtonPropsBase, 'children'> {
+    /**
+     * The text content of the button.
+     */
+    content?: string;
+    /**
+     * Callback when the button is clicked.
+     */
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+export type AlertBannerConfigProps = NotifierConfig;
+export interface AlertBannerData extends Omit<NotifierData, 'onClose'>, AlertBannerConfigProps {
+    /**
+     * The action buttons to be rendered on the right side of the banner.
+     * Maximum 2 actions, minimum 0 (will not display if empty).
+     */
+    actions?: AlertBannerAction[];
+    /**
+     * Whether to show the close button.
+     */
+    closable?: boolean;
+    /**
+     * @internal
+     */
+    createdAt?: number;
+    /**
+     * Custom icon. Defaults to severity icon when omitted.
+     */
+    icon?: IconDefinition;
+    /**
+     * Main message displayed in the banner.
+     */
+    message: string;
+    /**
+     * Callback when the banner is closed.
+     */
+    onClose?: () => void;
+    /**
+     * The key of alert banner.
+     */
+    reference?: Key;
+    /**
+     * The severity of the banner.
+     */
+    severity: AlertBannerSeverity;
+}
+export interface AlertBannerProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'title'> {
+    /**
+     * The action buttons to be rendered on the right side of the banner.
+     * Maximum 2 actions, minimum 0 (will not display if empty).
+     */
+    actions?: AlertBannerAction[];
+    /**
+     * Whether to show the close button.
+     */
+    closable?: boolean;
+    /**
+     * Disable portal rendering. Only used internally by grouped rendering.
+     * @internal
+     */
+    disablePortal?: boolean;
+    /**
+     * Custom icon. Defaults to severity icon when omitted.
+     */
+    icon?: IconDefinition;
+    /**
+     * Main message displayed in the banner.
+     */
+    message: string;
+    /**
+     * Callback when the banner is closed.
+     */
+    onClose?: () => void;
+    /**
+     * The severity of the banner.
+     */
+    severity: AlertBannerSeverity;
+}
+export type AlertBannerType = ((props: AlertBannerData) => ReactElement | null) & Notifier<AlertBannerData, AlertBannerConfigProps> & Record<string, (message: AlertBannerData['message'], props?: Omit<AlertBannerData, 'message' | 'severity' | 'icon'> & {
+    key?: Key;
+}) => Key>;
+/**
+ * The react component for `mezzanine` alert banner.
+ */
+export declare const AlertBannerComponent: import("react").ForwardRefExoticComponent<AlertBannerProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const AlertBanner: AlertBannerType;
+export default AlertBanner;

package/AlertBanner/AlertBanner.js

@@ -0,0 +1,154 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback, forwardRef, useState, useRef, useEffect } from 'react';
+import { alertBannerIcons, alertBannerClasses, alertBannerGroupClasses } from '@mezzanine-ui/core/alert-banner';
+import Button from '../Button/Button.js';
+import ClearActions from '../ClearActions/ClearActions.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Icon from '../Icon/Icon.js';
+import Portal from '../Portal/Portal.js';
+import cx from 'clsx';
+import { createNotifier } from '../Notifier/createNotifier.js';
+
+function getPriority(severity) {
+    if (severity === 'info') {
+        return 1;
+    }
+    return 0;
+}
+function sortAlertNotifiers(notifiers) {
+    return [...notifiers].sort((a, b) => {
+        const priorityDiff = getPriority(a.severity) - getPriority(b.severity);
+        if (priorityDiff !== 0) {
+            return priorityDiff;
+        }
+        if (a.createdAt !== b.createdAt) {
+            return b.createdAt - a.createdAt;
+        }
+        return 0;
+    });
+}
+/**
+ * The react component for `mezzanine` alert banner.
+ */
+const AlertBannerComponent = forwardRef(function AlertBanner(props, ref) {
+    var _a;
+    const { actions, className, closable = true, disablePortal = false, icon, message, onClose, severity, ...rest } = props;
+    const [visible, setVisible] = useState(true);
+    const [isExiting, setIsExiting] = useState(false);
+    const [isEntering, setIsEntering] = useState(false);
+    const nodeRef = useRef(null);
+    const composedRef = useComposeRefs([ref, nodeRef]);
+    const handleClose = useCallback(() => {
+        setIsExiting(true);
+        setTimeout(() => {
+            setVisible(false);
+            if (onClose) {
+                onClose();
+            }
+        }, 250); // moderate duration
+    }, [onClose]);
+    useEffect(() => {
+        if (actions && actions.length > 2) {
+            console.warn('AlertBanner: actions maximum is 2');
+        }
+    }, [actions]);
+    useEffect(() => {
+        if (visible && !isExiting && nodeRef.current) {
+            // Force reflow to ensure initial state is applied
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            nodeRef.current.offsetHeight;
+            // Trigger entering animation in next frame
+            requestAnimationFrame(() => {
+                setIsEntering(true);
+            });
+        }
+    }, [visible, isExiting]);
+    if (!visible) {
+        return null;
+    }
+    const resolvedIcon = icon !== null && icon !== void 0 ? icon : alertBannerIcons[severity];
+    const showCloseButton = closable !== null && closable !== void 0 ? closable : Boolean(onClose);
+    const validActions = (_a = actions === null || actions === void 0 ? void 0 : actions.slice(0, 2)) !== null && _a !== void 0 ? _a : []; // Maximum support 2 actions
+    const hasActions = validActions.length > 0;
+    const actionsArea = hasActions ? (jsx("div", { className: alertBannerClasses.actions, children: validActions.map((action, index) => {
+            const { content, onClick, ...buttonProps } = action;
+            return (jsx(Button, { onClick: onClick, size: "minor", variant: "inverse", ...buttonProps, children: content }, index));
+        }) })) : null;
+    const clearActionsArea = showCloseButton ? (jsx(ClearActions, { className: alertBannerClasses.close, onClick: handleClose, type: "standard", variant: "inverse" })) : null;
+    const { maxCount: _maxCount, instanceKey: _instanceKey, ...restProps } = rest;
+    const content = (jsxs("div", { ...restProps, ref: composedRef, "aria-live": "polite", className: cx(alertBannerClasses.host, alertBannerClasses.severity(severity), isExiting && alertBannerClasses.exiting, isEntering && !isExiting && alertBannerClasses.entering, className), role: "status", children: [jsxs("div", { className: alertBannerClasses.body, children: [jsx(Icon, { className: alertBannerClasses.icon, icon: resolvedIcon }), jsx("span", { className: alertBannerClasses.message, children: message })] }), jsxs("div", { className: alertBannerClasses.controls, children: [actionsArea, clearActionsArea] })] }));
+    if (disablePortal) {
+        return content;
+    }
+    return jsx(Portal, { layer: "alert", children: content });
+});
+const AlertBanner = ((props) => {
+    const { message, reference, onClose: onCloseProp, maxCount: _maxCount, createdAt: _createdAt, ...restProps } = props;
+    const onClose = useCallback(() => {
+        if (onCloseProp) {
+            onCloseProp();
+        }
+        if (reference) {
+            AlertBanner.remove(reference);
+        }
+    }, [onCloseProp, reference]);
+    return (jsx(AlertBannerComponent, { ...restProps, message: message, onClose: onClose }));
+});
+function initializeAlertBannerNotifier() {
+    const notifier = createNotifier({
+        maxCount: undefined,
+        render: (notifierProps) => {
+            const { key, reference: _reference, onClose: onCloseProp, createdAt: _createdAt, ...restProps } = notifierProps;
+            return (jsx(AlertBannerComponent, { ...restProps, disablePortal: true, onClose: () => {
+                    if (onCloseProp) {
+                        onCloseProp();
+                    }
+                    notifier.remove(key);
+                } }));
+        },
+        renderContainer: (children) => (jsx(Portal, { layer: "alert", children: jsx("div", { className: alertBannerGroupClasses.host, children: children }) })),
+        sortBeforeUpdate: sortAlertNotifiers,
+    });
+    return notifier;
+}
+const alertBannerNotifier = initializeAlertBannerNotifier();
+AlertBanner.add = (notifier) => {
+    var _a;
+    return alertBannerNotifier.add({
+        ...notifier,
+        createdAt: (_a = notifier.createdAt) !== null && _a !== void 0 ? _a : Date.now(),
+    });
+};
+AlertBanner.config = alertBannerNotifier.config;
+AlertBanner.destroy = alertBannerNotifier.destroy;
+AlertBanner.remove = alertBannerNotifier.remove;
+AlertBanner.getConfig = alertBannerNotifier.getConfig;
+const severities = [
+    // support severity: info, warning, error
+    {
+        key: 'info',
+        icon: alertBannerIcons.info,
+    },
+    {
+        key: 'warning',
+        icon: alertBannerIcons.warning,
+    },
+    {
+        key: 'error',
+        icon: alertBannerIcons.error,
+    },
+];
+const validSeverities = ['info', 'warning', 'error'];
+severities.forEach((severity) => {
+    AlertBanner[severity.key] = (message, props) => AlertBanner.add({
+        ...props,
+        message,
+        severity: validSeverities.includes(severity.key)
+            ? severity.key
+            : 'info',
+        icon: severity.icon,
+    });
+});
+
+export { AlertBannerComponent, AlertBanner as default };

package/AlertBanner/index.d.ts

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

package/AlertBanner/index.js

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

package/Anchor/Anchor.js

@@ -9,7 +9,7 @@ import cx from 'clsx';
  * This component should always be full width of its parent.
  */
 const Anchor = forwardRef(function Anchor(props, ref) {
-    const { activeAnchorId, className, children, ellipsis = false, list, maxWidth, onClick, style, ...rest } = props;
+    const { activeAnchorId, className, ellipsis = false, list, maxWidth, onClick, style, ...rest } = props;
     const resolvedStyle = {
         ...(style || {}),
         ...(maxWidth ? { maxWidth: `${maxWidth}px` } : {}),

package/Anchor/index.d.ts

@@ -1 +1,2 @@
-export { AnchorProps, default } from './Anchor';
+export type { AnchorProps } from './Anchor';
+export { default } from './Anchor';

package/AppBar/index.d.ts

@@ -1,4 +1,8 @@
-export { AppBarBrandProps, default as AppBarBrand } from './AppBarBrand';
-export { AppBarMainProps, default as AppBarMain } from './AppBarMain';
-export { AppBarSupportProps, default as AppBarSupport } from './AppBarSupport';
-export { AppBarChild, AppBarChildren, AppBarProps, default } from './AppBar';
+export type { AppBarBrandProps } from './AppBarBrand';
+export { default as AppBarBrand } from './AppBarBrand';
+export type { AppBarMainProps } from './AppBarMain';
+export { default as AppBarMain } from './AppBarMain';
+export type { AppBarSupportProps } from './AppBarSupport';
+export { default as AppBarSupport } from './AppBarSupport';
+export type { AppBarChild, AppBarChildren, AppBarProps } from './AppBar';
+export { default } from './AppBar';

package/{Overlay/Overlay.d.ts → Backdrop/Backdrop.d.ts}

@@ -1,22 +1,18 @@
 import { MouseEventHandler } from 'react';
+import { BackdropVariant } from '@mezzanine-ui/core/backdrop';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { PortalProps } from '../Portal';
-export interface OverlayProps extends Pick<PortalProps, 'children' | 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
+export interface BackdropProps extends Pick<PortalProps, 'children' | 'container' | 'disablePortal'>, NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
      * Controls whether to disable closing element while backdrop clicked.
      * @default false
      */
     disableCloseOnBackdropClick?: boolean;
     /**
-     * Whether to hide backdrop.
+     * Controls whether to disable scroll locking when backdrop is open.
      * @default false
      */
-    hideBackdrop?: boolean;
-    /**
-     * Whether to set backdrop invisible
-     * @default false
-     */
-    invisibleBackdrop?: boolean;
+    disableScrollLock?: boolean;
     /**
      * Click handler for backdrop.
      */
@@ -25,19 +21,19 @@ export interface OverlayProps extends Pick<PortalProps, 'children' | 'container'
      * Callback fired while the element will be closed.
      */
     onClose?: VoidFunction;
-    /**
-     * Overlay is use on top of a component(surface)
-     * @default false
-     */
-    onSurface?: boolean;
     /**
      * Controls whether to show the element.
      * @default false
      */
     open?: boolean;
+    /**
+     * The variant of backdrop.
+     * @default 'dark'
+     */
+    variant?: BackdropVariant;
 }
 /**
- * The react component for `mezzanine` overlay.
+ * The react component for `mezzanine` backdrop.
  */
-declare const Overlay: import("react").ForwardRefExoticComponent<OverlayProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Overlay;
+declare const Backdrop: import("react").ForwardRefExoticComponent<BackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Backdrop;

package/Backdrop/Backdrop.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { backdropClasses } from '@mezzanine-ui/core/backdrop';
+import { useScrollLock } from '../hooks/useScrollLock.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Portal from '../Portal/Portal.js';
+import Fade from '../Transition/Fade.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` backdrop.
+ */
+const Backdrop = forwardRef(function Backdrop(props, ref) {
+    const { children, className, container, disableCloseOnBackdropClick = false, disablePortal, disableScrollLock = false, onBackdropClick, onClose, open = false, variant = 'dark', ...rest } = props;
+    // Lock body scroll when backdrop is open
+    useScrollLock({ enabled: open && !disableScrollLock });
+    // When using custom container or disablePortal, overlay should be absolutely positioned
+    // When using default Portal (to #mzn-portal-container), overlay uses relative positioning
+    const applyAbsolutePosition = Boolean(disablePortal || container);
+    return (jsx(Portal, { container: container, disablePortal: disablePortal, layer: "default", children: jsxs("div", { ...rest, ref: ref, "aria-hidden": !open, className: cx(backdropClasses.host, {
+                [backdropClasses.hostAbsolute]: applyAbsolutePosition,
+                [backdropClasses.hostOpen]: open,
+            }, className), role: "presentation", children: [jsx(Fade, { in: open, duration: {
+                        enter: MOTION_DURATION.fast,
+                        exit: MOTION_DURATION.fast,
+                    }, easing: {
+                        enter: MOTION_EASING.standard,
+                        exit: MOTION_EASING.standard,
+                    }, children: jsx("div", { "aria-hidden": "true", className: cx(backdropClasses.backdrop, backdropClasses.backdropVariant(variant)), onClick: (event) => {
+                            if (!disableCloseOnBackdropClick && onClose) {
+                                onClose();
+                            }
+                            if (onBackdropClick) {
+                                onBackdropClick(event);
+                            }
+                        } }) }), jsx("div", { className: backdropClasses.content, children: children })] }) }));
+});
+
+export { Backdrop as default };

package/Backdrop/index.d.ts

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

package/Backdrop/index.js

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

package/Badge/Badge.d.ts

@@ -1,18 +1,24 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface BadgeProps extends Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'color'> {
-    /**
-     * It `true`, ignore passed children and display as a dot.
-     * @default false
-     */
-    dot?: boolean;
-    /**
-     * If the children is number and greater than overflowCount, it will show overflowCount suffixed with a "+".
-     * @default 99
-     */
-    overflowCount?: number;
-}
+import { BadgeCountVariant } from '@mezzanine-ui/core/badge';
 /**
  * The react component for `mezzanine` badge.
  */
-declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Badge: import("react").ForwardRefExoticComponent<(Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
+    children?: never;
+    count: number;
+    overflowCount?: number;
+    text?: never;
+    variant: BadgeCountVariant;
+}, "ref"> | Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
+    children?: never;
+    count?: never;
+    overflowCount?: never;
+    text?: string;
+    variant: import("@mezzanine-ui/core/badge").BadgeDotVariant;
+}, "ref"> | Omit<Omit<NativeElementPropsWithoutKeyAndRef<"span">, "children"> & {
+    children?: import("react").ReactNode;
+    count?: never;
+    overflowCount?: never;
+    text?: never;
+    variant: import("@mezzanine-ui/core/badge").BadgeDotVariant;
+}, "ref">) & import("react").RefAttributes<HTMLSpanElement>>;
 export default Badge;

package/Badge/Badge.js

@@ -1,27 +1,25 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { badgeClasses } from '@mezzanine-ui/core/badge';
 import cx from 'clsx';
 
+const isCountVariant = (variant) => [
+    'count-alert',
+    'count-inactive',
+    'count-inverse',
+    'count-brand',
+    'count-info',
+].includes(variant);
 /**
  * The react component for `mezzanine` badge.
  */
 const Badge = forwardRef(function Badge(props, ref) {
-    const { children: childrenProp, className, dot = false, overflowCount = 99, ...rest } = props;
-    let children;
-    if (!dot) {
-        if (typeof childrenProp === 'number') {
-            const count = childrenProp;
-            children = count > overflowCount ? `${overflowCount}+` : count;
-        }
-        else {
-            children = childrenProp;
-        }
-    }
-    return (jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, {
-            [badgeClasses.dot]: dot,
-            [badgeClasses.hide]: !dot && children === 0,
-        }, className), children: children }));
+    const { children, count, className, overflowCount, text, variant, ...rest } = props;
+    return (jsxs("div", { className: badgeClasses.container(!!children), children: [jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, className), children: isCountVariant(variant)
+                    ? overflowCount && count > overflowCount
+                        ? `${overflowCount}+`
+                        : count
+                    : text }), children] }));
 });
 
 export { Badge as default };

package/Badge/BadgeContainer.d.ts

@@ -1,7 +1,7 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export type BadgeContainerProps = NativeElementPropsWithoutKeyAndRef<'span'>;
 /**
- * The react component for `mezzanine` badge container.
+ * @deprecated Use `Badge` component instead.
  */
 declare const BadgeContainer: import("react").ForwardRefExoticComponent<BadgeContainerProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default BadgeContainer;

package/Badge/BadgeContainer.js

@@ -4,7 +4,7 @@ import { badgeClasses } from '@mezzanine-ui/core/badge';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` badge container.
+ * @deprecated Use `Badge` component instead.
  */
 const BadgeContainer = forwardRef(function BadgeContainer(props, ref) {
     const { children, className, ...rest } = props;

package/Badge/index.d.ts

@@ -1,2 +1,3 @@
-export { BadgeProps, default } from './Badge';
-export { BadgeContainerProps, default as BadgeContainer, } from './BadgeContainer';
+export type { BadgeProps } from './typings';
+export { default } from './Badge';
+export { default as BadgeContainer } from './BadgeContainer';

package/Badge/typings.d.ts

@@ -0,0 +1,48 @@
+import { BadgeCountVariant, BadgeDotVariant } from '@mezzanine-ui/core/badge';
+import { ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from 'react/src/utils/jsx-types';
+export type BadgeProps = Omit<NativeElementPropsWithoutKeyAndRef<'span'>, 'children'> & BadgeVariantProps;
+type BadgeVariantProps = BadgeCountProps | BadgeDotWithTextProps | BadgeDotProps;
+type BadgeCountProps = {
+    /**
+     * ONLY AVAILABLE FOR DOT BADGE(WITHOUT TEXT).
+     * When dot badges have children (typically an icon),
+     * the dot appears on the children's top-right corner.
+     */
+    children?: never;
+    /**
+     * ONLY AVAILABLE FOR COUNT BADGE.
+     * Base number rendered inside the badge when using the count variant.
+     */
+    count: number;
+    /**
+     * ONLY AVAILABLE FOR COUNT BADGE.
+     * If the children is number and greater than overflowCount,
+     * it will show overflowCount suffixed with a "+".
+     */
+    overflowCount?: number;
+    /**
+     * ONLY AVAILABLE FOR DOT WITH TEXT BADGE.
+     * String displayed next to the dot badge.
+     */
+    text?: never;
+    /**
+     * Controls the visual style (dot vs count variants) and enables the related overflow/hide rules.
+     */
+    variant: BadgeCountVariant;
+};
+type BadgeDotWithTextProps = {
+    children?: never;
+    count?: never;
+    overflowCount?: never;
+    text?: string;
+    variant: BadgeDotVariant;
+};
+type BadgeDotProps = {
+    children?: ReactNode;
+    count?: never;
+    overflowCount?: never;
+    text?: never;
+    variant: BadgeDotVariant;
+};
+export {};

package/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,6 @@
+import type { BreadcrumbProps } from './typings';
+/**
+ * The react component for `mezzanine` breadcrumb.
+ */
+declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;
+export default Breadcrumb;

package/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { SlashIcon } from '@mezzanine-ui/icons';
+import { breadcrumbClasses } from '@mezzanine-ui/core/breadcrumb';
+import BreadcrumbItem from './BreadcrumbItem.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` breadcrumb.
+ */
+const Breadcrumb = forwardRef(function Breadcrumb(props, ref) {
+    const { className, condensed, items, ...rest } = props;
+    const lastIndex = items.length - 1;
+    return (jsxs("nav", { ...rest, "aria-label": "Breadcrumb", className: cx(breadcrumbClasses.host, className), ref: ref, children: [!condensed && lastIndex >= 0 && (jsx(BreadcrumbItem, { ...items[0], current: lastIndex === 0 })), !condensed && lastIndex >= 1 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[1], current: lastIndex === 1 })] })), !condensed && items.length <= 4 && (jsxs(Fragment, { children: [lastIndex >= 2 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[2], current: lastIndex === 2 })] })), lastIndex === 3 && (jsxs(Fragment, { children: [jsx(Icon, { icon: SlashIcon, size: 14 }), jsx(BreadcrumbItem, { ...items[3], current: true })] }))] })), (items.length > 4 || condensed) && (jsxs(Fragment, { children: [!condensed && jsx(Icon, { icon: SlashIcon, size: 14 }), (!condensed || items.length > 2) && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { options: (condensed
+                                    ? items.slice(0, lastIndex - 1)
+                                    : items.slice(2, lastIndex - 1)).map((item) => ({
+                                    label: item.label,
+                                    href: item.href,
+                                    target: item.target,
+                                    id: item.id,
+                                })) }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), lastIndex - 1 >= 0 && (jsxs(Fragment, { children: [jsx(BreadcrumbItem, { ...items[lastIndex - 1] }), jsx(Icon, { icon: SlashIcon, size: 14 })] })), jsx(BreadcrumbItem, { ...items[lastIndex], current: true })] }))] }));
+});
+
+export { Breadcrumb as default };