@ringcentral/spring-ui 1.7.0

package/Dialog.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import kebabCase from 'lodash/kebabCase';
+import { useClasses, useEventCallback } from '@ringcentral/spring-base';
+import { Xsm } from '@ringcentral/spring-icon';
+import { useThemeProps, motionTransition } from '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import { u as usePrefersReducedMotion } from './chunks/usePrefersReducedMotion.js';
+import { g as getSlideIn } from './chunks/getSlideIn.js';
+import { I as IconButton } from './chunks/IconButtonLabel.js';
+import { M as Modal } from './chunks/Modal.js';
+import '@mui/base';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'clsx';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/PopperPaper.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+
+var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-small":"sui-dialog-small","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-full-screen":"sui-dialog-full-screen"};
+
+const Dialog = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Dialog' });
+    const { bodyProps, classes, className, children, size = 'medium', placement = 'right', open, onClose, ...rest } = props;
+    const cls = useClasses('dialog', classes, className);
+    const toSize = useMemo(() => kebabCase(size), [size]);
+    const isFullHeight = size === 'fullHeight';
+    const slideInProps = getSlideIn({
+        toggle: open,
+        from: placement,
+        prefersReducedMotion: usePrefersReducedMotion(),
+        toggleOnTransition: motionTransition['haste-01-fast'],
+        toggleOffTransition: motionTransition['neutral-01-fast'],
+    });
+    const handleCloseButtonClick = useEventCallback((e) => {
+        onClose?.(e, 'closeButtonClick');
+    });
+    return (jsx(Modal, { open: open, className: cls('root'), ...rest, onClose: onClose, children: jsxs(motion.div, { role: "dialog", "aria-modal": true, ...(isFullHeight && slideInProps), ...bodyProps, ref: ref, tabIndex: -1, className: cls('body', toSize, isFullHeight && placement), children: [children, isFullHeight && (jsx(IconButton, { className: cls('close-button', `${placement}-close-button`), size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", onClick: handleCloseButtonClick }))] }) }));
+});
+Dialog.displayName = 'SuiDialog';
+const DialogTitle = forwardRef(({ className, ...rest }, ref) => {
+    const cls = useClasses('dialog-title', undefined, className);
+    return jsx("div", { ref: ref, className: cls('root'), ...rest });
+});
+DialogTitle.displayName = 'SuiDialogTitle';
+const DialogContent = forwardRef(({ className, ...rest }, ref) => {
+    const cls = useClasses('dialog-content', undefined, className);
+    return jsx("div", { ref: ref, className: cls('root'), ...rest });
+});
+DialogContent.displayName = 'SuiDialogContent';
+const DialogActions = forwardRef(({ className, ...rest }, ref) => {
+    const cls = useClasses('dialog-actions', undefined, className);
+    return jsx("div", { ref: ref, className: cls('root'), ...rest });
+});
+DialogActions.displayName = 'SuiDialogActions';
+
+export { Dialog, DialogActions, DialogContent, DialogTitle, Dialog$1 as dialogStyle };

package/Divider.js

@@ -0,0 +1,9 @@
+export { D as Divider } from './chunks/Divider.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var Divider = {"sui-divider-root":"sui-divider-root","sui-divider-horizontal":"sui-divider-horizontal","sui-divider-horizontal-has-title":"sui-divider-horizontal-has-title","sui-divider-vertical":"sui-divider-vertical","sui-divider-flex-item":"sui-divider-flex-item","sui-divider-full":"sui-divider-full","sui-divider-middle-horizontal":"sui-divider-middle-horizontal","sui-divider-middle-vertical":"sui-divider-middle-vertical"};
+
+export { Divider as dividerStyle };

package/DragHandle.js

@@ -0,0 +1,8 @@
+export { D as DragHandle } from './chunks/DragHandle.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+
+var DragHandle = {"sui-drag-handle-root":"sui-drag-handle-root","sui-drag-handle-top":"sui-drag-handle-top","sui-drag-handle-bottom":"sui-drag-handle-bottom","sui-drag-handle-bar":"sui-drag-handle-bar"};
+
+export { DragHandle as dragHandleStyle };

package/Drawer.js

@@ -0,0 +1,19 @@
+export { D as Drawer } from './chunks/Drawer.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'framer-motion';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import 'clsx';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getSlideIn.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+
+var Drawer = {"sui-drawer-root":"sui-drawer-root","sui-drawer-anchor-left":"sui-drawer-anchor-left","sui-drawer-anchor-right":"sui-drawer-anchor-right","sui-drawer-anchor-top":"sui-drawer-anchor-top","sui-drawer-anchor-bottom":"sui-drawer-anchor-bottom","sui-drawer-persistent-left":"sui-drawer-persistent-left","sui-drawer-persistent-right":"sui-drawer-persistent-right","sui-drawer-persistent-top":"sui-drawer-persistent-top","sui-drawer-persistent-bottom":"sui-drawer-persistent-bottom","sui-drawer-body":"sui-drawer-body","sui-drawer-body-left":"sui-drawer-body-left","sui-drawer-body-right":"sui-drawer-body-right","sui-drawer-body-top":"sui-drawer-body-top","sui-drawer-body-bottom":"sui-drawer-body-bottom","sui-drawer-content":"sui-drawer-content","sui-drawer-non-blocking":"sui-drawer-non-blocking","sui-drawer-header":"sui-drawer-header"};
+
+export { Drawer as drawerStyles };

package/Dropdown.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import { useControlled, useClasses, useEventCallback, combineProps, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { E as ExpandCollapseCaret } from './chunks/ExpandCollapseCaret.js';
+import 'framer-motion';
+import './chunks/Icon.js';
+import { M as Menu } from './chunks/Menu.js';
+import { c as useMenuItemSelect, a as MenuItemSelectContext } from './chunks/useMenuItemSelect.js';
+import 'tabbable';
+import './chunks/useListNavigation.js';
+import './VirtualizedList.js';
+import { M as MenuList } from './chunks/MenuList.js';
+import { S as Squircle } from './chunks/Squircle.js';
+import { a as VirtualizedMenu } from './chunks/VirtualizedMenu.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/useNestedParentMenu.js';
+import './chunks/Popover.js';
+import '@floating-ui/react-dom';
+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 '@ringcentral/spring-icon';
+import './chunks/useNestedMenuItem.js';
+import './ListNavigation.js';
+import 'react-virtuoso';
+import './chunks/List.js';
+import 'clsx';
+
+var Dropdown$1 = {"sui-dropdown-value":"sui-dropdown-value","sui-dropdown-chevron":"sui-dropdown-chevron","sui-dropdown-button":"sui-dropdown-button","sui-focus-visible":"sui-focus-visible","sui-dropdown-label":"sui-dropdown-label","sui-dropdown-colon":"sui-dropdown-colon","sui-dropdown-activated":"sui-dropdown-activated","sui-dropdown-root":"sui-dropdown-root","sui-disabled":"sui-disabled"};
+
+const Dropdown = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Dropdown' });
+    const { classes, className, children, defaultOpen, open: openProp, onOpenChange, disabled, virtualize = true, MenuProps, rootProps, buttonProps: buttonPropsProp = {}, value: valueProp, defaultValue = null, onChange: onChangeProp, renderValue = String, placeholder, label, buttonRef, getSelectedIndex = (value) => {
+        return data.findIndex((v) => v === value);
+    }, data, } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [open, setOpen] = useControlled({
+        controlled: openProp,
+        default: defaultOpen,
+        name: 'SuiSelect',
+        state: 'open',
+    });
+    const chevronRef = useRef(null);
+    useEffect(() => {
+        setAnchorEl(chevronRef.current);
+    }, []);
+    const cls = useClasses('dropdown', classes, className);
+    const handleOpen = useEventCallback((isOpen) => {
+        // prevent trigger onOpenChange when open state is not change
+        if (open !== isOpen) {
+            // for uncontrolled mode
+            setOpen(isOpen);
+            // for controlled mode
+            onOpenChange?.(isOpen);
+        }
+    });
+    const handleClose = useEventCallback(() => {
+        handleOpen(false);
+    });
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'SuiDropdown',
+        state: 'value',
+    });
+    const handleMenuListChange = useEventCallback((newValue) => {
+        // for uncontrolled mode
+        setValue(newValue);
+        // for controlled mode
+        onChangeProp?.(newValue);
+        handleOpen(false);
+    });
+    const { contextValue: virtualizedMenuContextValue } = useMenuItemSelect({
+        value,
+        onChange: handleMenuListChange,
+        onClose: handleClose,
+    });
+    const buttonProps = combineProps({
+        onClick: () => {
+            if (!open)
+                handleOpen(true);
+        },
+        onKeyDown: (e) => {
+            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+                // prevent scroll
+                e.preventDefault();
+                handleOpen(true);
+            }
+        },
+    }, buttonPropsProp);
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(buttonProps);
+    const handleButtonRef = useForkRef(buttonRef, focusVisibleRef);
+    useEffect(() => {
+        // close menu when disabled
+        if (disabled) {
+            handleOpen(false);
+        }
+    }, [disabled, handleOpen]);
+    const baseMenuProps = {
+        placement: 'top',
+        open,
+        anchorEl,
+        onClose: handleClose,
+    };
+    let menu = null;
+    if (!virtualize) {
+        menu = (jsx(Menu, { ...baseMenuProps, ...MenuProps, children: jsx(MenuList, { value: value, onChange: handleMenuListChange, nowrap: false, widget: "menu", children: children }) }));
+    }
+    else {
+        menu = (jsx(MenuItemSelectContext.Provider, { value: virtualizedMenuContextValue, children: jsx(VirtualizedMenu, { ...baseMenuProps, ...MenuProps, initialFocus: () => {
+                    if (value !== null)
+                        return getSelectedIndex(value);
+                    return true;
+                }, data: data, children: children }) }));
+    }
+    return (jsxs(Fragment, { children: [jsxs("div", { "aria-disabled": disabled, ...rootProps, className: cls('root', {
+                    disabled,
+                }), ref: ref, children: [label && (jsxs(Fragment, { children: [jsx("span", { className: cls('label'), children: label }), jsx("span", { className: cls('colon'), children: ":" })] })), jsxs("button", { className: cls('button', {
+                            activated: open,
+                            focusVisible,
+                        }), ...buttonProps, ...focusVisibleHandlers, ref: handleButtonRef, children: [jsx("span", { className: cls('value'), children: value === null ? placeholder : renderValue(value) }), jsx(Squircle, { className: cls('chevron'), interactive: false, ref: chevronRef, children: jsx(ExpandCollapseCaret, { size: 'small', expanded: open }) })] })] }), anchorEl && menu] }));
+});
+Dropdown.displayName = 'SuiDropdown';
+
+export { Dropdown, Dropdown$1 as dropdownStyle };

package/EmptyState.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, getTitle } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as Icon } from './chunks/Icon.js';
+
+var EmptyState$1 = {"sui-empty-state-root":"sui-empty-state-root","sui-empty-state-icon":"sui-empty-state-icon","sui-empty-state-text-container":"sui-empty-state-text-container","sui-empty-state-title":"sui-empty-state-title","sui-empty-state-description":"sui-empty-state-description","sui-empty-state-actions":"sui-empty-state-actions"};
+
+const EmptyState = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'EmptyState' });
+    const { classes, className, title, description, icon, actions, ...rest } = props;
+    const cls = useClasses('empty-state', classes, className);
+    return (jsxs("div", { ...rest, className: cls('root'), children: [icon && (jsx("div", { className: cls('icon'), children: jsx(Icon, { size: "xxxlarge", symbol: icon }) })), (title || description) && (jsxs("div", { className: cls('text-container'), children: [title && (jsx("span", { className: cls('title'), title: getTitle(title), children: title })), description && (jsx("span", { className: cls('description'), title: getTitle(description), children: description }))] })), actions && actions.length > 0 && (jsx("div", { className: cls('actions'), children: actions }))] }));
+});
+EmptyState.displayName = 'SuiEmptyState';
+
+export { EmptyState, EmptyState$1 as emptyStateStyle };

