@ringcentral/spring-ui 1.7.0

package/src/TextField/TextField.type.d.ts

@@ -0,0 +1,112 @@
+import { ComponentPropsWithRef, ElementType, FocusEventHandler, HTMLAttributes, InputHTMLAttributes, KeyboardEventHandler, MouseEventHandler, ReactNode, Ref, TextareaHTMLAttributes } from 'react';
+import { UseInputParameters } from '@mui/base';
+import { type HTMLDataAttribute, WithClassesProps } from '@ringcentral/spring-base';
+import { FormFieldProps } from '../FormField';
+import { IconButtonProps } from '../IconButton';
+import { ShowHideEyeProps } from '../Animation';
+import { TextFieldClassesKey } from './TextField.classes';
+declare type ReactInputComponentProps = React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement>;
+export declare type StandardInputAttributes = HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> & (InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>);
+declare type InputComponentProps = ReactInputComponentProps & StandardInputAttributes;
+declare type OmittedInputProps = 'type' | 'className' | 'placeholder' | 'children';
+declare type TextFieldRawProps = {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The placeholder text in input element
+     */
+    placeholder?: string;
+    /**
+     * The root props for the form field component
+     */
+    RootProps?: FormFieldProps & HTMLDataAttribute;
+    /**
+     * If true, the input will take up the full width of its container.
+     */
+    fullWidth?: boolean;
+    /**
+     * Show clear button when text input has valid content.
+     * @default true
+     */
+    clearBtn?: boolean;
+    /**
+     * When true, shows native clear button for search inputs.
+     * if clearBtn is  also true, both buttons will be shown.
+     * @default false
+     */
+    useNativeClearBtn?: boolean;
+    /**
+     * The arial label of clear button.
+     * @default 'clear'
+     */
+    clearText?: string;
+    /**
+     * Show the current/remaining character count. Only works for a controlled TextField where inputProps.maxLength is set.
+     * @default false
+     */
+    showCharacterCount?: boolean;
+    /** props apply on default clear button */
+    ClearButtonProps?: IconButtonProps;
+    /**
+     * Trigger when click clear button.
+     */
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
+    value?: string;
+    defaultValue?: string;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
+} & Pick<FormFieldProps, 'className' | 'label' | 'helperText' | 'variant' | 'focused' | 'size' | 'FormHelperTextProps'> & Omit<UseInputParameters, 'value' | 'defaultValue' | 'onBlur' | 'onFocus' | 'onClick'> & Pick<ComponentPropsWithRef<'input'>, 'autoFocus' | 'id' | 'readOnly'>;
+declare type BaseTextFieldProps = WithClassesProps<TextFieldRawProps, TextFieldClassesKey>;
+export declare type OverridableTextFieldProps<B, T extends ElementType, P extends InputComponentProps> = B & {
+    /**
+     * The component used for the `input` element.
+     * Either a string to use a HTML element or a component.
+     * @default 'input'
+     */
+    inputComponent?: T;
+    /**
+     * Attributes applied to the `input` element .
+     */
+    inputProps?: (T extends 'input' ? Omit<P & InputHTMLAttributes<HTMLInputElement>, OmittedInputProps> : Omit<P, OmittedInputProps>) & HTMLDataAttribute;
+    /**
+     * If `true`, the component will be displayed in focused state.
+     */
+    focused?: boolean;
+};
+export declare type SharedTextInputProps<T extends ElementType = 'input', P extends InputComponentProps = InputComponentProps> = OverridableTextFieldProps<BaseTextFieldProps, T, P>;
+export declare type TextFieldProps<T extends ElementType = 'input', P extends InputComponentProps = InputComponentProps> = SharedTextInputProps<T, P> & {
+    /**
+     * Type of the `input` element.
+     * @default 'text'
+     */
+    type?: 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search';
+    /**
+     * Controls whether the mask value button is displayed, typically used for allowing the user to see their password in plaintext
+     * @default true when type is "password"
+     */
+    showMaskValueToggleButton?: boolean;
+    /**
+     * Controls whether or not the value is masked and not shown in plaintext.
+     * If not provided, masking the value will be uncontrolled and will be internally managed by the TextField component when the user clicks the mask value toggle button.
+     * If provided, masking the value will be controlled and you will need to pass an `onMaskValueChange` callback.
+     */
+    maskValue?: boolean;
+    /**
+     * Callback when the Mask Button is toggled.
+     * Receives the new visibility state as a boolean.
+     */
+    onMaskValueChange?: (visible: boolean) => void;
+    /**
+     * Additional props for customizing the appearance and behavior of the Mask Button.
+     */
+    MaskValueButtonProps?: Partial<IconButtonProps>;
+    /**
+     * Additional props for customizing the appearance and behavior of the `ShowHideEye` component.
+     */
+    ShowHideEyeIconProps?: Omit<ShowHideEyeProps, 'hide'>;
+};
+export {};

