yeet

design/components/Button/native/ButtonHooks.native.tsx

@@ -0,0 +1,419 @@
+// Metro module 4605 (f4606).
+import { useMemo, useCallback } from "react";
+import { experimental_createToken, createStyleProperties } from "../../Styles/native/createStyles";
+import { useThemeContext } from "../../../../_bundle/Module3901";
+import Module712 from "../../../../_bundle/Module712";
+import { useToken } from "../../../tokens/native/useToken";
+import * as _ReanimatedRexport from "../../../../modules/reanimated/ReanimatedRexport";
+import { useAnimatedStyle, useSharedValue } from "../../../../modules/reanimated/ReanimatedRexport";
+import * as _spring from "../../../animation/reanimated/spring/spring";
+import * as _springPresets from "../../../animation/reanimated/spring/springPresets";
+import * as _ButtonConstants_native from "./ButtonConstants.native";
+import { MEDIUM_BUTTON_ICON_SIZE, SMALL_BUTTON_ICON_SIZE, LARGE_BUTTON_ICON_SIZE, getButtonDefaultTextVariant } from "./ButtonConstants.native";
+import { useFontScale } from "../../../../modules/screen/native/useFontScale";
+import { getIconSize } from "../../../void/Icon/native/Icon";
+import { TextStyleSheet } from "../../Text/native/Text";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+function $mk74814($env) {
+  return () => {
+    const r6 = $env;
+    const r8 = r6[1];
+    if (r8 == null) {
+      return null;
+    }
+    const r4 = r6[0];
+    if (r4 === "primary") {
+      const r83 = $env.$parent;
+      const WHITE = (0, r83[1])(r83[2][3]).unsafe_rawColors.WHITE;
+      const contrastingColor = (0, r83[0])(r83[2][2]).getContrastingColor(r8, {
+        base: WHITE,
+        contrastRatio: (0, r83[0])(r83[2][2]).WCAGContrastRatios.HighContrastText
+      });
+      const r110 = (0, r83[0])(r83[2][2]).darkenColor(contrastingColor, 0.5);
+      return {
+        backgroundColor: [contrastingColor, r110],
+        borderColor: [contrastingColor, r110],
+        color: WHITE
+      };
+    }
+    if (r4 === "secondary") {
+      const r46 = $env.$parent;
+      const r51 = (0, r46[0])(r46[2][4]);
+      const r53 = r6[2];
+      const isThemeLight3 = r51.isThemeLight(r53);
+      const r58 = (0, r46[0])(r46[2][2]);
+      const backgroundColor = [isThemeLight3 ? r58.setColorOpacity("white", 0.72) : r58.setColorOpacity("white", 0.24), ,];
+      const isThemeLight4 = (0, r46[0])(r46[2][4]).isThemeLight(r53);
+      const r74 = (0, r46[0])(r46[2][2]);
+      backgroundColor[1] = isThemeLight4 ? r74.setColorOpacity("white", 0.62) : r74.setColorOpacity("white", 0.34);
+      return {
+        backgroundColor,
+        borderColor: [r46[4], r46[4]],
+        color: void 0
+      };
+    }
+    if (r4 === "tertiary") {
+      const r5 = $env.$parent;
+      const r16 = (0, r5[0])(r5[2][4]);
+      const r9 = r6[2];
+      const isThemeLight = r16.isThemeLight(r9);
+      const r21 = (0, r5[0])(r5[2][2]);
+      const r10 = isThemeLight ? r21.setColorOpacity(r8, 0.4) : r21.setColorOpacity("white", 0.1);
+      const isThemeLight2 = (0, r5[0])(r5[2][4]).isThemeLight(r9);
+      const r35 = (0, r5[0])(r5[2][2]);
+      return {
+        backgroundColor: [r10, isThemeLight2 ? r35.darkenColor(r10, 0.3) : r35.setColorOpacity("white", 0.2)],
+        borderColor: [r5[4], r5[4]],
+        color: void 0
+      };
+    }
+    return null;
+  };
+}
+function $mk74815($env) {
+  return function n() {
+    const r9 = $env;
+    const r4 = r9[1];
+    const r6 = r4.get() > 0 ? (r4.get() - r9[2]) / r4.get() : 1;
+    const r19 = $env.$parent;
+    const r5 = r19[0];
+    const r20 = r19[2];
+    return {
+      transform: [{
+        scale: r5(r20[7]).withSpring(r5(r20[6]).interpolate(r9[0].get(), [0, 1], [1, r6]), r5(r20[8]).ON_PRESS_SPRING, "animate-always")
+      }]
+    };
+  };
+}
+let c2806_6, c2806_7, c2806_8, c2806_9, c2806_10;
+let env2806 = {};
+const c2806_4 = "rgba(0,0,0,0.001)";
+const c2806_5 = experimental_createToken(() => "#161CBB");
+c2806_6 = experimental_createToken(() => "#1318A0");
+c2806_7 = {
+  primary: Module712.colors.CONTROL_PRIMARY_TEXT_DEFAULT,
+  "experimental_welcome-secondary": Module712.unsafe_rawColors.WHITE,
+  secondary: Module712.colors.CONTROL_SECONDARY_TEXT_DEFAULT,
+  tertiary: Module712.colors.REDESIGN_BUTTON_TERTIARY_TEXT,
+  destructive: Module712.colors.CONTROL_CRITICAL_PRIMARY_TEXT_DEFAULT,
+  "critical-primary": Module712.colors.CONTROL_CRITICAL_PRIMARY_TEXT_DEFAULT,
+  "critical-secondary": Module712.colors.CONTROL_CRITICAL_SECONDARY_TEXT_DEFAULT,
+  active: Module712.colors.CONTROL_CONNECTED_TEXT_DEFAULT,
+  "primary-overlay": Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT,
+  "secondary-overlay": Module712.colors.CONTROL_OVERLAY_SECONDARY_TEXT_DEFAULT,
+  "experimental_premium-primary": Module712.colors.WHITE,
+  "experimental_premium-basic": Module712.colors.WHITE,
+  "experimental_premium-secondary": Module712.colors.TEXT_BRAND,
+  "icon-only": Module712.colors.CONTROL_ICON_ONLY_ICON_DEFAULT,
+  expressive: Module712.colors.CONTROL_EXPRESSIVE_TEXT_DEFAULT
+};
+const styleProperties = createStyleProperties((a0) => {
+  switch (a0) {
+    case "primary":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_PRIMARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_PRIMARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_PRIMARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_PRIMARY_BORDER_ACTIVE
+      };
+    case "secondary":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_SECONDARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_SECONDARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_SECONDARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_SECONDARY_BORDER_ACTIVE
+      };
+    case "tertiary":
+      return {
+        backgroundInactive: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND,
+        backgroundPressed: Module712.colors.REDESIGN_BUTTON_TERTIARY_PRESSED_BACKGROUND,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "critical-primary":
+    case "destructive":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_CRITICAL_PRIMARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_CRITICAL_PRIMARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_CRITICAL_PRIMARY_BORDER_ACTIVE
+      };
+    case "critical-secondary":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_CRITICAL_SECONDARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_CRITICAL_SECONDARY_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_CRITICAL_SECONDARY_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_CRITICAL_SECONDARY_BORDER_ACTIVE
+      };
+    case "active":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_CONNECTED_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_CONNECTED_BACKGROUND_ACTIVE,
+        borderInactive: Module712.colors.CONTROL_CONNECTED_BORDER_DEFAULT,
+        borderPressed: Module712.colors.CONTROL_CONNECTED_BORDER_ACTIVE
+      };
+    case "experimental_premium-secondary":
+    case "primary-overlay":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_ACTIVE,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "secondary-overlay":
+      return {
+        backgroundInactive: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
+        backgroundPressed: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_ACTIVE,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "experimental_welcome-secondary":
+      return {
+        backgroundInactive: c2806_5,
+        backgroundPressed: c2806_6,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "experimental_premium-primary":
+    case "experimental_premium-basic":
+      return {
+        backgroundInactive: c2806_4,
+        backgroundPressed: Module712.colors.REDESIGN_BUTTON_PREMIUM_PRIMARY_PRESSED_BACKGROUND,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "icon-only":
+      return {
+        backgroundInactive: c2806_4,
+        backgroundPressed: Module712.colors.CONTROL_ICON_ONLY_BACKGROUND_ACTIVE,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    case "expressive":
+      return {
+        backgroundInactive: c2806_4,
+        backgroundPressed: c2806_4,
+        borderInactive: c2806_4,
+        borderPressed: c2806_4
+      };
+    default:
+      return void 0;
+  }
+});
+c2806_8 = styleProperties;
+c2806_9 = {
+  code: "function ButtonHooksNativeTsx1(){const{themedStyles,colors,interpolateColor,pressed}=this.__closure;var _themedStyles$backgro,_themedStyles,_themedStyles$borderC,_themedStyles2;const backgroundColor=(_themedStyles$backgro=(_themedStyles=themedStyles)===null||_themedStyles===void 0?void 0:_themedStyles.backgroundColor)!==null&&_themedStyles$backgro!==void 0?_themedStyles$backgro:[colors.backgroundInactive,colors.backgroundPressed];const borderColor=(_themedStyles$borderC=(_themedStyles2=themedStyles)===null||_themedStyles2===void 0?void 0:_themedStyles2.borderColor)!==null&&_themedStyles$borderC!==void 0?_themedStyles$borderC:[colors.borderInactive,colors.borderPressed];return{backgroundColor:interpolateColor(pressed.get(),[0,1],backgroundColor),borderColor:interpolateColor(pressed.get(),[0,1],borderColor)};}"
+};
+c2806_10 = {
+  code: "function ButtonHooksNativeTsx2(){const{width,scaleAmountInPx,withSpring,interpolate,pressed,ON_PRESS_SPRING}=this.__closure;const scale=width.get()>0?(width.get()-scaleAmountInPx)/width.get():1;return{transform:[{scale:withSpring(interpolate(pressed.get(),[0,1],[1,scale]),ON_PRESS_SPRING,'animate-always')}]};}"
+};
+export const SAFE_TRANSPARENT_COLOR = "rgba(0,0,0,0.001)";
+export function useProfileThemedButtonStyles(a0) {
+  let env14345;
+  const r1 = env14345 = {
+    $parent: env2806
+  };
+  env14345[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14345[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14345[2] = theme;
+  return useMemo($mk74814(r1), [theme, primaryColor, a0]);
+}
+export function useForegroundColor(a0) {
+  return useToken(c2806_7[a0]);
+}
+export { styleProperties as useButtonColorStyles };
+export function useButtonTextColorStyles(a0) {
+  let env14346;
+  const r5 = env14346 = {
+    $parent: env2806
+  };
+  env14346[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14346[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14346[2] = theme;
+  const memo2 = useMemo($mk74814(r5), [theme, primaryColor, a0]);
+  const token = useToken(c2806_7[a0]);
+  let color = memo2?.color;
+  if (color == null) {
+    color = token;
+  }
+  return {
+    color
+  };
+}
+export function useIconTintStyles(a0) {
+  let env14348;
+  const r5 = env14348 = {
+    $parent: env2806
+  };
+  env14348[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14348[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14348[2] = theme;
+  const memo2 = useMemo($mk74814(r5), [theme, primaryColor, a0]);
+  const token = useToken(c2806_7[a0]);
+  let tintColor = memo2?.color;
+  if (tintColor == null) {
+    tintColor = token;
+  }
+  return {
+    tintColor
+  };
+}
+export function useGradientPillStyles(a0) {
+  return {
+    borderColor: c2806_8(a0).borderInactive
+  };
+}
+export function useButtonPillStyles(a0, a1) {
+  let env14350;
+  const r3 = env14350 = {
+    $parent: env2806
+  };
+  env14350[0] = a0;
+  const themeContext = useThemeContext();
+  const primaryColor = themeContext.primaryColor;
+  env14350[1] = primaryColor;
+  const theme = themeContext.theme;
+  env14350[2] = theme;
+  const memo = useMemo($mk74814(r3), [theme, primaryColor, a0]);
+  const colors = c2806_8(a0);
+  let c14349_2 = colors;
+  const r25 = function() {
+    let r12 = memo?.backgroundColor;
+    if (r12 == null) {
+      r12 = [c14349_2.backgroundInactive, c14349_2.backgroundPressed];
+    }
+    let r8 = memo?.borderColor;
+    if (r8 == null) {
+      r8 = [c14349_2.borderInactive, c14349_2.borderPressed];
+    }
+    return {
+      backgroundColor: _ReanimatedRexport.interpolateColor(a1.get(), [0, 1], r12),
+      borderColor: _ReanimatedRexport.interpolateColor(a1.get(), [0, 1], r8)
+    };
+  };
+  r25.__closure = {
+    themedStyles: memo,
+    colors,
+    interpolateColor: _ReanimatedRexport.interpolateColor,
+    pressed: a1
+  };
+  r25.__workletHash = 2383933325137;
+  r25.__initData = c2806_9;
+  return useAnimatedStyle(r25);
+}
+export function useButtonScaleStyles(a0, a1, a2) {
+  let env14347;
+  const r2 = env14347 = {
+    $parent: env2806
+  };
+  env14347[0] = a0;
+  env14347[1] = a1;
+  env14347[2] = a2;
+  const r13 = $mk74815(r2);
+  r13.__closure = {
+    width: a1,
+    scaleAmountInPx: a2,
+    withSpring: _spring.withSpring,
+    interpolate: _ReanimatedRexport.interpolate,
+    pressed: a0,
+    ON_PRESS_SPRING: _springPresets.ON_PRESS_SPRING
+  };
+  r13.__workletHash = 17256006845494;
+  r13.__initData = c2806_10;
+  return useAnimatedStyle(r13);
+}
+export function useButtonPressAnimationProps(a0, scaleAmountInPx = 8, r14) {
+  let c14351_0 = r14;
+  const r6 = arguments[3];
+  let c14351_1 = r6;
+  const r5 = arguments[4];
+  let c14351_2 = r5;
+  let pressed = useSharedValue(0);
+  if (a0 != null) {
+    pressed = a0;
+  }
+  let env14352;
+  let c14351_3 = pressed;
+  const sharedValue = useSharedValue(0);
+  const r25 = {
+    onPressIn: useCallback((a0) => {
+      c14351_3.set(1);
+      if (c14351_1 != null) {
+        c14351_1(a0);
+      }
+    }, [pressed, r6]),
+    onPressOut: useCallback((a0) => {
+      c14351_3.set(0);
+      if (c14351_2 != null) {
+        c14351_2(a0);
+      }
+    }, [pressed, r5]),
+    onLayout: useCallback((a0) => {
+      sharedValue.set(a0.nativeEvent.layout.width);
+      if (c14351_0 != null) {
+        c14351_0(a0);
+      }
+    }, [sharedValue, r14]),
+    style: null
+  };
+  const r34 = env14352 = {
+    $parent: env2806
+  };
+  env14352[0] = pressed;
+  env14352[1] = sharedValue;
+  env14352[2] = scaleAmountInPx;
+  const r38 = $mk74815(r34);
+  r38.__closure = {
+    width: sharedValue,
+    scaleAmountInPx,
+    withSpring: _spring.withSpring,
+    interpolate: _ReanimatedRexport.interpolate,
+    pressed,
+    ON_PRESS_SPRING: _springPresets.ON_PRESS_SPRING
+  };
+  r38.__workletHash = 17256006845494;
+  r38.__initData = c2806_10;
+  r25.style = useAnimatedStyle(r38);
+  return r25;
+}
+export const useIconSizeStyles = function(a0) {
+  let r8 = arguments[1];
+  if (r8 === void 0) {
+    r8 = false;
+  }
+  let c14353_1 = r8;
+  let r7 = arguments[2];
+  if (r7 === void 0) {
+    r7 = _ButtonConstants_native.BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER;
+  }
+  const BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER = r7;
+  const fontScale = useFontScale();
+  return useMemo(() => {
+    const iconSize = getIconSize(MEDIUM_BUTTON_ICON_SIZE);
+    let width = a0 === "sm" ? getIconSize(SMALL_BUTTON_ICON_SIZE) : a0 === "lg" ? getIconSize(LARGE_BUTTON_ICON_SIZE) : iconSize;
+    if (c14353_1) {
+      width = width;
+      if (fontScale > 1) {
+        const r39 = TextStyleSheet[getButtonDefaultTextVariant(a0)];
+        const r44 = isAndroid() ? r39.fontSize : r39.lineHeight;
+        width = width;
+        if (width != null) {
+          width = r44 != null ? Math.max(width, r44 * Math.min(fontScale, BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER)) : width;
+        }
+      }
+    }
+    return {
+      width,
+      height: width
+    };
+  }, [a0, r8, BUTTON_DEFAULT_MAX_FONT_SIZE_MULTIPLIER, fontScale]);
+};