@ringcentral/spring-ui 1.7.0

package/src/CallButton/CallButton.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseCallButtonClassesKey = 'root' | 'end' | 'start';
+export declare type CallButtonClassesKey = CamelCase<BaseCallButtonClassesKey>;
+export declare type CallButtonClasses = {
+    name: 'call-button';
+    classes: BaseCallButtonClassesKey;
+};

package/src/CallButton/CallButton.d.ts

@@ -0,0 +1,4 @@
+import { CallButtonComponent } from './CallButton.type';
+import callButtonStyle from './styles/CallButton.css';
+declare const CallButton: CallButtonComponent;
+export { CallButton, callButtonStyle };

package/src/CallButton/CallButton.type.d.ts

@@ -0,0 +1,19 @@
+import { OverridableComponent, OverridableProps, UnionOmit, WithClassesProps } from '@ringcentral/spring-base';
+import { IconButtonProps } from '../IconButton';
+import { IconButtonClassesKey } from '../IconButton/IconButton.classes';
+export declare type DefaultElementType = 'button';
+declare type ExtendElementType = 'button';
+declare type BaseCallButtonProps = Omit<IconButtonProps, 'classes' | 'symbol' | 'label' | 'color' | 'variant' | 'shape' | 'size'> & WithClassesProps<{
+    variant: 'start' | 'end';
+    /**
+     * The size of the component.
+     * @default "medium"
+     */
+    size?: 'large' | 'medium' | 'small';
+}, UnionOmit<IconButtonClassesKey, 'rectangular' | 'outlined' | 'label' | 'primary'>>;
+export declare type CallButtonProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseCallButtonProps, T>;
+export declare type CallButtonComponent = OverridableComponent<{
+    props: BaseCallButtonProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/CallButton/index.d.ts

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

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

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

package/src/Checkbox/Checkbox.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import checkboxStyle from './styles/Checkbox.css';
+declare const Checkbox: import("react").ForwardRefExoticComponent<import("@ringcentral/spring-base").ClassesProp<import("./Checkbox.classes").CheckboxClassesKey> & {
+    indeterminate?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    inputRef?: import("react").Ref<HTMLInputElement> | undefined;
+    rootProps?: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className"> | undefined;
+    inputProps?: Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "className" | "type" | "ref"> | undefined;
+    shape?: import("./Checkbox.type").CheckboxShape | undefined;
+} & Omit<import("@mui/base").UseSwitchParameters, "readonly"> & {
+    className?: string | undefined;
+} & import("@ringcentral/spring-base").HTMLDataAttribute & import("react").RefAttributes<HTMLInputElement>>;
+export { Checkbox, checkboxStyle };

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

@@ -0,0 +1,30 @@
+import { ComponentProps, Ref } from 'react';
+import { UseSwitchParameters } from '@mui/base';
+import { StandardProps } from '@ringcentral/spring-base';
+import { CheckboxClassesKey } from './Checkbox.classes';
+export declare type CheckboxShape = 'rectangular' | 'squircle';
+export declare type CheckboxProps = StandardProps<{
+    /**
+     * If `true`, the component appears indeterminate.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * If `true`, the Checkbox will be automatically focused on mount.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /** Attributes applied to root */
+    rootProps?: Omit<ComponentProps<'div'>, 'className'>;
+    /** Attributes applied to `input` element */
+    inputProps?: Omit<ComponentProps<'input'>, 'className' | 'type' | 'ref'>;
+    /**
+     * The shape of the checkbox.
+     * @default 'rectangular'
+     */
+    shape?: CheckboxShape;
+} & Omit<UseSwitchParameters, 'readonly'>, CheckboxClassesKey>;

package/src/Checkbox/index.d.ts

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

package/src/Chip/Chip.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseChipClassesKey = 'root' | 'truncate' | 'label' | 'large' | 'medium' | 'small' | 'delete-icon' | 'default' | 'error' | 'clickable';
+export declare type ChipClassesKey = CamelCase<BaseChipClassesKey>;
+export declare type ChipClasses = {
+    name: 'chip';
+    classes: BaseChipClassesKey;
+};

package/src/Chip/Chip.d.ts

@@ -0,0 +1,4 @@
+import { ChipComponent } from './Chip.type';
+import chipStyle from './styles/Chip.css';
+declare const Chip: ChipComponent;
+export { Chip, chipStyle };

package/src/Chip/Chip.type.d.ts

@@ -0,0 +1,65 @@
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { KeyboardEvent, MouseEvent, ReactElement } from 'react';
+import { IconButtonProps } from '../IconButton';
+import { ChipClassesKey } from './Chip.classes';
+declare type DefaultElementType = 'div';
+export declare type ExtendElementType = 'div' | 'a';
+declare type BaseChipProps = WithClassesProps<{
+    /**
+     * Slot for putting an Avatar or Icon before label
+     */
+    startSlot?: ReactElement;
+    /**
+     * This prop isn't supported.
+     * Use the `component` prop if you need to change the children structure.
+     */
+    children?: null;
+    /**
+     * If `true`, the chip will appear clickable,
+     * even if the onClick prop is not defined.
+     * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+     * This can be used, for example,
+     * along with the component prop to indicate an anchor Chip is clickable.
+     * Note: this controls the UI and does not affect the onClick event.
+     */
+    clickable?: boolean;
+    /**
+     * If `true`, there is a max-width at 144,
+     * If `false`, there is no max-width.
+     * @default true
+     */
+    truncate?: boolean;
+    /**
+     * The color of the component.
+     * @default 'default'
+     */
+    color?: 'default' | 'error';
+    /**
+     * The size of the component.
+     * @default 'large'
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * The content of the component.
+     */
+    label?: React.ReactNode;
+    /**
+     * Callback fired
+     * 1. when the delete icon is clicked
+     * 2. press 'Backspace' or 'Delete' when Chip is focused
+     * If set, the delete icon will be shown.
+     */
+    onDelete?: (event: MouseEvent<Element> | KeyboardEvent<Element>) => void;
+    /** Attributes applied to delete icon button */
+    DeleteIconProps?: Omit<IconButtonProps, 'variant' | 'size' | 'shape'>;
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+}, ChipClassesKey>;
+export declare type ChipProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseChipProps, T>;
+export declare type ChipComponent = OverridableComponent<{
+    props: BaseChipProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/Chip/index.d.ts

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

package/src/CircularProgressIndicator/CircularProgressIndicator.classes.d.ts

@@ -0,0 +1,10 @@
+import type { CamelCase } from 'type-fest';
+import type { CircularProgressIndicatorVariant, CircularProgressIndicatorSize, CircularProgressIndicatorColor } from './CircularProgressIndicator.type';
+declare type CircularProgressIndicatorSlot = 'outer-circle' | 'progress-circle' | 'inner-circle';
+export declare type BaseCircularProgressIndicatorClassesKey = 'root' | CircularProgressIndicatorSlot | CircularProgressIndicatorVariant | CircularProgressIndicatorSize | CircularProgressIndicatorColor | `${CircularProgressIndicatorVariant}-${CircularProgressIndicatorSlot}` | `${CircularProgressIndicatorVariant}-${CircularProgressIndicatorSize}` | `${CircularProgressIndicatorVariant}-${CircularProgressIndicatorColor}`;
+export declare type CircularProgressIndicatorClassesKey = CamelCase<BaseCircularProgressIndicatorClassesKey>;
+export declare type CircularProgressIndicatorClasses = {
+    name: 'circular-progress-indicator';
+    classes: BaseCircularProgressIndicatorClassesKey;
+};
+export {};

package/src/CircularProgressIndicator/CircularProgressIndicator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CircularProgressIndicatorProps } from './CircularProgressIndicator.type';
+import circularProgressIndicatorStyle from './styles/CircularProgressIndicator.css';
+declare const CircularProgressIndicator: React.ForwardRefExoticComponent<Pick<CircularProgressIndicatorProps, "value" | "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" | "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" | "progressBarProps"> & React.RefAttributes<HTMLSpanElement>>;
+export { CircularProgressIndicator, circularProgressIndicatorStyle };

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

@@ -0,0 +1,32 @@
+import { ComponentProps } from 'react';
+import { StandardProps } from '@ringcentral/spring-base';
+import { CircularProgressIndicatorClassesKey } from './CircularProgressIndicator.classes';
+export declare type CircularProgressIndicatorVariant = 'indeterminate' | 'determinate';
+export declare type CircularProgressIndicatorSize = 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+export declare type CircularProgressIndicatorColor = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
+export declare type CircularProgressIndicatorProps = StandardProps<{
+    /**
+     * The variant of the indicator.
+     * @default indeterminate
+     */
+    variant?: CircularProgressIndicatorVariant;
+    /**
+     * Sets the size of the indicator.
+     * @default large
+     */
+    size?: CircularProgressIndicatorSize;
+    /**
+     * Sets the color of the indicator.
+     * @default primary
+     */
+    color?: CircularProgressIndicatorColor;
+    /**
+     * Sets the value of the indicator.
+     * Only applies to variant `determinate`
+     */
+    value?: number;
+    /**
+     * Sets the props that are applied to the `role="progressbar"` element
+     */
+    progressBarProps?: Omit<ComponentProps<'span'>, 'ref' | 'role'>;
+}, CircularProgressIndicatorClassesKey, 'span'>;

package/src/CircularProgressIndicator/index.d.ts

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

package/src/ClickAwayListener/index.d.ts

@@ -0,0 +1,2 @@
+export { ClickAwayListener } from '@mui/base';
+export type { ClickAwayListenerProps } from '@mui/base';

package/src/ComponentsProps.d.ts

@@ -0,0 +1,207 @@
+import type { PartialDeep } from 'type-fest';
+import type { AccordionProps } from './Accordion';
+import type { AccordionHeaderProps } from './AccordionHeader';
+import type { AlertProps } from './Alert';
+import type { AnnouncementProps } from './Announcement';
+import type { AutocompleteProps } from './Autocomplete';
+import type { SuggestionListProps } from './Autocomplete/SuggestionList';
+import type { AvatarProps } from './Avatar';
+import type { AvatarGroupProps } from './AvatarGroup';
+import type { BackdropProps } from './Backdrop';
+import type { BadgeProps } from './Badge';
+import type { BlockProps } from './Block';
+import type { BlockHeaderProps } from './BlockHeader';
+import type { BottomNavigationProps } from './BottomNavigation';
+import type { BottomNavigationItemProps } from './BottomNavigationItem';
+import type { ButtonProps } from './Button';
+import type { CallButtonProps } from './CallButton';
+import type { CheckboxProps } from './Checkbox';
+import type { ChipProps } from './Chip';
+import type { CircularProgressIndicatorProps } from './CircularProgressIndicator';
+import type { DatePickerProps } from './DatePicker';
+import type { DialDeleteProps, DialPadProps, DialTextFieldProps } from './Dialer';
+import type { DialogProps } from './Dialog';
+import type { DrawerProps } from './Drawer';
+import type { DividerProps } from './Divider';
+import type { DropdownProps } from './Dropdown';
+import type { SwipeableDrawerProps } from './SwipeableDrawer';
+import type { EmptyStateProps } from './EmptyState';
+import type { FabButtonProps } from './FabButton';
+import type { FormFieldProps } from './FormField';
+import type { FormLabelProps } from './FormLabel';
+import type { IconProps } from './Icon';
+import type { IconButtonLabelProps, IconButtonProps } from './IconButton';
+import type { IconButtonGroupProps } from './IconButtonGroup';
+import type { InlineEditableProps } from './InlineEditable';
+import type { LinearProgressIndicatorProps } from './LinearProgressIndicator';
+import type { LinkProps } from './Link';
+import type { ListProps } from './List';
+import type { ListItemProps } from './ListItem';
+import type { ListItemTextProps } from './ListItemText';
+import type { MenuProps } from './Menu';
+import type { MenuActionsProps } from './MenuActions';
+import type { MenuDividerProps } from './MenuDivider';
+import type { MenuFooterProps } from './MenuFooter';
+import type { MenuHeaderProps } from './MenuHeader';
+import type { MenuItemProps } from './MenuItem';
+import type { MenuItemTextProps } from './MenuItemText';
+import type { MenuListProps } from './MenuList';
+import type { ModalProps } from './Modal';
+import type { OptionProps } from './Option';
+import type { OverlapProps } from './Overlap';
+import type { TablePaginationProps } from './TablePagination';
+import type { PageHeaderCenterProps, PageHeaderLeftProps, PageHeaderProps, PageHeaderRightProps, PageHeaderTitleProps } from './PageHeader';
+import type { PopoverProps } from './Popover';
+import type { PopperProps } from './Popper';
+import type { PopperPaperProps } from './PopperPaper';
+import type { RadioProps } from './Radio';
+import type { RadioGroupProps } from './RadioGroup';
+import type { SelectProps } from './Select';
+import type { SingleFilterProps } from './SingleFilter';
+import type { SkeletonContainerProps, SkeletonProps } from './Skeleton';
+import type { SliderProps } from './Slider';
+import type { SnackbarProps } from './Snackbar';
+import type { SortableListProps } from './SortableList';
+import type { SortableListDndContextProps } from './SortableListDndContext';
+import type { SortableVirtualizedListProps } from './SortableVirtualizedList';
+import type { SplitButtonProps } from './SplitButton';
+import type { SquircleProps } from './Squircle';
+import type { StatusIndicatorProps } from './StatusIndicator';
+import type { SubMenuProps } from './SubMenu';
+import type { SwitchProps } from './Switch';
+import type { TabProps } from './Tab';
+import type { TabPanelProps } from './TabPanel';
+import type { TabsProps } from './Tabs';
+import type { TagProps } from './Tag';
+import type { TextFieldProps } from './TextField';
+import type { TextareaProps } from './Textarea';
+import type { TimePickerProps } from './TimePicker';
+import type { TooltipProps } from './Tooltip';
+import type { TrayPanelProps, TrayProps } from './Tray';
+import type { TrayMenuItemProps, TrayMenuProps } from './TrayMenu';
+import type { VirtualizedListProps } from './VirtualizedList';
+import type { VirtualizedMenuProps } from './VirtualizedMenu';
+import type { TextProps } from './Text';
+import type { TableProps } from './Table';
+import type { TableBodyProps } from './TableBody';
+import type { TableCellProps } from './TableCell';
+import type { TableHeadProps } from './TableHead';
+import type { TableRowProps } from './TableRow';
+import type { TableContainerProps } from './TableContainer';
+import type { StepProps } from './Step';
+import type { StepperProps } from './Stepper';
+import type { StepConnectorProps } from './StepConnector';
+import type { StepLabelProps } from './StepLabel';
+import type { StepIconProps } from './StepIcon';
+import type { StepButtonProps } from './StepButton';
+import type { StepContentProps } from './StepContent';
+import type { RatingProps } from './Rating';
+export declare type ComponentsProps = PartialDeep<{
+    Accordion?: AccordionProps;
+    AccordionHeader?: AccordionHeaderProps;
+    Alert?: AlertProps;
+    Announcement?: AnnouncementProps;
+    Avatar?: AvatarProps;
+    AvatarGroup?: AvatarGroupProps;
+    Badge?: BadgeProps;
+    Block?: BlockProps;
+    BlockHeader?: BlockHeaderProps;
+    BottomNavigation?: BottomNavigationProps;
+    BottomNavigationItem?: BottomNavigationItemProps;
+    Button?: ButtonProps;
+    CallButton?: CallButtonProps;
+    Checkbox?: CheckboxProps;
+    Chip?: ChipProps;
+    CircularProgressIndicator?: CircularProgressIndicatorProps;
+    Dialog?: DialogProps;
+    Drawer?: DrawerProps;
+    SwipeableDrawer?: SwipeableDrawerProps;
+    DialDelete?: DialDeleteProps;
+    DialPad?: DialPadProps;
+    DialTextField?: DialTextFieldProps;
+    Divider?: DividerProps;
+    Dropdown?: DropdownProps;
+    EmptyState?: EmptyStateProps;
+    FabButton?: FabButtonProps;
+    FormField?: FormFieldProps;
+    FormLabel?: FormLabelProps;
+    Icon?: IconProps;
+    IconButton?: IconButtonProps;
+    IconButtonLabel?: IconButtonLabelProps;
+    LinearProgressIndicator?: LinearProgressIndicatorProps;
+    Link?: LinkProps;
+    List?: ListProps;
+    ListItem?: ListItemProps;
+    ListItemText?: ListItemTextProps;
+    Menu?: MenuProps;
+    MenuActions?: MenuActionsProps;
+    MenuDivider?: MenuDividerProps;
+    MenuFooter?: MenuFooterProps;
+    MenuHeader?: MenuHeaderProps;
+    MenuItem?: MenuItemProps;
+    MenuItemText?: MenuItemTextProps;
+    MenuList?: MenuListProps;
+    Option?: OptionProps;
+    Overlap?: OverlapProps;
+    PageHeader?: PageHeaderProps;
+    Popover?: PopoverProps;
+    Popper?: PopperProps;
+    Radio?: RadioProps;
+    RadioGroup?: RadioGroupProps;
+    Select?: SelectProps;
+    SingleFilter?: SingleFilterProps;
+    Skeleton?: SkeletonProps;
+    SkeletonContainer?: SkeletonContainerProps;
+    Slider?: SliderProps;
+    Snackbar?: SnackbarProps;
+    SplitButton?: SplitButtonProps;
+    Squircle?: SquircleProps;
+    StatusIndicator?: StatusIndicatorProps;
+    SubMenu?: SubMenuProps;
+    Switch?: SwitchProps;
+    Tab?: TabProps;
+    Tabs?: TabsProps;
+    TabPanel?: TabPanelProps;
+    Tag?: TagProps;
+    TextField?: TextFieldProps;
+    Textarea?: TextareaProps;
+    Tooltip?: TooltipProps;
+    Tray?: TrayProps;
+    TrayPanel?: TrayPanelProps;
+    TrayMenu?: TrayMenuProps;
+    TrayMenuItem?: TrayMenuItemProps;
+    Backdrop?: BackdropProps;
+    VirtualizedList?: VirtualizedListProps;
+    VirtualizedMenu?: VirtualizedMenuProps;
+    SortableListDndContext?: SortableListDndContextProps;
+    SortableList?: SortableListProps;
+    SortableVirtualizedList?: SortableVirtualizedListProps;
+    InlineEditable?: InlineEditableProps;
+    Autocomplete?: AutocompleteProps;
+    SuggestionList?: SuggestionListProps;
+    DatePicker?: DatePickerProps;
+    TimePicker?: TimePickerProps;
+    PopperPaper?: PopperPaperProps;
+    Modal?: ModalProps;
+    Text?: TextProps;
+    Table?: TableProps;
+    TableBody?: TableBodyProps;
+    TableCell?: TableCellProps;
+    TableHead?: TableHeadProps;
+    TableRow?: TableRowProps;
+    TableContainer?: TableContainerProps;
+    Step?: StepProps;
+    Stepper?: StepperProps;
+    StepConnector?: StepConnectorProps;
+    StepLabel?: StepLabelProps;
+    StepIcon?: StepIconProps;
+    StepButton?: StepButtonProps;
+    StepContent?: StepContentProps;
+    Rating?: RatingProps;
+    PageHeaderLeft?: PageHeaderLeftProps;
+    PageHeaderCenter?: PageHeaderCenterProps;
+    PageHeaderRight?: PageHeaderRightProps;
+    PageHeaderTitle?: PageHeaderTitleProps;
+    TablePagination?: TablePaginationProps;
+    IconButtonGroup?: IconButtonGroupProps;
+}>;

package/src/DatePicker/Calendar.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { DateType } from './DatePicker.type';
+declare type CalendarProps = {
+    /** DateRange for setting */
+    dateRange: {
+        /**  Min date @DateIOType */
+        min: DateType;
+        /**  Max date @DateIOType */
+        max: DateType;
+    };
+    /** Disable past dates */
+    disablePast?: boolean;
+    /** Disable future dates */
+    disableFuture?: boolean;
+    /** Text label for Today button */
+    todayButtonText?: string;
+    /** Date format string, default with 'MM/DD/YYYY' */
+    formatString?: string;
+    /** Custom renderer for day @DateIOType */
+    renderDay?: (
+    /** day to render */
+    day: DateType, 
+    /** the selelcted Date */
+    selectedDate: DateType, 
+    /** is the day in current month */
+    dayInCurrentMonth: boolean, 
+    /** day Component */
+    dayComponent: JSX.Element) => JSX.Element;
+    /** Disable specific date @DateIOType */
+    shouldDisableDate: (day: DateType) => boolean;
+    /** Callback firing on month change. Return promise to render spinner till it will not be resolved @DateIOType */
+    onMonthChange?: (date: DateType) => void | Promise<void>;
+    /** Custom loading indicator  */
+    loadingIndicator?: JSX.Element;
+    date: DateType;
+    onSelectDay: (day: DateType, fromUserSelect?: boolean) => void;
+    getInvalidateDateInRange: (day: DateType) => false | DateType;
+};
+declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+export { Calendar };
+export type { CalendarProps };

package/src/DatePicker/DatePicker.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseDatePickerClassesKey = 'root' | 'calendar' | 'header' | 'header-action' | 'switch-year-action' | 'switch-year-action-caret' | 'switch-month-actions-group' | 'switch-month-action' | 'date-button' | 'current-date' | 'day' | 'year' | 'years-panel' | 'days-panel' | 'days-grid' | 'weekdays' | 'weekday' | 'loading-container' | 'today-button';
+export declare type DatePickerClassesKey = CamelCase<BaseDatePickerClassesKey>;
+export declare type DatePickerClasses = {
+    name: 'date-picker';
+    classes: BaseDatePickerClassesKey;
+};

package/src/DatePicker/DatePicker.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Cls } from '@ringcentral/spring-base';
+import { DatePickerClasses } from './DatePicker.classes';
+declare const DatePickerClassesContext: import("react").Context<Cls<DatePickerClasses>>;
+declare const useDatePickerClasses: () => Cls<DatePickerClasses>;
+export { DatePickerClassesContext, useDatePickerClasses };

