@ringcentral/spring-ui 1.7.0

package/src/Dialog/Dialog.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DialogProps } from './Dialog.type';
+import dialogStyle from './styles/Dialog.css';
+declare const Dialog: import("react").ForwardRefExoticComponent<Pick<DialogProps, "children" | "onKeyDown" | "onKeyUp" | "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" | "size" | "container" | "isEnabled" | "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" | "onMouseDown" | "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" | "disableRestoreFocus" | "disableAutoFocus" | "disableEnforceFocus" | "hideBackdrop" | "disableBackdropClick" | "onBackdropClick" | "disableEscapeKeyDown" | "onEscapeKeyDown" | "onClose" | "backdropProps" | "blocking" | "motionProps" | "disablePortal" | "onExitComplete" | "disableBackdropAnimation" | "disableScrollLock" | "bodyProps"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DialogTitle: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DialogContent: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DialogActions: import("react").ForwardRefExoticComponent<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
+export { Dialog, DialogActions, DialogContent, dialogStyle, DialogTitle };

package/src/Dialog/Dialog.type.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithRef, ReactNode, SyntheticEvent } from 'react';
+import { GroupedMotionProps, HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { Modal, ModalCloseReason } from '../Modal';
+import { DialogClassesKey } from './Dialog.classes';
+export declare type DialogSize = 'small' | 'medium' | 'large' | 'fullHeight' | 'fullScreen';
+export declare type DialogPlacement = 'left' | 'right';
+export declare type DialogCloseReason = ModalCloseReason | 'closeButtonClick';
+export declare type DialogProps = StandardProps<{
+    /**
+     * The size of the dialog.
+     * @default "medium"
+     */
+    size?: DialogSize;
+    /**
+     * The placement of the dialog. Only applies to size `fullHeight`.
+     * @default "right"
+     */
+    placement?: DialogPlacement;
+    /**
+     * The props passed to the body slot of body.
+     */
+    bodyProps?: GroupedMotionProps<ComponentPropsWithRef<'div'> & HTMLDataAttribute>;
+    open: boolean;
+    onClose?: (event: SyntheticEvent<HTMLElement | HTMLButtonElement>, reason: DialogCloseReason) => void;
+    children?: ReactNode;
+}, DialogClassesKey, typeof Modal>;

package/src/Dialog/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Dialog.classes';
+export * from './Dialog';
+export * from './Dialog.type';

package/src/Divider/Divider.classes.d.ts

@@ -0,0 +1,10 @@
+import type { CamelCase } from 'type-fest';
+import type { DividerOrientation, DividerVariant } from './Divider.type';
+declare type DividerStatus = 'has-title';
+export declare type BaseDividerClassesKey = 'root' | 'flex-item' | DividerStatus | DividerVariant | DividerOrientation | `${DividerOrientation}-${DividerStatus}` | `${DividerVariant}-${DividerOrientation}`;
+export declare type DividerClassesKey = CamelCase<BaseDividerClassesKey>;
+export declare type DividerClasses = {
+    name: 'divider';
+    classes: BaseDividerClassesKey;
+};
+export {};

package/src/Divider/Divider.d.ts

@@ -0,0 +1,4 @@
+import { DividerComponent } from './Divider.type';
+import dividerStyle from './styles/Divider.css';
+declare const Divider: DividerComponent;
+export { Divider, dividerStyle };

package/src/Divider/Divider.type.d.ts

@@ -0,0 +1,35 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { DividerClassesKey } from './Divider.classes';
+declare type DefaultElementType = 'hr';
+declare type ExtendElementType = 'hr' | 'li' | 'div';
+export declare type DividerVariant = 'full' | 'middle';
+export declare type DividerOrientation = 'horizontal' | 'vertical';
+declare type BaseDividerProps = WithClassesProps<{
+    /**
+     * @default 'full'
+     */
+    variant?: DividerVariant;
+    /**
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * The title of the Divider. Only used for horizontal Dividers.
+     * Make sure to pass an `after:bg-color` className.
+     */
+    title?: string;
+    /**
+     * If true, a vertical divider will have the correct height when used in flex container.
+     * (By default, a vertical divider will have a calculated height of 0px
+     * if it is the child of a flex container.)
+     *
+     * @default false
+     */
+    flexItem?: boolean;
+}, DividerClassesKey>;
+export declare type DividerProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseDividerProps, T>;
+export declare type DividerComponent = OverridableComponent<{
+    props: BaseDividerProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/Divider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Divider.classes';
+export * from './Divider';
+export * from './Divider.type';

package/src/DragHandle/DragHandle.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+import type { DragHandleAnchor } from './DragHandle.type';
+export declare type BaseDragHandleClassesKey = 'root' | 'bar' | DragHandleAnchor;
+export declare type DragHandleClassesKey = CamelCase<BaseDragHandleClassesKey>;
+export declare type DragHandleClasses = {
+    name: 'drag-handle';
+    classes: BaseDragHandleClassesKey;
+};

package/src/DragHandle/DragHandle.d.ts

@@ -0,0 +1,4 @@
+import { DragHandleComponent } from './DragHandle.type';
+import dragHandleStyle from './styles/DragHandle.css';
+declare const DragHandle: DragHandleComponent;
+export { DragHandle, dragHandleStyle };

package/src/DragHandle/DragHandle.type.d.ts

@@ -0,0 +1,17 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { DragHandleClassesKey } from './DragHandle.classes';
+declare type DefaultElementType = 'div';
+export declare type DragHandleAnchor = 'top' | 'bottom';
+declare type BaseDragHandleProps = WithClassesProps<{
+    /**
+     * The anchor position to determine handle orientation
+     * @default 'top'
+     */
+    anchor?: DragHandleAnchor;
+}, DragHandleClassesKey>;
+export declare type DragHandleProps<T extends DefaultElementType = DefaultElementType> = OverridableProps<BaseDragHandleProps, T>;
+export declare type DragHandleComponent = OverridableComponent<{
+    props: BaseDragHandleProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/DragHandle/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DragHandle';
+export * from './DragHandle.classes';
+export * from './DragHandle.type';

package/src/Drawer/Drawer.classes.d.ts

@@ -0,0 +1,10 @@
+import type { CamelCase, KebabCase } from 'type-fest';
+import type { DrawerAnchor, DrawerVariant } from './Drawer.type';
+export declare type DrawerAnchorClasses = KebabCase<DrawerAnchor>;
+export declare type DrawerVariantClasses = KebabCase<DrawerVariant>;
+export declare type BaseDrawerClassesKey = 'root' | 'body' | 'header' | 'content' | 'footer' | `anchor-${DrawerAnchorClasses}` | `body-${DrawerAnchorClasses}` | 'non-blocking' | `${DrawerVariantClasses}-${DrawerAnchorClasses}`;
+export declare type DrawerClassesKey = CamelCase<BaseDrawerClassesKey>;
+export declare type DrawerClasses = {
+    name: 'drawer';
+    classes: BaseDrawerClassesKey;
+};

package/src/Drawer/Drawer.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { DrawerProps } from './Drawer.type';
+import drawerStyles from './styles/Drawer.css';
+/**
+ * Drawer Component - Base drawer without gesture support
+ *
+ * A clean, lightweight drawer component that provides basic modal/slide functionality.
+ * For gesture support, use SwipeableDrawer which builds on top of this component.
+ *
+ * @example
+ * ```tsx
+ * // Simple navigation drawer
+ * <Drawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="left"
+ *   variant="temporary"
+ * >
+ *   <Navigation />
+ * </Drawer>
+ *
+ * // Bottom sheet without gestures
+ * <Drawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="bottom"
+ * >
+ *   <Content />
+ * </Drawer>
+ * ```
+ */
+declare const Drawer: import("react").ForwardRefExoticComponent<Pick<DrawerProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "footer" | "header" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "anchor" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "container" | "isEnabled" | "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" | "onMouseDown" | "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}` | "variant" | "open" | "disableRestoreFocus" | "disableAutoFocus" | "disableEnforceFocus" | "hideBackdrop" | "disableBackdropClick" | "onBackdropClick" | "disableEscapeKeyDown" | "onEscapeKeyDown" | "onClose" | "backdropProps" | "blocking" | "motionProps" | "disablePortal" | "onExitComplete" | "disableBackdropAnimation" | "disableScrollLock" | "bodyProps" | "measurementRefs" | "headerProps"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Drawer, drawerStyles };

package/src/Drawer/Drawer.type.d.ts

@@ -0,0 +1,107 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { GroupedMotionProps, HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { Modal, ModalCloseReason } from '../Modal';
+import { DrawerClassesKey } from './Drawer.classes';
+/**
+ * @fileoverview Drawer component types and interfaces
+ *
+ * **Note**: All types are compatible with both `Drawer` and `SwipeableDrawer` components.
+ */
+/**
+ * Side from which the drawer will slide in and anchor to.
+ */
+export declare type DrawerAnchor = 'bottom' | 'left' | 'right' | 'top';
+/**
+ * Drawer behavior variant.
+ *
+ * - **'temporary'**: Drawer overlays content with backdrop, closes on outside click
+ */
+export declare type DrawerVariant = 'temporary';
+export declare type DrawerCloseReason = ModalCloseReason;
+export declare type DrawerProps = StandardProps<{
+    /**
+     * Side from which the drawer will slide in and anchor to.
+  
+     * @default 'left'
+     */
+    anchor?: DrawerAnchor;
+    /**
+     * Controls whether the drawer is open or closed.
+     */
+    open: boolean;
+    /**
+     * Main content of the drawer. This is the scrollable area between header and footer.
+     */
+    children?: ReactNode;
+    /**
+     * Header content displayed at the top of the drawer.
+     *
+     * **Important**: With SwipeableDrawer, the header becomes the drag handle.
+     *
+     * @default undefined
+     */
+    header?: ReactNode;
+    /**
+     * Footer content displayed at the bottom of the drawer.
+     *
+     * @default undefined
+     */
+    footer?: ReactNode;
+    /**
+     * Props passed to the main drawer body container.
+     */
+    bodyProps?: GroupedMotionProps<ComponentPropsWithRef<'div'> & HTMLDataAttribute>;
+    /**
+     * Drawer behavior variant.
+     *
+     * - **'temporary'**: Overlays content, closes on backdrop click, traps focus
+     *
+     * @default 'temporary'
+     */
+    variant?: DrawerVariant;
+    /**
+     * Controls whether the drawer blocks interaction with the rest of the page.
+     *
+     * **When true (default)**:
+     * - Focus is trapped inside drawer
+     * - Page scrolling is disabled
+     * - Backdrop clicks close drawer
+     * - ESC key closes drawer
+     * - Screen readers announce modal
+     *
+     * **When false**:
+     * - Users can interact with page content
+     * - No focus trapping
+     * - No scroll locking
+     *
+     * @default true
+     */
+    blocking?: boolean;
+    /**
+     * Internal measurement refs used by SwipeableDrawer.
+     *
+     * @internal
+     */
+    measurementRefs?: {
+        /**
+         * ref for the header element for measurements.
+         */
+        header?: React.RefObject<HTMLDivElement>;
+        /**
+         * ref for the footer element for measurements.
+         */
+        footer?: React.RefObject<HTMLDivElement>;
+        /**
+         * ref for the content element for gesture measurements.
+         * Points specifically to the content area for precise content height measurement.
+         * The gesture system needs to measure content height separately.
+         */
+        content?: React.RefObject<HTMLDivElement>;
+    };
+    /**
+     * Additional props to apply to the header element for gesture binding.
+     *
+     * @internal
+     */
+    headerProps?: React.HTMLAttributes<HTMLDivElement>;
+}, DrawerClassesKey, typeof Modal>;

package/src/Drawer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Drawer.classes';
+export * from './Drawer';
+export * from './Drawer.type';

package/src/Dropdown/Dropdown.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseDropdownClassesKey = 'value' | 'chevron' | 'activated' | 'button' | 'label' | 'colon' | 'root';
+export declare type DropdownClassesKey = CamelCase<BaseDropdownClassesKey>;
+export declare type DropdownClasses = {
+    name: 'dropdown';
+    classes: BaseDropdownClassesKey;
+};

package/src/Dropdown/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import { DropdownComponent } from './Dropdown.type';
+import dropdownStyle from './styles/Dropdown.css';
+declare const Dropdown: DropdownComponent;
+export { Dropdown, dropdownStyle };

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

@@ -0,0 +1,96 @@
+import { HTMLDataAttribute, StandardProps, UseFocusVisibleOptions } from '@ringcentral/spring-base';
+import { ComponentProps, ComponentPropsWithRef, ReactElement, ReactNode, Ref } from 'react';
+import { VirtualizedMenuProps } from '../VirtualizedMenu';
+import { MenuProps } from '../Menu';
+import { DropdownClassesKey } from './Dropdown.classes';
+export declare type DropdownProps<T = string, D = unknown> = StandardProps<{
+    /**
+     * The default selected value. Use when the component is uncontrolled.
+     */
+    defaultValue?: T | null;
+    /**
+     * The selected value.
+     * Set to `null` to deselect all options.
+     */
+    value?: T | null;
+    /**
+     * Callback fired when an option is selected.
+     */
+    onChange?: (value: T | null) => void;
+    /**
+     * Text to show when there is no selected value.
+     */
+    placeholder?: ReactNode;
+    /**
+     * props applied to root
+     */
+    rootProps?: Omit<ComponentProps<'div'>, 'className' | 'ref'> & HTMLDataAttribute;
+    /**
+     * props applied to button
+     */
+    buttonProps?: Omit<ComponentPropsWithRef<'button'>, 'className'> & HTMLDataAttribute & Pick<UseFocusVisibleOptions, 'onFocusVisible'>;
+    /**
+     * props applied to menu
+     */
+    MenuProps?: (Omit<VirtualizedMenuProps, 'open' | 'anchorEl' | 'onClose' | 'initialFocus' | 'data' | 'children'> | Omit<MenuProps, 'open' | 'anchorEl' | 'onClose' | 'children'>) & HTMLDataAttribute;
+    ref?: Ref<HTMLDivElement>;
+    buttonRef?: Ref<HTMLButtonElement>;
+    /**
+     * When enabled, the menu items will be rendered in a virtualized list.
+     * Set this prop to `true` when you have a large number of options to render.
+     * Please note that this prop will default to `false` in the next major version.
+     * @default true
+     */
+    virtualize?: boolean;
+    /**
+     * Render the selected value.
+     *
+     * @param value The `value` provided to the component.
+     * @returns {ReactNode}
+     */
+    renderValue?: (value: T) => React.ReactNode;
+    /**
+     * If `true`, the select element is focused during the first mount
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the select is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the select will be initially open.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controls the open state of the select's menu.
+     * @default undefined
+     */
+    open?: boolean;
+    /**
+     * Name of the element. For example used by the server to identify the fields in form submits.
+     * If the name is provided, the component will render a hidden input element that can be submitted to a server.
+     */
+    name?: string;
+    /**
+     * Callback fired when the component requests to be opened.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * label for component
+     */
+    label?: string;
+    data: D[];
+    children: ReactNode | VirtualizedMenuProps['children'];
+    /**
+     * Get selected item index to focus item when open dropdown.
+     * If no provide this handler, will compare value with `data` by default.
+     */
+    getSelectedIndex?: (value: T) => number;
+}, DropdownClassesKey>;
+export interface DropdownComponent {
+    <V = string, D = unknown>(props: DropdownProps<V, D>): ReactElement;
+    displayName?: string;
+}

package/src/Dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Dropdown.classes';
+export * from './Dropdown';
+export * from './Dropdown.type';

package/src/EmptyState/EmptyState.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseEmptyStateClassesKey = 'root' | 'icon' | 'text-container' | 'title' | 'description' | 'actions';
+export declare type EmptyStateClassesKey = CamelCase<BaseEmptyStateClassesKey>;
+export declare type EmptyStateClasses = {
+    name: 'empty-state';
+    classes: BaseEmptyStateClassesKey;
+};

package/src/EmptyState/EmptyState.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { EmptyStateProps } from './EmptyState.type';
+import emptyStateStyle from './styles/EmptyState.css';
+declare const EmptyState: import("react").ForwardRefExoticComponent<Pick<EmptyStateProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "description" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "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" | "onMouseDown" | "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}` | "icon" | "actions"> & import("react").RefAttributes<HTMLDivElement>>;
+export { EmptyState, emptyStateStyle };

package/src/EmptyState/EmptyState.type.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { StandardProps } from '@ringcentral/spring-base';
+import { EmptyStateClassesKey } from './EmptyState.classes';
+export declare type EmptyStateProps = StandardProps<{
+    /**
+     * The icon to display at the top of the component.
+     */
+    icon?: React.ComponentType;
+    /**
+     * The title to display.
+     */
+    title?: React.ReactNode;
+    /**
+     * The description to display.
+     */
+    description?: React.ReactNode;
+    /**
+     * The actions to display at the bottom of the component.
+     */
+    actions?: React.ReactNode[];
+}, EmptyStateClassesKey, 'div'>;

package/src/EmptyState/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EmptyState.classes';
+export * from './EmptyState';
+export * from './EmptyState.type';

package/src/FabButton/FabButton.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseFabButtonClassesKey = 'root' | 'activated' | 'small' | 'large';
+export declare type FabButtonClassesKey = CamelCase<BaseFabButtonClassesKey>;
+export declare type FabButtonClasses = {
+    name: 'fab-button';
+    classes: BaseFabButtonClassesKey;
+};

package/src/FabButton/FabButton.d.ts

@@ -0,0 +1,4 @@
+import { FabButtonComponent } from './FabButton.type';
+import fabButtonStyle from './styles/FabButton.css';
+declare const FabButton: FabButtonComponent;
+export { FabButton, fabButtonStyle };

package/src/FabButton/FabButton.type.d.ts

@@ -0,0 +1,22 @@
+import { UseButtonParameters } from '@mui/base';
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { ComponentType } from 'react';
+import { SquircleProps } from '../Squircle';
+import { FabButtonClassesKey } from './FabButton.classes';
+declare type DefaultElementType = 'button';
+declare type ExtendElementType = 'button';
+declare type BaseFabButtonProps = WithClassesProps<{
+    /** Icon */
+    symbol?: ComponentType;
+    /**
+     * The size of the component.
+     * @default 'large'
+     */
+    size?: 'large' | 'small';
+} & Omit<UseButtonParameters, 'href' | 'to' | 'focusableWhenDisabled' | 'disabled'>, FabButtonClassesKey>;
+export declare type FabButtonProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseFabButtonProps, ComponentType<SquircleProps<T>>>;
+export declare type FabButtonComponent = OverridableComponent<{
+    props: BaseFabButtonProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/FabButton/index.d.ts

@@ -0,0 +1,3 @@
+export * from './FabButton.classes';
+export * from './FabButton';
+export * from './FabButton.type';

package/src/FocusTrap/FocusTrap.d.ts

@@ -0,0 +1,49 @@
+import { FocusTrapProps as MuiFocusTrapProps } from '@mui/base';
+import { FunctionComponent, Ref } from 'react';
+declare type FocusTrapAction = {
+    /**
+     * get the current focus trap is enabled or not
+     */
+    isEnabled: () => boolean;
+};
+declare type FocusTrapProps = Omit<MuiFocusTrapProps, 'isEnabled'> & {
+    /**
+     * action ref to get the current focus trap is enabled or not
+     */
+    action?: Ref<FocusTrapAction>;
+};
+/**
+ * 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;
+ * }
+ * ```
+ */
+declare const FocusTrap: FunctionComponent<FocusTrapProps>;
+export { FocusTrap };
+export type { FocusTrapProps };

package/src/FocusTrap/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FocusTrap';
+export * from './useFocusTrapStack';

package/src/FocusTrap/useFocusTrapStack.d.ts

@@ -0,0 +1,16 @@
+export interface UseFocusTrapStackOptions {
+    /**
+     * Whether the focus trap is open
+     */
+    open: boolean;
+}
+export interface UseFocusTrapStackReturn {
+    /**
+     * Check if the current focus trap is enabled (i.e., is the topmost in the stack)
+     */
+    isEnabled: () => boolean;
+}
+/**
+ * Hook to manage focus trap stack for proper layering and focus management
+ */
+export declare const useFocusTrapStack: ({ open, }: UseFocusTrapStackOptions) => UseFocusTrapStackReturn;

package/src/FormField/FormField.classes.d.ts

@@ -0,0 +1,9 @@
+import type { CamelCase } from 'type-fest';
+import type { FormFieldSize, FormFieldVariant } from './FormField.type';
+export declare type FormFieldSlot = 'container' | 'helper-text' | 'focus-effect' | 'content' | 'label';
+export declare type BaseFormFieldClassesKey = 'root' | 'error' | FormFieldVariant | FormFieldSlot | `error-${FormFieldSlot}` | `error-${FormFieldVariant}-content` | FormFieldSize | `${FormFieldSize}-${FormFieldSlot}` | `${FormFieldVariant}-${FormFieldSize}` | `${FormFieldVariant}-${FormFieldSlot}`;
+export declare type FormFieldClassesKey = CamelCase<BaseFormFieldClassesKey>;
+export declare type FormFieldClasses = {
+    name: 'form-field';
+    classes: BaseFormFieldClassesKey;
+};

package/src/FormField/FormField.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FormFieldProps } from './FormField.type';
+import formFieldStyle from './styles/FormField.css';
+declare const FormField: import("react").ForwardRefExoticComponent<Pick<FormFieldProps, "error" | "disabled" | "label" | "classes" | "focused" | "required" | "key" | "size" | `data-${string}` | "htmlFor" | keyof import("react").HTMLAttributes<HTMLDivElement> | "helperText" | "labelProps" | "contentRef" | "contentProps" | "FormHelperTextProps" | "variant"> & import("react").RefAttributes<HTMLDivElement>>;
+export { FormField, formFieldStyle };