@hsu-react/ui 0.0.25 → 2.0.0

package/es/components/Form/ModalForm/index.js

@@ -14,12 +14,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Form } from "antd";
+import { modalWidth } from "../../../styles/tokens";
 import Modal from "../../Modal";
 import FormItem, { PlaceholderDict, PlaceholderDictEn } from "../../FormItem";
 import React, { useEffect, useRef } from "react";
 import styles from "./index.module.scss";
 import usePermissions from "../../../hooks/usePermissions";
 import { useFormItems } from "./_hooks/useFormItems";
+import { mergeSemantic } from "../../../utils/semantic";
 import { useAdaptiveColumnNum } from "./_hooks/useAdaptiveColumnNum";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,12 +54,6 @@ var ModalForm = function ModalForm(props) {
     formItemGroupTitleClassName = props.formItemGroupTitleClassName,
     formWrapperClassName = props.formWrapperClassName,
     modalConfig = _objectWithoutProperties(props, _excluded);
-  var header = classNames.header,
-    body = classNames.body,
-    footer = classNames.footer,
-    mask = classNames.mask,
-    content = classNames.content,
-    wrapper = classNames.wrapper;
   var _Form$useForm = Form.useForm(externalForm),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -99,16 +95,18 @@ var ModalForm = function ModalForm(props) {
     className: "".concat(styles.ModalForm, " ").concat(className !== null && className !== void 0 ? className : "", " ").concat(layout === "horizontal" ? styles.horizontal : ""),
     onCancel: _onCancel,
     onOk: _onOk,
-    width: layout === "horizontal" ? "1200px" : "800px",
-    classNames: {
-      header: "".concat(header !== null && header !== void 0 ? header : ""),
-      body: "".concat(styles.body, " ").concat(body !== null && body !== void 0 ? body : ""),
-      footer: "".concat(footer !== null && footer !== void 0 ? footer : ""),
-      mask: "".concat(mask !== null && mask !== void 0 ? mask : ""),
-      content: "".concat(content !== null && content !== void 0 ? content : ""),
-      wrapper: "".concat(wrapper !== null && wrapper !== void 0 ? wrapper : "")
-    },
-    maskClosable: false
+    width: layout === "horizontal" ? modalWidth.lg : modalWidth.md,
+    classNames: mergeSemantic(classNames, function (outer) {
+      var _outer$body;
+      return _objectSpread(_objectSpread({}, outer), {}, {
+        body: "".concat(styles.body, " ").concat((_outer$body = outer.body) !== null && _outer$body !== void 0 ? _outer$body : "")
+      });
+    })
+    // v6 folded `maskClosable` into the `mask` config object
+    ,
+    mask: {
+      closable: false
+    }
   }, modalConfig), {}, {
     children: [/*#__PURE__*/_jsx("div", {
       ref: setFormContainer,

package/es/components/Form/index.d.ts

@@ -7,7 +7,19 @@ interface FormType {
     Modal: React.FC<ModalFormProps>;
     Drawer: React.FC<DrawerFormProps>;
     Import: React.FC<ImportFormProps>;
+    /**
+     * antd 的 `Form.Item`，原样透出。
+     *
+     * 注意与库顶层导出的 `FormItem` 区分：那个是本库自己的增强版（带 label 宽度计算、
+     * tips、权限、按 type 生成 placeholder 等）。这里保持 antd 语义，避免同名不同 API。
+     */
+    Item: typeof AntdForm.Item;
+    List: typeof AntdForm.List;
+    ErrorList: typeof AntdForm.ErrorList;
+    Provider: typeof AntdForm.Provider;
     useForm: typeof AntdForm.useForm;
+    useWatch: typeof AntdForm.useWatch;
+    useFormInstance: typeof AntdForm.useFormInstance;
 }
 declare const Form: FormType;
 export default Form;

package/es/components/Form/index.js

@@ -6,6 +6,12 @@ var Form = {
   Modal: ModalForm,
   Drawer: DrawerForm,
   Import: ImportForm,
-  useForm: AntdForm.useForm
+  Item: AntdForm.Item,
+  List: AntdForm.List,
+  ErrorList: AntdForm.ErrorList,
+  Provider: AntdForm.Provider,
+  useForm: AntdForm.useForm,
+  useWatch: AntdForm.useWatch,
+  useFormInstance: AntdForm.useFormInstance
 };
 export default Form;

package/es/components/FormItem/FormInput/FormPasswordStrength/index.module.scss

@@ -19,9 +19,9 @@
     height: 6px;
 
     border: 0;
-    border-radius: 6px;
+    border-radius: var(--vita-radius-sm);
 
-    background-color: var(--cf-border);
+    background-color: var(--vita-border);
   }
 
   /* When value is in [min, low] */
@@ -53,7 +53,7 @@
 
     background-color: transparent;
 
-    border-color: var(--cf-surface);
+    border-color: var(--vita-surface);
     border-style: solid;
     border-width: 0 5px;
   }

package/es/components/FormItem/FormRadio/index.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
   font-size: 14px;
 
   > label {
@@ -21,8 +21,8 @@
       > span:global(.ant-radio) {
         width: 24px;
         min-width: 24px;
-        height: 24px;
-        min-height: 24px;
+        height: var(--vita-control-height-sm);
+        min-height: var(--vita-control-height-sm);
 
         border-radius: 2px;
 
@@ -31,12 +31,10 @@
           height: 100%;
         }
 
-        :global(.ant-radio-inner) {
-          width: 100%;
-          height: 100%;
-
-          border-radius: inherit;
-          border-color: var(--cf-border) !important;
+        // v6 draws the dot on `.ant-radio` itself (the old `.ant-radio-inner` span is gone),
+        // so the fill-the-parent sizing is dropped.
+        & {
+          border-color: var(--vita-border) !important;
 
           background: transparent !important;
 
@@ -66,7 +64,7 @@
         }
 
         &:global(.ant-radio-checked) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(255, 255, 255, 1) !important;
 
             &::after {
@@ -78,16 +76,16 @@
         }
 
         &:global(.ant-radio-disabled) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: var(--cf-border) !important;
+              border-color: var(--vita-border) !important;
             }
           }
 
           &:global(.ant-radio-checked) {
-            :global(.ant-radio-inner) {
+            & {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }

package/es/components/FormItem/FormSegmented/index.module.scss

@@ -1,7 +1,7 @@
 .FormSegmented {
   height: 100%;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
 
   :global(.ant-segmented-group) {
     height: 100%;

package/es/components/FormItem/FormSlider/index.module.scss

@@ -9,7 +9,7 @@
 
   box-shadow: none !important;
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius-xs);
 
   background-color: transparent !important;
 }

package/es/components/FormItem/FormUpload/FormImage/index.js

@@ -21,7 +21,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { notification } from "antd";
+import { notification } from "../../../../feedback";
 import ItemContainer from "../../ItemContainer";
 import React, { useState } from "react";
 import Upload from "../../../Upload";

package/es/components/FormItem/FormUpload/index.js

@@ -18,7 +18,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Button, notification } from "antd";
+import { Button } from "antd";
+import { notification } from "../../../feedback";
 import FormImage from "./FormImage";
 import ItemContainer from "../ItemContainer";
 import Upload from "../../Upload";

package/es/components/FormItem/FormUpload/index.module.scss

@@ -5,7 +5,7 @@
     height: max-content;
 
     .upBtn {
-      height: 32px;
+      height: var(--vita-control-height);
     }
   }
 
@@ -20,12 +20,12 @@
       cursor: not-allowed;
 
       > div {
-        background-color: var(--cf-subtle);
+        background-color: var(--vita-muted);
 
-        border-color: var(--cf-border);
+        border-color: var(--vita-border);
 
         > span {
-          color: var(--cf-text-3) !important;
+          color: var(--vita-subtle-foreground) !important;
         }
       }
     }
@@ -47,7 +47,7 @@
       width: max-content;
       height: 46px;
 
-      border: 1px solid var(--cf-border);
+      border: 1px solid var(--vita-border);
 
       > span {
         &:first-child {
@@ -61,9 +61,9 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: var(--cf-text);
+          color: var(--vita-foreground);
 
-          border-right: 1px solid var(--cf-border);
+          border-right: 1px solid var(--vita-border);
         }
 
         &:nth-child(2) {
@@ -77,7 +77,7 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
 
           > a {
             white-space: nowrap;
@@ -93,33 +93,33 @@
       font-family: Noto Sans SC;
       font-size: 18px;
       font-weight: 500;
-      color: var(--cf-text-2);
+      color: var(--vita-muted-foreground);
     }
   }
 
   &:global(.ant-upload-drag) {
     height: 180px;
 
-    border-radius: 8px;
-    border: 1px dashed color-mix(in srgb, var(--primary-color) 60%, transparent);
-    background: color-mix(in srgb, var(--primary-color) 2%, transparent);
+    border-radius: var(--vita-radius);
+    border: 1px dashed color-mix(in srgb, var(--vita-primary) 60%, transparent);
+    background: color-mix(in srgb, var(--vita-primary) 2%, transparent);
 
     transition: all 0.3s;
 
     &:hover {
-      background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+      background: color-mix(in srgb, var(--vita-primary) 8%, transparent);
 
-      border-color: var(--primary-color);
+      border-color: var(--vita-primary);
     }
 
     .uploadIcon {
       font-size: 40px;
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
 
     .uploadText {
       font-size: 14px;
-      color: var(--cf-text);
+      color: var(--vita-foreground);
 
       > div:first-child {
         margin: 16px 0 8px;
@@ -127,7 +127,7 @@
 
       > div:last-child {
         font-size: 12px;
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
       }
     }
   }

package/es/components/FormItem/ItemContainer/index.js

@@ -101,10 +101,10 @@ var ItemContainer = function ItemContainer(props) {
       }), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
         arrow: false,
         placement: "top",
-        color: "var(--cf-subtle)",
+        color: "var(--vita-muted)",
         styles: {
-          body: {
-            color: "var(--cf-text)",
+          container: {
+            color: "var(--vita-foreground)",
             padding: "6px 12px"
           }
         }
@@ -116,7 +116,7 @@ var ItemContainer = function ItemContainer(props) {
             e.stopPropagation();
           },
           fontSize: 16,
-          color: "var(--cf-text-3)"
+          color: "var(--vita-subtle-foreground)"
         }) : /*#__PURE__*/_jsx("div", {
           className: classNames(styles.tipsIconNode, iconClassName),
           onClick: function onClick(e) {

package/es/components/FormItem/ItemContainer/index.module.scss

@@ -1,10 +1,12 @@
+@use "../../../styles/responsive" as r;
+
 .formItem {
   --label-width: auto;
   --label-height: max-content;
-  --label-min-height: 32px;
+  --label-min-height: var(--vita-control-height);
   --input-width: 100%;
   --input-height: max-content;
-  --input-min-height: 32px;
+  --input-min-height: var(--vita-control-height);
   --input-horizontal-min-width: 0px;
   --input-horizontal-flex-grow: 1;
 
@@ -120,7 +122,7 @@
         justify-content: flex-end;
         flex-basis: 100%;
 
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
         font-size: 14px;
         white-space: pre-wrap;
       }
@@ -185,7 +187,7 @@
             margin-inline-start: 0px;
             margin-inline-end: 4px;
 
-            color: var(--cf-error);
+            color: var(--vita-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -201,7 +203,7 @@
             margin-inline-start: 0px;
             margin-inline-end: 4px;
 
-            color: var(--cf-error);
+            color: var(--vita-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -226,7 +228,7 @@
           margin-inline-start: 4px;
           margin-inline-end: 0px;
 
-          color: var(--cf-error);
+          color: var(--vita-error);
           font-size: 14px;
           font-family: SimSun, sans-serif;
           line-height: 1;
@@ -255,7 +257,7 @@
             margin-inline-start: 4px;
             margin-inline-end: 0px;
 
-            color: var(--cf-error);
+            color: var(--vita-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -304,6 +306,30 @@
       }
     }
 
+    // 小屏改成标签在上：水平布局是「固定宽标签 + 有最小宽的输入框」，两者相加在窄视口里
+    // 放不下，nowrap 会把整行顶出屏幕。这是响应式表单的标准处理。
+    @include r.down(md) {
+      :global(.ant-form-item-row) {
+        flex-direction: column;
+        flex-wrap: wrap;
+        row-gap: 4px;
+
+        height: max-content;
+
+        :global(.ant-form-item-label) {
+          width: 100%;
+          text-align: start;
+          margin-right: 0px !important;
+          padding-bottom: 0px;
+        }
+
+        :global(.ant-form-item-control) {
+          width: 100%;
+          min-width: 0;
+        }
+      }
+    }
+
     &.start {
       :global(.ant-form-item-control-input-content) {
         text-align: left;

package/es/components/Input/Number/index.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["onChange", "getRef", "value", "defaultValue", "className", "disabled", "allowClear", "addonAfter", "wrapperClassName"];
+var _excluded = ["onChange", "getRef", "value", "defaultValue", "className", "disabled", "allowClear", "addonAfter", "suffix", "wrapperClassName"];
 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; }
@@ -13,13 +13,14 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { InputNumber as AntdInputNumber } from "antd";
+import { InputNumber as AntdInputNumber, Space } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import { CloseCircleFilled } from "@ant-design/icons";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { useDebounceEffect } from "ahooks";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var InputNumber = function InputNumber(props) {
   var _value$toString, _defaultValue$toStrin;
@@ -32,8 +33,11 @@ var InputNumber = function InputNumber(props) {
     _props$allowClear = props.allowClear,
     allowClear = _props$allowClear === void 0 ? true : _props$allowClear,
     addonAfter = props.addonAfter,
+    suffix = props.suffix,
     wrapperClassName = props.wrapperClassName,
     inputConfig = _objectWithoutProperties(props, _excluded);
+  // antd v6 types InputNumber's ref as `InputNumberRef`, which extends `HTMLInputElement` — so
+  // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
   var ref = useRef(null);
   var wrapperRef = useRef(null);
 
@@ -74,40 +78,6 @@ var InputNumber = function InputNumber(props) {
   useEffect(function () {
     getRef === null || getRef === void 0 || getRef(ref.current);
   }, [getRef]);
-
-  // Dynamically compute the width of addonAfter and set the CSS variable
-  useEffect(function () {
-    if (addonAfter && wrapperRef.current) {
-      var updateAddonWidth = function updateAddonWidth() {
-        var _wrapperRef$current;
-        var addonElement = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector(".ant-input-number-group-addon");
-        if (addonElement && addonElement.offsetWidth > 0) {
-          var _wrapperRef$current2;
-          (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 || _wrapperRef$current2.style.setProperty("--addon-after-width", "".concat(addonElement.offsetWidth, "px"));
-        }
-      };
-
-      // Use requestAnimationFrame to ensure the DOM has rendered before computing
-      var rafId = requestAnimationFrame(function () {
-        updateAddonWidth();
-      });
-
-      // Observe window and element size changes to recompute
-      var resizeObserver = new ResizeObserver(function () {
-        updateAddonWidth();
-      });
-      if (wrapperRef.current) {
-        var addonElement = wrapperRef.current.querySelector(".ant-input-number-group-addon");
-        if (addonElement) {
-          resizeObserver.observe(addonElement);
-        }
-      }
-      return function () {
-        cancelAnimationFrame(rafId);
-        resizeObserver.disconnect();
-      };
-    }
-  }, [addonAfter]);
   var handleClear = function handleClear(e) {
     e.stopPropagation();
     setValue("");
@@ -115,26 +85,42 @@ var InputNumber = function InputNumber(props) {
     onChange === null || onChange === void 0 || onChange("");
   };
   var showClear = allowClear && _value !== "" && _value !== undefined && !disabled;
-  return /*#__PURE__*/_jsxs("div", {
+  var input = /*#__PURE__*/_jsx(AntdInputNumber, _objectSpread(_objectSpread({
+    ref: ref,
+    value: _value,
+    onChange: function onChange(e) {
+      var newValue = e === null || e === undefined ? "" : (typeof e === "number" ? e : e || "").toString();
+      setValue(newValue);
+    },
+    className: classNames(styles.antdInput, className),
+    controls: false,
+    disabled: disabled
+    // The clear button used to be absolutely positioned over the wrapper, which meant its offset
+    // had to be recomputed from the addon's measured width (a rAF + ResizeObserver dance writing
+    // `--addon-after-width`). Riding antd's own `suffix` slot instead puts it inside the input,
+    // so it can never collide with the addon and nothing needs measuring.
+    ,
+    suffix: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [showClear && /*#__PURE__*/_jsx(CloseCircleFilled, {
+        className: styles.clearIcon,
+        onClick: handleClear
+      }), suffix]
+    })
+  }, inputConfig), {}, {
+    stringMode: true
+  }));
+  return /*#__PURE__*/_jsx("div", {
     ref: wrapperRef,
-    className: classNames(styles.inputNumberWrapper, wrapperClassName, _defineProperty(_defineProperty({}, styles.inputNumberWrapperClear, showClear), styles.hasAddonAfter, !!addonAfter)),
-    children: [/*#__PURE__*/_jsx(AntdInputNumber, _objectSpread(_objectSpread({
-      ref: ref,
-      value: _value,
-      onChange: function onChange(e) {
-        var newValue = e === null || e === undefined ? "" : (typeof e === "number" ? e : e || "").toString();
-        setValue(newValue);
-      },
-      className: classNames(styles.antdInput, className),
-      controls: false,
-      disabled: disabled,
-      addonAfter: addonAfter
-    }, inputConfig), {}, {
-      stringMode: true
-    })), showClear && /*#__PURE__*/_jsx(CloseCircleFilled, {
-      className: styles.clearIcon,
-      onClick: handleClear
-    })]
+    className: classNames(styles.inputNumberWrapper, wrapperClassName),
+    children: addonAfter ?
+    /*#__PURE__*/
+    // antd v6 deprecated `addonAfter` in favour of Space.Compact + Space.Addon
+    _jsxs(Space.Compact, {
+      className: styles.compact,
+      children: [input, /*#__PURE__*/_jsx(Space.Addon, {
+        children: addonAfter
+      })]
+    }) : input
   });
 };
 export default InputNumber;