@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/esm/components/formDialog/formDialog.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useImperativeHandle, useRef, useState } from 'react';
 import { Dialog } from '../dialog';
-import { Form } from '../form/form';
-import { FormItem } from '../form/formItem';
 import { cloneRef, setDefaultColumnKey, useControlled, useLoading } from '../../utils';
-export const FormDialog = forwardRef(({ title, formProps, formRef, items, onFinish, ...props }, ref) => {
+import { Form, FormItem } from '../form';
+export const FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...props }) => {
     const dialogRef = useRef(null);
     const innerFormRef = useRef(null);
-    const resolveFn = useRef();
-    const rejectFn = useRef();
+    const resolveFn = useRef(void 0);
+    const rejectFn = useRef(void 0);
     const [innerOpen, setInnerOpen] = useControlled(props.defaultOpen, props.open);
     const onCloseHandler = (reason) => {
         if (reason === 'confirmed') {
             return;
         }
         props.onClose?.(reason);
-        if (!open) {
-            rejectFn.current?.({
-                type: 'canceled',
-                value: innerFormRef.current.getFormValue()
-            });
-            resolveFn.current = rejectFn.current = void 0;
-        }
+        rejectFn.current?.({
+            type: 'canceled',
+            value: innerFormRef.current.getFormValue()
+        });
+        resolveFn.current = rejectFn.current = void 0;
         setInnerOpen(false);
     };
     useImperativeHandle(ref, () => {
@@ -43,7 +40,7 @@ export const FormDialog = forwardRef(({ title, formProps, formRef, items, onFini
     });
     const [value, setValue] = useState();
     const confirmHandler = () => {
-        innerFormRef.current.submit();
+        innerFormRef.current.submit().then();
     };
     const [innerLoading, finishHandler] = useLoading(async (value) => {
         formProps?.onFinish?.(value);

package/dist/esm/components/grid/grid.d.ts

@@ -4,7 +4,7 @@ import { GridItem } from './gridItem';
 import { TransportStyleProps } from '../transportStyle';
 export interface GridProps extends TransportStyleProps {
     inline?: boolean;
-    /** 网格列数，@default xs: 12 */
+    /** 网格列数，默认为`{xs: 12}` */
     columnCount?: ResponsiveProp;
     gap?: ResponsiveProp;
     columnGap?: ResponsiveProp;

package/dist/esm/components/grid/grid.js

@@ -1,15 +1,14 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
-import { classes, containerStyle } from './grid.style';
+import { classes, useContainerStyle } from './grid.style';
 import { GridItem } from './gridItem';
-import { classnames, responsiveValue } from '../../utils';
+import { classnames, toResponsiveValue } from '../../utils';
 import { TransportStyle } from '../transportStyle';
-export const Grid = forwardRef(({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
-    columnCount = responsiveValue(columnCount);
-    gap = responsiveValue(gap);
-    columnGap = responsiveValue(columnGap) ?? gap;
-    rowGap = responsiveValue(rowGap) ?? gap;
-    return (_jsx(TransportStyle, { ...props, ref: ref, css: containerStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: {
+export const Grid = (({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) => {
+    columnCount = toResponsiveValue(columnCount);
+    gap = toResponsiveValue(gap);
+    columnGap = toResponsiveValue(columnGap) ?? gap;
+    rowGap = toResponsiveValue(rowGap) ?? gap;
+    return (_jsx(TransportStyle, { ...props, css: useContainerStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             ...props.style
         } }));

package/dist/esm/components/grid/grid.style.d.ts

@@ -4,12 +4,12 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare function containerStyle({ columnCount, columnGap, rowGap }: {
+export declare function useContainerStyle({ columnCount, columnGap, rowGap }: {
     columnCount: ResponsiveValue;
     columnGap: ResponsiveValue;
     rowGap: ResponsiveValue;
 }): import("@emotion/react").SerializedStyles;
-export declare function itemStyle({ span, offset }: {
+export declare function useItemStyle({ span, offset }: {
     span: ResponsiveValue;
     offset: ResponsiveValue;
 }): import("@emotion/react").SerializedStyles;

package/dist/esm/components/grid/grid.style.js

@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
-import { defineClasses, responsiveVariables } from '../../utils';
+import { defineClasses, responsiveVariables, useCss } from '../../utils';
 export const classes = defineClasses('grid', [
     'item'
 ]);
-export function containerStyle({ columnCount, columnGap, rowGap }) {
-    return css `
-        ${responsiveVariables(k => `
+export function useContainerStyle({ columnCount, columnGap, rowGap }) {
+    return useCss(theme => css `
+        ${responsiveVariables(theme, k => `
             ${k in columnCount ? `--grid-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--grid-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--grid-row-gap: ${rowGap[k]}px` : ''};
@@ -13,11 +13,11 @@ export function containerStyle({ columnCount, columnGap, rowGap }) {
 
         flex-wrap: wrap;
         gap: var(--grid-row-gap) var(--grid-column-gap);
-    `;
+    `);
 }
-export function itemStyle({ span, offset }) {
-    return css `
-        ${responsiveVariables(k => `
+export function useItemStyle({ span, offset }) {
+    return useCss(theme => css `
+        ${responsiveVariables(theme, k => `
             ${k in span ? `--grid-item-span: ${span[k]}` : ''};
             ${k in offset ? `--grid-item-offset: ${offset[k]}` : ''};
         `)}
@@ -26,5 +26,5 @@ export function itemStyle({ span, offset }) {
 
         width: calc(var(--grid-item-width) * var(--grid-item-span) + var(--grid-column-gap) * (var(--grid-item-span) - 1));
         margin-left: calc(var(--grid-item-width) * var(--grid-item-offset) + var(--grid-column-gap) * var(--grid-item-offset));
-    `;
+    `);
 }

package/dist/esm/components/grid/gridItem.d.ts

@@ -4,4 +4,4 @@ export interface GridItemProps extends TransportStyleProps {
     span?: ResponsiveProp;
     offset?: ResponsiveProp;
 }
-export declare const GridItem: import("react").ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function GridItem({ span, offset, ...props }: GridItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/grid/gridItem.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
-import { classnames, responsiveValue } from '../../utils';
-import { classes, itemStyle } from './grid.style';
+import { classnames, toResponsiveValue } from '../../utils';
+import { classes, useItemStyle } from './grid.style';
 import { TransportStyle } from '../transportStyle';
-export const GridItem = forwardRef(({ span = { xs: 1 }, offset = { xs: 0 }, ...props }, ref) => {
-    span = responsiveValue(span);
-    offset = responsiveValue(offset);
-    return (_jsx(TransportStyle, { ...props, ref: ref, css: itemStyle({ span, offset }), className: classnames(classes.item, props.className) }));
-});
+export function GridItem({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) {
+    span = toResponsiveValue(span);
+    offset = toResponsiveValue(offset);
+    return (_jsx(TransportStyle, { ...props, css: useItemStyle({ span, offset }), className: classnames(classes.item, props.className) }));
+}

package/dist/esm/components/highlight/highlight.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Fragment, memo } from 'react';
 import { Typography } from '../typography';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 export const Highlight = memo(({ keywords, highlightClassName, highlightStyle, renderHighlight, children }) => {
     const { colors } = useTheme();
     if (!children) {
@@ -31,7 +31,7 @@ export const Highlight = memo(({ keywords, highlightClassName, highlightStyle, r
         const highlightText = children.substring(start, offset = end);
         ret.push(_jsx(Fragment, { children: renderHighlight?.(highlightText) ||
                 _jsx(Typography.mark, { className: highlightClassName, style: {
-                        color: colors.error,
+                        color: colors.error.main,
                         ...highlightStyle
                     }, children: highlightText }) }, i));
     });

package/dist/esm/components/image/image.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import { DIVProps } from '../../../types';
 import { ImagePreviewProps } from './imagePreview';
 export interface ImageProps extends DIVProps {
@@ -10,10 +10,10 @@ export interface ImageProps extends DIVProps {
     height?: string | number;
     objectFit?: CSSProperties['objectFit'];
     objectPosition?: CSSProperties['objectPosition'];
-    imgProps?: JSX.IntrinsicElements['img'];
+    imgProps?: React.JSX.IntrinsicElements['img'];
     actions?: ReactNode;
     previewable?: boolean;
     previewProps?: ImagePreviewProps;
     onPreview?(e: React.MouseEvent<HTMLDivElement>): void;
 }
-export declare const Image: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Image: React.MemoExoticComponent<({ src, fallback, onError, alt, width, height, objectFit, objectPosition, imgProps, actions, previewable, previewProps, onPreview, ...props }: ImageProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/image/image.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, style } from './image.style';
 import { classnames, useControlled, useDerivedState } from '../../utils';
 import { EyeOutlined } from '@ant-design/icons';
 import { ImagePreview } from './imagePreview';
-export const Image = memo(forwardRef(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }, ref) => {
+export const Image = memo(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
     const [failed, setFailed] = useDerivedState(() => !src, [src]);
     const errorHandler = (e) => {
         onError?.(e);
@@ -24,11 +24,11 @@ export const Image = memo(forwardRef(({ src, fallback, onError, alt = '', width,
         }
         return actions;
     })();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-error": failed.current, children: [props.children, _jsx("img", { className: classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-error": failed.current, children: [props.children, _jsx("img", { className: classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
                             objectFit,
                             objectPosition,
                             ...imgProps?.style
                         }, onError: errorHandler }), !!renderedActions && !failed.current &&
                         _jsx("div", { className: classes.mask, children: renderedActions })] }), previewable && src &&
                 _jsx(ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
-}));
+});

package/dist/esm/components/image/image.style.d.ts

@@ -1,6 +1,6 @@
 export declare const classes: {
-    mask: string;
     img: string;
+    mask: string;
     previewButton: string;
 } & {
     root: string;

package/dist/esm/components/image/image.style.js

@@ -7,7 +7,7 @@ export const classes = defineClasses('image', [
     'previewButton'
 ]);
 export const style = defineCss(({ background, easing, spacing }) => {
-    const maskBg = Color(background.card).alpha(.9).string();
+    const maskBg = Color(background.content).alpha(.9).string();
     return css `
         display: inline-flex;
         position: relative;

package/dist/esm/components/image/imagePreview.d.ts

@@ -8,15 +8,15 @@ export interface ImagePreviewProps extends ModalProps {
     onIndexChange?(index: number): void;
     defaultOpen?: boolean;
     onOpenChange?(open: boolean): void;
-    /** 是否渲染旋转按钮{@default true} */
+    /** 是否渲染旋转按钮默认为`true` */
     showRotate?: boolean;
-    /** 是否渲染放大缩小按钮{@default true} */
+    /** 是否渲染放大缩小按钮默认为`true` */
     showZoom?: boolean;
-    /** 是否渲染关闭按钮{@default true }*/
+    /** 是否渲染关闭按钮默认为`true`*/
     showClose?: boolean;
     /** 自定义右上角控制按钮 */
     renderControl?: ReactNode;
     transformWrapperProps?: ReactZoomPanPinchProps;
     transformWrapperRef?: Ref<ReactZoomPanPinchContentRef>;
 }
-export declare const ImagePreview: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ImagePreviewProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const ImagePreview: import("react").MemoExoticComponent<({ src, defaultIndex, index, onIndexChange, defaultOpen, open, onOpenChange, showRotate, showZoom, showClose, renderControl, transformWrapperProps, transformWrapperRef, ...props }: ImagePreviewProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/image/imagePreview.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useRef, useState } from 'react';
+import { memo, useRef, useState } from 'react';
 import { Modal } from '../modal';
 import { classnames, cloneRef, toArray, useControlled } from '../../utils';
 import { classes, style } from './imagePreview.style';
@@ -7,7 +7,7 @@ import { CloseOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, RotateL
 import { Button } from '../button';
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 import { Tooltip } from '../tooltip';
-export const ImagePreview = memo(forwardRef(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }, ref) => {
+export const ImagePreview = memo(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotate = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, transformWrapperRef, ...props }) => {
     const srcArr = toArray(src);
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
     const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
@@ -33,7 +33,7 @@ export const ImagePreview = memo(forwardRef(({ src = [], defaultIndex = 0, index
         size: 'large',
         color: 'text'
     };
-    return (_jsx(Modal, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), open: innerOpen.current, maskProps: {
+    return (_jsx(Modal, { ...props, css: style, className: classnames(classes.root, props.className), open: innerOpen.current, maskProps: {
             ...props.maskProps,
             children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [renderControl, showRotate &&
                                 _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: _jsx(RotateLeftOutlined, {}) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: _jsx(RotateRightOutlined, {}) }) })] }), showZoom &&
@@ -49,4 +49,4 @@ export const ImagePreview = memo(forwardRef(({ src = [], defaultIndex = 0, index
             }, children: _jsx(TransformComponent, { wrapperClass: classes.imageWrapper, contentClass: classes.image, wrapperProps: {
                     onClick: () => !isPanning.current && setInnerOpen(false)
                 }, children: _jsx("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }) }) }) }));
-}));
+});

package/dist/esm/components/input/input.d.ts

@@ -1,9 +1,9 @@
-import { Ref } from 'react';
+import React, { Ref } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface InputProps extends Omit<InputBaseProps<'input'>, 'children'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: React.JSX.IntrinsicElements['input'];
     inputRef?: Ref<HTMLInputElement>;
     /** 是否根据内容自动调整宽度 */
     widthAdaptable?: boolean;
 }
-export declare const Input: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Input: React.MemoExoticComponent<({ inputProps, inputRef, widthAdaptable, ...props }: InputProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/input/input.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { classnames, cloneRef } from '../../utils';
 import { classes, style } from './input.style';
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { InputBase } from '../inputBase';
-export const Input = memo(forwardRef(({ inputProps, inputRef, widthAdaptable, ...props }, ref) => {
-    return (_jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
+export const Input = memo(({ inputProps, inputRef, widthAdaptable, ...props }) => {
+    return (_jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
             return (_jsxs(_Fragment, { children: [_jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), className: classnames(classes.input, inputProps?.className) }), widthAdaptable &&
                         _jsx("span", { className: classes.adaptable, children: rest.value })] }));
         } }));
-}));
+});

package/dist/esm/components/inputBase/inputBase.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, Ref } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { ColorPropsValue, DIVProps, Size } from '../../../types';
 export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DIVProps, 'prefix' | 'onChange' | 'children'> {
     variant?: 'outlined' | 'underlined' | 'plain';
@@ -10,20 +10,18 @@ export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DIV
     clearable?: boolean;
     onClear?(): void;
     loading?: boolean;
-    type?: T extends 'input' ? JSX.IntrinsicElements[T]['type'] : never;
-    min?: T extends 'input' ? JSX.IntrinsicElements[T]['min'] : never;
-    max?: T extends 'input' ? JSX.IntrinsicElements[T]['max'] : never;
-    step?: T extends 'input' ? JSX.IntrinsicElements[T]['step'] : never;
+    type?: T extends 'input' ? React.JSX.IntrinsicElements[T]['type'] : never;
+    min?: T extends 'input' ? React.JSX.IntrinsicElements[T]['min'] : never;
+    max?: T extends 'input' ? React.JSX.IntrinsicElements[T]['max'] : never;
+    step?: T extends 'input' ? React.JSX.IntrinsicElements[T]['step'] : never;
     precision?: T extends 'input' ? number : never;
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
-    autoFocus?: JSX.IntrinsicElements[T]['autoFocus'];
-    defaultValue?: JSX.IntrinsicElements[T]['defaultValue'];
-    value?: JSX.IntrinsicElements[T]['value'];
-    onChange?: JSX.IntrinsicElements[T]['onChange'];
-    children(childProps: Omit<JSX.IntrinsicElements[T], 'ref'> & {
-        ref?: Ref<T extends 'textarea' ? HTMLTextAreaElement : HTMLInputElement>;
-    }): ReactNode;
+    autoFocus?: React.JSX.IntrinsicElements[T]['autoFocus'];
+    defaultValue?: React.JSX.IntrinsicElements[T]['defaultValue'];
+    value?: React.JSX.IntrinsicElements[T]['value'];
+    onChange?: React.JSX.IntrinsicElements[T]['onChange'];
+    children(childProps: React.JSX.IntrinsicElements[T]): ReactNode;
 }
 export declare const InputBase: <T extends "input" | "textarea">(props: InputBaseProps<T>) => ReactElement;

package/dist/esm/components/inputBase/inputBase.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, useRef } from 'react';
+import { useRef } from 'react';
 import { classes, useStyle } from './inputBase.style';
 import { classnames, fixInputNumber, useControlled } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { CloseCircleFilled } from '@ant-design/icons';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
-export const InputBase = forwardRef(({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
+export const InputBase = (({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
 // 以下属性传递给<input />
-min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }, ref) => {
+min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const innerInputRef = useRef(null);
@@ -43,7 +43,7 @@ min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnl
             changeHandler(e);
         }
     };
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
         // 防止点击wrap时，输入框失去焦点
         onPointerDown: e => {
             props.onPointerDown?.(e);

package/dist/esm/components/inputBase/inputBase.style.js

@@ -17,7 +17,7 @@ export function useStyle({ color }) {
         position: relative;
 
         &[data-variant=outlined] {
-            background-color: ${background.card};
+            background-color: ${background.content};
         }
 
         &[data-size=medium] {

package/dist/esm/components/loading/loading.d.ts

@@ -1,14 +1,5 @@
-import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps } from '../../../types';
-import { LoadingIndicatorProps } from '../loadingIndicator';
-import { ProgressProps } from '../progress';
-export interface LoadingProps extends DIVProps {
-    loading?: boolean;
-    text?: ReactNode;
-    /** 传入progress字段会显示进度条 */
-    progress?: number;
-    color?: ColorPropsValue;
-    indicatorProps?: LoadingIndicatorProps;
-    progressProps?: ProgressProps;
+import { DIVProps } from '../../../types';
+import { LoadingMaskProps } from '../loadingMask';
+export interface LoadingProps extends Omit<LoadingMaskProps, 'children'>, DIVProps {
 }
-export declare const Loading: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Loading: import("react").MemoExoticComponent<({ open, text, progress, color, indicatorProps, progressProps, ...props }: LoadingProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/loading/loading.js

@@ -1,21 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
-import { classnames, useDerivedState } from '../../utils';
+import { memo } from 'react';
+import { classnames } from '../../utils';
 import { classes, style } from './loading.style';
-import { LoadingIndicator } from '../loadingIndicator';
-import { Fade } from '../transitionBase';
-import { Progress } from '../progress';
-export const Loading = memo(forwardRef(({ loading = false, text = '加载中...', progress, indicatorProps, progressProps, color, ...props }, ref) => {
-    const [showMask, setShowMask] = useDerivedState((prevLoading) => {
-        // 只有第一次需要原样返回loading，之后showMask不会立即变为false，交由onTransitionEnd()处理
-        return typeof prevLoading === 'undefined' ? loading : true;
-    }, [loading]);
-    const onExited = () => {
-        // 动画结束后，loading为false才需要改变showMask
-        setShowMask(false);
-    };
-    const showProgress = typeof progress === 'number';
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-show-progress": showProgress, children: [_jsx("div", { className: classes.container, children: props.children }), (loading || showMask.current) &&
-                _jsxs(Fade, { in: loading, className: classes.mask, onExited: onExited, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
-                            _jsx(Progress, { className: classes.progress, value: progress, ...progressProps })] })] }));
-}));
+import { LoadingMask } from '../loadingMask';
+export const Loading = memo(({ open = false, text = '加载中...', progress, color, indicatorProps, progressProps, ...props }) => {
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), children: [_jsx("div", { className: classes.container, children: props.children }), _jsx(LoadingMask, { open, text, progress, color, indicatorProps, progressProps, className: classes.mask })] }));
+});

package/dist/esm/components/loading/loading.style.d.ts

@@ -1,10 +1,7 @@
 export declare const classes: {
-    text: string;
     mask: string;
     container: string;
-    progress: string;
-    indicator: string;
 } & {
     root: string;
 };
-export declare const style: () => import("@emotion/react").SerializedStyles;
+export declare const style: import("@emotion/react").SerializedStyles;

package/dist/esm/components/loading/loading.style.js

@@ -1,67 +1,27 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-import Color from 'color';
-import { classes as progressClasses } from '../progress/progress.style';
+import { defineClasses } from '../../utils';
 export const classes = defineClasses('loading', [
     'container',
-    'mask',
-    'indicator',
-    'text',
-    'progress'
+    'mask'
 ]);
-export const style = defineCss(({ background, spacing, text }) => {
-    const maskColor = Color(background.card).alpha(.8).string();
-    return css `
-        & {
-            width: 100%;
-            height: 100%;
-            flex: 1;
-            position: relative;
-            z-index: 0;
-        }
+export const style = css `
+    & {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+        position: relative;
+        z-index: 0;
+    }
 
-        .${classes.container} {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            z-index: 0;
-        }
+    .${classes.container} {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        z-index: 0;
+    }
 
-        .${classes.mask} {
-            position: absolute;
-            inset: 0;
-            z-index: 1;
-            background-color: ${maskColor};
-            display: flex;
-            flex-direction: column;
-            gap: ${spacing[3]}px;
-            align-items: center;
-            justify-content: center;
 
-            .${classes.indicator} {
-                display: flex;
-                gap: ${spacing[2]}px;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-
-                .${classes.text} {
-                    color: ${text.secondary};
-                }
-            }
-
-            .${classes.progress} {
-                width: calc(100% - 24px);
-                max-width: 300px;
-
-                .${progressClasses.track} {
-                    height: 4px;
-                }
-            }
-        }
-
-        &[data-show-progress=true] .${classes.indicator} {
-            flex-direction: row;
-        }
-    `;
-});
+    .${classes.mask} {
+        z-index: 1;
+    }
+`;

package/dist/esm/components/loadingIndicator/loadingIndicator.d.ts

@@ -4,4 +4,4 @@ export interface LoadingIndicatorProps extends DIVProps {
     width?: number;
     color?: ColorPropsValue;
 }
-export declare const LoadingIndicator: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const LoadingIndicator: import("react").MemoExoticComponent<({ size, width, color, ...props }: LoadingIndicatorProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/loadingIndicator/loadingIndicator.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { classnames } from '../../utils';
 import { classes, useStyle } from './loadingIndicator.style';
-import { forwardRef, memo } from 'react';
-export const LoadingIndicator = memo(forwardRef(({ size, width = 2, color = 'primary', ...props }, ref) => {
-    return (_jsx("div", { ...props, ref: ref, css: useStyle({ color, width }), className: classnames(classes.root, props.className), style: {
+import { memo } from 'react';
+export const LoadingIndicator = memo(({ size, width = 2, color = 'primary', ...props }) => {
+    return (_jsx("div", { ...props, css: useStyle({ color, width }), className: classnames(classes.root, props.className), style: {
             width: size ?? '1em',
             height: size ?? '1em',
             ...props.style
         }, children: _jsx("div", { className: classes.indicator }) }));
-}));
+});

package/dist/esm/components/loadingMask/index.d.ts

@@ -0,0 +1 @@
+export * from './loadingMask';

package/dist/esm/components/loadingMask/index.js

@@ -0,0 +1 @@
+export * from './loadingMask';

package/dist/esm/components/loadingMask/loadingMask.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from 'react';
+import { LoadingIndicatorProps } from '../loadingIndicator';
+import { ProgressProps } from '../progress';
+import { ColorPropsValue } from '../../../types';
+import { BackdropProps } from '../backdrop';
+export interface LoadingMaskProps<T extends HTMLElement = HTMLElement> extends BackdropProps<T> {
+    text?: ReactNode;
+    /** 传入progress字段会显示进度条 */
+    progress?: number;
+    color?: ColorPropsValue;
+    indicatorProps?: LoadingIndicatorProps;
+    progressProps?: ProgressProps;
+}
+export declare const LoadingMask: <T extends HTMLElement = HTMLElement>(props: LoadingMaskProps<T>) => ReactElement;