package/src/TextField/index.d.ts

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

package/src/Textarea/Textarea.classes.d.ts

@@ -0,0 +1,10 @@
+import type { CamelCase } from 'type-fest';
+import { FormFieldSize } from '../FormField';
+import type { TextAreaVariant } from './Textarea.type';
+export declare type TextareaSlot = 'input' | 'form-field-content';
+export declare type BaseTextareaClassesKey = 'root' | TextAreaVariant | TextareaSlot | `${TextareaSlot}-${FormFieldSize}` | `${TextAreaVariant}-${TextareaSlot}` | 'clear' | `clear-${TextAreaVariant}` | `clear-${FormFieldSize}`;
+export declare type TextareaClassesKey = CamelCase<BaseTextareaClassesKey>;
+export declare type TextareaClasses = {
+    name: 'textarea';
+    classes: BaseTextareaClassesKey;
+};

package/src/Textarea/Textarea.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import textareaStyle from './styles/Textarea.css';
+import { TextareaProps } from './Textarea.type';
+declare const Textarea: import("react").ForwardRefExoticComponent<Pick<TextareaProps, "error" | "value" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "aria-hidden" | "dir" | "form" | "label" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "name" | "focused" | "required" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "dirName" | "maxLength" | "minLength" | "placeholder" | "readOnly" | "size" | "cols" | "rows" | "wrap" | "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}` | "helperText" | "FormHelperTextProps" | "variant" | "fullWidth" | "autoFocus" | "autoComplete" | "inputProps" | "inputRef" | "maxRows" | "minRows" | "endAdornment" | "startAdornment" | "RootProps" | "clearBtn" | "useNativeClearBtn" | "clearText" | "showCharacterCount" | "ClearButtonProps" | "onClear" | "inputComponent"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Textarea, textareaStyle };

package/src/Textarea/Textarea.type.d.ts

@@ -0,0 +1,26 @@
+import { TextareaAutosize, TextareaAutosizeProps } from '@mui/base';
+import { StandardProps, UnionOmit } from '@ringcentral/spring-base';
+import { SharedTextInputProps } from '../TextField';
+import { TextFieldClassesKey } from '../TextField/TextField.classes';
+export declare type TextAreaVariant = UnionOmit<NonNullable<SharedTextInputProps['variant']>, 'quiet'>;
+declare type TextAreaInputProps = {
+    /**
+     * Maximum number of rows to display.
+     */
+    maxRows?: number;
+    /**
+     * Minimum number of rows to display.
+     */
+    minRows?: number;
+    /**
+     * Number of rows to display.
+     */
+    rows?: number;
+    /**
+     * The variant of textarea
+     * @default 'outlined'
+     */
+    variant?: TextAreaVariant;
+} & Omit<TextareaAutosizeProps, 'value' | 'defaultValue'>;
+export declare type TextareaProps = StandardProps<TextAreaInputProps & SharedTextInputProps<typeof TextareaAutosize, TextAreaInputProps>, TextFieldClassesKey, typeof TextareaAutosize, 'inputComponent' | 'variant'>;
+export {};

package/src/Textarea/index.d.ts

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

