@canlooks/can-ui 0.0.24 → 0.0.26

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

@@ -7,6 +7,9 @@ export function useBoundaryContext() {
 }
 export class Boundary extends Component {
     static ErrorBoundary = ErrorBoundary;
+    static defaultProps = {
+        renderError: _jsx(ErrorBoundary, {})
+    };
     static getDerivedStateFromError(error) {
         return { error };
     }

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

@@ -1,11 +1,15 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } 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(({ error, reload, ...props }) => {
+import { Icon } from '../..';
+import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
+const placeholderSlots = {
+    description: 'pre'
+};
+export const ErrorBoundary = memo(({ error, reload, reloadable, ...props }) => {
     const renderDescriptions = () => {
         if (error instanceof Error) {
             return error.stack;
@@ -17,5 +21,6 @@ export const ErrorBoundary = memo(({ error, reload, ...props }) => {
             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, css: style, className: classnames(classes.root, props.className) }));
+    return (_jsx(Placeholder, { status: "error", description: renderDescriptions(), slots: placeholderSlots, extra: reloadable &&
+            _jsx(Button, { variant: "outlined", color: "text", prefix: _jsx(Icon, { icon: faRotateRight }), onClick: reload, children: "\u91CD\u65B0\u52A0\u8F7D" }), ...props, css: style, className: clsx(classes.root, props.className) }));
 });

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement, memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes, style } from './breadcrumb.style';
 import { Button } from '../button';
 import { useTheme } from '../theme';
@@ -11,7 +11,7 @@ export const Breadcrumb = memo(({ separator = '/', readOnly, items, ...props })
             return items.flatMap(({ icon, label, ...p }, i) => {
                 const isLast = i === items.length - 1;
                 return [
-                    _jsx(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),
+                    _jsx(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 ? [] : [
                         _jsx("span", { className: classes.separator, children: separator }, `${classes.separator}_${i}`)
                     ]
@@ -38,6 +38,6 @@ export const Breadcrumb = memo(({ separator = '/', readOnly, items, ...props })
             return ret;
         });
     };
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), children: renderItems() }));
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), children: renderItems() }));
 });
 Breadcrumb.Item = Button;

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Popper } from '../popper';
 import { classes, style } from './bubble.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 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, 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: clsx(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

