@hero-design/rn 8.108.0 → 8.108.2

package/src/theme/components/slider.ts

@@ -1,13 +1,32 @@
+import { UNSELECTED_TRACK_OPACITY } from '../../components/Slider/constants';
+import { dimHex, hexToRgba } from '../../utils/helpers';
 import type { GlobalTheme } from '../global';
 
 const getSliderTheme = (theme: GlobalTheme) => {
   const 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
+    ),
   };
 
   const shadows = {

package/src/utils/__tests__/helpers.spec.ts

@@ -1,5 +1,7 @@
 import {
   deepCompareValue,
+  dimHex,
+  hexToRgba,
   omit,
   pick,
   transformKebabCaseToCamelCase,
@@ -114,3 +116,214 @@ describe('transformKebabCaseToCamelCase', () => {
     }
   );
 });
+
+describe('hexToRgba', () => {
+  it.each`
+    hex          | alpha   | expected
+    ${'#FF0000'} | ${1}    | ${'rgba(255,0,0,1)'}
+    ${'#00FF00'} | ${0.5}  | ${'rgba(0,255,0,0.5)'}
+    ${'#0000FF'} | ${0}    | ${'rgba(0,0,255,0)'}
+    ${'#FFFFFF'} | ${0.8}  | ${'rgba(255,255,255,0.8)'}
+    ${'#000000'} | ${0.3}  | ${'rgba(0,0,0,0.3)'}
+    ${'#123456'} | ${0.7}  | ${'rgba(18,52,86,0.7)'}
+    ${'#ABCDEF'} | ${0.2}  | ${'rgba(171,205,239,0.2)'}
+    ${'#FF0000'} | ${0.25} | ${'rgba(255,0,0,0.25)'}
+  `(
+    'should convert hex "$hex" with alpha $alpha to "$expected"',
+    ({ hex, alpha, expected }) => {
+      expect(hexToRgba(hex, alpha)).toBe(expected);
+    }
+  );
+
+  it.each`
+    hex         | alpha  | expected
+    ${'FF0000'} | ${1}   | ${'rgba(255,0,0,1)'}
+    ${'00FF00'} | ${0.5} | ${'rgba(0,255,0,0.5)'}
+    ${'0000FF'} | ${0}   | ${'rgba(0,0,255,0)'}
+    ${'FFFFFF'} | ${0.8} | ${'rgba(255,255,255,0.8)'}
+    ${'000000'} | ${0.3} | ${'rgba(0,0,0,0.3)'}
+    ${'123456'} | ${0.7} | ${'rgba(18,52,86,0.7)'}
+    ${'ABCDEF'} | ${0.2} | ${'rgba(171,205,239,0.2)'}
+  `(
+    'should convert hex without # "$hex" with alpha $alpha to "$expected"',
+    ({ hex, alpha, expected }) => {
+      expect(hexToRgba(hex, alpha)).toBe(expected);
+    }
+  );
+
+  it('should handle lowercase hex values', () => {
+    expect(hexToRgba('#ff0000', 1)).toBe('rgba(255,0,0,1)');
+    expect(hexToRgba('#abcdef', 0.5)).toBe('rgba(171,205,239,0.5)');
+  });
+
+  it('should handle mixed case hex values', () => {
+    expect(hexToRgba('#Ff0000', 1)).toBe('rgba(255,0,0,1)');
+    expect(hexToRgba('#AbCdEf', 0.5)).toBe('rgba(171,205,239,0.5)');
+  });
+
+  it('should handle edge case alpha values', () => {
+    expect(hexToRgba('#000000', 0)).toBe('rgba(0,0,0,0)');
+    expect(hexToRgba('#FFFFFF', 1)).toBe('rgba(255,255,255,1)');
+  });
+
+  it('should handle decimal alpha values', () => {
+    expect(hexToRgba('#FF0000', 0.123)).toBe('rgba(255,0,0,0.123)');
+    expect(hexToRgba('#00FF00', 0.999)).toBe('rgba(0,255,0,0.999)');
+  });
+
+  describe('3-character hex codes', () => {
+    it.each`
+      hex       | alpha   | expected
+      ${'#fff'} | ${1}    | ${'rgba(255,255,255,1)'}
+      ${'#000'} | ${0.5}  | ${'rgba(0,0,0,0.5)'}
+      ${'#f00'} | ${0.8}  | ${'rgba(255,0,0,0.8)'}
+      ${'#0f0'} | ${0.3}  | ${'rgba(0,255,0,0.3)'}
+      ${'#00f'} | ${0.7}  | ${'rgba(0,0,255,0.7)'}
+      ${'#abc'} | ${0.2}  | ${'rgba(170,187,204,0.2)'}
+      ${'#123'} | ${0.25} | ${'rgba(17,34,51,0.25)'}
+    `(
+      'should convert 3-char hex "$hex" with alpha $alpha to "$expected"',
+      ({ hex, alpha, expected }) => {
+        expect(hexToRgba(hex, alpha)).toBe(expected);
+      }
+    );
+
+    it.each`
+      hex      | alpha  | expected
+      ${'fff'} | ${1}   | ${'rgba(255,255,255,1)'}
+      ${'000'} | ${0.5} | ${'rgba(0,0,0,0.5)'}
+      ${'f00'} | ${0.8} | ${'rgba(255,0,0,0.8)'}
+      ${'0f0'} | ${0.3} | ${'rgba(0,255,0,0.3)'}
+      ${'00f'} | ${0.7} | ${'rgba(0,0,255,0.7)'}
+      ${'abc'} | ${0.2} | ${'rgba(170,187,204,0.2)'}
+    `(
+      'should convert 3-char hex without # "$hex" with alpha $alpha to "$expected"',
+      ({ hex, alpha, expected }) => {
+        expect(hexToRgba(hex, alpha)).toBe(expected);
+      }
+    );
+
+    it('should handle lowercase 3-char hex values', () => {
+      expect(hexToRgba('#fff', 1)).toBe('rgba(255,255,255,1)');
+      expect(hexToRgba('#abc', 0.5)).toBe('rgba(170,187,204,0.5)');
+    });
+
+    it('should handle mixed case 3-char hex values', () => {
+      expect(hexToRgba('#Ff0', 1)).toBe('rgba(255,255,0,1)');
+      expect(hexToRgba('#AbC', 0.5)).toBe('rgba(170,187,204,0.5)');
+    });
+  });
+
+  describe('validation', () => {
+    it('should throw error for invalid input types', () => {
+      expect(() => hexToRgba(123 as any, 0.5)).toThrow(
+        'hexToRgba: hex must be a string and alpha must be a number'
+      );
+      expect(() => hexToRgba('#fff', '0.5' as any)).toThrow(
+        'hexToRgba: hex must be a string and alpha must be a number'
+      );
+    });
+
+    it('should throw error for alpha values outside 0-1 range', () => {
+      expect(() => hexToRgba('#fff', -0.1)).toThrow(
+        'hexToRgba: alpha must be between 0 and 1'
+      );
+      expect(() => hexToRgba('#fff', 1.1)).toThrow(
+        'hexToRgba: alpha must be between 0 and 1'
+      );
+    });
+
+    it('should throw error for invalid hex formats', () => {
+      expect(() => hexToRgba('invalid', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('#gggggg', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('#ff', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('#ffffff00', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+      expect(() => hexToRgba('', 0.5)).toThrow(
+        'hexToRgba: hex must be a valid 3 or 6 character hex color'
+      );
+    });
+
+    it('should accept valid alpha boundary values', () => {
+      expect(() => hexToRgba('#fff', 0)).not.toThrow();
+      expect(() => hexToRgba('#fff', 1)).not.toThrow();
+    });
+  });
+});
+
+describe('dimHex', () => {
+  it.each`
+    hex          | surface      | amount | expected
+    ${'#FF0000'} | ${'#FFFFFF'} | ${0.5} | ${'#ff8080'}
+    ${'#000000'} | ${'#FFFFFF'} | ${0.5} | ${'#808080'}
+    ${'#FF0000'} | ${'#FFFFFF'} | ${0}   | ${'#ff0000'}
+    ${'#FF0000'} | ${'#FFFFFF'} | ${1}   | ${'#ffffff'}
+    ${'FF0000'}  | ${'FFFFFF'}  | ${0.5} | ${'#ff8080'}
+    ${'#fff'}    | ${'#000'}    | ${0.5} | ${'#808080'}
+    ${'fff'}     | ${'000'}     | ${0.5} | ${'#808080'}
+  `(
+    'should dim hex "$hex" with surface "$surface" by amount $amount to "$expected"',
+    ({ hex, surface, amount, expected }) => {
+      expect(dimHex(hex, surface, amount)).toBe(expected);
+    }
+  );
+
+  it('should use default parameters', () => {
+    expect(dimHex('#000000', '#ffffff')).toBe('#999999');
+  });
+
+  it('should throw error for invalid input types', () => {
+    // @ts-expect-error: Invalid param type
+    expect(() => dimHex(123, '#fff', 0.5)).toThrow(
+      'dimHex: hex and surface must be strings and amount must be a number'
+    );
+    // @ts-expect-error: Invalid param type
+    expect(() => dimHex('#fff', 123, 0.5)).toThrow(
+      'dimHex: hex and surface must be strings and amount must be a number'
+    );
+    // @ts-expect-error: Invalid param type
+    expect(() => dimHex('#fff', '#fff', '0.5')).toThrow(
+      'dimHex: hex and surface must be strings and amount must be a number'
+    );
+  });
+
+  it('should throw error for amount values outside 0-1 range', () => {
+    expect(() => dimHex('#fff', '#fff', -0.1)).toThrow(
+      'dimHex: amount must be between 0 and 1'
+    );
+    expect(() => dimHex('#fff', '#fff', 1.1)).toThrow(
+      'dimHex: amount must be between 0 and 1'
+    );
+  });
+
+  it('should throw error for invalid hex formats', () => {
+    expect(() => dimHex('invalid', '#fff', 0.5)).toThrow(
+      'dimHex: hex must be a valid 3 or 6 character hex color'
+    );
+    expect(() => dimHex('#gggggg', '#fff', 0.5)).toThrow(
+      'dimHex: hex must be a valid 3 or 6 character hex color'
+    );
+    expect(() => dimHex('#ff', '#fff', 0.5)).toThrow(
+      'dimHex: hex must be a valid 3 or 6 character hex color'
+    );
+  });
+
+  it('should throw error for invalid surface formats', () => {
+    expect(() => dimHex('#fff', 'invalid', 0.5)).toThrow(
+      'dimHex: surface must be a valid 3 or 6 character hex color'
+    );
+    expect(() => dimHex('#fff', '#gggggg', 0.5)).toThrow(
+      'dimHex: surface must be a valid 3 or 6 character hex color'
+    );
+    expect(() => dimHex('#fff', '#ff', 0.5)).toThrow(
+      'dimHex: surface must be a valid 3 or 6 character hex color'
+    );
+  });
+});

package/src/utils/helpers.ts

@@ -31,14 +31,122 @@ export function omit<O, T extends keyof O>(keys: T[], obj: O): Omit<O, T> {
 }
 
 export function hexToRgba(hex: string, a: number) {
-  const arrBuff = new ArrayBuffer(4);
-  const vw = new DataView(arrBuff);
-  vw.setUint32(0, parseInt(hex, 16), false);
-  const arrByte = new Uint8Array(arrBuff);
-  const [r, g, b] = arrByte;
+  // 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
+  const 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)
+  const normalizedHex =
+    cleanHex.length === 3
+      ? cleanHex
+          .split('')
+          .map((char) => char + char)
+          .join('')
+      : cleanHex;
+
+  // Parse hex values
+  const r = parseInt(normalizedHex.substring(0, 2), 16);
+  const g = parseInt(normalizedHex.substring(2, 4), 16);
+  const b = parseInt(normalizedHex.substring(4, 6), 16);
+
   return `rgba(${r},${g},${b},${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
+ */
+const DEFAULT_DIM_AMOUNT = 0.6;
+export function dimHex(
+  hex: string,
+  surface: string,
+  amount = DEFAULT_DIM_AMOUNT
+): string {
+  // 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
+  const cleanHex = hex.replace(/^#/, '');
+  const 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)
+  const normalizedHex =
+    cleanHex.length === 3
+      ? cleanHex
+          .split('')
+          .map((char) => char + char)
+          .join('')
+      : cleanHex;
+
+  const normalizedSurface =
+    cleanSurface.length === 3
+      ? cleanSurface
+          .split('')
+          .map((char) => char + char)
+          .join('')
+      : cleanSurface;
+
+  // Parse hex values
+  const r = parseInt(normalizedHex.substring(0, 2), 16);
+  const g = parseInt(normalizedHex.substring(2, 4), 16);
+  const b = parseInt(normalizedHex.substring(4, 6), 16);
+
+  const sr = parseInt(normalizedSurface.substring(0, 2), 16);
+  const sg = parseInt(normalizedSurface.substring(2, 4), 16);
+  const sb = parseInt(normalizedSurface.substring(4, 6), 16);
+
+  // Linear interpolation between colors
+  const lerp = (c: number, s: number): number =>
+    Math.round(c * (1 - amount) + s * amount);
+
+  const rr = lerp(r, sr).toString(16).padStart(2, '0');
+  const gg = lerp(g, sg).toString(16).padStart(2, '0');
+  const bb = lerp(b, sb).toString(16).padStart(2, '0');
+
+  return `#${rr}${gg}${bb}`;
+}
+
 export const deepCompareValue = <V>(a: V, b: V): boolean => {
   // Handle strict equality first (handles primitives, null, undefined)
   if (a === b) return true;