@canlooks/can-ui 0.0.25 → 0.0.27

package/dist/cjs/components/tag/tag.js

@@ -5,15 +5,16 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const tag_style_1 = require("./tag.style");
 const utils_1 = require("../../utils");
-const icons_1 = require("@ant-design/icons");
+const __1 = require("../..");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
 exports.Tag = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tag_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tag_style_1.useStyle)({ color: color || 'text.secondary' }), className: (0, utils_1.clsx)(tag_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, "data-clickable": clickable, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.content, children: props.children }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.suffix, children: suffix }), closable &&
-                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }));
+                (0, jsx_runtime_1.jsx)("div", { className: tag_style_1.classes.close, onClick: closeHandler, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }));
 });

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

@@ -81,6 +81,7 @@ function useStyle({ color }) {
             &[data-variant=filled] {
                 .${exports.classes.close} {
                     color: ${gray(.1)};
+                    -webkit-tap-highlight-color: transparent;
                     
                     &:hover {
                         color: ${gray(.2)};
@@ -95,7 +96,7 @@ 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/cjs/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/cjs/components/textarea/textarea.js

@@ -7,5 +7,5 @@ const inputBase_1 = require("../inputBase");
 const textarea_style_1 = require("./textarea.style");
 const utils_1 = require("../../utils");
 exports.Textarea = (0, react_1.memo)(({ textareaProps, textareaRef, rows, fullWidth = false, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: textarea_style_1.style, className: (0, utils_1.classnames)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsx)("textarea", { rows: rows, ...rest, ...textareaProps, ref: (0, utils_1.cloneRef)(ref, textareaRef), className: (0, utils_1.classnames)(textarea_style_1.classes.textarea, textareaProps?.className) }) }));
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: textarea_style_1.style, className: (0, utils_1.clsx)(textarea_style_1.classes.root, props.className), "data-full-width": fullWidth, children: ({ ref, ...rest }) => (0, jsx_runtime_1.jsx)("textarea", { rows: rows, ...rest, ...textareaProps, ref: (0, utils_1.cloneRef)(ref, textareaRef), className: (0, utils_1.clsx)(textarea_style_1.classes.textarea, textareaProps?.className) }) }));
 });

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

@@ -2,39 +2,31 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeContext = void 0;
 exports.useTheme = useTheme;
-exports.useThemeProvider = useThemeProvider;
 exports.ThemeProvider = ThemeProvider;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const themeVariables_1 = require("./themeVariables");
 const utils_1 = require("../../utils");
-exports.ThemeContext = (0, react_1.createContext)(themeVariables_1.defaultLightTheme);
+exports.ThemeContext = (0, react_1.createContext)((0, themeVariables_1.defineTheme)(themeVariables_1.defaultLightTheme));
 function useTheme() {
     return (0, react_1.useContext)(exports.ThemeContext);
 }
