@ringcentral/spring-ui 1.9.0 → 1.9.1

package/Avatar.js

@@ -32,7 +32,7 @@ const StatusIndicatorSizeMap = {
 };
 const Avatar = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Avatar' });
-    const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, ...rest } = props;
+    const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, onClick, ...rest } = props;
     let children = null;
     const loaded = useImgLoaded({
         ...imgProps,
@@ -73,7 +73,7 @@ const Avatar = forwardRef((inProps, ref) => {
     }
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
     const avatarRef = useForkRef(avatarShapeRef, focusVisibleRef);
-    const clickable = clickableProp !== false && rest.onClick ? true : clickableProp ?? false;
+    const clickable = clickableProp !== false && onClick ? true : clickableProp ?? false;
     const interactive = clickable && !disabled;
     const supportsStatusIndicator = size !== 'xxsmall' && size !== 'xsmall';
     let AvatarShape = component ?? 'div';
@@ -106,13 +106,22 @@ const Avatar = forwardRef((inProps, ref) => {
             tabIndex: -1,
         }
         : {};
+    const rootClickHandler = onClick;
+    const handleClick = (event) => {
+        if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        rootClickHandler?.(event);
+    };
     return (jsx(Overlap, { position: {
             bottom: '-1px',
             right: '-1px',
         }, floater: supportsStatusIndicator && showStatusIndicator ? (jsx(StatusIndicator, { size: StatusIndicatorSizeMap[size], ...IndicatorProps })) : undefined, className: clsx(className, groupClassName), classes: {
             root: cls('root', size, { disabled }),
             floater: cls('indicator', interactive && 'clickable-indicator'),
-        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...nonInteractiveShapeProps, ...rest, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
+        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...nonInteractiveShapeProps, ...rest, onClick: onClick ? handleClick : undefined, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
 });
 Avatar.displayName = 'SuiAvatar';
 

package/CircularProgressIndicator.js

@@ -1,6 +1,7 @@
 export { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
 import 'react/jsx-runtime';
 import 'react';
+import 'clsx';
 import 'framer-motion';
 import '@ringcentral/spring-base';
 import '@ringcentral/spring-theme';

package/LinearProgressIndicator.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import clsx from 'clsx';
 import { useClasses, useId } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
 
@@ -14,13 +15,14 @@ const LinearProgressIndicator = forwardRef((inProps, ref) => {
     const cls = useClasses('linear-progress-indicator', classes, className);
     const labelId = useId();
     const progressBarProps = progressBarPropsProp || {};
+    const progressBarLabelledBy = progressBarProps['aria-labelledby'];
     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 }));
+        labelNode = (jsx("span", { id: progressBarLabelledBy || labelId, className: cls('label', `${variant}-label`), children: props.label }));
+        progressBarProps['aria-labelledby'] = progressBarLabelledBy || labelId;
     }
     let detailsNode = details;
     if (typeof details === 'string') {
@@ -30,12 +32,11 @@ const LinearProgressIndicator = forwardRef((inProps, ref) => {
         progressBarProps['aria-valuemin'] = min;
     if (max !== 100)
         progressBarProps['aria-valuemax'] = max;
-    if (labelNode)
-        progressBarProps['aria-labelledby'] = labelledBy;
     const percentage = Math.round((100 / max) * value);
+    const { className: progressBarClassName, ...restProgressBarProps } = progressBarProps;
     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: {
+        }), ...rest, ref: ref, children: [labelNode, jsx("span", { className: clsx(cls('track', `${variant}-track`, slim && `${variant}-track-slim`), progressBarClassName), role: "progressbar", ...restProgressBarProps, 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, "%"] }))] }))] }));
 });

package/Link.js

@@ -7,9 +7,9 @@ var Link$1 = {"sui-link-root":"sui-link-root","sui-focus-visible":"sui-focus-vis
 
 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 { classes, component: Component = 'a', className, underline = 'hover', children, variant = 'primary', onBlur, onFocus, onFocusVisible, ...rest } = props;
     const cls = useClasses('link', classes, className);
-    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
+    const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible({ onFocusVisible, onFocus, onBlur });
     const linkRef = useForkRef(ref, focusVisibleRef);
     return (jsx(Component, { className: cls('root', variant, underline, { focusVisible }), ...rest, ...focusVisibleHandlers, ref: linkRef, children: children }));
 });

