@ringcentral/spring-ui 1.7.0

package/TrayMenu.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { forwardRef, useRef } from 'react';
+import { M as Menu } from './chunks/Menu.js';
+import { T as Tray, d as useTrayNavigate } from './chunks/useTrayNavigate.js';
+import '@ringcentral/spring-base';
+import { M as MenuItem } from './chunks/useMenuItemSelect.js';
+import 'tabbable';
+import './chunks/useListNavigation.js';
+import './VirtualizedList.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+import './chunks/useMotionSafeTransition.js';
+import '@ringcentral/spring-icon';
+import './chunks/useNestedMenuItem.js';
+import './ListNavigation.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+
+const TrayMenu = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TrayMenu' });
+    const { defaultValue, value, onChange, children, ...rest } = props;
+    const trayActionsRef = useRef(null);
+    return (jsx(Menu, { ...rest, ref: ref, autoFocus: false, children: jsx(Tray, { value: value, defaultValue: defaultValue, onChange: onChange, actions: trayActionsRef, onKeyDown: (e) => {
+                if (e.key === 'ArrowLeft') {
+                    trayActionsRef.current?.navigateTo(null);
+                }
+            }, children: children }) }));
+});
+TrayMenu.displayName = 'SuiTrayMenu';
+
+const TrayMenuItem = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TrayMenuItem' });
+    const { value, onClick, onKeyDown } = props;
+    const { navigateTo } = useTrayNavigate();
+    return (jsx(MenuItem, { ...props, onClick: (e) => {
+            navigateTo(value, e);
+            onClick?.(e);
+        }, onKeyDown: (e) => {
+            if (e.key === 'ArrowRight') {
+                navigateTo(value, e);
+            }
+            onKeyDown?.(e);
+        }, ref: ref, autoClose: false }));
+});
+TrayMenuItem.displayName = 'SuiTrayItem';
+
+export { TrayMenu, TrayMenuItem };

package/VirtualizedList.js

