@ringcentral/spring-ui 1.7.0

package/src/Avatar/Avatar.type.d.ts

@@ -0,0 +1,91 @@
+import { OverridableComponent, OverridableProps, UseFocusVisibleOptions, WithClassesProps } from '@ringcentral/spring-base';
+import { ComponentProps, ComponentType, ElementRef, ElementType, ReactNode, Ref } from 'react';
+import { OverlapProps } from '../Overlap';
+import { StatusIndicatorProps } from '../StatusIndicator';
+import { AvatarClassesKey } from './Avatar.classes';
+declare type DefaultElementType = 'div';
+declare type ExtendElementType = ElementType;
+export declare type AvatarVariant = 'circle' | 'squircle';
+export declare type AvatarSize = 'xxlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
+declare type BaseAvatarProps = WithClassesProps<{
+    /**
+     * Used in combination with `src` or `srcSet` to
+     * provide an alt attribute for the rendered `img` element.
+     */
+    alt?: string;
+    /**
+     * Used to render text elements inside the Avatar if `src` or `srcSet` is not set.
+     * This can be an element, or just a string.
+     */
+    children?: ReactNode;
+    /**
+     * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+     * It can be used to listen for the loading error event.
+     */
+    imgProps?: Omit<ComponentProps<'img'>, 'alt' | 'src' | 'srcSet'>;
+    /**
+     * The size of the component.
+     * @default 'xlarge'
+     */
+    size?: AvatarSize;
+    /**
+     * The `src` attribute for the `img` element.
+     * If an error occurs while loading the avatar image, it will fallback to alternatives in the following order:
+     * 1. The provided children string.
+     * 2. The first letter of the alt text.
+     * 3. A generic icon. (**Only applies to variant 'circle'**)
+     */
+    src?: string;
+    /**
+     * The `srcSet` attribute for the `img` element.
+     * Use this attribute for responsive image display.
+     */
+    srcSet?: string;
+    /**
+     * Icon symbol.
+     */
+    symbol?: ComponentType;
+    /**
+     * The variant to use.
+     * @default 'circle'
+     */
+    variant?: AvatarVariant;
+    /**
+     * The color of the component.
+     * @default 'default'
+     */
+    color?: 'default' | 'primary';
+    /**
+     * This will apply to the avatar shape node
+     * @default div
+     * */
+    component?: 'div' | 'button';
+    /**
+     * If this component is clickable. When enabled hover, pressed and focus states are triggered.
+     */
+    clickable?: boolean;
+    /**
+     * Props of the avatar shape
+     */
+    avatarShapeRef?: Ref<ElementRef<'div' | 'button'>>;
+    /**
+     * If `true`, the Avatar will show a StatusIndicator component. Does not apply to the `xxsmall`/`xsmall` sizes.
+     */
+    showStatusIndicator?: boolean;
+    /**
+     * Props passed to the StatusIndicator component. Only applicable if `showStatusIndicator` is `true`.
+     */
+    IndicatorProps?: StatusIndicatorProps;
+    /** Attributes applied to root */
+    rootProps?: Omit<ComponentProps<'div'>, 'className' | 'classes'> & Partial<OverlapProps>;
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+} & Pick<UseFocusVisibleOptions, 'onFocusVisible'>, AvatarClassesKey>;
+export declare type AvatarProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseAvatarProps, T>;
+export declare type AvatarComponent = OverridableComponent<{
+    props: BaseAvatarProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/Avatar/index.d.ts

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

package/src/AvatarGroup/AvatarGroup.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseAvatarGroupClassesKey = 'root' | 'item';
+export declare type AvatarGroupClassesKey = CamelCase<BaseAvatarGroupClassesKey>;
+export declare type AvatarGroupClasses = {
+    name: 'avatar-group';
+    classes: BaseAvatarGroupClassesKey;
+};

package/src/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { AvatarGroupComponent, AvatarGroupContextValue } from './AvatarGroup.type';
+import avatarGroupStyles from './styles/AvatarGroup.css';
+export declare const AvatarGroupContext: import("react").Context<AvatarGroupContextValue>;
+declare const AvatarGroup: AvatarGroupComponent;
+export { AvatarGroup, avatarGroupStyles };

package/src/AvatarGroup/AvatarGroup.type.d.ts

@@ -0,0 +1,21 @@
+import { WithClassesProps, OverridableComponent, OverridableProps } from '@ringcentral/spring-base';
+import { ReactNode } from 'react';
+import { AvatarGroupClassesKey } from './AvatarGroup.classes';
+declare type DefaultElementType = 'div';
+declare type ExtendElementType = 'div' | 'button';
+declare type BaseAvatarGroupProps = WithClassesProps<{
+    /**
+     * You can only pass 2 Avatar components as children
+     */
+    children: ReactNode;
+}, AvatarGroupClassesKey>;
+export declare type AvatarGroupProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseAvatarGroupProps, T>;
+export declare type AvatarGroupComponent = OverridableComponent<{
+    props: BaseAvatarGroupProps;
+    defaultComponent: DefaultElementType;
+}>;
+export declare type AvatarGroupContextValue = {
+    size?: 'small';
+    className?: string;
+};
+export {};

package/src/AvatarGroup/index.d.ts

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

package/src/Backdrop/Backdrop.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseBackdropClassesKey = 'root' | 'transparent';
+export declare type BackdropClassesKey = CamelCase<BaseBackdropClassesKey>;
+export declare type BackdropClasses = {
+    name: 'backdrop';
+    classes: BaseBackdropClassesKey;
+};

package/src/Backdrop/Backdrop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BackdropProps } from './Backdrop.type';
+import backdropStyles from './styles/Backdrop.css';
+declare const Backdrop: import("react").ForwardRefExoticComponent<Pick<BackdropProps, "classes" | "key" | `data-${string}` | keyof import("react").HTMLAttributes<HTMLDivElement> | "isTransparent"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Backdrop, backdropStyles };

