@oxy.so/services 11.2.0-oxy-one.4 → 11.2.0-oxy-one.6

package/src/ui/components/styles/overlay.tsx

@@ -1,96 +0,0 @@
-import { Animated } from 'react-native';
-
-// Simple hex color manipulation without color package
-const hexToRgb = (hex: string): [number, number, number] => {
-  const r = Number.parseInt(hex.slice(1, 3), 16);
-  const g = Number.parseInt(hex.slice(3, 5), 16);
-  const b = Number.parseInt(hex.slice(5, 7), 16);
-  return [r, g, b];
-};
-
-const rgbToHex = (r: number, g: number, b: number): string => {
-  return `#${[r, g, b]
-    .map((x) => {
-      const hex = Math.round(x).toString(16);
-      return hex.length === 1 ? `0${hex}` : hex;
-    })
-    .join('')}`;
-};
-
-const mixColors = (color1: string, color2: string, ratio: number): string => {
-  const [r1, g1, b1] = hexToRgb(color1);
-  const [r2, g2, b2] = hexToRgb(color2);
-  const r = r1 + (r2 - r1) * ratio;
-  const g = g1 + (g2 - g1) * ratio;
-  const b = b1 + (b2 - b1) * ratio;
-  return rgbToHex(r, g, b);
-};
-
-export const isAnimatedValue = (
-  it: number | string | Animated.AnimatedInterpolation<number | string>,
-): it is Animated.Value => it instanceof Animated.Value;
-
-// Overloaded signatures so each call site gets the right return type
-// without the conditional-type narrowing that TS cannot infer inside the
-// implementation body.
-function overlay(elevation: number, surfaceColor?: string): string;
-function overlay(
-  elevation: Animated.Value,
-  surfaceColor?: string,
-): Animated.AnimatedInterpolation<number | string>;
-function overlay(
-  elevation: Animated.Value | number,
-  surfaceColor = '#121212',
-): string | Animated.AnimatedInterpolation<number | string> {
-  if (isAnimatedValue(elevation)) {
-    const inputRange = [0, 1, 2, 3, 8, 24];
-
-    return elevation.interpolate({
-      inputRange,
-      outputRange: inputRange.map((e) => calculateColor(surfaceColor, e)),
-    });
-  }
-
-  return calculateColor(surfaceColor, elevation);
-}
-
-export default overlay;
-
-function calculateColor(surfaceColor: string, elevation = 1) {
-  let overlayTransparency: number;
-  if (elevation >= 1 && elevation <= 24) {
-    overlayTransparency = elevationOverlayTransparency[elevation];
-  } else if (elevation > 24) {
-    overlayTransparency = elevationOverlayTransparency[24];
-  } else {
-    overlayTransparency = elevationOverlayTransparency[1];
-  }
-  return mixColors(surfaceColor, '#FFFFFF', overlayTransparency * 0.01);
-}
-
-const elevationOverlayTransparency: Record<string, number> = {
-  1: 5,
-  2: 7,
-  3: 8,
-  4: 9,
-  5: 10,
-  6: 11,
-  7: 11.5,
-  8: 12,
-  9: 12.5,
-  10: 13,
-  11: 13.5,
-  12: 14,
-  13: 14.25,
-  14: 14.5,
-  15: 14.75,
-  16: 15,
-  17: 15.12,
-  18: 15.24,
-  19: 15.36,
-  20: 15.48,
-  21: 15.6,
-  22: 15.72,
-  23: 15.84,
-  24: 16,
-};

package/src/ui/components/styles/shadow.tsx