@@ -0,0 +1,291 @@
+import { createContext, useContext, forwardRef, isValidElement, useRef, useState, useImperativeHandle, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useForkRef, useEventCallback, useWindowContext, logInDev } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { Virtuoso } from 'react-virtuoso';
+import { L as List } from './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+
+const VirtualizedItemPropsContext = createContext(null);
+const useVirtualizedItemPropsContext = () => useContext(VirtualizedItemPropsContext);
+
+const VirtuosoList = forwardRef((props, ref) => {
+    const { children: childrenProp, context, style, ...rest } = props;
+    const { searchAndFocusItemHandler, isScrolling, ListProps, listActions, listRef, itemContentRenderer, data, keepInvisibleItems, computeItemKey,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+     } = context;
+    const handleListRef = useForkRef(listRef, ref);
+    let rangeStart = null;
+    let rangeEnd = null;
+    let children = childrenProp;
+    if (keepInvisibleItems && computeItemKey && Array.isArray(childrenProp)) {
+        const firstChild = childrenProp[0];
+        if (firstChild && isValidElement(firstChild)) {
+            const index = Number(firstChild.props?.['data-item-index']);
+            rangeStart = Number.isNaN(index) ? null : index;
+        }
+        const lastChild = childrenProp.at(-1);
+        if (lastChild && isValidElement(lastChild)) {
+            const index = Number(lastChild.props?.['data-item-index']);
+            rangeEnd = Number.isNaN(index) ? null : index;
+        }
+        children = [
+            ...(rangeStart !== null
+                ? keepInvisibleItems
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    .filter((itemIndex) => itemIndex < rangeStart)
+                    .map((itemIndex) => {
+                    const itemData = data ? data[itemIndex] : itemIndex;
+                    return (jsx(InnerItem, { "data-sticky-index": itemIndex, style: {
+                            left: 0,
+                            top: 0,
+                            position: 'absolute',
+                        }, children: itemContentRenderer(itemIndex, itemData, context) }, computeItemKey(itemIndex, itemData, context)));
+                })
+                : []),
+            ...childrenProp,
+            ...(rangeEnd !== null
+                ? keepInvisibleItems
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    .filter((itemIndex) => itemIndex > rangeEnd)
+                    .map((itemIndex) => {
+                    const itemData = data ? data[itemIndex] : itemIndex;
+                    return (jsx(InnerItem, { "data-sticky-index": itemIndex, style: {
+                            left: 0,
+                            bottom: 0,
+                            position: 'absolute',
+                        }, children: itemContentRenderer(itemIndex, itemData, context) }, computeItemKey(itemIndex, itemData, context)));
+                })
+                : []),
+        ];
+    }
+    return (jsx(List, { ...ListProps, ...rest, actions: listActions, style: {
+            ...ListProps?.style,
+            ...style,
+            // optimize list scrolling
+            ...(isScrolling ? { pointerEvents: 'none' } : undefined),
+            // for prop `keepInvisibleItems`
+            position: 'relative',
+        }, preventContainerScroll: false, ref: handleListRef, searchAndFocusItemHandler: searchAndFocusItemHandler, children: children }));
+});
+const Scroller = forwardRef((props, ref) => {
+    const { children, context, ...rest } = props;
+    const handleRef = useForkRef(ref, context?.scrollerRef);
+    return (jsx("div", { ...rest, ref: handleRef, tabIndex: undefined, children: children }));
+});
+const InnerItem = (props) => {
+    const { children, ...rest } = props;
+    return (jsx(VirtualizedItemPropsContext.Provider, { value: rest, children: children }));
+};
+const Item = InnerItem;
+const VirtuosoComponents = { Item, Scroller, List: VirtuosoList };
+
+const VirtualizedList = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'VirtualizedList' });
+    const { children, totalCount, data, isScrolling: handleScroll, rangeChanged: handleRangeChanged, virtuosoActions, actions, ListProps, isItemDisabled, infinite = false, isReady = true, context, components, keepInvisibleItems, computeItemKey, firstFocusIndex = 0, ...rest } = props;
+    const listRangeRef = useRef({ startIndex: -1, endIndex: -1 });
+    const [isScrolling, setIsScrolling] = useState(false);
+    const listRef = useRef(null);
+    const virtuosoRef = useRef(null);
+    const handleVirtuosoRef = useForkRef(virtuosoRef, virtuosoActions);
+    const initialFocusItemByIndexPromiseRef = useRef(null);
+    const itemRenderedPromiseRef = useRef(null);
+    const isItemRendered = (index) => {
+        const { startIndex, endIndex } = listRangeRef.current;
+        return index <= endIndex && index >= startIndex;
+    };
+    const focusItemByIndex = (index) => {
+        /**
+         * If the component isn't ready, we need to defer the focus action until the component is ready.
+         * This is necessary if a parent component is waiting for some height calculation of the list to
+         * be performed before it actually renders the list. If we didn't do this the component would not
+         * know where to scroll to/would scroll to an incorrect position as it has not yet fully rendered.
+         */
+        if (!isReady) {
+            new Promise((resolve) => {
+                initialFocusItemByIndexPromiseRef.current = resolve;
+            }).then(() => {
+                // Wrap in rAF to ensure height has truly settled before focusing
+                requestAnimationFrame(() => focusByIndexAction(index));
+            });
+        }
+        else {
+            const focusTarget = () => {
+                const targetItem = listRef.current?.querySelector(`[data-item-index="${index}"]`);
+                if (process.env.NODE_ENV !== 'production' && !targetItem) {
+                    logInDev({
+                        scope: 'VirtualizedList',
+                        level: 'warn',
+                        message: `Can't find the target item with index \`${index}\`. Please ensure \`getSelectedIndex\` can find the index in your data array.`,
+                    });
+                }
+                targetItem?.focus();
+            };
+            if (!isItemRendered(index)) {
+                new Promise((resolve) => {
+                    itemRenderedPromiseRef.current = { resolve, itemIndex: index };
+                }).then(() => {
+                    focusTarget();
+                });
+                virtuosoRef.current?.scrollToIndex({ index, align: 'center' });
+            }
+            else {
+                focusTarget();
+            }
+        }
+    };
+    const isDisabled = (index) => {
+        if (!isItemDisabled)
+            return false;
+        return isItemDisabled(index);
+    };
+    const searchAndFocusItemHandler = (searchElementOption) => {
+        const firstItemIndex = 0;
+        const lastItemIndex = (() => {
+            if (data) {
+                return data.length - 1;
+            }
+            return totalCount ? totalCount - 1 : -1;
+        })();
+        let direction;
+        let startIndex;
+        if (typeof searchElementOption === 'string') {
+            if (searchElementOption === 'first') {
+                startIndex = firstFocusIndex;
+                direction = 'down';
+            }
+            else {
+                startIndex = lastItemIndex;
+                direction = 'up';
+            }
+            if (!isDisabled(startIndex)) {
+                focusItemByIndex(startIndex);
+                return { focused: true };
+            }
+        }
+        else {
+            startIndex = Number(searchElementOption.baseElement.dataset['itemIndex']);
+            direction = searchElementOption.direction;
+        }
+        let pointer = startIndex;
+        let isAfterBaseElement = true;
+        if (direction === 'up') {
+            do {
+                if (pointer - 1 < firstItemIndex) {
+                    // disabled focus loop when infinite is true
+                    if (infinite) {
+                        pointer = startIndex;
+                    }
+                    else {
+                        pointer = lastItemIndex;
+                    }
+                    isAfterBaseElement = false;
+                }
+                else {
+                    pointer--;
+                }
+                if (!isDisabled(pointer)) {
+                    break;
+                }
+            } while (pointer !== startIndex);
+        }
+        else {
+            do {
+                if (pointer + 1 > lastItemIndex) {
+                    // disabled focus loop when infinite is true
+                    if (infinite) {
+                        pointer = startIndex;
+                    }
+                    else {
+                        pointer = firstItemIndex;
+                    }
+                    isAfterBaseElement = false;
+                }
+                else {
+                    pointer++;
+                }
+                if (!isDisabled(pointer)) {
+                    break;
+                }
+            } while (pointer !== startIndex);
+        }
+        if (isDisabled(pointer)) {
+            return { focused: false };
+        }
+        focusItemByIndex(pointer);
+        return typeof searchElementOption === 'string'
+            ? { focused: true }
+            : { focused: true, isAfterBaseElement };
+    };
+    const listActions = useRef(null);
+    const focusByIndexAction = useEventCallback((i) => {
+        if (isDisabled(i)) {
+            listActions.current?.focus();
+        }
+        else {
+            focusItemByIndex(i);
+        }
+    });
+    useImperativeHandle(actions, () => ({
+        focus: () => {
+            listActions.current?.focus();
+        },
+        focusByIndex: focusByIndexAction,
+    }), [focusByIndexAction]);
+    useEffect(() => {
+        // Execute the initial focus item by index promise when the list is ready
+        if (isReady) {
+            initialFocusItemByIndexPromiseRef.current?.();
+        }
+    }, [isReady]);
+    const virtuosoContext = {
+        listRef,
+        scrollerRef: ref,
+        isScrolling,
+        searchAndFocusItemHandler,
+        listActions,
+        ListProps,
+        data,
+        keepInvisibleItems,
+        itemContentRenderer: children,
+        computeItemKey: computeItemKey,
+    };
+    const { externalWindow } = useWindowContext();
+    /**
+     * The 'externalWindow' prop exists only in the forked version of Virtuoso.
+     *
+     * Passing 'externalWindow' to the original Virtuoso component will result in a React error.
+     *
+     * If 'externalWindow' is present in the context, it indicates that the user is using the forked version.
+     *
+     * Therefore, we only pass 'externalWindow' to Virtuoso when it exists and is not the same as the global window, ensuring compatibility.
+     */
+    const externalProps = externalWindow &&
+        // window is not the same as the global window, we need to pass the externalWindow to Virtuoso for fork virtuoso
+        externalWindow !== (window || globalThis.window)
+        ? {
+            externalWindow,
+        }
+        : undefined;
+    return (jsx(Virtuoso, { className: "sui-virtualized-list", ...externalProps, ref: handleVirtuosoRef, 
+        // pre-render, make scroll smooth when move focus
+        increaseViewportBy: 200, ...(computeItemKey ? { computeItemKey } : undefined), ...rest, context: { ...context, ...virtuosoContext }, components: { ...VirtuosoComponents, ...components }, totalCount: totalCount, data: data, rangeChanged: (range) => {
+            listRangeRef.current = range;
+            const itemRenderedPromise = itemRenderedPromiseRef.current;
+            if (itemRenderedPromise) {
+                const { itemIndex, resolve } = itemRenderedPromise;
+                if (isItemRendered(itemIndex)) {
+                    resolve();
+                    itemRenderedPromiseRef.current = null;
+                }
+            }
+            handleRangeChanged?.(range);
+        }, isScrolling: (isScrolling) => {
+            setIsScrolling(isScrolling);
+            handleScroll?.(isScrolling);
+        }, itemContent: children }));
+});
+VirtualizedList.displayName = 'SuiVirtualizedList';
+
+export { VirtualizedItemPropsContext, VirtualizedList, VirtuosoComponents, useVirtualizedItemPropsContext };