package/src/Backdrop/Backdrop.type.d.ts

@@ -0,0 +1,9 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { BackdropClassesKey } from './Backdrop.classes';
+export declare type BackdropProps = StandardProps<{
+    /**
+     * Prop to set backdrop transparent
+     * @default false
+     */
+    isTransparent?: boolean;
+}, BackdropClassesKey, 'div'>;

package/src/Backdrop/index.d.ts

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

package/src/Badge/Badge.classes.d.ts

@@ -0,0 +1,11 @@
+import type { CamelCase, KebabCase } from 'type-fest';
+import type { BadgeAnchorOrigin, BadgeColor, BadgeOverlap, BadgeSize, BadgeType, BadgeVariant } from './Badge.type';
+declare type BadgeSlot = 'content';
+export declare type BadgeAnchorOriginClasses = KebabCase<BadgeAnchorOrigin>;
+export declare type BaseBadgeClassesKey = 'root' | 'absolute' | BadgeType | BadgeSlot | BadgeVariant | BadgeColor | BadgeSize | BadgeOverlap | BadgeAnchorOriginClasses | `${BadgeType}-${BadgeSize}` | `${BadgeType}-${BadgeColor}` | `${BadgeType}-${BadgeVariant}` | `${BadgeType}-${BadgeVariant}-${BadgeSize}` | `${BadgeOverlap}-${BadgeAnchorOriginClasses}`;
+export declare type BadgeClassesKey = CamelCase<BaseBadgeClassesKey>;
+export declare type BadgeClasses = {
+    name: 'badge';
+    classes: BaseBadgeClassesKey;
+};
+export {};

package/src/Badge/Badge.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BadgeProps } from './Badge.type';
+import badgeStyles from './styles/Badge.css';
+export declare const Badge: {
+    (inProps: BadgeProps): JSX.Element;
+    displayName: string;
+};
+export { badgeStyles };

package/src/Badge/Badge.type.d.ts

