@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/esm/components/tag/tag.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes, useStyle } from './tag.style';
-import { classnames } from '../../utils';
-import { CloseOutlined } from '@ant-design/icons';
+import { clsx } from '../../utils';
+import { Icon } from '../..';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 export const Tag = memo(({ variant = 'outlined', color = 'text.secondary', shape = 'square', size = 'small', prefix, suffix, clickable, closable, onClose, ...props }) => {
     const closeHandler = (e) => {
         e.preventDefault();
         e.stopPropagation();
         onClose?.(e);
     };
-    return (_jsxs("div", { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
+    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'text.secondary' }), className: clsx(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: props.children }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix }), closable &&
-                _jsx("div", { className: classes.close, onClick: closeHandler, children: _jsx(CloseOutlined, {}) })] }));
+                _jsx("div", { className: classes.close, onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }));
 });

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

@@ -2,8 +2,8 @@ import { TagProps } from './tag';
 export declare const classes: {
     content: string;
     prefix: string;
-    close: string;
     suffix: string;
+    close: string;
 } & {
     root: string;
 };

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

@@ -76,6 +76,7 @@ export function useStyle({ color }) {
             &[data-variant=filled] {
                 .${classes.close} {
                     color: ${gray(.1)};
+                    -webkit-tap-highlight-color: transparent;
                     
                     &:hover {
                         color: ${gray(.2)};
@@ -90,7 +91,7 @@ export function useStyle({ color }) {
     
             &[data-clickable=true] {
                 cursor: pointer;
-                transition: filter .2s ${easing.easeOut};
+                transition: filter .25s ${easing.easeOut};
     
                 &:hover {
                     filter: brightness(1.2);

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

@@ -1,9 +1,9 @@
-import React, { Ref } from 'react';
+import { Ref, JSX } from 'react';
 import { InputBaseProps } from '../inputBase';
 export interface TextareaProps extends Omit<InputBaseProps<'textarea'>, 'children' | 'prefix' | 'suffix'> {
-    textareaProps?: React.JSX.IntrinsicElements['textarea'];
+    textareaProps?: JSX.IntrinsicElements['textarea'];
     textareaRef?: Ref<HTMLTextAreaElement>;
     rows?: number;
     fullWidth?: boolean;
 }
-export declare const Textarea: React.MemoExoticComponent<({ textareaProps, textareaRef, rows, fullWidth, ...props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Textarea: import("react").MemoExoticComponent<({ textareaProps, textareaRef, rows, fullWidth, ...props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/textarea/textarea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { InputBase } from '../inputBase';
 import { classes, style } from './textarea.style';
-import { classnames, cloneRef } from '../../utils';
+import { clsx, cloneRef } from '../../utils';
 export const Textarea = memo(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
-    return (_jsx(InputBase, { ...props, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => _jsx("textarea", { rows: rows, ...rest, ...textareaProps, ref: cloneRef(ref, textareaRef), className: classnames(classes.textarea, textareaProps?.className) }) }));
+    return (_jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => _jsx("textarea", { rows: rows, ...rest, ...textareaProps, ref: cloneRef(ref, textareaRef), className: clsx(classes.textarea, textareaProps?.className) }) }));
 });

package/dist/esm/components/theme/themeContext.d.ts

@@ -2,9 +2,8 @@ import { ReactNode } from 'react';
 import { Theme, ThemeDefinition } from './themeTypes';
 export declare const ThemeContext: import("react").Context<Theme>;
 export declare function useTheme(): Theme;
-export declare function useThemeProvider(theme?: ThemeDefinition): Theme;
 export type ThemeProviderProps = {
     theme?: ThemeDefinition;
     children?: ReactNode;
 };
-export declare function ThemeProvider(props: ThemeProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/theme/themeContext.js

@@ -1,34 +1,27 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
-import { defaultDarkTheme, defaultLightTheme, generateColorMembers } from './themeVariables';
-import { mergeDeep } from '../../utils';
-export const ThemeContext = createContext(defaultLightTheme);
+import { createContext, useContext, useMemo } from 'react';
+import { defaultDarkTheme, defaultLightTheme, defineTheme, restoreThemeDefinition } from './themeVariables';
+import { mergeDeep, useDerivedState } from '../../utils';
+export const ThemeContext = createContext(defineTheme(defaultLightTheme));
 export function useTheme() {
     return useContext(ThemeContext);
 }
-export function useThemeProvider(theme) {
-    const defaultTheme = useTheme();
-    const mergeTheme = (theme) => {
-        const definition = typeof theme === 'function' ? theme(themeValue) : theme;
-        let newTheme;
-        if (definition?.colors) {
-            const colors = {};
-            for (const k in definition.colors) {
-                colors[k] = generateColorMembers(definition.colors[k]);
-            }
-            newTheme = { ...definition, colors };
-        }
-        else {
-            newTheme = definition;
-        }
-        return mergeDeep({}, defaultTheme, newTheme?.mode === 'dark' && defaultDarkTheme, newTheme);
-    };
-    const [themeValue, setThemeValue] = useState(() => mergeTheme(theme));
-    themeValue.update = theme => {
-        setThemeValue(mergeTheme(theme));
-    };
-    return themeValue;
-}
-export function ThemeProvider(props) {
-    return (_jsx(ThemeContext, { value: useThemeProvider(props.theme), children: props.children }));
+export function ThemeProvider({ theme, children }) {
+    const parentTheme = useTheme();
+    const [currentTheme, setCurrentTheme] = useDerivedState(theme);
+    const mergedThemeDefinition = useMemo(() => {
+        return mergeDeep({}, restoreThemeDefinition(parentTheme), parentTheme.mode === 'light' && currentTheme.current?.mode === 'dark' ? defaultDarkTheme : void 0, parentTheme.mode === 'dark' && currentTheme.current?.mode === 'light' ? defaultLightTheme : void 0, currentTheme.current);
+    }, [currentTheme.current, parentTheme]);
+    const themeContextValue = useMemo(() => {
+        const value = defineTheme(mergedThemeDefinition);
+        value._sub = true;
+        value.update = theme => {
+            const newThemeDefinition = typeof theme === 'function' ? theme(value) : theme;
+            setCurrentTheme(prev => {
+                return mergeDeep({ ...prev }, newThemeDefinition);
+            });
+        };
+        return value;
+    }, [mergedThemeDefinition]);
+    return (_jsx(ThemeContext, { value: themeContextValue, children: children }));
 }

package/dist/esm/components/theme/themeTypes.d.ts

@@ -1,15 +1,14 @@
 import { ColorPresets, ResponsiveValue, Size, TextColorPresets, ThemeEasingName } from '../../types';
-import { Dispatch, SetStateAction } from 'react';
 export type ThemeMode = 'light' | 'dark';
 export interface ColorMember extends Array<string> {
     light: string;
     main: string;
     dark: string;
 }
-export type ThemeColor = {
+export type ThemeColors = {
     [P in ColorPresets]: ColorMember;
 };
-export type ThemeTextColor = {
+export type ThemeTextColors = {
     [P in TextColorPresets]: string;
 };
 export type ThemeBackgroundColor = {
@@ -20,6 +19,7 @@ export type ThemeBackgroundColor = {
 export type ThemeEasing = {
     [P in ThemeEasingName]: string;
 };
+/** 主题的使用对象 */
 export type Theme = {
     mode: ThemeMode;
     fontSize: number;
@@ -34,25 +34,26 @@ export type Theme = {
      */
     gray: (amount: number) => string;
     divider: string;
-    colors: ThemeColor;
-    text: ThemeTextColor;
+    colors: ThemeColors;
+    text: ThemeTextColors;
     background: ThemeBackgroundColor;
     boxShadow: string[];
     easing: ThemeEasing;
     breakpoints: ResponsiveValue;
     zoom: number;
-    update: Dispatch<SetStateAction<ThemeDefinition>>;
+    update: (themeDefinition: ThemeDefinition | ((currentTheme: Theme) => ThemeDefinition)) => void;
+    /** @private */
+    _sub?: boolean;
 };
-/** Theme对象的深度Partial，使所有子属性全部变成可选 */
-export interface PartialTheme extends Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing' | 'breakpoints'>> {
-    colors?: Partial<ThemeColor>;
-    text?: Partial<ThemeTextColor>;
+export interface PartialTheme extends Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing' | 'breakpoints' | 'update'>> {
+    colors?: Partial<ThemeColors>;
+    text?: Partial<ThemeTextColors>;
     background?: Partial<ThemeBackgroundColor>;
     easing?: Partial<ThemeEasing>;
     breakpoints?: Partial<ResponsiveValue>;
 }
-/** 设置主题时的`colors`属性与使用主题时的`colors`属性有所不同 */
-export interface ThemeDefinition extends Omit<PartialTheme, 'colors' | 'update'> {
+/** 主题的定义对象 */
+export interface ThemeDefinition extends Omit<PartialTheme, 'colors'> {
     colors?: {
         [P in ColorPresets]?: string;
     };

package/dist/esm/components/theme/themeVariables.d.ts

@@ -1,10 +1,15 @@
 import { ResponsiveValue } from '../../types';
-import { ColorMember, PartialTheme, Theme } from './themeTypes';
+import { PartialTheme, ThemeDefinition } from './themeTypes';
 /**
- * ---------------------------------------------------------------------
- * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
+ * 将主题定义对象转换成使用对象
+ * @param themeDefinition
+ */
+export declare function defineTheme(themeDefinition: ThemeDefinition): PartialTheme;
+/**
+ * 将主题使用对象还原成定义对象
+ * @param theme
  */
-export declare function generateColorMembers(color: string): ColorMember;
+export declare function restoreThemeDefinition(theme: PartialTheme): ThemeDefinition;
 /**
  * ---------------------------------------------------------------------
  * 统一全局zIndex
@@ -12,8 +17,8 @@ export declare function generateColorMembers(color: string): ColorMember;
 export declare const zIndex: {
     overlay: number;
     popper: number;
-    bubbleConfirm: number;
     dropdown: number;
+    bubbleConfirm: number;
     snackbar: number;
     tooltip: number;
 };
@@ -23,9 +28,9 @@ export declare const defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Se
  * ---------------------------------------------------------------------
  * 默认的明亮主题配置
  */
-export declare const defaultLightTheme: Theme;
+export declare const defaultLightTheme: ThemeDefinition;
 /**
  * ---------------------------------------------------------------------
  * 默认的黑暗主题配置
  */
-export declare const defaultDarkTheme: PartialTheme;
+export declare const defaultDarkTheme: ThemeDefinition;

package/dist/esm/components/theme/themeVariables.js

@@ -26,22 +26,66 @@ function generateSpacing() {
  * ---------------------------------------------------------------------
  * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
  */
-export function generateColorMembers(color) {
+function defineColorMembers(color) {
     const member = Array();
     member.toString = () => color;
     const colorObj = Color(color);
     for (let i = 0; i <= 4; i++) {
-        member[i] = colorObj.lighten(1 - (i + 1) / 6).hex();
+        Object.defineProperty(member, i, {
+            get: () => colorObj.lighten(1 - (i + 1) / 6).hex()
+        });
     }
     member[5] = color;
     for (let i = 6; i <= 10; i++) {
-        member[i] = colorObj.darken((i - 5) / 6).hex();
+        Object.defineProperty(member, i, {
+            get: () => colorObj.darken((i - 5) / 6).hex()
+        });
     }
-    member.light = member[3];
     member.main = member[5];
-    member.dark = member[7];
+    Object.defineProperties(member, {
+        light: {
+            get: () => member[3]
+        },
+        dark: {
+            get: () => member[7]
+        }
+    });
     return member;
 }
+/**
+ * 将主题定义对象转换成使用对象
+ * @param themeDefinition
+ */
+export function defineTheme(themeDefinition) {
+    if (!themeDefinition.colors) {
+        return themeDefinition;
+    }
+    const colors = {};
+    for (const k in themeDefinition.colors) {
+        const color = themeDefinition.colors[k];
+        if (color) {
+            colors[k] = defineColorMembers(color);
+        }
+    }
+    return { ...themeDefinition, colors };
+}
+/**
+ * 将主题使用对象还原成定义对象
+ * @param theme
+ */
+export function restoreThemeDefinition(theme) {
+    if (!theme.colors) {
+        return theme;
+    }
+    const colors = {};
+    for (const k in theme.colors) {
+        const colorMembers = theme.colors[k];
+        if (colorMembers) {
+            colors[k] = colorMembers.main;
+        }
+    }
+    return { ...theme, colors };
+}
 /**
  * ---------------------------------------------------------------------
  * 统一全局zIndex
@@ -49,8 +93,8 @@ export function generateColorMembers(color) {
 export const zIndex = {
     overlay: 1000,
     popper: 1100,
-    bubbleConfirm: 1200,
-    dropdown: 1300,
+    dropdown: 1200,
+    bubbleConfirm: 1300,
     snackbar: 1400,
     tooltip: 1500
 };
@@ -77,15 +121,15 @@ export const defaultLightTheme = {
     spacing: defaultSpacing,
     gap: defaultSpacing[6],
     gray,
-    /** divider: gray(.15), */
-    divider: '#d9d9d9',
+    /* divider: gray(.1), */
+    divider: '#e6e6e6',
     colors: {
-        primary: generateColorMembers('#1e71ec'),
-        secondary: generateColorMembers('#925CC1'),
-        success: generateColorMembers('#13C13C'),
-        warning: generateColorMembers('#ED9121'),
-        error: generateColorMembers('#DD3F3F'),
-        info: generateColorMembers('#52AEDF')
+        primary: '#1E71EC',
+        secondary: '#925CC1',
+        success: '#13C13C',
+        warning: '#ED9121',
+        error: '#DD3F3F',
+        info: '#52AEDF',
     },
     text: {
         /* primary: gray(.9), */
@@ -126,9 +170,7 @@ export const defaultLightTheme = {
         swing: 'cubic-bezier(.5, 3, .5, .1)'
     },
     breakpoints: defaultBreakpoints,
-    zoom: 1,
-    update: () => {
-    }
+    zoom: 1
 };
 /**
  * ---------------------------------------------------------------------
@@ -147,12 +189,18 @@ export const defaultDarkTheme = {
     /* divider: rGray(.36), */
     divider: '#5c5c5c',
     colors: {
-        primary: generateColorMembers(Color(defaultLightTheme.colors.primary.main).lighten(.1).hex()),
-        secondary: generateColorMembers(Color(defaultLightTheme.colors.secondary.main).lighten(.06).hex()),
-        success: generateColorMembers(Color(defaultLightTheme.colors.success.main).lighten(.06).hex()),
-        warning: generateColorMembers(Color(defaultLightTheme.colors.warning.main).lighten(.06).hex()),
-        error: generateColorMembers(Color(defaultLightTheme.colors.error.main).lighten(.06).hex()),
-        info: generateColorMembers(Color(defaultLightTheme.colors.info.main).lighten(.03).hex()),
+        /* primary: Color(defaultLightTheme.colors!.primary).lighten(.1).hex(), */
+        primary: '#3780EE',
+        /* secondary: Color(defaultLightTheme.colors!.secondary).lighten(.06).hex(), */
+        secondary: '#9A68C6',
+        /* success: Color(defaultLightTheme.colors!.success).lighten(.06).hex(), */
+        success: '#14CD40',
+        /* warning: Color(defaultLightTheme.colors!.warning).lighten(.06).hex(), */
+        warning: '#EE9830',
+        /* error: Color(defaultLightTheme.colors!.error).lighten(.06).hex(), */
+        error: '#E04D4D',
+        /* info: Color(defaultLightTheme.colors!.info).lighten(.03).hex() */
+        info: '#5AB2E0'
     },
     text: {
         /* primary: rGray(.9), */

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
-import { ColorPropsValue, DIVProps, Obj } from '../../types';
+import { ColorPropsValue, DivProps, Obj } from '../../types';
 import { TimelineItem, TimelineItemProps } from './timelineItem';
-export interface TimelineSharedProps extends DIVProps {
+export interface TimelineSharedProps extends DivProps {
     variant?: 'filled' | 'outlined';
     /**标签的位置，默认为`end` */
     labelPosition?: 'start' | 'end' | 'alternate' | 'alternate-reverse';

package/dist/esm/components/timeline/timeline.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { classes, style } from './timeline.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { TimelineItem } from './timelineItem';
 const TimelineContext = createContext({});
 export function useTimelineContext() {
@@ -23,6 +23,6 @@ variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = '
             return child;
         });
     };
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: _jsx(TimelineContext, { value: useMemo(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: _jsx(TimelineContext, { value: useMemo(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
 });
 Timeline.Item = TimelineItem;

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

@@ -111,7 +111,7 @@ export function useTimelineItemStyle({ color }) {
         }
 
         &:not(:last-of-type) {
-            \.${classes.dotArea}:after {
+            .${classes.dotArea}:after {
                 width: 1px;
                 height: calc(100% - 1.5em);
                 bottom: 0;
@@ -133,7 +133,7 @@ export function useTimelineItemStyle({ color }) {
             }
 
             &:not(:last-of-type) {
-                \.${classes.dotArea}:after {
+                .${classes.dotArea}:after {
                     width: calc(100% - 9px - 8px);
                     height: 1px;
                     bottom: 4px;

package/dist/esm/components/timeline/timelineItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { classes, useTimelineItemStyle } from './timeline.style';
 import { useTimelineContext } from './timeline';
 export const TimelineItem = memo(({ dot, content, oppositeContent, loading, _index = 0, 
@@ -10,6 +10,6 @@ variant, labelPosition, color, ...props }) => {
     variant ??= context.variant ?? 'outlined';
     labelPosition ??= context.labelPosition ?? 'end';
     color ??= context.color ?? 'primary';
-    return (_jsxs("div", { ...props, css: useTimelineItemStyle({ color }), className: classnames(classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
+    return (_jsxs("div", { ...props, css: useTimelineItemStyle({ color }), className: clsx(classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
             (labelPosition === 'alternate-reverse' && _index % 2 === 0), "data-orientation": context.orientation, children: [_jsx("div", { className: classes.opposite, "data-show": !!oppositeContent, children: oppositeContent }), _jsx("div", { className: classes.dotArea, children: _jsx("div", { className: classes.dot }) }), _jsx("div", { className: classes.content, children: content })] }));
 });

package/dist/esm/components/toggleButton/toggleButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, cloneElement, isValidElement } from 'react';
 import { Flex } from '../flex';
-import { classnames, isSelected } from '../../utils';
+import { clsx, isSelected } from '../../utils';
 import { classes } from './toggleButton.style';
 import { Button } from '../button';
 import { useShallowSelection } from '../selectionContext';
@@ -43,5 +43,5 @@ export const ToggleButton = (({ variant = 'filled', size, color = 'primary', dis
             return c;
         });
     };
-    return (_jsx(Flex, { compact: true, ...props, className: classnames(classes.root, props.className), children: renderItems() }));
+    return (_jsx(Flex, { compact: true, ...props, className: clsx(classes.root, props.className), children: renderItems() }));
 });

package/dist/esm/components/tooltip/tooltip.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Popper } from '../popper';
 import { classes, useStyle } from './tooltip.style';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
 import { useTheme } from '../theme';
 export function Tooltip({ title, color, showArrow = true, offset, ...props }) {
     const { spacing } = useTheme();
     offset ??= showArrow ? spacing[3] : spacing[2];
-    return (_jsx(Popper, { ...props, css: useStyle({ color }), className: classnames(classes.root, props.className), offset: offset, content: _jsx("div", { className: classes.title, "data-show-arrow": showArrow, children: title }) }));
+    return (_jsx(Popper, { ...props, css: useStyle({ color: color || '#000000' }), className: clsx(classes.root, props.className), offset: offset, content: _jsx("div", { className: classes.title, "data-show-arrow": showArrow, children: title }) }));
 }

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

@@ -1,7 +1,9 @@
-import { TooltipProps } from './tooltip';
+import { ColorPropsValue } from '../../types';
 export declare const classes: {
     title: string;
 } & {
     root: string;
 };
-export declare function useStyle({ color }: Pick<TooltipProps, 'color'>): import("@emotion/react").SerializedStyles;
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -7,7 +7,7 @@ export const classes = defineClasses('tooltip', [
     'title'
 ]);
 export function useStyle({ color }) {
-    let colorValue = color ? useColor(color) : '#000000';
+    let colorValue = useColor(color);
     colorValue = Color(colorValue).alpha(.7).string();
     return useCss(({ spacing, borderRadius, boxShadow }) => css `
         z-index: ${zIndex.tooltip};

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

@@ -1,15 +1,15 @@
 import { ReactElement } from 'react';
-import { ColorPropsValue, DIVProps } from '../../types';
-export interface TouchRippleProps extends Omit<DIVProps, 'children'> {
+import { ColorPropsValue, DivProps } from '../../types';
+export interface TouchRippleProps extends Omit<DivProps, 'children'> {
     color?: ColorPropsValue;
-    rippleProps?: DIVProps;
+    rippleProps?: DivProps;
     children?: ReactElement;
 }
 export declare const TouchRipple: {
     (props: TouchRippleProps): ReactElement;
     Ripple: typeof Ripple;
 };
-interface RippleProps extends DIVProps {
+interface RippleProps extends DivProps {
     color?: ColorPropsValue;
 }
 export declare const Ripple: import("react").MemoExoticComponent<({ ref, color, ...props }: RippleProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/esm/components/touchRipple/touchRipple.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { cloneElement, memo, useRef, useState, useLayoutEffect } from 'react';
 import { classes, useStyle } from './touchRipple.style';
-import { cloneRef, getEazyID } from '../../utils';
+import { cloneRef, getEasyID } from '../../utils';
 export const TouchRipple = (({ ref, color, rippleProps, children, ...props }) => {
     const renderedRipple = (_jsx(Ripple, { ...rippleProps, 
         // 有children属性时，ref传递给children
@@ -25,7 +25,7 @@ export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
                 setRipples(o => [
                     ...o,
                     {
-                        key: getEazyID('touch-ripple'),
+                        key: getEasyID('touch-ripple'),
                         r: Math.sqrt(wrapper.clientWidth ** 2 + wrapper.clientHeight ** 2),
                         left: e.offsetX,
                         top: e.offsetY,
@@ -54,5 +54,5 @@ export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
     const onTransitionEnd = (key) => {
         setRipples(o => o.filter(v => v.key !== key));
     };
-    return (_jsx("div", { ...props, ref: cloneRef(ref, rippleRef), css: useStyle({ color }), className: classes.root, children: ripples.map(({ key, r, left, top, leaving }) => _jsx("div", { className: classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
+    return (_jsx("div", { ...props, ref: cloneRef(ref, rippleRef), css: useStyle({ color: color || 'primary' }), className: classes.root, children: ripples.map(({ key, r, left, top, leaving }) => _jsx("div", { className: classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
 });

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

@@ -1,8 +1,8 @@
 import { ReactElement, ReactNode } from 'react';
-import { DIVProps, Id, SelectableMultipleProps } from '../../types';
+import { DivProps, Id, SelectableMultipleProps } from '../../types';
 import { MenuOptionType } from '../optionsBase';
 import { ButtonProps } from '../button';
-export interface TransferProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DIVProps, 'defaultValue' | 'value' | 'onChange'>, Omit<SelectableMultipleProps<V>, 'multiple'> {
+export interface TransferProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DivProps, 'defaultValue' | 'value' | 'onChange'>, Omit<SelectableMultipleProps<V>, 'multiple'> {
     options?: O[];
     /** 默认为`value` */
     primaryKey?: keyof O;

package/dist/esm/components/transfer/transfer.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useMemo, useState } from 'react';
 import { classes, style } from './transfer.style';
-import { classnames, useControlled } from '../../utils';
+import { clsx, useControlled } from '../../utils';
 import { Button } from '../button';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { TransferPanel } from './transferPanel';
+import { Icon } from '../..';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 const TransferContext = createContext({});
 export function useTransferContext() {
     const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = useContext(TransferContext);
@@ -28,12 +30,12 @@ export const Transfer = memo(({ options = [], primaryKey = 'value', fullWidth, a
             {
                 disabled: !leftSelected.length,
                 onClick: toRight,
-                children: _jsx(RightOutlined, {})
+                children: _jsx(Icon, { icon: faAngleRight })
             },
             {
                 disabled: !rightSelected.length,
                 onClick: toLeft,
-                children: _jsx(LeftOutlined, {})
+                children: _jsx(Icon, { icon: faAngleLeft })
             }
         ];
         if (renderButtons) {
@@ -44,7 +46,7 @@ export const Transfer = memo(({ options = [], primaryKey = 'value', fullWidth, a
             _jsx(Button, { ...buttonsProps[1] }, "toLeft")
         ];
     })();
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, children: _jsxs(TransferContext, { value: useMemo(() => ({
+    return (_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-full-width": fullWidth, children: _jsxs(TransferContext, { value: useMemo(() => ({
                 options, value: innerValue.current, allowSelectAll, showHeader
             }), [
                 options, innerValue.current, allowSelectAll, showHeader

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

@@ -2,11 +2,11 @@ export declare const classes: {
     info: string;
     header: string;
     title: string;
-    list: string;
     checkbox: string;
+    list: string;
+    buttons: string;
     count: string;
     panel: string;
-    buttons: string;
 } & {
     root: string;
 };