@hi-ui/tabs 4.1.6 → 5.0.0-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/lib/cjs/TabList.js +5 -3
  3. package/lib/cjs/Tabs.js +4 -1
  4. package/lib/cjs/styles/index.scss.js +1 -1
  5. package/lib/esm/TabList.js +5 -3
  6. package/lib/esm/Tabs.js +4 -1
  7. package/lib/esm/styles/index.scss.js +1 -1
  8. package/lib/types/TabList.d.ts +4 -0
  9. package/lib/types/Tabs.d.ts +4 -0
  10. package/package.json +15 -14
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # @hi-ui/tabs
2
2
 
3
+ ## 5.0.0-canary.0
4
+
5
+ ### Major Changes
6
+
7
+ - 225ebaa51: feat: 组件的 package.json 中的 exports 统一加上 types 配置 (5.0)
8
+
9
+ ### Minor Changes
10
+
11
+ - e182621e8: <br>
12
+ - feat(tabs): 增加 size 参数 (5.0)
13
+ - feat(tabs): 修改标签选中下标样式 (5.0)
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [225ebaa51]
18
+ - Updated dependencies [428716024]
19
+ - @hi-ui/core@5.0.0-canary.0
20
+ - @hi-ui/use-latest@5.0.0-canary.0
21
+ - @hi-ui/use-uncontrolled-state@5.0.0-canary.0
22
+ - @hi-ui/use-unmount-effect@5.0.0-canary.0
23
+ - @hi-ui/icons@5.0.0-canary.0
24
+ - @hi-ui/icon-button@5.0.0-canary.0
25
+ - @hi-ui/classname@5.0.0-canary.0
26
+ - @hi-ui/env@5.0.0-canary.0
27
+ - @hi-ui/react-utils@5.0.0-canary.0
28
+ - @hi-ui/type-assertion@5.0.0-canary.0
29
+
3
30
  ## 4.1.6
4
31
 
5
32
  ### Patch Changes
package/lib/cjs/TabList.js CHANGED
@@ -35,7 +35,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
35
35
  var _role = 'tabs';
36
36
  var _prefix = classname.getPrefixCls(_role);
37
37
  var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
38
- var _cx;
38
+ var _cx, _cx2;
39
39
  var _b;
40
40
  var data = _a.data,
41
41
  className = _a.className,
@@ -59,8 +59,10 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
59
59
  onDragEnd = _a.onDragEnd,
60
60
  _a$type = _a.type,
61
61
  type = _a$type === void 0 ? 'line' : _a$type,
62
+ _a$size = _a.size,
63
+ size = _a$size === void 0 ? 'md' : _a$size,
62
64
  extra = _a.extra,
