@oceanbase/design 1.0.0-alpha.1 → 1.0.0-alpha.10

package/lib/form/FormItem.js

@@ -42,12 +42,14 @@ var import_config_provider = __toESM(require("../config-provider"));
 var import_useTooltipTypeList = require("../tooltip/hooks/useTooltipTypeList");
 var import_style = __toESM(require("./style"));
 __reExport(FormItem_exports, require("antd/es/form/FormItem"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var AntFormItem = import_antd.Form.Item;
 var FormItem = ({
   children,
   label,
   tooltip,
   action,
+  description,
   layout: externalLayout,
   prefixCls: customizePrefixCls,
   className,
@@ -56,8 +58,10 @@ var FormItem = ({
   var _a;
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("form", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
-  const formItemCls = (0, import_classnames.default)(className);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls);
+  const formItemCls = (0, import_classnames.default)(className, {
+    [`${prefixCls}-item-has-description`]: !!description
+  });
   const {
     layout: contextLayout,
     // compatible with vertical for version < antd 27.0.0
@@ -79,19 +83,26 @@ var FormItem = ({
       ...restTooltipProps
     };
   }
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
+  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 wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       AntFormItem,
       {
         layout,
-        label: action && (layout === "vertical" || vertical) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, label, action && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-action` }, action)) : label,
+        label: actionContent || descriptionContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          label,
+          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
+        ...restProps,
+        children
+      }
     )
   );
 };

package/lib/form/index.js

@@ -33,13 +33,17 @@ __export(form_exports, {
   default: () => form_default
 });
 module.exports = __toCommonJS(form_exports);
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_config_provider = __toESM(require("../config-provider"));
 var import_FormItem = __toESM(require("./FormItem"));
 var import_style = __toESM(require("./style"));
 __reExport(form_exports, require("antd/es/form"), module.exports);
+var import_jsx_runtime = (
+  // @ts-ignore to ignore children type error
+  require("react/jsx-runtime")
+);
 var Form = ({
   hideRequiredMark,
   prefixCls: customizePrefixCls,
@@ -48,11 +52,10 @@ var Form = ({
 }) => {
   const { getPrefixCls, form: contextForm } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("form", customizePrefixCls);
-  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const [wrapCSSVar] = (0, import_style.default)(prefixCls);
   const formCls = (0, import_classnames.default)(className);
-  return wrapSSR(
-    // @ts-ignore to ignore children type error
-    /* @__PURE__ */ import_react.default.createElement(
+  return wrapCSSVar(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Form,
       {
         requiredMark: (

package/lib/form/style/index.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type FormToken = FullToken<'Form'>;
 export declare const genFormStyle: GenerateStyle<FormToken>;
-declare const _default: (prefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;

package/lib/form/style/index.js

@@ -25,10 +25,34 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genFormStyle = (token) => {
-  const { componentCls } = token;
+  const { componentCls, calc } = token;
   return {
+    [componentCls]: {
+      // 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)`]: {
+        // description style
+        [`${componentCls}-item-control-input`]: {
+          minHeight: "auto"
+        },
+        [`${componentCls}-item-label`]: {
+          paddingBottom: calc(token.paddingXXS).add(2).equal()
+        },
+        [`${componentCls}-item-description`]: {
+          paddingTop: token.paddingXXS,
+          fontSize: token.fontSizeSM,
+          color: token.colorTextDescription
+        },
+        // action style
         [`${componentCls}-item-label > label`]: {
           width: "100%",
           [`${componentCls}-item-action`]: {
@@ -40,12 +64,9 @@ var genFormStyle = (token) => {
     }
   };
 };
-var style_default = (prefixCls) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Form", (token) => {
-    return [genFormStyle(token)];
-  });
-  return useStyle(prefixCls);
-};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Form", (token) => {
+  return [genFormStyle(token)];
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   genFormStyle

package/lib/grid/col.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(col_exports);
 var React = __toESM(require("react"));
 var import_useFlexGapSupport = __toESM(require("../_util/useFlexGapSupport"));
 var import_antd = require("antd");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Col = React.forwardRef((props, ref) => {
   const { style, ...others } = props;
   const supportFlexGap = (0, import_useFlexGapSupport.default)();
@@ -45,7 +46,7 @@ var Col = React.forwardRef((props, ref) => {
     mergeStyle.paddingBottom = "8px";
     mergeStyle.paddingTop = "8px";
   }
-  return /* @__PURE__ */ React.createElement(import_antd.Col, { ref, style: mergeStyle, ...others });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Col, { ref, style: mergeStyle, ...others });
 });
 if (process.env.NODE_ENV !== "production") {
   Col.displayName = "Col";

package/lib/grid/row.js

@@ -35,6 +35,7 @@ module.exports = __toCommonJS(row_exports);
 var React = __toESM(require("react"));
 var import_useFlexGapSupport = __toESM(require("../_util/useFlexGapSupport"));
 var import_antd = require("antd");
+var import_jsx_runtime = require("react/jsx-runtime");
 var Row = React.forwardRef((props, ref) => {
   const { style, ...others } = props;
   const supportFlexGap = (0, import_useFlexGapSupport.default)();
@@ -45,7 +46,7 @@ var Row = React.forwardRef((props, ref) => {
     mergeStyle.marginTop = "-8px";
     mergeStyle.marginBottom = "-8px";
   }
-  return /* @__PURE__ */ React.createElement(import_antd.Row, { ref, style: mergeStyle, ...others });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Row, { ref, style: mergeStyle, ...others });
 });
 if (process.env.NODE_ENV !== "production") {
   Row.displayName = "Row";

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import './global.css';
 export * from 'antd';
 export { version } from '../package.json';
 export { default as Alert } from './alert';
@@ -13,6 +12,8 @@ export { default as Typography } from './typography';
 export type { TypographyProps } from './typography';
 export { default as Card } from './card';
 export type { CardProps } from './card';
+export { default as App } from './app';
+export type { AppProps } from './app';
 export { default as ConfigProvider } from './config-provider';
 export type { ConfigProviderProps, ConfigConsumerProps, ThemeConfig } from './config-provider';
 export { default as Descriptions } from './descriptions';
@@ -68,8 +69,8 @@ export { default as Lottie } from './lottie';
 export type { LottieProps, LottieRef } from './lottie';
 export { default as theme } from './theme';
 declare const useToken: () => {
-    theme: import("@ant-design/cssinjs").Theme<import("antd/es/theme/internal").SeedToken, import("antd/es/theme/internal").AliasToken>;
-    token: import("antd").GlobalToken;
+    theme: import("@ant-design/cssinjs").Theme<import("antd/lib/theme/interface/seeds").SeedToken, import("./theme/interface").AliasToken>;
+    token: import("./theme/interface").GlobalToken;
     hashId: string;
 };
 export { useToken };

package/lib/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Alert: () => import_alert.default,
+  App: () => import_app.default,
   Badge: () => import_badge.default,
   Breadcrumb: () => import_breadcrumb.default,
   Button: () => import_button.default,
@@ -71,7 +72,6 @@ __export(src_exports, {
   version: () => import_package.version
 });
 module.exports = __toCommonJS(src_exports);
-var import_global = require("./global.css");
 __reExport(src_exports, require("antd"), module.exports);
 var import_package = require("../package.json");
 var import_alert = __toESM(require("./alert"));
@@ -80,6 +80,7 @@ var import_space = __toESM(require("./space"));
 var import_grid = require("./grid");
 var import_typography = __toESM(require("./typography"));
 var import_card = __toESM(require("./card"));
+var import_app = __toESM(require("./app"));
 var import_config_provider = __toESM(require("./config-provider"));
 var import_descriptions = __toESM(require("./descriptions"));
 var import_empty = __toESM(require("./empty"));
@@ -113,6 +114,7 @@ var { useToken } = import_theme2.default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
+  App,
   Badge,
   Breadcrumb,
   Button,

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,30 +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 = __toESM(require("react"));
+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 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__ */ import_react.default.createElement(import_antd.Input, { ref, placeholder: inputLocale.placeholder, ...restProps });
-});
+var import_jsx_runtime = require("react/jsx-runtime");
+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 [wrapCSSVar] = (0, import_style.default)(prefixCls);
+    return wrapCSSVar(
+      /* @__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

@@ -33,22 +33,40 @@ __export(Password_exports, {
   default: () => Password_default
 });
 module.exports = __toCommonJS(Password_exports);
-var import_react = __toESM(require("react"));
+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 [wrapCSSVar] = (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__ */ import_react.default.createElement(import_antd.Input.Password, { ref, placeholder: inputLocale.placeholder, ...restProps });
+    return wrapCSSVar(
+      /* @__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

@@ -33,22 +33,42 @@ __export(Search_exports, {
   default: () => Search_default
 });
 module.exports = __toCommonJS(Search_exports);
-var import_react = __toESM(require("react"));
+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 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__ */ import_react.default.createElement(import_antd.Input.Search, { ref, placeholder: inputLocale.placeholder, ...restProps });
-});
+var import_jsx_runtime = require("react/jsx-runtime");
+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 [wrapCSSVar] = (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 wrapCSSVar(
+      /* @__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";
 }

package/lib/input/TextArea.js

@@ -33,22 +33,40 @@ __export(TextArea_exports, {
   default: () => TextArea_default
 });
 module.exports = __toCommonJS(TextArea_exports);
-var import_react = __toESM(require("react"));
+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(TextArea_exports, require("antd/es/input/TextArea"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var TextArea = (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 [wrapCSSVar] = (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__ */ import_react.default.createElement(import_antd.Input.TextArea, { ref, placeholder: inputLocale.placeholder, ...restProps });
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.Input.TextArea,
+        {
+          ref,
+          prefixCls: customizePrefixCls,
+          placeholder: inputLocale.placeholder,
+          showCount: showCount === true ? { formatter: import_Input.showCountFormatter } : showCount,
+          ...restProps
+        }
+      )
+    );
   }
 );
 if (process.env.NODE_ENV !== "production") {

package/lib/input/style/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from '../../theme/interface';
+export type InputToken = FullToken<'Input'>;
+export declare const genInputStyle: GenerateStyle<InputToken>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
+export default _default;

package/lib/input/style/index.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/input/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genInputStyle: () => genInputStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genInputStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}-affix-wrapper`]: {
+      [`&:not(${componentCls}-disabled)`]: {
+        [`${componentCls}-prefix, ${componentCls}-suffix`]: {
+          fontSize: token.fontSizeSM
+        }
+      },
+      [`${componentCls}-prefix, ${componentCls}-suffix`]: {
+        color: token.colorIcon
+      },
+      [`${componentCls}-suffix`]: {
+        [`${componentCls}-clear-icon`]: {
+          color: token.colorTextTertiary
+        }
+      }
+    }
+  };
+};
+var genSearchInputStyle = (token) => {
+  const { componentCls, antCls } = token;
+  const searchPrefixCls = `${componentCls}-search`;
+  return {
+    [searchPrefixCls]: {
+      [`> ${componentCls}-group`]: {
+        [`> ${componentCls}-group-addon:last-child`]: {
+          [`${searchPrefixCls}-button:not(${antCls}-btn-color-primary)`]: {
+            color: token.colorIcon,
+            "&:not([disabled]):hover": {
+              color: token.colorIconHover
+            },
+            "&:active": {
+              color: token.colorIconHover
+            }
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (0, import_genComponentStyleHook.genStyleHooks)("Input", (token) => {
+  return [genInputStyle(token), genSearchInputStyle(token)];
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genInputStyle
+});

package/lib/input-number/index.d.ts

@@ -8,7 +8,8 @@ export interface InputNumberLocale {
 export interface InputNumberProps extends AntInputNumberProps {
     locale?: InputNumberLocale;
 }
-type CompoundedComponent = React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<HTMLInputElement>> & {
+type InputNumberRef = React.ComponentRef<typeof AntInputNumber>;
+type CompoundedComponent = React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<InputNumberRef>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: typeof AntInputNumber._InternalPanelDoNotUseOrYouWillBeFired;
 };
 declare const InputNumber: CompoundedComponent;

package/lib/input-number/index.js

@@ -37,18 +37,34 @@ var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 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_number_exports, require("antd/es/input-number"), module.exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var InternalInputNumber = import_react.default.forwardRef(
-  ({ locale: customLocale, ...restProps }, ref) => {
+  ({ prefixCls: customizePrefixCls, locale: customLocale, ...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-number", customizePrefixCls);
+    const [wrapCSSVar] = (0, import_style.default)(prefixCls);
     const inputNumberLocale = {
       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.InputNumber,
       ...contextLocale == null ? void 0 : contextLocale.InputNumber,
       ...customLocale
     };
-    return /* @__PURE__ */ import_react.default.createElement(import_antd.InputNumber, { ref, placeholder: inputNumberLocale.placeholder, ...restProps });
+    return wrapCSSVar(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_antd.InputNumber,
+        {
+          ref,
+          prefixCls: customizePrefixCls,
+          placeholder: inputNumberLocale.placeholder,
+          ...restProps
+        }
+      )
+    );
   }
 );
 var InputNumber = InternalInputNumber;

package/lib/input-number/style/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { FullToken, GenerateStyle } from '../../theme/interface';
+export type InputNumberToken = FullToken<'InputNumber'>;
+export declare const genInputStyle: GenerateStyle<InputNumberToken>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
+export default _default;