@canlooks/can-ui 0.0.20 → 0.0.22

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

@@ -12,4 +12,4 @@ export interface AccordionProps extends Omit<DIVProps, 'title' | 'prefix'> {
     readOnly?: boolean;
     disabled?: boolean;
 }
-export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded, expanded, onExpandedChange, readOnly, disabled, ...props }: AccordionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/accordion/accordion.js

@@ -1,15 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Accordion = void 0;
+exports.Accordion = Accordion;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const accordion_style_1 = require("./accordion.style");
 const utils_1 = require("../../utils");
 const icons_1 = require("@ant-design/icons");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const transitionBase_1 = require("../transitionBase");
-exports.Accordion = (0, react_1.forwardRef)(({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
+    const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded, onExpandedChange);
     const toggleExpanded = () => {
@@ -24,6 +23,6 @@ exports.Accordion = (0, react_1.forwardRef)(({ size, title, prefix, suffix, expa
         }
         return expandIcon;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: accordion_style_1.style, className: (0, utils_1.classnames)(accordion_style_1.classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.title, children: title }), !!suffix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.suffix, children: suffix })] }), !!props.children &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: accordion_style_1.style, className: (0, utils_1.classnames)(accordion_style_1.classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsxs)("div", { className: accordion_style_1.classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.title, children: title }), !!suffix && (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.suffix, children: suffix })] }), !!props.children &&
                 (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { in: innerExpanded.current, children: (0, jsx_runtime_1.jsx)("div", { className: accordion_style_1.classes.content, children: props.children }) })] }));
-});
+}

package/dist/cjs/components/accordion/accordion.style.d.ts

@@ -1,10 +1,10 @@
 export declare const classes: {
-    title: string;
     content: string;
+    title: string;
     prefix: string;
-    titleRow: string;
     suffix: string;
     expandIcon: string;
+    titleRow: string;
 } & {
     root: string;
 };

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