-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] = (0, themeVariables_1.generateColorMembers)(definition.colors[k]);
-            }
-            newTheme = { ...definition, colors };
-        }
-        else {
-            newTheme = definition;
-        }
-        return (0, utils_1.mergeDeep)({}, defaultTheme, newTheme?.mode === 'dark' && themeVariables_1.defaultDarkTheme, newTheme);
-    };
-    const [themeValue, setThemeValue] = (0, react_1.useState)(() => mergeTheme(theme));
-    themeValue.update = theme => {
-        setThemeValue(mergeTheme(theme));
-    };
-    return themeValue;
-}
-function ThemeProvider(props) {
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeContext, { value: useThemeProvider(props.theme), children: props.children }));
+function ThemeProvider({ theme, children }) {
+    const parentTheme = useTheme();
+    const [currentTheme, setCurrentTheme] = (0, utils_1.useDerivedState)(theme);
+    const mergedThemeDefinition = (0, react_1.useMemo)(() => {
+        return (0, utils_1.mergeDeep)({}, (0, themeVariables_1.restoreThemeDefinition)(parentTheme), parentTheme.mode === 'light' && currentTheme.current?.mode === 'dark' ? themeVariables_1.defaultDarkTheme : void 0, parentTheme.mode === 'dark' && currentTheme.current?.mode === 'light' ? themeVariables_1.defaultLightTheme : void 0, currentTheme.current);
+    }, [currentTheme.current, parentTheme]);
+    const themeContextValue = (0, react_1.useMemo)(() => {
+        const value = (0, themeVariables_1.defineTheme)(mergedThemeDefinition);
+        value._sub = true;
+        value.update = theme => {
+            const newThemeDefinition = typeof theme === 'function' ? theme(value) : theme;
+            setCurrentTheme(prev => {
+                return (0, utils_1.mergeDeep)({ ...prev }, newThemeDefinition);
+            });
+        };
+        return value;
+    }, [mergedThemeDefinition]);
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeContext, { value: themeContextValue, children: children }));
 }

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultDarkTheme = exports.defaultLightTheme = exports.defaultFontFamily = exports.defaultBreakpoints = exports.zIndex = void 0;
-exports.generateColorMembers = generateColorMembers;
+exports.defineTheme = defineTheme;
+exports.restoreThemeDefinition = restoreThemeDefinition;
 const tslib_1 = require("tslib");
 const color_1 = tslib_1.__importDefault(require("color"));
 /**
@@ -31,22 +32,66 @@ function generateSpacing() {
  * ---------------------------------------------------------------------
  * 生成单个颜色的其他明亮度配色，0 至 10，数字越小颜色越淡（亮），数字越大颜色越深（暗）
  */
-function generateColorMembers(color) {
+function defineColorMembers(color) {
     const member = Array();
     member.toString = () => color;
     const colorObj = (0, color_1.default)(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
+ */
+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
+ */
+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
@@ -54,8 +99,8 @@ function generateColorMembers(color) {
 exports.zIndex = {
     overlay: 1000,
     popper: 1100,
-    bubbleConfirm: 1200,
-    dropdown: 1300,
+    dropdown: 1200,
+    bubbleConfirm: 1300,
     snackbar: 1400,
     tooltip: 1500
 };
@@ -82,15 +127,15 @@ exports.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), */
@@ -131,9 +176,7 @@ exports.defaultLightTheme = {
         swing: 'cubic-bezier(.5, 3, .5, .1)'
     },
     breakpoints: exports.defaultBreakpoints,
-    zoom: 1,
-    update: () => {
-    }
+    zoom: 1
 };
 /**
  * ---------------------------------------------------------------------
@@ -152,12 +195,18 @@ exports.defaultDarkTheme = {
     /* divider: rGray(.36), */
     divider: '#5c5c5c',
     colors: {
-        primary: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.primary.main).lighten(.1).hex()),
-        secondary: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.secondary.main).lighten(.06).hex()),
-        success: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.success.main).lighten(.06).hex()),
-        warning: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.warning.main).lighten(.06).hex()),
-        error: generateColorMembers((0, color_1.default)(exports.defaultLightTheme.colors.error.main).lighten(.06).hex()),
-        info: generateColorMembers((0, color_1.default)(exports.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/cjs/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/cjs/components/timeline/timeline.js

@@ -27,6 +27,6 @@ variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = '
             return child;
         });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: timeline_style_1.style, className: (0, utils_1.classnames)(timeline_style_1.classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: (0, jsx_runtime_1.jsx)(TimelineContext, { value: (0, react_1.useMemo)(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: timeline_style_1.style, className: (0, utils_1.clsx)(timeline_style_1.classes.root, props.className), "data-label-position": labelPosition, "data-orientation": orientation, children: (0, jsx_runtime_1.jsx)(TimelineContext, { value: (0, react_1.useMemo)(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
 });
 exports.Timeline.Item = timelineItem_1.TimelineItem;

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

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

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

@@ -13,6 +13,6 @@ variant, labelPosition, color, ...props }) => {
     variant ??= context.variant ?? 'outlined';
     labelPosition ??= context.labelPosition ?? 'end';
     color ??= context.color ?? 'primary';
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, timeline_style_1.useTimelineItemStyle)({ color }), className: (0, utils_1.classnames)(timeline_style_1.classes.item, props.className), "data-variant": variant, "data-reverse": (labelPosition === 'alternate' && _index % 2 !== 0) ||
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, timeline_style_1.useTimelineItemStyle)({ color }), className: (0, utils_1.clsx)(timeline_style_1.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: [(0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.opposite, "data-show": !!oppositeContent, children: oppositeContent }), (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.dotArea, children: (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.dot }) }), (0, jsx_runtime_1.jsx)("div", { className: timeline_style_1.classes.content, children: content })] }));
 });

