@canlooks/can-ui 0.0.20 → 0.0.22

package/dist/esm/components/accordion/accordion.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { classes, style } from './accordion.style';
 import { classnames, useControlled } from '../../utils';
 import { CaretRightOutlined } from '@ant-design/icons';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { Collapse } from '../transitionBase';
-export const Accordion = forwardRef(({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }, ref) => {
+export function Accordion({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
     const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded, onExpandedChange);
@@ -21,6 +20,6 @@ export const Accordion = forwardRef(({ size, title, prefix, suffix, expandIcon,
         }
         return expandIcon;
     };
-    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
+    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
                 _jsx(Collapse, { in: innerExpanded.current, children: _jsx("div", { className: classes.content, children: props.children }) })] }));
-});
+}

package/dist/esm/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/esm/components/accordion/accordion.style.js

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

package/dist/esm/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/esm/components/actionSheet/actionSheet.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classes, style } from './actionSheet.style';
 import { classnames, cloneRef, useControlled, useEscapeClosable } from '../../utils';
 import { OverlayBase } from '../overlayBase';
@@ -9,7 +9,7 @@ const placementToDirection = {
     top: 'down',
     bottom: 'up'
 };
-export const ActionSheet = memo(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) => {
+export const ActionSheet = 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] = useControlled(defaultOpen, open);
     const close = (reason) => {
         onClose?.(reason);
@@ -37,4 +37,4 @@ export const ActionSheet = memo(forwardRef(({ title, actions, placement = 'botto
                                     close('action');
                                 } }, i))] }), showCancel &&
                     _jsx("div", { className: classes.card, children: _jsx(MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
-}));
+});

package/dist/esm/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/esm/components/actionSheet/actionSheet.style.js

@@ -28,7 +28,7 @@ export const style = defineCss(({ spacing, background, boxShadow, borderRadius,
 
     .${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/esm/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/esm/components/alert/alert.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, useStyle } from './alert.style';
 import { statusMapToIcon } from '../status';
 import { Button } from '../button';
 import { CloseOutlined } from '@ant-design/icons';
 import { Skeleton } from '../skeleton';
-export const Alert = memo(forwardRef(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }, ref) => {
+export const Alert = memo(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
     const Icon = statusMapToIcon[status];
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, children: [showIcon &&
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, children: [showIcon &&
                 _jsx("div", { className: classes.icon, children: loading
                         ? _jsx(Skeleton, { variant: "circular" })
                         : icon ?? _jsx(Icon, {}) }), !loading && !!prefix &&
@@ -20,4 +20,4 @@ export const Alert = memo(forwardRef(({ variant = 'standard', status = 'error',
                             : description })] }), !loading && !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix }), closable &&
                 _jsx(Button, { className: classes.close, variant: "text", shape: "circular", color: variant === 'filled' ? '#fff' : 'text', onClick: onClose, disabled: loading, children: _jsx(CloseOutlined, {}) })] }));
-}));
+});

