@ringcentral/spring-ui 1.7.0

package/src/TableHead/TableHead.type.d.ts

@@ -0,0 +1,21 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { ElementType } from 'react';
+import { TableHeadClassesKey } from './TableHead.classes';
+declare type DefaultElementType = 'thead';
+declare type ExtendElementType = ElementType;
+declare type BaseTableHeadProps = WithClassesProps<{
+    /**
+     * The content of the component, normally `TableRow`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Use default table background color.
+     */
+    useDefaultBgColor?: boolean;
+}, TableHeadClassesKey>;
+export declare type TableHeadProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableHeadProps, T>;
+export declare type TableHeadComponent = OverridableComponent<{
+    props: BaseTableHeadProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/TableHead/index.d.ts

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

package/src/TablePagination/TablePagination.classes.d.ts

@@ -0,0 +1,8 @@
+import { CamelCase } from 'type-fest';
+declare type BaseTablePaginationClassesKey = 'root' | 'content' | 'range-container' | 'rows-per-page-controls' | 'rows-per-page-label' | 'range-label' | 'current-page-controls';
+export declare type TablePaginationClassesKey = CamelCase<BaseTablePaginationClassesKey>;
+export declare type TablePaginationClasses = {
+    name: 'table-pagination';
+    classes: BaseTablePaginationClassesKey;
+};
+export {};

package/src/TablePagination/TablePagination.d.ts

@@ -0,0 +1,4 @@
+import { TablePaginationComponent } from './TablePagination.type';
+import tablePaginationStyles from './styles/TablePagination.css';
+declare const TablePagination: TablePaginationComponent;
+export { TablePagination, tablePaginationStyles };

package/src/TablePagination/TablePagination.type.d.ts

@@ -0,0 +1,73 @@
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { ElementType } from 'react';
+import { IconButtonProps } from '../IconButton';
+import { SelectProps } from '../Select';
+import { TablePaginationClassesKey } from './TablePagination.classes';
+declare type DefaultElementType = 'td';
+declare type ExtendElementType = ElementType;
+export declare type BaseTablePaginationProps = WithClassesProps<{
+    /**
+     * The variant to use.
+     * `range` displays the current range of rows shown with no page size controls.
+     * `page` displays the current page with a control to select which page to show.
+     * `page-size` displays the current page with a control to change the page size.
+     * @default 'range'
+     */
+    variant?: 'range' | 'select-page' | 'page-size';
+    /**
+     * The zero-based index of the current page.
+     */
+    page: number;
+    /**
+     * The total number of rows.
+     * @default -1
+     */
+    count?: number;
+    /**
+     * The total number of rows to show per page.
+     * @default 10
+     */
+    rowsPerPage?: number;
+    /**
+     * The label to show to the left of the page size control that sets the number of rows per page.
+     * Only applies to variant `page-size`
+     * @default 'Rows per page'
+     */
+    rowsPerPageLabel?: string;
+    /**
+     * The options to be shown in the Select input for the number of rows to show per page.
+     * Required for variants `page-size` and `select-page`
+     * @default '[10, 25, 50, 100]'
+     */
+    rowsPerPageOptions?: number[];
+    /**
+     * Callback fires when the number of rows to show per page is changed.
+     * Required for variants `page-size` and `select-page`
+     */
+    onRowsPerPageChange?: SelectProps['onChange'];
+    /**
+     * The label to use to separate the range of rows shown or page numbers.
+     * Used in `range` variant: `1-10 ${rangeSeparatorLabel} 147`
+     * Used in `select-page` variant: `1 ${rangeSeparatorLabel} 15`
+     * @default 'of'
+     */
+    rangeSeparatorLabel?: string;
+    /**
+     * Props applied to the `IconButton` component for the previous page button.
+     */
+    previousPageButtonProps?: IconButtonProps;
+    /**
+     * Props applied to the `IconButton` component for the next page button.
+     */
+    nextPageButtonProps?: IconButtonProps;
+    /**
+     * Callback fired when the current page is changed.
+     */
+    onPageChange?: (e: React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLInputElement>, page: number) => void;
+}, TablePaginationClassesKey>;
+export declare type TablePaginationProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTablePaginationProps, T>;
+export declare type TablePaginationComponent = OverridableComponent<{
+    props: BaseTablePaginationProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/TablePagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TablePagination';
+export * from './TablePagination.type';

package/src/TableRow/TableRow.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTableRowClassesKey = 'root' | 'body' | 'footer' | 'head' | 'hoverable' | 'clickable' | 'focusVisible';
+export declare type TableRowClassesKey = CamelCase<BaseTableRowClassesKey>;
+export declare type TableRowClasses = {
+    name: 'table-row';
+    classes: BaseTableRowClassesKey;
+};

package/src/TableRow/TableRow.d.ts

@@ -0,0 +1,4 @@
+import tableRowStyle from './styles/TableRow.css';
+import { TableRowComponent } from './TableRow.type';
+declare const TableRow: TableRowComponent;
+export { TableRow, tableRowStyle };

package/src/TableRow/TableRow.type.d.ts

@@ -0,0 +1,34 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { ElementType } from 'react';
+import { TableRowClassesKey } from './TableRow.classes';
+declare type DefaultElementType = 'tr';
+declare type ExtendElementType = ElementType;
+declare type BaseTableRowProps = WithClassesProps<{
+    /**
+     * Should be valid `<tr>` children such as `TableCell`.
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, the table row will shade on hover.
+     * Noted: hover style will not be applied to rows in the head (TableHead).
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * If `true`, cursor will be pointer on hover and hover style will be applied.
+     * It will be set to `true` automatically when onClick prop is defined.
+     * Noted: clickable style will not be applied to rows in the head (TableHead).
+     */
+    clickable?: boolean;
+    /**
+     * If `true`, the table row will have the selected shading.
+     * @default false
+     */
+    selected?: boolean;
+}, TableRowClassesKey>;
+export declare type TableRowProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseTableRowProps, T>;
+export declare type TableRowComponent = OverridableComponent<{
+    props: BaseTableRowProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/TableRow/index.d.ts

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

package/src/Tabs/TabMoreMenu.d.ts

@@ -0,0 +1,36 @@
+import { ComponentType } from 'react';
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { BadgeProps as BadgeCompProps } from '../Badge';
+import { IconButtonProps } from '../IconButton';
+import { MenuProps } from '../Menu';
+import type { TabProps } from '../Tab/Tab.type';
+import { TooltipProps } from '../Tooltip';
+import { TabMoreMenuClassesKey } from './Tabs.classes';
+export declare type MoreMenuProps = StandardProps<{
+    /**
+     * Props applied to the Tooltip component shown when hovering over
+     * the more Icon Button. If `TooltipProps.title` is not a truthy
+     * value, no Tooltip will be shown.
+     */
+    TooltipProps?: Omit<TooltipProps, 'children'> & HTMLDataAttribute;
+    /**
+     * Props applied to Badge component
+     */
+    BadgeProps?: BadgeCompProps & HTMLDataAttribute;
+    /**
+     * Props applied to IconButton component
+     */
+    ButtonProps?: Omit<IconButtonProps, 'variant' | 'className' | 'onClick'> & HTMLDataAttribute;
+    /** Props applied to Menu component */
+    MenuProps?: Omit<MenuProps, 'anchorEl' | 'open'> & HTMLDataAttribute;
+    /**
+     * custom MenuItem render component
+     * @default MenuItem
+     */
+    MenuItemComponent?: ComponentType<TabProps>;
+}, TabMoreMenuClassesKey, 'div'>;
+declare type TabMoreMenuProps = MoreMenuProps & {
+    menuItems: TabProps[];
+};
+declare const TabMoreMenu: import("react").ForwardRefExoticComponent<Pick<TabMoreMenuProps, "classes" | "key" | `data-${string}` | keyof import("react").HTMLAttributes<HTMLDivElement> | "TooltipProps" | "MenuProps" | "menuItems" | "BadgeProps" | "ButtonProps" | "MenuItemComponent"> & import("react").RefAttributes<HTMLDivElement>>;
+export { TabMoreMenu };

package/src/Tabs/TabScrollButton.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { IconButtonProps } from '../IconButton';
+import { TabScrollButtonClassesKey } from './Tabs.classes';
+export declare type TabScrollButtonProps = StandardProps<{
+    /**
+     * The direction the button should indicate
+     * @default 'left'
+     */
+    direction?: 'left' | 'right';
+    /**
+     * Callback fired when the button is clicked
+     */
+    onClick?: IconButtonProps['onClick'];
+    /**
+     * Props applied to IconButton component
+     */
+    ButtonProps?: Omit<IconButtonProps, 'variant' | 'className' | 'onClick'> & HTMLDataAttribute;
+}, TabScrollButtonClassesKey, 'div'>;
+declare const TabScrollButton: import("react").ForwardRefExoticComponent<Pick<TabScrollButtonProps, "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" | "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}` | "direction" | "ButtonProps"> & import("react").RefAttributes<HTMLDivElement>>;
+export { TabScrollButton };

package/src/Tabs/Tabs.classes.d.ts

@@ -0,0 +1,19 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTabsClassesKey = 'root' | 'scroller' | 'scrollable' | 'tab-list' | 'underline' | 'indicator' | 'compact' | 'pill' | 'floating-underline' | 'scroll-left' | 'scroll-right' | 'scroll-both';
+export declare type TabsClassesKey = CamelCase<BaseTabsClassesKey>;
+export declare type TabsClasses = {
+    name: 'tabs';
+    classes: BaseTabsClassesKey;
+};
+export declare type BaseTabMoreMenuClassesKey = 'root' | 'button' | 'badge-root' | 'pill-badge';
+export declare type TabMoreMenuClassesKey = CamelCase<BaseTabMoreMenuClassesKey>;
+export declare type TabMoreMenuClasses = {
+    name: 'tab-more-menu';
+    classes: BaseTabMoreMenuClassesKey;
+};
+export declare type BaseTabScrollButtonClassesKey = 'root' | 'start' | 'button';
+export declare type TabScrollButtonClassesKey = CamelCase<BaseTabScrollButtonClassesKey>;
+export declare type TabScrollButtonClasses = {
+    name: 'tab-scroll-button';
+    classes: BaseTabScrollButtonClassesKey;
+};

package/src/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import tabsStyle from './styles/Tabs.css';
+import { TabsProps } from './Tabs.type';
+declare const Tabs: import("react").ForwardRefExoticComponent<Pick<TabsProps, "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" | "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" | "pill" | "pillGap" | "onGroupInfoUpdate" | "MoreMenuProps" | "ScrollButtonStartProps" | "ScrollButtonEndProps" | "enableScrollButtons"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Tabs, tabsStyle };

package/src/Tabs/Tabs.type.d.ts

@@ -0,0 +1,54 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { ReactNode } from 'react';
+import type { TabProps } from '../Tab/Tab.type';
+import { MoreMenuProps } from './TabMoreMenu';
+import { TabsClassesKey } from './Tabs.classes';
+import { TabScrollButtonProps } from './TabScrollButton';
+export declare type TabsProps = StandardProps<{
+    /**
+     * A set of tabs
+     */
+    children: ReactNode;
+    /**
+     * If 'scrollable', tabs will be scrollable.
+     * All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift mouse wheel, etc.)
+     * @default 'standard'
+     */
+    variant?: 'standard' | 'scrollable' | 'moreMenu';
+    /**
+     * If set to `true`, the tab will adopt a pill shape.
+     */
+    pill?: boolean;
+    /**
+     * The color scheme to use for tabs.
+     * - 'default': Uses cobranding colors for non-pill tabs, grey colors for pill tabs
+     * - 'cobranding': Uses cobranding colors for all tab types
+     * @default 'default'
+     */
+    color?: 'default' | 'cobranding';
+    /**
+     * Specifies the gap between tabs when in pill mode. Unit: px.
+     * Important for 'moreMenu' variant to calculate the width of tabs accurately.
+     * @default 4
+     */
+    pillGap?: number;
+    /**
+     * Callback invoked when using variant 'moreMenu' and the group info is updated.
+     */
+    onGroupInfoUpdate?: (visibleItemValues: TabProps['value'][], hiddenItemValues: TabProps['value'][]) => void;
+    /** Props applied to TabMoreMenu when variant is 'moreMenu'  */
+    MoreMenuProps?: MoreMenuProps;
+    /**
+     * Props applied to the TabScrollButtonStart when variant is 'scrollable' and pill is `true`
+     */
+    ScrollButtonStartProps?: TabScrollButtonProps['ButtonProps'];
+    /**
+     * Props applied to the TabScrollButtonEnd when variant is 'scrollable' and pill is `true`
+     */
+    ScrollButtonEndProps?: TabScrollButtonProps['ButtonProps'];
+    /**
+     * Whether to enable scroll buttons when variant is 'scrollable' and pill is `true`
+     * @default true
+     */
+    enableScrollButtons?: boolean;
+}, TabsClassesKey, 'div'>;

package/src/Tabs/TabsContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type TabsContextValue = {
+    pill?: boolean;
+    pillGap?: number;
+    color?: 'default' | 'cobranding';
+    setFloatingUnderlineVisibility?: (isVisible: boolean) => void;
+};
+export declare const TabsContext: import("react").Context<TabsContextValue>;
+export declare const useTabsContext: () => TabsContextValue;

package/src/Tabs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useComputedTabs';
+export * from './useTabsScroller';

package/src/Tabs/hooks/useComputedTabs.d.ts

@@ -0,0 +1,20 @@
+import { MotionValue } from 'framer-motion';
+import React from 'react';
+import { TabProps } from '../../Tab/Tab.type';
+import { TabsProps } from '../Tabs.type';
+export declare function useComputedTabs(props: Pick<TabsProps, 'children' | 'pill' | 'variant' | 'onGroupInfoUpdate'> & Required<Pick<TabsProps, 'pillGap'>> & {
+    tabListRef: React.RefObject<HTMLDivElement>;
+    scrollerRef: React.RefObject<HTMLDivElement>;
+    moreRef: React.RefObject<HTMLDivElement>;
+    floatingUnderlineWidthMotionValue: MotionValue<number>;
+    floatingUnderlineLeftMotionValue: MotionValue<number>;
+    value: string | number | null;
+}): {
+    visibleTabsChildren: any[];
+    showMore: boolean;
+    moreMenuItems: TabProps[];
+    processedChildren: Map<any, any>;
+    getSelectedTabElement: () => Element | undefined;
+    computeMoreMenuWithCache: () => void;
+    computeFloatingUnderline: (withoutAnimation?: any) => void;
+};

package/src/Tabs/hooks/useTabsScroller.d.ts

@@ -0,0 +1,48 @@
+import { motionTransition } from '@ringcentral/spring-theme';
+import React from 'react';
+import { TabScrollButtonProps } from '../TabScrollButton';
+export declare type UseTabsScrollerParameters = {
+    /**
+     * Determines whether the scrolling functionality is enabled.
+     * If `true`, the scroller will respond to scroll events and user interactions.
+     */
+    enable: boolean;
+    /**
+     * A React ref object that provides a reference to the scrolling container element.
+     * This is used to directly manipulate the DOM for scrolling actions.
+     */
+    scrollerRef: React.RefObject<HTMLDivElement>;
+    /**
+     * A React ref object that provides a reference to the element containing the list of tabs.
+     * This is used to calculate the scroll width and to determine the scrolling requirements based on the children's width.
+     */
+    tabListRef: React.RefObject<HTMLDivElement>;
+    /**
+     * Scrolls the element by a specified value.
+     *
+     * @param scrollValue - The value by which to scroll. Positive values will scroll to the right,
+     *                      while negative values will scroll to the left.
+     * @param transitionType - Optional. Specifies the type of transition to use for the scrolling.
+     */
+    scroll: (scrollValue: number, transitionType?: keyof typeof motionTransition) => void;
+    /**
+     * An object containing optional properties for the start scroll button.
+     * These properties are used to customize the appearance or behavior of the button that scrolls the tab list towards the start (left).
+     */
+    ScrollButtonStartProps?: TabScrollButtonProps['ButtonProps'];
+    /**
+     * Similar to ScrollButtonStartProps, this object contains optional properties for the end scroll button.
+     * These properties customize the end (right) scroll button, which scrolls the tab list towards the end.
+     */
+    ScrollButtonEndProps?: TabScrollButtonProps['ButtonProps'];
+};
+declare type ConditionalElements = {
+    scrollButtonStart?: React.ReactNode;
+    scrollButtonEnd?: React.ReactNode;
+};
+export declare type UseTabsScrollerReturn = ConditionalElements;
+/**
+ * This `useTabsScroller` hook manages the state and behavior of scroll buttons at both ends of the tab list (start and end) when the tab list exceeds the visible container width
+ */
+export declare const useTabsScroller: ({ enable, scrollerRef, tabListRef, scroll, ScrollButtonStartProps, ScrollButtonEndProps, }: UseTabsScrollerParameters) => UseTabsScrollerReturn;
+export {};

package/src/Tabs/index.d.ts

@@ -0,0 +1,7 @@
+export * from './TabMoreMenu';
+export * from './TabScrollButton';
+export * from './Tabs.classes';
+export * from './Tabs';
+export * from './Tabs.type';
+export * from './TabsContext';
+export * from './hooks';

package/src/Tag/Tag.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+import { TagColor } from './Tag.type';
+export declare type BaseTagClassesKey = 'root' | 'has-start-icon' | TagColor | 'outlined' | `filled-${TagColor}` | `inverted-${TagColor}` | 'label' | 'start-icon';
+export declare type TagClassesKey = CamelCase<BaseTagClassesKey>;
+export declare type TagClasses = {
+    name: 'tag';
+    classes: BaseTagClassesKey;
+};

package/src/Tag/Tag.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import tagStyle from './styles/Tag.css';
+import { TagProps } from './Tag.type';
+declare const Tag: React.ForwardRefExoticComponent<Pick<TagProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "label" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "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}` | "variant" | "startIcon"> & React.RefAttributes<HTMLDivElement>>;
+export { Tag, tagStyle };

package/src/Tag/Tag.type.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { StandardProps } from '@ringcentral/spring-base';
+import { IconProps } from '../Icon';
+import { TagClassesKey } from './Tag.classes';
+export declare type TagColor = 'default' | 'neutral' | 'secondary' | 'primary' | 'danger' | 'success' | 'warning';
+export declare type TagProps = StandardProps<{
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: 'outlined' | 'filled' | 'inverted';
+    /**
+     * The color of the component.
+     * @default 'default'
+     */
+    color?: TagColor;
+    /** Icon placed before the label. */
+    startIcon?: IconProps['symbol'];
+    /**
+     * @deprecated Use "children" instead.
+     */
+    label?: React.ReactNode;
+}, TagClassesKey, 'div'>;

package/src/Tag/index.d.ts

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

package/src/Text/Text.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTextClassesKey = 'root' | 'no-wrap' | 'flex-full' | 'highlight-term';
+export declare type TextClassesKey = CamelCase<BaseTextClassesKey>;
+export declare type TextClasses = {
+    name: 'text';
+    classes: BaseTextClassesKey;
+};

package/src/Text/Text.d.ts

@@ -0,0 +1,4 @@
+import textStyle from './styles/Text.css';
+import { TextComponent } from './Text.type';
+declare const Text: TextComponent;
+export { Text, textStyle };

package/src/Text/Text.type.d.ts

@@ -0,0 +1,34 @@
+import { ElementType, ReactNode } from 'react';
+import { WithClassesProps, HTMLDataAttribute, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { TooltipProps } from '@ringcentral/spring-ui';
+import { TextClassesKey } from './Text.classes';
+export declare type TextDefaultElementType = 'span';
+declare type ExtendElementType = ElementType;
+declare type BaseTextProps = WithClassesProps<{
+    /**
+     * This prop isn't supported.
+     * Use the `component` prop if you need to change the children structure.
+     */
+    children?: ReactNode;
+    /** when set `true`, add style `flex: 1 1 auto` */
+    flexFull?: boolean;
+    /** highlight for text with color and background to be mentionMe */
+    highlight?: boolean;
+    /**
+     * is show title only when truncated, use `number` value to truncate text at a specific number of lines.
+     * ### should not change titleWhenOverflow dynamically, keep that be same value, that will cause hook issue
+     */
+    titleWhenOverflow?: number;
+    noWrap?: boolean;
+    useTooltip?: boolean;
+    /**
+     * Props applied to Tooltip component
+     */
+    TooltipProps?: Omit<TooltipProps, 'title' | 'PopperProps' | 'open' | 'onOpenStateChange'> & HTMLDataAttribute;
+}, TextClassesKey>;
+export declare type TextProps<T extends ExtendElementType = TextDefaultElementType> = OverridableProps<BaseTextProps, T>;
+export declare type TextComponent = OverridableComponent<{
+    props: BaseTextProps;
+    defaultComponent: TextDefaultElementType;
+}>;
+export {};

package/src/Text/index.d.ts

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

package/src/TextField/TextField.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTextFieldClassesKey = 'clear' | 'root' | 'full-width' | 'hide-native-clear' | 'input' | 'end-adornment' | 'start-adornment' | 'form-field-content' | 'outlined' | 'standard' | 'quiet' | 'helper-text' | 'mask-value-button';
+export declare type TextFieldClassesKey = CamelCase<BaseTextFieldClassesKey>;
+export declare type TextFieldClasses = {
+    name: 'text-field';
+    classes: BaseTextFieldClassesKey;
+};

package/src/TextField/TextField.d.ts

@@ -0,0 +1,5 @@
+import { ElementType } from 'react';
+import textFieldStyle from './styles/TextField.css';
+import { TextFieldProps } from './TextField.type';
+declare const TextField: import("react").ForwardRefExoticComponent<Pick<TextFieldProps<ElementType<any>, import("react").HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> & import("./TextField.type").StandardInputAttributes>, "error" | "value" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "label" | "classes" | "focused" | "required" | "className" | "id" | "defaultValue" | "placeholder" | "readOnly" | "size" | "type" | "onFocus" | "onBlur" | "onChange" | "helperText" | "FormHelperTextProps" | "variant" | "fullWidth" | "autoFocus" | "inputProps" | "inputRef" | "endAdornment" | "startAdornment" | "RootProps" | "clearBtn" | "useNativeClearBtn" | "clearText" | "showCharacterCount" | "ClearButtonProps" | "onClear" | "inputComponent" | "showMaskValueToggleButton" | "maskValue" | "onMaskValueChange" | "MaskValueButtonProps" | "ShowHideEyeIconProps"> & import("react").RefAttributes<HTMLDivElement>>;
+export { TextField, textFieldStyle };