package/FabButton.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { useButton } from '@mui/base';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as Icon } from './chunks/Icon.js';
+import { S as Squircle } from './chunks/Squircle.js';
+
+var FabButton$1 = {"sui-fab-button-root":"sui-fab-button-root","sui-fab-button-large":"sui-fab-button-large","sui-fab-button-small":"sui-fab-button-small","sui-fab-button-activated":"sui-fab-button-activated","sui-active":"sui-active"};
+
+const IconSizeMap = {
+    large: 'medium',
+    small: 'small',
+};
+const FabButton = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'FabButton' });
+    const { classes, className, symbol, size = 'large', onClick, ...rest } = props;
+    const [activated, setActivated] = useState(false);
+    const cls = useClasses('fab-button', classes, className);
+    const clickHandler = (e) => {
+        setActivated((pre) => !pre);
+        onClick && onClick(e);
+    };
+    const { getRootProps, focusVisible } = useButton({
+        ...props,
+        rootRef: ref,
+    });
+    return (jsx(Squircle, { component: "button", className: cls('root', size, { activated }), focusVisible: focusVisible, ...rest, ...getRootProps(), onClick: clickHandler, children: jsx(Icon, { size: IconSizeMap[size], symbol: symbol }) }));
+});
+FabButton.displayName = 'SuiFabButton';
+
+export { FabButton, FabButton$1 as fabButtonStyle };

