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

package/es/theme/style/default.less

@@ -45,17 +45,17 @@
 @wireframe: false;
 @motion: true;
 @blue-1: #e6f4ff;
-@blue1: #e6f4ff;
+@blue1: #f3f8fe;
 @blue-2: #b0dbff;
-@blue2: #b0dbff;
+@blue2: #b3d3ff;
 @blue-3: #87c5ff;
-@blue3: #87c5ff;
+@blue3: #619ef3;
 @blue-4: #5eacff;
-@blue4: #5eacff;
+@blue4: #0d6cf2;
 @blue-5: #3690ff;
-@blue5: #3690ff;
+@blue5: #0852bb;
 @blue-6: #0d6cf2;
-@blue6: #0d6cf2;
+@blue6: #0d3c80;
 @blue-7: #004ecc;
 @blue7: #004ecc;
 @blue-8: #003aa6;
@@ -105,17 +105,17 @@
 @cyan-10: #002329;
 @cyan10: #002329;
 @green-1: #e4f7ed;
-@green1: #e4f7ed;
+@green1: #f5faf8;
 @green-2: #b2ebd0;
-@green2: #b2ebd0;
+@green2: #b3e6d5;
 @green-3: #85deb7;
-@green3: #85deb7;
+@green3: #79d1b4;
 @green-4: #5cd1a2;
-@green4: #5cd1a2;
+@green4: #16b882;
 @green-5: #37c491;
-@green5: #37c491;
+@green5: #0a8c61;
 @green-6: #16b882;
-@green6: #16b882;
+@green6: #09593f;
 @green-7: #0a9169;
 @green7: #0a9169;
 @green-8: #026b4f;
@@ -165,17 +165,17 @@
 @pink-10: #520339;
 @pink10: #520339;
 @red-1: #fff2f0;
-@red1: #fff2f0;
+@red1: #fff2f2;
 @red-2: #ffedeb;
-@red2: #ffedeb;
+@red2: #ffd6d6;
 @red-3: #ffc8c2;
-@red3: #ffc8c2;
+@red3: #f69898;
 @red-4: #ffa099;
-@red4: #ffa099;
+@red4: #eb4242;
 @red-5: #f7716d;
-@red5: #f7716d;
+@red5: #b52727;
 @red-6: #eb4242;
-@red6: #eb4242;
+@red6: #8a1b1b;
 @red-7: #c42d32;
 @red7: #c42d32;
 @red-8: #9e1c25;
@@ -185,17 +185,17 @@
 @red-10: #520a13;
 @red10: #520a13;
 @orange-1: #fff7e6;
-@orange1: #fff7e6;
+@orange1: #fff9ee;
 @orange-2: #ffe7ba;
-@orange2: #ffe7ba;
+@orange2: #ffe7c2;
 @orange-3: #ffd591;
-@orange3: #ffd591;
+@orange3: #fac373;
 @orange-4: #ffc069;
-@orange4: #ffc069;
+@orange4: #f49f25;
 @orange-5: #ffa940;
-@orange5: #ffa940;
+@orange5: #ac690b;
 @orange-6: #fa8c16;
-@orange6: #fa8c16;
+@orange6: #6c4408;
 @orange-7: #d46b08;
 @orange7: #d46b08;
 @orange-8: #ad4e00;
@@ -426,6 +426,25 @@
 @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);
 @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: 3px;
+@white: #ffffff;
+@black: #000000;
+@gray1: #fbfcfe;
+@gray2: #f5f7fc;
+@gray3: #ebeff7;
+@gray4: #e2e8f3;
+@gray5: #cdd5e4;
+@gray6: #b6c0d4;
+@gray7: #8592ad;
+@gray8: #5c6b8a;
+@gray9: #3b4a69;
+@fuchsia1: #faf0fc;
+@fuchsia2: #e8caee;
+@fuchsia3: #d88ee7;
+@fuchsia4: #b04ec4;
+@fuchsia5: #802792;
+@fuchsia6: #580e67;
+@colorNaviBg: #f1f6ff;
+@colorNaviBgHover: #e8effb;
 @colorFillContent: #e2e8f3;
 @colorFillContentHover: #cdd5e4;
 @colorFillAlter: #f5f7fc;

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);
@@ -78,7 +79,7 @@ var ConfigProvider = ({
   appProps,
   ...restProps
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   const parentContext = import_react.default.useContext(import_antd.ConfigProvider.ConfigContext);
   const parentExtendedContext = import_react.default.useContext(ExtendedConfigContext);
   const { isAliyun, isDark, isCompact } = (0, import_lodash.merge)({}, parentContext.theme, theme);
@@ -122,8 +123,9 @@ var ConfigProvider = ({
   );
   const { token } = import_theme.default.useToken();
   const fontFamily = ((_a = mergedTheme.token) == null ? void 0 : _a.fontFamily) || token.fontFamily;
-  const fontWeight = ((_b = mergedTheme.token) == null ? void 0 : _b.fontWeight) || token.fontWeight;
-  const fontWeightStrong = ((_c = mergedTheme.token) == null ? void 0 : _c.fontWeightStrong) || token.fontWeightStrong;
+  const fontWeightWeak = ((_b = mergedTheme.token) == null ? void 0 : _b.fontWeightWeak) || token.fontWeightWeak;
+  const fontWeight = ((_c = mergedTheme.token) == null ? void 0 : _c.fontWeight) || token.fontWeight;
+  const fontWeightStrong = ((_d = mergedTheme.token) == null ? void 0 : _d.fontWeightStrong) || token.fontWeightStrong;
   const parentStyleContext = import_react.default.useContext(import_StyleContext.default);
   const mergedStyleProviderProps = (0, import_lodash.merge)({}, parentStyleContext, styleProviderProps);
   const mergedLocale = (0, import_lodash.merge)({}, parentContext.locale, locale);
@@ -171,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)
@@ -193,6 +196,13 @@ var ConfigProvider = ({
             fontFamily,
             import_default.fontFamilyEn
           ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontWeightWeak",
+            fontWeightWeak,
+            import_default.fontWeightWeakEn
+          ),
           ...getLocaleTokenValue(
             mergedTheme.token || {},
             mergedLocale,
@@ -216,11 +226,12 @@ var ConfigProvider = ({
         {
           value: {
             navigate: navigate === void 0 ? parentExtendedContext.navigate : navigate,
-            hideOnSinglePage: ((_d = parentContext.pagination) == null ? void 0 : _d.showSizeChanger) ? false : hideOnSinglePage !== void 0 ? hideOnSinglePage : parentExtendedContext.hideOnSinglePage,
+            hideOnSinglePage: ((_e = parentContext.pagination) == null ? void 0 : _e.showSizeChanger) ? false : hideOnSinglePage !== void 0 ? hideOnSinglePage : parentExtendedContext.hideOnSinglePage,
             // inject static function to outermost ConfigProvider only
             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