@ringcentral/spring-ui 1.7.0

package/src/FormField/FormField.type.d.ts

@@ -0,0 +1,46 @@
+import { ComponentProps, DetailedHTMLProps, LabelHTMLAttributes, Ref } from 'react';
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { FormFieldClassesKey } from './FormField.classes';
+export declare type FormFieldVariant = 'standard' | 'outlined' | 'quiet' | 'contained';
+export declare type FormFieldSize = 'xlarge' | 'large' | 'medium';
+export declare type FormFieldProps = StandardProps<{
+    /**
+     * The label on the form element
+     */
+    label?: React.ReactNode;
+    /**
+     * Props passed to the <label> element
+     */
+    labelProps?: DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>;
+    /**
+     * The help text under the form element
+     */
+    helperText?: React.ReactNode;
+    /**
+     * If true, always show focused style
+     * @default false
+     */
+    focused?: boolean;
+    /**
+     * The size of the form element
+     * @default 'xlarge'
+     */
+    size?: FormFieldSize;
+    /**
+     * Pass ref to the content node
+     */
+    contentRef?: Ref<HTMLDivElement>;
+    /**
+     * Pass props to the content node
+     */
+    contentProps?: Omit<ComponentProps<'div'>, 'className'> & HTMLDataAttribute;
+    /**
+     * Pass props to the helperText node
+     */
+    FormHelperTextProps?: ComponentProps<'div'> & HTMLDataAttribute;
+    variant?: FormFieldVariant;
+    htmlFor?: string;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+}, FormFieldClassesKey, 'div'>;

package/src/FormField/index.d.ts

@@ -0,0 +1,4 @@
+export * from './FormField.classes';
+export * from './FormField';
+export * from './FormField.type';
+export * from './useHelperTextId';

package/src/FormField/useHelperTextId.d.ts

@@ -0,0 +1,30 @@
+import { FormFieldProps } from './FormField.type';
+export interface UseHelperTextIdOptions extends Pick<FormFieldProps, 'helperText' | 'FormHelperTextProps'> {
+    /**
+     * The base ID to generate helper text ID from
+     */
+    id: string;
+}
+/**
+ * Hook to generate consistent helper text IDs for form field accessibility
+ *
+ * Follows the pattern: `${id}-helper-text`
+ *
+ * @param options Configuration options
+ * @returns Generated helper text ID or undefined if no helper text
+ *
+ * @example
+ * ```tsx
+ * const Select = ({ helperText, FormHelperTextProps, ...props }) => {
+ *   const id = useId(idProp);
+ *   const helperTextId = useHelperTextId({ helperText, id, FormHelperTextProps });
+ *
+ *   return (
+ *     <FormField FormHelperTextProps={{ id: helperTextId, ...FormHelperTextProps }}>
+ *       <button aria-describedby={helperTextId}>
+ *     </FormField>
+ *   );
+ * };
+ * ```
+ */
+export declare const useHelperTextId: ({ helperText, id, FormHelperTextProps, }: UseHelperTextIdOptions) => string | undefined;

package/src/FormLabel/FormLabel.classes.d.ts

@@ -0,0 +1,10 @@
+import type { CamelCase } from 'type-fest';
+import { FormLabelPlacement } from './FormLabel.type';
+declare type FormLabelSlot = 'label';
+export declare type BaseFormLabelClassesKey = 'root' | 'full-width' | FormLabelSlot | FormLabelPlacement | `${FormLabelPlacement}-${FormLabelSlot}`;
+export declare type FormLabelClassesKey = CamelCase<BaseFormLabelClassesKey>;
+export declare type FormLabelClasses = {
+    name: 'form-label';
+    classes: BaseFormLabelClassesKey;
+};
+export {};

package/src/FormLabel/FormLabel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { FormLabelProps } from './FormLabel.type';
+import formLabelStyle from './styles/FormLabel.css';
+declare const FormLabel: import("react").ForwardRefExoticComponent<Pick<FormLabelProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "form" | "label" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "prefix" | "contentEditable" | "inputMode" | "tabIndex" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | "htmlFor" | "fullWidth" | "labelRef" | "placement" | "rootProps" | keyof import("./FormLabelContext").FormLabelContextValue> & import("react").RefAttributes<HTMLDivElement>>;
+export { FormLabel, formLabelStyle };