package/FocusTrap.js

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { FocusTrap as FocusTrap$1 } from '@mui/base';
+import { useImperativeHandle } from 'react';
+import { u as useFocusTrapStack } from './chunks/useFocusTrapStack.js';
+import '@ringcentral/spring-base';
+
+/**
+ * Utility component that locks focus inside the component.
+ *
+ * @deprecated This component is deprecated. Use `useFocusTrapStack` hook directly with MUI's FocusTrap instead.
+ *
+ * @example
+ * ```tsx
+ * import { FocusTrap } from '@mui/base';
+ * import { useFocusTrapStack } from '@ringcentral/spring-ui';
+ *
+ * function MyModal({ open, children }) {
+ *   // Call useFocusTrapStack where the `open` prop changes first (typically in Modal/Dialog)
+ *   // This prevents race conditions between stack registration and autofocus behavior
+ *   const { isEnabled } = useFocusTrapStack({ open });
+ *
+ *   return open ? (
+ *     <Portal>
+ *       <div className="modal-backdrop">
+ *         <FocusTrap
+ *           open={open}
+ *           isEnabled={isEnabled}
+ *         >
+ *           <div className="modal-content" tabIndex={-1}>
+ *             {children}
+ *           </div>
+ *         </FocusTrap>
+ *       </div>
+ *     </Portal>
+ *   ) : null;
+ * }
+ * ```
+ */
+const FocusTrap = (props) => {
+    const { open, children, action, ...rest } = props;
+    const { isEnabled } = useFocusTrapStack({ open });
+    useImperativeHandle(action, () => ({
+        isEnabled,
+    }), [isEnabled]);
+    return (jsx(FocusTrap$1, { ...rest, open: open, isEnabled: isEnabled, children: children }));
+};
+
+export { FocusTrap, useFocusTrapStack };