@@ -6,7 +6,7 @@ export const classes = defineClasses('bubble', [
     'content'
 ]);
 export const style = defineCss(({ background, boxShadow, borderRadius }) => css `
-    z-index: ${zIndex.dropdown};
+    z-index: ${zIndex.popper};
 
     .${classes.content} {
         background-color: ${background.content};

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Popper } from '../popper';
 import { classes, style } from './bubbleConfirm.style';
-import { classnames, useControlled, useLoading } from '../../utils';
-import { QuestionCircleFilled } from '@ant-design/icons';
+import { clsx, useControlled, useLoading } from '../../utils';
 import { Button } from '../button';
 import { useTheme } from '../theme';
-export function BubbleConfirm({ icon = _jsx(QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }) {
+import { Icon } from '../..';
+import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons/faCircleQuestion';
+export function BubbleConfirm({ icon = _jsx(Icon, { icon: faCircleQuestion }), 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);
@@ -17,6 +18,6 @@ export function BubbleConfirm({ icon = _jsx(QuestionCircleFilled, {}), title, fo
         await onConfirm?.(e);
         _setInnerOpen(false);
     }, loading);
-    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 ??
+    return (_jsx(Popper, { trigger: "click", ...props, css: style, className: clsx(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

@@ -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/esm/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/esm/components/button/button.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useTheme } from '../theme';
 import { useTouchRipple } from '../../utils';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { LoadingIndicator } from '../loadingIndicator';
 import { classes, useStyle } from './button.style';
 import { Collapse } from '../transitionBase';
-export function Button({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) {
+export const Button = ({ component: Component = 'button', color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
     const showRipple = useTouchRipple(color);
@@ -23,11 +23,11 @@ export function Button({ color = 'primary', shape = 'square', size, variant = 'f
     };
     const actualPrefix = prefix ?? icon;
     const actualChildren = label ?? props.children;
-    return (_jsxs("button", { ...props, css: useStyle({ color }), className: classnames(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 (_jsxs(Component, { ...props, css: useStyle({ color: color || 'primary' }), className: clsx(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
                     ? _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
                     : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
                 : actualPrefix, !!actualChildren &&
                 _jsx("div", { className: classes.content, children: actualChildren }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
-}
+};

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

@@ -30,7 +30,7 @@ export 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/esm/components/card/card.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { classes, style } from './card.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 import { Flex } from '../flex';
 export function Card({ flexable, bordered, elevation, borderRadius, ...props }) {
     const theme = useTheme();
     borderRadius ??= theme.borderRadius;
     elevation ??= theme.mode === 'light' ? 0 : 2;
-    return (_jsx(Flex, { direction: "column", ...props, css: style, className: classnames(classes.root, props.className), style: {
+    return (_jsx(Flex, { direction: "column", ...props, css: style, className: clsx(classes.root, props.className), style: {
             display: flexable ? 'flex' : void 0,
             borderRadius,
             ...props.style

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { SearchOutlined, CaretDownOutlined } from '@ant-design/icons';
 import { createContext, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
-import { useControlled, useLoading, useKeyboard, joinNodes, classnames, cloneRef, toArray } from '../../utils';
+import { useControlled, useLoading, useKeyboard, joinNodes, clsx, cloneRef, toArray } from '../../utils';
 import { Input } from '../input';
 import { InputBase } from '../inputBase';
 import { Popper } from '../popper';
@@ -10,11 +9,14 @@ import { classes, cascadePopperStyle, style } from './cascade.style';
 import { CascadePanel } from './cascadePanel';
 import { SearchResult } from './searchResult';
 import { useSelection } from '../selectionContext';
+import { Icon } from '../..';
+import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass';
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
 const CascadeContext = createContext({});
 export function useCascadeContext() {
     return useContext(CascadeContext);
 }
-export const Cascade = 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', 
+export const Cascade = 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 }) => {
     /**
@@ -120,7 +122,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) {
@@ -190,7 +192,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         }
     };
     return (_jsx(Popper, { css: cascadePopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled, content: _jsxs("div", { children: [searchable &&
-                    _jsx(Input, { prefix: _jsx(SearchOutlined, {}), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: classnames(classes.searchInput, searchInputProps?.className), onChange: e => {
+                    _jsx(Input, { prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: clsx(classes.searchInput, searchInputProps?.className), onChange: e => {
                             searchInputProps?.onChange?.(e);
                             setInnerSearchValue(e.target.value);
                         } }), deferredSearchValue
@@ -201,7 +203,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
                                 selectionStatus, optionsMap,
                                 openedPanels, onOptionClick, onCheckboxClick,
                                 verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
-                            }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
+                            }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder })
-                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(CaretDownOutlined, {}) })] }) }) }));
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(Icon, { icon: faCaretDown }) })] }) }) }));
 });

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

@@ -34,7 +34,7 @@ export const style = defineCss(({ spacing, text, easing }) => css `
 
     .${classes.arrow} {
         color: ${text.placeholder};
-        transition: transform .2s ${easing.easeOut};
+        transition: transform .25s ${easing.easeOut};
 
         &[data-open=true] {
             transform: rotate(180deg);

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { RightOutlined } from '@ant-design/icons';
 import { Loading } from '../loading';
 import { LoadingIndicator } from '../loadingIndicator';
 import { MenuItem } from '../menuItem';
@@ -8,6 +7,8 @@ import { classes } from './cascade.style';
 import { Collapse } from '../transitionBase';
 import { useCascadeContext } from './cascade';
 import { isUnset } from '../../utils';
+import { Icon } from '../..';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 export function CascadePanel({ options, index = 0 }) {
     const { innerLoading, loadingOption, multiple, showCheckbox, primaryKey, labelKey, childrenKey, pathifiedValue, selectionStatus, optionsMap, openedPanels, onOptionClick, onCheckboxClick, verticalIndex, setVerticalIndex, horizontalIndex } = useCascadeContext();
     const onPointerEnter = () => {
@@ -48,12 +49,12 @@ export 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
                     ? _jsx(LoadingIndicator, {})
-                    : hasChildren && _jsx(RightOutlined, {}), children: null }, optVal));
+                    : hasChildren && _jsx(Icon, { icon: faChevronRight }), children: null }, optVal));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];
     return (_jsxs(_Fragment, { children: [index === 0
-                ? _jsx(Loading, { className: classes.panel, loading: innerLoading && typeof loadingOption === 'undefined', children: renderOptions() })
+                ? _jsx(Loading, { className: classes.panel, open: innerLoading && typeof loadingOption === 'undefined', children: renderOptions() })
                 : _jsx("div", { className: classes.panel, children: renderOptions() }), !!nextOptions?.length &&
                 _jsx(Collapse, { className: classes.panelContainer, in: true, orientation: "horizontal", children: _jsx(CascadePanel, { options: nextOptions, index: index + 1 }) })] }));
 }

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

