@sheinx/base 3.0.0-alpha.1

package/cjs/tabs/tabs-header.js

@@ -0,0 +1,201 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("@sheinx/hooks");
+var _tab = _interopRequireDefault(require("./tab"));
+var _icons = _interopRequireDefault(require("../icons"));
+var _button = _interopRequireDefault(require("../button"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 TabsHeader = function TabsHeader(props) {
+  var _jssStyle$tabs;
+  var tabs = props.tabs,
+    jssStyle = props.jssStyle,
+    hideSplit = props.hideSplit,
+    collapsible = props.collapsible,
+    extra = props.extra,
+    splitColor = props.splitColor,
+    tabBarStyle = props.tabBarStyle,
+    getPosition = props.getPosition;
+  var headerRef = (0, _react.useRef)(null);
+  var scrollRef = (0, _react.useRef)(null);
+  var tabRef = (0, _react.useRef)({});
+  var _useTabsContext = (0, _hooks.useTabsContext)(),
+    shape = _useTabsContext.shape,
+    isVertical = _useTabsContext.isVertical,
+    onCollapsible = _useTabsContext.onCollapsible,
+    active = _useTabsContext.active;
+  var _useTransform = (0, _hooks.useTransform)({
+      autoScroll: true,
+      direction: isVertical ? 'Y' : 'X',
+      container: headerRef.current,
+      target: scrollRef.current
+    }),
+    delta = _useTransform.delta,
+    atStart = _useTransform.atStart,
+    atEnd = _useTransform.atEnd,
+    transformStyle = _useTransform.style,
+    shouldScroll = _useTransform.shouldScroll,
+    handleTransform = _useTransform.handleTransform,
+    setTransform = _useTransform.setTransform,
+    getRectDiff = _useTransform.getRectDiff;
+  var headerStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
+  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) || {};
+  (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;
+      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;
+      }
+      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;
+      }
+      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 nextOffset;
+    };
+    setTransform(getActiveTabOffest());
+  }, [active, tabRef.current, headerRef.current, scrollRef.current, shouldScroll]);
+  var getDataProps = function getDataProps(options) {
+    return _objectSpread({
+      'data-soui-shape': shape
+    }, options);
+  };
+  var handlePrev = function handlePrev() {
+    if (!headerRef.current) return;
+    setTransform(delta - headerRef.current.clientWidth);
+  };
+  var handleNext = function handleNext() {
+    if (!headerRef.current) return;
+    setTransform(delta + headerRef.current.clientWidth);
+  };
+  var renderTab = function renderTab() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+      ref: headerRef,
+      className: headerClass
+    }, getDataProps()), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: scrollRef,
+        className: headerStyle.headerScroll,
+        onWheel: handleTransform,
+        style: transformStyle,
+        children: [shape === 'button' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default.Group, {
+          jssStyle: {
+            button: buttonStyle
+          },
+          children: tabs.map(function (tab, index) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tab.default, _objectSpread(_objectSpread({}, tab), {}, {
+              ref: function ref(node) {
+                tabRef.current[tab.id] = node;
+              }
+            }), index);
+          })
+        }), shape !== 'button' && tabs.map(function (tab, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tab.default, _objectSpread(_objectSpread({}, tab), {}, {
+            ref: function ref(node) {
+              tabRef.current[tab.id] = node;
+            }
+          }), index);
+        })]
+      })
+    }));
+  };
+  var renderExtra = function renderExtra() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: headerStyle.extra,
+      children: extra
+    });
+  };
+  var renderPrevButton = function renderPrevButton() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+      className: (0, _classnames.default)(headerStyle.prev)
+    }, getDataProps({
+      'data-soui-state': atStart ? 'disabled' : ''
+    })), {}, {
+      onClick: handlePrev,
+      children: shape === 'card' ? _icons.default.ArrowLeft : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: headerStyle.iconInner,
+        children: _icons.default.ArrowLeft
+      })
+    }));
+  };
+  var renderNextButton = function renderNextButton() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+      className: headerStyle.next
+    }, getDataProps({
+      'data-soui-state': atEnd ? 'disabled' : ''
+    })), {}, {
+      onClick: handleNext,
+      children: shape === 'card' ? _icons.default.ArrowRight : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: headerStyle.iconInner,
+        children: _icons.default.ArrowRight
+      })
+    }));
+  };
+  var renderCollapsibleButton = function renderCollapsibleButton() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: headerStyle.collapsible,
+      onClick: onCollapsible,
+      children: _icons.default.ArrowLeft
+    });
+  };
+  var renderHr = function renderHr() {
+    var style = {};
+    if (splitColor) {
+      style.background = splitColor;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: headerStyle.hr,
+      style: style
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: headerWrapperClass,
+    style: tabBarStyle,
+    children: [collapsible && renderCollapsibleButton(), shouldScroll && renderPrevButton(), renderTab(), shouldScroll && renderNextButton(), extra && renderExtra(), !hideSplit && renderHr()]
+  });
+};
+var _default = TabsHeader;
+exports.default = _default;

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TabsAlignType, TabsClasses, TabsPositionType } from './tabs.type';
+import { ButtonClasses } from '../button/button.type';
+import { TabData } from './tab.type';
+export interface TabsHeaderProps {
+    jssStyle: {
+        tabs: () => TabsClasses;
+        button: () => ButtonClasses;
+    };
+    tabs: TabData[];
+    position?: TabsPositionType;
+    align?: TabsAlignType;
+    hideSplit?: boolean;
+    extra?: React.ReactNode;
+    splitColor?: string;
+    collapsible?: boolean;
+    tabBarStyle?: React.CSSProperties;
+    getPosition?: string;
+}
+//# sourceMappingURL=tabs-header.type.d.ts.map

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

