@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/cjs/components/drawer/drawer.style.js

@@ -14,19 +14,19 @@ exports.classes = (0, utils_1.defineClasses)('drawer', [
     'bodyWrap'
 ]);
 function useStyle({ size }) {
-    const variables = (0, utils_1.responsiveVariables)(k => {
-        let _size = size[k];
-        if (typeof _size === 'undefined') {
-            return '';
-        }
-        if (typeof _size === 'number') {
-            _size = _size + 'px';
-        }
-        return `--drawer-size: ${_size};`;
-    });
-    return (0, utils_1.useCss)(({ spacing, background, boxShadow, borderRadius, divider }) => {
+    return (0, utils_1.useCss)(theme => {
+        const { spacing, background, boxShadow, borderRadius, divider } = theme;
         return (0, react_1.css) `
-            ${variables}
+            ${(0, utils_1.responsiveVariables)(theme, k => {
+            let _size = size[k];
+            if (typeof _size === 'undefined') {
+                return '';
+            }
+            if (typeof _size === 'number') {
+                _size = _size + 'px';
+            }
+            return `--drawer-size: ${_size};`;
+        })}
 
             .${exports.classes.drawer} {
                 position: absolute;
@@ -70,7 +70,7 @@ function useStyle({ size }) {
                 height: 100%;
                 display: flex;
                 flex-direction: column;
-                background-color: ${background.card};
+                background-color: ${background.content};
                 box-shadow: ${boxShadow[1]};
                 border-radius: ${borderRadius}px;
             }
@@ -120,5 +120,5 @@ function useStyle({ size }) {
                 }
             }
         `;
-    }, [variables]);
+    });
 }

package/dist/cjs/components/dropdown/dropdown.d.ts

@@ -2,4 +2,4 @@ import { PopperProps } from '../popper';
 export interface DropdownProps extends PopperProps {
     showArrow?: boolean;
 }