package/src/TimePicker/NumberPicker.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { NumberPickerProps, NumberPickerRef } from './NumberPicker.type';
+declare const NumberPicker: import("react").ForwardRefExoticComponent<Pick<NumberPickerProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "slot" | "source" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "max" | "min" | "placeholder" | "step" | "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" | "renderValue" | "getScreenReaderLabel" | "isTwelveHourSystem"> & import("react").RefAttributes<NumberPickerRef>>;
+export { NumberPicker };
+export type { NumberPickerProps, NumberPickerRef };

package/src/TimePicker/NumberPicker.type.d.ts

@@ -0,0 +1,36 @@
+import { PropsWithRoot } from '@ringcentral/spring-base';
+import { Ref } from 'react';
+export declare type NumberPickerProps = PropsWithRoot<{
+    /** min number */
+    min?: number;
+    /** max number */
+    max?: number;
+    /** when user click the display number */
+    onClick?: () => void;
+    /** selected value */
+    value: number;
+    /** data source of the number array */
+    source: number[];
+    onChange: (value: number, reason: 'arrowKey' | 'arrowButton') => void;
+    /** get label for screen reader */
+    getScreenReaderLabel?: (value: string) => string;
+    /** each step value */
+    step: number;
+    /** render value fn */
+    renderValue?: (value: number) => string;
+    /**
+     * If `true`, the `NumberPicker` element will be focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /** Is 12 hours system */
+    isTwelveHourSystem?: boolean;
+    ref?: Ref<NumberPickerRef>;
+}, 'div'>;
+export declare type NumberPickerRef = {
+    value: number;
+    setRange: (range: Range) => void;
+};
+export declare type Range = {
+    min?: number;
+    max?: number;
+};

package/src/TimePicker/PickerView.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { PickerViewProps } from './PickerView.type';
+declare const PickerView: FunctionComponent<PickerViewProps>;
+export { PickerView };

package/src/TimePicker/PickerView.type.d.ts

@@ -0,0 +1,25 @@
+import { TIME_SYSTEM_TEXT } from './constant';
+import { TimeBoundary } from './utils';
+export declare type PickerViewScreenReaderProps = {
+    getHourPickerAriaLabel: (hour: string) => string;
+    getMinutePickerAriaLabel: (minute: string) => string;
+    getPeriodToggleAriaLabel: (period: TIME_SYSTEM_TEXT) => string;
+};
+export declare type PickerViewValue = {
+    hour: number;
+    minute: number;
+    period: TIME_SYSTEM_TEXT;
+};
+export declare type PickerViewProps = {
+    isTwelveHourSystem: boolean;
+    selectionShowType: 'none' | 'hour' | 'minute';
+    onSelectionShowTypeChange: (selectionShowType: 'none' | 'hour' | 'minute') => void;
+    screenReaderProps: PickerViewScreenReaderProps;
+    defaultValue: PickerViewValue;
+    onChange: (value: PickerViewValue) => void;
+    afterDraftConfirm: () => void;
+    range: {
+        min: TimeBoundary;
+        max: TimeBoundary;
+    };
+};

package/src/TimePicker/SelectionView.d.ts

@@ -0,0 +1,19 @@
+import { FunctionComponent } from 'react';
+declare type SelectionViewProps = {
+    /** dataSource, 12-hour, 24-hour or minutes */
+    source: number[];
+    /** selected value of source */
+    value: number;
+    /** handle user change value */
+    onConfirm: (value: number) => void;
+    /** min time */
+    min?: number;
+    /** max time */
+    max?: number;
+    /** Is 12 hours system */
+    isTwelveHourSystem?: boolean;
+    viewType: 'hour' | 'minute';
+};
+declare const SelectionView: FunctionComponent<SelectionViewProps>;
+export { SelectionView };
+export type { SelectionViewProps };

package/src/TimePicker/TimeButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { PropsWithRoot } from '@ringcentral/spring-base';
+declare type TimeButtonProps = PropsWithRoot<{
+    /**
+     * @default false
+     */
+    selected?: boolean;
+}, 'button'>;
+declare const TimeButton: import("react").ForwardRefExoticComponent<Pick<TimeButtonProps, "selected" | "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & import("react").RefAttributes<HTMLButtonElement>>;
+export { TimeButton };
+export type { TimeButtonProps };

