@helpdice/ui 2.6.1-beta.0 → 2.6.1-beta.2

package/dist/input/index.js

@@ -3189,7 +3189,7 @@ var repositionCursor = function repositionCursor(_ref) {
   };
 };
 
-var _excluded$3 = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
+var _excluded$3 = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
 var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$allowDecimals = _ref.allowDecimals,
     allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -3205,7 +3205,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     userMaxLength = _ref.maxLength,
     userValue = _ref.value,
-    onValueChange = _ref.onValueChange,
     fixedDecimalLength = _ref.fixedDecimalLength,
     placeholder = _ref.placeholder,
     decimalScale = _ref.decimalScale,
@@ -3318,11 +3317,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var stringValue = cleanValue(_objectSpread2({
       value: modifiedValue
     }, cleanValueOptions));
+
+    // console.log("Before clean:", modifiedValue);
+    // console.log("After clean:", stringValue);
+
     if (userMaxLength && stringValue.replace(/-/g, '').length > userMaxLength) {
       return;
     }
     if (stringValue === '' || stringValue === '-' || stringValue === decimalSeparator) {
-      onValueChange && onValueChange(undefined, name, {
+      onChange && onChange(undefined, name, {
         "float": null,
         formatted: '',
         value: ''
@@ -3334,9 +3337,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     var stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, '.') : stringValue;
     var numberValue = parseFloat(stringValueWithoutSeparator);
+
+    // console.log('Number Value', numberValue);
+
     var formattedValue = formatValue(_objectSpread2({
       value: stringValue
     }, formatValueOptions));
+
+    // console.log('Formatted Value', numberValue);
+
     if (cursorPosition != null) {
       // Prevent cursor jumping
       var newCursor = cursorPosition + (formattedValue.length - value.length);
@@ -3344,15 +3353,25 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setCursor(newCursor);
       setChangeCount(changeCount + 1);
     }
+
+    // console.log({
+    //     inputValue: value,
+    //     modifiedValue,
+    //     stateValue,
+    //     selectionStart,
+    //     lastKeyStroke
+    //     });
+
     setStateValue(formattedValue);
-    if (onValueChange) {
+    if (onChange) {
       var values = {
         "float": numberValue,
         formatted: formattedValue,
         value: stringValue
       };
-      onValueChange(stringValue, name, values);
+      onChange(stringValue, name, values);
     }
+    // onChange && onChange(stringValue);
   };
 
   /**
@@ -3363,7 +3382,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       value = _event$target.value,
       selectionStart = _event$target.selectionStart;
     processChange(value, selectionStart);
-    onChange && onChange(event);
   };
 
   /**
@@ -3395,8 +3413,8 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var formattedValue = formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
       value: newValue
     }));
-    if (onValueChange && formatValueOnBlur) {
-      onValueChange(newValue, name, {
+    if (onChange && formatValueOnBlur) {
+      onChange(newValue, name, {
         "float": numberValue,
         formatted: formattedValue,
         value: newValue
@@ -3433,6 +3451,34 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown && onKeyDown(event);
   };
 
+  // const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  //     lastKeyStrokeRef.current = event.key;
+
+  //     // Handle arrow up/down with step
+  //     if (step && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+  //         event.preventDefault();
+
+  //         const currentValue =
+  //             parseFloat(
+  //                 userValue != null
+  //                     ? String(userValue).replace(decimalSeparator, '.')
+  //                     : cleanValue({ value: stateValue, ...cleanValueOptions })
+  //             ) || 0;
+
+  //         const newValue = event.key === 'ArrowUp' ? currentValue + step : currentValue - step;
+
+  //         if ((min !== undefined && newValue < Number(min)) || (max !== undefined && newValue > Number(max))) return;
+
+  //         const fixedLength = String(step).includes('.') ? String(step).split('.')[1].length : undefined;
+
+  //         processChange(
+  //             (fixedLength ? newValue.toFixed(fixedLength) : newValue).replace('.', decimalSeparator)
+  //         );
+  //     }
+
+  //     onKeyDown && onKeyDown(event);
+  // };
+
   /**
    * Handle key up event
    *
@@ -3474,13 +3520,19 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * If user has only entered "-" or decimal separator,
    * keep the char to allow them to enter next value
    */
+  // const getRenderValue = () => {
+  //     if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
+  //         // console.log('User Value', userValue);
+  //         return formatValue({
+  //             ...formatValueOptions,
+  //             decimalScale: dirty ? undefined : decimalScale,
+  //             value: String(userValue)
+  //         });
+  //     }
+
+  //     return stateValue;
+  // };
   var getRenderValue = function getRenderValue() {
-    if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
-      return formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
-        decimalScale: dirty ? undefined : decimalScale,
-        value: String(userValue)
-      }));
-    }
     return stateValue;
   };
   var inputProps = _objectSpread2({
@@ -3679,52 +3731,58 @@ var GridContainer = withScale(GridContainerComponent);
 
 Grid.Container = GridContainer;
 
-function parseCurrency(value) {
-  var _trimmed$match;
-  var trimmed = value.trim();
-
-  // Extract currency symbol
-  var currencySymbol = ((_trimmed$match = trimmed.match(/[^\d.,\s]/)) === null || _trimmed$match === void 0 ? void 0 : _trimmed$match[0]) || "";
-
-  // Remove everything except digits, comma, dot
-  var numericPart = trimmed.replace(/[^\d.,]/g, "");
-
-  // Convert comma to dot if needed
-  var normalized = numericPart.replace(",", ".");
-  return {
-    amount: Number(normalized),
-    currency: currencySymbol
-  };
-}
 function CurrencyRangeInput(_ref) {
   var prefix = _ref.prefix,
     allowDecimals = _ref.allowDecimals,
-    onChange = _ref.onChange,
     intlConfig = _ref.intlConfig,
-    children = _ref.children;
-  var _React$useState = React.useState({
-      min: '0',
-      max: '0',
-      currency: ''
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    value = _React$useState2[0],
-    setValue = _React$useState2[1];
-  React.useEffect(function () {
-    var min = parseCurrency(value.min);
-    var max = parseCurrency(value.max);
-    if (max.amount > min.amount) {
-      if (onChange) onChange({
-        target: {
-          value: {
-            min: min.amount,
-            max: max.amount,
-            currency: min.currency
-          }
-        }
-      });
+    children = _ref.children,
+    value = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? {
+      min: 0,
+      max: 0
+    } : _ref$defaultValue,
+    onChange = _ref.onChange,
+    _ref$debounce = _ref.debounce,
+    debounce = _ref$debounce === void 0 ? 300 : _ref$debounce,
+    externalError = _ref.error,
+    externalHelperText = _ref.helperText;
+  var isControlled = value !== undefined;
+  var _useState = React.useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var currentValue = isControlled ? value : internalValue;
+  var setValue = React.useCallback(function (val) {
+    if (!isControlled) {
+      setInternalValue(val);
     }
-  }, [value]);
+  }, [isControlled]);
+
+  // Validation
+  var isInvalid = React.useMemo(function () {
+    if (!currentValue.min || !currentValue.max) return false;
+    return currentValue.max <= currentValue.min;
+  }, [currentValue]);
+
+  // Debounced onChange
+  React.useEffect(function () {
+    if (!onChange || isInvalid) return;
+    var handler = setTimeout(function () {
+      if (currentValue.min && currentValue.max) {
+        onChange({
+          min: currentValue.min,
+          max: currentValue.max,
+          currency: ''
+        });
+      }
+    }, debounce);
+    return function () {
+      return clearTimeout(handler);
+    };
+  }, [isInvalid, onChange, debounce, currentValue]);
+  var finalError = externalError !== null && externalError !== void 0 ? externalError : isInvalid;
+  var finalHelperText = externalHelperText !== null && externalHelperText !== void 0 ? externalHelperText : isInvalid ? "Max must be greater than min" : undefined;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "with-label",
     children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
@@ -3733,12 +3791,11 @@ function CurrencyRangeInput(_ref) {
       gap: 2,
       children: [/*#__PURE__*/jsxRuntime.jsx(Grid, {
         children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
-          onChange: function onChange(e) {
-            return setValue(function (prev) {
-              return _objectSpread2(_objectSpread2({}, prev), {}, {
-                min: e.target.value
-              });
-            });
+          value: currentValue.min,
+          onChange: function onChange(val) {
+            return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
+              min: Number(val)
+            }));
           },
           intlConfig: intlConfig,
           prefix: prefix,
@@ -3747,12 +3804,11 @@ function CurrencyRangeInput(_ref) {
         })
       }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
         children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
-          onChange: function onChange(e) {
-            return setValue(function (prev) {
-              return _objectSpread2(_objectSpread2({}, prev), {}, {
-                max: e.target.value
-              });
-            });
+          value: currentValue.max,
+          onChange: function onChange(val) {
+            return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
+              max: Number(val)
+            }));
           },
           intlConfig: intlConfig,
           prefix: prefix,
@@ -3760,16 +3816,20 @@ function CurrencyRangeInput(_ref) {
           allowDecimals: allowDecimals
         })
       })]
