@hero-design/rn 8.82.2-alpha.1 → 8.83.0-test.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.83.0-test.0
+
+### Minor Changes
+
+- [#3565](https://github.com/Thinkei/hero-design/pull/3565) [`d92d95e9a3fb996f5b73d6a8fdece398d5417b68`](https://github.com/Thinkei/hero-design/commit/d92d95e9a3fb996f5b73d6a8fdece398d5417b68) Thanks [@ttkien](https://github.com/ttkien)! - [Slider] add Range Slider
+
 ## 8.82.1
 
 ### Patch Changes

package/es/index.js

@@ -7,6 +7,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import RnSlider from '@react-native-community/slider';
+import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import PagerView from 'react-native-pager-view';
@@ -2042,25 +2043,15 @@ var getFontSizes = function getFontSizes(baseFontSize) {
   });
   return {
     '7xlarge': scale(fontSizes[10]),
-    // 42
     '6xlarge': scale(fontSizes[9]),
-    //  36
     xxxxxlarge: scale(fontSizes[8]),
-    // 32
     xxxxlarge: scale(fontSizes[7]),
-    //  28
     xxxlarge: scale(fontSizes[6]),
-    //   24
     xxlarge: scale(fontSizes[5]),
-    //    20
     xlarge: scale(fontSizes[4]),
-    //     18
     large: scale(fontSizes[3]),
-    //      16
     medium: scale(fontSizes[2]),
-    //     14
     small: scale(fontSizes[1]),
-    //      12
     xsmall: scale(fontSizes[0]) //     10
   };
 };
@@ -2085,25 +2076,15 @@ var getLineHeights = function getLineHeights(fontSizes) {
 var getSpace = function getSpace(baseSpace) {
   return {
     xxsmall: scale(baseSpace * 0.25),
-    // 2
     xsmall: scale(baseSpace * 0.5),
-    // 4
     small: scale(baseSpace),
-    // 8
     smallMedium: scale(baseSpace) * 1.5,
-    // 12
     medium: scale(baseSpace * 2),
-    // 16
     large: scale(baseSpace * 3),
-    // 24
     xlarge: scale(baseSpace * 4),
-    // 32
     xxlarge: scale(baseSpace * 5),
-    // 40
     xxxlarge: scale(baseSpace * 6),
-    // 48
     xxxxlarge: scale(baseSpace * 7),
-    // 56
     '5xlarge': scale(baseSpace * 8) // 64
   };
 };
@@ -2111,19 +2092,12 @@ var getSpace = function getSpace(baseSpace) {
 var getSizes = function getSizes(baseSize) {
   return _objectSpread2(_objectSpread2({}, getSpace(baseSize)), {}, {
     xxxxxlarge: scale(baseSize * 8),
-    // 64
     '6xlarge': scale(baseSize * 9),
-    // 72
     '7xlarge': scale(baseSize * 10),
-    // 80
     '9xlarge': scale(baseSize * 12),
-    // 96
     '14xlarge': scale(baseSize * 17),
-    // 136
     '15xlarge': scale(baseSize * 18),
-    // 144
     '18xlarge': scale(baseSize * 21),
-    // 168
     '19xlarge': scale(baseSize * 22) // 176
   });
 };
@@ -2131,7 +2105,6 @@ var getSizes = function getSizes(baseSize) {
 var getBorderWidths = function getBorderWidths(baseBorderWidth) {
   return {
     base: baseBorderWidth,
-    // 1
     medium: baseBorderWidth * 2 // 2
   };
 };
@@ -2140,17 +2113,11 @@ var getRadii = function getRadii(baseRadius) {
   return {
     rounded: 999,
     base: baseRadius,
-    // 4
     medium: baseRadius * 2,
-    // 8
     large: baseRadius * 3,
-    // 12
     xlarge: baseRadius * 4,
-    // 16
     xxlarge: baseRadius * 5,
-    // 20
     xxxlarge: baseRadius * 6,
-    // 24
     '5xlarge': baseRadius * 8 // 32
   };
 };
@@ -3100,7 +3067,6 @@ var getProgressTheme = function getProgressTheme(theme) {
     completeness: {
       primary: theme.colors.primary,
       success: theme.colors.success,
-      // should be emerald dark 15
       warning: theme.colors.warning,
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -3304,10 +3270,21 @@ var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
     minimumTrackTint: theme.colors.primary,
     thumbTint: theme.colors.primary,
-    maximumTrackTint: theme.colors.highlightedSurface
+    maximumTrackTint: theme.colors.highlightedSurface,
+    trackBackground: theme.colors.highlightedSurface,
+    disabledThumbTint: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledTrackBackground: theme.colors.neutralGlobalSurface
+  };
+  var shadows = {
+    marker: theme.shadows["default"]
+  };
+  var sizes = {
+    trackHeight: theme.sizes.xsmall
   };
   return {
-    colors: colors
+    colors: colors,
+    shadows: shadows,
+    sizes: sizes
   };
 };
 
@@ -8311,7 +8288,6 @@ var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
 
     android: {
       lineHeight: null,
-      // center on android
       marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize]
     },
     web: {
@@ -9455,7 +9431,6 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   return _objectSpread2({
     flexShrink: 1,
     lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
-    // align text on Android
     textAlign: 'center'
   }, themeStyling());
 });
@@ -14298,7 +14273,6 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   return {
     list: uniqSnapPointOffsetValues,
     minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
-    // Furthest from max height
     maxHeightOffset: 0 // Max height
   };
 };
