@canlooks/can-ui 0.0.25 → 0.0.27

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

@@ -1,56 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
+const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('table');
-exports.style = (0, utils_1.defineCss)(({ mode, borderRadius, spacing, gray, easing }) => {
-    const borderColor = gray(mode === 'light' ? .12 : .32);
-    const bg = gray(mode === 'light' ? .02 : .22);
-    const bgStriped = gray(mode === 'light' ? .01 : .21);
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('table', [
+    'container',
+    'cell'
+]);
+exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, easing, colors }) => {
+    const headerBg = gray(mode === 'light' ? .02 : .22);
+    const stripedBg = gray(mode === 'light' ? .01 : .21);
+    const selectedBg = (0, color_1.default)(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return (0, react_1.css) `
         width: 100%;
         border-spacing: 0;
-        border-radius: ${borderRadius}px ${borderRadius}px 0 0;
 
         thead, tfoot {
-            tr {
-                background-color: ${bg};
-                position: sticky;
-                z-index: 2;
+            position: sticky;
+            z-index: 3;
+
+            th, td {
+                background-color: ${headerBg};
             }
         }
 
-        thead tr {
+        thead {
             top: 0;
-
-            &:first-of-type > * {
-                &:first-of-type {
-                    border-top-left-radius: ${borderRadius}px;
-                }
-
-                &:last-of-type {
-                    border-top-right-radius: ${borderRadius}px;
-                }
-            }
         }
 
-        tfoot tr {
+        tfoot {
             bottom: 0;
-            
-            & > * {
-                border-top: 1px solid ${borderColor};
+
+            th, td {
+                border-top: 1px solid ${divider};
             }
         }
 
         th, td {
+            position: relative;
             text-align: left;
             padding: 12px ${spacing[5]}px;
-            border-bottom: 1px solid ${borderColor};
-
-            &[data-grouped=true] {
-                text-align: center;
-            }
+            border-bottom: 1px solid ${divider};
+            transition: background-color .25s ${easing.easeOut};
         }
 
         &[data-size=small] {
@@ -65,40 +58,66 @@ exports.style = (0, utils_1.defineCss)(({ mode, borderRadius, spacing, gray, eas
             }
         }
 
-        &[data-bordered=true] {
-            border-top: 1px solid ${borderColor};
-            border-left: 1px solid ${borderColor};
+        &[data-bordered=all], &[data-bordered=true] {
+            border-top: 1px solid ${divider};
+            border-left: 1px solid ${divider};
 
             th, td {
-                border-right: 1px solid ${borderColor};
+                border-right: 1px solid ${divider};
             }
         }
 
-        &:not([data-bordered=true]) {
-            thead > tr > * {
-                &:not(:first-of-type):before {
-                    content: '';
-                    width: 1px;
-                    height: 20px;
-                    background-color: ${borderColor};
-                    position: absolute;
-                    inset: auto auto auto 0;
+        &:not([data-bordered=all], [data-bordered=true]) {
+            thead {
+                th, td {
+                    &:not(:first-of-type) {
+                        &:before {
+                            content: '';
+                            width: 2px;
+                            height: 1em;
+                            background-color: ${divider};
+                            position: absolute;
+                            top: calc(50% - .5em);
+                            left: 0;
+                        }
+                    }
                 }
             }
         }
 
+        &[data-bordered=out] {
+            border-top: 1px solid ${divider};
 
-        tr {
-            transition: background-color .2s ${easing.easeOut};
+            th, td {
+                &:first-of-type {
+                    border-left: 1px solid ${divider};
+                }
+
+                &:last-of-type {
+                    border-right: 1px solid ${divider};
+                }
+            }
+        }
+
+        tbody tr {
+            &[data-selected=true] {
+                th, td {
+                    background-color: ${selectedBg};
+                }
+            }
 
             &:not([data-selected=true]):hover {
-                background-color: ${bg};
+                th, td {
+                    background-color: ${headerBg};
+                }
             }
         }
 
         &[data-striped=true] {
             tbody tr:nth-of-type(even):not(:hover):not([data-selected=true]) {
-                background-color: ${bgStriped};
+                th, td {
+                    background-color: ${stripedBg};
+                }
             }
         }
     `;

package/dist/cjs/components/table/tableSticky.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+import { DivProps } from '../../types';
+export declare function TableContainer(props: DivProps): import("@emotion/react/jsx-runtime").JSX.Element;
+type CellProps = {
+    sticky?: 'left' | 'right';
+};
+export interface TdCellProps extends Partial<JSX.IntrinsicElements['td']>, CellProps {
+}
+export interface ThCellProps extends Partial<JSX.IntrinsicElements['th']>, CellProps {
+}
+export declare function TdCell(props: TdCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function ThCell(props: ThCellProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/table/tableSticky.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableContainer = TableContainer;
+exports.TdCell = TdCell;
+exports.ThCell = ThCell;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const table_style_1 = require("./table.style");
+const tableSticky_style_1 = require("./tableSticky.style");
+function TableContainer(props) {
+    const [scrolledLeft, setScrolledLeft] = (0, react_1.useState)(false);
+    const [scrolledRight, setScrolledRight] = (0, react_1.useState)(false);
+    const innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const el = innerRef.current;
+        const scroll = () => {
+            setScrolledLeft(!!el.scrollLeft);
+            setScrolledRight(!!(el.scrollWidth - el.clientWidth - el.scrollLeft));
+        };
+        scroll();
+        el.addEventListener('scroll', scroll);
+        return () => {
+            el.removeEventListener('scroll', scroll);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: (0, utils_1.cloneRef)(props.ref, innerRef), css: tableSticky_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+}
+function TdCell(props) {
+    return (0, jsx_runtime_1.jsx)("td", { ...useStickyCellProps(props) });
+}
+function ThCell(props) {
+    return (0, jsx_runtime_1.jsx)("th", { ...useStickyCellProps(props) });
+}
+function useStickyCellProps({ ref, sticky, ...props }) {
+    const innerRef = (0, react_1.useRef)(null);
+    const [offset, setOffset] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!sticky) {
+            return;
+        }
+        const siblings = [];
+        const resizeObserver = new ResizeObserver(() => {
+            setOffset(siblings.reduce((acc, el) => {
+                return acc + el.offsetWidth;
+            }, 0));
+        });
+        const recurve = (currentEl = innerRef.current) => {
+            const sibling = sticky === 'left'
+                ? currentEl.previousElementSibling
+                : currentEl.nextElementSibling;
+            if (sibling) {
+                if (sibling.dataset.sticky === sticky) {
+                    siblings.push(sibling);
+                    resizeObserver.observe(sibling);
+                }
+                recurve(sibling);
+            }
+        };
+        recurve();
+        return () => {
+            resizeObserver.disconnect();
+        };
+    });
+    return {
+        ...props,
+        ref: (0, utils_1.cloneRef)(ref, innerRef),
+        css: tableSticky_style_1.style,
+        className: (0, utils_1.clsx)(table_style_1.classes.cell, props.className),
+        'data-sticky': sticky,
+        style: {
+            ...sticky && { [sticky]: offset },
+            ...props.style
+        }
+    };
+}

package/dist/cjs/components/table/tableSticky.style.d.ts

@@ -0,0 +1 @@
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/table/tableSticky.style.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = void 0;
+const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+exports.style = (0, utils_1.defineCss)(({ background, easing }) => (0, react_1.css) `
+    overflow: auto;
+
+    tbody tr {
+        &:not(:hover):not([data-selected=true]) {
+            th, td {
+                background-color: ${background.content};
+            }
+        }
+    }
+
+    th, td {
+        &[data-sticky=left], &[data-sticky=right] {
+            overflow: visible;
+            position: sticky;
+            z-index: 2;
+
+            &:after {
+                content: '';
+                width: 30px;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                transition: all .3s ${easing.easeOut};
+                pointer-events: none;
+            }
+        }
+
+        &[data-sticky=left]:after {
+            left: 100%;
+        }
+
+        &[data-sticky=right]:after {
+            right: 100%;
+        }
+    }
+
+    &[data-scrolled-left=true] {
+        th, td {
+            &[data-sticky=left]:not(:has(+ [data-sticky=left])):after {
+                box-shadow: inset 12px 0 9px -9px rgba(0, 0, 0, .08);
+            }
+        }
+    }
+
+    &[data-scrolled-right=true] {
+        th, td {
+            &:not([data-sticky=right]) + [data-sticky=right]:after {
+                box-shadow: inset -12px 0 9px -9px rgba(0, 0, 0, .08);
+            }
+        }
+    }
+`);

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

@@ -0,0 +1,8 @@
+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;
+    onTransitionEnd(): void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineIndicator = LineIndicator;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const tabs_style_1 = require("./tabs.style");
+const utils_1 = require("../../utils");
+const theme_1 = require("../theme");
+function LineIndicator({ value, position, getActiveTab, onTransitionEnd }) {
+    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) {
+            return;
+        }
+        if (position === 'top' || position === 'bottom') {
+            setBoundingRect({
+                width: el.offsetWidth,
+                height: tabs_style_1.indicatorWidth,
+                left: el.offsetLeft,
+                ...position === 'top'
+                    ? { bottom: 0 }
+                    : { top: 0 }
+            });
+        }
+        else {
+            // position === 'left' || position === 'right'
+            setBoundingRect({
+                width: tabs_style_1.indicatorWidth,
+                height: el.offsetHeight,
+                top: el.offsetTop,
+                ...position === 'left'
+                    ? { right: 0 }
+                    : { left: 0 }
+            });
+        }
+        setColor(color);
+    }, [value]);
+    const theme = (0, theme_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: onTransitionEnd, style: {
+            ...boundingRect,
+            backgroundColor: (0, utils_1.colorTransfer)(color, theme)
+        } }));
+}

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Id } from '../../types';
-export interface TabProps extends Omit<DIVProps, 'prefix'> {
+import { ColorPropsValue, DivProps, Id } from '../../types';
+export interface TabProps extends Omit<DivProps, 'prefix'> {
     prefix?: ReactNode;
     suffix?: ReactNode;
     /** color仅生效于激活状态，普通状态样式请使用css修改 */

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

@@ -9,7 +9,7 @@ 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)();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, utils_1.classnames)(tabs_style_1.classes.tab, props.className), style: {
+    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

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

@@ -1,8 +1,8 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Id, Obj, Size } from '../../types';
+import { ColorPropsValue, DivProps, Id, Obj, Size } from '../../types';
 import { Tab, TabProps } from './tab';
 export type TabType = TabProps & Obj;