package/Radio.js

@@ -10,14 +10,17 @@ var Radio$1 = {"sui-radio-root":"sui-radio-root","sui-focus-visible":"sui-focus-
 
 const Radio = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Radio' });
-    const { name = '', classes, inputRef, rootProps, inputProps, className: rootClass, ...rest } = props;
+    const { name = '', classes, inputRef, rootProps, inputProps, disabled: disabledProp, className: rootClass, ...rest } = props;
     const cls = useClasses('radio', classes, rootClass);
     const { disabled, id, value } = useFormLabel({
         value: rest.value,
         id: inputProps?.id,
-        disabled: rest.disabled,
+        disabled: disabledProp,
+    });
+    const { focusVisible, getInputProps, checked } = useSwitch({
+        ...rest,
+        disabled,
     });
-    const { focusVisible, getInputProps, checked } = useSwitch(rest);
     const { onChange, ...inputRest } = getInputProps({
         role: undefined,
         ...inputProps,

package/Switch.js

@@ -9,7 +9,7 @@ var Switch$1 = {"sui-switch-root":"sui-switch-root","sui-focus-visible":"sui-foc
 
 const Switch = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Switch' });
-    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
+    const { classes, className, inputRef: inputRefProp, inputProps: inputPropsProp, rootProps, checked: checkedProp, defaultChecked, disabled: disabledProp, autoFocus = false, onBlur, onChange, onFocus, onFocusVisible, required, ...rest } = props;
     const cls = useClasses('switch', classes, className);
     const { disabled, id } = useFormLabel({
         disabled: disabledProp,
@@ -33,7 +33,7 @@ const Switch = forwardRef((inProps, ref) => {
             inputRef.current?.focus();
         }
     }, []);
-    return (jsxs("span", { className: cls('root', { focusVisible }), ...rest, ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot') })] }));
+    return (jsxs("span", { ...rootProps, ...rest, className: cls('root', { focusVisible }), ref: ref, children: [jsx("input", { ...inputProps, id: id, className: cls('input', { checked }), ref: forkRef }), jsx("span", { className: cls('track') }), jsx("span", { className: cls('dot') })] }));
 });
 Switch.displayName = 'SuiSwitch';
 

package/Tooltip.js

@@ -18,6 +18,6 @@ import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 import './chunks/PopperPaper.js';
 
-var TooltipView = {"sui-tooltip-view-root":"sui-tooltip-view-root","sui-tooltip-view-disable-interactions":"sui-tooltip-view-disable-interactions","sui-tooltip-trigger-wrapper":"sui-tooltip-trigger-wrapper","sui-tooltip-view-paper":"sui-tooltip-view-paper","sui-tooltip-view-paper-content":"sui-tooltip-view-paper-content","sui-tooltip-view-paper-content-medium":"sui-tooltip-view-paper-content-medium","sui-tooltip-view-icon":"sui-tooltip-view-icon","sui-tooltip-view-content":"sui-tooltip-view-content","sui-tooltip-view-content-medium":"sui-tooltip-view-content-medium","sui-tooltip-view-neutral":"sui-tooltip-view-neutral","sui-tooltip-view-success":"sui-tooltip-view-success","sui-tooltip-view-danger":"sui-tooltip-view-danger","sui-tooltip-view-inverted":"sui-tooltip-view-inverted","sui-tooltip-view-force-hide":"sui-tooltip-view-force-hide"};
+var TooltipView = {"sui-tooltip-view-root":"sui-tooltip-view-root","sui-tooltip-view-disable-interactions":"sui-tooltip-view-disable-interactions","sui-tooltip-trigger-wrapper":"sui-tooltip-trigger-wrapper","sui-tooltip-view-paper":"sui-tooltip-view-paper","sui-tooltip-view-paper-content":"sui-tooltip-view-paper-content","sui-tooltip-view-paper-content-medium":"sui-tooltip-view-paper-content-medium","sui-tooltip-view-icon":"sui-tooltip-view-icon","sui-tooltip-view-content":"sui-tooltip-view-content","sui-tooltip-view-neutral":"sui-tooltip-view-neutral","sui-tooltip-view-success":"sui-tooltip-view-success","sui-tooltip-view-danger":"sui-tooltip-view-danger","sui-tooltip-view-inverted":"sui-tooltip-view-inverted","sui-tooltip-view-force-hide":"sui-tooltip-view-force-hide"};
 
 export { TooltipView as tooltipViewStyle };

package/chunks/Button.js

@@ -81,7 +81,7 @@ const Button = withTooltip(forwardRef((inProps, ref) => {
             disabled: disabledProp,
             focusVisible,
             loading,
-        }), title: title, ...rest, ...getRootProps(), "aria-disabled": disableInteractions, children: [startSlot, isTextContent ? (jsx("span", { className: cls('content'), children: children })) : (children), endSlot] }));
+        }), title: title, ...rest, ...getRootProps(), children: [startSlot, isTextContent ? (jsx("span", { className: cls('content'), children: children })) : (children), endSlot] }));
 }));
 Button.displayName = 'SuiButton';
 