package/FormField.js

@@ -0,0 +1,10 @@
+export { F as FormField, u as useHelperTextId } from './chunks/useHelperTextId.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var FormField = {"sui-form-field-label":"sui-form-field-label","sui-form-field-helper-text":"sui-form-field-helper-text","sui-form-field-content":"sui-form-field-content","sui-form-field-container":"sui-form-field-container","sui-form-field-focus-effect":"sui-form-field-focus-effect","sui-form-field-outlined":"sui-form-field-outlined","sui-form-field-contained":"sui-form-field-contained","sui-form-field-outlined-label":"sui-form-field-outlined-label","sui-form-field-contained-label":"sui-form-field-contained-label","sui-form-field-outlined-xlarge":"sui-form-field-outlined-xlarge","sui-form-field-contained-xlarge":"sui-form-field-contained-xlarge","sui-form-field-outlined-large":"sui-form-field-outlined-large","sui-form-field-contained-large":"sui-form-field-contained-large","sui-form-field-outlined-medium":"sui-form-field-outlined-medium","sui-form-field-contained-medium":"sui-form-field-contained-medium","sui-form-field-outlined-content":"sui-form-field-outlined-content","sui-form-field-contained-content":"sui-form-field-contained-content","sui-disabled":"sui-disabled","sui-focused":"sui-focused","sui-form-field-standard-content":"sui-form-field-standard-content","sui-form-field-standard-focus-effect":"sui-form-field-standard-focus-effect","sui-form-field-standard":"sui-form-field-standard","sui-form-field-quiet-content":"sui-form-field-quiet-content","sui-form-field-xlarge-content":"sui-form-field-xlarge-content","sui-form-field-large-content":"sui-form-field-large-content","sui-form-field-medium-content":"sui-form-field-medium-content","sui-form-field-error-helper-text":"sui-form-field-error-helper-text","sui-form-field-error-label":"sui-form-field-error-label","sui-form-field-error-focus-effect":"sui-form-field-error-focus-effect","sui-form-field-error-content":"sui-form-field-error-content","sui-form-field-error-standard-content":"sui-form-field-error-standard-content","sui-form-field-error-contained-content":"sui-form-field-error-contained-content","sui-form-field":"sui-form-field"};
+
+export { FormField as formFieldStyle };

package/FormLabel.js