package/VirtualizedMenu.js

@@ -0,0 +1,28 @@
+export { a as VirtualizedMenu, V as VirtualizedMenuContext, b as VirtualizedMenuList, u as useVirtualizedMenuContext } from './chunks/VirtualizedMenu.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import 'clsx';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getGrow.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './Popper.js';
+import './chunks/PopperPaper.js';
+import './VirtualizedList.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+
+var VirtualizedMenu = {"sui-virtualized-menu-paper":"sui-virtualized-menu-paper","sui-virtualized-menu-paper-content-container":"sui-virtualized-menu-paper-content-container"};
+
+export { VirtualizedMenu as virtualizedMenuStyle };

package/VisuallyHidden.js

@@ -0,0 +1,8 @@
+export { V as VisuallyHidden } from './chunks/VisuallyHidden.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+
+var VisuallyHidden = {"sui-visually-hidden-root":"sui-visually-hidden-root"};
+
+export { VisuallyHidden as visuallyHiddenStyle };

package/chunks/AccordionContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+
+const AccordionContext = createContext({});
+const useAccordionContext = () => useContext(AccordionContext);
+
+export { AccordionContext as A, useAccordionContext as u };

package/chunks/Alert.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, isValidElement } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { Xmd, InfoMd, AlertMd, SuccessMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import clsx from 'clsx';
+import { I as Icon } from './Icon.js';
+import { I as IconButton } from './IconButtonLabel.js';
+
+const DEFAULT_ICON_MAP = {
+    info: InfoMd,
+    error: AlertMd,
+    success: SuccessMd,
+    warning: AlertMd,
+    neutral: InfoMd,
+};
+const Alert = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Alert' });
+    const { action, classes, className, component: AlertRoot = 'div', closeText = 'close', children, icon: iconProp, startSlot, onClose, severity = 'info', CloseButtonProps, ...rest } = props;
+    const cls = useClasses('alert', classes, className);
+    const renderIcon = (icon, severity) => {
+        return (jsx("div", { className: cls('icon', `${severity}-icon`), children: isValidElement(icon) ? (icon) : (jsx(Icon, { size: "medium", symbol: icon })) }));
+    };
+    let startSlotContent = null;
+    if (startSlot) {
+        startSlotContent = renderIcon(startSlot, severity);
+    }
+    else if (iconProp) {
+        const iconComponent = iconProp === true ? DEFAULT_ICON_MAP[severity] : iconProp;
+        startSlotContent = renderIcon(iconComponent, severity);
+    }
+    let closeSlot = null;
+    if (onClose) {
+        closeSlot = (jsx(IconButton, { symbol: Xmd, variant: "icon", shape: 'squircle', color: 'secondary', size: "small", background: false, title: closeText, "aria-label": closeText, onClick: onClose, ...CloseButtonProps, className: clsx(cls('close'), CloseButtonProps?.className) }));
+    }
+    let actionSlot = null;
+    if (action) {
+        actionSlot = jsx("div", { className: cls('action'), children: action });
+    }
+    return (jsxs(AlertRoot, { ...rest, ref: ref, className: cls('root', severity), children: [startSlotContent, jsxs("div", { className: cls('body'), children: [jsx("div", { className: cls('content'), role: "alert", children: children }), actionSlot] }), closeSlot] }));
+});
+const AlertTitle = ({ className, classes, ...rest }) => {
+    const cls = useClasses('alert-title', classes, className);
+    return jsx("div", { className: cls('root'), ...rest });
+};
+
+export { Alert as A, AlertTitle as a };

