@helpdice/ui 2.6.0 → 2.6.1-beta.0

package/dist/input/index.d.ts

@@ -3,11 +3,13 @@ import Textarea from '../textarea';
 import InputPassword from './password';
 import PhoneInput from './input-phone';
 import CurrencyInput from './input-currency';
+import CurrencyRangeInput from './input-currency-range';
 export type InputComponentType = typeof Input & {
     Textarea: typeof Textarea;
     Password: typeof InputPassword;
     Phone: typeof PhoneInput;
     Currency: typeof CurrencyInput;
+    CurrencyRange: typeof CurrencyRangeInput;
 };
 export { getColors } from './styles';
 export type { InputProps } from './input-field';

package/dist/input/index.js

@@ -825,7 +825,7 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
   return getAllScaleProps;
 };
 
-var _excluded$6 = ["children"];
+var _excluded$9 = ["children"];
 var reduceScaleCoefficient = function reduceScaleCoefficient(scale) {
   if (scale === 1) return scale;
   var diff = Math.abs((scale - 1) / 2);
@@ -835,7 +835,7 @@ var withScale = function withScale(Render) {
   var ScaleFC = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _ref1, _ref10, _ref11, _ref12, _ref13, _ref14, _ref15, _ref16, _ref17, _ref18, _ref19, _ref20, _ref21, _ref22, _ref23, _ref24, _ref25, _ref26, _ref27, _ref28, _ref29, _ref30, _ref31;
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$9);
     var _useTheme = theme.useTheme(),
       layout = _useTheme.layout;
     var paddingLeft = props.paddingLeft,
@@ -920,7 +920,7 @@ var withScale = function withScale(Render) {
   return ScaleFC;
 };
 
-var _excluded$5 = ["children", "tag", "className", "color"];
+var _excluded$8 = ["children", "tag", "className", "color"];
 var getTypeColor = function getTypeColor(type, palette) {
   var colors = {
     "default": 'inherit',
@@ -938,7 +938,7 @@ var TextChild = function TextChild(_ref) {
     className = _ref$className === void 0 ? '' : _ref$className,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var Component = tag;
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
@@ -986,7 +986,7 @@ var TextChild = function TextChild(_ref) {
 };
 TextChild.displayName = 'TextChild';
 
-var _excluded$4 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className", "display", "alignItems", "justify"];
+var _excluded$7 = ["h1", "h2", "h3", "h4", "h5", "h6", "p", "b", "small", "i", "span", "del", "em", "blockquote", "noWrap", "children", "className", "display", "alignItems", "justify"];
 var _getModifierChild = function getModifierChild(tags, children) {
   if (!tags.length) return children;
   var nextTag = tags.slice(1, tags.length);
@@ -1033,7 +1033,7 @@ var TextComponent = function TextComponent(_ref) {
     display = _ref$display === void 0 ? 'block' : _ref$display,
     alignItems = _ref.alignItems,
     justify = _ref.justify,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$7);
   var elements = {
     h1: h1,
     h2: h2,
@@ -1228,7 +1228,7 @@ var getColors = function getColors(palette, status) {
   return colors[status];
 };
 
-var _excluded$3 = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth", "required"];
+var _excluded$6 = ["label", "labelRight", "error", "color", "helperText", "type", "icon", "variant", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "onEnter", "autoComplete", "placeholder", "children", "disabled", "fullWidth", "required"];
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
   return _objectSpread2(_objectSpread2({}, event), {}, {
     target: el,
@@ -1275,7 +1275,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     required = _ref.required,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1429,7 +1429,7 @@ tuple('hover', 'click');
 tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
 tuple('start', 'center', 'end', 'left', 'right');
 
-var _excluded$2 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
+var _excluded$5 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -1453,7 +1453,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     required = _ref.required,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1577,11 +1577,11 @@ var PasswordIcon = function PasswordIcon(_ref) {
 };
 var MemoPasswordIcon = /*#__PURE__*/React.memo(PasswordIcon);
 
-var _excluded$1 = ["hideToggle", "children"];
+var _excluded$4 = ["hideToggle", "children"];
 var InputPasswordComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var hideToggle = _ref.hideToggle,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var _useScale = useScale(),
     getAllScaleProps = _useScale.getAllScaleProps;
   var inputRef = React.useRef(null);
@@ -3189,7 +3189,7 @@ var repositionCursor = function repositionCursor(_ref) {
   };
 };
 
-var _excluded = ["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", "onValueChange", "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,
@@ -3231,7 +3231,7 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$formatValueOnBlu = _ref.formatValueOnBlur,
     formatValueOnBlur = _ref$formatValueOnBlu === void 0 ? true : _ref$formatValueOnBlu,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
   var theme$1 = theme.useTheme();
@@ -3533,11 +3533,243 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 var CurrencyInput = withScale(InputCurrency);
 
+var _excluded$2 = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
+var getItemLayout = function getItemLayout(val) {
+  var display = val === 0 ? 'display: none;' : 'display: inherit;';
+  if (typeof val === 'number') {
+    var width = 100 / 24 * val;
+    var ratio = width > 100 ? '100%' : width < 0 ? '0' : "".concat(width, "%");
+    return {
+      grow: 0,
+      display: display,
+      width: ratio,
+      basis: ratio
+    };
+  }
+  return {
+    grow: 1,
+    display: display,
+    width: '100%',
+    basis: '0'
+  };
+};
+var GridBasicItem = function GridBasicItem(_ref) {
+  var _ref$xs = _ref.xs,
+    xs = _ref$xs === void 0 ? false : _ref$xs,
+    _ref$sm = _ref.sm,
+    sm = _ref$sm === void 0 ? false : _ref$sm,
+    _ref$md = _ref.md,
+    md = _ref$md === void 0 ? false : _ref$md,
+    _ref$lg = _ref.lg,
+    lg = _ref$lg === void 0 ? false : _ref$lg,
+    _ref$xl = _ref.xl,
+    xl = _ref$xl === void 0 ? false : _ref$xl,
+    justify = _ref.justify,
+    direction = _ref.direction,
+    alignItems = _ref.alignItems,
+    alignContent = _ref.alignContent,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  var theme$1 = theme.useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = React.useMemo(function () {
+    var aligns = {
+      justify: justify,
+      direction: direction,
+      alignItems: alignItems,
+      alignContent: alignContent,
+      xs: xs,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xl: xl
+    };
+    var classString = Object.keys(aligns).reduce(function (pre, name) {
+      if (aligns[name] !== undefined && aligns[name] !== false) return "".concat(pre, " ").concat(name);
+      return pre;
+    }, '');
+    return classString.trim();
+  }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl]);
+  var layout = React.useMemo(function () {
+    return {
+      xs: getItemLayout(xs),
+      sm: getItemLayout(sm),
+      md: getItemLayout(md),
+      lg: getItemLayout(lg),
+      xl: getItemLayout(xl)
+    };
+  }, [xs, sm, md, lg, xl]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || theme.useClasses('item', classes, className) || ""),
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+      id: "568430467",
+      dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme$1.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme$1.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme$1.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme$1.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display],
+      children: ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme$1.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme$1.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")
+    })]
+  }));
+};
+GridBasicItem.displayName = 'GridBasicItem';
+
+var _excluded$1 = ["children", "className"];
+var GridComponent = function GridComponent(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _styles$className = {
+      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "1271839607",
+        dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')],
+        children: "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pr(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pb(0, 'var(--grid-gap-unit)'), " ").concat(SCALES.pl(0, 'var(--grid-gap-unit)'), ";}")
+      }),
+      className: _JSXStyle.dynamic([["1271839607", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, 'var(--grid-gap-unit)'), SCALES.pr(0, 'var(--grid-gap-unit)'), SCALES.pb(0, 'var(--grid-gap-unit)'), SCALES.pl(0, 'var(--grid-gap-unit)')]]])
+    },
+    resolveClassName = _styles$className.className,
+    styles = _styles$className.styles;
+  var classes = theme.useClasses(resolveClassName, className);
+  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
+    className: classes
+  }, props), {}, {
+    children: [children, styles]
+  }));
+};
+GridComponent.displayName = 'Grid';
+var Grid = withScale(GridComponent);
+
+var _excluded = ["gap", "wrap", "children", "className"];
+var GridContainerComponent = function GridContainerComponent(_ref) {
+  var _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 0 : _ref$gap,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? 'wrap' : _ref$wrap,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    unit = _useScale.unit,
+    SCALES = _useScale.SCALES;
+  var gapUnit = React.useMemo(function () {
+    return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
+  }, [gap, unit]);
+  var _styles$className = {
+      styles: /*#__PURE__*/jsxRuntime.jsx(_JSXStyle, {
+        id: "3631618093",
+        dynamic: [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')],
+        children: "div.__jsx-style-dynamic-selector{--grid-gap-unit:".concat(gapUnit, ";--grid-container-margin:calc(-1 * var(--grid-gap-unit));--grid-container-width:calc(100% + var(--grid-gap-unit) * 2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;width:").concat(SCALES.width(1, 'var(--grid-container-width)'), ";margin:").concat(SCALES.mt(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mr(0, 'var(--grid-container-margin)'), " ").concat(SCALES.mb(0, 'var(--grid-container-margin)'), " ").concat(SCALES.ml(0, 'var(--grid-container-margin)'), ";}")
+      }),
+      className: _JSXStyle.dynamic([["3631618093", [gapUnit, wrap, SCALES.width(1, 'var(--grid-container-width)'), SCALES.mt(0, 'var(--grid-container-margin)'), SCALES.mr(0, 'var(--grid-container-margin)'), SCALES.mb(0, 'var(--grid-container-margin)'), SCALES.ml(0, 'var(--grid-container-margin)')]]])
+    },
+    resolveClassName = _styles$className.className,
+    styles = _styles$className.styles;
+  var classes = theme.useClasses(resolveClassName, className);
+  return /*#__PURE__*/jsxRuntime.jsxs(GridBasicItem, _objectSpread2(_objectSpread2({
+    className: classes
+  }, props), {}, {
+    children: [children, styles]
+  }));
+};
+GridContainerComponent.displayName = 'GridContainer';
+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
+          }
+        }
+      });
+    }
+  }, [value]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "with-label",
+    children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      children: children
+    }), /*#__PURE__*/jsxRuntime.jsxs(Grid.Container, {
+      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
+              });
+            });
+          },
+          intlConfig: intlConfig,
+          prefix: prefix,
+          placeholder: "Min",
+          allowDecimals: allowDecimals
+        })
+      }), /*#__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
+              });
+            });
+          },
+          intlConfig: intlConfig,
+          prefix: prefix,
+          placeholder: "Max",
+          allowDecimals: allowDecimals
+        })
+      })]
+    })]
+  });
+}
+
 /* "use client" */
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
 Input.Phone = PhoneInput$1;
 Input.Currency = CurrencyInput;
+Input.CurrencyRange = CurrencyRangeInput;
 
 exports.InputError = InputError;
 exports.InputLabel = InputBlockLabel;

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

@@ -0,0 +1,8 @@
+import { CurrencyInputProps } from "./input-currency-props";
+import React from "react";
+type Override<T, U> = Omit<T, keyof U> & U;
+type CurrencyRangeProps = Override<CurrencyInputProps, {
+    onChange: (e: any) => void;
+}>;
+declare function CurrencyRangeInput({ prefix, allowDecimals, onChange, intlConfig, children }: CurrencyRangeProps): React.JSX.Element;
+export default CurrencyRangeInput;