@canlooks/can-ui 0.0.58 → 0.0.59

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

@@ -18,7 +18,7 @@ exports.AvatarGroup = (0, react_2.memo)(({ color, size, shape = 'circular', imgP
     const isSurplus = total > max;
     const renderItems = () => {
         if (items?.length) {
-            return items.slice(0, isSurplus ? max - 1 : max).reverse().map((p, i) => (0, react_1.createElement)(avatar_1.Avatar, { ...commonProps, key: p.key ?? i, color: p.color, size: p.size, shape: p.shape, src: p.src, imgProps: p.imgProps }, p.children));
+            return items.slice(0, isSurplus ? max - 1 : max).reverse().map((p, i) => (0, react_1.createElement)(avatar_1.Avatar, { ...commonProps, ...p, key: p.key ?? i }, p.children));
         }
         return react_2.Children.toArray(props.children).slice(0, isSurplus ? max - 1 : max).reverse().map(child => {
             return (0, react_2.isValidElement)(child)

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

@@ -2,27 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BottomNavigation = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const bottomNavigation_style_1 = require("./bottomNavigation.style");
 const utils_1 = require("../../utils");
 const bottomNavigationItem_1 = require("./bottomNavigationItem");
-exports.BottomNavigation = (0, react_1.memo)(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }) => {
+exports.BottomNavigation = (0, react_2.memo)(({ items, showLabelInactive, primaryKey = 'value', labelKey = 'label', defaultValue = 'children', value, onChange, ...props }) => {
     const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
                 const itemValue = p[primaryKey];
-                return ((0, jsx_runtime_1.jsx)(bottomNavigationItem_1.BottomNavigationItem, { value: itemValue, icon: p.icon, label: p[labelKey], showLabelInactive: p.showLabelInactive ?? showLabelInactive ?? items.length <= 3, active: !(0, utils_1.isUnset)(itemValue) && innerValue.current === itemValue, onClick: e => {
+                return ((0, react_1.createElement)(bottomNavigationItem_1.BottomNavigationItem, { ...p, key: p.key ?? itemValue ?? i, value: itemValue, label: p[labelKey], showLabelInactive: p.showLabelInactive ?? showLabelInactive ?? items.length <= 3, active: !(0, utils_1.isUnset)(itemValue) && innerValue.current === itemValue, onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(itemValue);
-                    } }, p.key ?? itemValue ?? i));
+                    } }));
             });
         }
-        showLabelInactive ??= react_1.Children.count(props.children) <= 3;
-        return react_1.Children.map(props.children, c => {
-            if ((0, react_1.isValidElement)(c)) {
+        showLabelInactive ??= react_2.Children.count(props.children) <= 3;
+        return react_2.Children.map(props.children, c => {
+            if ((0, react_2.isValidElement)(c)) {
                 const { props } = c;
-                return (0, react_1.cloneElement)(c, {
+                return (0, react_2.cloneElement)(c, {
                     showLabelInactive: props.showLabelInactive ?? showLabelInactive,
                     active: !(0, utils_1.isUnset)(props.value) && innerValue.current === props.value,
                     onClick: e => {

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

@@ -2,32 +2,33 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumb = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const utils_1 = require("../../utils");
 const breadcrumb_style_1 = require("./breadcrumb.style");
 const button_1 = require("../button");
 const theme_1 = require("../theme");
-exports.Breadcrumb = (0, react_1.memo)(({ separator = '/', readOnly, items, ...props }) => {
+exports.Breadcrumb = (0, react_2.memo)(({ separator = '/', readOnly, items, ...props }) => {
     const { text } = (0, theme_1.useTheme)();
     const renderItems = () => {
         if (items) {
-            return items.flatMap(({ icon, label, ...p }, i) => {
+            return items.flatMap(({ icon, ...p }, i) => {
                 const isLast = i === items.length - 1;
                 return [
-                    (0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, size: p.size, suffix: p.suffix, loading: p.loading, label: label, variant: p.variant ?? 'plain', color: p.color ?? (isLast ? text.primary : text.disabled), readOnly: p.readOnly ?? (isLast || readOnly), prefix: p.prefix ?? icon, children: p.children }, p.key ?? i),
+                    (0, react_1.createElement)(button_1.Button, { ...p, key: p.key ?? i, variant: p.variant ?? 'plain', color: p.color ?? (isLast ? text.primary : text.disabled), readOnly: p.readOnly ?? (isLast || readOnly), prefix: p.prefix ?? icon }, p.children),
                     ...isLast ? [] : [
                         (0, jsx_runtime_1.jsx)("span", { className: breadcrumb_style_1.classes.separator, children: separator }, `${breadcrumb_style_1.classes.separator}_${i}`)
                     ]
                 ];
             });
         }
-        const childrenArr = react_1.Children.toArray(props.children);
+        const childrenArr = react_2.Children.toArray(props.children);
         return childrenArr.flatMap((c, i) => {
             const isLast = i === childrenArr.length - 1;
             const ret = [];
-            if ((0, react_1.isValidElement)(c)) {
+            if ((0, react_2.isValidElement)(c)) {
                 const { props } = c;
-                ret.push((0, react_1.cloneElement)(c, {
+                ret.push((0, react_2.cloneElement)(c, {
                     variant: props.variant ?? 'plain',
                     color: props.color ?? (isLast ? text.primary : text.disabled),
                     readOnly: props.readOnly ?? (isLast || readOnly),

package/dist/cjs/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxBaseGroup = void 0;
 exports.useCheckboxBaseGroupContext = useCheckboxBaseGroupContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const flex_1 = require("../flex");
 const utils_1 = require("../../utils");
 const checkboxBaseGroup_style_1 = require("./checkboxBaseGroup.style");
@@ -11,9 +12,9 @@ const checkbox_1 = require("../checkbox");
 const radio_1 = require("../radio");
 const theme_1 = require("../theme");
 const selectionContext_1 = require("../selectionContext");
-const CheckboxBaseGroupContext = (0, react_1.createContext)({});
+const CheckboxBaseGroupContext = (0, react_2.createContext)({});
 function useCheckboxBaseGroupContext() {
-    return (0, react_1.useContext)(CheckboxBaseGroupContext);
+    return (0, react_2.useContext)(CheckboxBaseGroupContext);
 }
 exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
@@ -23,19 +24,19 @@ exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multip
             return items.map((p, i) => {
                 const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
                 const itemValue = p[primaryKey];
-                return ((0, jsx_runtime_1.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: (0, utils_1.isSelected)(itemValue, innerValue), onChange: e => {
+                return ((0, react_1.createElement)(Component, { ...p, key: p.key ?? itemValue ?? i, size: p.size ?? size, color: p.color ?? color, checked: (0, utils_1.isSelected)(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
-                    } }, p.key ?? itemValue ?? i));
+                    } }));
             });
         }
-        return react_1.Children.map(props.children, c => {
-            if (!(0, react_1.isValidElement)(c)) {
+        return react_2.Children.map(props.children, c => {
+            if (!(0, react_2.isValidElement)(c)) {
                 return c;
             }
             const { props } = c;
             const itemValue = props.value;
-            return (0, react_1.cloneElement)(c, {
+            return (0, react_2.cloneElement)(c, {
                 size: props.size ?? size,
                 color: props.color ?? color,
                 checked: (0, utils_1.isSelected)(itemValue, innerValue),
@@ -46,5 +47,5 @@ exports.CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multip
             });
         });
     };
-    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, className: (0, utils_1.clsx)(checkboxBaseGroup_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(CheckboxBaseGroupContext, { value: (0, react_1.useMemo)(() => ({ size, color }), [size, color]), children: renderItems() }) }));
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { gap: spacing[8], ...props, className: (0, utils_1.clsx)(checkboxBaseGroup_style_1.classes.root, props.className), children: (0, jsx_runtime_1.jsx)(CheckboxBaseGroupContext, { value: (0, react_2.useMemo)(() => ({ size, color }), [size, color]), children: renderItems() }) }));
 });

package/dist/cjs/components/menu/menu.js

@@ -3,23 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 exports.useMenuContext = useMenuContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const menu_style_1 = require("./menu.style");
 const menuItem_1 = require("../menuItem");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const selectionContext_1 = require("../selectionContext");
-const MenuContext = (0, react_1.createContext)({});
+const MenuContext = (0, react_2.createContext)({});
 function useMenuContext() {
     const theme = (0, theme_1.useTheme)();
-    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = (0, react_1.useContext)(MenuContext);
+    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = (0, react_2.useContext)(MenuContext);
     return { size, ellipsis, indent, ...context };
 }
-exports.Menu = (0, react_1.memo)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+exports.Menu = (0, react_2.memo)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
 // 以下属性传递给<MenuItem/>
 size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
-    const expandedSet = (0, react_1.useMemo)(() => {
+    const expandedSet = (0, react_2.useMemo)(() => {
         return new Set(innerExpanded.current);
     }, [innerExpanded.current]);
     const setExpanded = (key, isExpand) => {
@@ -31,9 +32,9 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     };
     const [innerValue, toggleSelected] = (0, selectionContext_1.useShallowSelection)({ multiple, defaultValue, value, onChange });
     const renderItems = (items) => {
-        return items?.map((p, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { size: p.size, color: p.color, emphasized: p.emphasized, selected: p.selected, focused: p.focused, disabled: p.disabled, showCheckbox: p.showCheckbox, checkboxProps: p.checkboxProps, ellipsis: p.ellipsis, prefix: p.prefix, suffix: p.suffix, indent: p.indent, expandIcon: p.expandIcon, onExpandedChange: p.onExpandedChange, value: p[primaryKey], label: p[labelKey], children: renderItems(p[childrenKey]) }, p[primaryKey] ?? i));
+        return items?.map((p, i) => (0, react_1.createElement)(menuItem_1.MenuItem, { ...p, key: p[primaryKey] ?? i, value: p[primaryKey], label: p[labelKey] }, renderItems(p[childrenKey])));
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: menu_style_1.style, children: (0, jsx_runtime_1.jsx)(MenuContext, { value: (0, react_1.useMemo)(() => ({
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: menu_style_1.style, children: (0, jsx_runtime_1.jsx)(MenuContext, { value: (0, react_2.useMemo)(() => ({
                 inMenu: true,
                 expandedSet, setExpanded, multiple, selected: innerValue, toggleSelected,
                 size, showCheckbox, ellipsis, indent

package/dist/cjs/components/segmented/segmented.js

@@ -2,15 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const segmented_style_1 = require("./segmented.style");
 const utils_1 = require("../../utils");
 const SegmentedOption_1 = require("./SegmentedOption");
 const theme_1 = require("../theme");
-exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, indicatorColor = 'background.content', defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+exports.Segmented = (0, react_2.memo)(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, indicatorColor = 'background.content', defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    const [animating, setAnimating] = (0, react_1.useState)(false);
+    const [animating, setAnimating] = (0, react_2.useState)(false);
     const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const setInnerValue = (value) => {
         if (!readOnly && !disabled) {
@@ -18,7 +19,7 @@ exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', si
             _setInnerValue(value);
         }
     };
-    const optionRefs = (0, react_1.useRef)(new Map());
+    const optionRefs = (0, react_2.useRef)(new Map());
     /**
      * 计算指示器的位置
      */
@@ -40,7 +41,7 @@ exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', si
         };
     };
     const [indicatorRect, setIndicatorRect] = (0, utils_1.useDerivedState)(fitIndicatorRect, [innerValue.current]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         // 仅首次渲染需要计算
         setIndicatorRect(fitIndicatorRect());
     }, []);
@@ -49,21 +50,21 @@ exports.Segmented = (0, react_1.memo)(({ options, orientation = 'horizontal', si
             return options.map((p, i) => {
                 const v = p[primaryKey];
                 const active = !(0, utils_1.isUnset)(v) && v === innerValue.current;
-                return ((0, jsx_runtime_1.jsx)(SegmentedOption_1.SegmentedOption, { orientation: p.orientation, prefix: p.prefix, suffix: p.suffix, disabled: p.disabled, ref: r => {
+                return ((0, react_1.createElement)(SegmentedOption_1.SegmentedOption, { ...p, key: p.key ?? v ?? i, ref: r => {
                         r
                             ? optionRefs.current.set(v, r)
                             : optionRefs.current.delete(v);
                     }, value: v, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(v);
-                    }, "data-active": active }, p.key ?? v ?? i));
+                    }, "data-active": active }));
             });
         }
-        return react_1.Children.map(props.children, c => {
-            if ((0, react_1.isValidElement)(c)) {
+        return react_2.Children.map(props.children, c => {
+            if ((0, react_2.isValidElement)(c)) {
                 const { value } = c.props;
                 const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
-                return (0, react_1.cloneElement)(c, {
+                return (0, react_2.cloneElement)(c, {
                     ref: (0, utils_1.cloneRef)(c.ref, (r) => {
                         !(0, utils_1.isUnset)(value) && optionRefs.current.set(value, r);
                     }),

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

@@ -18,7 +18,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
     .${exports.classes.contentWrap} {
         display: flex;
         align-items: center;
-        gap: ${spacing[1]}px;
+        gap: ${spacing[2]}px;
     }
 
     .${exports.classes.placeholder} {

package/dist/cjs/components/stepper/stepper.js

@@ -3,13 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stepper = void 0;
 exports.useStepperContext = useStepperContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const utils_1 = require("../../utils");
 const stepper_style_1 = require("./stepper.style");
 const step_1 = require("./step");
-const StepperContext = (0, react_1.createContext)({});
+const StepperContext = (0, react_2.createContext)({});
 function useStepperContext() {
-    return (0, react_1.useContext)(StepperContext);
+    return (0, react_2.useContext)(StepperContext);
 }
 exports.Stepper = (({ steps, orientation = 'horizontal', defaultValue = 0, value, onChange, 
 // 以下为共享属性
@@ -19,21 +20,21 @@ size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, la
         if (steps) {
             return steps.map((p, i) => {
                 const isCurrentStep = i === innerValue.current;
-                return ((0, jsx_runtime_1.jsx)(step_1.Step, { indicator: p.indicator, title: p.title, prefix: p.prefix, suffix: p.suffix, description: p.description, size: p.size, gap: p.gap, color: p.color, variant: p.variant, labelPlacement: p.labelPlacement, step: i, status: p.status ?? (isCurrentStep
+                return ((0, react_1.createElement)(step_1.Step, { ...p, key: p.key ?? i, step: i, status: p.status ?? (isCurrentStep
                         ? status ?? 'processing'
                         : i < innerValue.current
                             ? 'finished'
                             : 'waiting'), clickable: p.clickable ?? clickable, onClick: e => {
                         p.onClick?.(e);
                         (p.clickable ?? clickable) && setInnerValue(i);
-                    }, "data-orientation": orientation }, p.key ?? i));
+                    }, "data-orientation": orientation }));
             });
         }
-        return react_1.Children.map(props.children, (c, i) => {
-            if ((0, react_1.isValidElement)(c)) {
+        return react_2.Children.map(props.children, (c, i) => {
+            if ((0, react_2.isValidElement)(c)) {
                 const isCurrentStep = i === innerValue.current;
                 const { props } = c;
-                return (0, react_1.cloneElement)(c, {
+                return (0, react_2.cloneElement)(c, {
                     step: props.step ?? i,
                     status: props.status ?? (isCurrentStep
                         ? status ?? 'processing'
@@ -53,7 +54,7 @@ size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, la
     return ((0, jsx_runtime_1.jsx)("div", { ...props, css: stepper_style_1.style, className: (0, utils_1.clsx)(stepper_style_1.classes.root, props.className), "data-orientation": orientation, style: {
             gap,
             ...props.style
-        }, children: (0, jsx_runtime_1.jsx)(StepperContext, { value: (0, react_1.useMemo)(() => ({
+        }, children: (0, jsx_runtime_1.jsx)(StepperContext, { value: (0, react_2.useMemo)(() => ({
                 size, gap, color, variant, clickable, labelPlacement
             }), [
                 size, gap, color, variant, clickable, labelPlacement

package/dist/cjs/components/tabs/lineIndicator.d.ts

@@ -1,8 +1,7 @@
-import { ActiveTabRef } from './tabs';
 import { Id } from '../../types';
 export declare function LineIndicator({ value, position, getActiveTab, onTransitionEnd }: {
     value?: Id;
     position: 'top' | 'bottom' | 'left' | 'right';
-    getActiveTab(): ActiveTabRef | undefined;
+    getActiveTab(): HTMLDivElement | undefined;
     onTransitionEnd(): void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/tabs/lineIndicator.js

@@ -6,19 +6,21 @@ const react_1 = require("react");
 const tabs_style_1 = require("./tabs.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
+const tabs_1 = require("./tabs");
 function LineIndicator({ value, position, getActiveTab, onTransitionEnd }) {
+    const context = (0, tabs_1.useTabsContext)();
+    const [color, setColor] = (0, react_1.useState)(context.color);
     const [boundingRect, setBoundingRect] = (0, react_1.useState)();
-    const [color, setColor] = (0, react_1.useState)('primary');
     (0, react_1.useEffect)(() => {
-        const { el, color } = getActiveTab() || {};
-        if (!el) {
+        const activeTab = getActiveTab();
+        if (!activeTab) {
             return;
         }
         if (position === 'top' || position === 'bottom') {
             setBoundingRect({
-                width: el.offsetWidth,
+                width: activeTab.offsetWidth,
                 height: tabs_style_1.indicatorWidth,
-                left: el.offsetLeft,
+                left: activeTab.offsetLeft,
                 ...position === 'top'
                     ? { bottom: 0 }
                     : { top: 0 }
@@ -28,14 +30,14 @@ function LineIndicator({ value, position, getActiveTab, onTransitionEnd }) {
             // position === 'left' || position === 'right'
             setBoundingRect({
                 width: tabs_style_1.indicatorWidth,
-                height: el.offsetHeight,
-                top: el.offsetTop,
+                height: activeTab.offsetHeight,
+                top: activeTab.offsetTop,
                 ...position === 'left'
                     ? { right: 0 }
                     : { left: 0 }
             });
         }
-        setColor(color);
+        activeTab.dataset.color && setColor(activeTab.dataset.color);
     }, [value]);
     const theme = (0, theme_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: onTransitionEnd, style: {

package/dist/cjs/components/tabs/tab.js

@@ -6,14 +6,14 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const tabs_style_1 = require("./tabs.style");
 const tabs_1 = require("./tabs");
-exports.Tab = (0, react_1.memo)(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }) => {
-    const colorValue = (0, utils_1.useColor)(color);
-    const { variant, animating } = (0, tabs_1.useTabsContext)();
+exports.Tab = (0, react_1.memo)(({ prefix, suffix, color, orientation, label, value, disabled, _active, ...props }) => {
+    const { color: contextColor, variant, animating } = (0, tabs_1.useTabsContext)();
+    const colorValue = (0, utils_1.useColor)(color ?? contextColor);
     return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.clsx)(tabs_style_1.classes.tab, props.className), style: {
             borderColor: variant === 'line' && !animating && _active ? colorValue : void 0,
             color: _active ? colorValue : void 0,
             ...props.style
-        }, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: e => {
+        }, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: e => {
             !disabled && props.onClick?.(e);
         }, children: [!!prefix &&
                 (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabPrefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.label, children: label }), !!suffix &&

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

@@ -9,7 +9,7 @@ export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, '
     variant?: 'line' | 'card';
     color?: ColorPropsValue;
     size?: Size;
-    /**选项卡的位置，默认为`top` */
+    /** 选项卡的位置，默认为`top` */
     position?: 'top' | 'bottom' | 'left' | 'right';
     justifyContent?: CSSProperties['justifyContent'];
     fullWidth?: boolean;
@@ -21,11 +21,8 @@ export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, '
     readOnly?: boolean;
     disabled?: boolean;
 }
-export type ActiveTabRef = {
-    el: HTMLElement | null;
-    color: string;
-};
 export declare function useTabsContext(): {
+    color?: ColorPropsValue;
     variant?: TabsProps["variant"];
     animating?: boolean;
 };

package/dist/cjs/components/tabs/tabs.js

@@ -3,21 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 exports.useTabsContext = useTabsContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const tabs_style_1 = require("./tabs.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const tab_1 = require("./tab");
 const tabsEllipsis_1 = require("./tabsEllipsis");
 const lineIndicator_1 = require("./lineIndicator");
-const TabsContext = (0, react_1.createContext)({});
+const TabsContext = (0, react_2.createContext)({});
 function useTabsContext() {
-    return (0, react_1.useContext)(TabsContext);
+    return (0, react_2.useContext)(TabsContext);
 }
-exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'value', variant = 'line', color = 'primary', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
+exports.Tabs = (0, react_2.memo)(({ tabs, labelKey = 'label', primaryKey = 'value', variant = 'line', color = 'primary', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, ...props }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    const [animating, setAnimating] = (0, react_1.useState)(false); // TODO 应当考虑value受控的情况，参考anchorList组件
+    const [animating, setAnimating] = (0, react_2.useState)(false); // TODO 应当考虑value受控的情况，参考anchorList组件
     const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const setInnerValue = (value) => {
         if (!readOnly && !disabled) {
@@ -29,7 +30,7 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
         shouldScroll.current = true;
         setInnerValue(value);
     };
-    const tabRefs = (0, react_1.useRef)(new Map());
+    const tabRefs = (0, react_2.useRef)(new Map());
     const getActiveTab = () => {
         return (0, utils_1.isUnset)(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
     };
@@ -38,26 +39,25 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             return tabs.map((p, i) => {
                 const value = p[primaryKey];
                 const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
-                return ((0, jsx_runtime_1.jsx)(tab_1.Tab, { prefix: p.prefix, suffix: p.suffix, color: p.color, orientation: p.orientation, disabled: p.disabled, ref: el => {
-                        tabRefs.current.set(value, { el, color: p.color || 'primary' });
-                        return () => {
-                            tabRefs.current.delete(value);
-                        };
+                return ((0, react_1.createElement)(tab_1.Tab, { ...p, key: p.key ?? value ?? i, ref: el => {
+                        el
+                            ? tabRefs.current.set(value, el)
+                            : tabRefs.current.delete(value);
                     }, value: value, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(value);
-                    }, _active: active }, p.key ?? value ?? i));
+                    }, _active: active }));
             });
         }
-        return react_1.Children.map(props.children, c => {
-            if ((0, react_1.isValidElement)(c)) {
-                const { value, color, onClick } = c.props;
+        return react_2.Children.map(props.children, c => {
+            if ((0, react_2.isValidElement)(c)) {
+                const { value, onClick } = c.props;
                 const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
-                return (0, react_1.cloneElement)(c, {
+                return (0, react_2.cloneElement)(c, {
                     ref: (0, utils_1.cloneRef)(c.ref, el => {
                         if (!(0, utils_1.isUnset)(value)) {
                             el
-                                ? tabRefs.current.set(value, { el, color: color || 'primary' })
+                                ? tabRefs.current.set(value, el)
                                 : tabRefs.current.delete(value);
                         }
                     }),
@@ -75,9 +75,9 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
      * ----------------------------------------------------------------
      * 滚动
      */
-    const scrollRef = (0, react_1.useRef)(null);
-    const [shadowStart, setShadowStart] = (0, react_1.useState)(false);
-    const [shadowEnd, setShadowEnd] = (0, react_1.useState)(false);
+    const scrollRef = (0, react_2.useRef)(null);
+    const [shadowStart, setShadowStart] = (0, react_2.useState)(false);
+    const [shadowEnd, setShadowEnd] = (0, react_2.useState)(false);
     const setShadow = () => {
         if (position === 'top' || position === 'bottom') {
             const { scrollLeft } = scrollRef.current;
@@ -90,7 +90,7 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             setShadowEnd(scrollTop < scrollRef.current.scrollHeight - scrollRef.current.clientHeight);
         }
     };
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         const scroller = scrollRef.current;
         const onWheel = (e) => {
             scroller.scrollTo({
@@ -107,16 +107,20 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             resizeObserver.disconnect();
         };
     }, [position]);
-    const shouldScroll = (0, react_1.useRef)(true);
-    (0, react_1.useEffect)(() => {
+    const shouldScroll = (0, react_2.useRef)(true);
+    (0, react_2.useEffect)(() => {
         if (shouldScroll.current) {
-            getActiveTab()?.el?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+            getActiveTab()?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
             shouldScroll.current = false;
         }
     }, [shouldScroll.current]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color: color || 'primary', variant }), className: (0, utils_1.clsx)(tabs_style_1.classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
-                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: [(0, jsx_runtime_1.jsx)(TabsContext, { value: (0, react_1.useMemo)(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
-                            (0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab, onTransitionEnd: () => setAnimating(false) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.clsx)(tabs_style_1.classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
+                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: (0, jsx_runtime_1.jsxs)(TabsContext, { value: (0, react_2.useMemo)(() => ({
+                            color, variant, animating
+                        }), [
+                            color, variant, animating
+                        ]), children: [renderTabs(), variant === 'line' &&
+                                (0, jsx_runtime_1.jsx)(lineIndicator_1.LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab, onTransitionEnd: () => setAnimating(false) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 (0, jsx_runtime_1.jsx)(tabsEllipsis_1.TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
 });

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

@@ -72,7 +72,7 @@ function useStyle({ color, variant }) {
                 cursor: pointer;
 
                 &:hover {
-                    color: ${colors.primary.main};
+                    color: ${colorValue};
                 }
             }
 

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

@@ -3,30 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Timeline = void 0;
 exports.useTimelineContext = useTimelineContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const timeline_style_1 = require("./timeline.style");
 const utils_1 = require("../../utils");
 const timelineItem_1 = require("./timelineItem");
-const TimelineContext = (0, react_1.createContext)({});
+const TimelineContext = (0, react_2.createContext)({});
 function useTimelineContext() {
-    return (0, react_1.useContext)(TimelineContext);
+    return (0, react_2.useContext)(TimelineContext);
 }
-exports.Timeline = (0, react_1.memo)(({ items, 
+exports.Timeline = (0, react_2.memo)(({ items, 
 // 共享属性
 variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = 'primary', ...props }) => {
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
-                return ((0, jsx_runtime_1.jsx)(timelineItem_1.TimelineItem, { dot: p.dot, content: p.content, oppositeContent: p.oppositeContent, loading: p.loading, variant: p.variant, labelPosition: p.labelPosition, color: p.color, _index: i }, p.key ?? i));
+                return ((0, react_1.createElement)(timelineItem_1.TimelineItem, { ...p, key: p.key ?? i, _index: i }));
             });
         }
-        return react_1.Children.map(props.children, (child, _index) => {
-            if ((0, react_1.isValidElement)(child)) {
-                return (0, react_1.cloneElement)(child, { _index });
+        return react_2.Children.map(props.children, (child, _index) => {
+            if ((0, react_2.isValidElement)(child)) {
+                return (0, react_2.cloneElement)(child, { _index });
             }
             return child;
         });
     };
-    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() }) }));
+    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_2.useMemo)(() => ({ variant, labelPosition, color, orientation }), [variant, labelPosition, color, orientation]), children: renderItems() }) }));
 });
 exports.Timeline.Item = timelineItem_1.TimelineItem;

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

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleButton = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = require("@emotion/react");
+const react_2 = require("react");
 const flex_1 = require("../flex");
 const utils_1 = require("../../utils");
 const toggleButton_style_1 = require("./toggleButton.style");
@@ -35,13 +36,13 @@ exports.ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled
         if (items) {
             return items.map((p, i) => {
                 const itemValue = p[primaryKey];
-                return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, prefix: p.prefix, suffix: p.suffix, loading: p.loading, label: p.label, ...makeProps(p, itemValue, (0, utils_1.isSelected)(itemValue, innerValue)), children: p.children }, itemValue ?? i));
+                return ((0, react_1.createElement)(button_1.Button, { ...p, key: itemValue ?? i, ...makeProps(p, itemValue, (0, utils_1.isSelected)(itemValue, innerValue)) }, p.children));
             });
         }
-        return react_1.Children.map(props.children, c => {
-            if ((0, react_1.isValidElement)(c)) {
+        return react_2.Children.map(props.children, c => {
+            if ((0, react_2.isValidElement)(c)) {
                 const { props } = c;
-                return (0, react_1.cloneElement)(c, makeProps(props, props.value, (0, utils_1.isSelected)(props.value, innerValue)));
+                return (0, react_2.cloneElement)(c, makeProps(props, props.value, (0, utils_1.isSelected)(props.value, innerValue)));
             }
             return c;
         });

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

@@ -15,7 +15,7 @@ export const AvatarGroup = memo(({ color, size, shape = 'circular', imgProps, it
     const isSurplus = total > max;
     const renderItems = () => {
         if (items?.length) {
-            return items.slice(0, isSurplus ? max - 1 : max).reverse().map((p, i) => _createElement(Avatar, { ...commonProps, key: p.key ?? i, color: p.color, size: p.size, shape: p.shape, src: p.src, imgProps: p.imgProps }, p.children));
+            return items.slice(0, isSurplus ? max - 1 : max).reverse().map((p, i) => _createElement(Avatar, { ...commonProps, ...p, key: p.key ?? i }, p.children));
         }
         return Children.toArray(props.children).slice(0, isSurplus ? max - 1 : max).reverse().map(child => {
             return isValidElement(child)

package/dist/esm/components/bottomNavigation/bottomNavigation.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, isValidElement, memo } from 'react';
 import { classes, style } from './bottomNavigation.style';
 import { clsx, isUnset, useControlled } from '../../utils';
@@ -9,10 +10,10 @@ export const BottomNavigation = memo(({ items, showLabelInactive, primaryKey = '
         if (items) {
             return items.map((p, i) => {
                 const itemValue = p[primaryKey];
-                return (_jsx(BottomNavigationItem, { value: itemValue, icon: p.icon, label: p[labelKey], showLabelInactive: p.showLabelInactive ?? showLabelInactive ?? items.length <= 3, active: !isUnset(itemValue) && innerValue.current === itemValue, onClick: e => {
+                return (_createElement(BottomNavigationItem, { ...p, key: p.key ?? itemValue ?? i, value: itemValue, label: p[labelKey], showLabelInactive: p.showLabelInactive ?? showLabelInactive ?? items.length <= 3, active: !isUnset(itemValue) && innerValue.current === itemValue, onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(itemValue);
-                    } }, p.key ?? itemValue ?? i));
+                    } }));
             });
         }
         showLabelInactive ??= Children.count(props.children) <= 3;

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, isValidElement, memo } from 'react';
 import { clsx } from '../../utils';
 import { classes, style } from './breadcrumb.style';
@@ -8,10 +9,10 @@ export const Breadcrumb = memo(({ separator = '/', readOnly, items, ...props })
     const { text } = useTheme();
     const renderItems = () => {
         if (items) {
-            return items.flatMap(({ icon, label, ...p }, i) => {
+            return items.flatMap(({ icon, ...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: 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),
+                    _createElement(Button, { ...p, key: p.key ?? i, variant: p.variant ?? 'plain', color: p.color ?? (isLast ? text.primary : text.disabled), readOnly: p.readOnly ?? (isLast || readOnly), prefix: p.prefix ?? icon }, p.children),
                     ...isLast ? [] : [
                         _jsx("span", { className: classes.separator, children: separator }, `${classes.separator}_${i}`)
                     ]

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from 'react';
 import { Flex } from '../flex';
 import { clsx, isSelected } from '../../utils';
@@ -19,10 +20,10 @@ 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, 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 => {
+                return (_createElement(Component, { ...p, key: p.key ?? itemValue ?? i, size: p.size ?? size, color: p.color ?? color, checked: isSelected(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
-                    } }, p.key ?? itemValue ?? i));
+                    } }));
             });
         }
         return Children.map(props.children, c => {

package/dist/esm/components/menu/menu.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { createContext, memo, useContext, useMemo } from 'react';
 import { style } from './menu.style';
 import { MenuItem } from '../menuItem';
@@ -27,7 +28,7 @@ size = 'large', showCheckbox, ellipsis, indent, ...props }) => {
     };
     const [innerValue, toggleSelected] = useShallowSelection({ multiple, defaultValue, value, onChange });
     const renderItems = (items) => {
-        return items?.map((p, i) => _jsx(MenuItem, { size: p.size, color: p.color, emphasized: p.emphasized, selected: p.selected, focused: p.focused, disabled: p.disabled, showCheckbox: p.showCheckbox, checkboxProps: p.checkboxProps, ellipsis: p.ellipsis, prefix: p.prefix, suffix: p.suffix, indent: p.indent, expandIcon: p.expandIcon, onExpandedChange: p.onExpandedChange, value: p[primaryKey], label: p[labelKey], children: renderItems(p[childrenKey]) }, p[primaryKey] ?? i));
+        return items?.map((p, i) => _createElement(MenuItem, { ...p, key: p[primaryKey] ?? i, value: p[primaryKey], label: p[labelKey] }, renderItems(p[childrenKey])));
     };
     return (_jsx("div", { ...props, css: style, children: _jsx(MenuContext, { value: useMemo(() => ({
                 inMenu: true,

package/dist/esm/components/segmented/segmented.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, isValidElement, memo, useEffect, useRef, useState } from 'react';
 import { classes, useStyle } from './segmented.style';
 import { clsx, cloneRef, isUnset, useControlled, useDerivedState } from '../../utils';
@@ -46,14 +47,14 @@ export const Segmented = memo(({ options, orientation = 'horizontal', size, labe
             return options.map((p, i) => {
                 const v = p[primaryKey];
                 const active = !isUnset(v) && v === innerValue.current;
-                return (_jsx(SegmentedOption, { orientation: p.orientation, prefix: p.prefix, suffix: p.suffix, disabled: p.disabled, ref: r => {
+                return (_createElement(SegmentedOption, { ...p, key: p.key ?? v ?? i, ref: r => {
                         r
                             ? optionRefs.current.set(v, r)
                             : optionRefs.current.delete(v);
                     }, value: v, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(v);
-                    }, "data-active": active }, p.key ?? v ?? i));
+                    }, "data-active": active }));
             });
         }
         return Children.map(props.children, c => {

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

@@ -15,7 +15,7 @@ export const style = defineCss(({ spacing, text, easing }) => css `
     .${classes.contentWrap} {
         display: flex;
         align-items: center;
-        gap: ${spacing[1]}px;
+        gap: ${spacing[2]}px;
     }
 
     .${classes.placeholder} {

package/dist/esm/components/stepper/stepper.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, createContext, isValidElement, useContext, useMemo } from 'react';
 import { clsx, useControlled } from '../../utils';
 import { classes, style } from './stepper.style';
@@ -15,14 +16,14 @@ size, gap = orientation === 'horizontal' ? 15 : 9, color, variant, clickable, la
         if (steps) {
             return steps.map((p, i) => {
                 const isCurrentStep = i === innerValue.current;
-                return (_jsx(Step, { indicator: p.indicator, title: p.title, prefix: p.prefix, suffix: p.suffix, description: p.description, size: p.size, gap: p.gap, color: p.color, variant: p.variant, labelPlacement: p.labelPlacement, step: i, status: p.status ?? (isCurrentStep
+                return (_createElement(Step, { ...p, key: p.key ?? i, step: i, status: p.status ?? (isCurrentStep
                         ? status ?? 'processing'
                         : i < innerValue.current
                             ? 'finished'
                             : 'waiting'), clickable: p.clickable ?? clickable, onClick: e => {
                         p.onClick?.(e);
                         (p.clickable ?? clickable) && setInnerValue(i);
-                    }, "data-orientation": orientation }, p.key ?? i));
+                    }, "data-orientation": orientation }));
             });
         }
         return Children.map(props.children, (c, i) => {

package/dist/esm/components/tabs/lineIndicator.d.ts

@@ -1,8 +1,7 @@
-import { ActiveTabRef } from './tabs';
 import { Id } from '../../types';
 export declare function LineIndicator({ value, position, getActiveTab, onTransitionEnd }: {
     value?: Id;
     position: 'top' | 'bottom' | 'left' | 'right';
-    getActiveTab(): ActiveTabRef | undefined;
+    getActiveTab(): HTMLDivElement | undefined;
     onTransitionEnd(): void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/components/tabs/lineIndicator.js

@@ -3,19 +3,21 @@ import { useEffect, useState } from 'react';
 import { classes, indicatorWidth } from './tabs.style';
 import { colorTransfer } from '../../utils';
 import { useTheme } from '../theme';
+import { useTabsContext } from './tabs';
 export function LineIndicator({ value, position, getActiveTab, onTransitionEnd }) {
+    const context = useTabsContext();
+    const [color, setColor] = useState(context.color);
     const [boundingRect, setBoundingRect] = useState();
-    const [color, setColor] = useState('primary');
     useEffect(() => {
-        const { el, color } = getActiveTab() || {};
-        if (!el) {
+        const activeTab = getActiveTab();
+        if (!activeTab) {
             return;
         }
         if (position === 'top' || position === 'bottom') {
             setBoundingRect({
-                width: el.offsetWidth,
+                width: activeTab.offsetWidth,
                 height: indicatorWidth,
-                left: el.offsetLeft,
+                left: activeTab.offsetLeft,
                 ...position === 'top'
                     ? { bottom: 0 }
                     : { top: 0 }
@@ -25,14 +27,14 @@ export function LineIndicator({ value, position, getActiveTab, onTransitionEnd }
             // position === 'left' || position === 'right'
             setBoundingRect({
                 width: indicatorWidth,
-                height: el.offsetHeight,
-                top: el.offsetTop,
+                height: activeTab.offsetHeight,
+                top: activeTab.offsetTop,
                 ...position === 'left'
                     ? { right: 0 }
                     : { left: 0 }
             });
         }
-        setColor(color);
+        activeTab.dataset.color && setColor(activeTab.dataset.color);
     }, [value]);
     const theme = useTheme();
     return (_jsx("div", { className: classes.indicator, onTransitionEnd: onTransitionEnd, style: {

package/dist/esm/components/tabs/tab.js

@@ -3,14 +3,14 @@ import { memo } from 'react';
 import { clsx, useColor } from '../../utils';
 import { classes } from './tabs.style';
 import { useTabsContext } from './tabs';
-export const Tab = memo(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }) => {
-    const colorValue = useColor(color);
-    const { variant, animating } = useTabsContext();
+export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, _active, ...props }) => {
+    const { color: contextColor, variant, animating } = useTabsContext();
+    const colorValue = useColor(color ?? contextColor);
     return (_jsxs("div", { ...props, className: clsx(classes.tab, props.className), style: {
             borderColor: variant === 'line' && !animating && _active ? colorValue : void 0,
             color: _active ? colorValue : void 0,
             ...props.style
-        }, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: e => {
+        }, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: e => {
             !disabled && props.onClick?.(e);
         }, children: [!!prefix &&
                 _jsx("div", { className: classes.tabPrefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&

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

@@ -9,7 +9,7 @@ export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, '
     variant?: 'line' | 'card';
     color?: ColorPropsValue;
     size?: Size;
-    /**选项卡的位置，默认为`top` */
+    /** 选项卡的位置，默认为`top` */
     position?: 'top' | 'bottom' | 'left' | 'right';
     justifyContent?: CSSProperties['justifyContent'];
     fullWidth?: boolean;
@@ -21,11 +21,8 @@ export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, '
     readOnly?: boolean;
     disabled?: boolean;
 }
-export type ActiveTabRef = {
-    el: HTMLElement | null;
-    color: string;
-};
 export declare function useTabsContext(): {
+    color?: ColorPropsValue;
     variant?: TabsProps["variant"];
     animating?: boolean;
 };

package/dist/esm/components/tabs/tabs.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { classes, useStyle } from './tabs.style';
 import { clsx, cloneRef, isUnset, useControlled } from '../../utils';
@@ -34,26 +35,25 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', vari
             return tabs.map((p, i) => {
                 const value = p[primaryKey];
                 const active = !isUnset(value) && value === innerValue.current;
-                return (_jsx(Tab, { prefix: p.prefix, suffix: p.suffix, color: p.color, orientation: p.orientation, disabled: p.disabled, ref: el => {
-                        tabRefs.current.set(value, { el, color: p.color || 'primary' });
-                        return () => {
-                            tabRefs.current.delete(value);
-                        };
+                return (_createElement(Tab, { ...p, key: p.key ?? value ?? i, ref: el => {
+                        el
+                            ? tabRefs.current.set(value, el)
+                            : tabRefs.current.delete(value);
                     }, value: value, label: p[labelKey], onClick: e => {
                         p.onClick?.(e);
                         setInnerValue(value);
-                    }, _active: active }, p.key ?? value ?? i));
+                    }, _active: active }));
             });
         }
         return Children.map(props.children, c => {
             if (isValidElement(c)) {
-                const { value, color, onClick } = c.props;
+                const { value, onClick } = c.props;
                 const active = !isUnset(value) && value === innerValue.current;
                 return cloneElement(c, {
                     ref: cloneRef(c.ref, el => {
                         if (!isUnset(value)) {
                             el
-                                ? tabRefs.current.set(value, { el, color: color || 'primary' })
+                                ? tabRefs.current.set(value, el)
                                 : tabRefs.current.delete(value);
                         }
                     }),
@@ -106,13 +106,17 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', vari
     const shouldScroll = useRef(true);
     useEffect(() => {
         if (shouldScroll.current) {
-            getActiveTab()?.el?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+            getActiveTab()?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
             shouldScroll.current = false;
         }
     }, [shouldScroll.current]);
-    return (_jsxs("div", { ...props, css: useStyle({ color: color || 'primary', variant }), className: clsx(classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
-                    _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsxs("div", { className: classes.scrollWrap, style: { justifyContent }, children: [_jsx(TabsContext, { value: useMemo(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
-                            _jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab, onTransitionEnd: () => setAnimating(false) })] }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+    return (_jsxs("div", { ...props, css: useStyle({ color, variant }), className: clsx(classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
+                    _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsx("div", { className: classes.scrollWrap, style: { justifyContent }, children: _jsxs(TabsContext, { value: useMemo(() => ({
+                            color, variant, animating
+                        }), [
+                            color, variant, animating
+                        ]), children: [renderTabs(), variant === 'line' &&
+                                _jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab, onTransitionEnd: () => setAnimating(false) })] }) }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     _jsxs("div", { className: classes.suffix, children: [(shadowStart || shadowEnd) &&
                                 _jsx(TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
 });

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

@@ -68,7 +68,7 @@ export function useStyle({ color, variant }) {
                 cursor: pointer;
 
                 &:hover {
-                    color: ${colors.primary.main};
+                    color: ${colorValue};
                 }
             }
 

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, createContext, isValidElement, memo, useContext, useMemo } from 'react';
 import { classes, style } from './timeline.style';
 import { clsx } from '../../utils';
@@ -13,7 +14,7 @@ variant = 'outlined', labelPosition = 'end', orientation = 'vertical', color = '
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
-                return (_jsx(TimelineItem, { dot: p.dot, content: p.content, oppositeContent: p.oppositeContent, loading: p.loading, variant: p.variant, labelPosition: p.labelPosition, color: p.color, _index: i }, p.key ?? i));
+                return (_createElement(TimelineItem, { ...p, key: p.key ?? i, _index: i }));
             });
         }
         return Children.map(props.children, (child, _index) => {

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
 import { Children, cloneElement, isValidElement } from 'react';
 import { Flex } from '../flex';
 import { clsx, isSelected } from '../../utils';
@@ -32,7 +33,7 @@ export const ToggleButton = (({ variant = 'filled', size, color = 'primary', dis
         if (items) {
             return items.map((p, i) => {
                 const itemValue = p[primaryKey];
-                return (_jsx(Button, { ref: p.ref, shape: p.shape, prefix: p.prefix, suffix: p.suffix, loading: p.loading, label: p.label, ...makeProps(p, itemValue, isSelected(itemValue, innerValue)), children: p.children }, itemValue ?? i));
+                return (_createElement(Button, { ...p, key: itemValue ?? i, ...makeProps(p, itemValue, isSelected(itemValue, innerValue)) }, p.children));
             });
         }
         return Children.map(props.children, c => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",