@@ -0,0 +1,9 @@
+export { F as FormLabel, a as FormLabelContext, u as useFormLabel } from './chunks/FormLabel.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var FormLabel = {"sui-form-label-root":"sui-form-label-root","sui-form-label-label":"sui-form-label-label","sui-disabled":"sui-disabled","sui-form-label-end-label":"sui-form-label-end-label","sui-form-label-start":"sui-form-label-start","sui-form-label-start-label":"sui-form-label-start-label","sui-form-label-full-width":"sui-form-label-full-width"};
+
+export { FormLabel as formLabelStyle };

package/Icon.js

@@ -0,0 +1,9 @@
+export { I as Icon } from './chunks/Icon.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+
+var Icon = {"sui-icon-root":"sui-icon-root","sui-icon-svg":"sui-icon-svg","sui-icon-xsmall":"sui-icon-xsmall","sui-icon-small":"sui-icon-small","sui-icon-medium":"sui-icon-medium","sui-icon-large":"sui-icon-large","sui-icon-xlarge":"sui-icon-xlarge","sui-icon-xxlarge":"sui-icon-xxlarge","sui-icon-xxxlarge":"sui-icon-xxxlarge"};
+
+export { Icon as iconStyle };

package/IconButton.js

@@ -0,0 +1,26 @@
+export { I as IconButton, a as IconButtonLabel } from './chunks/IconButtonLabel.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/base';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/Icon.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import 'framer-motion';
+import 'clsx';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var IconButton = {"sui-icon-button-root":"sui-icon-button-root","sui-disabled":"sui-disabled","sui-icon-button-label":"sui-icon-button-label","sui-icon-button-circular":"sui-icon-button-circular","focus-visible":"focus-visible","sui-focus-visible":"sui-focus-visible","sui-icon-button-rectangular":"sui-icon-button-rectangular","sui-icon-button-contained":"sui-icon-button-contained","sui-active":"sui-active","sui-icon-button-contained-squircle":"sui-icon-button-contained-squircle","sui-icon-button-contained-primary":"sui-icon-button-contained-primary","sui-icon-button-contained-success":"sui-icon-button-contained-success","sui-icon-button-contained-danger":"sui-icon-button-contained-danger","sui-icon-button-contained-warning":"sui-icon-button-contained-warning","sui-icon-button-contained-secondary":"sui-icon-button-contained-secondary","sui-squircle":"sui-squircle","sui-icon-button-contained-neutral":"sui-icon-button-contained-neutral","sui-icon-button-contained-hide-background":"sui-icon-button-contained-hide-background","sui-icon-button-outlined":"sui-icon-button-outlined","sui-icon-button-outlined-primary":"sui-icon-button-outlined-primary","sui-icon-button-outlined-success":"sui-icon-button-outlined-success","sui-icon-button-outlined-danger":"sui-icon-button-outlined-danger","sui-icon-button-outlined-warning":"sui-icon-button-outlined-warning","sui-icon-button-outlined-secondary":"sui-icon-button-outlined-secondary","sui-icon-button-outlined-neutral":"sui-icon-button-outlined-neutral","sui-icon-button-outlined-squircle":"sui-icon-button-outlined-squircle","sui-icon-button-outlined-hide-background":"sui-icon-button-outlined-hide-background","sui-icon-button-icon":"sui-icon-button-icon","sui-icon-button-icon-primary":"sui-icon-button-icon-primary","sui-icon-button-icon-success":"sui-icon-button-icon-success","sui-icon-button-icon-danger":"sui-icon-button-icon-danger","sui-icon-button-icon-warning":"sui-icon-button-icon-warning","sui-icon-button-icon-secondary":"sui-icon-button-icon-secondary","sui-icon-button-icon-neutral":"sui-icon-button-icon-neutral","sui-icon-button-inverted":"sui-icon-button-inverted","sui-icon-button-inverted-primary":"sui-icon-button-inverted-primary","sui-icon-button-inverted-success":"sui-icon-button-inverted-success","sui-icon-button-inverted-danger":"sui-icon-button-inverted-danger","sui-icon-button-inverted-warning":"sui-icon-button-inverted-warning","sui-icon-button-inverted-secondary":"sui-icon-button-inverted-secondary","sui-icon-button-inverted-neutral":"sui-icon-button-inverted-neutral","sui-icon-button-inverted-squircle":"sui-icon-button-inverted-squircle","sui-icon-button-inverted-hide-background":"sui-icon-button-inverted-hide-background","sui-icon-button-squircle":"sui-icon-button-squircle","sui-icon-button-squircle-hide-background":"sui-icon-button-squircle-hide-background","sui-icon-button-squircle-label":"sui-icon-button-squircle-label","sui-icon-button-xsmall":"sui-icon-button-xsmall","sui-icon-button-xsmall-circular":"sui-icon-button-xsmall-circular","sui-icon-button-xsmall-inverted":"sui-icon-button-xsmall-inverted","sui-icon-button-xsmall-squircle":"sui-icon-button-xsmall-squircle","sui-icon-button-xsmall-rectangular":"sui-icon-button-xsmall-rectangular","sui-icon-button-small":"sui-icon-button-small","sui-icon-button-small-circular":"sui-icon-button-small-circular","sui-icon-button-small-inverted":"sui-icon-button-small-inverted","sui-icon-button-small-squircle":"sui-icon-button-small-squircle","sui-icon-button-small-rectangular":"sui-icon-button-small-rectangular","sui-icon-button-medium":"sui-icon-button-medium","sui-icon-button-medium-circular":"sui-icon-button-medium-circular","sui-icon-button-medium-inverted":"sui-icon-button-medium-inverted","sui-icon-button-medium-squircle":"sui-icon-button-medium-squircle","sui-icon-button-medium-rectangular":"sui-icon-button-medium-rectangular","sui-icon-button-large":"sui-icon-button-large","sui-icon-button-large-circular":"sui-icon-button-large-circular","sui-icon-button-large-inverted":"sui-icon-button-large-inverted","sui-icon-button-large-squircle":"sui-icon-button-large-squircle","sui-icon-button-large-rectangular":"sui-icon-button-large-rectangular","sui-icon-button-xlarge":"sui-icon-button-xlarge","sui-icon-button-xlarge-circular":"sui-icon-button-xlarge-circular","sui-icon-button-xlarge-inverted":"sui-icon-button-xlarge-inverted","sui-icon-button-xlarge-squircle":"sui-icon-button-xlarge-squircle","sui-icon-button-xlarge-rectangular":"sui-icon-button-xlarge-rectangular","sui-icon-button-xxlarge":"sui-icon-button-xxlarge","sui-icon-button-xxlarge-circular":"sui-icon-button-xxlarge-circular","sui-icon-button-xxlarge-inverted":"sui-icon-button-xxlarge-inverted","sui-icon-button-xxlarge-squircle":"sui-icon-button-xxlarge-squircle","sui-icon-button-xxlarge-label":"sui-icon-button-xxlarge-label","sui-icon-button-xxlarge-rectangular":"sui-icon-button-xxlarge-rectangular","sui-icon-button-xxlarge-rectangular-label":"sui-icon-button-xxlarge-rectangular-label","sui-icon-button-xxxlarge":"sui-icon-button-xxxlarge","sui-icon-button-xxxlarge-label":"sui-icon-button-xxxlarge-label","sui-icon-button-xxxlarge-circular":"sui-icon-button-xxxlarge-circular","sui-icon-button-xxxlarge-inverted":"sui-icon-button-xxxlarge-inverted","sui-icon-button-xxxlarge-squircle":"sui-icon-button-xxxlarge-squircle","sui-icon-button-xxxlarge-rectangular":"sui-icon-button-xxxlarge-rectangular","sui-icon-button-xxxlarge-rectangular-label":"sui-icon-button-xxxlarge-rectangular-label"};
+
+var IconButtonLabel = {"sui-icon-button-outer-label-root":"sui-icon-button-outer-label-root","sui-icon-button-outer-label-text":"sui-icon-button-outer-label-text"};
+
+export { IconButtonLabel as iconButtonLabelStyle, IconButton as iconButtonStyle };