package/src/FormLabel/FormLabel.type.d.ts

@@ -0,0 +1,26 @@
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+import { FormLabelContextValue } from './FormLabelContext';
+import { FormLabelClassesKey } from './FormLabel.classes';
+export declare type FormLabelPlacement = 'end' | 'start';
+export declare type FormLabelProps = StandardProps<{
+    /**
+     * label text for input element
+     */
+    label?: ReactNode;
+    /**
+     * The ref to the label element
+     */
+    labelRef?: Ref<HTMLLabelElement>;
+    /**
+     * If `true`, the `Label` will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The placement of the label in relation to the input.
+     * @default end
+     */
+    placement?: FormLabelPlacement;
+    rootProps?: ComponentPropsWithoutRef<'div'> & HTMLDataAttribute;
+} & FormLabelContextValue, FormLabelClassesKey, 'label'>;

package/src/FormLabel/FormLabelContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type FormLabelContextValue = {
+    disabled?: boolean;
+    value?: string;
+    id?: string;
+};
+export declare const FormLabelContext: import("react").Context<FormLabelContextValue>;
+export declare const useFormLabel: (props: FormLabelContextValue) => FormLabelContextValue;

package/src/FormLabel/index.d.ts

@@ -0,0 +1,4 @@
+export * from './FormLabel.classes';
+export * from './FormLabel';
+export * from './FormLabel.type';
+export * from './FormLabelContext';

package/src/Icon/Icon.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseIconClassesKey = 'root' | 'svg' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+export declare type IconClassesKey = CamelCase<BaseIconClassesKey>;
+export declare type IconClasses = {
+    name: 'icon';
+    classes: BaseIconClassesKey;
+};

package/src/Icon/Icon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IconProps } from './Icon.type';
+import iconStyle from './styles/Icon.css';
+declare const Icon: import("react").ForwardRefExoticComponent<Pick<IconProps, "symbol" | "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}`> & import("react").RefAttributes<HTMLSpanElement>>;
+export { Icon, iconStyle };

package/src/Icon/Icon.type.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType, ReactElement } from 'react';
+import { StandardProps } from '@ringcentral/spring-base';
+import { IconClassesKey } from './Icon.classes';
+declare type IconSize = 'xxxlarge' | 'xxlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall';
+export declare type IconProps = StandardProps<{
+    /** Component for render, higher priority than `children` */
+    symbol?: ComponentType<any>;
+    /** Element for render */
+    children?: ReactElement;
+    /**
+     * Size of the icon.
+     *
+     * @remarks
+     * The available sizes are:
+     * - `"xsmall": 12px`
+     * - `"small": 16px`
+     * - `"medium": 20px`
+     * - `"large": 24px`
+     * - `"xlarge": 32px`
+     * - `"xxlarge": 36px`
+     * - `"xxxlarge": 40px`
+     */
+    size?: IconSize;
+}, IconClassesKey, 'span'>;
+export {};

package/src/Icon/index.d.ts

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

package/src/IconButton/IconButton.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+import type { IconButtonSize, IconButtonShape, IconButtonVariant, IconButtonColor } from './IconButton.type';
+export declare type BaseIconButtonClassesKey = 'root' | 'label' | 'contained' | 'outlined' | 'icon' | 'inverted' | 'circular' | 'rectangular' | 'squircle' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'hide-background' | IconButtonColor | `${IconButtonSize}-${IconButtonShape}` | `${IconButtonSize}-${IconButtonVariant}` | `${IconButtonVariant}-${IconButtonShape}` | `${IconButtonVariant}-${IconButtonColor}` | `${IconButtonSize}-label` | 'squircle-label' | `${IconButtonSize}-${IconButtonShape}-label` | `${IconButtonVariant}-hide-background` | `${IconButtonShape}-hide-background`;
+export declare type IconButtonClassesKey = CamelCase<BaseIconButtonClassesKey>;
+export declare type IconButtonClasses = {
+    name: 'icon-button';
+    classes: BaseIconButtonClassesKey;
+};

