@ringcentral/spring-ui 1.7.0

package/chunks/SortableArrow.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useClasses } from '@ringcentral/spring-base';
+import { motion } from 'framer-motion';
+import { motionTransition } from '@ringcentral/spring-theme';
+import { I as Icon } from './Icon.js';
+import 'react';
+import { u as useMotionSafeTransition } from './useMotionSafeTransition.js';
+
+const topCaretVariants = {
+    initial: {
+        d: 'M 5 7.5 L 10 2.5 L 15 7.5',
+        opacity: 1,
+    },
+    asc: {
+        d: 'M 4.75 9.5 L 10 4 L 15.25 9.5',
+        opacity: 1,
+    },
+    desc: {
+        d: 'M 10 9.5 L 10 4.5 L 10 9.5',
+        opacity: 0,
+        transition: {
+            ease: 'easeOut',
+            duration: 0.15,
+        },
+    },
+};
+const topLineVariants = {
+    initial: {
+        d: 'M 10 2.5 L 10 2.5',
+        opacity: 0,
+    },
+    asc: {
+        d: 'M 10 4.5 L 10 15.5',
+        opacity: 1,
+    },
+};
+const bottomLineVariants = {
+    initial: {
+        d: 'M 10 17.5 L 10 17.5',
+        opacity: 0,
+    },
+    desc: {
+        d: 'M 10 15.5 L 10 4.5',
+        opacity: 1,
+    },
+};
+const bottomCaretVariants = {
+    initial: {
+        d: 'M 5 12.5 L 10 17.5 L 15 12.5',
+        opacity: 1,
+    },
+    asc: {
+        d: 'M 10 10.5 L 10 15.5 L 10 10.5',
+        opacity: 0,
+        transition: {
+            ease: 'easeOut',
+            duration: 0.15,
+        },
+    },
+    desc: {
+        d: 'M 4.75 10.5 L 10 16 L 15.25 10.5',
+        opacity: 1,
+    },
+};
+const SortableArrow = (props) => {
+    const { classes, size = 'medium', direction = false, className, ...rest } = props;
+    const cls = useClasses('sortable-arrow', classes, className);
+    const caretTransition = useMotionSafeTransition(motionTransition['spring-01-fast']);
+    const lineTransition = useMotionSafeTransition(motionTransition['neutral-01-fast']);
+    return (jsx(Icon, { ...rest, size: size, className: cls('root'), children: jsxs(motion.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 20 20', animate: direction || 'initial', children: [jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', variants: topCaretVariants, transition: caretTransition, fill: "transparent" }), direction !== 'desc' && (jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: 'square', variants: topLineVariants, transition: lineTransition, fill: "transparent" })), direction !== 'asc' && (jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: 'square', variants: bottomLineVariants, transition: lineTransition, fill: "transparent" })), jsx(motion.path, { initial: false, stroke: "currentColor", strokeWidth: 1.5, strokeMiterlimit: 1.5, strokeLinejoin: 'miter', variants: bottomCaretVariants, transition: caretTransition, fill: "transparent" })] }) }));
+};
+
+export { SortableArrow as S };

