@oceanbase/design 1.0.0-alpha.8 → 1.0.0-alpha.9

package/lib/card/index.d.ts

@@ -6,7 +6,9 @@ export interface CardTabListType extends AntCardTabListType {
     tag?: React.ReactNode;
 }
 export interface CardProps extends AntCardProps {
+    subTitle?: React.ReactNode;
     divided?: boolean;
+    gray?: boolean;
     tabList?: CardTabListType[];
     collapsible?: boolean;
     defaultCollapsed?: boolean;

package/lib/card/index.js

@@ -50,9 +50,13 @@ var Card = import_react.default.forwardRef(
     children,
     size,
     title,
+    subTitle,
+    extra,
     tabList,
     tabProps,
+    tabBarExtraContent,
     divided: outerDivided,
+    gray,
     prefixCls: customizePrefixCls,
     bodyStyle,
     styles,
@@ -61,15 +65,10 @@ var Card = import_react.default.forwardRef(
     defaultCollapsed,
     collapsed: outerCollapsed,
     onCollapse,
-    extra,
     ...restProps
   }, ref) => {
     var _a;
-    const {
-      getPrefixCls,
-      card: contextCard,
-      iconPrefixCls
-    } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const { getPrefixCls, card: contextCard } = (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);
@@ -85,12 +84,26 @@ var Card = import_react.default.forwardRef(
       onCollapse == null ? void 0 : onCollapse(newCollapsed);
     }, [collapsed, outerCollapsed, onCollapse]);
     const cardTitle = (0, import_react.useMemo)(() => {
-      if (!collapsible) {
+      if (!collapsible && !subTitle) {
         return title;
       }
       if (!title) {
         return null;
       }
+      const titleContent = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }),
+        subTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-sub-title`, children: subTitle })
+      ] });
+      if (!collapsible) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `${prefixCls}-title-wrapper`,
+            style: { display: "flex", alignItems: "center" },
+            children: titleContent
+          }
+        );
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         "div",
         {
@@ -110,16 +123,17 @@ var Card = import_react.default.forwardRef(
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title })
+            titleContent
           ]
         }
       );
-    }, [collapsible, title, collapsed, prefixCls, token, handleCollapse]);
+    }, [collapsible, title, subTitle, 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}-has-head`]: !!(title || extra || tabList || tabBarExtraContent),
         [`${prefixCls}-no-divider`]: !divided,
+        [`${prefixCls}-gray`]: gray,
         [`${prefixCls}-no-body-horizontal-padding`]: noBodyHorizontalPadding,
         [`${prefixCls}-collapsible`]: collapsible,
         [`${prefixCls}-collapsed`]: collapsed
@@ -145,9 +159,11 @@ var Card = import_react.default.forwardRef(
           ref,
           size,
           title: cardTitle,
+          extra,
           tabList: newTabList,
+          tabBarExtraContent,
           tabProps: {
-            size: "middle",
+            size: size === "small" ? "small" : "middle",
             ...tabProps
           },
           prefixCls: customizePrefixCls,
@@ -156,7 +172,6 @@ var Card = import_react.default.forwardRef(
           },
           styles,
           className: cardCls,
-          extra,
           ...restProps,
           children
         }

package/lib/card/style/index.js

@@ -24,7 +24,6 @@ __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) => {
@@ -60,6 +59,23 @@ var genCardStyle = (token) => {
   const tableComponentCls = `${antCls}-table`;
   return {
     [`${componentCls}`]: {
+      [`${componentCls}-head`]: {
+        // subTitle style
+        [`${componentCls}-sub-title`]: {
+          marginInlineStart: token.marginXS,
+          fontWeight: "normal",
+          fontSize: token.fontSize,
+          color: token.colorTextDescription
+        },
+        // remove divider for top and bottom tabs
+        [tabsComponentCls]: {
+          [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
+            [`${tabsComponentCls}-nav::before`]: {
+              border: "none"
+            }
+          }
+        }
+      },
       [`${componentCls}-body`]: {
         paddingTop: token.padding
       },
@@ -78,35 +94,42 @@ var genCardStyle = (token) => {
         }
       }
     },
+    [`${componentCls}${componentCls}-has-head${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
+      [`${componentCls}-body`]: {
+        paddingTop: 0
+      }
+    },
+    [`${componentCls}:not(${componentCls}-has-head)`]: {
+      [`${componentCls}-body`]: {
+        paddingTop: paddingLG
+      }
+    },
     [`${componentCls}${componentCls}-no-divider`]: {
       [`${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`]: {
-            [`${tabsComponentCls}-nav::before`]: {
-              border: "none"
-            }
-          }
-        }
+        // hide bottom border by setting borderBottomColor to transparent
+        borderBottomColor: "transparent"
       }
     },
     [`${componentCls}${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
-      [`${componentCls}-body`]: {
-        padding: `0 ${(0, import_cssinjs.unit)(paddingLG)} ${(0, import_cssinjs.unit)(paddingLG)} ${(0, import_cssinjs.unit)(paddingLG)}`
+      [`${componentCls}-head`]: {
+        paddingTop: token.paddingLG,
+        paddingBottom: token.padding
       }
     },
-    [`${componentCls}-small`]: {
+    [`${componentCls}${componentCls}-small:not(${componentCls}-has-head)`]: {
       [`${componentCls}-body`]: {
-        paddingTop: token.paddingXS
+        paddingTop: paddingSM
+      }
+    },
+    [`${componentCls}${componentCls}-small${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
+      [`${componentCls}-head`]: {
+        paddingTop: token.paddingSM,
+        paddingBottom: token.paddingXS
       }
     },
-    [`${componentCls}-small${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
+    [`${componentCls}-small`]: {
       [`${componentCls}-body`]: {
-        padding: `0 ${(0, import_cssinjs.unit)(paddingSM)} ${(0, import_cssinjs.unit)(paddingSM)} ${(0, import_cssinjs.unit)(paddingSM)}`
+        paddingTop: token.paddingXS
       }
     },
     [`${componentCls}-small${componentCls}-contain-tabs >${componentCls}-head`]: {
@@ -120,14 +143,7 @@ var genCardStyle = (token) => {
           ...token,
           componentCls: tabsComponentCls,
           prefixCls: tabsPrefixCls
-        }),
-        [tabsComponentCls]: {
-          [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
-            [`${tabsComponentCls}-tab`]: {
-              paddingBlock: token.padding
-            }
-          }
-        }
+        })
       }
     },
     [`${componentCls}${componentCls}-contain-grid`]: {
@@ -143,7 +159,7 @@ var genCardStyle = (token) => {
       }
     },
     // reduce margin between card title and table
-    [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
+    [`&${componentCls}-has-head${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
       [`${componentCls}-body`]: {
         [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]: {
           marginTop: calc(token.marginSM).mul(-1).equal()
@@ -178,8 +194,24 @@ var genCardStyle = (token) => {
       },
       // hide bottom border of head when collapsed, avoid double border
       [`${componentCls}-head`]: {
-        borderBottom: "none"
+        borderBottomColor: "transparent"
+      },
+      [`&${componentCls}-no-divider`]: {
+        [`${componentCls}-head`]: {
+          paddingBottom: paddingLG
+        }
+      },
+      [`&${componentCls}-no-divider${componentCls}-small`]: {
+        [`${componentCls}-head`]: {
+          paddingBottom: paddingSM
+        }
       }
+    },
+    // gray background card style
+    [`${componentCls}${componentCls}-gray`]: {
+      boxShadow: "none",
+      borderRadius: token.borderRadiusMD,
+      backgroundColor: token.colorFillQuaternary
     }
   };
 };

package/lib/checkbox/style/index.js

@@ -23,16 +23,17 @@ __export(style_exports, {
   genCheckboxStyle: () => genCheckboxStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genCheckboxStyle = (token) => {
-  const { componentCls, fontSize, fontSizeLG, lineHeight, calc } = token;
-  const translateY = calc(calc(fontSize).mul(lineHeight).equal()).sub(fontSizeLG).div(2).equal();
+  const { componentCls, fontSize, lineHeight, lineWidth, controlInteractiveSize, calc } = token;
+  const translateY = calc(fontSize).mul(lineHeight).sub(controlInteractiveSize).sub(lineWidth).div(2).equal();
   return {
     [`${componentCls}-wrapper`]: {
       [`${componentCls}`]: {
         alignSelf: "baseline",
         [`${componentCls}-inner`]: {
-          transform: `translate(0px, ${translateY})`
+          transform: `translate(0px, ${(0, import_cssinjs.unit)(translateY)})`
         }
       }
     }

package/lib/config-provider/index.js

@@ -48,6 +48,7 @@ var import_dark = __toESM(require("../theme/dark"));
 var import_compact = __toESM(require("../theme/compact"));
 var import_DefaultRenderEmpty = __toESM(require("./DefaultRenderEmpty"));
 var import_global = __toESM(require("../style/global"));
+var import_cssVariables = __toESM(require("../style/cssVariables"));
 __reExport(config_provider_exports, require("./navigate"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/context"), module.exports);
 __reExport(config_provider_exports, require("antd/es/config-provider/SizeContext"), module.exports);
@@ -172,6 +173,7 @@ var ConfigProvider = ({
                 {
                   onClick: (e) => onExpand(record, e),
                   style: {
+                    // marginRight: mergedTheme.token?.marginXS || 8,
                     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)
@@ -229,6 +231,7 @@ var ConfigProvider = ({
             injectStaticFunction: false
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_cssinjs.StyleProvider, { ...mergedStyleProviderProps, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cssVariables.default, {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_global.default, { prefixCls: restProps.prefixCls }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_app.default, { component: false, ...appProps, children: [
               children,

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

@@ -3,19 +3,19 @@ import type { DescriptionsItemType } from '..';
 export default function useItems(items?: DescriptionsItemType[], children?: React.ReactNode, bordered?: boolean): {
     children: string | number | boolean | Iterable<React.ReactNode> | import("@emotion/react/jsx-runtime").JSX.Element;
     key?: React.Key;
+    classNames?: Partial<Record<"content" | "label", string>>;
+    styles?: Partial<Record<"content" | "label", React.CSSProperties>>;
+    className?: string;
+    style?: React.CSSProperties;
     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;
-    classNames?: Partial<Record<"label" | "content", string>>;
-    styles?: Partial<Record<"label" | "content", React.CSSProperties>>;
-    className?: string;
     labelStyle?: React.CSSProperties;
     contentStyle?: React.CSSProperties;
 }[];

package/lib/descriptions/index.d.ts

@@ -9,6 +9,16 @@ export interface DescriptionsItemType extends AntDescriptionsItemType {
 }
 export interface DescriptionsProps extends AntDescriptionsProps {
     items?: DescriptionsItemType[];
+    /** Whether the descriptions is collapsible */
+    collapsible?: boolean;
+    /** Whether the descriptions is collapsed (controlled mode) */
+    collapsed?: boolean;
+    /** Default collapsed state (uncontrolled mode) */
+    defaultCollapsed?: boolean;
+    /** Callback when collapsed state changes */
+    onCollapse?: (collapsed: boolean) => void;
+    /** Content alignment, when set to 'left', all content values will be aligned to the left based on the longest label width */
+    contentAlign?: 'left';
 }
 type CompoundedComponent = React.FC<DescriptionsProps> & {
     Item: typeof DescriptionsItem;

package/lib/descriptions/index.js

@@ -36,7 +36,9 @@ module.exports = __toCommonJS(descriptions_exports);
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_react = require("react");
+var import_icons = require("@oceanbase/icons");
 var import_config_provider = __toESM(require("../config-provider"));
+var import_theme = __toESM(require("../theme"));
 var import_Item = __toESM(require("./Item"));
 var import_useItems = __toESM(require("./hooks/useItems"));
 var import_style = __toESM(require("./style"));
@@ -48,19 +50,62 @@ var Descriptions = ({
   layout = "horizontal",
   colon = layout === "vertical" ? false : void 0,
   items,
+  title,
   prefixCls: customizePrefixCls,
   className,
+  column = 3,
+  collapsible,
+  collapsed: outerCollapsed,
+  defaultCollapsed,
+  onCollapse,
+  contentAlign,
   ...restProps
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+  const { token } = import_theme.default.useToken();
   const prefixCls = getPrefixCls("descriptions", customizePrefixCls);
   const typographyPrefixCls = getPrefixCls("typography", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls, typographyPrefixCls);
+  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 newItems = (0, import_useItems.default)(items, children, bordered);
+  const descriptionsTitle = (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, 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 descriptionsCls = (0, import_classnames.default)(className, {
     [`${prefixCls}-vertical`]: layout === "vertical",
-    [`${prefixCls}-horizontal`]: layout === "horizontal"
+    [`${prefixCls}-horizontal`]: layout === "horizontal",
+    [`${prefixCls}-collapsible`]: collapsible,
+    [`${prefixCls}-collapsed`]: collapsible && collapsed,
+    [`${prefixCls}-content-align-left`]: contentAlign === "left"
   });
-  const newItems = (0, import_useItems.default)(items, children, bordered);
   return wrapSSR(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Descriptions,
@@ -68,7 +113,9 @@ var Descriptions = ({
         layout,
         colon,
         bordered,
+        column,
         items: newItems,
+        title: descriptionsTitle,
         prefixCls: customizePrefixCls,
         className: descriptionsCls,
         ...restProps

package/lib/descriptions/style/index.js

@@ -67,13 +67,31 @@ var genDescriptionsStyle = (token) => {
   const { componentCls, typographyComponentCls, calc } = token;
   return {
     [`${componentCls}`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.margin
+      },
+      // collapsible title style
+      [`${componentCls}-title-wrapper`]: {
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        userSelect: "none",
+        [`${componentCls}-collapsible-icon`]: {
+          fontSize: token.fontSizeLG
+        }
+      },
       ...genVerticalStyle("default", token),
+      [`${componentCls}-row > th, ${componentCls}-row > td`]: {
+        paddingRight: token.paddingLG
+      },
       [`${componentCls}-item-label`]: {
-        fontWeight: token.fontWeightWeak
+        fontWeight: token.fontWeightWeak,
+        [`&${componentCls}-item-no-colon::after`]: {
+          display: "none"
+        }
       },
       [`${componentCls}-item-container`]: {
         [`${componentCls}-item-content`]: {
-          paddingRight: 12,
           [`${typographyComponentCls}-edit-content`]: {
             insetInlineStart: 0,
             marginTop: 0,
@@ -86,8 +104,71 @@ var genDescriptionsStyle = (token) => {
         height: calc(token.fontSize).mul(token.lineHeight).equal()
       }
     },
-    [`${componentCls}${componentCls}-middle`]: genVerticalStyle("middle", token),
-    [`${componentCls}${componentCls}-small`]: genVerticalStyle("small", token)
+    [`${componentCls}${componentCls}-middle`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.marginSM
+      },
+      ...genVerticalStyle("middle", token)
+    },
+    [`${componentCls}${componentCls}-small`]: {
+      [`${componentCls}-header`]: {
+        marginBottom: token.marginXS
+      },
+      ...genVerticalStyle("small", token)
+    },
+    // collapsed state
+    [`${componentCls}${componentCls}-collapsed`]: {
+      [`${componentCls}-view`]: {
+        display: "none"
+      }
+    },
+    // contentAlign="left": label column auto width based on longest label
+    // For non-bordered mode: use CSS Grid to make label and content align across rows
+    [`${componentCls}${componentCls}-content-align-left:not(${componentCls}-bordered)`]: {
+      [`${componentCls}-view`]: {
+        display: "block"
+      },
+      // Make table, tbody, tr, td all transparent to grid layout
+      [`${componentCls}-view > table`]: {
+        display: "grid",
+        gridTemplateColumns: "auto 1fr"
+      },
+      [`${componentCls}-view > table > tbody`]: {
+        display: "contents"
+      },
+      [`${componentCls}-row`]: {
+        display: "contents"
+      },
+      [`${componentCls}-row > td${componentCls}-item`]: {
+        display: "contents"
+      },
+      [`${componentCls}-item-container`]: {
+        display: "contents"
+      },
+      [`${componentCls}-item-label`]: {
+        whiteSpace: "nowrap",
+        paddingBottom: token.padding,
+        paddingInlineEnd: token.paddingLG
+      },
+      [`${componentCls}-item-content`]: {
+        paddingBottom: token.padding
+      }
+    },
+    // For bordered mode: label and content are in separate th and td
+    [`${componentCls}${componentCls}-content-align-left${componentCls}-bordered`]: {
+      [`${componentCls}-view > table`]: {
+        tableLayout: "auto"
+      },
+      [`${componentCls}-row`]: {
+        [`& > th`]: {
+          whiteSpace: "nowrap",
+          width: 1
+        },
+        [`& > td`]: {
+          width: "100%"
+        }
+      }
+    }
   };
 };
 var style_default = (prefixCls, typographyPrefixCls) => {

package/lib/drawer/style/index.js

@@ -26,14 +26,16 @@ module.exports = __toCommonJS(style_exports);
 var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genDrawerStyle = (token) => {
-  const { componentCls, antCls, fontSizeHeading3, colorSplit, calc } = token;
+  const { componentCls, antCls, iconCls, fontSizeHeading3, colorSplit, calc } = token;
   const contentPadding = token.paddingLG;
-  const boxShadowBottom = "0 2px 4px 0 rgba(54,69,99,0.04), 0 1px 6px -1px rgba(54,69,99,0.04), 0 1px 2px 0 rgba(54,69,99,0.06)";
-  const boxShadowTop = "0 -2px 4px 0 rgba(54,69,99,0.04), 0 -1px 6px -1px rgba(54,69,99,0.04), 0 -1px 2px 0 rgba(54,69,99,0.06)";
+  const boxShadowTop = "0 -1px 2px 0 rgba(19, 33, 57, 0.1)";
+  const boxShadowBottom = "0 1px 2px 0 rgba(19, 33, 57, 0.1)";
   return {
     [`${componentCls}`]: {
       // should be wrapped by `${componentCls}-content` to overwritten antd style
       [`${componentCls}-content`]: {
+        // to avoid x scroll
+        overflow: "initial",
         [`${componentCls}-header`]: {
           position: "relative",
           padding: `${(0, import_cssinjs.unit)(token.padding)} ${(0, import_cssinjs.unit)(token.paddingLG)}`,
@@ -42,7 +44,10 @@ var genDrawerStyle = (token) => {
           // ensure header box-shadow cover body content
           zIndex: 10,
           [`${componentCls}-title`]: {
-            fontSize: fontSizeHeading3
+            fontSize: fontSizeHeading3,
+            [iconCls]: {
+              fontSize: token.fontSizeLG
+            }
           },
           // 标题栏底部增加分割线
           "&::after": {

package/lib/slider/style/index.js

@@ -23,11 +23,14 @@ __export(style_exports, {
   genSliderStyle: () => genSliderStyle
 });
 module.exports = __toCommonJS(style_exports);
+var import_cssinjs = require("@ant-design/cssinjs");
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genSliderStyle = (token) => {
   const { componentCls, dotSize = 8, handleSize = 10, handleLineWidth = 2, calc } = token;
-  const dotSizeHalf = calc(dotSize).div(2).equal();
-  const handleOffset = calc(handleSize).add(calc(handleLineWidth).mul(2).equal()).div(2).equal();
+  const dotSizeHalf = (0, import_cssinjs.unit)(calc(dotSize).div(2).equal());
+  const handleOffset = (0, import_cssinjs.unit)(
+    calc(handleSize).add(calc(handleLineWidth).mul(2).equal()).div(2).equal()
+  );
   return {
     [`${componentCls}${componentCls}-horizontal`]: {
       [`${componentCls}-mark`]: {

package/lib/style/cssVariables.d.ts

@@ -0,0 +1,25 @@
+/**
+ * OceanBase Design System - CSS Variables Style
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ * 根据主题 token 值动态生成
+ */
+import React from 'react';
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import type { GlobalToken } from '../theme/interface';
+/**
+ * 根据 token 生成 CSS 变量样式
+ */
+declare const genCssVariablesStyle: (token: GlobalToken, prefix?: string) => CSSInterpolation;
+export interface CssVariablesStyleProps {
+    /**
+     * CSS 变量前缀，默认为 'ob'
+     */
+    prefix?: string;
+}
+/**
+ * CSS 变量注入组件
+ * 使用 @ant-design/cssinjs 动态注入 CSS 变量
+ */
+declare const CssVariablesStyle: React.FC<CssVariablesStyleProps>;
+export { CssVariablesStyle, genCssVariablesStyle };
+export default CssVariablesStyle;