@@ -0,0 +1,52 @@
+import { UseBadgeParameters } from '@mui/base';
+import { StandardProps } from '@ringcentral/spring-base';
+import { BadgeClassesKey } from './Badge.classes';
+export declare type BadgeVariant = 'contained' | 'outlined';
+export declare type BadgeColor = 'danger' | 'primary' | 'success' | 'warning' | 'secondary';
+export declare type BadgeSize = 'small' | 'medium';
+export declare type BadgeOverlap = 'rectangular' | 'circular';
+export declare type BadgeAnchorOrigin = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export declare type BadgeType = 'standard' | 'dot';
+export declare type BadgeProps = StandardProps<{
+    /**
+     * The variant to use.
+     * @default 'contained'
+     */
+    variant?: BadgeVariant;
+    /**
+     * The count type to use.
+     * @default 'standard'
+     */
+    type?: BadgeType;
+    /**
+     * The integer to display. Undefined count with dot type can be used to show a dot.
+     */
+    count?: number | string;
+    /**
+     * The color of the component.
+     * @default 'primary'
+     */
+    color?: BadgeColor;
+    /**
+     * The size of the component.
+     * @default 'small'
+     */
+    size?: BadgeSize;
+    /**
+     * Wrapped shape the badge should overlap.
+     * Note: Automatically take effect when there are child elements.
+     * @default 'rectangular'
+     */
+    overlap?: BadgeOverlap;
+    /**
+     * Use the overlap position when there are no child elements.
+     * Note: If true, please give the parent element a position relative or absolute to make the badge work.
+     * @default false
+     */
+    forceOverlap?: boolean;
+    /**
+     * The anchor of the badge.
+     * @default 'topRight'
+     */
+    anchorOrigin?: BadgeAnchorOrigin;
+} & Omit<UseBadgeParameters, 'badgeContent'>, BadgeClassesKey, 'span'>;

package/src/Badge/index.d.ts

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

package/src/Block/Block.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+import type { BlockBorderRadius, BlockColor } from './Block.type';
+export declare type BaseBlockClassesKey = 'root' | 'row' | 'padding' | 'bordered' | `border-radius-${BlockBorderRadius}` | `border-radius-${BlockBorderRadius}` | `border-radius-${BlockBorderRadius}` | `border-radius-${BlockBorderRadius}` | BlockColor | 'hide-background';
+export declare type BlockClassesKey = CamelCase<BaseBlockClassesKey>;
+export declare type BlockClasses = {
+    name: 'block';
+    classes: BaseBlockClassesKey;
+};

package/src/Block/Block.d.ts

@@ -0,0 +1,4 @@
+import { BlockComponent } from './Block.type';
+import blockStyles from './styles/Block.css';
+declare const Block: BlockComponent;
+export { Block, blockStyles };

package/src/Block/Block.type.d.ts