package/chunks/Squircle.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef, isValidElement, cloneElement } from 'react';
+import { useClasses, useId } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+
+const SQUIRCLE_PATH = 'M 0.5 0 C 0.879 0 1 0.121 1 0.5 C 1 0.879 0.879 1 0.5 1 C 0.121 1 0 0.879 0 0.5 C 0 0.121 0.121 0 0.5 0 Z';
+const Squircle = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Squircle' });
+    const { component = 'div', focusVisible, active, children: childrenProp, className, classes, interactive = true, fillShape: fillShapeProp = false, ...rest } = props;
+    /**
+     * If the children passed to this component have a conditionally rendered
+     * element, using toArray will ensure that any falsy children are removed.
+     * Otherwise fillShape will always be false even if only 1 truthy child
+     * is passed to this component.
+     */
+    const children = React.Children.toArray(childrenProp);
+    const firstChild = children[0];
+    const fillShape = fillShapeProp &&
+        firstChild &&
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        isValidElement(firstChild);
+    const cls = useClasses('squircle', classes, className);
+    const clipId = useId('sui-squircle-clip', true);
+    const showFocusRing = interactive && focusVisible;
+    const Root = component;
+    return (jsxs(Root, { className: cls('root', { active, interactive }), ...rest, ref: ref, children: [jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "0", height: "0", viewBox: "0 0 1 1", children: jsx("defs", { children: jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsx("path", { d: SQUIRCLE_PATH }) }) }) }), !fillShape && (jsx("svg", { className: cls('content'), xmlns: "http://www.w3.org/2000/svg", viewBox: '0 0 1 1', children: jsx("path", { clipPath: `url(#${clipId})`, d: SQUIRCLE_PATH, vectorEffect: "non-scaling-stroke" }) })), showFocusRing && (jsx("svg", { className: cls('ring'), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1 1", overflow: "visible", children: jsx("path", { d: SQUIRCLE_PATH, fillOpacity: 0, vectorEffect: "non-scaling-stroke" }) })), fillShape
+                ? cloneElement(firstChild, {
+                    style: {
+                        ...firstChild.props.style,
+                        with: '100%',
+                        height: '100%',
+                        clipPath: `url(#${clipId})`,
+                    },
+                })
+                : children] }));
+});
+
+export { Squircle as S };

package/chunks/StatusIndicator.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useClasses } from '@ringcentral/spring-base';
+import { MinusBoldMd, CheckBoldSm } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as Icon } from './Icon.js';
+
+const IconSizeMap = {
+    large: 'small',
+    medium: 'xsmall',
+};
+const StatusIndicator = (inProps) => {
+    const props = useThemeProps({ props: inProps, name: 'StatusIndicator' });
+    const { classes, className, size = 'medium', variant = 'available', ...rest } = props;
+    const cls = useClasses('status-indicator', classes, className);
+    return (jsxs("div", { className: cls('root', size, variant), ...rest, children: [variant === 'dnd' && (jsx(Icon, { symbol: MinusBoldMd, size: IconSizeMap[size] })), variant === 'available' && (jsx(Icon, { symbol: CheckBoldSm, size: IconSizeMap[size] }))] }));
+};
+StatusIndicator.displayName = 'SuiStatusIndicator';
+
+export { StatusIndicator as S };

package/chunks/StepConnector.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { b as useStepperContext, u as useStepContext } from './StepperContext.js';
+
+const StepConnector = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'StepConnector' });
+    const { classes, className, children, ...rest } = props;
+    const cls = useClasses('step-connector', classes, className);
+    const { orientation = 'horizontal' } = useStepperContext();
+    const { active, disabled, completed } = useStepContext();
+    return (jsx("div", { "aria-hidden": true, className: cls('root', orientation, {
+            active,
+            completed,
+            disabled,
+        }), ...rest, ref: ref, children: jsx("span", { className: cls('line', `line-${orientation}`) }) }));
+});
+StepConnector.displayName = 'SuiStepConnector';
+
+export { StepConnector as S };

package/chunks/StepIcon.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { AlertFilledMd, AlertMd, CheckBoldMd, CheckMd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as Icon } from './Icon.js';
+
+const StepIcon = forwardRef(
+// @ts-ignore
+(inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'StepIcon' });
+    const { classes, className, children, active = false, completed = false, error = false, disabled = false, variant = 'contained', icon, symbol, ...rest } = props;
+    const cls = useClasses('step-icon', classes, className);
+    if (symbol) {
+        return (jsx("span", { className: cls('root', variant, error && `${variant}-error`, active && `${variant}-current`, {
+                current: active,
+                completed,
+                error,
+                disabled,
+            }), ...rest, ref: ref, children: jsx(Icon, { className: cls('icon'), size: "xsmall", symbol: symbol }) }));
+    }
+    if (typeof icon === 'number' || typeof icon === 'string') {
+        let content;
+        if (error) {
+            content = (jsx(Icon, { className: cls('icon'), size: "large", symbol: variant === 'contained' ? AlertFilledMd : AlertMd }));
+        }
+        else if (completed) {
+            content =
+                variant === 'contained' ? (jsx(Icon, { className: cls('icon'), size: "xsmall", symbol: CheckBoldMd })) : (jsx(Icon, { className: cls('icon'), size: "large", symbol: CheckMd }));
+        }
+        else {
+            content = (jsx("span", { className: cls('text', active && 'text-current'), children: icon }));
+        }
+        return (jsx("span", { className: cls('root', variant, error && `${variant}-error`, active && `${variant}-current`, {
+                current: active,
+                completed,
+                error,
+                disabled,
+            }), ...rest, ref: ref, children: content }));
+    }
+    return icon;
+});
+StepIcon.displayName = 'SuiStepIcon';
+
+export { StepIcon as S };