@@ -0,0 +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"}

package/cjs/tabs/tabs-header.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/tabs/tabs-panel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TabsPanelProps } from './tabs-panel.type';
+declare const TabsPanel: (props: TabsPanelProps) => JSX.Element | null;
+export default TabsPanel;
+//# sourceMappingURL=tabs-panel.d.ts.map

package/cjs/tabs/tabs-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-panel.d.ts","sourceRoot":"","sources":["tabs-panel.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,QAAA,MAAM,SAAS,UAAW,cAAc,uBAoBvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/tabs/tabs-panel.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _hooks = require("@sheinx/hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+var TabsPanel = function TabsPanel(props) {
+  var _jssStyle$tabs;
+  var children = props.children,
+    id = props.id,
+    jssStyle = props.jssStyle;
+  var panelStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
+  var _useTabsContext = (0, _hooks.useTabsContext)(),
+    active = _useTabsContext.active,
+    lazy = _useTabsContext.lazy;
+  var isActive = active === id;
+  var keekAlive = (0, _react.useRef)(false);
+  if (!isActive && lazy && !keekAlive.current) {
+    return null;
+  }
+
+  // 首次不加载，一旦加载后常驻
+  keekAlive.current = true;
+  var panelClass = (0, _classnames.default)(panelStyle.panel, (0, _defineProperty2.default)({}, panelStyle.show, isActive));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: panelClass,
+    children: children
+  });
+};
+var _default = TabsPanel;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ButtonClasses } from '../button/button.type';
+import { TabsContextProps } from '@sheinx/hooks';
+import { TabsClasses } from './tabs.type';
+export interface TabsPanelProps extends TabsContextProps {
+    jssStyle?: {
+        tabs: () => TabsClasses;
+        button: () => ButtonClasses;
+    };
+    id?: string | number;
+    tab: React.ReactNode;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=tabs-panel.type.d.ts.map

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

@@ -0,0 +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"}

package/cjs/tabs/tabs-panel.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/tabs/tabs.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TabsProps } from './tabs.type';
+import { TabsPanelProps } from './tabs-panel.type';
+declare const Tabs: {
+    (props: TabsProps): JSX.Element;
+    Panel: (props: TabsPanelProps) => JSX.Element | null;
+};
+export default Tabs;
+//# sourceMappingURL=tabs.d.ts.map

package/cjs/tabs/tabs.d.ts.map

@@ -0,0 +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"}

package/cjs/tabs/tabs.js