@@ -0,0 +1,44 @@
+import { ElementType } from 'react';
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { BlockClassesKey } from './Block.classes';
+export declare type BlockBorderRadius = 'none' | 'xsmall' | 'small' | 'medium';
+export declare type BlockColor = 'default' | 'neutral';
+declare type DefaultElementType = 'div';
+declare type BaseBlockProps = WithClassesProps<{
+    /**
+     * If `true`, flex direction is set to 'row'.
+     * @default false
+     */
+    row?: boolean;
+    /**
+     * If `false`, container padding is set to 0.
+     * @default true
+     */
+    padding?: boolean;
+    /**
+     * If `false`, the border is hidden.
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * The border radius of the component.
+     * @default 'medium'
+     */
+    borderRadius?: BlockBorderRadius;
+    /**
+     * The color of the component.
+     * @default 'default'
+     */
+    color?: BlockColor;
+    /**
+     * If `false`, the background is hidden.
+     * @default true
+     */
+    background?: boolean;
+}, BlockClassesKey>;
+export declare type BlockProps<T extends ElementType = DefaultElementType> = OverridableProps<BaseBlockProps, T>;
+export declare type BlockComponent = OverridableComponent<{
+    props: BaseBlockProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/Block/index.d.ts

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

package/src/BlockHeader/BlockHeader.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseBlockHeaderClassesKey = 'root' | 'title' | 'end-slot' | 'divider';
+export declare type BlockHeaderClassesKey = CamelCase<BaseBlockHeaderClassesKey>;
+export declare type BlockHeaderClasses = {
+    name: 'block-header';
+    classes: BaseBlockHeaderClassesKey;
+};

package/src/BlockHeader/BlockHeader.d.ts

@@ -0,0 +1,4 @@
+import { BlockHeaderComponent } from './BlockHeader.type';
+import blockHeaderStyles from './styles/BlockHeader.css';
+declare const BlockHeader: BlockHeaderComponent;
+export { BlockHeader, blockHeaderStyles };

package/src/BlockHeader/BlockHeader.type.d.ts

@@ -0,0 +1,19 @@
+import { ElementType, ReactNode } from 'react';
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { BlockHeaderClassesKey } from './BlockHeader.classes';
+declare type DefaultElementType = 'div';
+declare type BaseBlockHeaderProps = WithClassesProps<{
+    /** End slot of this header. */
+    endSlot?: ReactNode;
+    /**
+     * If true, show blockHeader divider
+     * @default false
+     */
+    divider?: boolean;
+}, BlockHeaderClassesKey>;
+export declare type BlockHeaderProps<T extends ElementType = DefaultElementType> = OverridableProps<BaseBlockHeaderProps, T>;
+export declare type BlockHeaderComponent = OverridableComponent<{
+    props: BaseBlockHeaderProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/BlockHeader/index.d.ts

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

package/src/BottomNavigation/BottomNavigation.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseBottomNavigationClassesKey = 'root' | 'full-width' | 'item-wrapper' | 'description' | 'empty-slot';
+export declare type BottomNavigationClassesKey = CamelCase<BaseBottomNavigationClassesKey>;
+export declare type BottomNavigationClasses = {
+    name: 'bottom-navigation';
+    classes: BaseBottomNavigationClassesKey;
+};

package/src/BottomNavigation/BottomNavigation.d.ts

@@ -0,0 +1,4 @@
+import { BottomNavigationComponent } from './BottomNavigation.type';
+import bottomNavigationStyles from './styles/BottomNavigation.css';
+declare const BottomNavigation: BottomNavigationComponent;
+export { BottomNavigation, bottomNavigationStyles };

package/src/BottomNavigation/BottomNavigation.type.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+import { HTMLMotionProps } from 'framer-motion';
+import { StandardProps } from '@ringcentral/spring-base';
+import { BottomNavigationItemProps } from '../BottomNavigationItem';
+import { BottomNavigationClassesKey } from './BottomNavigation.classes';
+export declare type CollapseReason = 'EscapeKeyDown' | 'TabBlur' | 'ClickAway' | 'ToggleMore' | 'ItemSelected';
+export declare type BottomNavigationProps<T = string> = StandardProps<{
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: T;
+    /**
+     * The value of the activated navigation item.
+     */
+    value?: T;
+    /**
+     * The default data of navigation items. Use when the component is not controlled.
+     */
+    defaultData?: {
+        visible: T[];
+        more?: T[];
+    };
+    /**
+     * The data of navigation items.
+     * The max count of visible items is **6**,
+     * it would be **5** due to the appearance of more button when there are items in more section.
+     */
+    data?: {
+        visible: T[];
+        more?: T[];
+    };
+    /**
+     * Callback invoked when new value is being set.
+     */
+    onChange?: (event: React.SyntheticEvent, value: T) => void;
+    /**
+     * Used when rendering the navigation items.
+     * @param value value of current navigation item
+     * @returns {ReactNode}
+     */
+    renderItem: (value: T) => ReactNode;
+    /**
+     * Props applied to the more button (which only appears when there are items in the more section.)
+     */
+    MoreProps?: Omit<BottomNavigationItemProps, 'symbol'>;
+    /**
+     * Shows up at the bottom when more section expanded.
+     */
+    description?: ReactNode;
+    /**
+     * Invoke when more section collapsed.
+     */
+    onCollapse?: (event: React.SyntheticEvent | undefined, reason: CollapseReason) => void;
+    /**
+     * If `true`, the bottom navigation will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+} & Omit<HTMLMotionProps<'div'>, 'onChange'>, BottomNavigationClassesKey>;
+export interface BottomNavigationComponent {
+    <V = string>(props: BottomNavigationProps<V>): React.ReactElement;
+    displayName?: string;
+}

package/src/BottomNavigation/BottomNavigationContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type BottomNavigationContextValue<T = string> = {
+    value: T;
+    onSelected: (e: React.SyntheticEvent, newValue: T) => void;
+    expanded?: boolean;
+    animationComplete?: boolean;
+};
+export declare const BottomNavigationContext: import("react").Context<BottomNavigationContextValue<string> | null>;
+export declare const useBottomNavigationContext: () => BottomNavigationContextValue<string> | null;

package/src/BottomNavigation/BottomNavigationGroup/BottomNavigationGroup.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseBottomNavigationGroupClassesKey = 'root';
+export declare type BottomNavigationGroupClassesKey = CamelCase<BaseBottomNavigationGroupClassesKey>;
+export declare type BottomNavigationGroupClasses = {
+    name: 'bottom-navigation-group';
+    classes: BaseBottomNavigationGroupClassesKey;
+};

package/src/BottomNavigation/BottomNavigationGroup/BottomNavigationGroup.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BottomNavigationGroupProps } from './BottomNavigationGroup.type';
+import bottomNavigationGroupStyles from './styles/BottomNavigationGroup.css';
+declare const BottomNavigationGroup: import("react").ForwardRefExoticComponent<Pick<BottomNavigationGroupProps, "classes" | "key" | `data-${string}` | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>>;
+export { BottomNavigationGroup, bottomNavigationGroupStyles };

package/src/BottomNavigation/BottomNavigationGroup/BottomNavigationGroup.type.d.ts

@@ -0,0 +1,3 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { BottomNavigationGroupClassesKey } from './BottomNavigationGroup.classes';
+export declare type BottomNavigationGroupProps = StandardProps<{}, BottomNavigationGroupClassesKey, 'div'>;

package/src/BottomNavigation/BottomNavigationGroup/index.d.ts

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

package/src/BottomNavigation/index.d.ts

@@ -0,0 +1,5 @@
+export * from './BottomNavigation.classes';
+export * from './BottomNavigation';
+export * from './BottomNavigation.type';
+export * from './BottomNavigationContext';
+export * from './BottomNavigationGroup';

package/src/BottomNavigationItem/BottomNavigationItem.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseBottomNavigationItemClassesKey = 'root' | 'button' | 'activated';
+export declare type BottomNavigationItemClassesKey = CamelCase<BaseBottomNavigationItemClassesKey>;
+export declare type BottomNavigationItemClasses = {
+    name: 'bottom-navigation-item';
+    classes: BaseBottomNavigationItemClassesKey;
+};

package/src/BottomNavigationItem/BottomNavigationItem.d.ts

@@ -0,0 +1,4 @@
+import { BottomNavigationItemComponent } from './BottomNavigationItem.type';
+import bottomNavigationItemStyles from './styles/BottomNavigationItem.css';
+declare const BottomNavigationItem: BottomNavigationItemComponent;
+export { BottomNavigationItem, bottomNavigationItemStyles };

package/src/BottomNavigationItem/BottomNavigationItem.type.d.ts

@@ -0,0 +1,63 @@
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { ComponentType } from 'react';
+import { BadgeProps } from '../Badge';
+import { IconButtonProps } from '../IconButton';
+import { TooltipProps } from '../Tooltip';
+import { BottomNavigationItemClassesKey } from './BottomNavigationItem.classes';
+export declare type BottomNavigationItemProps<T = string> = StandardProps<{
+    /**
+     * Value of the navigation item.
+     */
+    value?: T;
+    /**
+     * Icon symbol.
+     */
+    symbol: ComponentType;
+    /**
+     * Icon symbol when activated is true.
+     */
+    activatedSymbol?: ComponentType;
+    /**
+     * Badge count.
+     * The integer to display. It displays in dot mode if has not count specified.
+     */
+    count?: number;
+    /**
+     * If true, navigation item will be displayed in an activated state.
+     */
+    activated?: boolean;
+    /**
+     * If true, navigation item will be displayed in an expanded state.
+     */
+    expanded?: boolean;
+    /**
+     * Callback fired when the button is clicked.
+     *
+     * @param {React.MouseEvent<HTMLButtonElement>} event The event source of the callback.
+     */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Props applied to Badge component
+     */
+    BadgeProps?: Omit<BadgeProps, 'count'> & HTMLDataAttribute;
+    /**
+     * Props applied to IconButton component
+     */
+    ButtonProps?: Omit<IconButtonProps, 'symbol' | 'variant' | 'size' | 'shape' | 'color' | 'onClick'> & HTMLDataAttribute;
+    /**
+     * This label will be displayed in tooltip by default.
+     */
+    label?: string;
+    /**
+     * Props applied to Tooltip component
+     */
+    TooltipProps?: Omit<TooltipProps, 'title' | 'PopperProps' | 'open' | 'onOpenStateChange'> & HTMLDataAttribute;
+    /**
+     * Ref will be passed to the button.
+     */
+    ref?: React.ForwardedRef<HTMLButtonElement>;
+}, BottomNavigationItemClassesKey>;
+export interface BottomNavigationItemComponent {
+    <V = string>(props: BottomNavigationItemProps<V>): React.ReactElement;
+    displayName?: string;
+}

package/src/BottomNavigationItem/index.d.ts

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

package/src/Button/Button.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+import { ButtonColor, ButtonSize, ButtonVariant } from './Button.type';
+export declare type BaseButtonClassesKey = 'root' | 'loading' | 'loading-indicator' | 'content' | 'start-slot' | 'end-slot' | 'full-width' | 'hide-background' | 'has-start-slot' | 'has-end-slot' | ButtonVariant | ButtonSize | ButtonColor | `${ButtonVariant}-${ButtonColor}` | `${ButtonVariant}-${ButtonSize}` | `${ButtonSize}-start-slot` | `${ButtonSize}-end-slot` | `${ButtonVariant}-${ButtonSize}-start-slot` | `${ButtonVariant}-${ButtonSize}-end-slot` | `${ButtonVariant}-hide-background`;
+export declare type ButtonClassesKey = CamelCase<BaseButtonClassesKey>;
+export declare type ButtonClasses = {
+    name: 'button';
+    classes: BaseButtonClassesKey;
+};

package/src/Button/Button.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '../Icon';
+import { ButtonComponent, ButtonProps } from './Button.type';
+import buttonClasses from './styles/Button.css';
+declare const buttonIconSizeMap: Record<NonNullable<ButtonProps['size']>, IconProps['size']>;
+declare const Button: ButtonComponent;
+export { Button, buttonClasses, buttonIconSizeMap };

package/src/Button/Button.type.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { UseButtonParameters } from '@mui/base';
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { CircularProgressIndicatorProps, IconProps, WithTooltipProps } from '@ringcentral/spring-ui';
+import { ButtonClassesKey } from './Button.classes';
+declare type DefaultElementType = 'button';
+declare type ExtendElementType = 'button' | 'a';
+export declare type ButtonSize = 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+export declare type ButtonVariant = 'text' | 'contained' | 'outlined' | 'inverted';
+export declare type ButtonColor = 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'neutral';
+declare type BaseButtonProps = WithClassesProps<WithTooltipProps<{
+    /** Icon placed before the children. */
+    startIcon?: IconProps['symbol'] | React.ReactNode;
+    /** Icon placed after the children. */
+    endIcon?: IconProps['symbol'] | React.ReactNode;
+    /**
+     * If `true`, the button will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The size of the component.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * The variant to use.
+     * @default 'contained'
+     */
+    variant?: ButtonVariant;
+    /**
+     * The color of the component.
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+    /**
+     * If the component is in a loading state. Disables interactions and hides the startIcon if set.
+     * @default false
+     */
+    /**
+     * Controls whether the component should have a background in its resting state.
+     * Does not apply to the "text" variant.
+     * @default true
+     */
+    background?: boolean;
+    loading?: boolean;
+    /**
+     * Sets the props that are applied to the CircularProgressIndicator if `loading` is `true`.
+     */
+    CircularProgressIndicatorProps?: CircularProgressIndicatorProps;
+} & Omit<UseButtonParameters, 'href' | 'type' | 'rootRef'>>, ButtonClassesKey>;
+export declare type ButtonProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseButtonProps, T>;
+export declare type ButtonComponent = OverridableComponent<{
+    props: BaseButtonProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/Button/index.d.ts

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