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

package/es/segmented/index.js

@@ -1,5 +1,5 @@
 var _excluded = ["prefixCls", "options"],
-  _excluded2 = ["label", "badge"];
+  _excluded2 = ["label", "icon", "badge", "ellipsis"];
 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; }
@@ -39,16 +39,24 @@ var Segmented = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, []);
   var newOptions = options === null || options === void 0 ? void 0 : options.map(function (item) {
     if (_typeof(item) === 'object') {
-      var label = item.label,
-        badge = item.badge,
-        restItem = _objectWithoutProperties(item, _excluded2);
+      var _ref2 = item,
+        label = _ref2.label,
+        icon = _ref2.icon,
+        badge = _ref2.badge,
+        _ref2$ellipsis = _ref2.ellipsis,
+        ellipsis = _ref2$ellipsis === void 0 ? {
+          tooltip: true
+        } : _ref2$ellipsis,
+        restItem = _objectWithoutProperties(_ref2, _excluded2);
       return _objectSpread(_objectSpread({}, restItem), {}, {
         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: [icon && /*#__PURE__*/_jsx("span", {
+            className: "".concat(prefixCls, "-item-icon"),
+            children: icon
+          }), ellipsis ? /*#__PURE__*/_jsx(Typography.Text, {
+            ellipsis: ellipsis,
             children: label
           }) : label, badge && renderBadge(badge)]
         })

package/es/segmented/style/index.js

@@ -13,6 +13,7 @@ export var genSegmentedStyle = function genSegmentedStyle(token) {
   })), '&: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"), {
+    marginInlineStart: 4,
     backgroundColor: colorFillSecondary,
     color: 'inherit',
     boxShadow: 'none'

package/es/style/global.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import 'antd/dist/reset.css';
-declare const GlobalStyle: React.FC;
+export interface GlobalStyleProps {
+    prefixCls?: string;
+}
+declare const GlobalStyle: React.FC<GlobalStyleProps>;
 export { GlobalStyle };
 export default GlobalStyle;

package/es/style/global.js

@@ -1,36 +1,69 @@
+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 _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 React from 'react';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import themeConfig from "../theme";
-import interFont from "../fonts/Inter.woff2";
-import consolasFont from "../fonts/Consolas.woff2";
-import helveticaNeueFont from "../fonts/HelveticaNeue.woff2";
+import interRegular from "../fonts/Inter-Regular.woff2";
+import interMedium from "../fonts/Inter-Medium.woff2";
+import interSemibold from "../fonts/Inter-SemiBold.woff2";
+import consolas from "../fonts/Consolas.woff2";
+import helveticaNeue from "../fonts/HelveticaNeue.woff2";
 import 'antd/dist/reset.css';
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-var genGlobalStyle = function genGlobalStyle(token) {
-  return [
-  // Priority: local font > self-hosting font > remote font
-  {
+var genGlobalStyle = function genGlobalStyle(token, prefixCls) {
+  var antCls = ".".concat(prefixCls);
+  var buttonComponentCls = "".concat(antCls, "-btn");
+  var typographyComponentCls = "".concat(antCls, "-typography");
+  var menuComponentCls = "".concat(antCls, "-menu");
+  return [{
     '@font-face': {
-      fontFamily: "'Inter'",
-      src: "local('Inter'), url(".concat(interFont, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*2aG4RJIdUGYAAAAAAAAAAAAADmfOAQ/Inter.woff2') format('woff2')"),
+      fontFamily: 'Inter',
+      fontStyle: 'lighter',
+      fontWeight: 300,
+      // load priority: local font > self-hosting font > remote font
+      src: "local('Inter'), url(".concat(interRegular, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*ucHoQ4exBNYAAAAARtAAAAgAemfOAQ/Inter-Regular.woff2') format('woff2')"),
       fontDisplay: 'swap'
     }
   }, {
     '@font-face': {
-      fontFamily: "'Consolas'",
-      src: "local('Consolas'), url(".concat(consolasFont, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2') format('woff2')"),
+      fontFamily: 'Inter',
+      fontStyle: 'normal',
+      fontWeight: 400,
+      src: "local('Inter'), url(".concat(interMedium, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*GboAQ56sQbkAAAAARwAAAAgAemfOAQ/Inter-Medium.woff2') format('woff2')"),
       fontDisplay: 'swap'
     }
   }, {
     '@font-face': {
-      fontFamily: "'Helvetica Neue'",
-      src: "local('Helvetica Neue'), url(".concat(helveticaNeueFont, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2') format('woff2')"),
+      fontFamily: 'Inter',
+      fontStyle: 'medium',
+      fontWeight: 500,
+      src: "local('Inter'), url(".concat(interMedium, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*GboAQ56sQbkAAAAARwAAAAgAemfOAQ/Inter-Medium.woff2') format('woff2')"),
       fontDisplay: 'swap'
     }
-  },
-  // Global element styles
-  {
+  }, {
+    '@font-face': {
+      fontFamily: 'Inter',
+      fontStyle: 'semibold',
+      fontWeight: 600,
+      src: "local('Inter'), url(".concat(interSemibold, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*tcOIT5gLQl4AAAAARwAAAAgAemfOAQ/Inter-SemiBold.woff2') format('woff2')"),
+      fontDisplay: 'swap'
+    }
+  }, {
+    '@font-face': {
+      fontFamily: 'Consolas',
+      src: "local('Consolas'), url(".concat(consolas, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*R8bMTqAdGWgAAAAAAAAAAAAADmfOAQ/Consolas.woff2') format('woff2')"),
+      fontDisplay: 'swap'
+    }
+  }, {
+    '@font-face': {
+      fontFamily: 'Helvetica Neue',
+      src: "local('Helvetica Neue'), url(".concat(helveticaNeue, ") format('woff2'), url('https://mdn.alipayobjects.com/huamei_fhnyvh/afts/file/A*3EzqR6aYJMkAAAAAAAAAAAAADmfOAQ/HelveticaNeue.woff2') format('woff2')"),
+      fontDisplay: 'swap'
+    }
+  }, _defineProperty(_defineProperty(_defineProperty({
     'pre, code, kbd, samp': {
       fontFamily: token.fontFamilyCode
     },
@@ -39,10 +72,33 @@ var genGlobalStyle = function genGlobalStyle(token) {
     },
     '.rc-virtual-list-scrollbar-thumb': {
       background: "".concat(token.colorFillSecondary, " !important")
+    },
+    // link with href or data-aspm-param^="obcloud_openLink= show underline on hover
+    // except disabled and antd element
+    'a[href], a[data-aspm-param^="obcloud_openLink="]': _defineProperty({}, "&:not([disabled]):not([class^=\"".concat(prefixCls, "-\"]):hover"), {
+      textDecoration: 'underline'
+    })
+  }, "".concat(buttonComponentCls).concat(buttonComponentCls, "-link:not(").concat(buttonComponentCls, "-disabled)"), {
+    '&[href], &[data-aspm-param^="obcloud_openLink="]': {
+      '&:hover': {
+        textDecoration: 'underline'
+      }
+    }
+  }), "".concat(typographyComponentCls, ":not(").concat(typographyComponentCls, "-disabled)"), {
+    '&[href], &[data-aspm-param^="obcloud_openLink="]': {
+      '&:hover': {
+        textDecoration: 'underline'
+      }
+    }
+  }), "".concat(menuComponentCls), _defineProperty({}, "".concat(menuComponentCls, "-item"), _defineProperty({}, "".concat(menuComponentCls, "-title-content"), {
+    'a:hover': {
+      textDecoration: 'none'
     }
-  }];
+  })))];
 };
-var GlobalStyle = function GlobalStyle() {
+var GlobalStyle = function GlobalStyle(_ref2) {
+  var _ref2$prefixCls = _ref2.prefixCls,
+    prefixCls = _ref2$prefixCls === void 0 ? 'ant' : _ref2$prefixCls;
   var _themeConfig$useToken = themeConfig.useToken(),
     theme = _themeConfig$useToken.theme,
     token = _themeConfig$useToken.token;
@@ -54,7 +110,7 @@ var GlobalStyle = function GlobalStyle() {
     // Empty hashId for global styles
     order: -1000 // Inject before other styles
   }, function () {
-    return genGlobalStyle(token);
+    return genGlobalStyle(token, prefixCls);
   });
   return wrapSSR( /*#__PURE__*/_jsx(_Fragment, {}));
 };

package/es/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/es/table/style/index.js

@@ -46,7 +46,11 @@ export var genTableStyle = function genTableStyle(token) {
   }, "& ~ td", {
     borderBottom: 'none'
   })), "tr > td", {
-    transition: "background ".concat(token.motionDurationMid)
+    fontWeight: token.fontWeight,
+    transition: "background ".concat(token.motionDurationMid),
+    a: {
+      fontWeight: token.fontWeightStrong
+    }
   }), "".concat(componentCls, "-placeholder td"), {}), "".concat(componentCls, "-empty-wrapper"), {
     minHeight: calc(360).sub(calc(token.paddingSM).mul(2).equal()).equal(),
     display: 'flex',

package/es/theme/default.d.ts

@@ -1,5 +1,5 @@
 export declare const fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'";
-export declare const fontWeightWeakEn = 400;
+export declare const fontWeightWeakEn = 300;
 export declare const fontWeightEn = 500;
 export declare const fontWeightStrongEn = 600;
 declare const _default: import("antd").ThemeConfig;

package/es/theme/default.js

@@ -23,7 +23,7 @@ var borderRadius = 4;
 var borderRadiusMD = 6;
 var borderRadiusLG = 8;
 export var fontFamilyEn = "Inter, 'Noto sans', sans-serif, Roboto, 'Open Sans', 'Segoe UI', 'Helvetica Neue', 'Helvetica, Arial', 'Apple Color Emoji'";
-export var fontWeightWeakEn = 400;
+export var fontWeightWeakEn = 300;
 export var fontWeightEn = 500;
 export var fontWeightStrongEn = 600;
 var defaultTheme = {

package/es/typography/style/index.js

@@ -46,14 +46,17 @@ export var genTypographyStyle = function genTypographyStyle(token) {
     }
   }), "".concat(componentCls).concat(componentCls, "-edit-content"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls, "-div&"), {
     insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+    insetBlockStart: 0,
     marginTop: negativeMarginOffset,
     marginBottom: calc('1em').sub(marginOffset).equal()
   }), "".concat(componentCls, "-span&"), {
     insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+    insetBlockStart: 0,
     marginTop: negativeMarginOffset,
     marginBottom: negativeMarginOffset
   }), "".concat(componentCls, "-h1&, ").concat(componentCls, "-h2&, ").concat(componentCls, "-h3&, ").concat(componentCls, "-h4&, ").concat(componentCls, "-h5&"), {
     insetInlineStart: calc(token.paddingSM).mul(-1).equal(),
+    insetBlockStart: 0,
     marginTop: "".concat(negativeMarginOffset, " !important"),
     marginBottom: "".concat(negativeMarginOffset, " !important")
   }));

package/lib/alert/index.js

@@ -39,7 +39,6 @@ var import_icons = require("@oceanbase/icons");
 var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_style = __toESM(require("./style"));
-var import_theme = __toESM(require("../theme"));
 __reExport(alert_exports, require("antd/es/alert"), module.exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var iconMapOutlined = {
@@ -59,8 +58,7 @@ var Alert = ({
   className,
   ...restProps
 }) => {
-  const { token } = import_theme.default.useToken();
-  const type = banner && !typeProp ? "warning" : typeProp;
+  const type = (banner && !typeProp ? "warning" : typeProp) || "info";
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("alert", customizePrefixCls);
   const { wrapSSR } = (0, import_style.default)(prefixCls);

package/lib/app/style/index.js

@@ -25,10 +25,8 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genAppStyle = (token) => {
-  const { componentCls } = token;
-  return {
-    [`${componentCls}`]: {}
-  };
+  const { antCls, componentCls } = token;
+  return {};
 };
 var style_default = (prefixCls) => {
   const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("App", (token) => {

package/lib/config-provider/index.js

@@ -78,7 +78,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 +122,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);
@@ -193,6 +194,13 @@ var ConfigProvider = ({
             fontFamily,
             import_default.fontFamilyEn
           ),
+          ...getLocaleTokenValue(
+            mergedTheme.token || {},
+            mergedLocale,
+            "fontWeightWeak",
+            fontWeightWeak,
+            import_default.fontWeightWeakEn
+          ),
           ...getLocaleTokenValue(
             mergedTheme.token || {},
             mergedLocale,
@@ -216,12 +224,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_global.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,
               parentExtendedContext.injectStaticFunction && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_static_function.default, {})

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" | {
-        xxl?: number;
-        xl?: number;
-        lg?: number;
-        md?: number;
-        sm?: number;
         xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        xxl?: 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;
 }[];

package/lib/descriptions/style/index.js

@@ -68,6 +68,9 @@ var genDescriptionsStyle = (token) => {
   return {
     [`${componentCls}`]: {
       ...genVerticalStyle("default", token),
+      [`${componentCls}-item-label`]: {
+        fontWeight: token.fontWeightWeak
+      },
       [`${componentCls}-item-container`]: {
         [`${componentCls}-item-content`]: {
           paddingRight: 12,

package/lib/form/FormItem.js

@@ -85,24 +85,23 @@ var FormItem = ({
   }
   const isVertical = layout === "vertical" || vertical;
   const descriptionContent = description && isVertical ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${prefixCls}-item-description`, children: description }) : null;
+  const actionContent = action && (layout === "vertical" || vertical) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item-action`, children: action }) : null;
   return wrapSSR(
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       AntFormItem,
       {
         layout,
-        label: action && (layout === "vertical" || vertical) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        label: actionContent || descriptionContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
           label,
-          action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${prefixCls}-item-action`, children: action })
+          actionContent,
+          descriptionContent
         ] }) : label,
         tooltip,
         required: (0, import_lodash.isPlainObject)(children) && ((_a = children.type) == null ? void 0 : _a.__ANT_SWITCH) ? true : void 0,
         prefixCls: customizePrefixCls,
         className: formItemCls,
         ...restProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          descriptionContent,
-          children
-        ] })
+        children
       }
     )
   );

package/lib/form/style/index.js

@@ -28,32 +28,37 @@ var genFormStyle = (token) => {
   const { componentCls, calc } = token;
   return {
     [componentCls]: {
-      [`${componentCls}-item-extra`]: {
+      // extra style
+      [`${componentCls}-item-explain, ${componentCls}-item-extra`]: {
         paddingTop: token.paddingXXS,
         fontSize: token.fontSizeSM
+      },
+      [`${componentCls}-item-explain + ${componentCls}-item-extra`]: {
+        paddingTop: 0
       }
     },
+    // vertical layout style
     [`${componentCls}${componentCls}-vertical`]: {
       [`${componentCls}-item:not(${componentCls}-item-horizontal)`]: {
-        [`${componentCls}-item-label > label`]: {
-          width: "100%",
-          [`${componentCls}-item-action`]: {
-            position: "absolute",
-            right: 0
-          }
-        }
-      },
-      [`${componentCls}-item-has-description`]: {
+        // description style
         [`${componentCls}-item-control-input`]: {
           minHeight: "auto"
         },
         [`${componentCls}-item-label`]: {
-          paddingBottom: token.paddingXXS
+          paddingBottom: calc(token.paddingXXS).add(2).equal()
         },
         [`${componentCls}-item-description`]: {
-          paddingBottom: calc(token.paddingXXS).add(2).equal(),
+          paddingTop: token.paddingXXS,
           fontSize: token.fontSizeSM,
           color: token.colorTextDescription
+        },
+        // action style
+        [`${componentCls}-item-label > label`]: {
+          width: "100%",
+          [`${componentCls}-item-action`]: {
+            position: "absolute",
+            right: 0
+          }
         }
       }
     }

package/lib/input/Input.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { InputProps as AntInputProps, InputRef } from 'antd';
+import type { ShowCountFormatter } from 'rc-input/es/interface';
 export * from 'antd/es/input/Input';
 export interface InputLocale {
     placeholder?: string;
@@ -7,5 +8,6 @@ export interface InputLocale {
 export interface InputProps extends AntInputProps {
     locale?: InputLocale;
 }
+export declare const showCountFormatter: ShowCountFormatter;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export default Input;

package/lib/input/Input.js

@@ -30,31 +30,54 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/input/Input.tsx
 var Input_exports = {};
 __export(Input_exports, {
-  default: () => Input_default
+  default: () => Input_default,
+  showCountFormatter: () => showCountFormatter
 });
 module.exports = __toCommonJS(Input_exports);
 var import_react = require("react");
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
 var import_en_US = __toESM(require("../locale/en-US"));
+var import_style = __toESM(require("./style"));
 __reExport(Input_exports, require("antd/es/input/Input"), module.exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var Input = (0, import_react.forwardRef)(({ locale: customLocale, ...restProps }, ref) => {
-  var _a, _b;
-  const { locale: contextLocale } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const inputLocale = {
-    placeholder: ((_a = contextLocale == null ? void 0 : contextLocale.global) == null ? void 0 : _a.inputPlaceholder) || ((_b = import_en_US.default.global) == null ? void 0 : _b.inputPlaceholder),
-    ...import_en_US.default.Input,
-    ...contextLocale == null ? void 0 : contextLocale.Input,
-    ...customLocale
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input, { ref, placeholder: inputLocale.placeholder, ...restProps });
-});
+var showCountFormatter = ({ count, maxLength }) => {
+  return `${count}/${maxLength}`;
+};
+var Input = (0, import_react.forwardRef)(
+  ({ prefixCls: customizePrefixCls, locale: customLocale, showCount, ...restProps }, ref) => {
+    var _a, _b;
+    const { getPrefixCls, locale: contextLocale } = (0, import_react.useContext)(
+      import_config_provider.default.ConfigContext
+    );
+    const inputLocale = {
+      placeholder: ((_a = contextLocale == null ? void 0 : contextLocale.global) == null ? void 0 : _a.inputPlaceholder) || ((_b = import_en_US.default.global) == null ? void 0 : _b.inputPlaceholder),
+      ...import_en_US.default.Input,
+      ...contextLocale == null ? void 0 : contextLocale.Input,
+      ...customLocale
+    };
+    const prefixCls = getPrefixCls("input", customizePrefixCls);
+    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    return wrapSSR(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Input,
+        {
+          ref,
+          prefixCls: customizePrefixCls,
+          placeholder: inputLocale.placeholder,
+          showCount: showCount === true ? { formatter: showCountFormatter } : showCount,
+          ...restProps
+        }
+      )
+    );
+  }
+);
 if (process.env.NODE_ENV !== "production") {
   Input.displayName = "Input";
 }
 var Input_default = Input;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  showCountFormatter,
   ...require("antd/es/input/Input")
 });

package/lib/input/Password.js

@@ -37,19 +37,36 @@ var import_react = require("react");
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
 var import_en_US = __toESM(require("../locale/en-US"));
+var import_Input = require("./Input");
+var import_style = __toESM(require("./style"));
 __reExport(Password_exports, require("antd/es/input/Password"), module.exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var Password = (0, import_react.forwardRef)(
-  ({ locale: customLocale, ...restProps }, ref) => {
+  ({ prefixCls: customizePrefixCls, locale: customLocale, showCount, ...restProps }, ref) => {
     var _a, _b;
-    const { locale: contextLocale } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
+    const { getPrefixCls, locale: contextLocale } = (0, import_react.useContext)(
+      import_config_provider.default.ConfigContext
+    );
+    const prefixCls = getPrefixCls("input", customizePrefixCls);
+    const { wrapSSR } = (0, import_style.default)(prefixCls);
     const inputLocale = {
       placeholder: ((_a = contextLocale == null ? void 0 : contextLocale.global) == null ? void 0 : _a.inputPlaceholder) || ((_b = import_en_US.default.global) == null ? void 0 : _b.inputPlaceholder),
       ...import_en_US.default.Input,
       ...contextLocale == null ? void 0 : contextLocale.Input,
       ...customLocale
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input.Password, { ref, placeholder: inputLocale.placeholder, ...restProps });
+    return wrapSSR(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Input.Password,
+        {
+          ref,
+          prefixCls: customizePrefixCls,
+          placeholder: inputLocale.placeholder,
+          showCount: showCount === true ? { formatter: import_Input.showCountFormatter } : showCount,
+          ...restProps
+        }
+      )
+    );
   }
 );
 if (process.env.NODE_ENV !== "production") {

package/lib/input/Search.js

@@ -37,19 +37,38 @@ var import_react = require("react");
 var import_antd = require("antd");
 var import_config_provider = __toESM(require("../config-provider"));
 var import_en_US = __toESM(require("../locale/en-US"));
+var import_Input = require("./Input");
+var import_style = __toESM(require("./style"));
 __reExport(Search_exports, require("antd/es/input/Search"), module.exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var Search = (0, import_react.forwardRef)(({ locale: customLocale, ...restProps }, ref) => {
-  var _a, _b;
-  const { locale: contextLocale } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-  const inputLocale = {
-    placeholder: ((_a = contextLocale == null ? void 0 : contextLocale.global) == null ? void 0 : _a.inputPlaceholder) || ((_b = import_en_US.default.global) == null ? void 0 : _b.inputPlaceholder),
-    ...import_en_US.default.Input,
-    ...contextLocale == null ? void 0 : contextLocale.Input,
-    ...customLocale
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input.Search, { ref, placeholder: inputLocale.placeholder, ...restProps });
-});
+var Search = (0, import_react.forwardRef)(
+  ({ prefixCls: customizePrefixCls, locale: customLocale, showCount, ...restProps }, ref) => {
+    var _a, _b;
+    const { getPrefixCls, locale: contextLocale } = (0, import_react.useContext)(
+      import_config_provider.default.ConfigContext
+    );
+    const prefixCls = getPrefixCls("input", customizePrefixCls);
+    const { wrapSSR } = (0, import_style.default)(prefixCls);
+    const inputLocale = {
+      placeholder: ((_a = contextLocale == null ? void 0 : contextLocale.global) == null ? void 0 : _a.inputPlaceholder) || ((_b = import_en_US.default.global) == null ? void 0 : _b.inputPlaceholder),
+      ...import_en_US.default.Input,
+      ...contextLocale == null ? void 0 : contextLocale.Input,
+      ...customLocale
+    };
+    return wrapSSR(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Input.Search,
+        {
+          ref,
+          prefixCls: customizePrefixCls,
+          placeholder: inputLocale.placeholder,
+          showCount: showCount === true ? { formatter: import_Input.showCountFormatter } : showCount,
+          ...restProps
+        }
+      )
+    );
+  }
+);
 if (process.env.NODE_ENV !== "production") {
   Search.displayName = "Search";
 }