package/src/IconButton/IconButton.d.ts

@@ -0,0 +1,4 @@
+import { IconButtonComponent } from './IconButton.type';
+import iconButtonStyle from './styles/IconButton.css';
+declare const IconButton: IconButtonComponent;
+export { IconButton, iconButtonStyle };

package/src/IconButton/IconButton.type.d.ts

@@ -0,0 +1,58 @@
+import { ComponentType } from 'react';
+import { UseButtonParameters } from '@mui/base';
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { IconProps } from '@ringcentral/spring-ui';
+import { WithTooltipProps } from '../Tooltip/withTooltip';
+import { IconButtonClassesKey } from './IconButton.classes';
+declare type DefaultElementType = 'button';
+declare type ExtendElementType = 'a' | DefaultElementType;
+export declare type IconButtonSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+export declare type IconButtonVariant = 'outlined' | 'contained' | 'icon' | 'inverted';
+export declare type IconButtonShape = 'circular' | 'rectangular' | 'squircle';
+export declare type IconButtonColor = 'danger' | 'warning' | 'primary' | 'success' | 'secondary' | 'neutral';
+declare type BaseIconButtonProps = WithClassesProps<WithTooltipProps<{
+    /**
+     * The icon to render. If children are provided the icon will not be rendered.
+     */
+    symbol?: ComponentType;
+    /**
+     * The variant of the component.
+     * @default "outlined"
+     */
+    variant?: IconButtonVariant;
+    /**
+     * The label text. Only applies to XXXLarge/XXLarge sizes.
+     */
+    label?: string;
+    /**
+     * The color of the component.
+     * @default "primary"
+     */
+    color?: IconButtonColor;
+    /**
+     * The size of the component.
+     * @default "large"
+     */
+    size?: IconButtonSize;
+    /**
+     * The shape of the component.
+     * @default "circular"
+     */
+    shape?: IconButtonShape;
+    /**
+     * Controls whether the component should have a background in its resting state.
+     * Does not apply to the "icon" variant.
+     * @default true
+     */
+    background?: boolean;
+    /**
+     * Overrides the default icon size.
+     */
+    iconSize?: IconProps['size'];
+} & Omit<UseButtonParameters, 'href'>>, IconButtonClassesKey>;
+export declare type IconButtonProps<T extends ExtendElementType = DefaultElementType> = OverridableProps<BaseIconButtonProps, T>;
+export declare type IconButtonComponent = OverridableComponent<{
+    props: BaseIconButtonProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/IconButton/IconButtonLabel.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseIconButtonLabelClassesKey = 'root' | 'text';
+export declare type IconButtonLabelClassesKey = CamelCase<BaseIconButtonLabelClassesKey>;
+export declare type IconButtonLabelClasses = {
+    name: 'icon-button-outer-label';
+    classes: BaseIconButtonLabelClassesKey;
+};

package/src/IconButton/IconButtonLabel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IconButtonLabelProps } from './IconButtonLabel.type';
+import iconButtonLabelStyle from './styles/IconButtonLabel.css';
+declare const IconButtonLabel: import("react").ForwardRefExoticComponent<Pick<IconButtonLabelProps, "children" | "onKeyDown" | "onKeyUp" | "onClick" | "aria-hidden" | "dir" | "label" | "slot" | "style" | "title" | "aria-live" | "aria-atomic" | "role" | "classes" | "className" | "accessKey" | "draggable" | "hidden" | "lang" | "translate" | "id" | "prefix" | "contentEditable" | "inputMode" | "key" | "defaultChecked" | "defaultValue" | "placeholder" | "onFocus" | "onBlur" | "onMouseEnter" | "onMouseLeave" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | `data-${string}` | keyof import("@mui/base").UseButtonParameters> & import("react").RefAttributes<HTMLDivElement>>;
+export { IconButtonLabel, iconButtonLabelStyle };