package/chunks/AvatarGroup.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, forwardRef, Children } from 'react';
+import { useClasses, logInDev } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const AvatarGroupContext = createContext({});
+const AvatarGroup = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'AvatarGroup' });
+    const { component: AvatarGroupRoot = 'div', classes, className, children, ...rest } = props;
+    const cls = useClasses('avatar-group', classes, className);
+    const childrenLength = Children.toArray(children).filter(Boolean).length;
+    if (process.env.NODE_ENV !== 'production' && childrenLength !== 2) {
+        logInDev({
+            scope: 'AvatarGroup',
+            message: 'AvatarGroup only accept 2 valid child components as its children',
+        });
+    }
+    return (jsx(AvatarGroupContext.Provider, { value: { size: 'small', className: cls('item') }, children: jsx(AvatarGroupRoot, { className: cls('root'), ...rest, ref: ref, children: children }) }));
+});
+AvatarGroup.displayName = 'SuiAvatarGroup';
+
+export { AvatarGroupContext as A, AvatarGroup as a };

package/chunks/Backdrop.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const Backdrop = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Backdrop' });
+    const { classes, className, children, isTransparent = false, onClick, ...rest } = props;
+    const cls = useClasses('backdrop', classes, className);
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+    };
+    return (jsx("div", { className: cls('root', { transparent: isTransparent }), "aria-hidden": true, tabIndex: -1, ...rest, ref: ref, onClick: handleClick, children: children }));
+});
+Backdrop.displayName = 'SuiBackdrop';
+
+export { Backdrop as B };