package/src/TimePicker/TimePicker.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseTimePickerClassesKey = 'root' | 'picker-root' | 'time-button' | 'number-picker' | 'picker-view' | 'main-view' | 'minute-selection-view' | 'hour-selection-view' | 'twelve-hour';
+export declare type TimePickerClassesKey = CamelCase<BaseTimePickerClassesKey>;
+export declare type TimePickerClasses = {
+    name: 'time-picker';
+    classes: BaseTimePickerClassesKey;
+};

package/src/TimePicker/TimePicker.context.d.ts

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

package/src/TimePicker/TimePicker.d.ts

@@ -0,0 +1,5 @@
+import timePickerStyle from './styles/TimePicker.css';
+import { TimePickerComponent, TimePickerProps } from './TimePicker.type';
+declare const TimePicker: TimePickerComponent;
+export type { TimePickerProps };
+export { TimePicker, timePickerStyle };

package/src/TimePicker/TimePicker.type.d.ts

@@ -0,0 +1,30 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { ReactElement } from 'react';
+import { PickerTextField } from '../PickerTextField';
+import { PickerViewScreenReaderProps } from './PickerView.type';
+import { TimePickerClassesKey } from './TimePicker.classes';
+export declare type TimePickerProps<T = false> = StandardProps<{
+    /** Sets if a 12 hour clock is being used. */
+    isTwelveHourSystem?: boolean;
+    /** A Date object or number that represents the duration in milliseconds since the start of the day. */
+    value: (T extends true ? Date : number) | null;
+    /** When all using date, this props will be remove, */
+    dateMode?: T;
+    /** The minimum time that can be set. */
+    min?: T extends true ? Date : number;
+    /** The maximum time that can be set. */
+    max?: T extends true ? Date : number;
+    /**
+     * The default value to show in the picker when the input field is empty.
+     * @default null 00:00
+     */
+    defaultPickerValue?: (T extends true ? Date : number) | null;
+    /** Props containing functions for getting attributes of the target element */
+    screenReaderProps?: PickerViewScreenReaderProps;
+    /** Callback fired when the user changes the time. */
+    onChange?: (time: TimePickerProps<T>['value'] | null) => void;
+}, TimePickerClassesKey, typeof PickerTextField, 'onClick' | 'children'>;
+export interface TimePickerComponent {
+    <T = false>(props: TimePickerProps<T>): ReactElement;
+    displayName?: string;
+}

package/src/TimePicker/ToggleText.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ToggleTextProps, ToggleTextRef } from './ToggleText.type';
+declare const ToggleText: import("react").ForwardRefExoticComponent<Pick<ToggleTextProps, "value" | "children" | "onKeyDown" | "onKeyUp" | "onClick" | "disabled" | "aria-hidden" | "dir" | "form" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "name" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "placeholder" | "type" | "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" | "getScreenReaderLabel" | "isTwelveHourSystem"> & import("react").RefAttributes<ToggleTextRef>>;
+export { ToggleText };
+export type { ToggleTextProps, ToggleTextRef };

package/src/TimePicker/ToggleText.type.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithRoot } from '@ringcentral/spring-base';
+import { TIME_SYSTEM_TEXT } from './constant';
+export declare type ToggleTextProps = PropsWithRoot<{
+    onChange: (value: TIME_SYSTEM_TEXT, reason: 'arrowKey' | 'arrowButton') => void;
+    /** initial value */
+    value: TIME_SYSTEM_TEXT;
+    /** get label for screen reader */
+    getScreenReaderLabel?: (value: TIME_SYSTEM_TEXT) => string;
+    /** Is 12 hours system */
+    isTwelveHourSystem?: boolean;
+}, 'button'>;
+export declare type ToggleTextRef = {
+    value: TIME_SYSTEM_TEXT;
+};

package/src/TimePicker/constant.d.ts

@@ -0,0 +1,7 @@
+declare enum TIME_SYSTEM_TEXT {
+    PM = "PM",
+    AM = "AM"
+}
+declare const K_ENTER = "Enter";
+declare const K_SPACE = " ";
+export { K_ENTER, K_SPACE, TIME_SYSTEM_TEXT };