package/dist/cjs/components/toggleButton/toggleButton.js

@@ -46,5 +46,5 @@ exports.ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled
             return c;
         });
     };
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { compact: true, ...props, className: (0, utils_1.classnames)(toggleButton_style_1.classes.root, props.className), children: renderItems() }));
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { compact: true, ...props, className: (0, utils_1.clsx)(toggleButton_style_1.classes.root, props.className), children: renderItems() }));
 });

package/dist/cjs/components/tooltip/tooltip.js

@@ -9,5 +9,5 @@ const theme_1 = require("../theme");
 function Tooltip({ title, color, showArrow = true, offset, ...props }) {
     const { spacing } = (0, theme_1.useTheme)();
     offset ??= showArrow ? spacing[3] : spacing[2];
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, css: (0, tooltip_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(tooltip_style_1.classes.root, props.className), offset: offset, content: (0, jsx_runtime_1.jsx)("div", { className: tooltip_style_1.classes.title, "data-show-arrow": showArrow, children: title }) }));
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...props, css: (0, tooltip_style_1.useStyle)({ color: color || '#000000' }), className: (0, utils_1.clsx)(tooltip_style_1.classes.root, props.className), offset: offset, content: (0, jsx_runtime_1.jsx)("div", { className: tooltip_style_1.classes.title, "data-show-arrow": showArrow, children: title }) }));
 }

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