@@ -0,0 +1,226 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("@sheinx/hooks");
+var _tabsPanel = _interopRequireDefault(require("./tabs-panel"));
+var _tabsHeader = _interopRequireDefault(require("./tabs-header"));
+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"];
+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 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,
+    position = props.position,
+    _props$lazy = props.lazy,
+    lazy = _props$lazy === void 0 ? true : _props$lazy,
+    autoFill = props.autoFill,
+    hideSplit = props.hideSplit,
+    collapsible = props.collapsible,
+    _props$defaultCollaps = props.defaultCollapsed,
+    defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
+    onChangeProps = props.onChange,
+    extra = props.extra,
+    border = props.border,
+    splitColor = props.splitColor,
+    tabBarExtraContent = props.tabBarExtraContent,
+    background = props.background,
+    activeBackground = props.activeBackground,
+    inactiveBackground = props.inactiveBackground,
+    defaultActive = props.defaultActive,
+    tabBarStyle = props.tabBarStyle,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _useTabs = (0, _hooks.useTabs)(_objectSpread(_objectSpread({}, rest), {}, {
+      defaultActive: defaultActive,
+      onChange: onChangeProps
+    })),
+    Provider = _useTabs.Provider,
+    active = _useTabs.active,
+    onChange = _useTabs.onChange;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    panelStyle = _useState2[0],
+    setPanelStyle = _useState2[1];
+  var _useState3 = (0, _react.useState)(defaultCollapsed),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    collapse = _useState4[0],
+    setCollapse = _useState4[1];
+  var isVertical = (align === 'vertical-left' || align === 'vertical-right' || position === 'left-top' || position === 'left-bottom' || position === 'right-top' || position === 'right-bottom') && shape !== 'button' && shape !== 'fill';
+  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 getRootProps = function getRootProps() {
+    return rest;
+  };
+  var getExtra = function getExtra() {
+    return tabBarExtraContent || extra;
+  };
+  var getSplitColor = function getSplitColor() {
+    return splitColor || border;
+  };
+  var getActiveBackground = function getActiveBackground() {
+    return activeBackground || background;
+  };
+  var getPosition = function getPosition() {
+    var realPosition = 'top-left';
+    if (collapsible) {
+      return realPosition;
+    }
+    if (align) {
+      if (align === 'vertical-left') realPosition = 'left-top';
+      if (align === 'vertical-right') realPosition = 'right-top';
+      if (align === 'bottom') realPosition = 'bottom-left';
+      if (align === 'left') realPosition = 'left-top';
+      if (align === 'right') realPosition = 'right-top';
+    } else {
+      realPosition = position || 'top-left';
+    }
+    if (shape === 'button' || shape === 'fill') {
+      if (['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(realPosition)) {
+        return realPosition;
+      } else {
+        return 'top-left';
+      }
+    } else {
+      return realPosition;
+    }
+  };
+  var getDataProps = function getDataProps() {
+    return {
+      'data-soui-position': getPosition(),
+      'data-soui-shape': shape
+    };
+  };
+  var handleCollapsible = function handleCollapsible() {
+    var nextCollapse = !collapse;
+    setCollapse(nextCollapse);
+  };
+  (0, _react.useEffect)(function () {
+    if (!panelRef.current) return;
+    if (collapsible) {
+      if (collapse) {
+        panelHeight.current = panelRef.current.clientHeight;
+        setPanelStyle({
+          height: panelRef.current.clientHeight
+        });
+        setTimeout(function () {
+          setPanelStyle({
+            height: 0,
+            flex: autoFill ? 0 : 'none'
+          });
+        }, 10);
+      } else {
+        if (panelHeight.current === 0) return;
+        setPanelStyle({
+          height: panelHeight.current
+        });
+        setTimeout(function () {
+          setPanelStyle({
+            height: 'auto'
+          });
+        }, 200);
+      }
+    }
+  }, [collapse]);
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: panelRef,
+      className: tabsStyle.panelWrapper,
+      style: panelStyle,
+      children: _react.Children.toArray(children).map(function (child, index) {
+        var Chlid = child;
+        return /*#__PURE__*/(0, _react.cloneElement)(Chlid, {
+          id: Chlid.props.id !== undefined ? Chlid.props.id : index,
+          active: active
+        });
+      })
+    });
+  };
+  var renderHeader = function renderHeader() {
+    var tabs = [];
+    _react.Children.toArray(children).forEach(function (child, index) {
+      var Chlid = child;
+      tabs.push({
+        id: Chlid.props.id !== undefined ? Chlid.props.id : index,
+        tab: Chlid.props.tab,
+        disabled: Chlid.props.disabled,
+        jssStyle: jssStyle
+      });
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabsHeader.default, {
+      tabs: tabs,
+      align: align,
+      jssStyle: jssStyle,
+      position: position,
+      hideSplit: hideSplit,
+      extra: getExtra(),
+      splitColor: getSplitColor(),
+      collapsible: collapsible,
+      tabBarStyle: tabBarStyle,
+      getPosition: getPosition()
+    });
+  };
+  var renderTabs = function renderTabs() {
+    var realPosition = getPosition();
+    if (['top-left', 'top-right', 'left-top', 'left-bottom'].includes(realPosition)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [renderHeader(), renderContent()]
+      });
+    }
+    if (['bottom-left', 'bottom-right', 'right-top', 'right-bottom'].includes(realPosition)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [renderContent(), renderHeader()]
+      });
+    }
+    console.warn('Tabs position is invalid, please check it.');
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [renderHeader(), renderContent()]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+    value: {
+      lazy: lazy,
+      active: active,
+      shape: shape,
+      onChange: onChange,
+      isVertical: isVertical,
+      inactiveBackground: inactiveBackground,
+      onCollapsible: handleCollapsible,
+      activeBackground: getActiveBackground()
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread(_objectSpread({}, getRootProps()), {}, {
+      className: rootClass
+    }, getDataProps()), {}, {
+      children: renderTabs()
+    }))
+  });
+};
+Tabs.Panel = _tabsPanel.default;
+var _default = Tabs;
+exports.default = _default;