package/dist/esm/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/esm/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/esm/components/anchor/anchor.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useSync } from '../../utils';
-export const anchorContext = createContext({
+export const InnerAnchorContext = createContext({
     targets: new Map(),
     activeId: null
 });
 export function useAnchorContext() {
-    return useContext(anchorContext);
+    return useContext(InnerAnchorContext);
 }
-export function AnchorContext({ thesholds, container, children, ...props }) {
+export function AnchorContext({ thresholds, container, children, ...props }) {
     const targets = useRef(new Map());
     const [activeId, setActiveId] = useState(null);
-    const syncThresholds = useSync(thesholds);
+    const syncThresholds = useSync(thresholds);
     useEffect(() => {
         const containerEl = typeof container === 'function' ? container() : container;
         const scroll = () => {
@@ -52,7 +52,7 @@ export function AnchorContext({ thesholds, container, children, ...props }) {
             }
         };
     }, []);
-    return (_jsx(anchorContext.Provider, { value: useMemo(() => ({
+    return (_jsx(InnerAnchorContext, { value: useMemo(() => ({
             ...props,
             targets: targets.current,
             activeId

package/dist/esm/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/esm/components/app/app.js

@@ -1,55 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { createContext, forwardRef, useContext, useEffect, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { classnames } from '../../utils';
 import { classes, style } from './app.style';
+import { ThemeProvider } from '../theme';
 import { AppDialog, AppDialogMethods } from './appDialog';
 import { AppMessage, AppMessageMethods } from './appMessage';
 import { AppNotification, AppNotificationMethods } from './appNotification';
 import { AppActionSheet, AppActionSheetMethods } from './appActionSheet';
-import { themeContext, useThemeProvider } from './themeContext';
 import { css } from '@emotion/react';
-const appContext = createContext({
+const AppContext = createContext({
     dialog: new AppDialogMethods(),
     message: new AppMessageMethods(),
     notification: new AppNotificationMethods(),
-    zoom: 1
 });
 export function useAppContext() {
-    return useContext(appContext);
+    return useContext(AppContext);
 }
-export const App = forwardRef(({ component: Component = 'div', theme, children, fullSize = true, zoom = 1, ...props }, ref) => {
-    const themeValue = useThemeProvider(theme);
-    const { _isTop } = themeValue;
-    useEffect(() => {
-        if (_isTop) {
-            document.documentElement.style.colorScheme = themeValue.mode;
-        }
-    }, [_isTop]);
-    themeValue._isTop = false;
+export const App = (({ theme, ...props }) => {
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(InnerApp, { ...props }) }));
+});
+export function InnerApp({ component: Component = 'div', theme, children, fill = true, ...props }) {
     const appValue = useMemo(() => ({
         dialog: App.dialog = new AppDialogMethods(),
         message: App.message = new AppMessageMethods(),
         notification: App.notification = new AppNotificationMethods(),
         actionSheet: App.actionSheet = new AppActionSheetMethods(),
-        zoom
-    }), [zoom]);
-    return (_jsx(themeContext.Provider, { value: themeValue, children: _jsxs(appContext.Provider, { value: appValue, children: [Component
-                    ? _jsx(Component, { ...props, ref: ref, css: [
-                            style,
-                            css `
-                                font-size: ${themeValue.fontSize}px;
-                                color: ${themeValue.text.primary};
-                                background-color: ${themeValue.background.body};
-
-                                * {
-                                    font-family: ${themeValue.fontFamily};
-                                }
-                            `,
-                            fullSize && css `
-                                width: 100%;
-                                height: 100%;
-                                flex: 1;   
-                            `
-                        ], className: classnames(classes.root, props.className), children: children })
-                    : children, _jsx(AppDialog, { methods: appValue.dialog }), _jsx(AppMessage, { methods: appValue.message }), _jsx(AppNotification, { methods: appValue.notification }), _jsx(AppActionSheet, { methods: appValue.actionSheet })] }) }));
-});
+    }), []);
+    return (_jsxs(AppContext, { value: appValue, children: [Component
+                ? _jsx(Component, { ...props, css: [
+                        style,
+                        fill && css `
+                            width: 100%;
+                            height: 100%;
+                            flex: 1;
+                        `
+                    ], className: classnames(classes.root, props.className), children: children })
+                : children, _jsx(AppDialog, { methods: appValue.dialog }), _jsx(AppMessage, { methods: appValue.message }), _jsx(AppNotification, { methods: appValue.notification }), _jsx(AppActionSheet, { methods: appValue.actionSheet })] }));
+}

package/dist/esm/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/esm/components/app/app.style.js

@@ -1,12 +1,17 @@
 import { css } from '@emotion/react';
-import { defineClasses } from '../../utils';
+import { defineClasses, defineCss } from '../../utils';
 export const classes = defineClasses('app');
-export const style = css `
+export const appStyleCallback = (theme) => 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 {
@@ -19,3 +24,4 @@ export const style = css `
         display: inline-flex;
     }
 `;
+export const style = defineCss(appStyleCallback);

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

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

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

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

package/dist/esm/components/autocomplete/autocomplete.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, forwardRef, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Popper } from '../popper';
 import { OptionsBase } from '../optionsBase';
 import { Input } from '../input';
 import { cloneRef, isUnset, useControlled, useDerivedState, useLoading, useSync } from '../../utils';
 import { classes } from './autocomplete.style';
 import { popperStyle } from '../popper/popper.style';
-export const Autocomplete = memo(forwardRef(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }, ref) => {
+export const Autocomplete = memo(({ ref, children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = useState(false);
     const setFocused = (focused) => {
         !props.disabled && !props.readOnly && _setFocused(focused);
@@ -21,7 +21,7 @@ export const Autocomplete = memo(forwardRef(({ children, loading, options, loadO
     /**
      * ------------------------------------------------------------------
      * 动态请求选项
-    */
+     */
     const [innerOptions, setInnerOptions] = useState();
     const [innerLoading, innerLoadOptions] = useLoading(async () => {
         loadOptions && setInnerOptions(await loadOptions(innerValue.current));
@@ -98,4 +98,4 @@ export const Autocomplete = memo(forwardRef(({ children, loading, options, loadO
         }, children: renderInput
             ? renderInput(inputProps)
             : _jsx(Input, { ...inputProps }) }));
-}));
+});

package/dist/esm/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/esm/components/avatar/avatar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { classes, useStyle } from './avatar.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
+import { useTheme } from '../theme';
 import { AvatarGroup } from './avatarGroup';
 export function useAvatarStyle(props) {
     const { mode, size, gray } = useTheme();
@@ -16,13 +16,13 @@ export function useAvatarStyle(props) {
         }[_size] || _size
     }), [props.color, mode, _size]);
 }
-export const Avatar = memo(forwardRef(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }, ref) => {
+export const Avatar = memo(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }) => {
     const style = useAvatarStyle({ color, size });
-    return (_jsx("div", { ...props, ref: ref, css: useStyle({ color: style.color }), className: classnames(classes.root, props.className), style: {
+    return (_jsx("div", { ...props, css: useStyle({ color: style.color }), className: classnames(classes.root, props.className), style: {
             width: style.size,
             ...props.style
         }, "data-shape": shape, children: src
             ? _jsx("img", { src: src, alt: "", ...imgProps, ref: imgRef, className: classnames(classes.img, imgProps?.className) })
             : props.children }));
-}));
+});
 Avatar.Group = AvatarGroup;

package/dist/esm/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/esm/components/avatar/avatarGroup.js

@@ -1,10 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, style } from './avatarGroup.style';
 import { Avatar, useAvatarStyle } from './avatar';
-export const AvatarGroup = memo(forwardRef(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }, ref) => {
+export const AvatarGroup = memo(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }) => {
     const itemStyle = useAvatarStyle({ color, size });
     const commonProps = {
         ...itemStyle,
@@ -37,5 +37,5 @@ export const AvatarGroup = memo(forwardRef(({ color, size, shape = 'circular', i
         }
         return _jsxs(Avatar, { children: ["+", surplus] });
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root), "data-hoverable": hoverable, children: _jsxs("div", { className: classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
-}));
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root), "data-hoverable": hoverable, children: _jsxs("div", { className: classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+});

package/dist/esm/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/esm/components/backdrop/backdrop.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { classnames } from '../../utils';
 import { Fade } from '../transitionBase';
 import { classes, useStyle } from './backdrop.style';
-export const Backdrop = forwardRef(({ open, variant = 'dark', ...props }, ref) => {
-    return (_jsx(Fade, { ...props, ref: ref, css: useStyle({ variant }), in: open, className: classnames(classes.root, props.className) }));
-});
+export function Backdrop({ open, variant = 'dark', ...props }) {
+    return (_jsx(Fade, { ...props, css: useStyle({ variant }), in: open, className: classnames(classes.root, props.className) }));
+}

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

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

package/dist/esm/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/esm/components/badge/badge.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { classes, useStyle } from './badge.style';
 import { classnames } from '../../utils';
-export const Badge = forwardRef(({ color = 'error', placement = 'topRight', variant = 'standard', count = 0, max = 99, showZero, offsetX = 0, offsetY = 0, ...props }, ref) => {
+export 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;
@@ -50,10 +50,10 @@ export const Badge = forwardRef(({ color = 'error', placement = 'topRight', vari
     if (typeof offsetY === 'number') {
         offsetY += 'px';
     }
-    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
                 _jsx("div", { className: classes.children, children: props.children }), _jsx("div", { className: classes.badge, style: {
                     ...badgeStyle,
                     transform: `translate(${offsetX}, ${offsetY})`
                 }, children: _jsx("div", { className: classes.badgeWrap, children: variant !== 'dot' &&
                         _jsxs(_Fragment, { children: [renderedCount, isOverflow && '+'] }) }) })] }));
-});
+}

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

@@ -4,9 +4,9 @@ import { BottomNavigationItemProps } from './bottomNavigationItem';
 type BottomNavigationItemType = BottomNavigationItemProps & Obj;
 export interface BottomNavigationProps<I extends BottomNavigationItemType> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
     items?: I[];
-    /** 未激活状态下是否显示label，items数量小于等于3时默认为true，否则为false */
+    /** 未激活状态下是否显示label，items数量小于等于3时默认为`true`，否则为`false` */
     showLabelInactive?: boolean;
-    /** @default "value" */
+    /** 默认为`"value"` */
     primaryKey?: keyof I;
     labelKey?: keyof I;
     defaultValue?: Id;