package/src/IconButton/IconButtonLabel.type.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { UseButtonParameters } from '@mui/base';
+import { StandardProps } from '@ringcentral/spring-base';
+import { IconButtonLabelClassesKey } from './IconButtonLabel.classes';
+declare type IconButtonLabelProps = StandardProps<{
+    /**
+     * The label text of icon button.
+     */
+    label?: string;
+    children: ReactElement;
+} & UseButtonParameters, IconButtonLabelClassesKey, 'div'>;
+export type { IconButtonLabelProps };

package/src/IconButton/index.d.ts

@@ -0,0 +1,6 @@
+export * from './IconButton.classes';
+export * from './IconButton';
+export * from './IconButton.type';
+export * from './IconButtonLabel.classes';
+export * from './IconButtonLabel';
+export * from './IconButtonLabel.type';

package/src/IconButtonGroup/IconButtonGroup.classes.d.ts

@@ -0,0 +1,7 @@
+import type { CamelCase } from 'type-fest';
+export declare type BaseIconButtonGroupClassesKey = 'root' | 'horizontal' | 'vertical' | 'border';
+export declare type IconButtonGroupClassesKey = CamelCase<BaseIconButtonGroupClassesKey>;
+export declare type IconButtonGroupClasses = {
+    name: 'icon-button-group';
+    classes: BaseIconButtonGroupClassesKey;
+};

package/src/IconButtonGroup/IconButtonGroup.d.ts

@@ -0,0 +1,4 @@
+import { IconButtonGroupComponent } from './IconButtonGroup.type';
+import iconButtonGroupStyle from './styles/IconButtonGroup.css';
+declare const IconButtonGroup: IconButtonGroupComponent;
+export { IconButtonGroup, iconButtonGroupStyle };

package/src/IconButtonGroup/IconButtonGroup.type.d.ts

@@ -0,0 +1,22 @@
+import { ElementType } from 'react';
+import { OverridableComponent, OverridableProps, WithClassesProps } from '@ringcentral/spring-base';
+import { IconButtonGroupClassesKey } from './IconButtonGroup.classes';
+declare type DefaultElementType = 'div';
+export declare type BaseIconButtonGroupProps = WithClassesProps<{
+    /**
+     * The component orientation (layout flow direction)
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * If true the border will be shown
+     * @default false
+     */
+    border?: boolean;
+}, IconButtonGroupClassesKey>;
+export declare type IconButtonGroupProps<T extends ElementType = DefaultElementType> = OverridableProps<BaseIconButtonGroupProps, T>;
+export declare type IconButtonGroupComponent = OverridableComponent<{
+    props: BaseIconButtonGroupProps;
+    defaultComponent: DefaultElementType;
+}>;
+export {};

package/src/IconButtonGroup/index.d.ts

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

package/src/InlineEditable/InlineEditable.classes.d.ts

@@ -0,0 +1,9 @@
+import type { CamelCase } from 'type-fest';
+import type { InlineEditableVariant } from './InlineEditable.type';
+export declare type InlineEditableSlot = 'input' | 'text' | 'textarea';
+export declare type BaseInlineEditableClassesKey = 'root' | 'full-width' | InlineEditableSlot | InlineEditableVariant | `${InlineEditableVariant}-${InlineEditableSlot}`;
+export declare type InlineEditableClassesKey = CamelCase<BaseInlineEditableClassesKey>;
+export declare type InlineEditableClasses = {
+    name: 'inline-editable';
+    classes: BaseInlineEditableClassesKey;
+};

package/src/InlineEditable/InlineEditable.d.ts

@@ -0,0 +1,5 @@
+import { ComponentType } from 'react';
+import { InlineEditableProps } from './InlineEditable.type';
+import inlineEditableStyle from './styles/InlineEditable.css';
+declare const InlineEditable: ComponentType<InlineEditableProps>;
+export { InlineEditable, inlineEditableStyle };

package/src/InlineEditable/InlineEditable.type.d.ts

