@hero-design/rn 8.108.1 → 8.108.2

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3310) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3373) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 13.9s
+created lib/index.js, es/index.js in 1m 12.7s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 20.4s
+created ., . in 23.9s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.108.2
+
+### Patch Changes
+
+- [#4216](https://github.com/Thinkei/hero-design/pull/4216) [`498d2b6f8d3eb3090e54346cb7f54a248256f848`](https://github.com/Thinkei/hero-design/commit/498d2b6f8d3eb3090e54346cb7f54a248256f848) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Slider] Update colors to match design
+
 ## 8.108.1
 
 ### Patch Changes

package/es/index.js

@@ -1,7 +1,7 @@
 import * as reactNative from 'react-native';
-import { StyleSheet as StyleSheet$1, Platform, Dimensions, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Keyboard, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
+import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
 import * as React from 'react';
-import React__default, { useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, createContext, forwardRef, useContext, memo, useReducer, useImperativeHandle, isValidElement } from 'react';
+import React__default, { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect, createContext, forwardRef, useContext, memo, useReducer, useImperativeHandle, isValidElement } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
@@ -6681,14 +6681,174 @@ var getSkeletonTheme = function getSkeletonTheme(theme) {
   };
 };
 
+var DISABLED_UNSELECTED_TRACK_OPACITY = 0.1;
+var DISABLED_SELECTED_TRACK_OPACITY = 1;
+var UNSELECTED_TRACK_OPACITY = 0.1;
+
+var isIOS = Platform.OS === 'ios';
+var isAndroid = Platform.OS === 'android';
+function pick(keys, obj) {
+  return keys.filter(function (key) {
+    return key in obj;
+  }).reduce(function (result, cur) {
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
+  }, {});
+}
+function omit(keys, obj) {
+  var result = obj;
+  keys.forEach(function (key) {
+    delete result[key];
+  });
+  return result;
+}
+function hexToRgba(hex, a) {
+  // Validate inputs
+  if (typeof hex !== 'string' || typeof a !== 'number') {
+    throw new Error('hexToRgba: hex must be a string and alpha must be a number');
+  }
+  if (a < 0 || a > 1) {
+    throw new Error('hexToRgba: alpha must be between 0 and 1');
+  }
+  // Remove # if present and validate hex format
+  var cleanHex = hex.replace(/^#/, '');
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error('hexToRgba: hex must be a valid 3 or 6 character hex color');
+  }
+  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
+  var normalizedHex = cleanHex.length === 3 ? cleanHex.split('').map(function (_char) {
+    return _char + _char;
+  }).join('') : cleanHex;
+  // Parse hex values
+  var r = parseInt(normalizedHex.substring(0, 2), 16);
+  var g = parseInt(normalizedHex.substring(2, 4), 16);
+  var b = parseInt(normalizedHex.substring(4, 6), 16);
+  return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
+}
+/**
+ * Dim a hex color by blending it with a surface color
+ * @param hex - The hex color to dim (3 or 6 characters, with or without #)
+ * @param surface - The surface color to blend with.
+ * @param amount - The amount of dimming (0 = original color, 1 = fully surface color)
+ * @returns The dimmed hex color
+ */
+var DEFAULT_DIM_AMOUNT = 0.6;
+function dimHex(hex, surface) {
+  var amount = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_DIM_AMOUNT;
+  // Validate inputs
+  if (typeof hex !== 'string' || typeof surface !== 'string' || typeof amount !== 'number') {
+    throw new Error('dimHex: hex and surface must be strings and amount must be a number');
+  }
+  if (amount < 0 || amount > 1) {
+    throw new Error('dimHex: amount must be between 0 and 1');
+  }
+  // Remove # if present and validate hex format
+  var cleanHex = hex.replace(/^#/, '');
+  var cleanSurface = surface.replace(/^#/, '');
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+    throw new Error('dimHex: hex must be a valid 3 or 6 character hex color');
+  }
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanSurface)) {
+    throw new Error('dimHex: surface must be a valid 3 or 6 character hex color');
+  }
+  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
+  var normalizedHex = cleanHex.length === 3 ? cleanHex.split('').map(function (_char2) {
+    return _char2 + _char2;
+  }).join('') : cleanHex;
+  var normalizedSurface = cleanSurface.length === 3 ? cleanSurface.split('').map(function (_char3) {
+    return _char3 + _char3;
+  }).join('') : cleanSurface;
+  // Parse hex values
+  var r = parseInt(normalizedHex.substring(0, 2), 16);
+  var g = parseInt(normalizedHex.substring(2, 4), 16);
+  var b = parseInt(normalizedHex.substring(4, 6), 16);
+  var sr = parseInt(normalizedSurface.substring(0, 2), 16);
+  var sg = parseInt(normalizedSurface.substring(2, 4), 16);
+  var sb = parseInt(normalizedSurface.substring(4, 6), 16);
+  // Linear interpolation between colors
+  var lerp = function lerp(c, s) {
+    return Math.round(c * (1 - amount) + s * amount);
+  };
+  var rr = lerp(r, sr).toString(16).padStart(2, '0');
+  var gg = lerp(g, sg).toString(16).padStart(2, '0');
+  var bb = lerp(b, sb).toString(16).padStart(2, '0');
+  return "#".concat(rr).concat(gg).concat(bb);
+}
+var _deepCompareValue = function deepCompareValue(a, b) {
+  // Handle strict equality first (handles primitives, null, undefined)
+  if (a === b) return true;
+  // Special handling for NaN (NaN !== NaN in JS)
+  if (typeof a === 'number' && typeof b === 'number' && Number.isNaN(a) && Number.isNaN(b)) {
+    return false;
+  }
+  // If either is null or undefined (but they are not strictly equal), return false
+  if (a == null || b == null) return false;
+  // If types don't match, they can't be equal
+  if (_typeof$1(a) !== _typeof$1(b)) return false;
+  // Handle array comparison
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    return a.every(function (val, index) {
+      return _deepCompareValue(val, b[index]);
+    });
+  }
+  // If one is array and the other isn't, return false
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  // Handle object comparison
+  if (_typeof$1(a) === 'object' && _typeof$1(b) === 'object') {
+    var keysA = Object.keys(a);
+    var keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    return keysA.every(function (key) {
+      return keysB.includes(key) && _deepCompareValue(a[key], b[key]);
+    });
+  }
+  // If none of the above conditions matched, they're not equal
+  return false;
+};
+var useKeyboard = function useKeyboard() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isKeyboardVisible = _useState2[0],
+    setKeyboardVisible = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    keyboardHeight = _useState4[0],
+    setKeyboardHeight = _useState4[1];
+  useEffect(function () {
+    var keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', function (e) {
+      setKeyboardVisible(true);
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    var keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', function () {
+      setKeyboardVisible(false);
+    });
+    return function () {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+  return {
+    isKeyboardVisible: isKeyboardVisible,
+    keyboardHeight: keyboardHeight
+  };
+};
+var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(string) {
+  return string.replace(/-([a-z0-9])/g, function (_, _char4) {
+    return /[a-z]/.test(_char4) ? _char4.toUpperCase() : _char4;
+  });
+};
+
 var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