63
- rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
65
+ rest = tslib.__rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "size", "extra"]);
64
66
  var direction = (_b = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _b !== void 0 ? _b : 'horizontal';
65
67
  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(function () {
66
68
  if (typeAssertion.isUndef(defaultActiveId)) {
@@ -180,7 +182,7 @@ var TabList = /*#__PURE__*/React.forwardRef(function (_a, ref) {
180
182
  }, [activeId, initScrollPosition]);
181
183
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
182
184
  style: style,
183
- className: classname.cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
185
+ className: classname.cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--type-" + type] = type, _cx), (_cx2 = {}, _cx2[prefixCls + "__list--size-" + size] = size, _cx2), className),
184
186
  ref: ref
185
187
  }, rest), showScrollBtn ? ( /*#__PURE__*/React__default["default"].createElement(iconButton.IconButton, {
186
188
  className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
package/lib/cjs/Tabs.js CHANGED
@@ -56,8 +56,10 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
56
56
  style = _a.style,
57
57
  _a$type = _a.type,
58
58
  type = _a$type === void 0 ? 'line' : _a$type,
59
+ _a$size = _a.size,
60
+ size = _a$size === void 0 ? 'md' : _a$size,
59
61
  extra = _a.extra,
60
- rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
62
+ rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "size", "extra"]);
61
63
  var tabList = React.useMemo(function () {
62
64
  var list = [];
63
65
  React__default["default"].Children.map(children, function (child) {
@@ -109,6 +111,7 @@ var Tabs = /*#__PURE__*/React.forwardRef(function (_a, ref) {
109
111
  onDragOver: onDragOver,
110
112
  onDrop: onDrop,
111
113
  type: type,
114
+ size: size,
112
115
  onDragStart: onDragStart,
113
116
  extra: extra
114
117
  }), /*#__PURE__*/React__default["default"].createElement("div", {
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {margin: var(--hi-v4-spacing-1, 2px);}.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs__list--button .hi-v4-tabs__item {position: relative;margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v4-height-4, 16px);background-color: var(--hi-v4-color-gray-300, #dfe2e8);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):first-child::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--button .hi-v4-tabs__item--active + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v4-spacing-6, 12px) 0 0;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item:focus {outline: 0;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tabs-tab-pane--hide {display: none;}";
15
+ var css_248z = ".hi-v5-tabs__add-btn.hi-v5-icon-button {font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-tabs__up-btn.hi-v5-icon-button, .hi-v5-tabs__down-btn.hi-v5-icon-button, .hi-v5-tabs__left-btn.hi-v5-icon-button, .hi-v5-tabs__right-btn.hi-v5-icon-button {margin: var(--hi-v5-spacing-1, 2px);}.hi-v5-tabs__close-btn {cursor: pointer;color: var(--hi-v5-color-gray-500, #737680);margin-left: var(--hi-v5-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v5-tabs__close-btn:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--type-card .hi-v5-tabs__content {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-tabs__list {position: relative;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-500, #737680);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-tabs__list--type-card .hi-v5-tabs__item {background-color: var(--hi-v5-color-gray-200, #e6eaf0);margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px) 0 0 var(--hi-v5-border-radius-lg, 6px);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item {position: relative;margin: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v5-height-4, 16px);background-color: var(--hi-v5-color-gray-300, #dce0e5);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):first-child::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-500, #737680);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {background: var(--hi-v5-color-gray-50, #f5f8fc);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v5-spacing-6, 12px) 0 0;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-sm .hi-v5-tabs__item {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-md .hi-v5-tabs__item {padding: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-lg .hi-v5-tabs__item {padding: var(--hi-v5-spacing-9, 18px) var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v5-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v5-motion-duration-slow, 300ms);transition-duration: var(--hi-v5-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v5-tabs__list--placement-vertical > .hi-v5-tabs__list--inner > .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-500, #737680);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v5-color-gray-50, #f5f8fc);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-6, 12px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item {margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-gray-200, #e6eaf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px) 0 0 var(--hi-v5-border-radius-lg, 6px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item {margin: 0 0 var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-2, 4px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--prev {border-top: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-left: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--next {border-bottom: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-right: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__item:focus {outline: 0;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--prev {border-left: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--next {border-right: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--disabled, .hi-v5-tabs__item--disabled .hi-v5-tabs__close-btn {color: var(--hi-v5-color-gray-400, #c0c3cc);cursor: not-allowed;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v5-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v5-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-tabs-tab-pane--hide {display: none;}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/TabList.js CHANGED
@@ -23,7 +23,7 @@ import { getNextTabId } from './utils/index.js';
23
23
  var _role = 'tabs';
24
24
  var _prefix = getPrefixCls(_role);
25
25
  var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
26
- var _cx;
26
+ var _cx, _cx2;
27
27
  var _b;
28
28
  var data = _a.data,
29
29
  className = _a.className,
@@ -47,8 +47,10 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
47
47
  onDragEnd = _a.onDragEnd,
48
48
  _a$type = _a.type,
49
49
  type = _a$type === void 0 ? 'line' : _a$type,
50
+ _a$size = _a.size,
51
+ size = _a$size === void 0 ? 'md' : _a$size,
50
52
  extra = _a.extra,
51
- rest = __rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "extra"]);
53
+ rest = __rest(_a, ["data", "className", "style", "activeId", "defaultActiveId", "onChange", "onTabClick", "prefixCls", "direction", "placement", "editable", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDrop", "onDragEnd", "type", "size", "extra"]);
52
54
  var direction = (_b = placement !== null && placement !== void 0 ? placement : directionProp) !== null && _b !== void 0 ? _b : 'horizontal';
53
55
  var _useUncontrolledState = useUncontrolledState(function () {
54
56
  if (isUndef(defaultActiveId)) {
@@ -168,7 +170,7 @@ var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
168
170
  }, [activeId, initScrollPosition]);
169
171
  return /*#__PURE__*/React.createElement("div", Object.assign({
170
172
  style: style,
171
- className: cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--" + type] = type, _cx), className),
173
+ className: cx(prefixCls + "__list", prefixCls + "__list--placement-" + direction, (_cx = {}, _cx[prefixCls + "__list--type-" + type] = type, _cx), (_cx2 = {}, _cx2[prefixCls + "__list--size-" + size] = size, _cx2), className),
172
174
  ref: ref
173
175
  }, rest), showScrollBtn ? ( /*#__PURE__*/React.createElement(IconButton, {
174
176
  className: showHorizontal ? prefixCls + "__left-btn" : prefixCls + "__up-btn",
package/lib/esm/Tabs.js CHANGED
@@ -44,8 +44,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
44
44
  style = _a.style,
45
45
  _a$type = _a.type,
46
46
  type = _a$type === void 0 ? 'line' : _a$type,
47
+ _a$size = _a.size,
48
+ size = _a$size === void 0 ? 'md' : _a$size,
47
49
  extra = _a.extra,
48
- rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "extra"]);
50
+ rest = __rest(_a, ["prefixCls", "role", "className", "children", "defaultActiveId", "activeId", "onChange", "onTabClick", "editable", "placement", "onAdd", "onDelete", "draggable", "onDragStart", "onDragOver", "onDragEnd", "onDrop", "style", "type", "size", "extra"]);
49
51
  var tabList = useMemo(function () {
50
52
  var list = [];
51
53
  React.Children.map(children, function (child) {
@@ -97,6 +99,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (_a, ref) {
97
99
  onDragOver: onDragOver,
98
100
  onDrop: onDrop,
99
101
  type: type,
102
+ size: size,
100
103
  onDragStart: onDragStart,
101
104
  extra: extra
102
105
  }), /*#__PURE__*/React.createElement("div", {
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- var css_248z = ".hi-v4-tabs__add-btn.hi-v4-icon-button {font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-tabs__up-btn.hi-v4-icon-button, .hi-v4-tabs__down-btn.hi-v4-icon-button, .hi-v4-tabs__left-btn.hi-v4-icon-button, .hi-v4-tabs__right-btn.hi-v4-icon-button {margin: var(--hi-v4-spacing-1, 2px);}.hi-v4-tabs__close-btn {cursor: pointer;color: var(--hi-v4-color-gray-500, #929aa6);margin-left: var(--hi-v4-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v4-tabs__close-btn:hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--type-card .hi-v4-tabs__content {background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-tabs__list {position: relative;font-size: var(--hi-v4-text-size-md, 0.875rem);color: var(--hi-v4-color-gray-500, #929aa6);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-tabs__list--card .hi-v4-tabs__item {background-color: var(--hi-v4-color-gray-200, #ebedf0);margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs__list--button .hi-v4-tabs__item {position: relative;margin: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v4-height-4, 16px);background-color: var(--hi-v4-color-gray-300, #dfe2e8);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):first-child::after {display: none;}.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--button .hi-v4-tabs__item--active + .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs__list--desc .hi-v4-tabs__item {background: var(--hi-v4-color-gray-50, #f5f7fa);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v4-spacing-6, 12px) 0 0;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v4-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v4-motion-duration-slow, 300ms);transition-duration: var(--hi-v4-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v4-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v4-tabs__list--placement-vertical > .hi-v4-tabs__list--inner > .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v4-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__title {color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs-item__desc {color: var(--hi-v4-color-gray-500, #929aa6);font-size: var(--hi-v4-text-size-sm, 0.75rem);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v4-spacing-8, 16px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__title {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__item--active .hi-v4-tabs-item__desc {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--desc .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-6, 12px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item {margin: 0;padding: var(--hi-v4-spacing-5, 10px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-gray-200, #ebedf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--card .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-static-white, #fff);border-radius: var(--hi-v4-border-radius-md, 4px) 0 0 var(--hi-v4-border-radius-md, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item {margin: 0 0 var(--hi-v4-spacing-2, 4px) 0;padding: var(--hi-v4-spacing-2, 4px) var(--hi-v4-spacing-6, 12px);border-radius: var(--hi-v4-border-radius-md, 4px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item:not(:where(.hi-v4-tabs__item--active, .hi-v4-tabs__item--disabled)):hover {background-color: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list.hi-v4-tabs__list--button .hi-v4-tabs__list--scroll {row-gap: var(--hi-v4-spacing-2, 4px);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item::after {display: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--prev {border-top: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-left: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__item--next {border-bottom: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-right: none;}.hi-v4-tabs--placement-vertical > .hi-v4-tabs__list .hi-v4-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 2px;background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item {line-height: var(--hi-v4-text-lineheight-lg, 1.5rem);padding: var(--hi-v4-spacing-4, 8px) var(--hi-v4-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v4-tabs__item:focus {outline: 0;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--disabled):hover {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--prev {border-left: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--next {border-right: 1px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-tabs__item--disabled, .hi-v4-tabs__item--disabled .hi-v4-tabs__close-btn {color: var(--hi-v4-color-gray-400, #b5bcc7);cursor: not-allowed;}.hi-v4-tabs__item:not(.hi-v4-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v4-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v4-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-tabs-tab-pane--hide {display: none;}";
11
+ var css_248z = ".hi-v5-tabs__add-btn.hi-v5-icon-button {font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-tabs__up-btn.hi-v5-icon-button, .hi-v5-tabs__down-btn.hi-v5-icon-button, .hi-v5-tabs__left-btn.hi-v5-icon-button, .hi-v5-tabs__right-btn.hi-v5-icon-button {margin: var(--hi-v5-spacing-1, 2px);}.hi-v5-tabs__close-btn {cursor: pointer;color: var(--hi-v5-color-gray-500, #737680);margin-left: var(--hi-v5-spacing-2, 4px);-webkit-transition: color 0.3s;transition: color 0.3s;}.hi-v5-tabs__close-btn:hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--type-card .hi-v5-tabs__content {background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-tabs__list {position: relative;font-size: var(--hi-v5-text-size-md, 0.875rem);color: var(--hi-v5-color-gray-500, #737680);display: -webkit-box;display: -ms-flexbox;display: flex;overflow: hidden;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-tabs__list--type-card .hi-v5-tabs__item {background-color: var(--hi-v5-color-gray-200, #e6eaf0);margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px) 0 0 var(--hi-v5-border-radius-lg, 6px);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item {position: relative;margin: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled))::after {content: \"\";position: absolute;width: 1px;height: var(--hi-v5-height-4, 16px);background-color: var(--hi-v5-color-gray-300, #dce0e5);left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):first-child::after {display: none;}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active + .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-500, #737680);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {background: var(--hi-v5-color-gray-50, #f5f8fc);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 var(--hi-v5-spacing-6, 12px) 0 0;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-sm .hi-v5-tabs__item {font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-md .hi-v5-tabs__item {padding: var(--hi-v5-spacing-6, 12px) var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-md, 0.875rem);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);}.hi-v5-tabs__list--type-line.hi-v5-tabs__list--size-lg .hi-v5-tabs__item {padding: var(--hi-v5-spacing-9, 18px) var(--hi-v5-spacing-10, 20px);font-size: var(--hi-v5-text-size-lg, 1rem);line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);}.hi-v5-tabs__list--inner {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;overflow: hidden;}.hi-v5-tabs__list--scroll {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition-property: -webkit-transform;transition-property: -webkit-transform;transition-property: transform;transition-property: transform, -webkit-transform;-webkit-transition-duration: var(--hi-v5-motion-duration-slow, 300ms);transition-duration: var(--hi-v5-motion-duration-slow, 300ms);-webkit-transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));transition-timing-function: var(--hi-v5-motion-bezier-easing, cubic-bezier(0.37, 0.02, 0.34, 1));will-change: transform;}.hi-v5-tabs__list--placement-vertical > .hi-v5-tabs__list--inner > .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs__list--placement-vertical {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;}.hi-v5-tabs--placement-vertical {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__content {padding-left: 16px;padding-top: 0;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__title {color: var(--hi-v5-color-gray-700, #1a1d26);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs-item__desc {color: var(--hi-v5-color-gray-500, #737680);font-size: var(--hi-v5-text-size-sm, 0.75rem);line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;padding: var(--hi-v5-spacing-8, 16px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;background: var(--hi-v5-color-gray-50, #f5f8fc);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__title {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__item--active .hi-v5-tabs-item__desc {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-desc .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-6, 12px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item {margin: 0;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-gray-200, #e6eaf0);border-radius: 0;-webkit-transition: all 0.3s;transition: all 0.3s;line-height: var(--hi-v5-text-lineheight-sm, 1.25rem);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-card .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-lg, 6px) 0 0 var(--hi-v5-border-radius-lg, 6px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item {margin: 0 0 var(--hi-v5-spacing-2, 4px) 0;padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-transition: all 0.3s;transition: all 0.3s;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item:not(:where(.hi-v5-tabs__item--active, .hi-v5-tabs__item--disabled)):hover {background-color: var(--hi-v5-color-gray-200, #e6eaf0);color: var(--hi-v5-color-gray-500, #737680);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list.hi-v5-tabs__list--type-button .hi-v5-tabs__list--scroll {row-gap: var(--hi-v5-spacing-2, 4px);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--inner {width: auto;display: block;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__list--scroll {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;position: relative;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item::after {display: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--prev {border-top: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-left: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__item--next {border-bottom: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-right: none;}.hi-v5-tabs--placement-vertical > .hi-v5-tabs__list .hi-v5-tabs__ink {position: absolute;left: 0;bottom: auto;width: 2px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: top 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__ink {position: absolute;bottom: 0;right: auto;top: auto;height: 3px;border-top-left-radius: 3px;border-top-right-radius: 3px;background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));-webkit-transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), width 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__item {line-height: var(--hi-v5-text-lineheight-lg, 1.5rem);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-10, 20px);margin: 0;cursor: pointer;-ms-flex-negative: 0;flex-shrink: 0;-webkit-transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);}.hi-v5-tabs__item:focus {outline: 0;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--prev {border-left: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--next {border-right: 1px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-tabs__item--disabled, .hi-v5-tabs__item--disabled .hi-v5-tabs__close-btn {color: var(--hi-v5-color-gray-400, #c0c3cc);cursor: not-allowed;}.hi-v5-tabs__item:not(.hi-v5-tabs__item--active) {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.hi-v5-tabs__content {width: 100%;overflow: hidden;padding-top: var(--hi-v5-spacing-8, 16px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-tabs-tab-pane--hide {display: none;}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/TabList.d.ts CHANGED
@@ -39,6 +39,10 @@ export interface TabListProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' |
39
39
  * 布局类型
40
40
  */
41
41
  type?: 'desc' | 'card' | 'button' | 'line';
42
+ /**
43
+ * 大小
44
+ */
45
+ size?: 'sm' | 'md' | 'lg';
42
46
  /**
43
47
  * 右侧的拓展区域
44
48
  */
package/lib/types/Tabs.d.ts CHANGED
@@ -34,6 +34,10 @@ export interface TabsProps extends Omit<HiBaseHTMLProps<'div'>, 'onDragEnd' | 'o
34
34
  * 布局类型
35
35
  */
36
36
  type?: 'desc' | 'card' | 'button' | 'line';
37
+ /**
38
+ * 大小
39
+ */
40
+ size?: 'sm' | 'md' | 'lg';
37
41
  /**
38
42
  * `activeId` 改变的回调
39
43
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/tabs",
3
- "version": "4.1.6",
3
+ "version": "5.0.0-canary.0",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -20,7 +20,8 @@
20
20
  "exports": {
21
21
  ".": {
22
22
  "require": "./lib/cjs/index.js",
23
- "default": "./lib/esm/index.js"
23
+ "default": "./lib/esm/index.js",
24
+ "types": "./lib/types/index.d.ts"
24
25
  }
25
26
  },
26
27
  "publishConfig": {
@@ -43,24 +44,24 @@
43
44
  "url": "https://github.com/XiaoMi/hiui/issues"
44
45
  },
45
46
  "dependencies": {
46
- "@hi-ui/classname": "^4.0.5",
47
- "@hi-ui/env": "^4.0.5",
48
- "@hi-ui/icon-button": "^4.0.9",
49
- "@hi-ui/icons": "^4.0.19",
50
- "@hi-ui/react-utils": "^4.0.4",
51
- "@hi-ui/type-assertion": "^4.0.4",
52
- "@hi-ui/use-latest": "^4.0.4",
53
- "@hi-ui/use-uncontrolled-state": "^4.0.4",
54
- "@hi-ui/use-unmount-effect": "^4.0.4"
47
+ "@hi-ui/classname": "^5.0.0-canary.0",
48
+ "@hi-ui/env": "^5.0.0-canary.0",
49
+ "@hi-ui/icon-button": "^5.0.0-canary.0",
50
+ "@hi-ui/icons": "^5.0.0-canary.0",
51
+ "@hi-ui/react-utils": "^5.0.0-canary.0",
52
+ "@hi-ui/type-assertion": "^5.0.0-canary.0",
53
+ "@hi-ui/use-latest": "^5.0.0-canary.0",
54
+ "@hi-ui/use-uncontrolled-state": "^5.0.0-canary.0",
55
+ "@hi-ui/use-unmount-effect": "^5.0.0-canary.0"
55
56
  },
56
57
  "peerDependencies": {
57
- "@hi-ui/core": ">=4.0.8",
58
+ "@hi-ui/core": ">=5.0.0-canary.0",
58
59
  "react": ">=16.8.6",
59
60
  "react-dom": ">=16.8.6"
60
61
  },
61
62
  "devDependencies": {
62
- "@hi-ui/core": "^4.0.8",
63
- "@hi-ui/core-css": "^4.1.5",
63
+ "@hi-ui/core": "^5.0.0-canary.0",
64
+ "@hi-ui/core-css": "^5.0.0-canary.0",
64
65
  "react": "^17.0.1",
65
66
  "react-dom": "^17.0.1"
66
67
  }