package/chunks/Badge.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import isNumber from 'lodash/isNumber';
+import kebabCase from 'lodash/kebabCase';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
+import './Icon.js';
+import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
+
+const Badge = (inProps) => {
+    const props = useThemeProps({ props: inProps, name: 'Badge' });
+    const { count, classes, showZero, className, invisible, forceOverlap, type = 'standard', max = 999, size = 'small', color = 'primary', variant = 'contained', children, anchorOrigin = 'topRight', overlap = 'rectangular', ...rest } = props;
+    const cls = useClasses('badge', classes, className);
+    const transition = useMotionSafeTransition(motionTransition['haste-01-fast']);
+    const numeric = isNumber(count);
+    const content = type === 'standard'
+        ? numeric && count > max
+            ? `${max}+`
+            : count
+        : undefined;
+    const toOrigin = useMemo(() => kebabCase(anchorOrigin), [anchorOrigin]);
+    const overlapMode = children || forceOverlap;
+    return (jsxs("span", { className: cls('root', {
+            absolute: !children && forceOverlap,
+        }), ...rest, children: [children, jsx(AnimatePresence, { initial: false, children: invisible ||
+                    (!showZero && count === 0) ||
+                    (content === undefined && type === 'standard') ? null : (jsx(motion.span, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: transition, className: cls('content', color, size, type, variant, toOrigin, `${type}-${size}`, `${type}-${color}`, `${type}-${variant}`, `${type}-${variant}-${size}`, overlapMode && overlap, overlapMode && `${overlap}-${toOrigin}`), children: content })) })] }));
+};
+Badge.displayName = 'SuiBadge';
+
+export { Badge as B };

package/chunks/BottomNavigationItem.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, forwardRef } from 'react';
+import { useClasses, combineClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { B as Badge } from './Badge.js';
+import { I as IconButton } from './IconButtonLabel.js';
+import { T as Tooltip } from './Tooltip.js';
+import { u as useTooltipForceHide } from './useTooltipForceHide.js';
+
+const BottomNavigationContext = createContext(null);
+const useBottomNavigationContext = () => useContext(BottomNavigationContext);
+
+const BottomNavigationItem = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'BottomNavigationItem' });
+    const { classes, symbol, activatedSymbol, count, value: valueProp, activated: activatedProp, expanded: expandedProp, onClick, BadgeProps = {}, TooltipProps = {}, ButtonProps = {}, label, className, } = props;
+    const cls = useClasses('bottom-navigation-item', classes, className);
+    const { value: selectedValue, expanded: isExpanded, onSelected, animationComplete, } = useBottomNavigationContext() || {};
+    // close tooltip temporarily during animation
+    const tooltipOpenProps = useTooltipForceHide(animationComplete === false);
+    const selected = selectedValue === valueProp;
+    const activated = activatedProp !== undefined ? activatedProp : selected;
+    const expanded = expandedProp !== undefined ? expandedProp : isExpanded;
+    const handleClick = (event) => {
+        if (valueProp !== undefined && !selected) {
+            onSelected?.(event, valueProp);
+        }
+        onClick?.(event);
+    };
+    let buttonClasses = { root: cls('button', { activated, expanded }) };
+    if (ButtonProps.classes) {
+        buttonClasses = combineClasses(buttonClasses, ButtonProps.classes);
+    }
+    return (jsx(Badge, { variant: "outlined", count: count, className: cls('root'), ...BadgeProps, children: jsx(Tooltip, { ...TooltipProps, title: label, PopperProps: { offset: 8 }, motionProps: null, ...tooltipOpenProps, children: jsx(IconButton, { shape: 'squircle', variant: "contained", size: "small", color: 'secondary', symbol: activated && activatedSymbol ? activatedSymbol : symbol, onClick: handleClick, "aria-label": label, ...ButtonProps, classes: buttonClasses, ref: ref }) }) }));
+});
+BottomNavigationItem.displayName = 'SuiBottomNavigationItem';
+
+export { BottomNavigationItem as B, BottomNavigationContext as a, useBottomNavigationContext as u };

