@oceanbase/design 0.4.11 → 0.4.13

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/static-function/index.js

@@ -41,14 +41,15 @@ var import_alias = __toESM(require("antd/lib/theme/util/alias"));
 var import_theme = __toESM(require("../theme"));
 var import_default = __toESM(require("../theme/default"));
 var { defaultAlgorithm, defaultSeed, useToken } = import_theme.default;
-var _a, _b;
+var _a, _b, _c;
 var mapToken = {
   ...defaultAlgorithm(defaultSeed),
   ...import_default.default.token,
   // 需要覆盖部分 Alias Token 的值
   override: {
     boxShadow: (_a = import_default.default.token) == null ? void 0 : _a.boxShadow,
-    boxShadowSecondary: (_b = import_default.default.token) == null ? void 0 : _b.boxShadowSecondary
+    boxShadowSecondary: (_b = import_default.default.token) == null ? void 0 : _b.boxShadowSecondary,
+    boxShadowTertiary: (_c = import_default.default.token) == null ? void 0 : _c.boxShadowTertiary
   }
 };
 var token = (0, import_alias.default)(mapToken);

package/lib/table/index.d.ts

@@ -38,8 +38,8 @@ declare const _default: (<RecordType extends AnyObject = AnyObject>(props: Table
     SELECTION_ALL: "SELECT_ALL";
     SELECTION_INVERT: "SELECT_INVERT";
     SELECTION_NONE: "SELECT_NONE";
-    Column: <RecordType extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType>) => null;
-    ColumnGroup: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_1>) => null;
+    Column: <RecordType_1 extends import("antd/es/_util/type").AnyObject>(_: import("antd").TableColumnProps<RecordType_1>) => null;
+    ColumnGroup: <RecordType_2 extends import("antd/es/_util/type").AnyObject>(_: import("antd/es/table/ColumnGroup").ColumnGroupProps<RecordType_2>) => null;
     Summary: typeof Summary;
     useStyle: (prefixCls: string) => {
         wrapSSR: (node: ReactNode) => ReactElement<any, string | React.JSXElementConstructor<any>>;

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/lib/theme/default.js

@@ -97,8 +97,9 @@ var defaultTheme = {
     colorBgMask: "rgba(19, 32, 57, 0.45)",
     colorBgElevated: "#ffffff",
     colorBgSpotlight: "#ffffff",
+    boxShadow: "0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05)",
     boxShadowSecondary: "0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05)",
-    boxShadow: "0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02)",
+    boxShadowTertiary: "0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02)",
     borderRadius: 6,
     wireframe: false,
     // Remove focus outline

package/lib/theme/style/compact.less

@@ -412,8 +412,9 @@
 @borderRadiusSM: 4;
 @borderRadiusLG: 8;
 @borderRadiusOuter: 4;
+@boxShadow: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
-@boxShadow: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
+@boxShadowTertiary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @lineWidthFocus: 3;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
@@ -471,11 +472,6 @@
 @marginLG: 16;
 @marginXL: 32;
 @marginXXL: 48;
-@boxShadowTertiary: 
-      0 1px 2px 0 rgba(0, 0, 0, 0.03),
-      0 1px 6px -1px rgba(0, 0, 0, 0.02),
-      0 2px 4px 0 rgba(0, 0, 0, 0.02)
-    ;
 @screenXS: 480;
 @screenXSMin: 480;
 @screenXSMax: 575;

package/lib/theme/style/dark.less

@@ -322,8 +322,8 @@
 @colorBgBlur: rgba(255,255,255,0.04);
 @colorBorder: #424242;
 @colorBorderSecondary: #303030;
-@colorPrimaryBg: #111a2c;
-@colorPrimaryBgHover: #0f2445;
+@colorPrimaryBg: #0e2e5b;
+@colorPrimaryBgHover: #0b3b7e;
 @colorPrimaryBorder: #0e2e5b;
 @colorPrimaryBorderHover: #0b3b7e;
 @colorPrimaryHover: #277de8;
@@ -436,11 +436,11 @@
 @controlOutlineWidth: 2;
 @controlInteractiveSize: 16;
 @controlItemBgHover: rgba(255,255,255,0.08);
-@controlItemBgActive: #111a2c;
-@controlItemBgActiveHover: #0f2445;
+@controlItemBgActive: #0e2e5b;
+@controlItemBgActiveHover: #0b3b7e;
 @controlItemBgActiveDisabled: rgba(255,255,255,0.18);
 @controlTmpOutline: rgba(255,255,255,0.04);
-@controlOutline: rgba(0,60,180,0.15);
+@controlOutline: rgba(1,104,249,0.31);
 @fontWeightStrong: 600;
 @opacityLoading: 0.65;
 @linkDecoration: none;

package/lib/theme/style/default.less

@@ -412,8 +412,9 @@
 @borderRadiusSM: 4;
 @borderRadiusLG: 8;
 @borderRadiusOuter: 4;
+@boxShadow: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
 @boxShadowSecondary: 0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05);
-@boxShadow: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
+@boxShadowTertiary: 0 1px 2px 0 rgba(54, 69, 99, 0.03), 0 1px 6px -1px rgba(54, 69, 99, 0.02), 0 2px 4px 0 rgba(54, 69, 99, 0.02);
 @lineWidthFocus: 3;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
@@ -471,11 +472,6 @@
 @marginLG: 24;
 @marginXL: 32;
 @marginXXL: 48;
-@boxShadowTertiary: 
-      0 1px 2px 0 rgba(0, 0, 0, 0.03),
-      0 1px 6px -1px rgba(0, 0, 0, 0.02),
-      0 2px 4px 0 rgba(0, 0, 0, 0.02)
-    ;
 @screenXS: 480;
 @screenXSMin: 480;
 @screenXSMax: 575;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/design",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "description": "The Design System of OceanBase",
   "keywords": [
     "oceanbase",
@@ -43,28 +43,28 @@
     "@ctrl/tinycolor": "^4.1.0",
     "@inline-svg-unique-id/react": "^1.2.3",
     "@oceanbase/aliyun-theme": "^0.1.6",
-    "@oceanbase/icons": "^0.4.6",
-    "@oceanbase/util": "^0.4.3",
+    "@oceanbase/icons": "^0.4.7",
+    "@oceanbase/util": "^0.4.4",
     "ahooks": "^2.10.14",
-    "antd": "^5.25.0",
+    "antd": "^5.26.4",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21",
-    "lottie-web": "^5.12.2",
+    "lottie-web": "^5.13.0",
     "prop-types": "^15.8.1",
     "rc-util": "^5.44.4"
   },
   "devDependencies": {
-    "@babel/cli": "^7.27.2",
-    "@babel/preset-env": "^7.27.2",
+    "@babel/cli": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
     "antd-token-previewer": "^2.0.8",
-    "rc-select": "^14.16.7",
+    "rc-select": "^14.16.8",
     "rc-slider": "^11.1.8",
-    "rc-table": "^7.50.4",
+    "rc-table": "^7.51.1",
     "rc-tree-select": "^5.27.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "c3f287cc3ed59f6483423ca1c1f09d65012b0d8f"
+  "gitHead": "2d9213d7c374b9dc207ebd40663f1c50828e72b7"
 }