package/src/DatePicker/DatePicker.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DatePickerProps } from './DatePicker.type';
+import datePickerStyle from './styles/DatePicker.css';
+declare const DEFAULT_FORMAT = "MM/DD/YYYY";
+declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<DatePickerProps, "error" | "value" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "label" | "classes" | "focused" | "required" | "className" | "id" | "key" | "max" | "min" | "placeholder" | "size" | "type" | "onFocus" | "onBlur" | "onChange" | "action" | `data-${string}` | "helperText" | "FormHelperTextProps" | "variant" | "fullWidth" | "onClose" | "autoFocus" | "loadingIndicator" | "inputProps" | "inputRef" | "endAdornment" | "startAdornment" | "RootProps" | "clearBtn" | "useNativeClearBtn" | "clearText" | "showCharacterCount" | "ClearButtonProps" | "onClear" | "showMaskValueToggleButton" | "maskValue" | "onMaskValueChange" | "MaskValueButtonProps" | "ShowHideEyeIconProps" | "announcementText" | "PopoverProps" | "endIconSymbol" | "textInputClasses" | "screenReaderProps" | "disableFuture" | "disablePast" | "todayButtonText" | "formatString" | "renderDay" | "shouldDisableDate" | "onMonthChange" | "onSelectDay" | "locale"> & import("react").RefAttributes<HTMLDivElement>>;
+export { DatePicker, datePickerStyle, DEFAULT_FORMAT };