package/chunks/Button.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { forwardRef } from 'react';
+import clsx from 'clsx';
+import { useButton } from '@mui/base';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { C as CircularProgressIndicator } from './CircularProgressIndicator.js';
+import { I as Icon } from './Icon.js';
+import './Tooltip.js';
+import { w as withTooltip } from './withTooltip.js';
+
+const buttonIconSizeMap = {
+    xlarge: 'large',
+    large: 'medium',
+    medium: 'small',
+    small: 'small',
+    xsmall: 'xsmall',
+};
+const CircularProgressIndicatorSizeMap = {
+    xlarge: 'medium',
+    large: 'medium',
+    medium: 'small',
+    small: 'small',
+    xsmall: 'xsmall',
+};
+const CircularProgressIndicatorColorMap = {
+    primary: 'primary',
+    secondary: 'primary',
+    danger: 'danger',
+    warning: 'warning',
+    success: 'success',
+    neutral: 'primary',
+};
+const START_SLOT = 'start-slot';
+const END_SLOT = 'end-slot';
+const Button = withTooltip(forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Button' });
+    const { component = 'button', children, size = 'medium', variant = 'contained', color = 'primary', background = true, fullWidth = false, loading = false, title: titleProp, CircularProgressIndicatorProps, startIcon, endIcon, classes, className, disabled: disabledProp, focusableWhenDisabled, ...rest } = props;
+    const cls = useClasses('button', classes, className);
+    const disableInteractions = disabledProp || loading;
+    const { getRootProps, focusVisible } = useButton({
+        ...props,
+        focusableWhenDisabled,
+        disabled: disableInteractions,
+        rootRef: ref,
+    });
+    const ButtonRoot = component;
+    const isTextContent = typeof children === 'string';
+    const title = (() => {
+        // * if title is not provided and children is string, use children as title
+        if (titleProp === undefined && isTextContent) {
+            return children;
+        }
+        return titleProp;
+    })();
+    let startSlot = null;
+    let endSlot = null;
+    const startSlotClassName = cls(START_SLOT, `${size}-start-slot`, `${variant}-${size}-start-slot`);
+    const endSlotClassName = cls(END_SLOT, `${size}-end-slot`, `${variant}-${size}-end-slot`);
+    if (loading) {
+        startSlot = (jsx(CircularProgressIndicator, { className: clsx(startSlotClassName, cls('loading-indicator')), variant: "indeterminate", size: CircularProgressIndicatorSizeMap[size], color: CircularProgressIndicatorColorMap[color], ...CircularProgressIndicatorProps }));
+    }
+    else if (startIcon) {
+        if (React.isValidElement(startIcon)) {
+            startSlot = React.cloneElement(startIcon, {
+                className: clsx(startSlotClassName, startIcon.props.className),
+            });
+        }
+        else {
+            startSlot = (jsx(Icon, { className: startSlotClassName, symbol: startIcon, size: buttonIconSizeMap[size] }));
+        }
+    }
+    if (React.isValidElement(endIcon)) {
+        endSlot = React.cloneElement(endIcon, {
+            className: clsx(endSlotClassName, endIcon.props.className),
+        });
+    }
+    else if (endIcon) {
+        endSlot = (jsx(Icon, { className: endSlotClassName, symbol: endIcon, size: buttonIconSizeMap[size] }));
+    }
+    return (jsxs(ButtonRoot, { className: cls('root', variant, color, size, `${variant}-${color}`, `${variant}-${size}`, !background && 'hide-background', !background && `${variant}-hide-background`, startSlot && 'has-start-slot', endSlot && 'has-end-slot', fullWidth && 'full-width', {
+            disabled: disabledProp,
+            focusVisible,
+            loading,
+        }), title: title, ...rest, ...getRootProps(), "aria-disabled": disableInteractions, children: [startSlot, isTextContent ? (jsx("span", { className: cls('content'), children: children })) : (children), endSlot] }));
+}));
+Button.displayName = 'SuiButton';
+
+export { Button as B, buttonIconSizeMap as b };