-export interface TabsProps<T extends TabType = TabType> extends Omit<DIVProps, 'prefix' | 'defaultValue' | 'onChange'> {
+export interface TabsProps<T extends TabType = TabType> extends Omit<DivProps, 'prefix' | 'defaultValue' | 'onChange'> {
     tabs?: T[];
     labelKey?: keyof T;
     primaryKey?: keyof T;
@@ -21,8 +21,12 @@ 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(): {
-    variant?: TabsProps<TabType>["variant"];
+    variant?: TabsProps["variant"];
     animating?: boolean;
 };
 export declare const Tabs: {

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

@@ -9,6 +9,7 @@ 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)({});
 function useTabsContext() {
     return (0, react_1.useContext)(TabsContext);
@@ -16,7 +17,7 @@ function useTabsContext() {
 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 }) => {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    const [animating, setAnimating] = (0, react_1.useState)(false);
+    const [animating, setAnimating] = (0, react_1.useState)(false); // TODO 应当考虑value受控的情况，参考anchorList组件
     const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
     const setInnerValue = (value) => {
         if (!readOnly && !disabled) {
@@ -29,48 +30,9 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
         setInnerValue(value);
     };
     const tabRefs = (0, react_1.useRef)(new Map());
-    const activeTab = (0, react_1.useMemo)(() => {
-        return !(0, utils_1.isUnset)(innerValue.current) ? tabRefs.current.get(innerValue.current) : void 0;
-    }, [innerValue.current]);
-    /**
-     * 计算指示器的位置
-     */
-    const fitIndicatorRect = () => {
-        if (variant !== 'card') {
-            const el = activeTab?.el;
-            if (el) {
-                if (position === 'top' || position === 'bottom') {
-                    return {
-                        width: el.offsetWidth,
-                        height: tabs_style_1.indicatorWidth,
-                        left: el.offsetLeft,
-                        ...position === 'top'
-                            ? { bottom: 0 }
-                            : { top: 0 }
-                    };
-                }
-                return {
-                    width: tabs_style_1.indicatorWidth,
-                    height: el.offsetHeight,
-                    top: el.offsetTop,
-                    ...position === 'left'
-                        ? { right: 0 }
-                        : { left: 0 }
-                };
-            }
-        }
-        return {
-            width: 0,
-            height: 0,
-            left: 0,
-            top: 0
-        };
+    const getActiveTab = () => {
+        return (0, utils_1.isUnset)(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
     };
-    const [indicatorRect, setIndicatorRect] = (0, utils_1.useDerivedState)(fitIndicatorRect, [innerValue.current, variant, position]);
-    (0, react_1.useEffect)(() => {
-        // 仅首次渲染需要计算
-        setIndicatorRect(fitIndicatorRect());
-    }, []);
     const renderTabs = () => {
         if (tabs) {
             return tabs.map((p, i) => {
@@ -93,14 +55,17 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
                 const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
                 return (0, react_1.cloneElement)(c, {
                     ref: (0, utils_1.cloneRef)(c.ref, el => {
-                        !(0, utils_1.isUnset)(value) && tabRefs.current.set(value, { el, color: color || 'primary' });
+                        if (!(0, utils_1.isUnset)(value)) {
+                            el
+                                ? tabRefs.current.set(value, { el, color: color || 'primary' })
+                                : tabRefs.current.delete(value);
+                        }
                     }),
                     onClick(e) {
                         onClick?.(e);
                         !(0, utils_1.isUnset)(value) && setInnerValue(value);
                     },
-                    _active: active,
-                    _animating: animating
+                    _active: active
                 });
             }
             return c;
@@ -126,34 +91,32 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
         }
     };
     (0, react_1.useEffect)(() => {
+        const scroller = scrollRef.current;
         const onWheel = (e) => {
-            scrollRef.current.scrollTo({
-                left: scrollRef.current.scrollLeft + e.deltaY
+            scroller.scrollTo({
+                left: scroller.scrollLeft + e.deltaY
             });
         };
         if (position === 'top' || position === 'bottom') {
-            scrollRef.current?.addEventListener('wheel', onWheel, { passive: false });
+            scroller.addEventListener('wheel', onWheel, { passive: false });
         }
         const resizeObserver = new ResizeObserver(setShadow);
-        resizeObserver.observe(scrollRef.current);
+        resizeObserver.observe(scroller);
         return () => {
-            scrollRef.current?.removeEventListener('wheel', onWheel);
+            scroller.removeEventListener('wheel', onWheel);
             resizeObserver.disconnect();
         };
     }, [position]);
     const shouldScroll = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
         if (shouldScroll.current) {
-            activeTab?.el?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+            getActiveTab()?.el?.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, variant }), className: (0, utils_1.classnames)(tabs_style_1.classes.root, props.className), "data-size": size, "data-animating": animating, "data-position": position, "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 &&
+    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)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
-                                    ...indicatorRect.current,
-                                    backgroundColor: activeTab && (0, utils_1.colorTransfer)(activeTab.color, theme)
-                                } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+                            (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.d.ts

@@ -1,13 +1,13 @@
 import { TabsProps } from './tabs';
 export declare const classes: {
     label: string;
-    start: string;
+    indicator: string;
     prefix: string;
     end: string;
+    start: string;
     scroll: string;
     ellipsis: string;
     tab: string;
-    indicator: string;
     suffix: string;
     scrollWrap: string;
     tabPrefix: string;

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

@@ -49,7 +49,7 @@ function useStyle({ color, variant }) {
                 display: flex;
                 z-index: 2;
                 border-bottom: 1px solid ${divider};
-                transition: box-shadow .2s ${easing.easeOut};
+                transition: box-shadow .25s ${easing.easeOut};
 
                 &[data-show=true] {
                     box-shadow: 0 0 12px rgba(0, 0, 0, .2);
@@ -130,6 +130,7 @@ function useStyle({ color, variant }) {
                 text-overflow: ellipsis;
                 overflow: hidden;
                 z-index: 1;
+                -webkit-tap-highlight-color: transparent;
 
                 &[data-orientation=vertical] {
                     flex-direction: column;
@@ -190,7 +191,7 @@ function useStyle({ color, variant }) {
             }
 
             &:not([data-read-only=true]):not([data-disabled=true]) {
-                \.${exports.classes.tab}:not([data-disabled=true]) {
+                .${exports.classes.tab}:not([data-disabled=true]) {
                     cursor: pointer;
                     
                     &:not([data-active=true]):hover {
@@ -219,7 +220,7 @@ function useStyle({ color, variant }) {
                 }
 
                 .${exports.classes.tab} {
-                    transition: color .2s ${easing.easeOut};
+                    transition: color .25s ${easing.easeOut};
                 }
 
                 &[data-position=top],
@@ -287,7 +288,9 @@ function useStyle({ color, variant }) {
                 .${exports.classes.indicator} {
                     position: absolute;
                     z-index: 1;
-                    transition: all .3s ${easing.bounce};
+                    transition-property: width, height, left, top;
+                    transition-duration: .3s;
+                    transition-timing-function: ${easing.bounce};
                 }
 
                 &:not([data-animating=true]) {
@@ -307,7 +310,7 @@ function useStyle({ color, variant }) {
                 .${exports.classes.tab} {
                     border: 1px solid ${gray(.1)};
                     background-color: ${background.body};
-                    transition: color .2s ${easing.easeOut}, background-color .2s ${easing.easeOut};
+                    transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
 
                     &[data-active=true] {
                         background-color: ${background.content};

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

@@ -4,10 +4,11 @@ exports.TabsEllipsis = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const tabs_style_1 = require("./tabs.style");
-const icons_1 = require("@ant-design/icons");
 const popper_1 = require("../popper");
 const tabsEllipsis_style_1 = require("./tabsEllipsis.style");
 const optionsBase_1 = require("../optionsBase");
+const __1 = require("../..");
+const faEllipsis_1 = require("@fortawesome/free-solid-svg-icons/faEllipsis");
 exports.TabsEllipsis = (0, react_1.memo)(({ tabs, children, labelKey = 'label', primaryKey = 'value', value, onToggleSelected }) => {
     const [open, setOpen] = (0, react_1.useState)(false);
     const getOptions = () => {
@@ -25,5 +26,5 @@ exports.TabsEllipsis = (0, react_1.memo)(({ tabs, children, labelKey = 'label',
         onToggleSelected(value);
         setOpen(false);
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: tabsEllipsis_style_1.tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.ellipsis, children: (0, jsx_runtime_1.jsx)(icons_1.EllipsisOutlined, {}) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(popper_1.Popper, { css: tabsEllipsis_style_1.tabsEllipsisPopperStyle, placement: "bottomRight", trigger: "hover", open: open, onOpenChange: setOpen, content: (0, jsx_runtime_1.jsx)(optionsBase_1.OptionsBase, { options: getOptions(), selectedValue: value, onToggleSelected: _onToggleSelected }), children: (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.ellipsis, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEllipsis_1.faEllipsis }) }) }) }));
 });

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { ColorPropsValue, DIVProps, Size } from '../../types';
-export interface TagProps extends Omit<DIVProps, 'prefix'> {
+import { ColorPropsValue, DivProps, Size } from '../../types';
+export interface TagProps extends Omit<DivProps, 'prefix'> {
     variant?: 'filled' | 'outlined' | 'plain';
     color?: ColorPropsValue;
     shape?: 'square' | 'rounded';