package/chunks/StepLabel.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import clsx from 'clsx';
+import { b as useStepperContext, u as useStepContext } from './StepperContext.js';
+import { S as StepIcon } from './StepIcon.js';
+
+const StepLabel = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'StepLabel' });
+    const { classes, className, children, error = false, icon: iconProp, optional, labelProps = {}, StepIconComponent: StepIconComponentProp, StepIconProps, ...rest } = props;
+    const cls = useClasses('step-label', classes, className);
+    const { orientation = 'horizontal' } = useStepperContext();
+    const { active, disabled, completed, icon: iconContext, id, connector, index, last, variant, } = useStepContext();
+    const icon = iconProp || iconContext;
+    let StepIconComponent = StepIconComponentProp;
+    if (icon && !StepIconComponent) {
+        StepIconComponent = StepIcon;
+    }
+    return (jsxs("span", { id: id, className: cls('root', orientation, {
+            current: active,
+            completed,
+            disabled,
+            error,
+        }), ...rest, ref: ref, children: [index !== 0 ? connector : null, StepIconComponent ? (jsx("span", { className: cls('icon-container', `${orientation}-icon-container`), children: jsx(StepIconComponent, { completed: completed, active: active, error: error, disabled: disabled, icon: icon, variant: variant, ...StepIconProps }) })) : null, jsxs("span", { className: cls('label-container', `${orientation}-label-container`, error && 'error-label-container', { disabled }), children: [children ? (jsx("span", { ...labelProps, className: clsx(cls('label', `${orientation}-label`, active && 'current-label', error && 'error-label', { disabled, completed }), labelProps?.className), children: children })) : null, optional] }), !last ? connector : null] }));
+});
+StepLabel.displayName = 'SuiStepLabel';
+
+export { StepLabel as S };

package/chunks/StepperContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Provides information about the current step in Stepper.
+ */
+const StepContext = createContext({});
+/**
+ * Returns the current StepContext or an empty object if no StepContext
+ * has been defined in the component tree.
+ */
+const useStepContext = () => useContext(StepContext);
+
+const StepperContext = createContext({});
+const useStepperContext = () => useContext(StepperContext);
+
+export { StepContext as S, StepperContext as a, useStepperContext as b, useStepContext as u };

package/chunks/TableContext.js

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

package/chunks/Tablelvl2Context.js

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

package/chunks/TabsContext.js

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