package/src/TimePicker/index.d.ts

@@ -0,0 +1,14 @@
+export * from './NumberPicker';
+export * from './NumberPicker.type';
+export * from './PickerView';
+export * from './PickerView.type';
+export * from './SelectionView';
+export * from './TimeButton';
+export * from './TimePicker.classes';
+export * from './TimePicker.context';
+export * from './TimePicker';
+export * from './TimePicker.type';
+export * from './ToggleText';
+export * from './ToggleText.type';
+export * from './constant';
+export * from './utils';

package/src/TimePicker/utils/A11yUtils.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function isClick(event: React.MouseEvent | React.KeyboardEvent): boolean;

package/src/TimePicker/utils/TimeBoundary.d.ts

@@ -0,0 +1,27 @@
+/**
+ * get target time boundary, what time is nearest time with that timeGap
+ */
+export declare class TimeBoundary {
+    private _hour?;
+    private value;
+    private timeGap;
+    get hour(): number | undefined;
+    private _minute?;
+    get minute(): number | undefined;
+    private _date?;
+    get date(): Date | undefined;
+    set date(value: Date | undefined);
+    timestamp: number;
+    constructor(value: number | Date | undefined, direction: 'after' | 'before', timeGap: number);
+    private getAfterNearTime;
+    private getBeforeNearTime;
+    private getDateTime;
+}
+export declare const getRangeBoundary: ({ min, max, gap, }: {
+    min?: number | Date | undefined;
+    max?: number | Date | undefined;
+    gap?: number | undefined;
+}) => {
+    min: TimeBoundary;
+    max: TimeBoundary;
+};

package/src/TimePicker/utils/TimePickerHelper.d.ts

@@ -0,0 +1,52 @@
+import { TIME_SYSTEM_TEXT } from '../constant';
+declare const parseNumber: (value: number, isTwelveHourSystem?: boolean | undefined) => number;
+declare const parseNumberToString: (value: number, isTwelveHourSystem?: boolean | undefined) => string;
+/** add miss zero */
+declare const pad: (num: number, size?: number) => string;
+declare type GetFormattedTimeOption = {
+    hour: number;
+    minute: number;
+    period: TIME_SYSTEM_TEXT;
+};
+/**
+ * get formatted time hh:mm
+ * @param option `{hour, min, period}`
+ * @param isTwelveHourSystem boolean
+ * @returns `hh:mm AM` or `hh:mm PM` or `hh:mm`
+ */
+declare const getFormattedTime: ({ hour, minute, period }: GetFormattedTimeOption, isTwelveHourSystem?: boolean | undefined) => string;
+declare const HALF_DAY_HOURS = 12;
+declare const HOUR_MINUTES = 60;
+declare const TIME_GAP = 15;
+declare const ONE_HOUR: number;
+declare const twelveHourSystemSource: number[];
+declare const twentyFourHourSystemSource: number[];
+declare const minuteSource: number[];
+declare const lastMinute = 45;
+/**
+ * hour and minute timestamp
+ */
+declare const getTimestampFromDate: (date: Date) => number;
+/**
+ * hour and minute number
+ */
+declare const getHourAndMinute: (times: number | null) => {
+    hour: number;
+    minute: number;
+};
+declare function getTimestamp(nowTime: number | Date): number;
+declare function getTimestamp(nowTime: null): null;
+declare function getTimestamp(nowTime: number | Date | null): number | null;
+/**
+ * hour and min object to timestamp
+ */
+declare const getTimestampFromHourAndMin: (option: {
+    hour: number;
+    minute: number;
+}) => number;
+/**
+ * get period, `PM` or `AM`
+ */
+declare function getPeriod(currHour: number): TIME_SYSTEM_TEXT;
+declare const getRecoupHour: (currHour: number, period?: TIME_SYSTEM_TEXT | undefined) => number;
+export { getFormattedTime, getHourAndMinute, getPeriod, getRecoupHour, getTimestamp, getTimestampFromDate, getTimestampFromHourAndMin, HALF_DAY_HOURS, HOUR_MINUTES, lastMinute, minuteSource, ONE_HOUR, pad, parseNumber, parseNumberToString, TIME_GAP, twelveHourSystemSource, twentyFourHourSystemSource, };