package/src/DatePicker/DatePicker.type.d.ts

@@ -0,0 +1,36 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import dayjs from 'dayjs';
+import { PickerTextField } from '../PickerTextField';
+import { CalendarProps } from './Calendar';
+import { DatePickerClassesKey } from './DatePicker.classes';
+import { ScreenReaderProps } from './utils';
+export declare type DateType = dayjs.Dayjs;
+export declare type DatePickerProps = StandardProps<{
+    /**
+     * Calendar onChange
+     *
+     * @param {Date} date update date value
+     * @param {boolean} fromUserSelect is that change come from user select day, when `false` mean that is come from range limitation
+     */
+    onChange?: (date: Date | null, fromUserSelect?: boolean) => void;
+    /** i18n locale country */
+    locale?: string;
+    /** value for picker */
+    value?: Date | null;
+    /**
+     * Customize aria-labels for DatePicker components.
+     * Pass this prop for localization or custom accessibility labels.
+     * If not provided, default English labels will be used.
+     */
+    screenReaderProps?: ScreenReaderProps;
+    /** Date format string, default with 'MM/DD/YYYY' */
+    formatString?: string;
+    /** when hover on the textField, if show the clearBtn. With default is true. */
+    clearBtn?: boolean;
+    /** Min date */
+    min?: Date | DateType | null;
+    /** Max date */
+    max?: Date | DateType | null;
+    /** Text label for Today button */
+    todayButtonText?: string;
+} & Omit<Partial<CalendarProps>, 'date' | 'dateRange' | 'handleDaySelect' | 'getInvalidateDateInRange'>, DatePickerClassesKey, typeof PickerTextField, 'value' | 'children' | 'defaultValue'>;