package/chunks/TextField.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useInput } from '@mui/base';
+import { useId, useClasses, useControlled, useEventCallback, combineProps, useForkRef } from '@ringcentral/spring-base';
+import { Xmd } from '@ringcentral/spring-icon';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import 'framer-motion';
+import './Icon.js';
+import { S as ShowHideEye } from './ShowHideEye.js';
+import { u as useHelperTextId, F as FormField } from './useHelperTextId.js';
+import { I as IconButton } from './IconButtonLabel.js';
+
+const TextFieldComponent = (inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'TextField' });
+    const { classes, className, clearBtn = true, clearText = 'clear', showCharacterCount = false, useNativeClearBtn = false, size, endAdornment, fullWidth, helperText: helperTextProp, inputProps, label, onClear, placeholder: placeholderProp, RootProps, startAdornment, type, variant = 'outlined', inputComponent: InputComponent = 'input', autoFocus, ClearButtonProps, id: idProp, onKeyDown, onKeyUp, readOnly, onClick, focused, FormHelperTextProps, showMaskValueToggleButton = type === 'password', maskValue: maskValueProps, MaskValueButtonProps, ShowHideEyeIconProps, } = props;
+    const placeholder = placeholderProp || ' ';
+    const defaultId = useId();
+    const id = idProp ?? inputProps?.id ?? defaultId;
+    const cls = useClasses('text-field', classes, className);
+    const { disabled, required, error, getInputProps } = useInput(props);
+    const states = { disabled, required, error, focused };
+    const idForHelperText = useHelperTextId({
+        helperText: helperTextProp,
+        id,
+        FormHelperTextProps,
+    });
+    const widgetProps = getInputProps({
+        'aria-describedby': idForHelperText,
+        ...inputProps,
+        placeholder,
+        id,
+        type,
+    });
+    const inputRef = useRef();
+    const handlerClear = (e) => {
+        if (disabled)
+            return;
+        const el = inputRef.current;
+        if (el) {
+            onClear?.(e);
+            const host = Object.getPrototypeOf(el);
+            Object.getOwnPropertyDescriptor(host, 'value')?.set?.call(el, '');
+            el.focus();
+            el.dispatchEvent(new InputEvent('input', { bubbles: true }));
+        }
+    };
+    let helperText = helperTextProp;
+    if (showCharacterCount &&
+        inputProps?.maxLength !== undefined &&
+        props.onChange &&
+        props.value !== undefined) {
+        helperText = (jsxs("div", { className: cls('helper-text'), children: [jsx("span", { children: helperText }), jsxs("span", { children: [props.value?.length ?? 0, "/", inputProps.maxLength] })] }));
+    }
+    const [maskValue, setMaskValue] = useControlled({
+        controlled: maskValueProps,
+        default: false,
+        name: 'TextField',
+        state: 'showPassword',
+    });
+    let inputType = type;
+    const shouldShowMaskToggleButton = showMaskValueToggleButton && type === 'password';
+    const isSearchInput = type === 'search';
+    const shouldHideNativeClear = isSearchInput && !useNativeClearBtn;
+    if (shouldShowMaskToggleButton) {
+        if (maskValue) {
+            inputType = 'text';
+        }
+        else {
+            inputType = 'password';
+        }
+    }
+    const handleMaskValueChange = useEventCallback(() => {
+        setMaskValue(!maskValue);
+        if (props.onMaskValueChange) {
+            props.onMaskValueChange(!maskValue);
+        }
+    });
+    return (jsxs(FormField, { ...combineProps({
+            classes: {
+                root: cls('root', {
+                    'full-width': fullWidth,
+                    'hide-native-clear': shouldHideNativeClear,
+                }),
+                content: cls('form-field-content'),
+                outlined: cls('outlined'),
+                standard: cls('standard'),
+                quiet: cls('quiet'),
+            },
+            contentProps: {
+                onClick: (e) => {
+                    onClick?.(e);
+                    if (e.target === e.currentTarget && !disabled) {
+                        inputRef.current?.focus();
+                    }
+                },
+            },
+        }, RootProps), ...states, htmlFor: id, label: label, ref: ref, helperText: helperText, variant: variant, size: size, FormHelperTextProps: { id: idForHelperText, ...FormHelperTextProps }, children: [startAdornment && (jsx("div", { className: cls('start-adornment'), children: startAdornment })), jsx(InputComponent, { readOnly: readOnly, autoComplete: "off", autoFocus: autoFocus, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...widgetProps, className: cls('input'), ref: useForkRef(widgetProps.ref, inputRef), type: inputType }), clearBtn && (jsx(IconButton, { symbol: Xmd, shape: 'squircle', background: false, color: 'secondary', variant: "contained", size: "small", title: clearText, "aria-label": clearText, disabled: disabled, ...combineProps({
+                    className: cls('clear'),
+                    onClick: handlerClear,
+                }, ClearButtonProps) })), shouldShowMaskToggleButton && (jsx(IconButton, { disabled: disabled, shape: 'squircle', background: false, color: 'neutral', variant: "icon", size: "small", ...combineProps({
+                    className: cls('mask-value-button'),
+                    onClick: handleMaskValueChange,
+                    'aria-label': maskValue ? 'eye-visible' : 'eye',
+                }, MaskValueButtonProps), children: jsx(ShowHideEye, { hide: !maskValue, size: ShowHideEyeIconProps?.size ??
+                        MaskValueButtonProps?.iconSize ??
+                        'small', ...ShowHideEyeIconProps }) })), endAdornment && (jsx("div", { className: cls('end-adornment'), children: endAdornment }))] }));
+};
+const TextField = forwardRef(TextFieldComponent);
+TextField.displayName = 'SuiTextField';
+
+export { TextField as T };

