@sheinx/base 3.0.0-alpha.2 → 3.0.0-alpha.20

package/esm/tabs/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;;AAwFtC,wBAAqC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;;AA0FtC,wBAAqC"}

package/esm/tabs/tab.js

@@ -21,7 +21,8 @@ var Tab = function Tab(props, ref) {
   var jssStyle = props.jssStyle,
     tab = props.tab,
     disabled = props.disabled,
-    id = props.id;
+    id = props.id,
+    color = props.color;
   var _useTabsContext = (0, _hooks.useTabsContext)(),
     active = _useTabsContext.active,
     _useTabsContext$shape = _useTabsContext.shape,
@@ -37,9 +38,9 @@ var Tab = function Tab(props, ref) {
     var stateProps = [];
     if (isActive) stateProps.push('active');
     if (disabled) stateProps.push('disabled');
-    return {
-      'data-soui-state': stateProps.join(' ')
-    };
+    return _hooks.util.getDataAttribute({
+      state: stateProps.join(' ')
+    });
   };
   var handleClick = function handleClick() {
     if (disabled) return;
@@ -73,6 +74,9 @@ var Tab = function Tab(props, ref) {
   if (inactiveBackground && !isActive) {
     style.background = inactiveBackground;
   }
+  if (shape === 'card') {
+    style.color = color;
+  }
   if (shape === 'button') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, _objectSpread(_objectSpread({
     className: tabClass,
     jssStyle: {
@@ -80,6 +84,7 @@ var Tab = function Tab(props, ref) {
     }
   }, getStateProps()), {}, {
     style: style,
+    disabled: disabled,
     type: isActive ? 'primary' : 'secondary',
     onClick: handleClick,
     children: tab

package/esm/tabs/tab.type.d.ts

@@ -5,6 +5,7 @@ export interface TabData {
     id: string | number;
     tab: React.ReactNode;
     disabled?: boolean;
+    color?: string;
     jssStyle: {
         tabs: () => TabsClasses;
         button: () => ButtonClasses;

package/esm/tabs/tab.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.type.d.ts","sourceRoot":"","sources":["tab.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,QAAS,SAAQ,OAAO;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"tab.type.d.ts","sourceRoot":"","sources":["tab.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,QAAS,SAAQ,OAAO;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/esm/tabs/tabs-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAoMzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAmNzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/tabs/tabs-header.js

@@ -8,9 +8,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 require("core-js/modules/es.array.includes.js");
 require("core-js/modules/es.array.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@sheinx/hooks");
@@ -29,15 +30,25 @@ var TabsHeader = function TabsHeader(props) {
     extra = props.extra,
     splitColor = props.splitColor,
     tabBarStyle = props.tabBarStyle,
-    getPosition = props.getPosition;
+    getPosition = props.getPosition,
+    sticky = props.sticky;
   var headerRef = (0, _react.useRef)(null);
   var scrollRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
   var tabRef = (0, _react.useRef)({});
   var _useTabsContext = (0, _hooks.useTabsContext)(),
     shape = _useTabsContext.shape,
     isVertical = _useTabsContext.isVertical,
     onCollapsible = _useTabsContext.onCollapsible,
     active = _useTabsContext.active;
+  (0, _react.useEffect)(function () {
+    if (sticky && headerRef.current && scrollRef.current && !loaded) {
+      setLoaded(true);
+    }
+  }, [loaded, sticky]);
   var _useTransform = (0, _hooks.useTransform)({
       autoScroll: true,
       direction: isVertical ? 'Y' : 'X',
@@ -56,52 +67,39 @@ var TabsHeader = function TabsHeader(props) {
   var headerClass = (0, _classnames.default)(headerStyle.header, {});
   var headerWrapperClass = (0, _classnames.default)(headerStyle.headerWrapper, {});
   var buttonStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.button) || {};
+  var calculateOffset = function calculateOffset(scrollOffsetValue, currentOffsetValue, currentOffsetValueOther) {
+    var isAdditon = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    var nextOffset = scrollOffsetValue;
+    var startOffset = isAdditon ? scrollOffsetValue - currentOffsetValue : scrollOffsetValue + currentOffsetValue;
+    if (currentOffsetValue < 0 || currentOffsetValueOther > 0) {
+      nextOffset = startOffset;
+    }
+    return nextOffset;
+  };
   (0, _react.useEffect)(function () {
     if (!shouldScroll) return;
     var getActiveTabOffest = function getActiveTabOffest() {
       var currentTab = tabRef.current[active];
-      if (!currentTab) return 0;
-      if (!headerRef.current) return 0;
-      if (!scrollRef.current) return 0;
+      if (!currentTab || !headerRef.current || !scrollRef.current) return 0;
       var currentOffest = getRectDiff(currentTab, headerRef.current);
       var scrollOffest = getRectDiff(scrollRef.current, headerRef.current);
       if (['top-right', 'bottom-right'].includes(getPosition)) {
-        var _nextOffset = scrollOffest.right;
-        var _startOffset = scrollOffest.right - currentOffest.left;
-        if (currentOffest.left < 0 || currentOffest.right > 0) {
-          _nextOffset = _startOffset;
-        }
-        return -_nextOffset;
+        return -calculateOffset(scrollOffest.right, currentOffest.left, currentOffest.right);
       }
       if (['left-top', 'right-top'].includes(getPosition)) {
-        var _nextOffset2 = -scrollOffest.top;
-        var _startOffset2 = -scrollOffest.top + currentOffest.top;
-        if (currentOffest.top < 0 || currentOffest.bottom > 0) {
-          _nextOffset2 = _startOffset2;
-        }
-        return _nextOffset2;
+        return calculateOffset(-scrollOffest.top, currentOffest.top, currentOffest.bottom, false);
       }
       if (['left-bottom', 'right-bottom'].includes(getPosition)) {
-        var _nextOffset3 = scrollOffest.bottom;
-        var _startOffset3 = scrollOffest.bottom - currentOffest.top;
-        if (currentOffest.top < 0 || currentOffest.bottom > 0) {
-          _nextOffset3 = _startOffset3;
-        }
-        return -_nextOffset3;
-      }
-      var nextOffset = -scrollOffest.left;
-      var startOffset = -scrollOffest.left + currentOffest.left;
-      if (currentOffest.left < 0 || currentOffest.right > 0) {
-        nextOffset = startOffset;
+        return -calculateOffset(scrollOffest.bottom, currentOffest.top, currentOffest.bottom);
       }
-      return nextOffset;
+      return calculateOffset(-scrollOffest.left, currentOffest.left, currentOffest.right, false);
     };
     setTransform(getActiveTabOffest());
   }, [active, tabRef.current, headerRef.current, scrollRef.current, shouldScroll]);
   var getDataProps = function getDataProps(options) {
-    return _objectSpread({
-      'data-soui-shape': shape
-    }, options);
+    return _hooks.util.getDataAttribute(_objectSpread({
+      shape: shape
+    }, options));
   };
   var handlePrev = function handlePrev() {
     if (!headerRef.current) return;
@@ -118,7 +116,7 @@ var TabsHeader = function TabsHeader(props) {
     }, getDataProps()), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ref: scrollRef,
-        className: headerStyle.headerScroll,
+        className: (0, _classnames.default)(headerStyle.headerScroll, shape === 'card' ? headerStyle.cardHr : ''),
         onWheel: handleTransform,
         style: transformStyle,
         children: [shape === 'button' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default.Group, {
@@ -152,7 +150,7 @@ var TabsHeader = function TabsHeader(props) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
       className: (0, _classnames.default)(headerStyle.prev)
     }, getDataProps({
-      'data-soui-state': atStart ? 'disabled' : ''
+      state: atStart ? 'disabled' : ''
     })), {}, {
       onClick: handlePrev,
       children: shape === 'card' ? _icons.default.ArrowLeft : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -165,7 +163,7 @@ var TabsHeader = function TabsHeader(props) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
       className: headerStyle.next
     }, getDataProps({
-      'data-soui-state': atEnd ? 'disabled' : ''
+      state: atEnd ? 'disabled' : ''
     })), {}, {
       onClick: handleNext,
       children: shape === 'card' ? _icons.default.ArrowRight : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -194,7 +192,7 @@ var TabsHeader = function TabsHeader(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: headerWrapperClass,
     style: tabBarStyle,
-    children: [collapsible && renderCollapsibleButton(), shouldScroll && renderPrevButton(), renderTab(), shouldScroll && renderNextButton(), extra && renderExtra(), !hideSplit && renderHr()]
+    children: [!hideSplit && shape !== 'card' && renderHr(), collapsible && renderCollapsibleButton(), shouldScroll && renderPrevButton(), renderTab(), shouldScroll && renderNextButton(), extra && renderExtra()]
   });
 };
 var _default = TabsHeader;

package/esm/tabs/tabs-header.type.d.ts

@@ -16,5 +16,6 @@ export interface TabsHeaderProps {
     collapsible?: boolean;
     tabBarStyle?: React.CSSProperties;
     getPosition?: string;
+    sticky?: boolean;
 }
 //# sourceMappingURL=tabs-header.type.d.ts.map

package/esm/tabs/tabs-header.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-header.type.d.ts","sourceRoot":"","sources":["tabs-header.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IACF,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"tabs-header.type.d.ts","sourceRoot":"","sources":["tabs-header.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IACF,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/esm/tabs/tabs-panel.type.d.ts

@@ -1,15 +1,48 @@
 /// <reference types="react" />
+import { CommonType } from '../common/type';
 import { ButtonClasses } from '../button/button.type';
 import { TabsContextProps } from '@sheinx/hooks';
 import { TabsClasses } from './tabs.type';
-export interface TabsPanelProps extends TabsContextProps {
+export interface TabsPanelProps extends TabsContextProps, Pick<CommonType, 'className' | 'style'> {
     jssStyle?: {
         tabs: () => TabsClasses;
         button: () => ButtonClasses;
     };
+    /**
+     * @en The default is index
+     * @cn 选填，默认为 index
+     */
     id?: string | number;
+    /**
+     * @en Tab content
+     * @cn 标签标题内容
+     * @default index
+     */
     tab: React.ReactNode;
+    /**
+     * @en Specifies the Panel should be disabled
+     * @cn 是否禁用
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * @en Panel content
+     * @cn Panel 内容
+     */
     children?: React.ReactNode;
+    /**
+     * @en The color of the dividing line, only takes effect when shape=line
+     * @cn 分割线颜色,仅在shape=line的时候生效
+     */
+    splitColor?: string;
+    /**
+     * @deprecated 即将弃用，请使用 splitColor 替代
+     */
+    border?: string;
+    /**
+     * @en The color of tab"s text only when the shape is "card"
+     * @cn 标签页文字颜色，仅当 shape 为 "card" 时生效
+     */
+    color?: string;
 }
 //# sourceMappingURL=tabs-panel.type.d.ts.map

package/esm/tabs/tabs-panel.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-panel.type.d.ts","sourceRoot":"","sources":["tabs-panel.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"tabs-panel.type.d.ts","sourceRoot":"","sources":["tabs-panel.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,cAAe,SAAQ,gBAAgB,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC/F,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB;;;;OAIG;IACH,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAe,SAAS,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAInD,QAAA,MAAM,IAAI;YAAW,SAAS;;CAyN7B,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAe,SAAS,EAAE,MAAM,aAAa,CAAC;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAOnD,QAAA,MAAM,IAAI;YAAW,SAAS;;CA2P7B,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/esm/tabs/tabs.js

@@ -23,19 +23,22 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@sheinx/hooks");
 var _tabsPanel = _interopRequireDefault(require("./tabs-panel"));
 var _tabsHeader = _interopRequireDefault(require("./tabs-header"));
+var _sticky = _interopRequireDefault(require("../sticky"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["jssStyle", "align", "children", "shape", "position", "lazy", "autoFill", "hideSplit", "collapsible", "defaultCollapsed", "onChange", "extra", "border", "splitColor", "tabBarExtraContent", "background", "activeBackground", "inactiveBackground", "defaultActive", "tabBarStyle"];
+var _excluded = ["jssStyle", "align", "children", "shape", "position", "lazy", "autoFill", "hideSplit", "collapsible", "defaultCollapsed", "onChange", "extra", "border", "splitColor", "tabBarExtraContent", "background", "activeBackground", "inactiveBackground", "defaultActive", "tabBarStyle", "color", "sticky", "className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var isEmpty = _hooks.util.isEmpty,
+  isObject = _hooks.util.isObject,
+  isNumber = _hooks.util.isNumber;
 var Tabs = function Tabs(props) {
   var _jssStyle$tabs, _classNames;
   var jssStyle = props.jssStyle,
     align = props.align,
     children = props.children,
-    _props$shape = props.shape,
-    shape = _props$shape === void 0 ? 'card' : _props$shape,
+    shapeProps = props.shape,
     position = props.position,
     _props$lazy = props.lazy,
     lazy = _props$lazy === void 0 ? true : _props$lazy,
@@ -52,9 +55,14 @@ var Tabs = function Tabs(props) {
     background = props.background,
     activeBackground = props.activeBackground,
     inactiveBackground = props.inactiveBackground,
-    defaultActive = props.defaultActive,
+    _props$defaultActive = props.defaultActive,
+    defaultActive = _props$defaultActive === void 0 ? 0 : _props$defaultActive,
     tabBarStyle = props.tabBarStyle,
+    color = props.color,
+    sticky = props.sticky,
+    tabsClassName = props.className,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var shape = shapeProps && shapeProps !== 'bordered' ? shapeProps : 'card';
   var _useTabs = (0, _hooks.useTabs)(_objectSpread(_objectSpread({}, rest), {}, {
       defaultActive: defaultActive,
       onChange: onChangeProps
@@ -74,7 +82,7 @@ var Tabs = function Tabs(props) {
   var panelRef = (0, _react.useRef)(null);
   var panelHeight = (0, _react.useRef)(0);
   var tabsStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
-  var rootClass = (0, _classnames.default)(tabsStyle.tabs, (_classNames = {}, (0, _defineProperty2.default)(_classNames, tabsStyle.autoFill, autoFill), (0, _defineProperty2.default)(_classNames, tabsStyle.collapsed, collapse), _classNames));
+  var rootClass = (0, _classnames.default)(tabsStyle.tabs, tabsClassName, (_classNames = {}, (0, _defineProperty2.default)(_classNames, tabsStyle.autoFill, autoFill), (0, _defineProperty2.default)(_classNames, tabsStyle.collapsed, collapse), _classNames));
   var getRootProps = function getRootProps() {
     return rest;
   };
@@ -112,10 +120,10 @@ var Tabs = function Tabs(props) {
     }
   };
   var getDataProps = function getDataProps() {
-    return {
-      'data-soui-position': getPosition(),
-      'data-soui-shape': shape
-    };
+    return _hooks.util.getDataAttribute({
+      position: getPosition(),
+      shape: shape
+    });
   };
   var handleCollapsible = function handleCollapsible() {
     var nextCollapse = !collapse;
@@ -164,27 +172,57 @@ var Tabs = function Tabs(props) {
   };
   var renderHeader = function renderHeader() {
     var tabs = [];
+    var border = getSplitColor();
     _react.Children.toArray(children).forEach(function (child, index) {
       var Chlid = child;
+      var childBorder = Chlid.props.splitColor || Chlid.props.border;
+      var _Chlid$props$id = Chlid.props.id,
+        id = _Chlid$props$id === void 0 ? index : _Chlid$props$id;
+      if (active === id && childBorder) {
+        border = childBorder;
+      }
       tabs.push({
         id: Chlid.props.id !== undefined ? Chlid.props.id : index,
         tab: Chlid.props.tab,
         disabled: Chlid.props.disabled,
-        jssStyle: jssStyle
+        jssStyle: jssStyle,
+        color: Chlid.props.color || (active === id ? color : undefined)
       });
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabsHeader.default, {
+    var header = /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabsHeader.default, {
       tabs: tabs,
       align: align,
       jssStyle: jssStyle,
       position: position,
       hideSplit: hideSplit,
       extra: getExtra(),
-      splitColor: getSplitColor(),
+      splitColor: border,
       collapsible: collapsible,
       tabBarStyle: tabBarStyle,
-      getPosition: getPosition()
+      getPosition: getPosition(),
+      sticky: !!sticky
     });
+    if (!isEmpty(sticky) && !isVertical) {
+      var stickyClassName = tabsStyle.sticky;
+      var stickyProps = {
+        top: 0,
+        className: stickyClassName
+      };
+      if (isNumber(sticky)) {
+        stickyProps.top = sticky;
+      }
+      if (isObject(sticky)) {
+        stickyProps = _objectSpread(_objectSpread({}, sticky), {}, {
+          className: (0, _classnames.default)(stickyClassName, sticky.className)
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sticky.default, _objectSpread(_objectSpread({}, stickyProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, getDataProps()), {}, {
+          children: header
+        }))
+      }));
+    }
+    return header;
   };
   var renderTabs = function renderTabs() {
     var realPosition = getPosition();

package/esm/tabs/tabs.type.d.ts

@@ -2,6 +2,7 @@
 import { CommonType } from '../common/type';
 import { ButtonClasses } from '../button/button.type';
 import { BaseTabsProps, TabsShapeType } from '@sheinx/hooks';
+import type { StickyProps } from '../sticky';
 export interface TabsClasses {
     tabs: string;
     tab: string;
@@ -20,6 +21,7 @@ export interface TabsClasses {
     bordered: string;
     card: string;
     dash: string;
+    cardHr: string;
     active: string;
     disabled: string;
     show: string;
@@ -28,6 +30,7 @@ export interface TabsClasses {
     extra: string;
     collapsible: string;
     collapsed: string;
+    sticky: string;
 }
 export declare type TabsAlignType = 'left' | 'right' | 'bottom' | 'vertical-left' | 'vertical-right';
 export declare type TabsPositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
@@ -36,8 +39,22 @@ export interface TabsProps extends BaseTabsProps, Pick<CommonType, 'className' |
         tabs: () => TabsClasses;
         button: () => ButtonClasses;
     };
+    /**
+     * @en Whether to enable lazy loading
+     * @cn 是否开启懒加载
+     * @default true
+     */
     lazy?: boolean;
+    /**
+     * @en When Shape is not empty, color parameters such as activeBackground will be invalid. When shape is bordered, it points to card
+     * @cn Shape 不为空时，activeBackground 等颜色参数将会无效，当shape为bordered时，指向card
+     * @default 'card'
+     */
     shape?: TabsShapeType;
+    /**
+     * @en Child element, must be a Panel element
+     * @cn 子元素,必须为 Panel 元素
+     */
     children?: React.ReactNode;
     /**
      * @deprecated 即将弃用，请使用 position 替代
@@ -56,22 +73,79 @@ export interface TabsProps extends BaseTabsProps, Pick<CommonType, 'className' |
      * @deprecated 即将弃用，请使用 splitColor 替代
      */
     border?: string;
+    /**
+     * @en Extra content
+     * @cn 额外内容
+     */
     extra?: React.ReactNode;
+    /**
+     * @en Split line color, replace the original border property
+     * @cn 分割线颜色,替代原有border属性
+     */
     splitColor?: string;
+    /**
+     * @en Whether to hide the split line
+     * @cn 是否隐藏分割线
+     */
     hideSplit?: boolean;
+    /**
+     * @en Whether can be collapsed
+     * @cn 是否可折叠
+     */
     collapsible?: boolean;
+    /**
+     * @en Default collapse state, effective when collapsible is set to true
+     * @cn 默认折叠状态,当 collapsible 设置为 true 时生效
+     */
     defaultCollapsed?: boolean;
+    /**
+     * @en Auto fill the panel
+     * @cn 自动填充内容区域
+     */
     autoFill?: boolean;
+    /**
+     * @en Switch tabs will scroll to Tabs
+     * @cn 切换 tab 将自动滚动到 Tabs
+     */
     switchToTop?: boolean;
-    sticky?: boolean;
+    /**
+     * @en Sticky header
+     * @cn 开启头部附着
+     */
+    sticky?: boolean | number | StickyProps;
+    /**
+     * @en The position of the tab
+     * @cn 选项卡位置
+     */
     position?: TabsPositionType;
     /**
      * @deprecated 即将弃用，请使用 activeBackground 替代
      */
     background?: string;
+    /**
+     * @en Active background color
+     * @cn 选中标签背景色
+     */
     activeBackground?: string;
+    /**
+     * @en Inactive background color
+     * @cn 未选中标签背景色
+     */
     inactiveBackground?: string;
+    /**
+     * @en Style in tab bar
+     * @cn tab bar 的样式对象
+     */
     tabBarStyle?: React.CSSProperties;
+    /**
+     * @en Change callback
+     * @cn 标签选中时触发回调事件
+     */
     onChange?: (key: string | number) => void;
+    /**
+     * @en The color of tab"s text only when the shape is "card"
+     * @cn 标签页文字颜色，仅当 shape 为 "card" 时生效
+     */
+    color?: string;
 }
 //# sourceMappingURL=tabs.type.d.ts.map

package/esm/tabs/tabs.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.type.d.ts","sourceRoot":"","sources":["tabs.type.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IAEd,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,eAAe,GAAG,gBAAgB,CAAC;AAC7F,oBAAY,gBAAgB,GACxB,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,GACd,UAAU,GACV,aAAa,GACb,WAAW,GACX,cAAc,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IACvF,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAE5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC3C"}
+{"version":3,"file":"tabs.type.d.ts","sourceRoot":"","sources":["tabs.type.ts"],"names":[],"mappings":"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"}

package/esm/tag/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {

package/esm/tag/tag-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-input.d.ts","sourceRoot":"","sources":["tag-input.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,aAAa,EAAE,MAAM,YAAY,CAAC;AAGvD,QAAA,MAAM,QAAQ,UAAW,aAAa,gBAmDrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"tag-input.d.ts","sourceRoot":"","sources":["tag-input.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,aAAa,EAAE,MAAM,YAAY,CAAC;AAGvD,QAAA,MAAM,QAAQ,UAAW,aAAa,gBAqDrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/tag/tag-input.js

@@ -18,6 +18,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var TagInput = function TagInput(props) {
   var _jssStyle$tag;
   var value = props.value,
+    size = props.size,
+    style = props.style,
     onBlur = props.onBlur,
     onChange = props.onChange,
     onEnterPress = props.onEnterPress,
@@ -50,6 +52,8 @@ var TagInput = function TagInput(props) {
     delete controlProps.value;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_simpleInput.default, _objectSpread(_objectSpread({}, controlProps), {}, {
+    size: size,
+    style: style,
     inputRef: inputRef,
     className: (0, _classnames.default)(tagStyle.input),
     jssStyle: jssStyle,

package/esm/tag/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOlD,QAAA,MAAM,GAAG;YAAW,QAAQ;;CAuH3B,CAAC;AAIF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["tag.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOlD,QAAA,MAAM,GAAG;YAAW,QAAQ;;CA4H3B,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/esm/tag/tag.js

@@ -14,7 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _useTag2 = _interopRequireDefault(require("./use-tag"));
 var _tagInput = _interopRequireDefault(require("./tag-input"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["jssStyle", "className", "type", "color", "size", "disabled", "mode", "shape", "children", "onClick", "onClose", "style", "backgroundColor", "onKeyUp", "onCompleted", "onEnterPress"];
+var _excluded = ["jssStyle", "className", "type", "color", "size", "disabled", "mode", "shape", "children", "onClick", "onClose", "style", "backgroundColor", "inlineStyle", "onKeyUp", "onCompleted", "onEnterPress"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Done = 2;
@@ -34,6 +34,7 @@ var Tag = function Tag(props) {
     onClose = props.onClose,
     style = props.style,
     backgroundColor = props.backgroundColor,
+    inlineStyle = props.inlineStyle,
     onKeyUp = props.onKeyUp,
     onCompleted = props.onCompleted,
     onEnterPress = props.onEnterPress,
@@ -73,13 +74,15 @@ var Tag = function Tag(props) {
   var renderChildren = function renderChildren() {
     if (onClose) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: tagStyle.inline,
+        className: (0, _classnames.default)(tagStyle.wrapper, inlineStyle && tagStyle.inline),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: tagStyle.container,
           children: children
         })
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: (0, _classnames.default)(tagStyle.wrapper, inlineStyle && tagStyle.inline),
       children: children
     });
   };