package/chunks/CircularProgressIndicator.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import clsx from 'clsx';
 import { MotionConfig, motion } from 'framer-motion';
 import { useClasses } from '@ringcentral/spring-base';
 import { useThemeProps } from '@ringcentral/spring-theme';
@@ -55,7 +56,8 @@ const CircularProgressIndicator = forwardRef((inProps, ref) => {
         const offset = circumference - (value / 100) * circumference;
         content = (jsx("svg", { width: '100%', height: '100%', viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("circle", { className: cls('progress-circle', `${variant}-progress-circle`), cx: "28", cy: "28", r: radius, fill: "none", strokeWidth: 18, strokeDasharray: circumference, strokeDashoffset: offset, transform: "rotate(-90 28 28)" }) }));
     }
-    return (jsx("span", { className: cls('root', variant, size, color, `${variant}-${size}`, `${variant}-${color}`), ...rest, ...progressBarProps, role: "progressbar", ref: ref, children: content }));
+    const { className: progressBarClassName, ...restProgressBarProps } = progressBarProps;
+    return (jsx("span", { className: clsx(cls('root', variant, size, color, `${variant}-${size}`, `${variant}-${color}`), progressBarClassName), ...rest, ...restProgressBarProps, role: "progressbar", ref: ref, children: content }));
 });
 CircularProgressIndicator.displayName = 'SuiProgressIndicator';
 

package/chunks/IconButtonLabel.js

