@canlooks/can-ui 0.0.21 → 0.0.23

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

@@ -1,6 +1,6 @@
 import { SnackbarBaseProps } from '../snackbarBase';
 import { SnackbarBaseMethods } from '../snackbarBase';
-import { CornerPlacement } from '../../../types';
+import { CornerPlacement } from '../../types';
 export interface AppNotificationProps extends Omit<SnackbarBaseProps, 'placement'> {
     placement?: CornerPlacement;
 }

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,12 +1,12 @@
-import { ReactElement, Ref } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import React, { ReactElement, Ref } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../types';
 import { AvatarGroup } from './avatarGroup';
 export interface AvatarProps extends DIVProps {
     color?: ColorPropsValue;
     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/avatar.style.d.ts

@@ -1,4 +1,4 @@
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     img: string;
 } & {

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

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
 import { AvatarProps } from './avatar';
-import { Obj } from '../../../types';
+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

@@ -1,16 +1,16 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Placement } from '../../../types';
+import { ColorPropsValue, DIVProps, Placement } from '../../types';
 export interface BadgeProps extends DIVProps {
     color?: ColorPropsValue;
     placement?: Placement;
     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/badge/badge.style.d.ts

@@ -1,4 +1,4 @@
-import { ColorPropsValue } from '../../../types';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     children: string;
     badge: string;

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

@@ -1,12 +1,12 @@
 import { ReactElement } from 'react';
-import { DIVProps, Id, Obj } from '../../../types';
+import { DIVProps, Id, Obj } from '../../types';
 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;

package/dist/esm/components/bottomNavigation/bottomNavigation.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classes, style } from './bottomNavigation.style';
 import { classnames, isUnset, useControlled } from '../../utils';
 import { BottomNavigationItem } from './bottomNavigationItem';
