@canlooks/can-ui 0.0.21 → 0.0.22

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

package/dist/cjs/components/bottomNavigation/bottomNavigation.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const bottomNavigation_style_1 = require("./bottomNavigation.style");
 const utils_1 = require("../../utils");
 const bottomNavigationItem_1 = require("./bottomNavigationItem");
-exports.BottomNavigation = (0, react_1.memo)((0, react_1.forwardRef)(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }, ref) => {
+exports.BottomNavigation = (0, react_1.memo)(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }) => {
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const renderItems = () => {
         if (items) {
@@ -20,17 +20,19 @@ exports.BottomNavigation = (0, react_1.memo)((0, react_1.forwardRef)(({ items, s
         }
         showLabelInactive ??= react_1.Children.count(props.children) <= 3;
         return react_1.Children.map(props.children, c => {
-            return (0, react_1.isValidElement)(c)
-                ? (0, react_1.cloneElement)(c, {
-                    showLabelInactive: c.props.showLabelInactive ?? showLabelInactive,
-                    active: !(0, utils_1.isUnset)(c.props.value) && innerValue.current === c.props.value,
+            if ((0, react_1.isValidElement)(c)) {
+                const { props } = c;
+                return (0, react_1.cloneElement)(c, {
+                    showLabelInactive: props.showLabelInactive ?? showLabelInactive,
+                    active: !(0, utils_1.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 ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: bottomNavigation_style_1.style, className: (0, utils_1.classnames)(bottomNavigation_style_1.classes.root, props.className), children: renderItems() }));
-}));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: bottomNavigation_style_1.style, className: (0, utils_1.classnames)(bottomNavigation_style_1.classes.root, props.className), children: renderItems() }));
+});

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

@@ -1,6 +1,6 @@
 export declare const classes: {
-    label: string;
     icon: string;
+    label: string;
     item: string;
 } & {
     root: string;

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

@@ -5,16 +5,16 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('botton-navigation', [
+exports.classes = (0, utils_1.defineClasses)('bottom-navigation', [
     'item',
     'icon',
     'label'
 ]);
-exports.style = (0, utils_1.defineCss)(({ mode, background, text, easing, colors }) => {
-    const primaryColor = (0, color_1.default)(colors.primary);
+exports.style = (0, utils_1.defineCss)(({ background, text, easing, colors }) => {
+    const primaryColor = (0, color_1.default)(colors.primary.main);
     return (0, react_1.css) `
         height: 56px;
-        background-color: ${background.card};
+        background-color: ${background.content};
         display: flex;
         position: absolute;
         inset: auto 0 0;
@@ -53,7 +53,7 @@ exports.style = (0, utils_1.defineCss)(({ mode, background, text, easing, colors
             }
             
             &[data-active=true] {
-                color: ${colors.primary};
+                color: ${colors.primary.main};
             }
 
             .${exports.classes.icon} {

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

@@ -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/cjs/components/bottomNavigation/bottomNavigationItem.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const bottomNavigation_style_1 = require("./bottomNavigation.style");
-exports.BottomNavigationItem = (0, react_1.memo)((0, react_1.forwardRef)(({ value, icon, label, showLabelInactive = true, active, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(bottomNavigation_style_1.classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
+exports.BottomNavigationItem = (0, react_1.memo)(({ value, icon, label, showLabelInactive = true, active, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(bottomNavigation_style_1.classes.item, props.className), "data-active": active, "data-show-label-inactive": showLabelInactive, children: [!!icon &&
                 (0, jsx_runtime_1.jsx)("div", { className: bottomNavigation_style_1.classes.icon, children: icon }), !!label &&
                 (0, jsx_runtime_1.jsx)("div", { className: bottomNavigation_style_1.classes.label, children: label })] }));
-}));
+});

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

@@ -5,9 +5,9 @@ exports.useBoundaryContext = useBoundaryContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const errorBoundary_1 = require("./errorBoundary");
-const boundaryContext = (0, react_1.createContext)({});
+const BoundaryContext = (0, react_1.createContext)({});
 function useBoundaryContext() {
-    return (0, react_1.useContext)(boundaryContext);
+    return (0, react_1.useContext)(BoundaryContext);
 }
 class Boundary extends react_1.Component {
     static ErrorBoundary = errorBoundary_1.ErrorBoundary;
@@ -93,7 +93,7 @@ class Boundary extends react_1.Component {
             ? loadingComponent
             : error
                 ? this.renderError()
-                : (0, jsx_runtime_1.jsx)(boundaryContext.Provider, { value: {
+                : (0, jsx_runtime_1.jsx)(BoundaryContext, { value: {
                         data: this.state.data,
                         reload: this.reload
                     }, children: this.renderChildren() });

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

@@ -8,7 +8,7 @@ const errorBoundary_style_1 = require("./errorBoundary.style");
 const placeholder_1 = require("../placeholder");
 const button_1 = require("../button");
 const icons_1 = require("@ant-design/icons");
-exports.ErrorBoundary = (0, react_1.memo)((0, react_1.forwardRef)(({ error, reload, ...props }, ref) => {
+exports.ErrorBoundary = (0, react_1.memo)(({ error, reload, ...props }) => {
     const renderDescriptions = () => {
         if (error instanceof Error) {
             return error.stack;
@@ -20,5 +20,5 @@ exports.ErrorBoundary = (0, react_1.memo)((0, react_1.forwardRef)(({ error, relo
             return error.toString();
         }
     };
-    return ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { status: "error", description: renderDescriptions(), descriptionComponent: "pre", extra: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text", prefix: (0, jsx_runtime_1.jsx)(icons_1.ReloadOutlined, {}), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, ref: ref, css: errorBoundary_style_1.style, className: (0, utils_1.classnames)(errorBoundary_style_1.classes.root, props.className) }));
-}));
+    return ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { status: "error", description: renderDescriptions(), descriptionComponent: "pre", extra: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text", prefix: (0, jsx_runtime_1.jsx)(icons_1.ReloadOutlined, {}), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: errorBoundary_style_1.style, className: (0, utils_1.classnames)(errorBoundary_style_1.classes.root, props.className) }));
+});

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

@@ -11,7 +11,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, background, borderRadius }) =
 
     .${placeholder_style_1.classes.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/cjs/components/breadcrumb/breadcrumb.d.ts

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

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -6,9 +6,9 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const breadcrumb_style_1 = require("./breadcrumb.style");
 const button_1 = require("../button");
-const app_1 = require("../app");
-exports.Breadcrumb = (0, react_1.memo)((0, react_1.forwardRef)(({ separator = '/', readOnly, items, ...props }, ref) => {
-    const { text } = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+exports.Breadcrumb = (0, react_1.memo)(({ separator = '/', readOnly, items, ...props }) => {
+    const { text } = (0, theme_1.useTheme)();
     const renderItems = () => {
         if (items) {
             return items.flatMap(({ icon, label, ...p }, i) => {
@@ -24,21 +24,23 @@ exports.Breadcrumb = (0, react_1.memo)((0, react_1.forwardRef)(({ separator = '/
         const childrenArr = react_1.Children.toArray(props.children);
         return childrenArr.flatMap((c, i) => {
             const isLast = i === childrenArr.length - 1;
-            return [
-                (0, react_1.isValidElement)(c)
-                    ? (0, react_1.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 ? [] : [
-                    (0, jsx_runtime_1.jsx)("span", { className: breadcrumb_style_1.classes.separator, children: separator }, `${breadcrumb_style_1.classes.separator}_${i}`)
-                ]
-            ];
+            const ret = [];
+            if ((0, react_1.isValidElement)(c)) {
+                const { props } = c;
+                ret.push((0, react_1.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((0, jsx_runtime_1.jsx)("span", { className: breadcrumb_style_1.classes.separator, children: separator }, `${breadcrumb_style_1.classes.separator}_${i}`));
+            return ret;
         });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: breadcrumb_style_1.style, className: (0, utils_1.classnames)(breadcrumb_style_1.classes.root, props.className), children: renderItems() }));
-}));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: breadcrumb_style_1.style, className: (0, utils_1.classnames)(breadcrumb_style_1.classes.root, props.className), children: renderItems() }));
+});
 exports.Breadcrumb.Item = button_1.Button;

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

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

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

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

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

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BubbleConfirm = void 0;
+exports.BubbleConfirm = BubbleConfirm;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
 const popper_1 = require("../popper");
 const bubbleConfirm_style_1 = require("./bubbleConfirm.style");
 const utils_1 = require("../../utils");
 const icons_1 = require("@ant-design/icons");
 const button_1 = require("../button");
-const app_1 = require("../app");
-exports.BubbleConfirm = (0, react_1.forwardRef)(({ icon = (0, jsx_runtime_1.jsx)(icons_1.QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }, ref) => {
-    const { spacing } = (0, app_1.useTheme)();
+const theme_1 = require("../theme");
+function BubbleConfirm({ icon = (0, jsx_runtime_1.jsx)(icons_1.QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }) {
+    const { spacing } = (0, theme_1.useTheme)();
     offset ??= showArrow ? spacing[3] : spacing[2];
     const [innerOpen, _setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
     const setInnerOpen = (open) => {
@@ -21,6 +20,6 @@ exports.BubbleConfirm = (0, react_1.forwardRef)(({ icon = (0, jsx_runtime_1.jsx)
         await onConfirm?.(e);
         _setInnerOpen(false);
     }, loading);
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { trigger: "click", ...props, ref: ref, css: bubbleConfirm_style_1.style, className: (0, utils_1.classnames)(bubbleConfirm_style_1.classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.bubble, "data-show-arrow": showArrow, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.content, children: props.content }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.footer, children: footer ??
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { trigger: "click", ...props, css: bubbleConfirm_style_1.style, className: (0, utils_1.classnames)(bubbleConfirm_style_1.classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.bubble, "data-show-arrow": showArrow, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.icon, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: bubbleConfirm_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.title, children: title }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.content, children: props.content }), (0, jsx_runtime_1.jsx)("div", { className: bubbleConfirm_style_1.classes.footer, children: footer ??
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }) }));
-});
+}

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

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

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

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-const app_1 = require("../app");
 const popper_style_1 = require("../popper/popper.style");
+const theme_1 = require("../theme");
 exports.classes = (0, utils_1.defineClasses)('bubble-confirm', [
     'bubble',
     'icon',
@@ -16,18 +16,18 @@ exports.classes = (0, utils_1.defineClasses)('bubble-confirm', [
 exports.style = (0, utils_1.defineCss)(({ boxShadow, borderRadius, background, spacing, colors, text }) => (0, react_1.css) `
     min-width: 180px;
     max-width: 340px;
-    z-index: ${app_1.zIndex.bubbleConfirm};
+    z-index: ${theme_1.zIndex.bubbleConfirm};
 
     .${exports.classes.bubble} {
         border-radius: ${borderRadius}px;
         box-shadow: ${boxShadow[0]};
-        background-color: ${background.card};
+        background-color: ${background.content};
         display: flex;
         gap: ${spacing[4]}px;
         padding: ${spacing[5]}px;
 
         .${exports.classes.icon} {
-            color: ${colors.warning};
+            color: ${colors.warning.main};
             font-size: 1.2em;
         }
 
@@ -57,5 +57,5 @@ exports.style = (0, utils_1.defineCss)(({ boxShadow, borderRadius, background, s
         }
     }
 
-    ${(0, popper_style_1.popperArrowStyle)(background.card)}
+    ${(0, popper_style_1.popperArrowStyle)(background.content)}
 `);

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

@@ -1,28 +1,26 @@
 import React, { ReactNode, Ref } from 'react';
 import { ColorPropsValue, Size } from '../../../types';
-export interface ButtonProps extends Omit<JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
+export interface ButtonProps extends Omit<React.JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
     ref?: Ref<HTMLButtonElement>;
     color?: ColorPropsValue;
-    /** @default "square" */
+    /** 默认为`"square"` */
     shape?: 'square' | 'circular' | 'rounded';
     size?: Size;
-    /** @default "filled" */
-    variant?: 'filled' | 'outlined' | 'dashed' | 'ghost' | 'text' | 'plain';
-    /** @default "horizontal" */
+    /** 默认为`"filled"` */
+    variant?: 'flatted' | 'filled' | 'outlined' | 'dashed' | 'ghost' | 'text' | 'plain';
+    /** 默认为`"horizontal"` */
     orientation?: 'horizontal' | 'vertical';
     prefix?: ReactNode;
     suffix?: ReactNode;
     loading?: boolean;
     readOnly?: boolean;
     /**
-     * prefix字段的别名
-     * @alias {@link prefix}
+     * @alias {@link ButtonProps.prefix}
      */
     icon?: ReactNode;
     /**
-     * children字段的别名
-     * @alias {@link children}
+     * @alias {@link ButtonProps.children}
      */
     label?: ReactNode;
 }
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Button({ color, shape, size, variant, orientation, prefix, suffix, loading, readOnly, icon, label, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/button/button.js

@@ -1,16 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
+exports.Button = Button;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const app_1 = require("../app");
+const theme_1 = require("../theme");
 const utils_1 = require("../../utils");
 const utils_2 = require("../../utils");
-const loadingIndicator_1 = require("../loadingIndicator/loadingIndicator");
+const loadingIndicator_1 = require("../loadingIndicator");
 const button_style_1 = require("./button.style");
 const transitionBase_1 = require("../transitionBase");
-exports.Button = (0, react_1.forwardRef)(({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }, ref) => {
-    const theme = (0, app_1.useTheme)();
+function Button({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) {
+    const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
     const showRipple = (0, utils_1.useTouchRipple)(color);
     const onPointerUp = (e) => {
@@ -18,7 +17,7 @@ exports.Button = (0, react_1.forwardRef)(({ color = 'primary', shape = 'square',
         if (!props.disabled
             && !loading
             && !readOnly
-            && { filled: true, outlined: true, dashed: true }[variant]) {
+            && { flatted: true, filled: true, outlined: true, dashed: true }[variant]) {
             showRipple(e.currentTarget);
         }
     };
@@ -27,11 +26,11 @@ exports.Button = (0, react_1.forwardRef)(({ color = 'primary', shape = 'square',
     };
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
-    return ((0, jsx_runtime_1.jsxs)("button", { ...props, ref: ref, css: (0, button_style_1.useStyle)({ color }), className: (0, utils_2.classnames)(button_style_1.classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
+    return ((0, jsx_runtime_1.jsxs)("button", { ...props, css: (0, button_style_1.useStyle)({ color }), className: (0, utils_2.classnames)(button_style_1.classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
                 ? actualPrefix
                     ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
                     : (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { orientation: "horizontal", in: true, children: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
                 : actualPrefix, !!actualChildren &&
                 (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.content, children: actualChildren }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.suffix, children: suffix })] }));
-});
+}

package/dist/cjs/components/button/button.style.b.d.ts

@@ -0,0 +1,11 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    content: string;
+    prefix: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;