@@ -14,7 +14,7 @@ exports.classes = (0, utils_1.defineClasses)('accordion', [
 exports.style = (0, utils_1.defineCss)(({ divider, borderRadius, background, spacing, text, gray, easing }) => (0, react_1.css) `
     border: 1px solid ${divider};
     border-radius: ${borderRadius}px;
-    background-color: ${background.card};
+    background-color: ${background.content};
     transition: margin .2s ${easing.easeOut};
 
     .${exports.classes.titleRow} {

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

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { OverlayBaseProps } from '../overlayBase';
 import { TransitionBaseProps } from '../transitionBase';
 import { MenuItemProps } from '../menuItem';
@@ -8,9 +8,9 @@ export interface ActionSheetProps<A extends MenuItemProps & Obj> extends Omit<Ov
     title?: ReactNode;
     actions?: A[];
     placement?: 'top' | 'bottom';
-    /** 是否可通过点击遮罩层关闭对话框，@default false */
+    /** 是否可通过点击遮罩层关闭对话框，默认为`false` */
     maskClosable?: boolean;
-    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    /** 是否可通过键盘的【ESC】键关闭对话框，默认为`true` */
     escapeClosable?: boolean;
     /** 点击选项 */
     onAction?(action: A): void;
@@ -19,11 +19,11 @@ export interface ActionSheetProps<A extends MenuItemProps & Obj> extends Omit<Ov
     defaultOpen?: boolean;
     open?: boolean;
     onClose?(reason: ActionSheetCloseReason): void;
-    /** 是否显示确定按钮，@default false */
+    /** 是否显示确定按钮，默认为`false` */
     showConfirm?: boolean;
     confirmText?: ReactNode;
     confirmProps?: MenuItemProps;
-    /** 是否显示取消按钮，@default true */
+    /** 是否显示取消按钮，默认为`true` */
     showCancel?: boolean;
     cancelText?: ReactNode;
     cancelProps?: MenuItemProps;

package/dist/cjs/components/actionSheet/actionSheet.js

@@ -12,7 +12,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-exports.ActionSheet = (0, react_1.memo)((0, react_1.forwardRef)(({ title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }, ref) => {
+exports.ActionSheet = (0, react_1.memo)(({ ref, title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }) => {
     const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -40,4 +40,4 @@ exports.ActionSheet = (0, react_1.memo)((0, react_1.forwardRef)(({ title, action
                                     close('action');
                                 } }, i))] }), showCancel &&
                     (0, jsx_runtime_1.jsx)("div", { className: actionSheet_style_1.classes.card, children: (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
-}));
+});

package/dist/cjs/components/actionSheet/actionSheet.style.d.ts

@@ -1,8 +1,8 @@
 export declare const classes: {
-    card: string;
+    action: string;
     title: string;
     sheet: string;
-    action: string;
+    card: string;
 } & {
     root: string;
 };

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

@@ -31,7 +31,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, background, boxShadow, border
 
     .${exports.classes.card} {
         text-align: center;
-        background-color: ${background.card};
+        background-color: ${background.content};
         box-shadow: ${boxShadow[1]};
         border-radius: ${borderRadius}px;
         overflow: hidden;

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

@@ -1,18 +1,19 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DIVProps, Status } from '../../../types';
 export interface AlertProps extends Omit<DIVProps, 'title' | 'prefix' | 'children'> {
     variant?: 'filled' | 'outlined' | 'standard';
     status?: Status;
     color?: ColorPropsValue;
-    /** @default true */
+    /** 是否显示图标，默认为`true` */
     showIcon?: boolean;
     icon?: ReactNode;
     title?: ReactNode;
     description?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    /** 是否显示关闭按钮 */
     closable?: boolean;
     onClose?: React.MouseEventHandler<HTMLButtonElement>;
     loading?: boolean;
 }
-export declare const Alert: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<AlertProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const Alert: React.MemoExoticComponent<({ variant, status, color, showIcon, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }: AlertProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/alert/alert.js

@@ -9,9 +9,9 @@ const status_1 = require("../status");
 const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
 const skeleton_1 = require("../skeleton");
-exports.Alert = (0, react_1.memo)((0, react_1.forwardRef)(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }, ref) => {
+exports.Alert = (0, react_1.memo)(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
     const Icon = status_1.statusMapToIcon[status];
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, alert_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(alert_style_1.classes.root, props.className), "data-variant": variant, children: [showIcon &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, alert_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(alert_style_1.classes.root, props.className), "data-variant": variant, children: [showIcon &&
                 (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.icon, children: loading
                         ? (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { variant: "circular" })
                         : icon ?? (0, jsx_runtime_1.jsx)(Icon, {}) }), !loading && !!prefix &&
@@ -23,4 +23,4 @@ exports.Alert = (0, react_1.memo)((0, react_1.forwardRef)(({ variant = 'standard
                             : description })] }), !loading && !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: alert_style_1.classes.suffix, children: suffix }), closable &&
                 (0, jsx_runtime_1.jsx)(button_1.Button, { className: alert_style_1.classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text', onClick: onClose, disabled: loading, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }));
-}));
+});

package/dist/cjs/components/alert/alert.style.d.ts

@@ -1,12 +1,12 @@
 import { ColorPropsValue } from '../../../types';
 export declare const classes: {
-    title: string;
     content: string;
-    prefix: string;
     icon: string;
+    title: string;
+    prefix: string;
     close: string;
-    suffix: string;
     description: string;
+    suffix: string;
 } & {
     root: string;
 };

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

@@ -3,7 +3,7 @@ type AnchorContextBaseProps = {
     scrollIntoViewOptions?: ScrollIntoViewOptions;
 };
 export interface AnchorContextProps extends AnchorContextBaseProps {
-    thesholds?: [number, number];
+    thresholds?: [number, number];
     container?: Element | (() => Element);
     children?: ReactNode;
 }
@@ -11,9 +11,9 @@ export interface AnchorContextType extends AnchorContextBaseProps {
     targets: Map<string, Element | null>;
     activeId: string | null;
 }
-export declare const anchorContext: import("react").Context<AnchorContextType>;
+export declare const InnerAnchorContext: import("react").Context<AnchorContextType>;
 export declare function useAnchorContext(): AnchorContextType;
-export declare function AnchorContext({ thesholds, container, children, ...props }: AnchorContextProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function AnchorContext({ thresholds, container, children, ...props }: AnchorContextProps): import("@emotion/react/jsx-runtime").JSX.Element;
 /**
  * 在链接按钮组件内使用
  * @param id
@@ -26,5 +26,5 @@ export declare function useAnchorLinkProps(id: string): {
  * 在需要滚动到的目标元素上使用
  * @param id
  */
-export declare function useAnchorTargetRef<T extends Element>(id: string): import("react").RefObject<T>;
+export declare function useAnchorTargetRef<T extends Element>(id: string): import("react").RefObject<T | null>;
 export {};

package/dist/cjs/components/anchor/anchor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.anchorContext = void 0;
+exports.InnerAnchorContext = void 0;
 exports.useAnchorContext = useAnchorContext;
 exports.AnchorContext = AnchorContext;
 exports.useAnchorLinkProps = useAnchorLinkProps;
@@ -8,17 +8,17 @@ exports.useAnchorTargetRef = useAnchorTargetRef;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
-exports.anchorContext = (0, react_1.createContext)({
+exports.InnerAnchorContext = (0, react_1.createContext)({
     targets: new Map(),
     activeId: null
 });
 function useAnchorContext() {
-    return (0, react_1.useContext)(exports.anchorContext);
+    return (0, react_1.useContext)(exports.InnerAnchorContext);
 }
-function AnchorContext({ thesholds, container, children, ...props }) {
+function AnchorContext({ thresholds, container, children, ...props }) {
     const targets = (0, react_1.useRef)(new Map());
     const [activeId, setActiveId] = (0, react_1.useState)(null);
-    const syncThresholds = (0, utils_1.useSync)(thesholds);
+    const syncThresholds = (0, utils_1.useSync)(thresholds);
     (0, react_1.useEffect)(() => {
         const containerEl = typeof container === 'function' ? container() : container;
         const scroll = () => {
@@ -59,7 +59,7 @@ function AnchorContext({ thesholds, container, children, ...props }) {
             }
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.anchorContext.Provider, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)(exports.InnerAnchorContext, { value: (0, react_1.useMemo)(() => ({
             ...props,
             targets: targets.current,
             activeId

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

@@ -1,24 +1,19 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement } from 'react';
 import { DIVProps } from '../../../types';
-import { PartialTheme } from './theme';
+import { ThemeProviderProps } from '../theme';
 import { AppDialogMethods } from './appDialog';
 import { AppMessageMethods } from './appMessage';
 import { AppNotificationMethods } from './appNotification';
 import { AppActionSheetMethods } from './appActionSheet';
-export interface AppProps extends DIVProps {
+export interface AppProps extends ThemeProviderProps, DIVProps {
     component?: any;
-    theme?: PartialTheme;
-    children?: ReactNode;
-    /** 尺寸是否占满父节点，@default true */
-    fullSize?: boolean;
-    /** 若页面受zoom样式影响，需要传入zoom值 */
-    zoom?: number;
+    /** 尺寸是否占满父节点，默认为`true` */
+    fill?: boolean;
 }
 export declare function useAppContext(): {
     dialog: AppDialogMethods;
     message: AppMessageMethods<import("../snackbarBase").SnackbarBaseProps>;
     notification: AppNotificationMethods<import("./appNotification").AppNotificationProps>;
-    zoom: number;
 };
 export declare const App: {
     (props: AppProps): ReactElement;
@@ -27,3 +22,4 @@ export declare const App: {
     notification: AppNotificationMethods;
     actionSheet: AppActionSheetMethods;
 };
+export declare function InnerApp({ component: Component, theme, children, fill, ...props }: AppProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/app/app.js

@@ -2,58 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.App = void 0;
 exports.useAppContext = useAppContext;
+exports.InnerApp = InnerApp;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const app_style_1 = require("./app.style");
+const theme_1 = require("../theme");
 const appDialog_1 = require("./appDialog");
 const appMessage_1 = require("./appMessage");
 const appNotification_1 = require("./appNotification");
 const appActionSheet_1 = require("./appActionSheet");
-const themeContext_1 = require("./themeContext");
 const react_2 = require("@emotion/react");
-const appContext = (0, react_1.createContext)({
+const AppContext = (0, react_1.createContext)({
     dialog: new appDialog_1.AppDialogMethods(),
     message: new appMessage_1.AppMessageMethods(),
     notification: new appNotification_1.AppNotificationMethods(),
-    zoom: 1
 });
 function useAppContext() {
-    return (0, react_1.useContext)(appContext);
+    return (0, react_1.useContext)(AppContext);
 }
-exports.App = (0, react_1.forwardRef)(({ component: Component = 'div', theme, children, fullSize = true, zoom = 1, ...props }, ref) => {
-    const themeValue = (0, themeContext_1.useThemeProvider)(theme);
-    const { _isTop } = themeValue;
-    (0, react_1.useEffect)(() => {
-        if (_isTop) {
-            document.documentElement.style.colorScheme = themeValue.mode;
-        }
-    }, [_isTop]);
-    themeValue._isTop = false;
+exports.App = (({ theme, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(theme_1.ThemeProvider, { theme: theme, children: (0, jsx_runtime_1.jsx)(InnerApp, { ...props }) }));
+});
+function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
     const appValue = (0, react_1.useMemo)(() => ({
         dialog: exports.App.dialog = new appDialog_1.AppDialogMethods(),
         message: exports.App.message = new appMessage_1.AppMessageMethods(),
         notification: exports.App.notification = new appNotification_1.AppNotificationMethods(),
         actionSheet: exports.App.actionSheet = new appActionSheet_1.AppActionSheetMethods(),
-        zoom
-    }), [zoom]);
-    return ((0, jsx_runtime_1.jsx)(themeContext_1.themeContext.Provider, { value: themeValue, children: (0, jsx_runtime_1.jsxs)(appContext.Provider, { value: appValue, children: [Component
-                    ? (0, jsx_runtime_1.jsx)(Component, { ...props, ref: ref, css: [
-                            app_style_1.style,
-                            (0, react_2.css) `
-                                font-size: ${themeValue.fontSize}px;
-                                color: ${themeValue.text.primary};
-                                background-color: ${themeValue.background.body};
-
-                                * {
-                                    font-family: ${themeValue.fontFamily};
-                                }
-                            `,
-                            fullSize && (0, react_2.css) `
-                                width: 100%;
-                                height: 100%;
-                                flex: 1;   
-                            `
-                        ], className: (0, utils_1.classnames)(app_style_1.classes.root, props.className), children: children })
-                    : children, (0, jsx_runtime_1.jsx)(appDialog_1.AppDialog, { methods: appValue.dialog }), (0, jsx_runtime_1.jsx)(appMessage_1.AppMessage, { methods: appValue.message }), (0, jsx_runtime_1.jsx)(appNotification_1.AppNotification, { methods: appValue.notification }), (0, jsx_runtime_1.jsx)(appActionSheet_1.AppActionSheet, { methods: appValue.actionSheet })] }) }));
-});
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appValue, children: [Component
+                ? (0, jsx_runtime_1.jsx)(Component, { ...props, css: [
+                        app_style_1.style,
+                        fill && (0, react_2.css) `
+                            width: 100%;
+                            height: 100%;
+                            flex: 1;
+                        `
+                    ], className: (0, utils_1.classnames)(app_style_1.classes.root, props.className), children: children })
+                : children, (0, jsx_runtime_1.jsx)(appDialog_1.AppDialog, { methods: appValue.dialog }), (0, jsx_runtime_1.jsx)(appMessage_1.AppMessage, { methods: appValue.message }), (0, jsx_runtime_1.jsx)(appNotification_1.AppNotification, { methods: appValue.notification }), (0, jsx_runtime_1.jsx)(appActionSheet_1.AppActionSheet, { methods: appValue.actionSheet })] }));
+}

package/dist/cjs/components/app/app.style.d.ts

@@ -1,4 +1,6 @@
+import { Theme } from '../theme';
 export declare const classes: {
     root: string;
 };
-export declare const style: import("@emotion/react").SerializedStyles;
+export declare const appStyleCallback: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -1,15 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.style = exports.classes = void 0;
+exports.style = exports.appStyleCallback = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineClasses)('app');
-exports.style = (0, react_1.css) `
+const appStyleCallback = (theme) => (0, react_1.css) `
     line-height: ${20 / 14};
     box-sizing: border-box;
+    font-size: ${theme.fontSize}px;
+    color: ${theme.text.primary};
+    background-color: ${theme.background.body};
+    zoom: ${theme.zoom};
 
     * {
         box-sizing: border-box;
+        font-family: ${theme.fontFamily};
     }
 
     svg.MuiSvgIcon-root {
@@ -22,3 +27,5 @@ exports.style = (0, react_1.css) `
         display: inline-flex;
     }
 `;
+exports.appStyleCallback = appStyleCallback;
+exports.style = (0, utils_1.defineCss)(exports.appStyleCallback);

package/dist/cjs/components/app/index.d.ts

@@ -1,3 +1 @@
 export * from './app';
-export * from './theme';
-export * from './themeContext';

package/dist/cjs/components/app/index.js

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./app"), exports);
-tslib_1.__exportStar(require("./theme"), exports);
-tslib_1.__exportStar(require("./themeContext"), exports);

package/dist/cjs/components/autocomplete/autocomplete.js

@@ -9,7 +9,7 @@ const input_1 = require("../input");
 const utils_1 = require("../../utils");
 const autocomplete_style_1 = require("./autocomplete.style");
 const popper_style_1 = require("../popper/popper.style");
-exports.Autocomplete = (0, react_1.memo)((0, react_1.forwardRef)(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }, ref) => {
+exports.Autocomplete = (0, react_1.memo)(({ ref, children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = (0, react_1.useState)(false);
     const setFocused = (focused) => {
         !props.disabled && !props.readOnly && _setFocused(focused);
@@ -24,7 +24,7 @@ exports.Autocomplete = (0, react_1.memo)((0, react_1.forwardRef)(({ children, lo
     /**
      * ------------------------------------------------------------------
      * 动态请求选项
-    */
+     */
     const [innerOptions, setInnerOptions] = (0, react_1.useState)();
     const [innerLoading, innerLoadOptions] = (0, utils_1.useLoading)(async () => {
         loadOptions && setInnerOptions(await loadOptions(innerValue.current));
@@ -101,4 +101,4 @@ exports.Autocomplete = (0, react_1.memo)((0, react_1.forwardRef)(({ children, lo
         }, children: renderInput
             ? renderInput(inputProps)
             : (0, jsx_runtime_1.jsx)(input_1.Input, { ...inputProps }) }));
-}));
+});

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

@@ -1,4 +1,4 @@
-import { ReactElement, Ref } from 'react';
+import React, { ReactElement, Ref } from 'react';
 import { ColorPropsValue, DIVProps, Size } from '../../../types';
 import { AvatarGroup } from './avatarGroup';
 export interface AvatarProps extends DIVProps {
@@ -6,7 +6,7 @@ export interface AvatarProps extends DIVProps {
     size?: Size | number | string;
     shape?: 'circular' | 'square';
     src?: string;
-    imgProps?: JSX.IntrinsicElements['img'];
+    imgProps?: React.JSX.IntrinsicElements['img'];
     imgRef?: Ref<HTMLImageElement>;
 }
 export declare function useAvatarStyle(props: Pick<AvatarProps, 'color' | 'size'>): {

package/dist/cjs/components/avatar/avatar.js

@@ -6,10 +6,10 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const avatar_style_1 = require("./avatar.style");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const avatarGroup_1 = require("./avatarGroup");
 function useAvatarStyle(props) {
-    const { mode, size, gray } = (0, app_1.useTheme)();
+    const { mode, size, gray } = (0, theme_1.useTheme)();
     const _size = props.size ?? size;
     return (0, react_1.useMemo)(() => ({
         color: props.color ?? gray(mode === 'light' ? .2 : .3),
@@ -20,13 +20,13 @@ function useAvatarStyle(props) {
         }[_size] || _size
     }), [props.color, mode, _size]);
 }
-exports.Avatar = (0, react_1.memo)((0, react_1.forwardRef)(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }, ref) => {
+exports.Avatar = (0, react_1.memo)(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }) => {
     const style = useAvatarStyle({ color, size });
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, avatar_style_1.useStyle)({ color: style.color }), className: (0, utils_1.classnames)(avatar_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, avatar_style_1.useStyle)({ color: style.color }), className: (0, utils_1.classnames)(avatar_style_1.classes.root, props.className), style: {
             width: style.size,
             ...props.style
         }, "data-shape": shape, children: src
             ? (0, jsx_runtime_1.jsx)("img", { src: src, alt: "", ...imgProps, ref: imgRef, className: (0, utils_1.classnames)(avatar_style_1.classes.img, imgProps?.className) })
             : props.children }));
-}));
+});
 exports.Avatar.Group = avatarGroup_1.AvatarGroup;

package/dist/cjs/components/avatar/avatarGroup.d.ts

@@ -4,11 +4,11 @@ import { Obj } from '../../../types';
 export interface AvatarGroupProps extends Omit<AvatarProps, 'src'> {
     items?: (AvatarProps & Obj)[];
     hoverable?: boolean;
-    /** 最大显示的数量，@default 5 */
+    /** 最大显示的数量，默认为5 */
     max?: number;
     /** 总共的数量，默认取items或children的长度 */
     total?: number;
     /** 超过最大限制时，渲染的额外头像 */
     renderSurplus?(surplus: number): ReactNode;
 }
-export declare const AvatarGroup: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<AvatarGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const AvatarGroup: import("react").MemoExoticComponent<({ color, size, shape, imgProps, imgRef, items, hoverable, max, total, renderSurplus, ...props }: AvatarGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/avatar/avatarGroup.js

@@ -7,7 +7,7 @@ const react_2 = require("react");
 const utils_1 = require("../../utils");
 const avatarGroup_style_1 = require("./avatarGroup.style");
 const avatar_1 = require("./avatar");
-exports.AvatarGroup = (0, react_2.memo)((0, react_2.forwardRef)(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }, ref) => {
+exports.AvatarGroup = (0, react_2.memo)(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }) => {
     const itemStyle = (0, avatar_1.useAvatarStyle)({ color, size });
     const commonProps = {
         ...itemStyle,
@@ -40,5 +40,5 @@ exports.AvatarGroup = (0, react_2.memo)((0, react_2.forwardRef)(({ color, size,
         }
         return (0, jsx_runtime_1.jsxs)(avatar_1.Avatar, { children: ["+", surplus] });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: avatarGroup_style_1.style, className: (0, utils_1.classnames)(avatarGroup_style_1.classes.root), "data-hoverable": hoverable, children: (0, jsx_runtime_1.jsxs)("div", { className: avatarGroup_style_1.classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
-}));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: avatarGroup_style_1.style, className: (0, utils_1.classnames)(avatarGroup_style_1.classes.root), "data-hoverable": hoverable, children: (0, jsx_runtime_1.jsxs)("div", { className: avatarGroup_style_1.classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+});

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

@@ -1,7 +1,8 @@
+import { PropsWithoutRef } from 'react';
 import { FadeProps } from '../transitionBase';
 export interface BackdropProps<T extends HTMLElement = HTMLElement> extends Omit<FadeProps<T>, 'in'> {
-    open: boolean;
-    /** @default 'dark' */
+    open?: boolean;
+    /** 默认为'dark' */
     variant?: 'light' | 'dark';
 }
-export declare const Backdrop: import("react").ForwardRefExoticComponent<Omit<BackdropProps<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare function Backdrop<T extends HTMLElement = HTMLElement>({ open, variant, ...props }: PropsWithoutRef<BackdropProps<T>>): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/backdrop/backdrop.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Backdrop = void 0;
+exports.Backdrop = Backdrop;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const utils_1 = require("../../utils");
 const transitionBase_1 = require("../transitionBase");
 const backdrop_style_1 = require("./backdrop.style");
-exports.Backdrop = (0, react_1.forwardRef)(({ open, variant = 'dark', ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { ...props, ref: ref, css: (0, backdrop_style_1.useStyle)({ variant }), in: open, className: (0, utils_1.classnames)(backdrop_style_1.classes.root, props.className) }));
-});
+function Backdrop({ open, variant = 'dark', ...props }) {
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { ...props, css: (0, backdrop_style_1.useStyle)({ variant }), in: open, className: (0, utils_1.classnames)(backdrop_style_1.classes.root, props.className) }));
+}

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

@@ -11,7 +11,7 @@ function useStyle({ variant }) {
     return (0, utils_1.useCss)(({ background, text, spacing }) => {
         const bgColor = variant === 'dark'
             ? (0, color_1.default)(text.primary).alpha(.8).string()
-            : (0, color_1.default)(background.card).alpha(.8).string();
+            : (0, color_1.default)(background.content).alpha(.8).string();
         return (0, react_1.css) `
             position: absolute;
             inset: 0;

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

@@ -6,11 +6,11 @@ export interface BadgeProps extends DIVProps {
     variant?: 'dot' | 'standard';
     /** 角标的任容 */
     count?: ReactNode;
-    /** @default 99 */
+    /** 默认为`99` */
     max?: number;
-    /** 数量为0时是否显示角标，@default false */
+    /** 数量为0时是否显示角标，默认为`false` */
     showZero?: boolean;
     offsetX?: number | string;
     offsetY?: number | string;
 }
-export declare const Badge: import("react").ForwardRefExoticComponent<Omit<BadgeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function Badge({ color, placement, variant, count, max, showZero, offsetX, offsetY, ...props }: BadgeProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/badge/badge.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = void 0;
+exports.Badge = Badge;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const badge_style_1 = require("./badge.style");
 const utils_1 = require("../../utils");
-exports.Badge = (0, react_1.forwardRef)(({ color = 'error', placement = 'topRight', variant = 'standard', count = 0, max = 99, showZero, offsetX = 0, offsetY = 0, ...props }, ref) => {
+function Badge({ color = 'error', placement = 'topRight', variant = 'standard', count = 0, max = 99, showZero, offsetX = 0, offsetY = 0, ...props }) {
     const renderedCount = typeof count === 'number'
         ? Math.min(count, max)
         : count;
@@ -53,10 +53,10 @@ exports.Badge = (0, react_1.forwardRef)(({ color = 'error', placement = 'topRigh
     if (typeof offsetY === 'number') {
         offsetY += 'px';
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, badge_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(badge_style_1.classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, badge_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(badge_style_1.classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
                 (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.children, children: props.children }), (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.badge, style: {
                     ...badgeStyle,
                     transform: `translate(${offsetX}, ${offsetY})`
                 }, children: (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.badgeWrap, children: variant !== 'dot' &&
                         (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderedCount, isOverflow && '+'] }) }) })] }));
-});
+}