package/src/DatePicker/DatePickerHeader.d.ts

@@ -0,0 +1,27 @@
+import { FunctionComponent } from 'react';
+import { SlideDirection } from './SlideDirection';
+import { DateType } from './DatePicker.type';
+declare type ViewType = 'day' | 'year';
+declare type DatePickerHeaderProps = {
+    /** the month on display */
+    focusedDate: DateType;
+    /** with options 'right' | 'left' */
+    slideDirection: SlideDirection;
+    /** the current view mode, with options 'day' | 'year'. */
+    view: ViewType;
+    /** when change view mode */
+    onViewChange: () => void;
+    /** trigger when Month changes */
+    onMonthChange: (
+    /** the month selected */
+    date: DateType, 
+    /** slideDirection */
+    direction: SlideDirection) => void | Promise<void>;
+    /** is disable PrevMonth? with default false. */
+    disablePrevMonth?: boolean;
+    /** is disable NextMonth? with default false. */
+    disableNextMonth?: boolean;
+};
+declare const DatePickerHeader: FunctionComponent<DatePickerHeaderProps>;
+export { DatePickerHeader };
+export type { DatePickerHeaderProps, ViewType };

package/src/DatePicker/Day.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { PropsWithRoot } from '@ringcentral/spring-base';
+import { DateType } from './DatePicker.type';
+declare type DayProps = PropsWithRoot<{
+    /** display as content */
+    children: string;
+    /** is the year disabled */
+    disabled: boolean;
+    /** is the year focused */
+    focused?: boolean;
+    /** when user select */
+    onSelect: (value: string) => void;
+    /** is the year selected */
+    selected: boolean;
+    /** the value of the year */
+    value: string;
+    /** tabindex */
+    date: DateType;
+    current: boolean;
+}, 'button', 'className'>;
+declare const Day: import("react").ForwardRefExoticComponent<Pick<DayProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "current" | "aria-hidden" | "dir" | "form" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "name" | "focused" | "selected" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "placeholder" | "type" | "date" | "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" | "autoFocus" | "formEncType"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { Day };
+export type { DayProps };