@@ -0,0 +1,116 @@
+import { TextareaAutosizeProps } from '@mui/base';
+import { HTMLDataAttribute, StandardProps } from '@ringcentral/spring-base';
+import { ComponentProps, ComponentPropsWithRef, FocusEvent, KeyboardEvent } from 'react';
+import { TooltipProps } from '../Tooltip';
+import { InlineEditableClassesKey } from './InlineEditable.classes';
+export declare type TextareaEditHandler<T = EditCompleteReason> = (e: KeyboardEvent<HTMLTextAreaElement> | FocusEvent<HTMLTextAreaElement>, reason: T, value: {
+    currentValue: string;
+    previousValue: string;
+}) => void;
+export declare type InputEditHandler<T = EditCompleteReason> = (e: KeyboardEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>, reason: T, value: {
+    currentValue: string;
+    previousValue: string;
+}) => void;
+export declare type EditCompleteReason = 'Enter' | 'Escape' | 'Blur';
+export declare type InlineEditableVariant = 'standard' | 'outlined';
+export declare type InlineEditableProps = StandardProps<(({
+    /**
+     * If `true`, a textarea element will be rendered instead of an input.
+     */
+    multiline: true;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Enter'
+     * 2. User presses 'Escape'
+     * 3. User triggers 'Blur', for example: press Tab or click elsewhere
+     */
+    onEditComplete?: TextareaEditHandler;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Enter'
+     * 2. User triggers 'Blur', for example: press Tab or click elsewhere
+     */
+    onEditConfirm?: TextareaEditHandler<'Enter' | 'Blur'>;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Escape'
+     */
+    onEditCancel?: TextareaEditHandler<'Escape'>;
+} & TextareaAutosizeProps) | ({
+    multiline: false;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Enter'
+     * 2. User presses 'Escape'
+     * 3. User triggers 'Blur', for example: press Tab or click elsewhere
+     */
+    onEditComplete?: InputEditHandler;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Enter'
+     * 2. User triggers 'Blur', for example: press Tab or click elsewhere
+     */
+    onEditConfirm?: InputEditHandler<'Enter' | 'Blur'>;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Escape'
+     */
+    onEditCancel?: InputEditHandler<'Escape'>;
+} & ComponentPropsWithRef<'input'>) | ({
+    multiline?: never;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Enter'
+     * 2. User presses 'Escape'
+     * 3. User triggers 'Blur', for example: press Tab or click elsewhere
+     */
+    onEditComplete?: InputEditHandler;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Enter'
+     * 2. User triggers 'Blur', for example: press Tab or click elsewhere
+     */
+    onEditConfirm?: InputEditHandler<'Enter' | 'Blur'>;
+    /**
+     * Callback invoked when done editing due to reasons below:
+     * 1. User presses 'Escape'
+     */
+    onEditCancel?: InputEditHandler<'Escape'>;
+} & ComponentPropsWithRef<'input'>)) & {
+    /**
+     * The variant to use.
+     * @default 'standard'
+     */
+    variant?: InlineEditableVariant;
+    /**
+     * The value of the input/textarea.
+     */
+    value: string;
+    /**
+     * The default editing state. Use when the component is not controlled.
+     */
+    defaultEditing?: boolean;
+    /**
+     * The editing state. Use when the component is controlled.
+     */
+    isEditing?: boolean;
+    /**
+     * Callback invoked when input/textarea is focused.
+     */
+    onEditStart?: () => void;
+    /**
+     * If `true`, the edit functionality will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input will take up the full width of its container.
+     * If `multiline` is `true`, fullWidth will be set to `true`.
+     */
+    fullWidth?: boolean;
+    /**
+     * Props applied to Tooltip component when not editing.
+     */
+    TooltipProps?: Omit<TooltipProps, 'children' | 'open' | 'onOpenStateChange'>;
+    /** Attributes applied to root div*/
+    rootProps?: ComponentProps<'div'> & HTMLDataAttribute;
+}, InlineEditableClassesKey>;

package/src/InlineEditable/index.d.ts

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

package/src/LinearProgressIndicator/LinearProgressIndicator.classes.d.ts