-    minimumTrackTint: theme.colors.primary,
-    thumbTint: theme.colors.primary,
-    maximumTrackTint: theme.colors.highlightedSurface,
-    trackBackground: theme.colors.highlightedSurface,
-    disabledThumbTint: theme.colors.disabledOnDefaultGlobalSurface,
-    disabledTrackBackground: theme.colors.neutralGlobalSurface
+    // Unselected track colors
+    unselectedTrack: hexToRgba(theme.colors.overlayGlobalSurface, UNSELECTED_TRACK_OPACITY),
+    disabledUnselectedTrack: dimHex(theme.colors.overlayGlobalSurface, theme.colors.defaultGlobalSurface),
+    // Selected track colors
+    selectedTrack: theme.colors.primary,
+    disabledSelectedTrack: dimHex(theme.colors.primary, theme.colors.defaultGlobalSurface),
+    // Thumb/marker colors
+    thumb: theme.colors.primary,
+    disabledThumb: dimHex(theme.colors.primary, theme.colors.defaultGlobalSurface)
   };
   var shadows = {
     marker: theme.shadows["default"]
@@ -9413,110 +9573,6 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-var isIOS = Platform.OS === 'ios';
-var isAndroid = Platform.OS === 'android';
-function pick(keys, obj) {
-  return keys.filter(function (key) {
-    return key in obj;
-  }).reduce(function (result, cur) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
-  }, {});
-}
-function omit(keys, obj) {
-  var result = obj;
-  keys.forEach(function (key) {
-    delete result[key];
-  });
-  return result;
-}
-function hexToRgba(hex, a) {
-  // Validate inputs
-  if (typeof hex !== 'string' || typeof a !== 'number') {
-    throw new Error('hexToRgba: hex must be a string and alpha must be a number');
-  }
-  if (a < 0 || a > 1) {
-    throw new Error('hexToRgba: alpha must be between 0 and 1');
-  }
-  // Remove # if present and validate hex format
-  var cleanHex = hex.replace(/^#/, '');
-  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
-    throw new Error('hexToRgba: hex must be a valid 3 or 6 character hex color');
-  }
-  // Handle 3-character hex codes (e.g., #fff -> #ffffff)
-  var normalizedHex = cleanHex.length === 3 ? cleanHex.split('').map(function (_char) {
-    return _char + _char;
-  }).join('') : cleanHex;
-  // Parse hex values
-  var r = parseInt(normalizedHex.substring(0, 2), 16);
-  var g = parseInt(normalizedHex.substring(2, 4), 16);
-  var b = parseInt(normalizedHex.substring(4, 6), 16);
-  return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
-}
-var _deepCompareValue = function deepCompareValue(a, b) {
-  // Handle strict equality first (handles primitives, null, undefined)
-  if (a === b) return true;
-  // Special handling for NaN (NaN !== NaN in JS)
-  if (typeof a === 'number' && typeof b === 'number' && Number.isNaN(a) && Number.isNaN(b)) {
-    return false;
-  }
-  // If either is null or undefined (but they are not strictly equal), return false
-  if (a == null || b == null) return false;
-  // If types don't match, they can't be equal
-  if (_typeof$1(a) !== _typeof$1(b)) return false;
-  // Handle array comparison
-  if (Array.isArray(a) && Array.isArray(b)) {
-    if (a.length !== b.length) return false;
-    return a.every(function (val, index) {
-      return _deepCompareValue(val, b[index]);
-    });
-  }
-  // If one is array and the other isn't, return false
-  if (Array.isArray(a) !== Array.isArray(b)) return false;
-  // Handle object comparison
-  if (_typeof$1(a) === 'object' && _typeof$1(b) === 'object') {
-    var keysA = Object.keys(a);
-    var keysB = Object.keys(b);
-    if (keysA.length !== keysB.length) return false;
-    return keysA.every(function (key) {
-      return keysB.includes(key) && _deepCompareValue(a[key], b[key]);
-    });
-  }
-  // If none of the above conditions matched, they're not equal
-  return false;
-};
-var useKeyboard = function useKeyboard() {
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isKeyboardVisible = _useState2[0],
-    setKeyboardVisible = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    keyboardHeight = _useState4[0],
-    setKeyboardHeight = _useState4[1];
-  useEffect(function () {
-    var keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', function () {
-      setKeyboardVisible(false);
-    });
-    return function () {
-      keyboardWillShowListener.remove();
-      keyboardWillHideListener.remove();
-    };
-  }, []);
-  return {
-    isKeyboardVisible: isKeyboardVisible,
-    keyboardHeight: keyboardHeight
-  };
-};
-var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(string) {
-  return string.replace(/-([a-z0-9])/g, function (_, _char2) {
-    return /[a-z]/.test(_char2) ? _char2.toUpperCase() : _char2;
-  });
-};
-
 var colors = {
   backgroundColor: {
     property: 'backgroundColor',
@@ -25288,6 +25344,10 @@ var Slider$2 = function Slider(_ref) {
     style = _ref.style,
     testID = _ref.testID;
   var theme = useTheme();
+  var _theme$__hd__$slider$ = theme.__hd__.slider.colors,
+    selectedTrack = _theme$__hd__$slider$.selectedTrack,
+    thumb = _theme$__hd__$slider$.thumb,
+    unselectedTrack = _theme$__hd__$slider$.unselectedTrack;
   return /*#__PURE__*/React__default.createElement(RnSlider, {
     minimumValue: minimumValue,
     maximumValue: maximumValue,
@@ -25297,9 +25357,9 @@ var Slider$2 = function Slider(_ref) {
     onSlidingStart: onSlidingStart,
     onSlidingComplete: onSlidingComplete,
     disabled: disabled,
-    minimumTrackTintColor: theme.__hd__.slider.colors.minimumTrackTint,
-    thumbTintColor: theme.__hd__.slider.colors.thumbTint,
-    maximumTrackTintColor: theme.__hd__.slider.colors.maximumTrackTint,
+    minimumTrackTintColor: selectedTrack,
+    thumbTintColor: thumb,
+    maximumTrackTintColor: unselectedTrack,
     style: style,
     testID: testID
   });
@@ -25312,7 +25372,7 @@ var StyledMarker = index$c(View)(function (_ref) {
     height: theme.__hd__.slider.sizes.markerHeight,
     width: theme.__hd__.slider.sizes.markerWidth,
     borderRadius: theme.__hd__.slider.radii.marker,
-    backgroundColor: themeDisabled ? theme.__hd__.slider.colors.disabledThumbTint : theme.__hd__.slider.colors.thumbTint
+    backgroundColor: themeDisabled ? theme.__hd__.slider.colors.disabledThumb : theme.__hd__.slider.colors.thumb
   }, theme.__hd__.slider.shadows.marker);
 });
 
@@ -25352,28 +25412,30 @@ var Slider$1 = function Slider(_ref) {
     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;
+    unselectedTrack = _theme$__hd__$slider$.unselectedTrack,
+    disabledUnselectedTrack = _theme$__hd__$slider$.disabledUnselectedTrack,
+    selectedTrack = _theme$__hd__$slider$.selectedTrack,
+    disabledSelectedTrack = _theme$__hd__$slider$.disabledSelectedTrack;
   var trackHeight = theme.__hd__.slider.sizes.trackHeight;
   // Define styles for disabled and enabled states
   var disabledStyles = {
     track: {
-      backgroundColor: disabledTrackBackground,
+      opacity: DISABLED_UNSELECTED_TRACK_OPACITY,
+      backgroundColor: disabledUnselectedTrack,
       height: trackHeight
     },
     selected: {
-      backgroundColor: disabledThumbTint
+      opacity: DISABLED_SELECTED_TRACK_OPACITY,
+      backgroundColor: disabledSelectedTrack
     }
   };
   var enabledStyles = {
     track: {
-      backgroundColor: trackBackground,
+      backgroundColor: unselectedTrack,
       height: trackHeight
     },
     selected: {
-      backgroundColor: thumbTint
+      backgroundColor: selectedTrack
     }
   };
   // Use styles based on the `disabled` state