@oceanbase/design 0.4.12 → 0.4.13

package/es/anchor/index.d.ts

@@ -1 +1,2 @@
+export * from 'antd/es/anchor/Anchor';
 export * from 'antd/es/anchor';

package/es/anchor/index.js

@@ -1 +1,2 @@
+export * from 'antd/es/anchor/Anchor';
 export * from 'antd/es/anchor';

package/es/avatar/index.d.ts

@@ -1 +1,2 @@
+export * from 'antd/es/avatar/AvatarContext';
 export * from 'antd/es/avatar';

package/es/avatar/index.js

@@ -1 +1,2 @@
+export * from 'antd/es/avatar/AvatarContext';
 export * from 'antd/es/avatar';

package/es/segmented/index.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import type { SegmentedProps as AntSegmentedProps, SegmentedLabeledOption as AntSegmentedLabeledOption } from 'antd/es/segmented';
 import type { EllipsisConfig } from '../typography';
+import type { BadgeProps } from '../badge';
 import type { SegmentedRawOption } from 'rc-segmented';
 export * from 'antd/es/segmented';
+type BadgeType = BadgeProps | BadgeProps['count'];
 export type SegmentedLabeledOption = AntSegmentedLabeledOption & {
     ellipsis?: EllipsisConfig;
+    badge?: BadgeType;
 };
 export interface SegmentedProps extends Omit<AntSegmentedProps, 'ref'> {
     options: (SegmentedRawOption | SegmentedLabeledOption)[];

package/es/segmented/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["prefixCls", "options"],
-  _excluded2 = ["label"];
+  _excluded2 = ["label", "badge"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -8,13 +8,18 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useContext } from 'react';
-import { Segmented as AntSegmented } from 'antd';
+import React, { useCallback, useContext } from 'react';
+import { Segmented as AntSegmented, Flex } from 'antd';
 import ConfigProvider from "../config-provider";
 import Typography from "../typography";
+import Badge from "../badge";
 import useStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from 'antd/es/segmented';
+var isReactNode = function isReactNode(item) {
+  return /*#__PURE__*/React.isValidElement(item);
+};
 var Segmented = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var customizePrefixCls = _ref.prefixCls,
     options = _ref.options,
@@ -24,14 +29,28 @@ var Segmented = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var prefixCls = getPrefixCls('segmented', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
     wrapSSR = _useStyle.wrapSSR;
+  var renderBadge = useCallback(function (badge) {
+    if (_typeof(badge) === 'object' && !isReactNode(badge)) {
+      return /*#__PURE__*/_jsx(Badge, _objectSpread({}, badge));
+    }
+    return /*#__PURE__*/_jsx(Badge, {
+      count: badge
+    });
+  }, []);
   var newOptions = options === null || options === void 0 ? void 0 : options.map(function (item) {
-    if (_typeof(item) === 'object' && item !== null && item !== void 0 && item.ellipsis) {
+    if (_typeof(item) === 'object') {
       var label = item.label,
+        badge = item.badge,
         restItem = _objectWithoutProperties(item, _excluded2);
       return _objectSpread(_objectSpread({}, restItem), {}, {
-        label: /*#__PURE__*/_jsx(Typography.Text, {
-          ellipsis: item.ellipsis,
-          children: label
+        label: /*#__PURE__*/_jsxs(Flex, {
+          gap: 4,
+          align: "center",
+          justify: "center",
+          children: [item !== null && item !== void 0 && item.ellipsis ? /*#__PURE__*/_jsx(Typography.Text, {
+            ellipsis: item.ellipsis,
+            children: label
+          }) : label, badge && renderBadge(badge)]
         })
       });
     }

package/es/segmented/style/index.js

@@ -4,8 +4,19 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genSegmentedStyle = function genSegmentedStyle(token) {
-  var componentCls = token.componentCls;
-  return _defineProperty({}, "".concat(componentCls), {});
+  var componentCls = token.componentCls,
+    antCls = token.antCls,
+    colorFill = token.colorFill,
+    colorFillSecondary = token.colorFillSecondary;
+  return _defineProperty({}, "".concat(componentCls, " >").concat(componentCls, "-group"), _defineProperty(_defineProperty({}, "&:not(:has(".concat(componentCls, "-thumb)) >").concat(componentCls, "-item"), _defineProperty({}, "&:not(.ant-segmented-item-selected) >".concat(componentCls, "-item-label"), _defineProperty(_defineProperty({}, '&:hover', _defineProperty({}, "".concat(antCls, "-badge >").concat(antCls, "-badge-count"), {
+    backgroundColor: colorFill
+  })), '&:active', _defineProperty({}, "".concat(antCls, "-badge >").concat(antCls, "-badge-count"), {
+    backgroundColor: colorFillSecondary
+  })))), ">".concat(componentCls, "-item"), _defineProperty({}, ">".concat(componentCls, "-item-label"), _defineProperty({}, "".concat(antCls, "-badge >").concat(antCls, "-badge-count"), {
+    backgroundColor: colorFillSecondary,
+    color: 'inherit',
+    boxShadow: 'none'
+  }))));
 };
 export default (function (prefixCls) {
   var useStyle = genComponentStyleHook('Segmented', function (token) {

package/es/slider/style/index.js

@@ -2,15 +2,22 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { toNumber } from 'lodash';
 import { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genSliderStyle = function genSliderStyle(token) {
   var componentCls = token.componentCls,
     _token$dotSize = token.dotSize,
-    dotSize = _token$dotSize === void 0 ? 8 : _token$dotSize;
-  return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-horizontal"), _defineProperty({}, "".concat(componentCls, "-mark"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-mark-text[style*=\"left: 0%;\"]"), {
+    dotSize = _token$dotSize === void 0 ? 8 : _token$dotSize,
+    _token$handleSize = token.handleSize,
+    handleSize = _token$handleSize === void 0 ? 10 : _token$handleSize,
+    _token$handleLineWidt = token.handleLineWidth,
+    handleLineWidth = _token$handleLineWidt === void 0 ? 2 : _token$handleLineWidt;
+  return _defineProperty({}, "".concat(componentCls).concat(componentCls, "-horizontal"), _defineProperty({}, "".concat(componentCls, "-mark"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-mark-text[style*=\"left: 0%;\"]"), {
     transform: "translateX(calc(0% - ".concat(dotSize / 2, "px)) !important")
   }), "".concat(componentCls, "-mark-text[style*=\"left: 100%;\"]"), {
     transform: "translateX(calc(-100% + ".concat(dotSize / 2, "px)) !important")
+  }), "".concat(componentCls, "-mark-text[style=\"transform: translateX(-50%);\"]"), {
+    transform: "translateX(calc(0% - ".concat((handleSize + toNumber(handleLineWidth) * 2) / 2, "px)) !important")
   })));
 };
 export default (function (prefixCls) {

package/es/tabs/TabPane.d.ts

@@ -1,8 +1,12 @@
 import type { TabPaneProps as AntTabPaneProps } from 'antd/es/tabs/TabPane';
 import type React from 'react';
+import type { BadgeProps } from '../badge';
+type BadgeType = BadgeProps | BadgeProps['count'];
 export interface TabPaneProps extends AntTabPaneProps {
+    /** @deprecated please use `badge` instead */
     tag?: React.ReactNode;
     divider?: boolean;
+    badge?: BadgeType;
 }
 declare const _default: React.FC<TabPaneProps>;
 export default _default;

package/es/tabs/index.d.ts

@@ -2,15 +2,19 @@ import React from 'react';
 import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
 import type { Tab as AntTab } from 'rc-tabs/es/interface';
 import type { TabPaneProps } from './TabPane';
+import type { BadgeProps } from '../badge';
 export * from 'antd/es/tabs';
 export type { TabPaneProps };
+type BadgeType = BadgeProps | BadgeProps['count'];
 export interface AntTabOptional extends Omit<AntTab, 'key' | 'label'> {
     key?: string;
     label?: React.ReactNode;
 }
 export type Tab = {
+    /** @deprecated please use `badge` instead */
     tag?: React.ReactNode;
     divider?: boolean;
+    badge?: BadgeType;
 } & (AntTab | AntTabOptional);
 export interface TabsProps extends Omit<AntTabsProps, 'items'> {
     items?: Tab[];

package/es/tabs/index.js

@@ -1,16 +1,17 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["children", "items", "type", "tabPosition", "prefixCls", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { isNullValue } from '@oceanbase/util';
 import { Divider, Space, Tabs as AntTabs, Tag } from 'antd';
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import classNames from 'classnames';
+import Badge from "../badge";
 import ConfigProvider from "../config-provider";
 import useLegacyItems from "./hooks/useLegacyItems";
 import useStyle, { genTabsStyle } from "./style";
@@ -18,6 +19,9 @@ import TabPane from "./TabPane";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from 'antd/es/tabs';
+var isReactNode = function isReactNode(item) {
+  return /*#__PURE__*/React.isValidElement(item);
+};
 var Tabs = function Tabs(_ref) {
   var _newItems;
   var children = _ref.children,
@@ -37,6 +41,17 @@ var Tabs = function Tabs(_ref) {
   var dividerList = (items === null || items === void 0 ? void 0 : items.filter(function (item) {
     return item.divider;
   })) || [];
+  var renderBadge = useCallback(function (badge) {
+    if (_typeof(badge) === 'object' && !isReactNode(badge)) {
+      return /*#__PURE__*/_jsx(Badge, _objectSpread(_objectSpread({}, badge), {}, {
+        className: classNames("".concat(prefixCls, "-tab-badge"), badge.className)
+      }));
+    }
+    return /*#__PURE__*/_jsx(Badge, {
+      className: "".concat(prefixCls, "-tab-badge"),
+      count: badge
+    });
+  }, [prefixCls]);
   var newItems = useLegacyItems(items, children);
   newItems = (_newItems = newItems) === null || _newItems === void 0 ? void 0 : _newItems.map(function (item) {
     if (!isNullValue(item.divider)) {
@@ -50,11 +65,11 @@ var Tabs = function Tabs(_ref) {
         }),
         disabled: true
       });
-    } else if (!isNullValue(item.tag)) {
+    } else if (!isNullValue(item.tag) || !isNullValue(item.badge)) {
       return _objectSpread(_objectSpread({}, item), {}, {
         label: /*#__PURE__*/_jsxs(Space, {
           size: 4,
-          children: [item.label, /*#__PURE__*/_jsx(Tag, {
+          children: [item.label, item.badge && renderBadge(item.badge), !isNullValue(item.tag) && /*#__PURE__*/_jsx(Tag, {
             bordered: false,
             className: "".concat(prefixCls, "-tab-tag"),
             children: item.tag

package/es/tabs/style/index.js

@@ -8,18 +8,25 @@ export var genTabsStyle = function genTabsStyle(token) {
     componentCls = token.componentCls,
     colorInfo = token.colorInfo,
     colorInfoBg = token.colorInfoBg,
-    colorTextSecondary = token.colorTextSecondary;
+    colorTextSecondary = token.colorTextSecondary,
+    colorFillQuaternary = token.colorFillQuaternary;
   return _defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&".concat(componentCls, "-top, &").concat(componentCls, "-bottom"), _defineProperty({}, "".concat(componentCls, "-nav::before"), {
     // 页签位置为 top 和 bottom 时，去掉分割线
     border: 'none'
-  })), "".concat(componentCls, "-tab"), _defineProperty({}, "".concat(componentCls, "-tab-tag"), {
+  })), "".concat(componentCls, "-tab"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-tab-tag"), {
     color: colorTextSecondary,
     fontFamily: 'PingFangSC',
     fontSize: 12,
     borderRadius: 12,
     marginInlineEnd: 0,
     height: 20
-  })), "".concat(componentCls, "-tab-active"), _defineProperty({}, "".concat(componentCls, "-tab-tag"), {
+  }), "".concat(componentCls, "-tab-badge"), _defineProperty(_defineProperty({}, ">".concat(antCls, "-badge-count"), {
+    color: colorTextSecondary,
+    backgroundColor: colorFillQuaternary
+  }), "borderRadius", 12))), "".concat(componentCls, "-tab-active"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-tab-tag"), {
+    color: colorInfo,
+    backgroundColor: colorInfoBg
+  }), "".concat(componentCls, "-tab-badge >").concat(antCls, "-badge-count"), {
     color: colorInfo,
     backgroundColor: colorInfoBg
   })), "".concat(componentCls, "-tab[data-node-key^=divider-]"), _defineProperty({

package/lib/anchor/index.d.ts

@@ -1 +1,2 @@
+export * from 'antd/es/anchor/Anchor';
 export * from 'antd/es/anchor';

package/lib/anchor/index.js

@@ -16,8 +16,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/anchor/index.ts
 var anchor_exports = {};
 module.exports = __toCommonJS(anchor_exports);
+__reExport(anchor_exports, require("antd/es/anchor/Anchor"), module.exports);
 __reExport(anchor_exports, require("antd/es/anchor"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ...require("antd/es/anchor/Anchor"),
   ...require("antd/es/anchor")
 });

package/lib/avatar/index.d.ts

@@ -1 +1,2 @@
+export * from 'antd/es/avatar/AvatarContext';
 export * from 'antd/es/avatar';

package/lib/avatar/index.js

@@ -16,8 +16,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/avatar/index.ts
 var avatar_exports = {};
 module.exports = __toCommonJS(avatar_exports);
+__reExport(avatar_exports, require("antd/es/avatar/AvatarContext"), module.exports);
 __reExport(avatar_exports, require("antd/es/avatar"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ...require("antd/es/avatar/AvatarContext"),
   ...require("antd/es/avatar")
 });

package/lib/segmented/index.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
 import type { SegmentedProps as AntSegmentedProps, SegmentedLabeledOption as AntSegmentedLabeledOption } from 'antd/es/segmented';
 import type { EllipsisConfig } from '../typography';
+import type { BadgeProps } from '../badge';
 import type { SegmentedRawOption } from 'rc-segmented';
 export * from 'antd/es/segmented';
+type BadgeType = BadgeProps | BadgeProps['count'];
 export type SegmentedLabeledOption = AntSegmentedLabeledOption & {
     ellipsis?: EllipsisConfig;
+    badge?: BadgeType;
 };
 export interface SegmentedProps extends Omit<AntSegmentedProps, 'ref'> {
     options: (SegmentedRawOption | SegmentedLabeledOption)[];

package/lib/segmented/index.js

@@ -37,19 +37,29 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
 var import_typography = __toESM(require("../typography"));
+var import_badge = __toESM(require("../badge"));
 var import_style = __toESM(require("./style"));
 __reExport(segmented_exports, require("antd/es/segmented"), module.exports);
+var isReactNode = (item) => {
+  return import_react.default.isValidElement(item);
+};
 var Segmented = import_react.default.forwardRef(
   ({ prefixCls: customizePrefixCls, options, ...restProps }, ref) => {
     const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("segmented", customizePrefixCls);
     const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const renderBadge = (0, import_react.useCallback)((badge) => {
+      if (typeof badge === "object" && !isReactNode(badge)) {
+        return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { ...badge });
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { count: badge });
+    }, []);
     const newOptions = options == null ? void 0 : options.map((item) => {
-      if (typeof item === "object" && (item == null ? void 0 : item.ellipsis)) {
-        const { label, ...restItem } = item;
+      if (typeof item === "object") {
+        const { label, badge, ...restItem } = item;
         return {
           ...restItem,
-          label: /* @__PURE__ */ import_react.default.createElement(import_typography.default.Text, { ellipsis: item.ellipsis }, label)
+          label: /* @__PURE__ */ import_react.default.createElement(import_antd.Flex, { gap: 4, align: "center", justify: "center" }, (item == null ? void 0 : item.ellipsis) ? /* @__PURE__ */ import_react.default.createElement(import_typography.default.Text, { ellipsis: item.ellipsis }, label) : label, badge && renderBadge(badge))
         };
       }
       return item;

package/lib/segmented/style/index.js

@@ -25,9 +25,33 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genSegmentedStyle = (token) => {
-  const { componentCls } = token;
+  const { componentCls, antCls, colorFill, colorFillSecondary } = token;
   return {
-    [`${componentCls}`]: {}
+    [`${componentCls} >${componentCls}-group`]: {
+      [`&:not(:has(${componentCls}-thumb)) >${componentCls}-item`]: {
+        [`&:not(.ant-segmented-item-selected) >${componentCls}-item-label`]: {
+          ["&:hover"]: {
+            [`${antCls}-badge >${antCls}-badge-count`]: {
+              backgroundColor: colorFill
+            }
+          },
+          ["&:active"]: {
+            [`${antCls}-badge >${antCls}-badge-count`]: {
+              backgroundColor: colorFillSecondary
+            }
+          }
+        }
+      },
+      [`>${componentCls}-item`]: {
+        [`>${componentCls}-item-label`]: {
+          [`${antCls}-badge >${antCls}-badge-count`]: {
+            backgroundColor: colorFillSecondary,
+            color: "inherit",
+            boxShadow: "none"
+          }
+        }
+      }
+    }
   };
 };
 var style_default = (prefixCls) => {

package/lib/slider/style/index.js

@@ -23,9 +23,10 @@ __export(style_exports, {
   genSliderStyle: () => genSliderStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_lodash = require("lodash");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genSliderStyle = (token) => {
-  const { componentCls, dotSize = 8 } = token;
+  const { componentCls, dotSize = 8, handleSize = 10, handleLineWidth = 2 } = token;
   return {
     [`${componentCls}${componentCls}-horizontal`]: {
       [`${componentCls}-mark`]: {
@@ -34,6 +35,9 @@ var genSliderStyle = (token) => {
         },
         [`${componentCls}-mark-text[style*="left: 100%;"]`]: {
           transform: `translateX(calc(-100% + ${dotSize / 2}px)) !important`
+        },
+        [`${componentCls}-mark-text[style="transform: translateX(-50%);"]`]: {
+          transform: `translateX(calc(0% - ${(handleSize + (0, import_lodash.toNumber)(handleLineWidth) * 2) / 2}px)) !important`
         }
       }
     }

package/lib/tabs/TabPane.d.ts

@@ -1,8 +1,12 @@
 import type { TabPaneProps as AntTabPaneProps } from 'antd/es/tabs/TabPane';
 import type React from 'react';
+import type { BadgeProps } from '../badge';
+type BadgeType = BadgeProps | BadgeProps['count'];
 export interface TabPaneProps extends AntTabPaneProps {
+    /** @deprecated please use `badge` instead */
     tag?: React.ReactNode;
     divider?: boolean;
+    badge?: BadgeType;
 }
 declare const _default: React.FC<TabPaneProps>;
 export default _default;

package/lib/tabs/index.d.ts

@@ -2,15 +2,19 @@ import React from 'react';
 import type { TabsProps as AntTabsProps, TabsPosition as AntTabsPosition } from 'antd/es/tabs';
 import type { Tab as AntTab } from 'rc-tabs/es/interface';
 import type { TabPaneProps } from './TabPane';
+import type { BadgeProps } from '../badge';
 export * from 'antd/es/tabs';
 export type { TabPaneProps };
+type BadgeType = BadgeProps | BadgeProps['count'];
 export interface AntTabOptional extends Omit<AntTab, 'key' | 'label'> {
     key?: string;
     label?: React.ReactNode;
 }
 export type Tab = {
+    /** @deprecated please use `badge` instead */
     tag?: React.ReactNode;
     divider?: boolean;
+    badge?: BadgeType;
 } & (AntTab | AntTabOptional);
 export interface TabsProps extends Omit<AntTabsProps, 'items'> {
     items?: Tab[];

package/lib/tabs/index.js

@@ -37,11 +37,15 @@ var import_util = require("@oceanbase/util");
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
+var import_badge = __toESM(require("../badge"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_useLegacyItems = __toESM(require("./hooks/useLegacyItems"));
 var import_style = __toESM(require("./style"));
 var import_TabPane = __toESM(require("./TabPane"));
 __reExport(tabs_exports, require("antd/es/tabs"), module.exports);
+var isReactNode = (item) => {
+  return import_react.default.isValidElement(item);
+};
 var Tabs = ({
   children,
   items,
@@ -57,6 +61,15 @@ var Tabs = ({
   const tabsCls = (0, import_classnames.default)(className);
   const isHorizontal = !tabPosition || tabPosition === "top" || tabPosition === "bottom";
   const dividerList = (items == null ? void 0 : items.filter((item) => item.divider)) || [];
+  const renderBadge = (0, import_react.useCallback)(
+    (badge) => {
+      if (typeof badge === "object" && !isReactNode(badge)) {
+        return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { ...badge, className: (0, import_classnames.default)(`${prefixCls}-tab-badge`, badge.className) });
+      }
+      return /* @__PURE__ */ import_react.default.createElement(import_badge.default, { className: `${prefixCls}-tab-badge`, count: badge });
+    },
+    [prefixCls]
+  );
   let newItems = (0, import_useLegacyItems.default)(items, children);
   newItems = newItems == null ? void 0 : newItems.map((item) => {
     if (!(0, import_util.isNullValue)(item.divider)) {
@@ -72,10 +85,10 @@ var Tabs = ({
         ),
         disabled: true
       };
-    } else if (!(0, import_util.isNullValue)(item.tag)) {
+    } else if (!(0, import_util.isNullValue)(item.tag) || !(0, import_util.isNullValue)(item.badge)) {
       return {
         ...item,
-        label: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.label, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, item.tag))
+        label: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.label, item.badge && renderBadge(item.badge), !(0, import_util.isNullValue)(item.tag) && /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${prefixCls}-tab-tag` }, item.tag))
       };
     }
     return item;

package/lib/tabs/style/index.js

@@ -25,7 +25,7 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTabsStyle = (token) => {
-  const { antCls, componentCls, colorInfo, colorInfoBg, colorTextSecondary } = token;
+  const { antCls, componentCls, colorInfo, colorInfoBg, colorTextSecondary, colorFillQuaternary } = token;
   return {
     [componentCls]: {
       [`&${componentCls}-top, &${componentCls}-bottom`]: {
@@ -35,6 +35,7 @@ var genTabsStyle = (token) => {
         }
       },
       [`${componentCls}-tab`]: {
+        /** @deprecated */
         [`${componentCls}-tab-tag`]: {
           color: colorTextSecondary,
           fontFamily: "PingFangSC",
@@ -42,12 +43,24 @@ var genTabsStyle = (token) => {
           borderRadius: 12,
           marginInlineEnd: 0,
           height: 20
+        },
+        [`${componentCls}-tab-badge`]: {
+          [`>${antCls}-badge-count`]: {
+            color: colorTextSecondary,
+            backgroundColor: colorFillQuaternary
+          },
+          borderRadius: 12
         }
       },
       [`${componentCls}-tab-active`]: {
+        /** @deprecated */
         [`${componentCls}-tab-tag`]: {
           color: colorInfo,
           backgroundColor: colorInfoBg
+        },
+        [`${componentCls}-tab-badge >${antCls}-badge-count`]: {
+          color: colorInfo,
+          backgroundColor: colorInfoBg
         }
       },
       [`${componentCls}-tab[data-node-key^=divider-]`]: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -66,5 +66,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "eea14051a255a8820d64e80e4c0d08527002477f"
+  "gitHead": "2d9213d7c374b9dc207ebd40663f1c50828e72b7"
 }