-export declare const Dropdown: import("react").ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & import("react").RefAttributes<unknown>>;
+export declare function Dropdown({ showArrow, ...props }: DropdownProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/dropdown/dropdown.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dropdown = void 0;
+exports.Dropdown = Dropdown;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const popper_1 = require("../popper");
 const dropdown_style_1 = require("./dropdown.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
-exports.Dropdown = (0, react_1.forwardRef)(({ showArrow, ...props }, ref) => {
-    const { spacing } = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+function Dropdown({ showArrow, ...props }) {
+    const { spacing } = (0, theme_1.useTheme)();
     props.autoClose ??= true;
     props.trigger ??= 'click';
     props.placement ??= 'bottom';
     props.offset ??= showArrow ? spacing[3] : spacing[2];
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, ref: ref, css: dropdown_style_1.style, className: (0, utils_1.classnames)(dropdown_style_1.classes.root, props.className), content: (0, jsx_runtime_1.jsx)("div", { className: dropdown_style_1.classes.content, "data-show-arrow": showArrow, children: props.content }) }));
-});
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, css: dropdown_style_1.style, className: (0, utils_1.classnames)(dropdown_style_1.classes.root, props.className), content: (0, jsx_runtime_1.jsx)("div", { className: dropdown_style_1.classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+}

package/dist/cjs/components/dropdown/dropdown.style.js

@@ -3,20 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
 const popper_style_1 = require("../popper/popper.style");
+const theme_1 = require("../theme");
 exports.classes = (0, utils_1.defineClasses)('dropdown', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `
-    z-index: ${app_1.zIndex.dropdown};
+    z-index: ${theme_1.zIndex.dropdown};
 
     .${exports.classes.content} {
-        background-color: ${background.card};
+        background-color: ${background.content};
         box-shadow: ${boxShadow[0]};
         border-radius: ${borderRadius}px;
         padding: 4px;
     }
 
-    ${(0, popper_style_1.popperArrowStyle)(background.card)}
+    ${(0, popper_style_1.popperArrowStyle)(background.content)}
 `);

package/dist/cjs/components/flex/flex.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 import { TransportStyleProps } from '../transportStyle';
 export interface FlexProps extends TransportStyleProps {
     inline?: boolean;
-    /** 排列方式，@default "row" */
+    /** 排列方式，默认为`row` */
     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
     /** 换行方式 */
     wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
@@ -12,4 +12,4 @@ export interface FlexProps extends TransportStyleProps {
     /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
     compact?: boolean;
 }
-export declare const Flex: import("react").ForwardRefExoticComponent<Omit<FlexProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Flex({ inline, direction, wrap, gap, columnGap, rowGap, compact, ...props }: FlexProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/flex/flex.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = void 0;
+exports.Flex = Flex;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const flex_style_1 = require("./flex.style");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
-exports.Flex = (0, react_1.forwardRef)(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
+function Flex({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }) {
     const renderChildren = () => {
         if (!compact) {
             return props.children;
@@ -23,10 +23,10 @@ exports.Flex = (0, react_1.forwardRef)(({ inline, direction = 'row', wrap, gap =
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: (0, utils_1.filterProperties)({
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, className: (0, utils_1.classnames)(flex_style_1.classes.root, props.className), style: (0, utils_1.filterProperties)({
             display: inline ? 'inline-flex' : 'flex',
             flexDirection: direction,
             flexWrap: wrap, columnGap, rowGap, gap,
             ...props.style
         }), children: renderChildren() }));
-});
+}

package/dist/cjs/components/form/form.d.ts

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
+import React, { Dispatch, ReactElement, ReactNode, Ref, RefObject, SetStateAction } from 'react';
 import { Obj, ResponsiveProp } from '../../../types';
 import { FieldPath } from '../../utils';
 import { FieldError, FormItem, FormItemProps, FormItemRef } from './formItem';
@@ -10,14 +10,14 @@ export type FormSharedProps = {
     wrapperRef?: Ref<HTMLDivElement>;
     requiredMark?: ReactNode;
 };
-export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
-    ref?: Ref<FormRef<V>>;
+export interface FormProps<V extends FormValue> extends FormSharedProps, Omit<DescriptionsBaseProps, 'items' | 'onChange'>, Omit<React.JSX.IntrinsicElements['form'], 'ref' | 'onChange'> {
+    ref?: Ref<FormRef<V> | null>;
     component?: any;
     initialValue?: V;
     onChange?(field: FieldPath, value: any, formValue: V): void;
     onFinish?(value: V): void;
     items?: (FormItemProps<any> & Obj)[];
-    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，@default "grid" */
+    /** variant为"grid"或"table"时会渲染Descriptions组件，并传递variant属性，默认为`grid` */
     variant?: 'plain' | 'grid' | 'table';
     columnCount?: ResponsiveProp;
     descriptionsProps?: DescriptionsProps;
@@ -27,8 +27,9 @@ interface FormContext<V extends FormValue> extends FormSharedProps {
     formValue?: V;
     setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
     itemsContainer?: Map<string, FormItemRef>;
-    formRef?: RefObject<FormRef<V> | undefined>;
+    formRef?: RefObject<FormRef<V> | null>;
 }
+declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
 export type FormRef<V extends FormValue = FormValue> = {
     submit(): Promise<V | null>;

package/dist/cjs/components/form/form.js

@@ -9,15 +9,15 @@ const form_style_1 = require("./form.style");
 const formItem_1 = require("./formItem");
 const formRelatable_1 = require("./formRelatable");
 const descriptions_1 = require("../descriptions");
-const formContext = (0, react_1.createContext)({});
+const FormContext = (0, react_1.createContext)({});
 function useFormContext() {
-    return (0, react_1.useContext)(formContext);
+    return (0, react_1.useContext)(FormContext);
 }
-exports.Form = (0, react_1.forwardRef)(({ component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
+exports.Form = (({ ref, component: Component = 'form', wrapperRef, initialValue, onChange, onFinish, requiredMark = '*', columnCount = 1, descriptionsProps, 
 // 以下属性从DescriptionsBaseProps继承
 items, variant = 'grid', 
 // 以下属性从DescriptionsSharedProps继承
-labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }, ref) => {
+labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePadding, ...props }) => {
     /**
      * ------------------------------------------------------------------------
      * 表单值
@@ -92,7 +92,7 @@ labelWidth, labelPlacement = 'left', colon = ':', size, disableMargin, disablePa
         isFieldTouched: field => !!itemsContainer.current.get((0, utils_1.stringifyField)(field))?.isTouched
     };
     (0, react_1.useImperativeHandle)(ref, () => formRef.current);
-    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: form_style_1.style, className: (0, utils_1.classnames)(form_style_1.classes.root, props.className), onSubmit: submitHandler, children: (0, jsx_runtime_1.jsx)(formContext.Provider, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: wrapperRef, css: form_style_1.style, className: (0, utils_1.classnames)(form_style_1.classes.root, props.className), onSubmit: submitHandler, children: (0, jsx_runtime_1.jsx)(FormContext, { value: (0, react_1.useMemo)(() => ({
                 requiredMark,
                 formValue: formValue.current, setFieldValue,
                 itemsContainer: itemsContainer.current, formRef

package/dist/cjs/components/form/form.style.js

@@ -10,12 +10,12 @@ exports.classes = (0, utils_1.defineClasses)('form', [
 ]);
 exports.style = (0, utils_1.defineCss)(({ colors, spacing }) => (0, react_1.css) `
     .${exports.classes.requiredMark} {
-        color: ${colors.error};
+        color: ${colors.error.main};
         margin-right: ${spacing[1]}px;
     }
 
     .${exports.classes.helperText} {
         font-size: ${13 / 14}em;
-        color: ${colors.error};
+        color: ${colors.error.main};
     }
 `);

package/dist/cjs/components/form/formItem.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { FormRef, FormSharedProps, FormValue } from './form';
 import { ColorPropsValue, Size } from '../../../types';
 import { FieldPath } from '../../utils';
@@ -7,7 +7,7 @@ export type FormItemRules<I> = {
     message?: ReactNode;
     required?: boolean;
     pattern?: RegExp;
-    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef<FormValue> | null): any;
+    validator?(fieldValue: I | undefined, formValue: any, formInstance: FormRef | null): any;
 };
 export type FieldProps<I> = {
     checked?: boolean;

package/dist/cjs/components/form/formItem.js

@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
 const descriptions_1 = require("../descriptions");
 const form_style_1 = require("./form.style");
 const transitionBase_1 = require("../transitionBase");
-exports.FormItem = (0, react_1.forwardRef)(({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
+exports.FormItem = (({ wrapperRef, field, initialValue, label = '', rules, required, error, helperText, dependencies, children, noStyle, requiredMark, ...props }, ref) => {
     const { formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
     requiredMark ??= context.requiredMark ?? '*';
     /**
@@ -36,7 +36,7 @@ exports.FormItem = (0, react_1.forwardRef)(({ wrapperRef, field, initialValue, l
             ? (0, utils_1.queryDeep)(formValue, field)
             : void 0;
         if (typeof prev !== 'undefined' && typeof value === 'undefined') {
-            console.error(`The field "${(0, utils_1.stringifyField)(field)}"'s value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
+            console.error(`The field "${(0, utils_1.stringifyField)(field)}" value was modified to undefined, did you forget to specify "initialValue" before calling "resetForm()" or "resetField()"`);
         }
         return value;
     }, [formValue, field]);
@@ -126,7 +126,7 @@ exports.FormItem = (0, react_1.forwardRef)(({ wrapperRef, field, initialValue, l
     /**
      * --------------------------------------------------------------------
      * 渲染部分
-    */
+     */
     const isRequired = (0, react_1.useMemo)(() => {
         return required ?? rulesArr?.some(r => r.required);
     }, [rules, required]);
@@ -148,18 +148,19 @@ exports.FormItem = (0, react_1.forwardRef)(({ wrapperRef, field, initialValue, l
             });
         }
         if ((0, react_1.isValidElement)(children)) {
+            const { props } = children;
             return (0, react_1.cloneElement)(children, {
                 ...typeof field !== 'undefined' && {
                     ...typeof innerValue.current === 'boolean'
-                        ? { checked: children.props.checked ?? innerValue.current }
-                        : { value: children.props.value ?? innerValue.current },
+                        ? { checked: props.checked ?? innerValue.current }
+                        : { value: props.value ?? innerValue.current },
                     onChange(e) {
-                        children.props.onChange?.(e);
+                        props.onChange?.(e);
                         isTouched.current = isActiveChanging.current = true;
                         setInnerValue(o => (0, utils_1.getValueOnChange)(e, o));
                     }
                 },
-                size: children.props.size ?? props.size,
+                size: props.size ?? props.size,
                 ...innerError.current && { color: 'error' }
             });
         }

package/dist/cjs/components/form/formRelatable.js

@@ -6,11 +6,11 @@ const form_1 = require("./form");
 const utils_1 = require("../../utils");
 function FormRelatable(props) {
     const { formValue, formRef } = (0, form_1.useFormContext)();
-    const prevFormValue = (0, react_1.useRef)();
+    const prevFormValue = (0, react_1.useRef)(void 0);
     (0, react_1.useEffect)(() => {
         prevFormValue.current = (0, utils_1.cloneDeep)(formValue);
     }, [formValue]);
-    const childrenBackup = (0, react_1.useRef)();
+    const childrenBackup = (0, react_1.useRef)(void 0);
     if (!prevFormValue.current || props.shouldUpdate(prevFormValue.current, formValue)) {
         childrenBackup.current = props.children(formValue, formRef.current);
     }

package/dist/cjs/components/formDialog/formDialog.d.ts

@@ -1,8 +1,7 @@
 import { ReactElement, ReactNode, Ref } from 'react';
 import { DialogProps } from '../dialog';
-import { FormProps, FormRef, FormValue } from '../form/form';
-import { FormItemProps } from '../form/formItem';
 import { Obj } from '../../../types';
+import { FormItemProps, FormProps, FormRef, FormValue } from '../form';
 interface FormDialogItemProps<I = any> extends Omit<FormItemProps<I>, 'key'>, Obj {
     key?: string | number;
 }

package/dist/cjs/components/formDialog/formDialog.js

@@ -5,27 +5,24 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
 const react_2 = require("react");
 const dialog_1 = require("../dialog");
-const form_1 = require("../form/form");
-const formItem_1 = require("../form/formItem");
 const utils_1 = require("../../utils");
-exports.FormDialog = (0, react_2.forwardRef)(({ title, formProps, formRef, items, onFinish, ...props }, ref) => {
+const form_1 = require("../form");
+exports.FormDialog = (({ ref, title, formProps, formRef, items, onFinish, ...props }) => {
     const dialogRef = (0, react_2.useRef)(null);
     const innerFormRef = (0, react_2.useRef)(null);
-    const resolveFn = (0, react_2.useRef)();
-    const rejectFn = (0, react_2.useRef)();
+    const resolveFn = (0, react_2.useRef)(void 0);
+    const rejectFn = (0, react_2.useRef)(void 0);
     const [innerOpen, setInnerOpen] = (0, utils_1.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);
     };
     (0, react_2.useImperativeHandle)(ref, () => {
@@ -46,7 +43,7 @@ exports.FormDialog = (0, react_2.forwardRef)(({ title, formProps, formRef, items
     });
     const [value, setValue] = (0, react_2.useState)();
     const confirmHandler = () => {
-        innerFormRef.current.submit();
+        innerFormRef.current.submit().then();
     };
     const [innerLoading, finishHandler] = (0, utils_1.useLoading)(async (value) => {
         formProps?.onFinish?.(value);
@@ -58,7 +55,7 @@ exports.FormDialog = (0, react_2.forwardRef)(({ title, formProps, formRef, items
         if (items?.length) {
             return items.map((item, i) => {
                 const itemProps = typeof item === 'function' ? item(value) : item;
-                return ((0, react_1.createElement)(formItem_1.FormItem, { ...itemProps, key: (0, utils_1.setDefaultColumnKey)(itemProps) ?? i }));
+                return ((0, react_1.createElement)(form_1.FormItem, { ...itemProps, key: (0, utils_1.setDefaultColumnKey)(itemProps) ?? i }));
             });
         }
         return props.children;

package/dist/cjs/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/cjs/components/grid/grid.js

@@ -2,17 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const grid_style_1 = require("./grid.style");
 const gridItem_1 = require("./gridItem");
 const utils_1 = require("../../utils");
 const transportStyle_1 = require("../transportStyle");
-exports.Grid = (0, react_1.forwardRef)(({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
-    columnCount = (0, utils_1.responsiveValue)(columnCount);
-    gap = (0, utils_1.responsiveValue)(gap);
-    columnGap = (0, utils_1.responsiveValue)(columnGap) ?? gap;
-    rowGap = (0, utils_1.responsiveValue)(rowGap) ?? gap;
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: (0, grid_style_1.containerStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(grid_style_1.classes.root, props.className), style: {
+exports.Grid = (({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) => {
+    columnCount = (0, utils_1.toResponsiveValue)(columnCount);
+    gap = (0, utils_1.toResponsiveValue)(gap);
+    columnGap = (0, utils_1.toResponsiveValue)(columnGap) ?? gap;
+    rowGap = (0, utils_1.toResponsiveValue)(rowGap) ?? gap;
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: (0, grid_style_1.useContainerStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(grid_style_1.classes.root, props.className), style: {
             display: inline ? 'inline-flex' : 'flex',
             ...props.style
         } }));

package/dist/cjs/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/cjs/components/grid/grid.style.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classes = void 0;
-exports.containerStyle = containerStyle;
-exports.itemStyle = itemStyle;
+exports.useContainerStyle = useContainerStyle;
+exports.useItemStyle = useItemStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineClasses)('grid', [
     'item'
 ]);
-function containerStyle({ columnCount, columnGap, rowGap }) {
-    return (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(k => `
+function useContainerStyle({ columnCount, columnGap, rowGap }) {
+    return (0, utils_1.useCss)(theme => (0, react_1.css) `
+        ${(0, utils_1.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` : ''};
@@ -18,11 +18,11 @@ function containerStyle({ columnCount, columnGap, rowGap }) {
 
         flex-wrap: wrap;
         gap: var(--grid-row-gap) var(--grid-column-gap);
-    `;
+    `);
 }
-function itemStyle({ span, offset }) {
-    return (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(k => `
+function useItemStyle({ span, offset }) {
+    return (0, utils_1.useCss)(theme => (0, react_1.css) `
+        ${(0, utils_1.responsiveVariables)(theme, k => `
             ${k in span ? `--grid-item-span: ${span[k]}` : ''};
             ${k in offset ? `--grid-item-offset: ${offset[k]}` : ''};
         `)}
@@ -31,5 +31,5 @@ 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/cjs/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/cjs/components/grid/gridItem.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridItem = void 0;
+exports.GridItem = GridItem;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const utils_1 = require("../../utils");
 const grid_style_1 = require("./grid.style");
 const transportStyle_1 = require("../transportStyle");
-exports.GridItem = (0, react_1.forwardRef)(({ span = { xs: 1 }, offset = { xs: 0 }, ...props }, ref) => {
-    span = (0, utils_1.responsiveValue)(span);
-    offset = (0, utils_1.responsiveValue)(offset);
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: ref, css: (0, grid_style_1.itemStyle)({ span, offset }), className: (0, utils_1.classnames)(grid_style_1.classes.item, props.className) }));
-});
+function GridItem({ span = { xs: 1 }, offset = { xs: 0 }, ...props }) {
+    span = (0, utils_1.toResponsiveValue)(span);
+    offset = (0, utils_1.toResponsiveValue)(offset);
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, css: (0, grid_style_1.useItemStyle)({ span, offset }), className: (0, utils_1.classnames)(grid_style_1.classes.item, props.className) }));
+}

package/dist/cjs/components/highlight/highlight.js

@@ -4,9 +4,9 @@ exports.Highlight = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const typography_1 = require("../typography");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 exports.Highlight = (0, react_1.memo)(({ keywords, highlightClassName, highlightStyle, renderHighlight, children }) => {
-    const { colors } = (0, app_1.useTheme)();
+    const { colors } = (0, theme_1.useTheme)();
     if (!children) {
         return children;
     }
@@ -34,7 +34,7 @@ exports.Highlight = (0, react_1.memo)(({ keywords, highlightClassName, highlight
         const highlightText = children.substring(start, offset = end);
         ret.push((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderHighlight?.(highlightText) ||
                 (0, jsx_runtime_1.jsx)(typography_1.Typography.mark, { className: highlightClassName, style: {
-                        color: colors.error,
+                        color: colors.error.main,
                         ...highlightStyle
                     }, children: highlightText }) }, i));
     });

package/dist/cjs/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/cjs/components/image/image.js

@@ -7,7 +7,7 @@ const image_style_1 = require("./image.style");
 const utils_1 = require("../../utils");
 const icons_1 = require("@ant-design/icons");
 const imagePreview_1 = require("./imagePreview");
-exports.Image = (0, react_1.memo)((0, react_1.forwardRef)(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }, ref) => {
+exports.Image = (0, react_1.memo)(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }) => {
     const [failed, setFailed] = (0, utils_1.useDerivedState)(() => !src, [src]);
     const errorHandler = (e) => {
         onError?.(e);
@@ -27,11 +27,11 @@ exports.Image = (0, react_1.memo)((0, react_1.forwardRef)(({ src, fallback, onEr
         }
         return actions;
     })();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: image_style_1.style, className: (0, utils_1.classnames)(image_style_1.classes.root, props.className), "data-error": failed.current, children: [props.children, (0, jsx_runtime_1.jsx)("img", { className: image_style_1.classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, css: image_style_1.style, className: (0, utils_1.classnames)(image_style_1.classes.root, props.className), "data-error": failed.current, children: [props.children, (0, jsx_runtime_1.jsx)("img", { className: image_style_1.classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
                             objectFit,
                             objectPosition,
                             ...imgProps?.style
                         }, onError: errorHandler }), !!renderedActions && !failed.current &&
                         (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions })] }), previewable && src &&
                 (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
-}));
+});

package/dist/cjs/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/cjs/components/image/image.style.js

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

package/dist/cjs/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>;