@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -12,7 +12,7 @@ function useAvatarStyle(props) {
     const { mode, size, gray } = (0, theme_1.useTheme)();
     const _size = props.size ?? size;
     return (0, react_1.useMemo)(() => ({
-        color: props.color ?? gray(mode === 'light' ? .2 : .3),
+        color: props.color || gray(mode === 'light' ? .2 : .3),
         size: {
             small: 24,
             medium: 32,
@@ -20,13 +20,13 @@ function useAvatarStyle(props) {
         }[_size] || _size
     }), [props.color, mode, _size]);
 }
-exports.Avatar = (0, react_1.memo)(({ color, size, shape = 'circular', src, imgProps, imgRef, ...props }) => {
+exports.Avatar = (0, react_1.memo)(({ color, size, shape = 'circular', src, imgProps, ...props }) => {
     const style = useAvatarStyle({ color, size });
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, avatar_style_1.useStyle)({ color: style.color }), className: (0, utils_1.classnames)(avatar_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: (0, avatar_style_1.useStyle)({ color: style.color }), className: (0, utils_1.clsx)(avatar_style_1.classes.root, props.className), style: {
             width: style.size,
             ...props.style
         }, "data-shape": shape, children: src
-            ? (0, jsx_runtime_1.jsx)("img", { src: src, alt: "", ...imgProps, ref: imgRef, className: (0, utils_1.classnames)(avatar_style_1.classes.img, imgProps?.className) })
+            ? (0, jsx_runtime_1.jsx)("img", { src: src, alt: "", ...imgProps, className: (0, utils_1.clsx)(avatar_style_1.classes.img, imgProps?.className) })
             : props.children }));
 });
 exports.Avatar.Group = avatarGroup_1.AvatarGroup;

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

@@ -11,4 +11,4 @@ export interface AvatarGroupProps extends Omit<AvatarProps, 'src'> {
     /** 超过最大限制时，渲染的额外头像 */
     renderSurplus?(surplus: number): ReactNode;
 }