@@ -12,7 +12,7 @@ exports.classes = (0, utils_1.defineClasses)('tooltip', [
     'title'
 ]);
 function useStyle({ color }) {
-    let colorValue = color ? (0, utils_1.useColor)(color) : '#000000';
+    let colorValue = (0, utils_1.useColor)(color);
     colorValue = (0, color_1.default)(colorValue).alpha(.7).string();
     return (0, utils_1.useCss)(({ spacing, borderRadius, boxShadow }) => (0, react_1.css) `
         z-index: ${theme_1.zIndex.tooltip};

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

@@ -28,7 +28,7 @@ exports.Ripple = (0, react_1.memo)(({ ref, color = 'primary', ...props }) => {
                 setRipples(o => [
                     ...o,
                     {
-                        key: (0, utils_1.getEazyID)('touch-ripple'),
+                        key: (0, utils_1.getEasyID)('touch-ripple'),
                         r: Math.sqrt(wrapper.clientWidth ** 2 + wrapper.clientHeight ** 2),
                         left: e.offsetX,
                         top: e.offsetY,
@@ -57,5 +57,5 @@ exports.Ripple = (0, react_1.memo)(({ ref, color = 'primary', ...props }) => {
     const onTransitionEnd = (key) => {
         setRipples(o => o.filter(v => v.key !== key));
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, rippleRef), css: (0, touchRipple_style_1.useStyle)({ color }), className: touchRipple_style_1.classes.root, children: ripples.map(({ key, r, left, top, leaving }) => (0, jsx_runtime_1.jsx)("div", { className: touchRipple_style_1.classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(ref, rippleRef), css: (0, touchRipple_style_1.useStyle)({ color: color || 'primary' }), className: touchRipple_style_1.classes.root, children: ripples.map(({ key, r, left, top, leaving }) => (0, jsx_runtime_1.jsx)("div", { className: touchRipple_style_1.classes.ripple, style: { width: r * 2, left, top }, "data-leaving": leaving, onTransitionEnd: () => onTransitionEnd(key) }, key)) }));
 });

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

@@ -7,8 +7,10 @@ const react_1 = require("react");
 const transfer_style_1 = require("./transfer.style");
 const utils_1 = require("../../utils");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const transferPanel_1 = require("./transferPanel");
+const __1 = require("../..");
+const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
+const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
 const TransferContext = (0, react_1.createContext)({});
 function useTransferContext() {
     const { options = [], primaryKey = 'value', value = [], allowSelectAll = true, showHeader = true } = (0, react_1.useContext)(TransferContext);
@@ -32,12 +34,12 @@ exports.Transfer = (0, react_1.memo)(({ options = [], primaryKey = 'value', full
             {
                 disabled: !leftSelected.length,
                 onClick: toRight,
-                children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {})
+                children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight })
             },
             {
                 disabled: !rightSelected.length,
                 onClick: toLeft,
-                children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {})
+                children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft })
             }
         ];
         if (renderButtons) {
@@ -48,7 +50,7 @@ exports.Transfer = (0, react_1.memo)(({ options = [], primaryKey = 'value', full
             (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonsProps[1] }, "toLeft")
         ];
     })();
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: transfer_style_1.style, className: (0, utils_1.classnames)(transfer_style_1.classes.root, props.className), "data-full-width": fullWidth, children: (0, jsx_runtime_1.jsxs)(TransferContext, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: transfer_style_1.style, className: (0, utils_1.clsx)(transfer_style_1.classes.root, props.className), "data-full-width": fullWidth, children: (0, jsx_runtime_1.jsxs)(TransferContext, { value: (0, react_1.useMemo)(() => ({
                 options, value: innerValue.current, allowSelectAll, showHeader
             }), [
                 options, innerValue.current, allowSelectAll, showHeader

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

package/dist/cjs/components/transfer/transferPanel.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement, ReactNode } from 'react';
-import { DIVProps, Id } from '../../types';
+import { DivProps, Id } from '../../types';
 import { MenuOptionType, OptionsBaseProps } from '../optionsBase';
 type ListProps<O extends MenuOptionType<V>, V extends Id = Id> = Pick<OptionsBaseProps<O, V>, 'options' | 'selectedValue' | 'primaryKey' | 'onToggleSelected'>;
-export interface TransferPanelProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DIVProps, 'title' | 'onChange'> {
+export interface TransferPanelProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<DivProps, 'title' | 'onChange'> {
     title?: ReactNode;
     type?: 'left' | 'right';
     selectedValue?: V[];

package/dist/cjs/components/transitionBase/collapse.d.ts

@@ -1,10 +1,11 @@
-import { ReactElement } from 'react';
+import { ElementType, ReactElement } from 'react';
 import { TransitionBaseProps } from './transitionBase';
-export interface CollapseProps<T extends HTMLElement = HTMLElement> extends TransitionBaseProps<T> {
+import { MergeProps } from '../../types';
+export type CollapseOwnProps = {
     /**
      * 动画实现的方式
-     * @enum {"sweeping"}: 通过修改width或height实现
-     * @enum {"scaling"}: 通过transform实现
+     * @enum {'sweeping'}: 通过修改width或height实现
+     * @enum {'scaling'}: 通过transform实现
      * 默认为`sweeping`
      */
     transitionType?: 'sweeping' | 'scaling';
@@ -14,5 +15,6 @@ export interface CollapseProps<T extends HTMLElement = HTMLElement> extends Tran
      * 默认为0
      */
     collapsedSize?: number | (() => number);
-}
-export declare const Collapse: <T extends HTMLElement>(props: CollapseProps<T>) => ReactElement;
+};
+export type CollapseProps<T extends HTMLElement = HTMLElement, C extends ElementType = 'div'> = MergeProps<CollapseOwnProps, TransitionBaseProps<T, C>>;
+export declare const Collapse: <T extends HTMLElement = HTMLElement, C extends ElementType = 'div'>(props: CollapseProps<T, C>) => ReactElement;