+    }), finalHelperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
+      error: finalError,
+      text: finalHelperText
     })]
   });
 }
+var CurrencyRangeInput$1 = /*#__PURE__*/React.memo(CurrencyRangeInput);
 
 /* "use client" */
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
 Input.Phone = PhoneInput$1;
 Input.Currency = CurrencyInput;
-Input.CurrencyRange = CurrencyRangeInput;
+Input.CurrencyRange = CurrencyRangeInput$1;
 
 exports.InputError = InputError;
 exports.InputLabel = InputBlockLabel;

package/dist/input/input-currency-props.d.ts

@@ -96,7 +96,7 @@ export type CurrencyInputProps = Overwrite<React.ComponentPropsWithRef<'input'>,
     /**
      * Handle change in value
      */
-    onValueChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
+    onChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
     /**
      * Placeholder if there is no value
      */

package/dist/input/input-currency-range.d.ts

@@ -1,8 +1,23 @@
 import { CurrencyInputProps } from "./input-currency-props";
 import React from "react";
 type Override<T, U> = Omit<T, keyof U> & U;
+type RangeValue = {
+    min: number;
+    max: number;
+};
+type CurrencyRangeOutput = {
+    min: number;
+    max: number;
+    currency: string;
+};
 type CurrencyRangeProps = Override<CurrencyInputProps, {
-    onChange: (e: any) => void;
+    value?: RangeValue;
+    defaultValue?: RangeValue;
+    onChange?: (val: CurrencyRangeOutput) => void;
+    debounce?: number;
+    error?: boolean;
+    helperText?: string;
 }>;