package/dist/esm/components/checkboxBase/checkboxBase.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
-import { classnames, cloneRef, useControlled, useTouchRipple } from '../../utils';
+import { clsx, cloneRef, useControlled, useTouchRipple } from '../../utils';
 import { classes, useStyle } from './checkboxBase.style';
-import { CheckOutlined } from '@ant-design/icons';
 import { useCheckboxBaseGroupContext } from '../checkboxBaseGroup';
-export const CheckboxBase = memo(({ inputProps, inputRef, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
+import { Icon } from '../..';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value, indeterminate, disabled, readOnly, defaultChecked = false, checked, onChange, ...props }) => {
     const context = useCheckboxBaseGroupContext();
     size ??= context.size || 'medium';
-    color ??= context.color || 'primary';
+    color ||= context.color || 'primary';
     if (_type === 'radio') {
         // "radio"不支持indeterminate
         indeterminate = false;
@@ -32,14 +33,14 @@ export const CheckboxBase = memo(({ inputProps, inputRef, _type, size, color, la
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
-    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
+    return (_jsxs("div", { ...props, css: useStyle({ color }), className: clsx(classes.root, props.className), onClick: clickHandler, "data-size": size, "data-checked": innerChecked.current && !indeterminate, "data-disabled": disabled, children: [_type === 'checkbox'
                 ? _jsx("div", { ref: checkboxRef, className: classes.checkbox, children: indeterminate
                         ? _jsx("div", { className: classes.indeterminate })
                         : innerChecked.current
-                            ? _jsx(CheckOutlined, { className: classes.icon })
+                            ? _jsx(Icon, { icon: faCheck, className: classes.icon })
                             : null })
                 : _jsx("div", { ref: checkboxRef, className: `${classes.checkbox} ${classes.radio}`, children: innerChecked.current
                         ? _jsx("div", { className: classes.radioChecked })
                         : null }), !!label &&
-                _jsx("div", { className: classes.label, children: label }), _jsx("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: cloneRef(innerInputRef, inputRef), className: classnames(classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
+                _jsx("div", { className: classes.label, children: label }), _jsx("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: cloneRef(innerInputRef, inputProps?.ref), className: clsx(classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
 });

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

@@ -20,6 +20,7 @@ export function useStyle({ color }) {
             gap: 6px;
             cursor: pointer;
             position: relative;
+            -webkit-tap-highlight-color: transparent;
     
             .${classes.checkbox} {
                 min-width: 16px;
@@ -29,13 +30,13 @@ export function useStyle({ color }) {
                 justify-content: center;
                 border: 1px solid ${gray(.7)};
                 border-radius: 4px;
-                transition: border-color .2s ${easing.easeOut};
+                transition: border-color .25s ${easing.easeOut};
                 position: relative;
     
                 .${classes.icon} {
                     font-size: .9em;
                     color: #ffffff;
-                    animation: ${iconAnim} .2s ${easing.swing};
+                    animation: ${iconAnim} .25s ${easing.swing};
                     position: absolute;
                 }
     
@@ -43,7 +44,7 @@ export function useStyle({ color }) {
                     width: 60%;
                     height: 4px;
                     background-color: ${colorValue};
-                    animation: ${iconAnim} .2s ${easing.swing};
+                    animation: ${iconAnim} .25s ${easing.swing};
                     position: absolute;
                 }
     
@@ -58,14 +59,14 @@ export function useStyle({ color }) {
                 .${classes.radioChecked} {
                     border-radius: inherit;
                     background-color: ${colorValue};
-                    animation: ${iconAnim} .2s ${easing.swing};
+                    animation: ${iconAnim} .25s ${easing.swing};
                     position: absolute;
                     inset: 3px;
                 }
             }
     
             .${classes.label} {
-                transition: color .2s ${easing.easeOut};
+                transition: color .25s ${easing.easeOut};
             }
     
             &[data-size=small] {
@@ -152,7 +153,7 @@ export function useStyle({ color }) {
                 pointer-events: none;
             }
     
-            &:has(\.${classes.input}:focus) {
+            &:has(.${classes.input}:focus) {
                 .${classes.checkbox} {
                     outline: 3px solid ${lighter};
                     outline-offset: 1px;;

package/dist/esm/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, useContext } from 'react';
 import { Flex } from '../flex';
-import { classnames, isSelected } from '../../utils';
+import { clsx, isSelected } from '../../utils';
 import { classes } from './checkboxBaseGroup.style';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
@@ -19,7 +19,7 @@ export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', m
             return items.map((p, i) => {
                 const Component = multiple ? Checkbox : Radio;
                 const itemValue = p[primaryKey];
-                return (_jsx(Component, { inputProps: p.inputProps, inputRef: p.inputRef, label: p.label, indeterminate: p.indeterminate, disabled: p.disabled, readOnly: p.readOnly, size: p.size ?? size, color: p.color ?? color, checked: isSelected(itemValue, innerValue.current), onChange: e => {
+                return (_jsx(Component, { inputProps: p.inputProps, label: p.label, indeterminate: p.indeterminate, disabled: p.disabled, readOnly: p.readOnly, size: p.size ?? size, color: p.color ?? color, checked: isSelected(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
                     } }, p.key ?? itemValue ?? i));
@@ -34,7 +34,7 @@ export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', m
             return cloneElement(c, {
                 size: props.size ?? size,
                 color: props.color ?? color,
-                checked: isSelected(itemValue, innerValue.current),
+                checked: isSelected(itemValue, innerValue),
                 onChange: e => {
                     props.onChange?.(e);
                     toggleSelected(itemValue);
@@ -42,5 +42,5 @@ export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', m
             });
         });
     };
-    return (_jsx(Flex, { gap: spacing[8], ...props, className: classnames(classes.root, props.className), children: renderItems() }));
+    return (_jsx(Flex, { gap: spacing[8], ...props, className: clsx(classes.root, props.className), children: renderItems() }));
 });

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

@@ -1,13 +1,13 @@
 import { ReactElement } from 'react';
-import { DIVProps, DefineElement } from '../../types';
-export interface ClickAwayProps extends DIVProps {
+import { DivProps, DefineElement } from '../../types';
+export interface ClickAwayProps extends DivProps {
     container?: DefineElement<Element | Window>;
     /** 传入addEventListener的事件类型，默认为`'click'` */
     eventType?: string;
     onClickAway?(e: MouseEvent): void;
     disabled?: boolean;
-    children?: ReactElement;
+    children?: ReactElement<any>;
     /** 用于参考的目标元素，若为数组，需要点击数组外的元素才会触发clickAway */
     targets?: () => Element | null | (Element | null)[];
 }
-export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+export declare function ClickAway({ ref, container, eventType, onClickAway, disabled, children, targets, ...props }: ClickAwayProps): ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;

package/dist/esm/components/clickAway/clickAway.js

@@ -26,7 +26,7 @@ export function ClickAway({ ref, container = self, eventType = 'click', onClickA
             containerEl.removeEventListener(standardEventType, onClick);
         };
     }, [disabled]);
-    const clonedRef = useCallback(cloneRef(children?.ref, ref, childRef), [children?.ref, ref]);
+    const clonedRef = useCallback(cloneRef(children?.props.ref, ref, childRef), [children?.props.ref, ref]);
     return !disabled && isValidElement(children)
         ? cloneElement(children, {
             ...props,

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

@@ -1,21 +1,20 @@
-import React, { ReactNode, Ref } from 'react';
+import { ReactNode, Ref, JSX } from 'react';
 import { PopperProps, PopperRef } from '../popper';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
-import Color from 'color';
-export interface ColorPickerProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+import { ColorPropsValue, DivProps, Size } from '../../types';
+import { ColorInstance } from 'color';
+export interface ColorPickerProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
+    inputProps?: JSX.IntrinsicElements['input'];
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     size?: Size;
     shape?: 'square' | 'circular';
     label?: ReactNode;
-    presets?: (ColorPropsValue | Color)[];
+    presets?: (ColorPropsValue | ColorInstance)[];
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
-    defaultValue?: Color;
-    value?: Color;
-    onChange?(color: Color): void;
+    defaultValue?: ColorInstance;
+    value?: ColorInstance;
+    onChange?(color: ColorInstance): void;
 }
-export declare const ColorPicker: React.MemoExoticComponent<({ inputProps, inputRef, popperProps, popperRef, size, shape, label, presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const ColorPicker: import("react").MemoExoticComponent<({ inputProps, popperProps, popperRef, size, shape, label, presets, defaultOpen, open, onOpenChange, defaultValue, value, onChange, ...props }: ColorPickerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;