@oceanbase/design 1.0.0-alpha.3 → 1.0.0-alpha.5

package/lib/alert/style/index.js

@@ -24,118 +24,217 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var genTypeStyle = (color, token) => {
-  const borderWidth = 8;
-  return {
-    content: '""',
-    width: borderWidth,
-    // 绕 Y 轴旋转 60deg 是为了让圆角有一定的视觉拉伸，以与原先的边框贴合更加紧密
-    transform: "rotateY(60deg)",
-    backgroundColor: color,
-    position: "absolute",
-    height: `calc(100% - ${token.lineWidth}px)`,
-    left: -token.lineWidth - borderWidth / 2 / 2,
-    top: token.lineWidth / 2,
-    borderTopLeftRadius: token.borderRadiusLG,
-    borderBottomLeftRadius: token.borderRadiusLG
+var import_lodash = require("lodash");
+var genAlertTypeStyle = (type, token) => {
+  const { componentCls } = token;
+  const textColor = token[`color${(0, import_lodash.upperFirst)(type)}Text`];
+  const hoverColor = token[`color${(0, import_lodash.upperFirst)(type)}TextHover`];
+  const activeColor = token[`color${(0, import_lodash.upperFirst)(type)}TextActive`];
+  const linkStyle = {
+    color: textColor,
+    textDecoration: "underline",
+    "&:hover": {
+      color: hoverColor
+    },
+    "&:active": {
+      color: activeColor
+    }
   };
-};
-var genColoredStyle = (color, colorHover, token) => {
-  const { componentCls, iconCls } = token;
   return {
     [`${componentCls}-message`]: {
-      color
+      color: textColor,
+      a: linkStyle
     },
     [`${componentCls}-description`]: {
-      color
+      a: linkStyle
     },
-    [`${componentCls}-close-icon`]: {
-      [`${iconCls}`]: {
-        color,
-        "&:hover": {
-          color: colorHover
-        }
-      },
-      [`${componentCls}-close-text`]: {
-        color,
-        "&:hover": {
-          color: colorHover
-        }
-      }
+    [`${componentCls}-icon`]: {
+      color: textColor
     }
   };
 };
 var genAlertStyle = (token) => {
-  const {
-    componentCls,
-    colorSuccess,
-    colorSuccessHover,
-    colorInfo,
-    colorInfoHover,
-    colorWarning,
-    colorWarningHover,
-    colorError,
-    colorErrorHover,
-    colorIcon,
-    colorIconHover,
-    motionDurationMid
-  } = token;
-  const height = token.fontSize * token.lineHeight;
+  const { componentCls, colorIcon, colorIconHover, motionDurationMid, calc } = token;
+  const height = calc(token.fontSize).mul(token.lineHeight).equal();
+  const iconWidth = token.fontSizeLG;
+  const contentStartOffset = calc(iconWidth).add(token.marginXS).equal();
+  const closeIconWidth = height;
   return {
     [`${componentCls}`]: {
       // vertical align to flex-start
       alignItems: "flex-start !important",
-      paddingRight: token.padding,
+      paddingInline: token.padding,
+      position: "relative",
       [`${componentCls}-icon`]: {
-        height
+        height,
+        fontSize: token.fontSizeLG,
+        marginInlineEnd: token.marginXS,
+        flexShrink: 0
       },
       [`${componentCls}-close-icon`]: {
+        position: "absolute",
+        top: token.paddingXS,
+        insetInlineEnd: token.padding,
         height,
         color: colorIcon,
         transition: `color ${motionDurationMid}`,
+        flexShrink: 0,
+        display: "flex",
+        alignItems: "center",
         "&:hover": {
           color: colorIconHover
         }
-      }
+      },
+      // Default link styles (will be overridden by type-specific styles)
+      [`${componentCls}-message`]: {
+        a: {
+          textDecoration: "underline"
+        }
+      },
+      [`${componentCls}-description`]: {
+        a: {
+          textDecoration: "underline"
+        }
+      },
+      [`&${componentCls}-success`]: genAlertTypeStyle("success", token),
+      [`&${componentCls}-info`]: genAlertTypeStyle("info", token),
+      [`&${componentCls}-warning`]: genAlertTypeStyle("warning", token),
+      [`&${componentCls}-error`]: genAlertTypeStyle("error", token)
     },
     [`${componentCls}:not(${componentCls}-with-description)`]: {
-      paddingLeft: token.padding
+      flexWrap: "wrap",
+      [`${componentCls}-content`]: {
+        flex: `1 1 ${calc("100%").sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal()}`,
+        minWidth: 0,
+        maxWidth: calc("100%").sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal(),
+        wordBreak: "break-word"
+      },
+      [`${componentCls}-action`]: {
+        width: calc("100%").sub(contentStartOffset).sub(token.padding).equal(),
+        marginInlineStart: contentStartOffset,
+        marginTop: token.marginXS
+      }
     },
     [`${componentCls}${componentCls}-with-description`]: {
-      paddingBlock: token.padding,
+      paddingBlock: token.paddingSM,
+      flexWrap: "wrap",
       [`${componentCls}-message`]: {
-        fontWeight: 500,
-        marginBottom: token.marginXXS
+        fontSize: token.fontSize,
+        fontWeight: token.fontWeightStrong,
+        marginBottom: token.marginXXS,
+        wordBreak: "break-word"
       },
       [`${componentCls}-description`]: {
-        color: token.colorTextSecondary
+        wordBreak: "break-word"
       },
-      [`${componentCls}-icon`]: {
-        fontSize: token.fontSizeHeading4,
-        height: token.fontSizeHeading3,
-        marginInlineEnd: token.margin
+      [`${componentCls}-content`]: {
+        flex: `1 1 ${calc("100%").sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal()}`,
+        minWidth: 0,
+        maxWidth: calc("100%").sub(contentStartOffset).sub(closeIconWidth).sub(token.padding).equal(),
+        wordBreak: "break-word"
       },
       [`${componentCls}-action`]: {
-        marginInlineStart: token.marginXS
+        width: calc("100%").sub(contentStartOffset).sub(token.padding).equal(),
+        marginInlineStart: contentStartOffset,
+        marginTop: token.marginSM
+      },
+      [`${componentCls}-close-icon`]: {
+        top: token.paddingSM
       }
     },
-    [`${componentCls}:not(${componentCls}-banner):not(${componentCls}-ghost)`]: {
-      [`&${componentCls}-success::before`]: genTypeStyle(colorSuccess, token),
-      [`&${componentCls}-info::before`]: genTypeStyle(colorInfo, token),
-      [`&${componentCls}-warning::before`]: genTypeStyle(colorWarning, token),
-      [`&${componentCls}-error::before`]: genTypeStyle(colorError, token)
-    },
     [`${componentCls}${componentCls}-ghost`]: {
       backgroundColor: "transparent",
       border: "none",
-      padding: 0,
+      padding: "0px !important",
       borderRadius: 0
     },
-    [`${componentCls}-colored`]: {
-      [`&${componentCls}-success`]: genColoredStyle(colorSuccess, colorSuccessHover, token),
-      [`&${componentCls}-info`]: genColoredStyle(colorInfo, colorInfoHover, token),
-      [`&${componentCls}-warning`]: genColoredStyle(colorWarning, colorWarningHover, token),
-      [`&${componentCls}-error`]: genColoredStyle(colorError, colorErrorHover, token)
+    [`${componentCls}${componentCls}-mini`]: {
+      paddingBlock: token.paddingXXS,
+      paddingInline: token.paddingXS,
+      border: "none",
+      width: "fit-content",
+      display: "inline-flex",
+      alignItems: "center",
+      flexWrap: "nowrap",
+      [`${componentCls}-icon`]: {
+        marginInlineEnd: token.paddingXS,
+        flexShrink: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        lineHeight: 1
+      },
+      [`${componentCls}-message`]: {
+        whiteSpace: "nowrap",
+        wordBreak: "normal",
+        overflow: "visible",
+        lineHeight: token.lineHeight,
+        display: "flex",
+        alignItems: "center"
+      },
+      [`${componentCls}-content`]: {
+        display: "flex",
+        alignItems: "center",
+        flex: "0 1 auto",
+        whiteSpace: "nowrap",
+        minWidth: 0,
+        lineHeight: token.lineHeight
+      },
+      [`${componentCls}-close-icon`]: {
+        position: "relative",
+        top: token.paddingXXS,
+        insetInlineEnd: "auto",
+        height: "auto",
+        flexShrink: 0,
+        marginInlineStart: 0
+      },
+      [`&${componentCls}-closable`]: {
+        [`${componentCls}-content`]: {
+          paddingInlineEnd: token.paddingXS
+        }
+      },
+      [`&:not(${componentCls}-with-description)`]: {
+        flexWrap: "nowrap",
+        [`${componentCls}-content`]: {
+          flex: "0 1 auto",
+          minWidth: 0,
+          maxWidth: "none",
+          wordBreak: "normal"
+        }
+      },
+      [`&${componentCls}-with-description`]: {
+        paddingBlock: token.paddingXXS,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        position: "relative",
+        flexWrap: "nowrap",
+        [`${componentCls}-icon`]: {
+          alignSelf: "flex-start",
+          marginTop: 0
+        },
+        [`${componentCls}-content`]: {
+          flexDirection: "column",
+          alignItems: "flex-start",
+          flex: "0 1 auto",
+          minWidth: 0,
+          maxWidth: "none",
+          wordBreak: "normal"
+        },
+        [`${componentCls}-message`]: {
+          marginBottom: token.marginXXS,
+          whiteSpace: "nowrap",
+          wordBreak: "normal"
+        },
+        [`${componentCls}-description`]: {
+          whiteSpace: "nowrap",
+          wordBreak: "normal"
+        },
+        [`${componentCls}-close-icon`]: {
+          position: "absolute",
+          top: token.paddingXXS,
+          insetInlineEnd: token.paddingXS
+        }
+      }
     }
   };
 };

package/lib/badge/index.js

@@ -43,7 +43,7 @@ __reExport(badge_exports, require("antd/es/badge"), module.exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var Badge = import_react.default.forwardRef(
   ({ prefixCls: customizePrefixCls, className, status, text, icon, ...restProps }, ref) => {
-    const { getPrefixCls, iconPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
     const prefixCls = getPrefixCls("badge", customizePrefixCls);
     const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
     const iconMap = {
@@ -54,7 +54,7 @@ var Badge = import_react.default.forwardRef(
           style: {
             display: "inline-block"
           },
-          className: `${iconPrefixCls}-spin`
+          spin: true
         }
       ),
       success: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleFilled, {}),

package/lib/badge/style/index.js

@@ -35,9 +35,7 @@ var genBadgeStyle = (token) => {
     [`${componentCls}${componentCls}-status`]: {
       // dot style
       [`${componentCls}-status-dot`]: {
-        [`&${componentCls}-status-default`]: {
-          backgroundColor: token.colorFill
-        }
+        [`&${componentCls}-status-default`]: {}
       },
       // icon style
       [`${componentCls}-status-icon`]: {

package/lib/card/index.d.ts

@@ -8,6 +8,10 @@ export interface CardTabListType extends AntCardTabListType {
 export interface CardProps extends AntCardProps {
     divided?: boolean;
     tabList?: CardTabListType[];
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
 }
 declare const _default: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Grid: React.FC<import("antd/es/card").CardGridProps>;

package/lib/card/index.js

@@ -37,8 +37,10 @@ var import_util = require("@oceanbase/util");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
+var import_icons = require("@oceanbase/icons");
 var import_config_provider = __toESM(require("../config-provider"));
 var import_util2 = require("../_util");
+var import_theme = __toESM(require("../theme"));
 var import_style = __toESM(require("./style"));
 __reExport(card_exports, require("antd/es/card/Card"), module.exports);
 __reExport(card_exports, require("antd/es/card"), module.exports);
@@ -55,20 +57,72 @@ var Card = import_react.default.forwardRef(
     bodyStyle,
     styles,
     className,
+    collapsible,
+    defaultCollapsed,
+    collapsed: outerCollapsed,
+    onCollapse,
+    extra,
     ...restProps
   }, ref) => {
     var _a;
-    const { getPrefixCls, card: contextCard } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const {
+      getPrefixCls,
+      card: contextCard,
+      iconPrefixCls
+    } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const { token } = import_theme.default.useToken();
     const divided = outerDivided ?? (contextCard == null ? void 0 : contextCard.divided) ?? true;
     const prefixCls = getPrefixCls("card", customizePrefixCls);
     const tabsPrefixCls = getPrefixCls("tabs", customizePrefixCls);
     const { wrapSSR } = (0, import_style.default)(prefixCls, tabsPrefixCls);
+    const [internalCollapsed, setInternalCollapsed] = (0, import_react.useState)(defaultCollapsed ?? false);
+    const collapsed = outerCollapsed !== void 0 ? outerCollapsed : internalCollapsed;
+    const handleCollapse = (0, import_react.useCallback)(() => {
+      const newCollapsed = !collapsed;
+      if (outerCollapsed === void 0) {
+        setInternalCollapsed(newCollapsed);
+      }
+      onCollapse == null ? void 0 : onCollapse(newCollapsed);
+    }, [collapsed, outerCollapsed, onCollapse]);
+    const cardTitle = (0, import_react.useMemo)(() => {
+      if (!collapsible) {
+        return title;
+      }
+      if (!title) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: `${prefixCls}-title-wrapper`,
+          onClick: handleCollapse,
+          style: { cursor: "pointer", display: "flex", alignItems: "center" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.CaretRightFilled,
+              {
+                className: `${prefixCls}-collapsible-icon`,
+                style: {
+                  transition: `transform ${token.motionDurationMid}`,
+                  transform: collapsed ? void 0 : "rotate(90deg)",
+                  color: token.colorIcon,
+                  marginRight: token.marginXS
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title })
+          ]
+        }
+      );
+    }, [collapsible, title, collapsed, prefixCls, token, handleCollapse]);
     const noBodyHorizontalPadding = (0, import_util2.isHorizontalPaddingZero)(bodyStyle == null ? void 0 : bodyStyle.padding) || (0, import_util2.isHorizontalPaddingZero)((_a = styles == null ? void 0 : styles.body) == null ? void 0 : _a.padding);
     const cardCls = (0, import_classnames.default)(
       {
         [`${prefixCls}-has-title`]: !!title,
         [`${prefixCls}-no-divider`]: !divided,
-        [`${prefixCls}-no-body-horizontal-padding`]: noBodyHorizontalPadding
+        [`${prefixCls}-no-body-horizontal-padding`]: noBodyHorizontalPadding,
+        [`${prefixCls}-collapsible`]: collapsible,
+        [`${prefixCls}-collapsed`]: collapsed
       },
       className
     );
@@ -90,16 +144,19 @@ var Card = import_react.default.forwardRef(
         {
           ref,
           size,
-          title,
+          title: cardTitle,
           tabList: newTabList,
           tabProps: {
             size: "middle",
             ...tabProps
           },
           prefixCls: customizePrefixCls,
-          bodyStyle,
+          bodyStyle: {
+            ...bodyStyle
+          },
           styles,
           className: cardCls,
+          extra,
           ...restProps,
           children
         }

package/lib/card/style/index.js

@@ -24,6 +24,7 @@ __export(style_exports, {
   genTableStyle: () => genTableStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_style = require("../../tabs/style");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genTableStyle = (padding, token) => {
@@ -55,17 +56,20 @@ var genTableStyle = (padding, token) => {
   };
 };
 var genCardStyle = (token) => {
-  const { componentCls, antCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG } = token;
+  const { componentCls, antCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG, calc } = token;
   const tableComponentCls = `${antCls}-table`;
   return {
     [`${componentCls}`]: {
+      [`${componentCls}-body`]: {
+        paddingTop: token.padding
+      },
       // nested Card style
       [`${componentCls}:not(${componentCls}-bordered):not(${componentCls}-type-inner)`]: {
         boxShadow: "none"
       },
       // nested and bordered Card radius
       [`${componentCls}${componentCls}-bordered`]: {
-        borderRadius: token.borderRadiusLG - 2,
+        borderRadius: calc(token.borderRadiusLG).sub(2).equal(),
         [`${componentCls}${componentCls}-bordered`]: {
           borderRadius: token.borderRadius,
           [`${componentCls}${componentCls}-bordered`]: {
@@ -78,6 +82,8 @@ var genCardStyle = (token) => {
       [`${componentCls}-head`]: {
         // should not remove border-bottom to avoid tabs inkbar display correctly
         borderBottomColor: "transparent",
+        paddingTop: token.paddingLG,
+        paddingBottom: token.padding,
         // remove divider for top and bottom tabs
         [tabsComponentCls]: {
           [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
@@ -90,12 +96,17 @@ var genCardStyle = (token) => {
     },
     [`${componentCls}${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
-        padding: `0 ${paddingLG}px ${paddingLG}px ${paddingLG}px`
+        padding: `0 ${(0, import_cssinjs.unit)(paddingLG)} ${(0, import_cssinjs.unit)(paddingLG)} ${(0, import_cssinjs.unit)(paddingLG)}`
+      }
+    },
+    [`${componentCls}-small`]: {
+      [`${componentCls}-body`]: {
+        paddingTop: token.paddingXS
       }
     },
     [`${componentCls}-small${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
-        padding: `0 ${paddingSM}px ${paddingSM}px ${paddingSM}px`
+        padding: `0 ${(0, import_cssinjs.unit)(paddingSM)} ${(0, import_cssinjs.unit)(paddingSM)} ${(0, import_cssinjs.unit)(paddingSM)}`
       }
     },
     [`${componentCls}-small${componentCls}-contain-tabs >${componentCls}-head`]: {
@@ -104,11 +115,20 @@ var genCardStyle = (token) => {
       }
     },
     [`${componentCls}${componentCls}-contain-tabs`]: {
-      [`${componentCls}-head`]: (0, import_style.genTabsStyle)({
-        ...token,
-        componentCls: tabsComponentCls,
-        prefixCls: tabsPrefixCls
-      })
+      [`${componentCls}-head`]: {
+        ...(0, import_style.genTabsStyle)({
+          ...token,
+          componentCls: tabsComponentCls,
+          prefixCls: tabsPrefixCls
+        }),
+        [tabsComponentCls]: {
+          [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
+            [`${tabsComponentCls}-tab`]: {
+              paddingBlock: token.padding
+            }
+          }
+        }
+      }
     },
     [`${componentCls}${componentCls}-contain-grid`]: {
       [`${componentCls}-head`]: {
@@ -126,14 +146,41 @@ var genCardStyle = (token) => {
     [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
         [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]: {
-          marginTop: -token.marginSM
+          marginTop: calc(token.marginSM).mul(-1).equal()
         }
       }
     },
     // no body horizontal padding card
     [`${componentCls}${componentCls}-no-body-horizontal-padding`]: genTableStyle(paddingLG, token),
     // no body horizontal padding small card
-    [`${componentCls}${componentCls}-no-body-horizontal-padding${componentCls}-small`]: genTableStyle(paddingSM, token)
+    [`${componentCls}${componentCls}-no-body-horizontal-padding${componentCls}-small`]: genTableStyle(paddingSM, token),
+    // collapsible card style
+    [`${componentCls}${componentCls}-collapsible`]: {
+      [`${componentCls}-title-wrapper`]: {
+        userSelect: "none",
+        [`${componentCls}-collapsible-icon`]: {
+          fontSize: token.fontSizeLG
+        }
+      },
+      [`${componentCls}-body`]: {
+        overflow: "hidden"
+      }
+    },
+    [`${componentCls}${componentCls}-collapsible${componentCls}-collapsed`]: {
+      [`${componentCls}-body`]: {
+        maxHeight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        opacity: 0,
+        overflow: "hidden",
+        border: "none",
+        margin: 0
+      },
+      // hide bottom border of head when collapsed, avoid double border
+      [`${componentCls}-head`]: {
+        borderBottom: "none"
+      }
+    }
   };
 };
 var style_default = (prefixCls, tabsPrefixCls) => {

package/lib/checkbox/style/index.js

@@ -25,13 +25,14 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genCheckboxStyle = (token) => {
-  const { componentCls, fontSize, fontSizeLG, lineHeight } = token;
+  const { componentCls, fontSize, fontSizeLG, lineHeight, calc } = token;
+  const translateY = calc(calc(fontSize).mul(lineHeight).equal()).sub(fontSizeLG).div(2).equal();
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}`]: {
         alignSelf: "baseline",
         [`${componentCls}-inner`]: {
-          transform: `translate(0px, ${(fontSize * lineHeight - fontSizeLG) / 2}px)`
+          transform: `translate(0px, ${translateY})`
         }
       }
     }

package/lib/config-provider/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ConfigProvider as AntConfigProvider } from 'antd';
 import type { ConfigProviderProps as AntConfigProviderProps, ConfigConsumerProps as AntConfigConsumerProps, ThemeConfig as AntThemeConfig } from 'antd/es/config-provider';
-import type { ComponentStyleConfig, CardConfig as AntCardConfig } from 'antd/es/config-provider/context';
+import type { ComponentStyleConfig, CardConfig as AntCardConfig, TableConfig as AntTableConfig } from 'antd/es/config-provider/context';
 import type { AppProps } from 'antd/es/app';
 import type { PaginationConfig } from 'antd/es/pagination';
 import type { SpinIndicator } from 'antd/es/spin';
@@ -23,7 +23,7 @@ export type CardConfig = AntCardConfig & {
 export type SpinConfig = ComponentStyleConfig & {
     indicator?: SpinIndicator;
 };
-export type TableConfig = ComponentStyleConfig & {
+export type TableConfig = AntTableConfig & {
     selectionColumnWidth?: number;
 };
 export interface ConfigConsumerProps extends AntConfigConsumerProps {

package/lib/config-provider/index.js

@@ -103,7 +103,18 @@ var ConfigProvider = ({
       collapse: (0, import_lodash.merge)(
         {},
         {
-          expandIcon: ({ isActive }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CaretRightOutlined, { rotate: isActive ? 90 : 0 })
+          expandIcon: ({ isActive }) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icons.CaretRightOutlined,
+              {
+                rotate: isActive ? 90 : 0,
+                style: {
+                  color: ((_a2 = mergedTheme.token) == null ? void 0 : _a2.colorIcon) || ((_b2 = mergedTheme.token) == null ? void 0 : _b2.colorTextSecondary)
+                }
+              }
+            );
+          }
         },
         parentContext.collapse,
         collapse
@@ -117,7 +128,29 @@ var ConfigProvider = ({
         form
       ),
       spin: (0, import_lodash.merge)({}, parentContext.spin, spin),
-      table: (0, import_lodash.merge)({}, parentContext.table, table),
+      table: (0, import_lodash.merge)(
+        {},
+        {
+          expandable: {
+            expandIcon: ({ expandable, expanded, onExpand, record }) => {
+              var _a2, _b2;
+              return expandable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_icons.CaretRightOutlined,
+                {
+                  onClick: (e) => onExpand(record, e),
+                  style: {
+                    transition: `transform 0.2s`,
+                    transform: expanded ? "rotate(90deg)" : void 0,
+                    color: ((_a2 = mergedTheme.token) == null ? void 0 : _a2.colorIcon) || ((_b2 = mergedTheme.token) == null ? void 0 : _b2.colorTextSecondary)
+                  }
+                }
+              );
+            }
+          }
+        },
+        parentContext.table,
+        table
+      ),
       tabs: (0, import_lodash.merge)({}, parentContext.tabs, tabs),
       theme: (0, import_lodash.merge)({}, mergedTheme, {
         token: {

package/lib/descriptions/hooks/useItems.d.ts

@@ -5,17 +5,17 @@ export default function useItems(items?: DescriptionsItemType[], children?: Reac
     key?: React.Key;
     label?: React.ReactNode;
     span?: number | "filled" | {
-        xs?: number;
-        sm?: number;
-        md?: number;
-        lg?: number;
-        xl?: number;
         xxl?: number;
+        xl?: number;
+        lg?: number;
+        md?: number;
+        sm?: number;
+        xs?: number;
     };
     style?: React.CSSProperties;
+    className?: string;
     classNames?: Partial<Record<"label" | "content", string>>;
     styles?: Partial<Record<"label" | "content", React.CSSProperties>>;
-    className?: string;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];