@@ -16626,7 +16600,6 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   });
   var interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate({
     inputRange: [50, 51],
-    // Transition between left and right half
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
@@ -16751,7 +16724,6 @@ var ProgressBar = function ProgressBar(_ref) {
   });
   var interpolateBorderRadius = progressAnimatedValue.current.interpolate({
     inputRange: [99, 100],
-    // Transition range to remove bother when reached 100%
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
@@ -16873,7 +16845,7 @@ var Progress = {
   Step: ProgressStep
 };
 
-var Slider = function Slider(_ref) {
+var Slider$2 = function Slider(_ref) {
   var _ref$minimumValue = _ref.minimumValue,
     minimumValue = _ref$minimumValue === void 0 ? 0 : _ref$minimumValue,
     _ref$maximumValue = _ref.maximumValue,
@@ -16907,6 +16879,111 @@ var Slider = function Slider(_ref) {
   });
 };
 
+var Slider$1 = function Slider(_ref) {
+  var minimumValue = _ref.minimumValue,
+    maximumValue = _ref.maximumValue,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    value = _ref.value,
+    onValueChange = _ref.onValueChange,
+    onSlidingStart = _ref.onSlidingStart,
+    onSlidingComplete = _ref.onSlidingComplete,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    style = _ref.style,
+    testID = _ref.testID,
+    _ref$allowOverlap = _ref.allowOverlap,
+    allowOverlap = _ref$allowOverlap === void 0 ? false : _ref$allowOverlap;
+  var theme = useTheme();
+  var handleTwoWaySliderChange = React__default.useCallback(function (values) {
+    if (onValueChange) {
+      onValueChange({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onValueChange]);
+  var _useState = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    layoutSize = _useState2[0],
+    setLayoutSize = _useState2[1];
+  var nativeValue = useMemo(function () {
+    var _value$start, _value$end;
+    return [(_value$start = value === null || value === void 0 ? void 0 : value.start) !== null && _value$start !== void 0 ? _value$start : minimumValue, (_value$end = value === null || value === void 0 ? void 0 : value.end) !== null && _value$end !== void 0 ? _value$end : maximumValue];
+  }, [value === null || value === void 0 ? void 0 : value.start, value === null || value === void 0 ? void 0 : value.end, minimumValue, maximumValue]);
+  var _theme$__hd__$slider$ = theme.__hd__.slider.colors,
+    trackBackground = _theme$__hd__$slider$.trackBackground,
+    disabledTrackBackground = _theme$__hd__$slider$.disabledTrackBackground,
+    thumbTint = _theme$__hd__$slider$.thumbTint,
+    disabledThumbTint = _theme$__hd__$slider$.disabledThumbTint;
+  var trackHeight = theme.__hd__.slider.sizes.trackHeight;
+  var trackStyle = useMemo(function () {
+    return {
+      backgroundColor: disabled ? disabledTrackBackground : trackBackground,
+      height: trackHeight
+    };
+  }, [disabled, disabledTrackBackground, trackBackground, trackHeight]);
+  var markerShadow = theme.__hd__.slider.shadows.marker;
+  var makerStyle = useMemo(function () {
+    return _objectSpread2({
+      backgroundColor: disabled ? disabledThumbTint : thumbTint
+    }, markerShadow);
+  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+  var selectedStyle = useMemo(function () {
+    return {
+      backgroundColor: disabled ? disabledThumbTint : thumbTint
+    };
+  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+  var handleOnValueChangeStart = useCallback(function () {
+    if (onSlidingStart) {
+      onSlidingStart();
+    }
+  }, [onSlidingStart]);
+  var handleOnValueChangeFinish = useCallback(function (values) {
+    if (onSlidingComplete) {
+      onSlidingComplete({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onSlidingComplete]);
+  var onLayoutCallback = useCallback(function (event) {
+    setLayoutSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height
+    });
+  }, []);
+  return /*#__PURE__*/React__default.createElement(View, {
+    onLayout: onLayoutCallback,
+    style: style,
+    testID: testID,
+    accessibilityState: {
+      disabled: disabled
+    }
+  }, /*#__PURE__*/React__default.createElement(MultiSlider, {
+    values: nativeValue,
+    onValuesChange: handleTwoWaySliderChange,
+    onValuesChangeStart: handleOnValueChangeStart,
+    onValuesChangeFinish: handleOnValueChangeFinish,
+    sliderLength: layoutSize.width,
+    min: minimumValue,
+    max: maximumValue,
+    step: step,
+    enabledOne: !disabled,
+    enabledTwo: !disabled,
+    allowOverlap: allowOverlap,
+    trackStyle: trackStyle,
+    markerStyle: makerStyle,
+    selectedStyle: selectedStyle
+  }));
+};
+
+var Slider = Slider$2;
+Slider.Range = Slider$1;
+
 var StyledView$1 = index$a(View)();
 var StyledSpinnerContainer = index$a(View)({
   height: '100%',

package/eslint.config.js

@@ -15,16 +15,19 @@ module.exports = [
   includeIgnoreFile(gitignorePath),
   {
     files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+
     plugins: {
       '@hero-design': heroDesign,
       import: _import,
     },
+
     languageOptions: {
       parserOptions: {
         tsconfigRootDir: __dirname,
         project: ['./tsconfig.json'],
       },
     },
+
     rules: {
       'no-underscore-dangle': [
         'error',
@@ -32,9 +35,8 @@ module.exports = [
           allow: ['__hd__'],
         },
       ],
+
       'import/no-cycle': 'error',
-      'react/no-unused-prop-types': 'warn',
-      'react/no-array-index-key': 'warn',
     },
   },
 ];

package/lib/index.js

@@ -7,6 +7,7 @@ var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
 var DateTimePicker = require('@react-native-community/datetimepicker');
 var RnSlider = require('@react-native-community/slider');
+var MultiSlider = require('@ptomasroos/react-native-multi-slider');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var LinearGradient = require('react-native-linear-gradient');
 var PagerView = require('react-native-pager-view');
@@ -37,6 +38,7 @@ var reactNative__namespace = /*#__PURE__*/_interopNamespaceCompat(reactNative);
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultCompat(DateTimePicker);
 var RnSlider__default = /*#__PURE__*/_interopDefaultCompat(RnSlider);
+var MultiSlider__default = /*#__PURE__*/_interopDefaultCompat(MultiSlider);
 var LinearGradient__default = /*#__PURE__*/_interopDefaultCompat(LinearGradient);
 var PagerView__default = /*#__PURE__*/_interopDefaultCompat(PagerView);
 
@@ -2069,25 +2071,15 @@ var getFontSizes = function getFontSizes(baseFontSize) {
   });
   return {
     '7xlarge': scale(fontSizes[10]),
-    // 42
     '6xlarge': scale(fontSizes[9]),
-    //  36
     xxxxxlarge: scale(fontSizes[8]),
-    // 32
     xxxxlarge: scale(fontSizes[7]),
-    //  28
     xxxlarge: scale(fontSizes[6]),
-    //   24
     xxlarge: scale(fontSizes[5]),
-    //    20
     xlarge: scale(fontSizes[4]),
-    //     18
     large: scale(fontSizes[3]),
-    //      16
     medium: scale(fontSizes[2]),
-    //     14
     small: scale(fontSizes[1]),
-    //      12
     xsmall: scale(fontSizes[0]) //     10
   };
 };
@@ -2112,25 +2104,15 @@ var getLineHeights = function getLineHeights(fontSizes) {
 var getSpace = function getSpace(baseSpace) {
   return {
     xxsmall: scale(baseSpace * 0.25),
-    // 2
     xsmall: scale(baseSpace * 0.5),
-    // 4
     small: scale(baseSpace),
-    // 8
     smallMedium: scale(baseSpace) * 1.5,
-    // 12
     medium: scale(baseSpace * 2),
-    // 16
     large: scale(baseSpace * 3),
-    // 24
     xlarge: scale(baseSpace * 4),
-    // 32
     xxlarge: scale(baseSpace * 5),
-    // 40
     xxxlarge: scale(baseSpace * 6),
-    // 48
     xxxxlarge: scale(baseSpace * 7),
-    // 56
     '5xlarge': scale(baseSpace * 8) // 64
   };
 };
@@ -2138,19 +2120,12 @@ var getSpace = function getSpace(baseSpace) {
 var getSizes = function getSizes(baseSize) {
   return _objectSpread2(_objectSpread2({}, getSpace(baseSize)), {}, {
     xxxxxlarge: scale(baseSize * 8),
-    // 64
     '6xlarge': scale(baseSize * 9),
-    // 72
     '7xlarge': scale(baseSize * 10),
-    // 80
     '9xlarge': scale(baseSize * 12),
-    // 96
     '14xlarge': scale(baseSize * 17),
-    // 136
     '15xlarge': scale(baseSize * 18),
-    // 144
     '18xlarge': scale(baseSize * 21),
-    // 168
     '19xlarge': scale(baseSize * 22) // 176
   });
 };
@@ -2158,7 +2133,6 @@ var getSizes = function getSizes(baseSize) {
 var getBorderWidths = function getBorderWidths(baseBorderWidth) {
   return {
     base: baseBorderWidth,
-    // 1
     medium: baseBorderWidth * 2 // 2
   };
 };
@@ -2167,17 +2141,11 @@ var getRadii = function getRadii(baseRadius) {
   return {
     rounded: 999,
     base: baseRadius,
-    // 4
     medium: baseRadius * 2,
-    // 8
     large: baseRadius * 3,
-    // 12
     xlarge: baseRadius * 4,
-    // 16
     xxlarge: baseRadius * 5,
-    // 20
     xxxlarge: baseRadius * 6,
-    // 24
     '5xlarge': baseRadius * 8 // 32
   };
 };
@@ -3127,7 +3095,6 @@ var getProgressTheme = function getProgressTheme(theme) {
     completeness: {
       primary: theme.colors.primary,
       success: theme.colors.success,
-      // should be emerald dark 15
       warning: theme.colors.warning,
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -3331,10 +3298,21 @@ var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
     minimumTrackTint: theme.colors.primary,
     thumbTint: theme.colors.primary,
-    maximumTrackTint: theme.colors.highlightedSurface
+    maximumTrackTint: theme.colors.highlightedSurface,
+    trackBackground: theme.colors.highlightedSurface,
+    disabledThumbTint: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledTrackBackground: theme.colors.neutralGlobalSurface
+  };
+  var shadows = {
+    marker: theme.shadows["default"]
+  };
+  var sizes = {
+    trackHeight: theme.sizes.xsmall
   };
   return {
-    colors: colors
+    colors: colors,
+    shadows: shadows,
+    sizes: sizes
   };
 };
 
@@ -8338,7 +8316,6 @@ var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
 
     android: {
       lineHeight: null,
-      // center on android
       marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize]
     },
     web: {
@@ -9482,7 +9459,6 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   return _objectSpread2({
     flexShrink: 1,
     lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
-    // align text on Android
     textAlign: 'center'
   }, themeStyling());
 });
@@ -14325,7 +14301,6 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   return {
     list: uniqSnapPointOffsetValues,
     minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
-    // Furthest from max height
     maxHeightOffset: 0 // Max height
   };
 };
@@ -16653,7 +16628,6 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   });
   var interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate({
     inputRange: [50, 51],
-    // Transition between left and right half
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
@@ -16778,7 +16752,6 @@ var ProgressBar = function ProgressBar(_ref) {
   });
   var interpolateBorderRadius = progressAnimatedValue.current.interpolate({
     inputRange: [99, 100],
-    // Transition range to remove bother when reached 100%
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
@@ -16900,7 +16873,7 @@ var Progress = {
   Step: ProgressStep
 };
 
-var Slider = function Slider(_ref) {
+var Slider$2 = function Slider(_ref) {
   var _ref$minimumValue = _ref.minimumValue,
     minimumValue = _ref$minimumValue === void 0 ? 0 : _ref$minimumValue,
     _ref$maximumValue = _ref.maximumValue,
@@ -16934,6 +16907,111 @@ var Slider = function Slider(_ref) {
   });
 };
 
+var Slider$1 = function Slider(_ref) {
+  var minimumValue = _ref.minimumValue,
+    maximumValue = _ref.maximumValue,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    value = _ref.value,
+    onValueChange = _ref.onValueChange,
+    onSlidingStart = _ref.onSlidingStart,
+    onSlidingComplete = _ref.onSlidingComplete,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    style = _ref.style,
+    testID = _ref.testID,
+    _ref$allowOverlap = _ref.allowOverlap,
+    allowOverlap = _ref$allowOverlap === void 0 ? false : _ref$allowOverlap;
+  var theme = useTheme();
+  var handleTwoWaySliderChange = React__namespace.default.useCallback(function (values) {
+    if (onValueChange) {
+      onValueChange({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onValueChange]);
+  var _useState = React.useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    layoutSize = _useState2[0],
+    setLayoutSize = _useState2[1];
+  var nativeValue = React.useMemo(function () {
+    var _value$start, _value$end;
+    return [(_value$start = value === null || value === void 0 ? void 0 : value.start) !== null && _value$start !== void 0 ? _value$start : minimumValue, (_value$end = value === null || value === void 0 ? void 0 : value.end) !== null && _value$end !== void 0 ? _value$end : maximumValue];
+  }, [value === null || value === void 0 ? void 0 : value.start, value === null || value === void 0 ? void 0 : value.end, minimumValue, maximumValue]);
+  var _theme$__hd__$slider$ = theme.__hd__.slider.colors,
+    trackBackground = _theme$__hd__$slider$.trackBackground,
+    disabledTrackBackground = _theme$__hd__$slider$.disabledTrackBackground,
+    thumbTint = _theme$__hd__$slider$.thumbTint,
+    disabledThumbTint = _theme$__hd__$slider$.disabledThumbTint;
+  var trackHeight = theme.__hd__.slider.sizes.trackHeight;
+  var trackStyle = React.useMemo(function () {
+    return {
+      backgroundColor: disabled ? disabledTrackBackground : trackBackground,
+      height: trackHeight
+    };
+  }, [disabled, disabledTrackBackground, trackBackground, trackHeight]);
+  var markerShadow = theme.__hd__.slider.shadows.marker;
+  var makerStyle = React.useMemo(function () {
+    return _objectSpread2({
+      backgroundColor: disabled ? disabledThumbTint : thumbTint
+    }, markerShadow);
+  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+  var selectedStyle = React.useMemo(function () {
+    return {
+      backgroundColor: disabled ? disabledThumbTint : thumbTint
+    };
+  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+  var handleOnValueChangeStart = React.useCallback(function () {
+    if (onSlidingStart) {
+      onSlidingStart();
+    }
+  }, [onSlidingStart]);
+  var handleOnValueChangeFinish = React.useCallback(function (values) {
+    if (onSlidingComplete) {
+      onSlidingComplete({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onSlidingComplete]);
+  var onLayoutCallback = React.useCallback(function (event) {
+    setLayoutSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height
+    });
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    onLayout: onLayoutCallback,
+    style: style,
+    testID: testID,
+    accessibilityState: {
+      disabled: disabled
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(MultiSlider__default.default, {
+    values: nativeValue,
+    onValuesChange: handleTwoWaySliderChange,
+    onValuesChangeStart: handleOnValueChangeStart,
+    onValuesChangeFinish: handleOnValueChangeFinish,
+    sliderLength: layoutSize.width,
+    min: minimumValue,
+    max: maximumValue,
+    step: step,
+    enabledOne: !disabled,
+    enabledTwo: !disabled,
+    allowOverlap: allowOverlap,
+    trackStyle: trackStyle,
+    markerStyle: makerStyle,
+    selectedStyle: selectedStyle
+  }));
+};
+
+var Slider = Slider$2;
+Slider.Range = Slider$1;
+
 var StyledView$1 = index$a(reactNative.View)();
 var StyledSpinnerContainer = index$a(reactNative.View)({
   height: '100%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.82.2-alpha.1",
+  "version": "8.83.0-test.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,6 +29,7 @@
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.42.10",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
@@ -52,6 +53,7 @@
     "@eslint/js": "^9.8.0",
     "@hero-design/eslint-plugin": "9.2.0",
     "@hero-design/react-native-month-year-picker": "^8.42.10",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -70,7 +72,7 @@
     "babel-preset-expo": "^11.0.15",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.5",
+    "eslint-config-hd": "8.42.4",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
@@ -91,7 +93,7 @@
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.7.3"
+    "typescript": "4.8.4"
   },
   "prettier": "prettier-config-hd"
 }

package/rollup.config.mjs

@@ -42,6 +42,7 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
+    '@ptomasroos/react-native-multi-slider',
   ],
   plugins: [
     replace({