-export const BottomNavigation = memo(forwardRef(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }, ref) => {
+export const BottomNavigation = memo(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }) => {
     const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
     const renderItems = () => {
         if (items) {
@@ -17,17 +17,19 @@ export const BottomNavigation = memo(forwardRef(({ items, showLabelInactive, pri
         }
         showLabelInactive ??= Children.count(props.children) <= 3;
         return Children.map(props.children, c => {
-            return isValidElement(c)
-                ? cloneElement(c, {
-                    showLabelInactive: c.props.showLabelInactive ?? showLabelInactive,
-                    active: !isUnset(c.props.value) && innerValue.current === c.props.value,
+            if (isValidElement(c)) {
+                const { props } = c;
+                return cloneElement(c, {
+                    showLabelInactive: props.showLabelInactive ?? showLabelInactive,
+                    active: !isUnset(props.value) && innerValue.current === props.value,
                     onClick: e => {
-                        c.props.onClick?.(e);
-                        setInnerValue(c.props.value);
+                        props.onClick?.(e);
+                        setInnerValue(props.value);
                     },
-                })
-                : c;
+                });
+            }
+            return c;
         });
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
-}));
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+});

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

@@ -1,16 +1,16 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('botton-navigation', [
+export const classes = defineClasses('bottom-navigation', [
     'item',
     'icon',
     'label'
 ]);
-export const style = defineCss(({ mode, background, text, easing, colors }) => {
-    const primaryColor = Color(colors.primary);
+export const style = defineCss(({ background, text, easing, colors }) => {
+    const primaryColor = Color(colors.primary.main);
     return css `
         height: 56px;
-        background-color: ${background.card};
+        background-color: ${background.content};
         display: flex;
         position: absolute;
         inset: auto 0 0;
@@ -49,7 +49,7 @@ export const style = defineCss(({ mode, background, text, easing, colors }) => {
             }
             
             &[data-active=true] {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
             }
 
             .${classes.icon} {

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DIVProps, Id } from '../../../types';
+import { DIVProps, Id } from '../../types';
 export interface BottomNavigationItemProps extends DIVProps {
     value?: Id;
     icon?: ReactNode;
@@ -7,4 +7,4 @@ export interface BottomNavigationItemProps extends DIVProps {
     showLabelInactive?: boolean;
     active?: boolean;
 }
-export declare const BottomNavigationItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<BottomNavigationItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const BottomNavigationItem: import("react").MemoExoticComponent<({ value, icon, label, showLabelInactive, active, ...props }: BottomNavigationItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/bottomNavigation/bottomNavigationItem.js

@@ -1,9 +1,9 @@
 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 } from './bottomNavigation.style';
-export const BottomNavigationItem = memo(forwardRef(({ value, icon, label, showLabelInactive = true, active, ...props }, ref) => {
-    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
+export const BottomNavigationItem = memo(({ value, icon, label, showLabelInactive = true, active, ...props }) => {
+    return (_jsxs("div", { ...props, className: classnames(classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
                 _jsx("div", { className: classes.icon, children: icon }), !!label &&
                 _jsx("div", { className: classes.label, children: label })] }));
-}));
+});

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

@@ -13,6 +13,7 @@ type BoundaryContext<Data = any, Params = any> = {
     data?: Data | null;
     reload?(...params: Params[]): void;
 };
+declare const BoundaryContext: import("react").Context<BoundaryContext<any, any>>;
 export declare function useBoundaryContext<Data = any, Params = any>(): BoundaryContext<Data, Params>;
 type BoundaryState<Data = any> = {
     error: any | null;
@@ -22,7 +23,7 @@ type BoundaryState<Data = any> = {
     data: Data | null;
 };
 export declare class Boundary<Data = any, Params = any, Args = any> extends Component<BoundaryProps<Data, Params, Args>, BoundaryState<Data>> {
-    static ErrorBoundary: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("./errorBoundary").ErrorBoundaryProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+    static ErrorBoundary: import("react").MemoExoticComponent<({ error, reload, ...props }: import("./errorBoundary").ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
     static getDerivedStateFromError(error: any): {
         error: any;
     };
@@ -35,6 +36,6 @@ export declare class Boundary<Data = any, Params = any, Args = any> extends Comp
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private renderError;
     private renderChildren;
-    render(): string | number | boolean | Iterable<ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

package/dist/esm/components/boundary/boundary.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Component, cloneElement, createContext, isValidElement, useContext } from 'react';
 import { ErrorBoundary } from './errorBoundary';
-const boundaryContext = createContext({});
+const BoundaryContext = createContext({});
 export function useBoundaryContext() {
-    return useContext(boundaryContext);
+    return useContext(BoundaryContext);
 }
 export class Boundary extends Component {
     static ErrorBoundary = ErrorBoundary;
@@ -89,7 +89,7 @@ export class Boundary extends Component {
             ? loadingComponent
             : error
                 ? this.renderError()
-                : _jsx(boundaryContext.Provider, { value: {
+                : _jsx(BoundaryContext, { value: {
                         data: this.state.data,
                         reload: this.reload
                     }, children: this.renderChildren() });

package/dist/esm/components/boundary/errorBoundary.d.ts

@@ -3,4 +3,4 @@ export interface ErrorBoundaryProps extends PlaceholderProps {
     error?: any | null;
     reload?(): void;
 }
-export declare const ErrorBoundary: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ErrorBoundaryProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
+export declare const ErrorBoundary: import("react").MemoExoticComponent<({ error, reload, ...props }: ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/boundary/errorBoundary.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, memo } from 'react';
+import { memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, style } from './errorBoundary.style';
 import { Placeholder } from '../placeholder';
 import { Button } from '../button';
 import { ReloadOutlined } from '@ant-design/icons';
-export const ErrorBoundary = memo(forwardRef(({ error, reload, ...props }, ref) => {
+export const ErrorBoundary = memo(({ error, reload, ...props }) => {
     const renderDescriptions = () => {
         if (error instanceof Error) {
             return error.stack;
@@ -17,5 +17,5 @@ export const ErrorBoundary = memo(forwardRef(({ error, reload, ...props }, ref)
             return error.toString();
         }
     };
-    return (_jsx(Placeholder, { status: "error", description: renderDescriptions(), descriptionComponent: "pre", extra: _jsx(Button, { variant: "outlined", color: "text", prefix: _jsx(ReloadOutlined, {}), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, ref: ref, css: style, className: classnames(classes.root, props.className) }));
-}));
+    return (_jsx(Placeholder, { status: "error", description: renderDescriptions(), descriptionComponent: "pre", extra: _jsx(Button, { variant: "outlined", color: "text", prefix: _jsx(ReloadOutlined, {}), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: style, className: classnames(classes.root, props.className) }));
+});

package/dist/esm/components/boundary/errorBoundary.style.js

@@ -8,7 +8,7 @@ export const style = defineCss(({ spacing, background, borderRadius }) => css `
 
     .${placeholderClasses.description} {
         width: 100%;
-        background-color: ${background.card};
+        background-color: ${background.content};
         border-radius: ${borderRadius}px;
         padding: ${spacing[8]}px;
         margin-top: ${spacing[8]}px;

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

@@ -1,8 +1,10 @@
 import { ReactElement, ReactNode } from 'react';
 import { Button, ButtonProps } from '../button';
-import { DIVProps, Obj } from '../../../types';
+import { DIVProps, Obj } from '../../types';
 export interface BreadcrumbItemProps extends ButtonProps, Obj {
-    /** 对应button的prefix */
+    /**
+     * @alias ButtonProps.prefix
+     */
     icon?: ReactNode;
     label?: ReactNode;
 }

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classnames } from '../../utils';
 import { classes, style } from './breadcrumb.style';
 import { Button } from '../button';
-import { useTheme } from '../app';
-export const Breadcrumb = memo(forwardRef(({ separator = '/', readOnly, items, ...props }, ref) => {
+import { useTheme } from '../theme';
+export const Breadcrumb = memo(({ separator = '/', readOnly, items, ...props }) => {
     const { text } = useTheme();
     const renderItems = () => {
         if (items) {
@@ -21,21 +21,23 @@ export const Breadcrumb = memo(forwardRef(({ separator = '/', readOnly, items, .
         const childrenArr = Children.toArray(props.children);
         return childrenArr.flatMap((c, i) => {
             const isLast = i === childrenArr.length - 1;
-            return [
-                isValidElement(c)
-                    ? cloneElement(c, {
-                        variant: c.props.variant ?? 'plain',
-                        color: c.props.color ?? (isLast ? text.primary : text.disabled),
-                        readOnly: c.props.readOnly ?? (isLast || readOnly),
-                        prefix: c.props.prefix ?? c.props.icon,
-                    })
-                    : c,
-                ...isLast ? [] : [
-                    _jsx("span", { className: classes.separator, children: separator }, `${classes.separator}_${i}`)
-                ]
-            ];
+            const ret = [];
+            if (isValidElement(c)) {
+                const { props } = c;
+                ret.push(cloneElement(c, {
+                    variant: props.variant ?? 'plain',
+                    color: props.color ?? (isLast ? text.primary : text.disabled),
+                    readOnly: props.readOnly ?? (isLast || readOnly),
+                    prefix: props.prefix ?? props.icon,
+                }));
+            }
+            else {
+                ret.push(c);
+            }
+            !isLast && ret.push(_jsx("span", { className: classes.separator, children: separator }, `${classes.separator}_${i}`));
+            return ret;
         });
     };
-    return (_jsx("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
-}));
+    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+});
 Breadcrumb.Item = Button;

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

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

package/dist/esm/components/bubble/bubble.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Popper } from '../popper';
 import { classes, style } from './bubble.style';
 import { classnames } from '../../utils';
-import { useTheme } from '../app';
-export const Bubble = forwardRef(({ showArrow = true, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function Bubble({ showArrow = true, ...props }) {
     const { spacing } = useTheme();
     props.autoClose ??= true;
     props.offset ??= showArrow ? spacing[3] : spacing[2];
-    return (_jsx(Popper, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
-});
+    return (_jsx(Popper, { ...props, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+}

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
-import { zIndex } from '../app';
 import { popperArrowStyle } from '../popper/popper.style';
+import { zIndex } from '../theme';
 export const classes = defineClasses('bubble', [
     'content'
 ]);
@@ -9,11 +9,11 @@ export const style = defineCss(({ background, boxShadow, borderRadius }) => css
     z-index: ${zIndex.dropdown};
 
     .${classes.content} {
-        background-color: ${background.card};
+        background-color: ${background.content};
         box-shadow: ${boxShadow[0]};
         border-radius: ${borderRadius}px;
         padding: 4px;
     }
 
-    ${popperArrowStyle(background.card)}
+    ${popperArrowStyle(background.content)}
 `);

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { PopperProps } from '../popper';
 export interface BubbleConfirmProps extends Omit<PopperProps, 'title'> {
     icon?: ReactNode;
@@ -8,4 +8,4 @@ export interface BubbleConfirmProps extends Omit<PopperProps, 'title'> {
     loading?: boolean;
     onConfirm?(e: React.MouseEvent<HTMLButtonElement>): any;
 }
-export declare const BubbleConfirm: import("react").ForwardRefExoticComponent<Omit<BubbleConfirmProps, "ref"> & import("react").RefAttributes<unknown>>;
+export declare function BubbleConfirm({ icon, title, footer, showArrow, offset, loading, onConfirm, defaultOpen, open, onOpenChange, ...props }: BubbleConfirmProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/bubbleConfirm/bubbleConfirm.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Popper } from '../popper';
 import { classes, style } from './bubbleConfirm.style';
 import { classnames, useControlled, useLoading } from '../../utils';
 import { QuestionCircleFilled } from '@ant-design/icons';
 import { Button } from '../button';
-import { useTheme } from '../app';
-export const BubbleConfirm = forwardRef(({ icon = _jsx(QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }, ref) => {
+import { useTheme } from '../theme';
+export function BubbleConfirm({ icon = _jsx(QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }) {
     const { spacing } = useTheme();
     offset ??= showArrow ? spacing[3] : spacing[2];
     const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
@@ -18,6 +17,6 @@ export const BubbleConfirm = forwardRef(({ icon = _jsx(QuestionCircleFilled, {})
         await onConfirm?.(e);
         _setInnerOpen(false);
     }, loading);
-    return (_jsx(Popper, { trigger: "click", ...props, ref: ref, css: style, className: classnames(classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: _jsxs("div", { className: classes.bubble, "data-show-arrow": showArrow, children: [_jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.title, children: title }), _jsx("div", { className: classes.content, children: props.content }), _jsx("div", { className: classes.footer, children: footer ??
+    return (_jsx(Popper, { trigger: "click", ...props, css: style, className: classnames(classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: _jsxs("div", { className: classes.bubble, "data-show-arrow": showArrow, children: [_jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.title, children: title }), _jsx("div", { className: classes.content, children: props.content }), _jsx("div", { className: classes.footer, children: footer ??
                                 _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }) }));
-});
+}

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

@@ -1,8 +1,8 @@
 export declare const classes: {
     info: string;
+    footer: string;
     title: string;
     content: string;
-    footer: string;
     icon: string;
     bubble: string;
 } & {