@@ -1,131 +0,0 @@
-import { Animated, Platform, type ShadowStyleIOS, type ViewStyle } from 'react-native';
-
-const SHADOW_COLOR = '#000000';
-const SHADOW_OPACITY = 0.24;
-const MD3_SHADOW_OPACITY = 0.3;
-const MD3_SHADOW_COLOR = '#000000';
-
-export default function shadow(
-  elevation: number | Animated.Value = 0,
-  isV3 = false,
-): ViewStyle | ShadowStyleIOS {
-  return isV3 ? v3Shadow(elevation) : v2Shadow(elevation);
-}
-
-function v2Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowStyleIOS {
-  if (elevation instanceof Animated.Value) {
-    const inputRange = [0, 1, 2, 3, 8, 24];
-
-    if (Platform.OS === 'ios') {
-      return {
-        shadowColor: SHADOW_COLOR,
-        shadowOffset: {
-          width: 0,
-          height: elevation.interpolate({
-            inputRange,
-            outputRange: [0, 0.5, 0.75, 2, 7, 23],
-          }),
-        },
-        shadowOpacity: elevation.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, SHADOW_OPACITY],
-          extrapolate: 'clamp',
-        }),
-        shadowRadius: elevation.interpolate({
-          inputRange,
-          outputRange: [0, 0.75, 1.5, 3, 8, 24],
-        }),
-      } as unknown as ShadowStyleIOS;
-    }
-    return {
-      elevation: elevation.interpolate({
-        inputRange,
-        outputRange: [0, 1, 2, 3, 8, 24],
-      }) as unknown as number,
-    };
-  }
-  if (elevation === 0) {
-    return {};
-  }
-
-  let height: number;
-  let radius: number;
-  switch (elevation) {
-    case 1:
-      height = 0.5;
-      radius = 0.75;
-      break;
-    case 2:
-      height = 0.75;
-      radius = 1.5;
-      break;
-    default:
-      height = elevation - 1;
-      radius = elevation;
-  }
-
-  if (Platform.OS === 'ios') {
-    return {
-      shadowColor: SHADOW_COLOR,
-      shadowOffset: {
-        width: 0,
-        height,
-      },
-      shadowOpacity: SHADOW_OPACITY,
-      shadowRadius: radius,
-    } as ShadowStyleIOS;
-  }
-  return {
-    elevation: elevation,
-  };
-}
-
-function v3Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowStyleIOS {
-  const inputRange = [0, 1, 2, 3, 4, 5];
-  const shadowHeight = [0, 1, 2, 4, 6, 8];
-  const shadowRadius = [0, 3, 6, 8, 10, 12];
-
-  if (elevation instanceof Animated.Value) {
-    if (Platform.OS === 'ios') {
-      return {
-        shadowColor: MD3_SHADOW_COLOR,
-        shadowOffset: {
-          width: 0,
-          height: elevation.interpolate({
-            inputRange,
-            outputRange: shadowHeight,
-          }),
-        },
-        shadowOpacity: elevation.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0, MD3_SHADOW_OPACITY],
-          extrapolate: 'clamp',
-        }),
-        shadowRadius: elevation.interpolate({
-          inputRange,
-          outputRange: shadowRadius,
-        }),
-      } as unknown as ShadowStyleIOS;
-    }
-    return {
-      elevation: elevation.interpolate({
-        inputRange,
-        outputRange: [0, 1, 2, 3, 4, 5],
-      }) as unknown as number,
-    };
-  }
-  if (Platform.OS === 'ios') {
-    return {
-      shadowColor: MD3_SHADOW_COLOR,
-      shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,
-      shadowOffset: {
-        width: 0,
-        height: shadowHeight[elevation] || 0,
-      },
-      shadowRadius: shadowRadius[elevation] || 0,
-    } as ShadowStyleIOS;
-  }
-  return {
-    elevation: elevation || 0,
-  };
-}

package/src/ui/constants/spacing.ts

@@ -1,44 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-/**
- * Reusable spacing constants for screens across the codebase
- * These values ensure consistent padding and gaps across all screens
- */
-
-// Screen padding - used for all bottom sheet screens
-export const SCREEN_PADDING_HORIZONTAL = 16;
-export const SCREEN_PADDING_VERTICAL = 16;
-export const SCREEN_PADDING_TOP = 24; // Top padding for screen content (accounts for handle)
-
-// Section gaps
-export const SECTION_GAP = 24;
-export const SECTION_GAP_LARGE = 32;
-
-// Component gaps
-export const COMPONENT_GAP = 12;
-export const COMPONENT_GAP_SMALL = 8;
-
-// Header padding
-export const HEADER_PADDING_TOP_OVERVIEW = 38;
-export const HEADER_PADDING_TOP_SETTINGS = 40;
-
-/**
- * Reusable screen content style for all bottom sheet screens
- * Use this for ScrollView contentContainerStyle to ensure consistent padding
- */
-export const screenContentStyle = {
-  paddingHorizontal: SCREEN_PADDING_HORIZONTAL,
-  paddingVertical: SCREEN_PADDING_VERTICAL,
-  paddingTop: SCREEN_PADDING_TOP,
-  paddingBottom: SCREEN_PADDING_VERTICAL,
-};
-
-/**
- * Reusable screen content style for screens that need custom top padding
- */
-export const createScreenContentStyle = (topPadding?: number) => ({
-  paddingHorizontal: SCREEN_PADDING_HORIZONTAL,
-  paddingVertical: SCREEN_PADDING_VERTICAL,
-  paddingTop: topPadding ?? SCREEN_PADDING_TOP,
-  paddingBottom: SCREEN_PADDING_VERTICAL,
-});