@@ -0,0 +1,9 @@
+import type { CamelCase } from 'type-fest';
+import type { LinearProgressIndicatorVariant } from './LinearProgressIndicator.type';
+export declare type LinearProgressIndicatorSlot = 'label' | 'details-label' | 'track' | 'bar' | 'details-container' | 'details-label';
+export declare type BaseLinearProgressIndicatorClassesKey = 'root' | 'slim' | LinearProgressIndicatorVariant | LinearProgressIndicatorSlot | `${LinearProgressIndicatorVariant}-${LinearProgressIndicatorSlot}` | `${LinearProgressIndicatorVariant}-track-slim`;
+export declare type LinearProgressIndicatorClassesKey = CamelCase<BaseLinearProgressIndicatorClassesKey>;
+export declare type LinearProgressIndicatorClasses = {
+    name: 'linear-progress-indicator';
+    classes: BaseLinearProgressIndicatorClassesKey;
+};

package/src/LinearProgressIndicator/LinearProgressIndicator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { LinearProgressIndicatorProps } from './LinearProgressIndicator.type';
+import linearProgressIndicatorStyle from './styles/LinearProgressIndicator.css';
+declare const LinearProgressIndicator: React.ForwardRefExoticComponent<Pick<LinearProgressIndicatorProps, "value" | "details" | "label" | "classes" | "key" | "max" | "min" | `data-${string}` | "variant" | keyof React.HTMLAttributes<HTMLSpanElement> | "progressBarProps" | "slim" | "showPercentage"> & React.RefAttributes<HTMLSpanElement>>;
+export { LinearProgressIndicator, linearProgressIndicatorStyle };

package/src/LinearProgressIndicator/LinearProgressIndicator.type.d.ts

@@ -0,0 +1,46 @@
+import { StandardProps } from '@ringcentral/spring-base';
+import { ComponentProps, ReactNode } from 'react';
+import { LinearProgressIndicatorClassesKey } from './LinearProgressIndicator.classes';
+export declare type LinearProgressIndicatorVariant = 'determinate';
+export declare type LinearProgressIndicatorProps = StandardProps<{
+    variant: LinearProgressIndicatorVariant;
+    /**
+     * Shows a slim and more compact indicator.
+     * @default false
+     */
+    slim?: boolean;
+    /**
+     * The label shown above the progress bar.
+     *
+     */
+    label?: ReactNode;
+    /**
+     * The progress details shown below the progress bar (i.e. 0.2mb of 8mb).
+     * @default false
+     */
+    details?: ReactNode;
+    /**
+     * Shows the current percentage of the indicator. Only applies when `showDetails` is true
+     * @default false
+     */
+    showPercentage?: boolean;
+    /**
+     * Sets the value of the indicator.
+     *
+     */
+    value: number;
+    /**
+     * Sets the minimum value of the indicator.. Defaults to `0`
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Sets the maximum value of the indicator. Used to calculate the current percentage.
+     *
+     */
+    max: number;
+    /**
+     * Sets the props that are applied to the `role="progressbar"` element
+     */
+    progressBarProps?: Omit<ComponentProps<'span'>, 'ref' | 'role'>;
+}, LinearProgressIndicatorClassesKey, 'span'>;

package/src/LinearProgressIndicator/index.d.ts

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

package/src/Link/Link.classes.d.ts

@@ -0,0 +1,8 @@
+import type { CamelCase } from 'type-fest';
+export declare type LinkHoverBehavior = 'none' | 'hover' | 'always';
+export declare type BaseLinkClassesKey = 'root' | 'primary' | 'secondary' | LinkHoverBehavior;
+export declare type LinkClassesKey = CamelCase<BaseLinkClassesKey>;
+export declare type LinkClasses = {
+    name: 'link';
+    classes: BaseLinkClassesKey;
+};

package/src/Link/Link.d.ts

@@ -0,0 +1,4 @@
+import { LinkComponent } from './Link.type';
+import linkStyle from './styles/Link.css';
+declare const Link: LinkComponent;
+export { Link, linkStyle };