-declare function CurrencyRangeInput({ prefix, allowDecimals, onChange, intlConfig, children }: CurrencyRangeProps): React.JSX.Element;
-export default CurrencyRangeInput;
+declare function CurrencyRangeInput({ prefix, allowDecimals, intlConfig, children, value, defaultValue, onChange, debounce, error: externalError, helperText: externalHelperText, }: CurrencyRangeProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CurrencyRangeInput>;
+export default _default;

package/dist/table/index.js

@@ -3239,7 +3239,7 @@ var repositionCursor = function repositionCursor(_ref) {
   };
 };
 
-var _excluded$d = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
+var _excluded$d = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
 var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$allowDecimals = _ref.allowDecimals,
     allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -3255,7 +3255,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     userMaxLength = _ref.maxLength,
     userValue = _ref.value,
-    onValueChange = _ref.onValueChange,
     fixedDecimalLength = _ref.fixedDecimalLength,
     placeholder = _ref.placeholder,
     decimalScale = _ref.decimalScale,
@@ -3368,11 +3367,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var stringValue = cleanValue(_objectSpread2({
       value: modifiedValue
     }, cleanValueOptions));
+
+    // console.log("Before clean:", modifiedValue);
+    // console.log("After clean:", stringValue);
+
     if (userMaxLength && stringValue.replace(/-/g, '').length > userMaxLength) {
       return;
     }
     if (stringValue === '' || stringValue === '-' || stringValue === decimalSeparator) {
-      onValueChange && onValueChange(undefined, name, {
+      onChange && onChange(undefined, name, {
         "float": null,
         formatted: '',
         value: ''
@@ -3384,9 +3387,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     var stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, '.') : stringValue;
     var numberValue = parseFloat(stringValueWithoutSeparator);
+
+    // console.log('Number Value', numberValue);
+
     var formattedValue = formatValue(_objectSpread2({
       value: stringValue
     }, formatValueOptions));
+
+    // console.log('Formatted Value', numberValue);
+
     if (cursorPosition != null) {
       // Prevent cursor jumping
       var newCursor = cursorPosition + (formattedValue.length - value.length);
@@ -3394,15 +3403,25 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setCursor(newCursor);
       setChangeCount(changeCount + 1);
     }
+
+    // console.log({
+    //     inputValue: value,
+    //     modifiedValue,
+    //     stateValue,
+    //     selectionStart,
+    //     lastKeyStroke
+    //     });
+
     setStateValue(formattedValue);
-    if (onValueChange) {
+    if (onChange) {
       var values = {
         "float": numberValue,
         formatted: formattedValue,
         value: stringValue
       };
-      onValueChange(stringValue, name, values);
+      onChange(stringValue, name, values);
     }
+    // onChange && onChange(stringValue);
   };
 
   /**
@@ -3413,7 +3432,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       value = _event$target.value,
       selectionStart = _event$target.selectionStart;
     processChange(value, selectionStart);
-    onChange && onChange(event);
   };
 
   /**
@@ -3445,8 +3463,8 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var formattedValue = formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
       value: newValue
     }));
-    if (onValueChange && formatValueOnBlur) {
-      onValueChange(newValue, name, {
+    if (onChange && formatValueOnBlur) {
+      onChange(newValue, name, {
         "float": numberValue,
         formatted: formattedValue,
         value: newValue
@@ -3483,6 +3501,34 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown && onKeyDown(event);
   };
 
+  // const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  //     lastKeyStrokeRef.current = event.key;
+
+  //     // Handle arrow up/down with step
+  //     if (step && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+  //         event.preventDefault();
+
+  //         const currentValue =
+  //             parseFloat(
+  //                 userValue != null
+  //                     ? String(userValue).replace(decimalSeparator, '.')
+  //                     : cleanValue({ value: stateValue, ...cleanValueOptions })
+  //             ) || 0;
+
+  //         const newValue = event.key === 'ArrowUp' ? currentValue + step : currentValue - step;
+
+  //         if ((min !== undefined && newValue < Number(min)) || (max !== undefined && newValue > Number(max))) return;
+
+  //         const fixedLength = String(step).includes('.') ? String(step).split('.')[1].length : undefined;
+
+  //         processChange(
+  //             (fixedLength ? newValue.toFixed(fixedLength) : newValue).replace('.', decimalSeparator)
+  //         );
+  //     }
+
+  //     onKeyDown && onKeyDown(event);
+  // };
+
   /**
    * Handle key up event
    *
@@ -3524,13 +3570,19 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * If user has only entered "-" or decimal separator,
    * keep the char to allow them to enter next value
    */
+  // const getRenderValue = () => {
+  //     if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
+  //         // console.log('User Value', userValue);
+  //         return formatValue({
+  //             ...formatValueOptions,
+  //             decimalScale: dirty ? undefined : decimalScale,
+  //             value: String(userValue)
+  //         });
+  //     }
+
+  //     return stateValue;
+  // };
   var getRenderValue = function getRenderValue() {
-    if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
-      return formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
-        decimalScale: dirty ? undefined : decimalScale,
-        value: String(userValue)
-      }));
-    }
     return stateValue;
   };
   var inputProps = _objectSpread2({
@@ -3729,52 +3781,58 @@ var GridContainer = withScale(GridContainerComponent);
 
 Grid.Container = GridContainer;
 
-function parseCurrency(value) {
-  var _trimmed$match;
-  var trimmed = value.trim();
-
-  // Extract currency symbol
-  var currencySymbol = ((_trimmed$match = trimmed.match(/[^\d.,\s]/)) === null || _trimmed$match === void 0 ? void 0 : _trimmed$match[0]) || "";
-
-  // Remove everything except digits, comma, dot
-  var numericPart = trimmed.replace(/[^\d.,]/g, "");
-
-  // Convert comma to dot if needed
-  var normalized = numericPart.replace(",", ".");
-  return {
-    amount: Number(normalized),
-    currency: currencySymbol
-  };
-}
 function CurrencyRangeInput(_ref) {
   var prefix = _ref.prefix,
     allowDecimals = _ref.allowDecimals,
-    onChange = _ref.onChange,
     intlConfig = _ref.intlConfig,
-    children = _ref.children;
-  var _React$useState = React.useState({
-      min: '0',
-      max: '0',
-      currency: ''
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    value = _React$useState2[0],
-    setValue = _React$useState2[1];
-  React.useEffect(function () {
-    var min = parseCurrency(value.min);
-    var max = parseCurrency(value.max);
-    if (max.amount > min.amount) {
-      if (onChange) onChange({
-        target: {
-          value: {
-            min: min.amount,
-            max: max.amount,
-            currency: min.currency
-          }
-        }
-      });
+    children = _ref.children,
+    value = _ref.value,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? {
+      min: 0,
+      max: 0
+    } : _ref$defaultValue,
+    onChange = _ref.onChange,
+    _ref$debounce = _ref.debounce,
+    debounce = _ref$debounce === void 0 ? 300 : _ref$debounce,
+    externalError = _ref.error,
+    externalHelperText = _ref.helperText;
+  var isControlled = value !== undefined;
+  var _useState = React.useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var currentValue = isControlled ? value : internalValue;
+  var setValue = React.useCallback(function (val) {
+    if (!isControlled) {
+      setInternalValue(val);
     }
-  }, [value]);
+  }, [isControlled]);
+
+  // Validation
+  var isInvalid = React.useMemo(function () {
+    if (!currentValue.min || !currentValue.max) return false;
+    return currentValue.max <= currentValue.min;
+  }, [currentValue]);
+
+  // Debounced onChange
+  React.useEffect(function () {
+    if (!onChange || isInvalid) return;
+    var handler = setTimeout(function () {
+      if (currentValue.min && currentValue.max) {
+        onChange({
+          min: currentValue.min,
+          max: currentValue.max,
+          currency: ''
+        });
+      }
+    }, debounce);
+    return function () {
+      return clearTimeout(handler);
+    };
+  }, [isInvalid, onChange, debounce, currentValue]);
+  var finalError = externalError !== null && externalError !== void 0 ? externalError : isInvalid;
+  var finalHelperText = externalHelperText !== null && externalHelperText !== void 0 ? externalHelperText : isInvalid ? "Max must be greater than min" : undefined;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "with-label",
     children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
@@ -3783,12 +3841,11 @@ function CurrencyRangeInput(_ref) {
       gap: 2,
       children: [/*#__PURE__*/jsxRuntime.jsx(Grid, {
         children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
-          onChange: function onChange(e) {
-            return setValue(function (prev) {
-              return _objectSpread2(_objectSpread2({}, prev), {}, {
-                min: e.target.value
-              });
-            });
+          value: currentValue.min,
+          onChange: function onChange(val) {
+            return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
+              min: Number(val)
+            }));
           },
           intlConfig: intlConfig,
           prefix: prefix,
@@ -3797,12 +3854,11 @@ function CurrencyRangeInput(_ref) {
         })
       }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
         children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
-          onChange: function onChange(e) {
-            return setValue(function (prev) {
-              return _objectSpread2(_objectSpread2({}, prev), {}, {
-                max: e.target.value
-              });
-            });
+          value: currentValue.max,
+          onChange: function onChange(val) {
+            return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
+              max: Number(val)
+            }));
           },
           intlConfig: intlConfig,
           prefix: prefix,
@@ -3810,16 +3866,20 @@ function CurrencyRangeInput(_ref) {
           allowDecimals: allowDecimals
         })
       })]
+    }), finalHelperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
+      error: finalError,
+      text: finalHelperText
     })]
   });
 }
+var CurrencyRangeInput$1 = /*#__PURE__*/React.memo(CurrencyRangeInput);
 
 /* "use client" */
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
 Input.Phone = PhoneInput$1;
 Input.Currency = CurrencyInput;
-Input.CurrencyRange = CurrencyRangeInput;
+Input.CurrencyRange = CurrencyRangeInput$1;
 
 var lodash$1 = {exports: {}};
 

package/esm/input/input-currency-props.d.ts

@@ -96,7 +96,7 @@ export type CurrencyInputProps = Overwrite<React.ComponentPropsWithRef<'input'>,
     /**
      * Handle change in value
      */
-    onValueChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
+    onChange?: (value: string | undefined, name?: string, values?: CurrencyInputOnChangeValues) => void;
     /**
      * Placeholder if there is no value
      */