package/cjs/tabs/tabs.type.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import { CommonType } from '../common/type';
+import { ButtonClasses } from '../button/button.type';
+import { BaseTabsProps, TabsShapeType } from '@sheinx/hooks';
+export interface TabsClasses {
+    tabs: string;
+    tab: string;
+    panel: string;
+    panelWrapper: string;
+    headerWrapper: string;
+    headerScroll: string;
+    header: string;
+    hr: string;
+    button: string;
+    line: string;
+    lineInner: string;
+    fillInner: string;
+    iconInner: string;
+    autoFill: string;
+    bordered: string;
+    card: string;
+    dash: string;
+    active: string;
+    disabled: string;
+    show: string;
+    prev: string;
+    next: string;
+    extra: string;
+    collapsible: string;
+    collapsed: 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';
+export interface TabsProps extends BaseTabsProps, Pick<CommonType, 'className' | 'style'> {
+    jssStyle: {
+        tabs: () => TabsClasses;
+        button: () => ButtonClasses;
+    };
+    lazy?: boolean;
+    shape?: TabsShapeType;
+    children?: React.ReactNode;
+    /**
+     * @deprecated 即将弃用，请使用 position 替代
+     * - align="left" => position="top-left"
+     * - align="right" => position="top-right"
+     * - align="bottom" => position="bottom-left"
+     * - align="vertical-left" => position="left-top"
+     * - align="vertical-right" => position="right-top"
+     */
+    align?: TabsAlignType;
+    /**
+     * @deprecated 即将弃用，请使用 extra 替代
+     */
+    tabBarExtraContent?: React.ReactNode;
+    /**
+     * @deprecated 即将弃用，请使用 splitColor 替代
+     */
+    border?: string;
+    extra?: React.ReactNode;
+    splitColor?: string;
+    hideSplit?: boolean;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    autoFill?: boolean;
+    switchToTop?: boolean;
+    sticky?: boolean;
+    position?: TabsPositionType;
+    /**
+     * @deprecated 即将弃用，请使用 activeBackground 替代
+     */
+    background?: string;
+    activeBackground?: string;
+    inactiveBackground?: string;
+    tabBarStyle?: React.CSSProperties;
+    onChange?: (key: string | number) => void;
+}
+//# sourceMappingURL=tabs.type.d.ts.map

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

@@ -0,0 +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"}

package/cjs/tabs/tabs.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/tag/__example__/s-001-base.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=s-001-base.d.ts.map

package/cjs/tag/__example__/s-001-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-001-base.d.ts","sourceRoot":"","sources":["s-001-base.tsx"],"names":[],"mappings":";;AAUA,wBAgDE"}