@@ -33,7 +33,7 @@ const IconButton = withTooltip(forwardRef((inProps, ref) => {
         ...props,
         rootRef: ref,
     });
-    const rootProps = {
+    const rootProps = getRootProps({
         className: cls('root', size, variant, color, shape, `${size}-${shape}`, `${size}-${variant}`, `${variant}-${color}`, `${variant}-${shape}`, ...(!background
             ? [
                 'hide-background',
@@ -45,9 +45,8 @@ const IconButton = withTooltip(forwardRef((inProps, ref) => {
             focusVisible,
         }),
         'aria-label': label,
-        ...getRootProps(),
         ...rest,
-    };
+    });
     const content = (jsxs(Fragment, { children: [children || (jsx(Icon, { symbol: symbol, size: iconSize ?? IconSizeMap[size] })), sizeSupportsLabel(size) && label && (jsx("span", { className: cls('label', `${size}-label`, shape === 'squircle' && `${shape}-label`, `${size}-${shape}-label`), children: label }))] }));
     if (shape === 'squircle') {
         return (jsx(Squircle, { ...rootProps, component: component, interactive: !disabled, focusVisible: focusVisible, children: content }));

package/chunks/Modal.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, forwardRef, useState, useRef, useEffect } from 'react';
+import { createContext, useContext, forwardRef, useState, useEffect } from 'react';
 import { useAriaHideOutside, useForkRef, useClasses, useEventCallback, useBodyScrollLock, useWindowContext } from '@ringcentral/spring-base';
 import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
 import { FocusTrap, Portal } from '@mui/base';
@@ -47,16 +47,12 @@ const Modal = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Modal' });
     const { children, open, container: containerProp, disablePortal, onExitComplete, disableBackdropAnimation, motionProps, disableScrollLock = false, ...rest } = props;
     const [shouldRender, setShouldRender] = useState(open);
-    const modalRef = useRef(null);
-    const handleRef = useForkRef(modalRef, ref);
+    const [modalElement, setModalElement] = useState(null);
+    const handleRef = useForkRef(setModalElement, ref);
     const prefersReducedMotion = usePrefersReducedMotion();
     const { isEnabled } = useFocusTrapStack({ open });
-    useBodyScrollLock(open, modalRef.current, {
+    useBodyScrollLock(open, modalElement, {
         disabled: disableScrollLock,
-        reserveScrollBarGap: true,
-        allowTouchMove: (el) => {
-            return modalRef.current?.contains(el) ?? false;
-        },
     });
     useEffect(() => {
         if (open) {

package/chunks/Tooltip.js

@@ -196,7 +196,7 @@ const TooltipView = forwardRef((props, ref) => {
                 arrowStyle,
                 classes: {
                     root: cls('paper', color),
-                    content: cls('paper-content', size),
+                    content: cls('paper-content', `paper-content-${size}`),
                 },
             }, popperPaperPropsProp), children: [icon && jsx(Icon, { symbol: icon, size: "small", className: cls('icon') }), jsx("div", { className: cls('content', `content-${size}`), children: children })] })) }));
 });

package/index.css

@@ -692,21 +692,6 @@
  overflow-wrap: break-word;
 }
 
-.sui-tooltip-view-content-medium {
-
- font-size: var(--sui-typography-descriptor-font-size);
-
- font-weight: var(--sui-typography-descriptor-font-weight);
-
- line-height: var(--sui-typography-descriptor-line-height);
-
- text-decoration: var(--sui-typography-descriptor-text-decoration);
-
- text-transform: var(--sui-typography-descriptor-text-transform);
-
- font-family: var(--sui-font-family);
-}
-
 .sui-tooltip-view-neutral {
 
  --tw-border-opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ringcentral/spring-ui",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "author": "RingCentral",
   "description": "A comprehensive React component library built with Tailwind CSS, featuring production-ready components",
   "main": "./index.js",
@@ -14,9 +14,9 @@
     "@floating-ui/react-dom": "2.1.1",
     "@juggle/resize-observer": "3.4.0",
     "@mui/base": "5.0.0-beta.40",
-    "@ringcentral/spring-base": "^1.9.0",
-    "@ringcentral/spring-icon": "^1.9.0",
-    "@ringcentral/spring-theme": "^1.9.0",
+    "@ringcentral/spring-base": "^1.9.1",
+    "@ringcentral/spring-icon": "^1.9.1",
+    "@ringcentral/spring-theme": "^1.9.1",
     "@types/lodash": "^4.14.182",
     "@use-gesture/react": "10.3.1",
     "clsx": "^1.2.1",

package/src/Checkbox/Checkbox.classes.d.ts

@@ -1,6 +1,6 @@
 import type { CamelCase } from 'type-fest';
 import { CheckboxShape } from './Checkbox.type';
-export declare type BaseCheckboxClassesKey = 'root' | 'inner' | CheckboxShape | 'input' | `inner-${CheckboxShape}`;
+export declare type BaseCheckboxClassesKey = 'root' | 'inner' | CheckboxShape | 'input' | `inner-${CheckboxShape}` | 'indeterminate';
 export declare type CheckboxClassesKey = CamelCase<BaseCheckboxClassesKey>;
 export declare type CheckboxClasses = {
     name: 'checkbox';

package/src/Checkbox/Checkbox.d.ts

@@ -4,8 +4,8 @@ declare const Checkbox: import("react").ForwardRefExoticComponent<import("@ringc
     indeterminate?: boolean | undefined;
     autoFocus?: boolean | undefined;
     inputRef?: import("react").Ref<HTMLInputElement> | undefined;
-    rootProps?: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className"> | undefined;
-    inputProps?: Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "type" | "ref"> | undefined;
+    rootProps?: import("@ringcentral/spring-base").SlotProps<"div", never, import("@ringcentral/spring-base").HTMLDataAttribute> | undefined;
+    inputProps?: import("@ringcentral/spring-base").SlotProps<"input", "type" | "ref", import("@ringcentral/spring-base").HTMLDataAttribute> | undefined;
     shape?: import("./Checkbox.type").CheckboxShape | undefined;
 } & Omit<import("@mui/base").UseSwitchParameters, "readonly"> & {
     className?: string | undefined;

package/src/Checkbox/Checkbox.type.d.ts

@@ -1,13 +1,13 @@
-import { ComponentProps, Ref } from 'react';
+import { Ref } from 'react';
 import { UseSwitchParameters } from '@mui/base';
-import { StandardProps } from '@ringcentral/spring-base';
+import { SlotProps, StandardProps } from '@ringcentral/spring-base';
 import { CheckboxClassesKey } from './Checkbox.classes';
 export declare type CheckboxShape = 'rectangular' | 'squircle';
 export declare type CheckboxProps = StandardProps<{
     indeterminate?: boolean;
     autoFocus?: boolean;
     inputRef?: Ref<HTMLInputElement>;
-    rootProps?: Omit<ComponentProps<'div'>, 'className'>;
-    inputProps?: Omit<ComponentProps<'input'>, 'className' | 'type' | 'ref'>;
+    rootProps?: SlotProps<'div'>;
+    inputProps?: SlotProps<'input', 'type' | 'ref'>;
     shape?: CheckboxShape;
 } & Omit<UseSwitchParameters, 'readonly'>, CheckboxClassesKey>;

package/src/CircularProgressIndicator/CircularProgressIndicator.type.d.ts

@@ -1,5 +1,5 @@
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
 import { ComponentProps } from 'react';
-import { StandardProps } from '@ringcentral/spring-base';
 import { CircularProgressIndicatorClassesKey } from './CircularProgressIndicator.classes';
 export declare type CircularProgressIndicatorVariant = 'indeterminate' | 'determinate';
 export declare type CircularProgressIndicatorSize = 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
@@ -9,5 +9,5 @@ export declare type CircularProgressIndicatorProps = StandardProps<{
     size?: CircularProgressIndicatorSize;
     color?: CircularProgressIndicatorColor;
     value?: number;
-    progressBarProps?: Omit<ComponentProps<'span'>, 'ref' | 'role'>;
+    progressBarProps?: Omit<ComponentProps<'span'>, 'ref' | 'role'> & HTMLDataAttribute;
 }, CircularProgressIndicatorClassesKey, 'span'>;

package/src/Dropdown/Dropdown.type.d.ts

@@ -1,5 +1,5 @@
-import { HTMLDataAttribute, StandardProps, UseFocusVisibleOptions } from '@ringcentral/spring-base';
-import { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode, Ref } from 'react';
+import { HTMLDataAttribute, SlotProps, StandardProps, UseFocusVisibleOptions } from '@ringcentral/spring-base';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { VirtualizedMenuProps } from '../VirtualizedMenu';
 import { MenuProps } from '../Menu';
 import { DropdownClassesKey } from './Dropdown.classes';
@@ -8,8 +8,8 @@ export declare type DropdownProps<T = string, D = unknown> = StandardProps<{
     value?: T | null;
     onChange?: (value: T | null) => void;
     placeholder?: ReactNode;
-    rootProps?: Omit<ComponentProps<'div'>, 'className' | 'ref'> & HTMLDataAttribute;
-    buttonProps?: Omit<ComponentPropsWithRef<'button'>, 'className'> & HTMLDataAttribute & Pick<UseFocusVisibleOptions, 'onFocusVisible'>;
+    rootProps?: SlotProps<'div', 'ref'>;
+    buttonProps?: SlotProps<'button'> & Pick<UseFocusVisibleOptions, 'onFocusVisible'>;
     MenuProps?: (Omit<VirtualizedMenuProps, 'open' | 'anchorEl' | 'onClose' | 'initialFocus' | 'data' | 'children'> | Omit<MenuProps, 'open' | 'anchorEl' | 'onClose' | 'children'>) & HTMLDataAttribute;
     ref?: Ref<HTMLDivElement>;
     buttonRef?: Ref<HTMLButtonElement>;

package/src/FormField/FormField.type.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, DetailedHTMLProps, LabelHTMLAttributes, Ref } from 'react';
-import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { HTMLDataAttribute, SlotProps, StandardProps } from '@ringcentral/spring-base';
 import { FormFieldClassesKey } from './FormField.classes';
 export declare type FormFieldVariant = 'standard' | 'outlined' | 'quiet' | 'contained';
 export declare type FormFieldSize = 'xlarge' | 'large' | 'medium';
@@ -10,7 +10,7 @@ export declare type FormFieldProps = StandardProps<{
     focused?: boolean;
     size?: FormFieldSize;
     contentRef?: Ref<HTMLDivElement>;
-    contentProps?: Omit<ComponentProps<'div'>, 'className'> & HTMLDataAttribute;
+    contentProps?: SlotProps<'div'>;
     FormHelperTextProps?: ComponentProps<'div'> & HTMLDataAttribute;
     variant?: FormFieldVariant;
     htmlFor?: string;

package/src/LinearProgressIndicator/LinearProgressIndicator.type.d.ts

@@ -1,4 +1,4 @@
-import { StandardProps } from '@ringcentral/spring-base';
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
 import { ComponentProps, ReactNode } from 'react';
 import { LinearProgressIndicatorClassesKey } from './LinearProgressIndicator.classes';
 export declare type LinearProgressIndicatorVariant = 'determinate';
@@ -11,5 +11,5 @@ export declare type LinearProgressIndicatorProps = StandardProps<{
     value: number;
     min?: number;
     max: number;
-    progressBarProps?: Omit<ComponentProps<'span'>, 'ref' | 'role'>;
+    progressBarProps?: Omit<ComponentProps<'span'>, 'ref' | 'role'> & HTMLDataAttribute;
 }, LinearProgressIndicatorClassesKey, 'span'>;

package/src/Popper/Popper.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { PopperProps } from './Popper.type';
-declare const Popper: import("react").ForwardRefExoticComponent<Pick<PopperProps, "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "transform" | "padding" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "placement" | "open" | "offset" | "disablePortal" | "platform" | "whileElementsMounted" | "elements" | "anchorEl" | "middlewares" | "arrowHeight" | "arrowPadding" | "actions" | "autoUpdate" | "matchAnchorWidth"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Popper: import("react").ForwardRefExoticComponent<Pick<PopperProps, "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "transform" | "padding" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "platform" | `data-${string}` | "placement" | "open" | "offset" | "disablePortal" | "whileElementsMounted" | "elements" | "anchorEl" | "middlewares" | "arrowHeight" | "arrowPadding" | "actions" | "autoUpdate" | "matchAnchorWidth"> & import("react").RefAttributes<HTMLDivElement>>;
 export { Popper };

package/src/Radio/Radio.d.ts

@@ -4,8 +4,8 @@ export declare const Radio: import("react").ForwardRefExoticComponent<import("@r
     value?: string | undefined;
     name?: string | undefined;
     inputRef?: import("react").Ref<HTMLInputElement> | undefined;
-    rootProps?: (Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className"> & import("@ringcentral/spring-base").HTMLDataAttribute) | undefined;
-    inputProps?: Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "type" | "ref"> | undefined;
+    rootProps?: import("@ringcentral/spring-base").SlotProps<"div", never, import("@ringcentral/spring-base").HTMLDataAttribute> | undefined;
+    inputProps?: import("@ringcentral/spring-base").SlotProps<"input", "type" | "ref", import("@ringcentral/spring-base").HTMLDataAttribute> | undefined;
 } & Omit<import("@mui/base").UseSwitchParameters, "readonly"> & {
     className?: string | undefined;
 } & import("@ringcentral/spring-base").HTMLDataAttribute & import("react").RefAttributes<HTMLInputElement>>;

package/src/Radio/Radio.type.d.ts

@@ -1,11 +1,11 @@
-import { ComponentProps, Ref } from 'react';
+import { Ref } from 'react';
 import { UseSwitchParameters } from '@mui/base';
-import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { SlotProps, StandardProps } from '@ringcentral/spring-base';
 import { RadioClassesKey } from './Radio.classes';
 export declare type RadioProps = StandardProps<{
     value?: string;
     name?: string;
     inputRef?: Ref<HTMLInputElement>;
-    rootProps?: Omit<ComponentProps<'div'>, 'className'> & HTMLDataAttribute;
-    inputProps?: Omit<ComponentProps<'input'>, 'className' | 'type' | 'ref'>;
+    rootProps?: SlotProps<'div'>;
+    inputProps?: SlotProps<'input', 'type' | 'ref'>;
 } & Omit<UseSwitchParameters, 'readonly'>, RadioClassesKey>;

package/src/SubMenu/PopperMenu.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { PopperMenuProps } from './PopperMenu.type';
 import popperMenuStyle from './styles/PopperMenu.css';
-declare const PopperMenu: import("react").ForwardRefExoticComponent<Pick<PopperMenuProps, "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "transform" | "padding" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "placement" | "open" | "offset" | "disablePortal" | "platform" | "whileElementsMounted" | "elements" | "anchorEl" | "middlewares" | "arrowHeight" | "arrowPadding" | "actions" | "autoUpdate" | "matchAnchorWidth"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const PopperMenu: import("react").ForwardRefExoticComponent<Pick<PopperMenuProps, "children" | "onKeyDown" | "onKeyUp" | "onMouseDown" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "transform" | "padding" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "platform" | `data-${string}` | "placement" | "open" | "offset" | "disablePortal" | "whileElementsMounted" | "elements" | "anchorEl" | "middlewares" | "arrowHeight" | "arrowPadding" | "actions" | "autoUpdate" | "matchAnchorWidth"> & import("react").RefAttributes<HTMLDivElement>>;
 export { PopperMenu, popperMenuStyle };

package/src/Switch/Switch.d.ts

@@ -3,8 +3,8 @@ import switchStyle from './styles/Switch.css';
 declare const Switch: import("react").ForwardRefExoticComponent<import("@ringcentral/spring-base").ClassesProp<import("./Switch.classes").SwitchClassesKey> & {
     autoFocus?: boolean | undefined;
     inputRef?: import("react").Ref<HTMLInputElement> | undefined;
-    inputProps?: Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "ref"> | undefined;
-    rootProps?: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    inputProps?: import("@ringcentral/spring-base").SlotProps<"input", "ref", import("@ringcentral/spring-base").HTMLDataAttribute> | undefined;
+    rootProps?: import("@ringcentral/spring-base").SlotProps<"span", "ref", import("@ringcentral/spring-base").HTMLDataAttribute> | undefined;
 } & Omit<import("@mui/base").UseSwitchParameters, "readOnly"> & {
     className?: string | undefined;
 } & import("@ringcentral/spring-base").HTMLDataAttribute & import("react").RefAttributes<HTMLSpanElement>>;

package/src/Switch/Switch.type.d.ts

@@ -1,10 +1,10 @@
 import { UseSwitchParameters } from '@mui/base';
-import { StandardProps } from '@ringcentral/spring-base';
-import { ComponentProps, Ref } from 'react';
+import { SlotProps, StandardProps } from '@ringcentral/spring-base';
+import { Ref } from 'react';
 import { SwitchClassesKey } from './Switch.classes';
 export declare type SwitchProps = StandardProps<{
     autoFocus?: boolean;
     inputRef?: Ref<HTMLInputElement>;
-    inputProps?: Omit<ComponentProps<'input'>, 'ref' | 'className'>;
-    rootProps?: ComponentProps<'span'>;
+    inputProps?: SlotProps<'input', 'ref'>;
+    rootProps?: SlotProps<'span', 'ref'>;
 } & Omit<UseSwitchParameters, 'readOnly'>, SwitchClassesKey>;

package/src/Tooltip/TooltipView.classes.d.ts

@@ -1,6 +1,6 @@
 import type { CamelCase } from 'type-fest';
 import type { TooltipSize } from './TooltipView.type';
-export declare type BaseTooltipViewClassesKey = 'root' | 'paper' | 'paper-content' | 'icon' | TooltipSize | 'content' | `content-${TooltipSize}` | 'neutral' | 'success' | 'danger' | 'force-hide' | 'inverted' | 'disable-interactions';
+export declare type BaseTooltipViewClassesKey = 'root' | 'paper' | 'paper-content' | `paper-content-${TooltipSize}` | 'icon' | TooltipSize | 'content' | `content-${TooltipSize}` | 'neutral' | 'success' | 'danger' | 'force-hide' | 'inverted' | 'disable-interactions';
 export declare type TooltipViewClassesKey = CamelCase<BaseTooltipViewClassesKey>;
 export declare type TooltipViewClasses = {
     name: 'tooltip-view';