package/src/TimePicker/utils/getNumberPickerBoundary.d.ts

@@ -0,0 +1,22 @@
+import { TimeBoundary } from './TimeBoundary';
+declare type GetNumberPickerBoundaryOptions = {
+    range: {
+        min: TimeBoundary;
+        max: TimeBoundary;
+    };
+    isTwelveHourSystem?: boolean;
+};
+/**
+ * get range from current hour
+ */
+export declare function getNumberPickerBoundary(currentHour: number, { range, isTwelveHourSystem }: GetNumberPickerBoundaryOptions): {
+    hour: {
+        min: number;
+        max: number;
+    };
+    minute: {
+        min: number;
+        max: number;
+    };
+};
+export {};

package/src/TimePicker/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './A11yUtils';
+export * from './TimeBoundary';
+export * from './TimePickerHelper';
+export * from './getNumberPickerBoundary';

package/src/TimePicker/utils/runKeyHandler.d.ts

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+declare type KeyHandlers = Record<KeyboardEvent['key'], () => void>;
+export declare const runKeyHandler: (e: KeyboardEvent<unknown>, keyHandlers: KeyHandlers) => void;
+export {};

package/src/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Tooltip: import("react").ForwardRefExoticComponent<{
+    disableBackdropAnimation?: boolean | undefined;
+} & Omit<import("./TooltipView.type").TooltipViewProps, "children" | "title" | "anchorEl"> & Omit<import("./TooltipTrigger.type").TooltipTriggerProps, "renderTooltip" | "tooltipId"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Tooltip };

package/src/Tooltip/Tooltip.type.d.ts

@@ -0,0 +1,5 @@
+import { TooltipTriggerProps } from './TooltipTrigger.type';
+import { TooltipViewProps } from './TooltipView.type';
+export declare type TooltipProps = {
+    disableBackdropAnimation?: boolean;
+} & Omit<TooltipViewProps, 'anchorEl' | 'children' | 'title'> & Omit<TooltipTriggerProps, 'renderTooltip' | 'tooltipId'>;

package/src/Tooltip/TooltipTrigger.a11y.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+import { TooltipTriggerProps } from './TooltipTrigger.type';
+/**
+ * Accessibility naming strategy:
+ * - Default (label mode): `title` is treated as an accessible label
+ *   - string `title` → `aria-label`
+ *   - React element `title` → `aria-labelledby` while the tooltip is open
+ * - Description mode (`describeChild = true`): `title` is treated as an accessible description
+ *   - when closed → native `title` attribute
+ *   - when open   → `aria-describedby` pointing to the tooltip id
+ */
+declare const ARIA_DESCRIBEDBY = "aria-describedby";
+declare const ARIA_LABEL = "aria-label";
+declare const ARIA_LABELLEDBY = "aria-labelledby";
+declare type TooltipA11yNameOrDescProps = {
+    title?: string | null;
+    [ARIA_DESCRIBEDBY]?: string | null;
+    [ARIA_LABEL]?: string | null;
+    [ARIA_LABELLEDBY]?: string | null;
+};
+declare type TooltipDisabledOverrides = {
+    title?: string | null;
+    [ARIA_DESCRIBEDBY]?: string;
+};
+export declare type TooltipA11yResult = {
+    nameOrDescProps: TooltipA11yNameOrDescProps;
+    disabledOverrides: TooltipDisabledOverrides;
+};
+declare type TooltipA11yInput = {
+    title: TooltipTriggerProps['title'];
+    describeChild: boolean;
+    triggerWhenDisabled?: boolean;
+    open: boolean;
+    tooltipId: string;
+    child: ReactElement;
+};
+export declare function computeTooltipA11y({ title, describeChild, triggerWhenDisabled, open, tooltipId, child, }: TooltipA11yInput): TooltipA11yResult;
+export {};

package/src/Tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { TooltipTriggerProps } from './TooltipTrigger.type';
+declare const TooltipTrigger: FunctionComponent<TooltipTriggerProps>;
+export { TooltipTrigger };