package/chunks/Tooltip.js

@@ -0,0 +1,253 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { AnimatePresence } from 'framer-motion';
+import { useRef, useEffect, cloneElement, forwardRef } from 'react';
+import { logInDev, useWindowContext, useId, useControlled, useIsFocusVisible, useForkRef, useEventListener, useClasses, combineProps } from '@ringcentral/spring-base';
+import clsx from 'clsx';
+import { I as Icon } from './Icon.js';
+import { u as usePrefersReducedMotion } from './usePrefersReducedMotion.js';
+import { g as getFade } from './getFade.js';
+import { Popper } from '../Popper.js';
+import { P as PopperPaper } from './PopperPaper.js';
+
+/**
+ * Accessibility naming strategy:
+ * - Default (label mode): `title` is treated as an accessible label
+ *   - string `title` → `aria-label`
+ *   - React element `title` → `aria-labelledby` while the tooltip is open
+ * - Description mode (`describeChild = true`): `title` is treated as an accessible description
+ *   - when closed → native `title` attribute
+ *   - when open   → `aria-describedby` pointing to the tooltip id
+ */
+const ARIA_DESCRIBEDBY = 'aria-describedby';
+const ARIA_LABEL = 'aria-label';
+const ARIA_LABELLEDBY = 'aria-labelledby';
+const HTML_TITLE = 'title';
+let hasWarnedTriggerWhenDisabledNonStringTitle = false;
+function computeTooltipA11y({ title, describeChild, triggerWhenDisabled, open, tooltipId, child, }) {
+    const nameOrDescProps = {};
+    const disabledOverrides = {};
+    const titleIsString = typeof title === 'string';
+    const childProps = child.props;
+    const hasAriaDescribedBy = ARIA_DESCRIBEDBY in childProps;
+    const hasAriaLabel = ARIA_LABEL in childProps;
+    const hasAriaLabelledBy = ARIA_LABELLEDBY in childProps;
+    const hasUserTitle = HTML_TITLE in childProps;
+    if (process.env.NODE_ENV !== 'production' &&
+        triggerWhenDisabled &&
+        !titleIsString &&
+        title != null &&
+        !hasUserTitle &&
+        !hasWarnedTriggerWhenDisabledNonStringTitle) {
+        hasWarnedTriggerWhenDisabledNonStringTitle = true;
+        logInDev({
+            scope: 'Tooltip',
+            level: 'warn',
+            message: 'Using Tooltip with `triggerWhenDisabled` and a non-string `title` is not fully accessible. Use a string `title` when explaining why a control is disabled.',
+        });
+    }
+    if (describeChild) {
+        // Description mode: tooltip acts as an accessible description
+        // When closed: add title attribute (unless user provided their own)
+        // When open: swap to aria-describedby
+        if (!hasAriaDescribedBy) {
+            if (!hasUserTitle) {
+                // Only set tooltip title if user hasn't provided one
+                nameOrDescProps.title =
+                    !open && titleIsString ? title : null;
+            }
+            else if (open) {
+                // If user provided a title and tooltip is open, remove native title to prevent duplicate
+                nameOrDescProps.title = null;
+            }
+            nameOrDescProps[ARIA_DESCRIBEDBY] = open ? tooltipId : null;
+        }
+    }
+    else {
+        // Label mode (default): tooltip acts as an accessible label
+        // Use aria-label for strings, aria-labelledby for React elements
+        if (titleIsString && !hasAriaLabel) {
+            nameOrDescProps[ARIA_LABEL] = title;
+            // For string titles, Tooltip fully owns the label; always remove native title
+            nameOrDescProps.title = null;
+        }
+        else if (!titleIsString && !hasAriaLabelledBy && title) {
+            // Only set aria-labelledby if title is truthy (React element exists)
+            nameOrDescProps[ARIA_LABELLEDBY] = open ? tooltipId : null;
+            // Only remove native title when tooltip is open to prevent duplicate tooltips.
+            // When closed, leave existing title as a fallback accessible name.
+            if (open) {
+                nameOrDescProps.title = null;
+            }
+        }
+        else if (open) {
+            // Tooltip is open but we're not providing a label (e.g. child already has aria-label);
+            // still remove native title to avoid double tooltips.
+            nameOrDescProps.title = null;
+        }
+    }
+    if (triggerWhenDisabled) {
+        // When open and child does not already have aria-describedby: use tooltip id,
+        // and always remove native title on the disabled control to avoid double tooltips.
+        // When closed and title is a string: use native title as a fallback for SR on disabled.
+        if (open) {
+            if (!hasAriaDescribedBy) {
+                disabledOverrides[ARIA_DESCRIBEDBY] = tooltipId;
+            }
+            disabledOverrides.title = null;
+        }
+        else if (titleIsString) {
+            disabledOverrides.title = title;
+        }
+    }
+    return { nameOrDescProps, disabledOverrides };
+}
+
+const getDelayTime = (delay) => {
+    if (!delay)
+        return null;
+    if (delay === true)
+        return 1500;
+    return delay;
+};
+const TooltipTrigger = (props, ref) => {
+    const { renderTooltip, children, open: openProp, delay = false, onOpenStateChange, triggerWhenDisabled, triggerWrapperProps, disableFocusListener, tooltipId: tooltipIdProp, title, describeChild = false, } = props;
+    const anchorRef = useRef(null);
+    const didInitiateWithTouch = useRef(false);
+    const { document } = useWindowContext();
+    const generatedId = useId();
+    const tooltipId = tooltipIdProp ?? generatedId;
+    const [open, setOpen] = useControlled({
+        controlled: openProp,
+        default: false,
+        name: 'Tooltip',
+        state: 'open',
+    });
+    const { isFocusVisibleRef, onFocus: handleFocusVisible, onBlur: handleBlurVisible, ref: focusVisibleRef, } = useIsFocusVisible();
+    const handleAnchorRef = useForkRef(anchorRef, focusVisibleRef, children.ref);
+    const delayTimerRef = useRef();
+    useEffect(() => () => {
+        clearTimeout(delayTimerRef.current);
+    }, []);
+    const handleOpen = (e) => {
+        const delayTime = getDelayTime(delay);
+        if (delayTime) {
+            delayTimerRef.current = setTimeout(() => {
+                setOpen(true);
+                onOpenStateChange?.(e, true);
+            }, delayTime);
+        }
+        else {
+            setOpen(true);
+            onOpenStateChange?.(e, true);
+        }
+    };
+    const handleClose = (e) => {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = undefined;
+        setOpen(false);
+        onOpenStateChange?.(e, false);
+    };
+    useEventListener(anchorRef, 'mouseenter', (e) => {
+        // Ensures touch devices do not trigger the tooltip, mouseleave will never be fired and the tooltip will be stuck open
+        if (didInitiateWithTouch.current) {
+            // Immediately reset the flag, touchstart will fire again on the next tap and will set the flag back to true
+            didInitiateWithTouch.current = false;
+            return;
+        }
+        // Remove the title ahead of time from the trigger.
+        // We don't want to wait for the next render commit.
+        // We would risk displaying two tooltips at the same time (native + this one).
+        if (anchorRef.current) {
+            anchorRef.current.removeAttribute('title');
+        }
+        handleOpen(e);
+    });
+    useEventListener(anchorRef, 'mouseleave', (e) => {
+        handleClose(e);
+    });
+    useEventListener(anchorRef, 'touchstart', (e) => {
+        didInitiateWithTouch.current = true;
+    }, {
+        passive: true,
+    });
+    useEventListener(anchorRef, 'focus', (e) => {
+        if (disableFocusListener)
+            return;
+        // handleFocusVisible only support react event type, but it only need target event
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handleFocusVisible(e);
+        if (isFocusVisibleRef.current === true) {
+            handleOpen(e);
+        }
+    });
+    useEventListener(anchorRef, 'blur', (e) => {
+        // handleBlurVisible only support react event type, but this param is useless
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handleBlurVisible(e);
+        if (isFocusVisibleRef.current === false) {
+            handleClose(e);
+        }
+    });
+    // Handle Escape key to close tooltip
+    useEventListener(open ? document : null, 'keydown', (e) => {
+        if (e.key === 'Escape') {
+            handleClose(e);
+        }
+    });
+    const { nameOrDescProps, disabledOverrides } = computeTooltipA11y({
+        title,
+        describeChild,
+        triggerWhenDisabled,
+        open,
+        tooltipId,
+        child: children,
+    });
+    return (jsxs(Fragment, { children: [triggerWhenDisabled ? (jsx("span", { ...triggerWrapperProps, className: clsx('sui-tooltip-trigger-wrapper', triggerWrapperProps?.className), ref: handleAnchorRef, children: cloneElement(children, disabledOverrides) })) : (cloneElement(children, {
+                ref: handleAnchorRef,
+                ...nameOrDescProps,
+            })), renderTooltip(open, () => anchorRef.current, tooltipId)] }));
+};
+TooltipTrigger.displayName = 'SuiTooltipTrigger';
+
+const TooltipView = forwardRef((props, ref) => {
+    const { className, icon, size = 'small', classes, children, placement = 'bottom', PopperProps, color = 'neutral', anchorEl, motionProps, tooltipForceHide = false, disableInteractions = true, PopperPaperProps: popperPaperPropsProp, } = props;
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const cls = useClasses('tooltip-view', classes, className);
+    const padding = PopperProps?.padding;
+    const popperPadding = typeof padding === 'object'
+        ? {
+            top: padding.top ?? 16,
+            right: padding.right ?? 16,
+            bottom: padding.bottom ?? 16,
+            left: padding.left ?? 16,
+        }
+        : padding ?? 16;
+    return (jsx(Popper, { role: "tooltip", placement: placement, offset: 4, ...PopperProps, padding: popperPadding, className: cls('root', {
+            'force-hide': tooltipForceHide,
+            'disable-interactions': disableInteractions,
+        }), anchorEl: anchorEl, arrowHeight: 6, arrowPadding: 8, ref: ref, children: ({ arrowRef, arrowStyle }) => (jsxs(PopperPaper, { ...(motionProps ?? getFade({ prefersReducedMotion })), ...combineProps({
+                arrowRef,
+                arrowStyle,
+                classes: {
+                    root: cls('paper', color),
+                    content: cls('paper-content', size),
+                },
+            }, popperPaperPropsProp), children: [icon && jsx(Icon, { symbol: icon, size: "small", className: cls('icon') }), jsx("div", { className: cls('content', `content-${size}`), children: children })] })) }));
+});
+TooltipView.displayName = 'SuiTooltipView';
+
+const Tooltip = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Tooltip' });
+    const { children, open: openProp, delay, onOpenStateChange, title, disableFocusListener, disableBackdropAnimation, triggerWhenDisabled, triggerWrapperProps, PopperProps, describeChild = false, ...rest } = props;
+    const renderTooltip = (open, getAnchorEl, tooltipId) => {
+        // hides '', null/undefined, false, NaN)
+        const effectiveOpen = open && !(!title && title !== 0);
+        const content = effectiveOpen ? (jsx(TooltipView, { disableInteractions: openProp === undefined, ...rest, PopperProps: { ...PopperProps, id: tooltipId }, anchorEl: getAnchorEl, ref: ref, children: title })) : null;
+        return disableBackdropAnimation ? (jsx(Fragment, { children: content })) : (jsx(AnimatePresence, { children: content }));
+    };
+    return (jsx(TooltipTrigger, { disableFocusListener: disableFocusListener, open: openProp, delay: delay, onOpenStateChange: onOpenStateChange, renderTooltip: renderTooltip, triggerWhenDisabled: triggerWhenDisabled, triggerWrapperProps: triggerWrapperProps, tooltipId: PopperProps?.id, title: title, describeChild: describeChild, children: children }));
+});
+Tooltip.displayName = 'SuiTooltip';
+
+export { Tooltip as T, TooltipTrigger as a, TooltipView as b };