package/IconButtonGroup.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';
+
+var IconButtonGroup$1 = {"sui-icon-button-group-root":"sui-icon-button-group-root","sui-icon-button-group-border":"sui-icon-button-group-border","sui-icon-button-group-horizontal":"sui-icon-button-group-horizontal","sui-icon-button-group-vertical":"sui-icon-button-group-vertical"};
+
+const IconButtonGroup = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'IconButtonGroup' });
+    const { component: ButtonGroupRoot = 'div', classes, className, children, orientation = 'horizontal', border = false, ...rest } = props;
+    const cls = useClasses('icon-button-group', classes, className);
+    return (jsx(ButtonGroupRoot, { role: "group", ...rest, ref: ref, className: cls('root', orientation, {
+            border,
+        }), children: children }));
+});
+IconButtonGroup.displayName = 'SuiIconButtonGroup';
+
+export { IconButtonGroup, IconButtonGroup$1 as iconButtonGroupStyle };

package/InlineEditable.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { TextareaAutosize } from '@mui/base';
+import { useControlled, useClasses, usePrevious, useForkRef, useWindowContext } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { T as Tooltip } from './chunks/Tooltip.js';
+import { u as useTooltipForceHide } from './chunks/useTooltipForceHide.js';
+import 'framer-motion';
+import 'clsx';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var InlineEditable$1 = {"sui-inline-editable-root":"sui-inline-editable-root","sui-inline-editable-full-width":"sui-inline-editable-full-width","sui-inline-editable-input":"sui-inline-editable-input","sui-inline-editable-textarea":"sui-inline-editable-textarea","sui-disabled":"sui-disabled","sui-inline-editable-text":"sui-inline-editable-text","sui-inline-editable-standard":"sui-inline-editable-standard","sui-inline-editable-standard-input":"sui-inline-editable-standard-input","sui-inline-editable-standard-textarea":"sui-inline-editable-standard-textarea","sui-inline-editable-outlined":"sui-inline-editable-outlined","sui-inline-editable-outlined-input":"sui-inline-editable-outlined-input","sui-inline-editable-outlined-textarea":"sui-inline-editable-outlined-textarea"};
+
+const InlineEditable = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'InlineEditable' });
+    const { classes, className, children, variant = 'standard', multiline, value, defaultEditing, isEditing: isEditingProp, onEditStart, onEditComplete, onEditConfirm, onEditCancel, disabled, fullWidth, TooltipProps, placeholder, onFocus, onKeyDown, onBlur, rootProps, ...rest } = props;
+    const [isEditing, setEditing] = useControlled({
+        controlled: isEditingProp,
+        default: defaultEditing,
+        name: 'SuiInlineEditable',
+        state: 'isEditing',
+    });
+    const Component = multiline ? TextareaAutosize : 'input';
+    const cls = useClasses('inline-editable', classes, className);
+    const valueBeforeEditing = useRef(value);
+    const previousIsEditing = usePrevious(() => isEditing);
+    const inputRef = useRef(null);
+    const handleRef = useForkRef(inputRef, ref);
+    const handleFocus = (e) => {
+        onFocus?.(e);
+        valueBeforeEditing.current = value;
+        setEditing(true);
+        onEditStart?.();
+    };
+    const handleEditComplete = (e, reason, values) => {
+        onEditComplete?.(e, reason, values);
+        switch (reason) {
+            case 'Enter':
+            case 'Blur':
+                onEditConfirm?.(e, reason, values);
+                break;
+            case 'Escape':
+                onEditCancel?.(e, reason, values);
+                break;
+        }
+    };
+    const handleKeyDown = (e) => {
+        onKeyDown?.(e);
+        const { key, shiftKey } = e;
+        // Enter + Shift in textarea creates a new line
+        if (!isEditing || (multiline && key === 'Enter' && shiftKey)) {
+            return;
+        }
+        if (['Enter', 'Escape'].includes(key)) {
+            setEditing(false);
+            handleEditComplete(e, key, {
+                currentValue: value,
+                previousValue: valueBeforeEditing.current,
+            });
+        }
+    };
+    const handleBlur = (e) => {
+        onBlur?.(e);
+        if (!isEditing)
+            return;
+        setEditing(false);
+        handleEditComplete(e, 'Blur', {
+            currentValue: value,
+            previousValue: valueBeforeEditing.current,
+        });
+    };
+    const { document } = useWindowContext();
+    useEffect(() => {
+        if (previousIsEditing && !isEditing && inputRef.current) {
+            // * enter/esc should blur the input (tab does this automatically)
+            document?.activeElement === inputRef.current && inputRef.current.blur();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEditing, previousIsEditing]);
+    // close tooltip temporarily during editing
+    const tooltipOpenProps = useTooltipForceHide(isEditing);
+    const slot = multiline ? 'textarea' : 'input';
+    const editableContent = (jsx(Component, { className: cls(slot, `${variant}-${slot}`, { disabled }), value: value, autoComplete: "off", placeholder: placeholder, ref: handleRef, onFocus: handleFocus, onKeyDown: handleKeyDown, onBlur: handleBlur, disabled: disabled, "aria-label": TooltipProps?.['title'], ...rest, children: children }));
+    return (jsxs("div", { className: cls('root', variant, {
+            'full-width': fullWidth || multiline,
+        }), ...rootProps, children: [disabled || !TooltipProps?.title ? (editableContent) : (jsx(Tooltip, { ...TooltipProps, ...tooltipOpenProps, children: editableContent })), jsx("span", { className: cls('text'), children: value || placeholder })] }));
+});
+InlineEditable.displayName = 'SuiInlineEditable';
+
+export { InlineEditable, InlineEditable$1 as inlineEditableStyle };

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 RingCentral, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/LinearProgressIndicator.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, useId } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var LinearProgressIndicator$1 = {"sui-linear-progress-indicator-root":"sui-linear-progress-indicator-root","sui-linear-progress-indicator-determinate-track":"sui-linear-progress-indicator-determinate-track","sui-linear-progress-indicator-determinate-track-slim":"sui-linear-progress-indicator-determinate-track-slim","sui-linear-progress-indicator-determinate-bar":"sui-linear-progress-indicator-determinate-bar","sui-linear-progress-indicator-determinate-label":"sui-linear-progress-indicator-determinate-label","sui-linear-progress-indicator-determinate-details-container":"sui-linear-progress-indicator-determinate-details-container","sui-linear-progress-indicator-determinate-details-label":"sui-linear-progress-indicator-determinate-details-label"};
+
+const LinearProgressIndicator = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'LinearProgressIndicator',
+    });
+    const { classes, className, children, variant, slim = false, min = 0, max, value, label, details, showPercentage = false, progressBarProps: progressBarPropsProp, ...rest } = props;
+    const cls = useClasses('linear-progress-indicator', classes, className);
+    const labelId = useId();
+    const progressBarProps = progressBarPropsProp || {};
+    if (max === undefined || value === undefined)
+        return null;
+    const labelledBy = progressBarProps['aria-labelledby'] || labelId;
+    progressBarProps['aria-valuenow'] = value;
+    let labelNode = label;
+    if (typeof props.label === 'string') {
+        labelNode = (jsx("span", { id: labelledBy, className: cls('label', `${variant}-label`), children: props.label }));
+    }
+    let detailsNode = details;
+    if (typeof details === 'string') {
+        detailsNode = (jsx("span", { className: cls('details-label', `${variant}-details-label`), children: details }));
+    }
+    if (min !== 0)
+        progressBarProps['aria-valuemin'] = min;
+    if (max !== 100)
+        progressBarProps['aria-valuemax'] = max;
+    if (labelNode)
+        progressBarProps['aria-labelledby'] = labelledBy;
+    const percentage = Math.round((100 / max) * value);
+    return (jsxs("span", { className: cls('root', variant, {
+            slim,
+        }), ...rest, ref: ref, children: [labelNode, jsx("span", { className: cls('track', `${variant}-track`, slim && `${variant}-track-slim`), role: "progressbar", ...progressBarProps, children: jsx("span", { className: cls('bar', `${variant}-bar`), style: {
+                        width: `${percentage}%`,
+                    } }) }), (!!detailsNode || showPercentage) && (jsxs("span", { className: cls('details-container', `${variant}-details-container`), children: [detailsNode, showPercentage && (jsxs("span", { className: cls('details-label', `${variant}-details-label`), children: [percentage, "%"] }))] }))] }));
+});
+LinearProgressIndicator.displayName = 'SuiLinearProgressIndicator';
+
+export { LinearProgressIndicator, LinearProgressIndicator$1 as linearProgressIndicatorStyle };

package/Link.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+var Link$1 = {"sui-link-root":"sui-link-root","sui-focus-visible":"sui-focus-visible","sui-link-none":"sui-link-none","sui-link-hover":"sui-link-hover","sui-link-always":"sui-link-always","sui-link":"sui-link","sui-link-primary":"sui-link-primary","sui-link-secondary":"sui-link-secondary"};
+
+const Link = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Link' });
+    const { classes, component: Component = 'a', className, underline = 'hover', children, variant = 'primary', ...rest } = props;
+    const cls = useClasses('link', classes, className);
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
+    const linkRef = useForkRef(ref, focusVisibleRef);
+    return (jsx(Component, { className: cls('root', variant, underline, { focusVisible }), ...rest, ...focusVisibleHandlers, ref: linkRef, children: children }));
+});
+Link.displayName = 'SuiLink';
+
+export { Link, Link$1 as linkStyle };

package/List.js

@@ -0,0 +1,11 @@
+export { L as List } from './chunks/List.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-theme';
+import './chunks/useListNavigation.js';
+import 'tabbable';
+
+var List = {"sui-list-root":"sui-list-root"};
+
+export { List as listStyle };