@hero-design/rn-work-uikit 1.7.3 → 1.7.5-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @hero-design/rn-work-uikit
 
+## 1.7.5-alpha.0
+
+### Patch Changes
+
+- [#4123](https://github.com/Thinkei/hero-design/pull/4123) [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89) Thanks [@truongnguyen-eh](https://github.com/truongnguyen-eh)! - [ANG-3740] Resolve conflict between alpha and master-react-18
+
+- Updated dependencies [[`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083), [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89)]:
+  - @hero-design/rn@8.108.3-alpha.0
+
+## 1.7.4
+
+### 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
+
+- Updated dependencies [[`498d2b6f8d3eb3090e54346cb7f54a248256f848`](https://github.com/Thinkei/hero-design/commit/498d2b6f8d3eb3090e54346cb7f54a248256f848)]:
+  - @hero-design/rn@8.108.2
+
 ## 1.7.3
 
 ### Patch Changes

package/lib/index.js

@@ -673,16 +673,85 @@ function omit(keys, obj) {
   return result;
 }
 function hexToRgba(hex, a) {
-  var arrBuff = new ArrayBuffer(4);
-  var vw = new DataView(arrBuff);
-  vw.setUint32(0, parseInt(hex, 16), false);
-  var arrByte = new Uint8Array(arrBuff);
-  var _arrByte = _slicedToArray(arrByte, 3),
-    r = _arrByte[0],
-    g = _arrByte[1],
-    b = _arrByte[2];
+  // 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;
@@ -750,8 +819,8 @@ var useKeyboard = function useKeyboard() {
   };
 };
 var transformKebabCaseToCamelCase = function transformKebabCaseToCamelCase(string) {
-  return string.replace(/-([a-z0-9])/g, function (_, _char) {
-    return /[a-z]/.test(_char) ? _char.toUpperCase() : _char;
+  return string.replace(/-([a-z0-9])/g, function (_, _char4) {
+    return /[a-z]/.test(_char4) ? _char4.toUpperCase() : _char4;
   });
 };
 
@@ -6945,14 +7014,21 @@ 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 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"]
@@ -24897,7 +24973,6 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
-  var theme = useTheme();
   var fabRef = React.useRef(null);
   var animatedValue = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React__namespace.default.useImperativeHandle(ref, function () {
@@ -24976,13 +25051,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), active && /*#__PURE__*/React__namespace.default.createElement(StyledFAB$1
-  // This FAB is moved up a bit compared to the original FAB,
-  // set marginBottom to negative value to compensate for it
-  , {
-    style: {
-      marginBottom: -theme.space.xxsmall
-    },
+  }))), active && /*#__PURE__*/React__namespace.default.createElement(StyledFAB$1, {
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,
@@ -26348,6 +26417,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__namespace.default.createElement(RnSlider__default.default, {
     minimumValue: minimumValue,
     maximumValue: maximumValue,
@@ -26357,9 +26430,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
   });
@@ -26372,7 +26445,7 @@ var StyledMarker = index$c(reactNative.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);
 });
 
@@ -26412,29 +26485,31 @@ 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
     }
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.7.3",
+  "version": "1.7.5-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.108.0",
+    "@hero-design/rn": "^8.108.3-alpha.0",
     "hero-editor": "^1.16.0"
   },
   "peerDependencies": {

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -1281,12 +1281,12 @@ exports[`theme returns correct theme object 1`] = `
     },
     "slider": {
       "colors": {
-        "disabledThumbTint": "#bfc1c5",
-        "disabledTrackBackground": "#f6f6f7",
-        "maximumTrackTint": "#ece8ef",
-        "minimumTrackTint": "#401960",
-        "thumbTint": "#401960",
-        "trackBackground": "#ece8ef",
+        "disabledSelectedTrack": "#b3a3bf",
+        "disabledThumb": "#b3a3bf",
+        "disabledUnselectedTrack": "#999999",
+        "selectedTrack": "#401960",
+        "thumb": "#401960",
+        "unselectedTrack": "rgba(0,0,0,0.1)",
       },
       "radii": {
         "marker": 999,