-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>;
+export declare const AvatarGroup: import("react").MemoExoticComponent<({ color, size, shape, imgProps, items, hoverable, max, total, renderSurplus, ...props }: AvatarGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -7,19 +7,18 @@ const react_2 = require("react");
 const utils_1 = require("../../utils");
 const avatarGroup_style_1 = require("./avatarGroup.style");
 const avatar_1 = require("./avatar");
-exports.AvatarGroup = (0, react_2.memo)(({ color, size, shape = 'circular', imgProps, imgRef, items, hoverable = true, max = 5, total, renderSurplus, ...props }) => {
+exports.AvatarGroup = (0, react_2.memo)(({ color, size, shape = 'circular', imgProps, items, hoverable = true, max = 5, total, renderSurplus, ...props }) => {
     const itemStyle = (0, avatar_1.useAvatarStyle)({ color, size });
     const commonProps = {
         ...itemStyle,
         shape,
-        imgProps,
-        imgRef
+        imgProps
     };
     total ??= items?.length ?? react_2.Children.count(props.children);
     const isSurplus = total > max;
     const renderItems = () => {
         if (items?.length) {
-            return items.slice(0, isSurplus ? max - 1 : max).reverse().map((p, i) => (0, react_1.createElement)(avatar_1.Avatar, { ...commonProps, key: p.key ?? i, color: p.color, size: p.size, shape: p.shape, src: p.src, imgProps: p.imgProps, imgRef: p.imgRef }));
+            return items.slice(0, isSurplus ? max - 1 : max).reverse().map((p, i) => (0, react_1.createElement)(avatar_1.Avatar, { ...commonProps, key: p.key ?? i, color: p.color, size: p.size, shape: p.shape, src: p.src, imgProps: p.imgProps }, p.children));
         }
         return react_2.Children.toArray(props.children).slice(0, isSurplus ? max - 1 : max).reverse().map(child => {
             return (0, react_2.isValidElement)(child)
@@ -40,5 +39,5 @@ exports.AvatarGroup = (0, react_2.memo)(({ color, size, shape = 'circular', imgP
         }
         return (0, jsx_runtime_1.jsxs)(avatar_1.Avatar, { children: ["+", surplus] });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: avatarGroup_style_1.style, className: (0, utils_1.classnames)(avatarGroup_style_1.classes.root), "data-hoverable": hoverable, children: (0, jsx_runtime_1.jsxs)("div", { className: avatarGroup_style_1.classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: avatarGroup_style_1.style, className: (0, utils_1.clsx)(avatarGroup_style_1.classes.root), "data-hoverable": hoverable, children: (0, jsx_runtime_1.jsxs)("div", { className: avatarGroup_style_1.classes.wrap, children: [renderSurplusFn(), renderItems()] }) }));
 });

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

@@ -33,7 +33,7 @@ exports.style = (0, utils_1.defineCss)(({ mode, easing }) => (0, react_1.css) `
         border: 1px solid ${mode === 'light' ? '#ffffff' : '#999999'};
     
         &:not(:last-of-type) {
-            transition: margin .2s ${easing.easeOut};
+            transition: margin .25s ${easing.easeOut};
             margin-left: -6px;
         }
     }

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

@@ -6,5 +6,5 @@ const utils_1 = require("../../utils");
 const transitionBase_1 = require("../transitionBase");
 const backdrop_style_1 = require("./backdrop.style");
 function Backdrop({ open, variant = 'dark', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { ...props, css: (0, backdrop_style_1.useStyle)({ variant }), in: open, className: (0, utils_1.classnames)(backdrop_style_1.classes.root, props.className) }));
+    return ((0, jsx_runtime_1.jsx)(transitionBase_1.Fade, { ...props, css: (0, backdrop_style_1.useStyle)({ variant }), in: open, className: (0, utils_1.clsx)(backdrop_style_1.classes.root, props.className) }));
 }

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Placement } from '../../types';
-export interface BadgeProps extends DIVProps {
+import { ColorPropsValue, DivProps, Placement } from '../../types';
+export interface BadgeProps extends DivProps {
     color?: ColorPropsValue;
     placement?: Placement;
     variant?: 'dot' | 'standard';

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

@@ -53,7 +53,7 @@ function Badge({ color = 'error', placement = 'topRight', variant = 'standard',
     if (typeof offsetY === 'number') {
         offsetY += 'px';
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, badge_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(badge_style_1.classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, badge_style_1.useStyle)({ color: color || 'error' }), className: (0, utils_1.clsx)(badge_style_1.classes.root, props.className), "data-variant": variant, "data-zero": !showZero && !renderedCount, children: [!!props.children &&
                 (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.children, children: props.children }), (0, jsx_runtime_1.jsx)("div", { className: badge_style_1.classes.badge, style: {
                     ...badgeStyle,
                     transform: `translate(${offsetX}, ${offsetY})`

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

@@ -24,7 +24,7 @@ function useStyle({ color }) {
                 font-size: ${13 / 14}em;
                 top: 0;
                 left: 0;
-                transition: transform .2s ${easing.swing};
+                transition: transform .25s ${easing.swing};
             }
         }
 
@@ -57,7 +57,7 @@ function useStyle({ color }) {
         &[data-zero=true] {
             .${exports.classes.badgeWrap} {
                 transform: scale(0);
-                transition: transform .2s ${easing.easeOut};
+                transition: transform .25s ${easing.easeOut};
             }
 
             &:has(.${exports.classes.children}) {

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

@@ -1,8 +1,8 @@
 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'> {
+export interface BottomNavigationProps<I extends BottomNavigationItemType> extends Omit<DivProps, 'defaultValue' | 'onChange'> {
     items?: I[];
     /** 未激活状态下是否显示label，items数量小于等于3时默认为`true`，否则为`false` */
     showLabelInactive?: boolean;

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

@@ -34,5 +34,5 @@ exports.BottomNavigation = (0, react_1.memo)(({ items, showLabelInactive, primar
             return c;
         });
     };
-    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() }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: bottomNavigation_style_1.style, className: (0, utils_1.clsx)(bottomNavigation_style_1.classes.root, props.className), children: renderItems() }));
 });

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

@@ -26,9 +26,11 @@ exports.style = (0, utils_1.defineCss)(({ background, text, easing, colors }) =>
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            gap: 4px;
             cursor: pointer;
             color: ${text.secondary};
-            transition: background-color .2s ${easing.easeOut};
+            transition: background-color .25s ${easing.easeOut};
+            -webkit-tap-highlight-color: transparent;
             
             &:hover {
                 &:not([data-active=true]) {
@@ -63,7 +65,7 @@ exports.style = (0, utils_1.defineCss)(({ background, text, easing, colors }) =>
 
             .${exports.classes.label} {
                 transition-property: font-size, transform, height;
-                transition-duration: .2s;
+                transition-duration: .25s;
                 transition-timing-function: ${easing.easeOut};
             }
 

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { DIVProps, Id } from '../../types';
-export interface BottomNavigationItemProps extends DIVProps {
+import { DivProps, Id } from '../../types';
+export interface BottomNavigationItemProps extends DivProps {
     value?: Id;
     icon?: ReactNode;
     label?: ReactNode;

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const bottomNavigation_style_1 = require("./bottomNavigation.style");
 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 &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(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

@@ -23,7 +23,8 @@ 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<({ error, reload, ...props }: import("./errorBoundary").ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+    static ErrorBoundary: import("react").MemoExoticComponent<({ error, reload, reloadable, ...props }: import("./errorBoundary").ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+    static defaultProps: BoundaryProps;
     static getDerivedStateFromError(error: any): {
         error: any;
     };

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

@@ -11,6 +11,9 @@ function useBoundaryContext() {
 }
 class Boundary extends react_1.Component {
     static ErrorBoundary = errorBoundary_1.ErrorBoundary;
+    static defaultProps = {
+        renderError: (0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, {})
+    };
     static getDerivedStateFromError(error) {
         return { error };
     }

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

@@ -2,5 +2,6 @@ import { PlaceholderProps } from '../placeholder';
 export interface ErrorBoundaryProps extends PlaceholderProps {
     error?: any | null;
     reload?(): void;
+    reloadable?: boolean;
 }
-export declare const ErrorBoundary: import("react").MemoExoticComponent<({ error, reload, ...props }: ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const ErrorBoundary: import("react").MemoExoticComponent<({ error, reload, reloadable, ...props }: ErrorBoundaryProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -7,8 +7,12 @@ const utils_1 = require("../../utils");
 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)(({ error, reload, ...props }) => {
+const __1 = require("../..");
+const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
+const placeholderSlots = {
+    description: 'pre'
+};
+exports.ErrorBoundary = (0, react_1.memo)(({ error, reload, reloadable, ...props }) => {
     const renderDescriptions = () => {
         if (error instanceof Error) {
             return error.stack;
@@ -20,5 +24,6 @@ exports.ErrorBoundary = (0, react_1.memo)(({ error, reload, ...props }) => {
             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, 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(), slots: placeholderSlots, extra: reloadable &&
+            (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", color: "text", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateRight_1.faRotateRight }), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: errorBoundary_style_1.style, className: (0, utils_1.clsx)(errorBoundary_style_1.classes.root, props.className) }));
 });

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

@@ -1,14 +1,12 @@
 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 {
-    /**
-     * @alias ButtonProps.prefix
-     */
+    /** @alias ButtonProps.prefix */
     icon?: ReactNode;
     label?: ReactNode;
 }
-export interface BreadcrumbProps extends DIVProps {
+export interface BreadcrumbProps extends DivProps {
     separator?: ReactNode;
     readOnly?: boolean;
     items?: BreadcrumbItemProps[];

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

@@ -14,7 +14,7 @@ exports.Breadcrumb = (0, react_1.memo)(({ separator = '/', readOnly, items, ...p
             return items.flatMap(({ icon, label, ...p }, i) => {
                 const isLast = i === items.length - 1;
                 return [
-                    (0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, size: p.size, suffix: p.suffix, loading: p.loading, label: p.label, variant: p.variant ?? 'plain', color: p.color ?? (isLast ? text.primary : text.disabled), readOnly: p.readOnly ?? (isLast || readOnly), prefix: p.prefix ?? icon, children: p.children }, p.key ?? i),
+                    (0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, size: p.size, suffix: p.suffix, loading: p.loading, label: label, variant: p.variant ?? 'plain', color: p.color ?? (isLast ? text.primary : text.disabled), readOnly: p.readOnly ?? (isLast || readOnly), prefix: p.prefix ?? icon, children: p.children }, p.key ?? i),
                     ...isLast ? [] : [
                         (0, jsx_runtime_1.jsx)("span", { className: breadcrumb_style_1.classes.separator, children: separator }, `${breadcrumb_style_1.classes.separator}_${i}`)
                     ]
@@ -41,6 +41,6 @@ exports.Breadcrumb = (0, react_1.memo)(({ separator = '/', readOnly, items, ...p
             return ret;
         });
     };
-    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() }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: breadcrumb_style_1.style, className: (0, utils_1.clsx)(breadcrumb_style_1.classes.root, props.className), children: renderItems() }));
 });
 exports.Breadcrumb.Item = button_1.Button;

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

@@ -10,5 +10,5 @@ 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, 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.clsx)(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

@@ -9,7 +9,7 @@ exports.classes = (0, utils_1.defineClasses)('bubble', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `
-    z-index: ${theme_1.zIndex.dropdown};
+    z-index: ${theme_1.zIndex.popper};
 
     .${exports.classes.content} {
         background-color: ${background.content};

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

@@ -5,10 +5,11 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 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 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 __1 = require("../..");
+const faCircleQuestion_1 = require("@fortawesome/free-solid-svg-icons/faCircleQuestion");
+function BubbleConfirm({ icon = (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleQuestion_1.faCircleQuestion }), 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);
@@ -20,6 +21,6 @@ function BubbleConfirm({ icon = (0, jsx_runtime_1.jsx)(icons_1.QuestionCircleFil
         await onConfirm?.(e);
         _setInnerOpen(false);
     }, loading);
-    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 ??
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { trigger: "click", ...props, css: bubbleConfirm_style_1.style, className: (0, utils_1.clsx)(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

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

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

@@ -1,7 +1,6 @@
-import React, { ReactNode, Ref } from 'react';
-import { ColorPropsValue, Size } from '../../types';
-export interface ButtonProps extends Omit<React.JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
-    ref?: Ref<HTMLButtonElement>;
+import { ElementType, ReactNode } from 'react';
+import { ColorPropsValue, OverridableComponent, OverridableProps, Size } from '../../types';
+export type ButtonOwnProps = {
     color?: ColorPropsValue;
     /** 默认为`"square"` */
     shape?: 'square' | 'circular' | 'rounded';
@@ -14,13 +13,10 @@ export interface ButtonProps extends Omit<React.JSX.IntrinsicElements['button'],
     suffix?: ReactNode;
     loading?: boolean;
     readOnly?: boolean;
-    /**
-     * @alias {@link ButtonProps.prefix}
-     */
+    /** @alias {@link prefix} */
     icon?: ReactNode;
-    /**
-     * @alias {@link ButtonProps.children}
-     */
+    /** @alias {@link ButtonProps.children} */
     label?: ReactNode;
-}
-export declare function Button({ color, shape, size, variant, orientation, prefix, suffix, loading, readOnly, icon, label, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export type ButtonProps<C extends ElementType = 'button'> = OverridableProps<ButtonOwnProps, C>;
+export declare const Button: OverridableComponent<ButtonProps, 'button'>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = Button;
+exports.Button = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const theme_1 = require("../theme");
 const utils_1 = require("../../utils");
@@ -8,7 +8,7 @@ const utils_2 = require("../../utils");
 const loadingIndicator_1 = require("../loadingIndicator");
 const button_style_1 = require("./button.style");
 const transitionBase_1 = require("../transitionBase");
-function Button({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) {
+const Button = ({ component: Component = '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);
@@ -26,11 +26,12 @@ function Button({ color = 'primary', shape = 'square', size, variant = 'filled',
     };
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
-    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
+    return ((0, jsx_runtime_1.jsxs)(Component, { ...props, css: (0, button_style_1.useStyle)({ color: color || 'primary' }), className: (0, utils_2.clsx)(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 })] }));
-}
+};
+exports.Button = Button;

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

@@ -35,7 +35,7 @@ function useStyle({ color }) {
             align-items: center;
             justify-content: center;
             transition-property: outline-width, background-color, filter, color, border-color;
-            transition-duration: .2s;
+            transition-duration: .25s;
             transition-timing-function: ${easing.easeOut};
 
             &[data-orientation=vertical] {

package/dist/cjs/components/card/card.js

@@ -10,7 +10,7 @@ function Card({ flexable, bordered, elevation, borderRadius, ...props }) {
     const theme = (0, theme_1.useTheme)();
     borderRadius ??= theme.borderRadius;
     elevation ??= theme.mode === 'light' ? 0 : 2;
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { direction: "column", ...props, css: card_style_1.style, className: (0, utils_1.classnames)(card_style_1.classes.root, props.className), style: {
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { direction: "column", ...props, css: card_style_1.style, className: (0, utils_1.clsx)(card_style_1.classes.root, props.className), style: {
             display: flexable ? 'flex' : void 0,
             borderRadius,
             ...props.style

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

@@ -1,4 +1,4 @@
-import React, { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction, JSX } from 'react';
 import { InputProps } from '../input';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
@@ -7,8 +7,7 @@ import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
 import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
 export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<OptionsBaseSharedProps<O>, 'filterPredicate'>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** cascade内部由<input />实现 */
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: JSX.IntrinsicElements['input'];
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
@@ -50,7 +49,7 @@ type CascadeContext<O extends MenuOptionType<V>, V extends Id = Id> = {
     setVerticalIndex: Dispatch<SetStateAction<number>>;
     horizontalIndex: number;
 };
-declare const CascadeContext: React.Context<CascadeContext<any, Id>>;
+declare const CascadeContext: import("react").Context<CascadeContext<any, Id>>;
 export declare function useCascadeContext<O extends MenuOptionType<V>, V extends Id = Id>(): CascadeContext<O, V>;
 export declare const Cascade: <O extends MenuOptionType<V>, V extends Id = Id>(props: CascadeProps<O, V>) => ReactElement;
 export {};

package/dist/cjs/components/cascade/cascade.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cascade = void 0;
 exports.useCascadeContext = useCascadeContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const icons_1 = require("@ant-design/icons");
 const react_1 = require("react");
 const utils_1 = require("../../utils");
 const input_1 = require("../input");
@@ -14,11 +13,14 @@ const cascade_style_1 = require("./cascade.style");
 const cascadePanel_1 = require("./cascadePanel");
 const searchResult_1 = require("./searchResult");
 const selectionContext_1 = require("../selectionContext");
+const __1 = require("../..");
+const faMagnifyingGlass_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlass");
+const faCaretDown_1 = require("@fortawesome/free-solid-svg-icons/faCaretDown");
 const CascadeContext = (0, react_1.createContext)({});
 function useCascadeContext() {
     return (0, react_1.useContext)(CascadeContext);
 }
-exports.Cascade = (0, react_1.memo)(({ inputProps, inputRef, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue = [], value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
+exports.Cascade = (0, react_1.memo)(({ inputProps, defaultOpen = false, open, onOpenChange, children, loadOptions, multiple = false, showCheckbox = !!multiple, defaultValue = [], value, onChange, renderBackfill, searchable, defaultSearchValue = '', searchValue, onSearchChange, searchInputProps, popperProps, popperRef, clearable = !!multiple, integration = 'deepest', 
 // 共享属性，从OptionsBaseSharedProps继承
 loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'children', searchTokenKey = 'searchToken', ...props }) => {
     /**
@@ -124,7 +126,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         const optVal = option[primaryKey];
         const opened = openedPanels[index] === optVal;
         if (!opened) {
-            await innerLoadOptions(innerSearchValue.current, option);
+            loadOptions && await innerLoadOptions(innerSearchValue.current, option);
             toggleOpenedPanels(optVal, index);
         }
         if (!multiple || opened) {
@@ -194,7 +196,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         }
     };
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: cascade_style_1.cascadePopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled, content: (0, jsx_runtime_1.jsxs)("div", { children: [searchable &&
-                    (0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: (0, utils_1.classnames)(cascade_style_1.classes.searchInput, searchInputProps?.className), onChange: e => {
+                    (0, jsx_runtime_1.jsx)(input_1.Input, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlass_1.faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: (0, utils_1.clsx)(cascade_style_1.classes.searchInput, searchInputProps?.className), onChange: e => {
                             searchInputProps?.onChange?.(e);
                             setInnerSearchValue(e.target.value);
                         } }), deferredSearchValue
@@ -205,7 +207,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
                                 selectionStatus, optionsMap,
                                 openedPanels, onOptionClick, onCheckboxClick,
                                 verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
-                            }, children: (0, jsx_runtime_1.jsx)(cascadePanel_1.CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: cascade_style_1.style, className: (0, utils_1.classnames)(cascade_style_1.classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: cascade_style_1.classes.contentWrap, children: [!pathifiedValue.current?.length
+                            }, children: (0, jsx_runtime_1.jsx)(cascadePanel_1.CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: cascade_style_1.style, className: (0, utils_1.clsx)(cascade_style_1.classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: cascade_style_1.classes.contentWrap, children: [!pathifiedValue.current?.length
                         ? (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.placeholder, children: props.placeholder })
-                        : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.arrow, "data-open": innerOpen.current, children: (0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, {}) })] }) }) }));
+                        : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfill, children: renderBackfillFn() }), (0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref), "data-hidden": "true" }), (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.arrow, "data-open": innerOpen.current, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCaretDown_1.faCaretDown }) })] }) }) }));
 });

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

@@ -37,7 +37,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
 
     .${exports.classes.arrow} {
         color: ${text.placeholder};
-        transition: transform .2s ${easing.easeOut};
+        transition: transform .25s ${easing.easeOut};
 
         &[data-open=true] {
             transform: rotate(180deg);

package/dist/cjs/components/cascade/cascadePanel.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CascadePanel = CascadePanel;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const icons_1 = require("@ant-design/icons");
 const loading_1 = require("../loading");
 const loadingIndicator_1 = require("../loadingIndicator");
 const menuItem_1 = require("../menuItem");
@@ -11,6 +10,8 @@ const cascade_style_1 = require("./cascade.style");
 const transitionBase_1 = require("../transitionBase");
 const cascade_1 = require("./cascade");
 const utils_1 = require("../../utils");
+const __1 = require("../..");
+const faChevronRight_1 = require("@fortawesome/free-solid-svg-icons/faChevronRight");
 function CascadePanel({ options, index = 0 }) {
     const { innerLoading, loadingOption, multiple, showCheckbox, primaryKey, labelKey, childrenKey, pathifiedValue, selectionStatus, optionsMap, openedPanels, onOptionClick, onCheckboxClick, verticalIndex, setVerticalIndex, horizontalIndex } = (0, cascade_1.useCascadeContext)();
     const onPointerEnter = () => {
@@ -51,12 +52,12 @@ function CascadePanel({ options, index = 0 }) {
                     }
                 }, selected: isSelected(optVal) || (opened && hasChildren), focused: horizontalIndex === index && verticalIndex === i, label: opt[labelKey], onClick: () => onOptionClick(opt, index), onPointerEnter: onPointerEnter, suffix: innerLoading && loadingOption === optVal
                     ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {})
-                    : hasChildren && (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}), children: null }, optVal));
+                    : hasChildren && (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faChevronRight_1.faChevronRight }), children: null }, optVal));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [index === 0
-                ? (0, jsx_runtime_1.jsx)(loading_1.Loading, { className: cascade_style_1.classes.panel, loading: innerLoading && typeof loadingOption === 'undefined', children: renderOptions() })
+                ? (0, jsx_runtime_1.jsx)(loading_1.Loading, { className: cascade_style_1.classes.panel, open: innerLoading && typeof loadingOption === 'undefined', children: renderOptions() })
                 : (0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.panel, children: renderOptions() }), !!nextOptions?.length &&
                 (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { className: cascade_style_1.classes.panelContainer, in: true, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(CascadePanel, { options: nextOptions, index: index + 1 }) })] }));
 }

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

@@ -1,8 +1,7 @@
-import React, { ReactNode, Ref } from 'react';
-import { ColorPropsValue, DIVProps, Id, Size } from '../../types';
-export interface CheckboxBaseProps extends DIVProps {
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+import React, { ReactNode, JSX } from 'react';
+import { ColorPropsValue, DivProps, Id, Size } from '../../types';
+export interface CheckboxBaseProps extends DivProps {
+    inputProps?: JSX.IntrinsicElements['input'];
     /** @private 内部使用 */
     _type: 'checkbox' | 'radio';
     size?: Size;
@@ -16,4 +15,4 @@ export interface CheckboxBaseProps extends DIVProps {
     checked?: boolean;
     onChange?(e: React.ChangeEvent<HTMLInputElement>): void;
 }
-export declare const CheckboxBase: React.MemoExoticComponent<({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked, checked, onChange, ...props }: CheckboxBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const CheckboxBase: React.MemoExoticComponent<({ inputProps, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked, checked, onChange, ...props }: CheckboxBaseProps) => import("@emotion/react/jsx-runtime").JSX.Element>;