@momo-kits/foundation 0.168.1-beta.25 → 0.168.1-beta.26

package/Application/BottomTab/BottomTabBar.tsx

@@ -13,7 +13,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Colors, Radius, Spacing } from '../../Consts';
+import { Colors, Spacing } from '../../Consts';
 import { Icon } from '../../Icon';
 import { Text } from '../../Text';
 import { FloatingButtonProps } from '../types';
@@ -54,27 +54,23 @@ const getSystemIndicatorHeight = (bottomInset: number) =>
   );
 
 /**
- * center action press: the button shrinks while held and its label turns active
- * (label in a Background/primary pill, white text)
+ * center action press: the button shrinks while held; the label stays plain text
  */
 const useCenterActionPress = () => {
-  const [pressed, setPressed] = useState(false);
   const scale = useSharedValue(1);
   const buttonStyle = useAnimatedStyle(() => ({
     transform: [{ scale: scale.value }],
   }));
   const onPressIn = () => {
-    setPressed(true);
     scale.value = withTiming(
       TabBarMotion.ctaPressedScale,
       TabBarMotion.ctaPress,
     );
   };
   const onPressOut = () => {
-    setPressed(false);
     scale.value = withTiming(1, TabBarMotion.ctaPress);
   };
-  return { pressed, buttonStyle, onPressIn, onPressOut };
+  return { buttonStyle, onPressIn, onPressOut };
 };
 
 /**
@@ -87,14 +83,13 @@ const CenterAction: React.FC<{
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
-  const { icon, label, onPress } = floatingButton;
-  const { pressed, buttonStyle, onPressIn, onPressOut } =
-    useCenterActionPress();
+  const { icon, label, onPress, labelContent } = floatingButton;
+  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
   const labelText = (
     <Text
       numberOfLines={1}
       typography={'label_s_medium'}
-      color={pressed ? Colors.black_01 : theme.colors.text.secondary}
+      color={theme.colors.text.secondary}
     >
       {label}
     </Text>
@@ -127,17 +122,17 @@ const CenterAction: React.FC<{
             icon
           )}
         </Animated.View>
-        <View
-          style={[
-            styles.ctaLabel,
-            pressed && { backgroundColor: theme.colors.primary },
-          ]}
-        >
+        <View style={styles.ctaLabel}>
           {fixedFontScale ? (
             <FixedScaleText>{labelText}</FixedScaleText>
           ) : (
             labelText
           )}
+          {labelContent && (
+            <View pointerEvents={'none'} style={styles.ctaLabelOverlay}>
+              {labelContent}
+            </View>
+          )}
         </View>
       </Pressable>
     </View>
@@ -326,11 +321,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  // custom label content over the label text, centered and unclipped
+  ctaLabelOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   ctaLabel: {
     maxWidth: TabBarMetrics.ctaSlotWidth,
     minHeight: TabBarMetrics.ctaLabelHeight,
     paddingHorizontal: Spacing.XXS,
-    borderRadius: Radius.XL,
     justifyContent: 'center',
   },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },

package/Application/BottomTab/DuoTabBar.tsx

@@ -25,7 +25,7 @@ import { CurvedContainer } from './CurvedContainer';
 import { CTA_SHADOW, getHorizontalBarWidth, TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
 import { FixedScaleText } from './TabBarIcon';
-import { usePressLift } from './useLiquidSelection';
+import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 
 type Props = BottomTabBarProps & {
@@ -120,8 +120,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
   floatingButton,
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const { pressed, buttonStyle, onPressIn, onPressOut } =
-    useCenterActionPress();
+  const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
   return (
     <Pressable
       accessibilityRole={'button'}
@@ -140,21 +139,21 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
       >
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
-      <View
-        style={[
-          styles.railCtaLabel,
-          pressed && { backgroundColor: theme.colors.primary },
-        ]}
-      >
+      <View style={styles.railCtaLabel}>
         <FixedScaleText>
           <Text
             numberOfLines={1}
             typography={'label_xs_medium'}
-            color={pressed ? Colors.black_01 : theme.colors.text.secondary}
+            color={theme.colors.text.secondary}
           >
             {floatingButton.label}
           </Text>
         </FixedScaleText>
+        {floatingButton.labelContent && (
+          <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
+            {floatingButton.labelContent}
+          </View>
+        )}
       </View>
     </Pressable>
   );
@@ -337,9 +336,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     gap: TabBarMetrics.railCtaLabelGap,
   },
+  // custom label content over the label text, centered and unclipped
+  railCtaLabelOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   railCtaLabel: {
     paddingHorizontal: Spacing.XS,
-    borderRadius: Radius.XL,
   },
   railCtaButton: {
     boxShadow: CTA_SHADOW,

package/Application/BottomTab/index.tsx

@@ -1,4 +1,7 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import {
+  BottomTabNavigationOptions,
+  createBottomTabNavigator,
+} from '@react-navigation/bottom-tabs';
 import {
   NavigationContainer,
   NavigationIndependentTree,
@@ -12,12 +15,15 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import { NativeModules, Platform, StatusBar, StyleSheet } from 'react-native';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import {
+  Easing,
+  NativeModules,
+  Platform,
+  StatusBar,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import { Icon } from '../../Icon';
 import StackScreen from '../StackScreen';
 import { BottomTabProps } from '../types';
@@ -33,6 +39,31 @@ import { useScreenLayout } from '../../Layout';
 import { getHeaderRowOptions } from '../../Layout/utils';
 
 const Tab = createBottomTabNavigator();
+
+// the tab screens slide in index order over 280ms, CSS `ease`
+const TAB_SWITCH_SPEC = {
+  animation: 'timing' as const,
+  config: { duration: 280, easing: Easing.bezier(0.25, 0.1, 0.25, 1) },
+};
+
+/**
+ * scene progress is -1 for tabs before the active one, 1 for tabs after it: they wait a full
+ * width off screen on their side
+ */
+const getTabSlide =
+  (width: number): BottomTabNavigationOptions['sceneStyleInterpolator'] =>
+  ({ current }) => ({
+    sceneStyle: {
+      transform: [
+        {
+          translateX: current.progress.interpolate({
+            inputRange: [-1, 0, 1],
+            outputRange: [-width, 0, width],
+          }),
+        },
+      ],
+    },
+  });
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<any> = ({ route, navigation }) => {
@@ -41,10 +72,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   const { nested, options, screen, initialParams } = route?.params;
   const headerStyleOptions = getHeaderRowOptions(useScreenLayout());
 
-  const opacityValue = 0.3;
-  const scaleValue = 0.97;
-  const opacity = useSharedValue(opacityValue);
-  const scale = useSharedValue(scaleValue);
   const screenName = screen?.name || screen?.type?.name || 'Invalid';
   const { isBackgroundToForeground } = useAppState();
   // the floating tab bar covers the bottom of the tab: pad the content unless a Screen in it
@@ -57,11 +84,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   );
   const tabInsetStyle = { paddingBottom: insetClaimed ? 0 : tabBarInset };
 
-  const tabAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: opacity.value,
-    transform: [{ scale: scale.value }],
-  }));
-
   const onScreenNavigated = (pre: string, current: string) => {
     if (!isBackgroundToForeground) {
       const data: any = {
@@ -91,9 +113,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   useFocusEffect(
     React.useCallback(
       () => {
-        opacity.value = withTiming(1, { duration: 200 });
-        scale.value = withTiming(1, { duration: 200 });
-
         setTimeout(() => {
           navigator?.maxApi?.getDataObserver?.(
             'current_screen',
@@ -105,13 +124,6 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
             },
           );
         }, 100);
-
-        return () => {
-          if (navigation.getState().index !== route?.params.index) {
-            opacity.value = withTiming(opacityValue, { duration: 200 });
-            scale.value = withTiming(scaleValue, { duration: 200 });
-          }
-        };
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [],
@@ -150,9 +162,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
   if (nested) {
     return (
       <BottomTabInsetContext.Provider value={tabInsetValue}>
-        <Animated.View
-          style={[styles.container, tabInsetStyle, tabAnimatedStyle]}
-        >
+        <View style={[styles.container, tabInsetStyle]}>
           <Stack.Navigator screenOptions={headerStyleOptions}>
             <Stack.Screen
               name="Stack"
@@ -166,23 +176,14 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
               options={{ ...getStackOptions() }}
             />
           </Stack.Navigator>
-        </Animated.View>
+        </View>
       </BottomTabInsetContext.Provider>
     );
   }
 
   return (
     <BottomTabInsetContext.Provider value={tabInsetValue}>
-      <Animated.View
-        style={[
-          styles.container,
-          tabInsetStyle,
-          {
-            opacity,
-            transform: [{ scale }],
-          },
-        ]}
-      >
+      <View style={[styles.container, tabInsetStyle]}>
         <NavigationIndependentTree>
           <NavigationContainer>
             <Stack.Navigator screenOptions={headerStyleOptions}>
@@ -200,7 +201,7 @@ const TabScreen: React.FC<any> = ({ route, navigation }) => {
             </Stack.Navigator>
           </NavigationContainer>
         </NavigationIndependentTree>
-      </Animated.View>
+      </View>
     </BottomTabInsetContext.Provider>
   );
 };
@@ -216,6 +217,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
 }) => {
   const { theme, navigator } = useContext(ApplicationContext);
   const { isIPhoneDuo } = useScreenLayout();
+  const { width: windowWidth } = useWindowDimensions();
   const barInset = useDuoTabBarInset();
   // the center action's button rises above the bar, tab content leaves room for it too
   const tabBarInset =
@@ -291,6 +293,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
             headerTransparent: true,
             headerBackground: undefined,
             tabBarLabelPosition: 'below-icon',
+            animation: 'shift',
+            transitionSpec: TAB_SWITCH_SPEC,
+            sceneStyleInterpolator: getTabSlide(windowWidth),
           }}
           tabBar={props =>
             isIPhoneDuo ? (

package/Application/BottomTab/metrics.ts

@@ -34,7 +34,6 @@ const TabBarMetrics = {
   ctaLift: 22,
   ctaLabelGap: Spacing.M,
   ctaLabelHeight: 18,
-  railWidth: 84,
   railContainerWidth: 56,
   railPaddingHorizontal: Spacing.XS,
   railPaddingBottom: Spacing.S,

package/Application/BottomTab/usePressLift.ts

@@ -0,0 +1,32 @@
+import {
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the button grows by a tenth while held
+const PRESSED_SCALE = 1.1;
+
+/**
+ * lift for a single button, e.g. the compressed rail
+ */
+const usePressLift = () => {
+  const reduceMotion = useReducedMotion();
+  const lift = useSharedValue(0);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * (PRESSED_SCALE - 1) }],
+  }));
+  const onPressIn = () => {
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+  const onPressOut = () => {
+    lift.value = withSpring(0, SPRING);
+  };
+  return { style, onPressIn, onPressOut };
+};
+
+export { usePressLift };

package/Application/types.ts

@@ -345,6 +345,11 @@ export type FloatingButtonProps = {
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;
+  /**
+   * Drawn over the label text, which stays, e.g. a Lottie of the label; centered on the
+   * label and unclipped. `icon` takes the button part (inside the 48 button)
+   */
+  labelContent?: React.ReactNode;
 };
 
 export type AnimatedHeader = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.25",
+    "version": "0.168.1-beta.26",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Application/BottomTab/useLiquidSelection.ts

@@ -1,374 +0,0 @@
-import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { Gesture } from 'react-native-gesture-handler';
-import {
-  clamp,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useReducedMotion,
-  useSharedValue,
-  withSequence,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
-import { ApplicationContext } from '../../Context';
-
-type Axis = 'x' | 'y';
-
-type Options = {
-  count: number;
-  // distance between two neighbouring tab centers
-  pitch: number;
-  // position of the first tab's center inside the gesture view
-  firstCenter: number;
-  axis: Axis;
-  index: number;
-  onSelect: (index: number) => void;
-};
-
-const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
-// the lens trails the finger a little while dragged, like the system tab bar
-const DRAG_SPRING = { damping: 24, stiffness: 600, mass: 0.6 };
-const REDUCED_TIMING = { duration: 200 };
-// while pressed the selection bubble grows into a lens past the bar's edges (80x54 to about 96x70)
-const LENS_SCALE_X = 1.2;
-const LENS_SCALE_Y = 1.3;
-// a moving lens stretches along its path and thins across it, eased per frame so the
-// shape follows the speed smoothly
-const STRETCH_PER_POINT = 0.012;
-const MAX_STRETCH = 0.25;
-const STRETCH_EASING = 0.25;
-// once eased below this the lens is round again
-const REST_STRETCH = 0.002;
-// a tap is shorter than the lift: the lens finishes rising, then settles, one smooth pulse
-const TAP_LIFT_DURATION = 120;
-// the bar swells a little under the finger
-const BAR_SWELL = 0.04;
-// the tab the lens lands on pops
-const ICON_POP = 1.15;
-// movement before a press turns into a drag, below it the tab's touchable handles the tap
-const DRAG_SLOP = 10;
-// UIScrollView rubber band constant
-const RUBBER_BAND = 0.55;
-// a cancelled press or a prevented switch: the lens returns to the selected tab after this
-const RESYNC_DELAY = 100;
-
-/**
- * resistance past the first and last tab, the further the finger goes the less the lens follows
- */
-const rubberBand = (value: number, max: number, dimension: number) => {
-  'worklet';
-  const band = (overshoot: number) =>
-    (1 - 1 / ((overshoot * RUBBER_BAND) / dimension + 1)) * dimension;
-  if (value < 0) {
-    return -band(-value);
-  }
-  if (value > max) {
-    return max + band(value - max);
-  }
-  return value;
-};
-
-/**
- * iOS 26 tab bar selection motion, without the glass material:
- * - press lifts the selection into a lens over the pressed tab and swells the bar, release
- *   settles it back (the tab's touchable drives this through pressIn / pressOut)
- * - dragging slides the lens under the finger, stretched by its speed and rubber banded
- *   past the ends, with a tick on each tab it enters; releasing selects the tab under it.
- *   The drag cancels the touchable once it activates, so a press is either a tap or a drag
- */
-const useLiquidSelection = ({
-  count,
-  pitch,
-  firstCenter,
-  axis,
-  index,
-  onSelect,
-}: Options) => {
-  const { navigator } = useContext<any>(ApplicationContext);
-  const reduceMotion = useReducedMotion();
-
-  const offset = useSharedValue(index * pitch);
-  // where the lens is heading, so a re-render doesn't restart a spring already going there
-  const destination = useSharedValue(index * pitch);
-  const selected = useSharedValue(index);
-  const hovered = useSharedValue(index);
-  const lift = useSharedValue(0);
-  const dragging = useSharedValue(false);
-  const stretch = useSharedValue(0);
-  const metrics = useSharedValue({ count, pitch, firstCenter });
-  const measured = useRef(pitch > 0);
-
-  const indexRef = useRef(index);
-  const pitchRef = useRef(pitch);
-  // read through refs so the gesture is never rebuilt mid drag
-  const callbacks = useRef({ onSelect, navigator });
-  indexRef.current = index;
-  pitchRef.current = pitch;
-  callbacks.current = { onSelect, navigator };
-
-  useEffect(() => {
-    metrics.value = { count, pitch, firstCenter };
-  }, [count, pitch, firstCenter, metrics]);
-
-  const move = useCallback(
-    (target: number, velocity: number, config: typeof SPRING) => {
-      'worklet';
-      if (destination.value === target && velocity === 0) {
-        return;
-      }
-      destination.value = target;
-      offset.value = reduceMotion
-        ? withTiming(target, REDUCED_TIMING)
-        : withSpring(target, { ...config, velocity });
-    },
-    [offset, destination, reduceMotion],
-  );
-
-  useEffect(() => {
-    const target = index * pitch;
-    selected.value = index;
-    // snap on first layout so the lens doesn't slide in from the leading edge
-    if (measured.current) {
-      move(target, 0, SPRING);
-    } else {
-      destination.value = target;
-      offset.value = target;
-    }
-    measured.current = pitch > 0;
-  }, [index, pitch, offset, destination, selected, move]);
-
-  useAnimatedReaction(
-    () => offset.value,
-    (current, previous) => {
-      if (previous === null || reduceMotion) {
-        return;
-      }
-      const target = Math.min(
-        Math.abs(current - previous) * STRETCH_PER_POINT,
-        MAX_STRETCH,
-      );
-      // eased both ways: a slow frame (e.g. the spring turning at its overshoot) must not
-      // snap the shape
-      const next = stretch.value + (target - stretch.value) * STRETCH_EASING;
-      stretch.value = next < REST_STRETCH ? 0 : next;
-    },
-    [reduceMotion],
-  );
-
-  /**
-   * returns the lens to the selected tab unless a switch to where it is heading happened
-   */
-  const resync = useCallback(() => {
-    setTimeout(() => {
-      const target = indexRef.current * pitchRef.current;
-      if (!dragging.value && destination.value !== target) {
-        move(target, 0, SPRING);
-      }
-    }, RESYNC_DELAY);
-  }, [destination, dragging, move]);
-
-  const pressIn = (itemIndex: number) => {
-    // the lens heads to the pressed tab, not only the selected one
-    move(itemIndex * pitch, 0, SPRING);
-    if (!reduceMotion) {
-      lift.value = withSpring(1, SPRING);
-    }
-  };
-
-  /**
-   * false when a drag took the press over
-   */
-  const pressOut = () => {
-    // a drag taking over cancels the touchable, the drag owns the lens from there
-    if (dragging.value) {
-      return false;
-    }
-    if (!reduceMotion) {
-      lift.value = withSequence(
-        withTiming(1, { duration: TAP_LIFT_DURATION }),
-        withSpring(0, SPRING),
-      );
-    }
-    // the lens keeps heading to the pressed tab: onPress switches to it, and a cancelled
-    // press brings it back
-    resync();
-    return true;
-  };
-
-  const tick = useCallback(() => {
-    callbacks.current.navigator?.maxApi?.triggerEventVibration?.('light');
-  }, []);
-
-  const select = useCallback(
-    (target: number) => {
-      callbacks.current.onSelect(target);
-      resync();
-    },
-    [resync],
-  );
-
-  const gesture = useMemo(() => {
-    const position = (e: { x: number; y: number }) => {
-      'worklet';
-      return (axis === 'x' ? e.x : e.y) - metrics.value.firstCenter;
-    };
-    const nearest = (value: number) => {
-      'worklet';
-      const { count: tabs, pitch: step } = metrics.value;
-      return step > 0 ? clamp(Math.round(value / step), 0, tabs - 1) : 0;
-    };
-
-    return Gesture.Pan()
-      .minDistance(DRAG_SLOP)
-      .shouldCancelWhenOutside(false)
-      .onStart(e => {
-        dragging.value = true;
-        hovered.value = nearest(position(e));
-        if (!reduceMotion) {
-          lift.value = withSpring(1, SPRING);
-        }
-      })
-      .onUpdate(e => {
-        const { count: tabs, pitch: step } = metrics.value;
-        const value = position(e);
-        const target = nearest(value);
-        if (target !== hovered.value) {
-          hovered.value = target;
-          scheduleOnRN(tick);
-        }
-        const follow = rubberBand(value, (tabs - 1) * step, step);
-        if (reduceMotion) {
-          destination.value = follow;
-          offset.value = follow;
-        } else {
-          move(follow, 0, DRAG_SPRING);
-        }
-      })
-      .onEnd((e, success) => {
-        dragging.value = false;
-        lift.value = reduceMotion ? 0 : withSpring(0, SPRING);
-        const raw = axis === 'x' ? e.velocityX : e.velocityY;
-        const velocity = Number.isFinite(raw) ? raw : 0;
-        if (!success) {
-          move(selected.value * metrics.value.pitch, velocity, SPRING);
-          return;
-        }
-        const target = nearest(position(e));
-        move(target * metrics.value.pitch, velocity, SPRING);
-        scheduleOnRN(select, target);
-      });
-  }, [
-    axis,
-    reduceMotion,
-    offset,
-    destination,
-    selected,
-    hovered,
-    lift,
-    dragging,
-    metrics,
-    move,
-    tick,
-    select,
-  ]);
-
-  const bubbleStyle = useAnimatedStyle(() => {
-    const along = 1 + stretch.value;
-    const across = 1 - stretch.value * 0.5;
-    const lensX = 1 + lift.value * (LENS_SCALE_X - 1);
-    const lensY = 1 + lift.value * (LENS_SCALE_Y - 1);
-    return {
-      transform:
-        axis === 'x'
-          ? [
-              { translateX: offset.value },
-              { scaleX: lensX * along },
-              { scaleY: lensY * across },
-            ]
-          : [
-              { translateY: offset.value },
-              { scaleX: lensX * across },
-              { scaleY: lensY * along },
-            ],
-    };
-  });
-
-  const barStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: 1 + lift.value * BAR_SWELL }],
-  }));
-
-  return {
-    gesture,
-    bubbleStyle,
-    barStyle,
-    pressIn,
-    pressOut,
-    offset,
-    selected,
-    pitch,
-    reduceMotion,
-  };
-};
-
-type LiquidSelection = ReturnType<typeof useLiquidSelection>;
-
-/**
- * active tint of a tab follows the lens over it, and the tab the lens lands on pops
- */
-const useLiquidItem = (
-  { offset, selected, pitch, reduceMotion }: LiquidSelection,
-  itemIndex: number,
-) => {
-  const pop = useSharedValue(1);
-
-  useAnimatedReaction(
-    () => selected.value === itemIndex,
-    (isSelected, wasSelected) => {
-      if (isSelected && wasSelected === false && !reduceMotion) {
-        pop.value = withSequence(
-          withTiming(ICON_POP, { duration: 120 }),
-          withSpring(1, SPRING),
-        );
-      }
-    },
-    [itemIndex, reduceMotion],
-  );
-
-  const activeStyle = useAnimatedStyle(() => {
-    if (pitch <= 0) {
-      return { opacity: selected.value === itemIndex ? 1 : 0 };
-    }
-    const distance = Math.abs(offset.value - itemIndex * pitch) / pitch;
-    return { opacity: clamp(1 - distance, 0, 1) };
-  });
-
-  const popStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: pop.value }],
-  }));
-
-  return { activeStyle, popStyle };
-};
-
-/**
- * lift for a single button, e.g. the compressed rail
- */
-const usePressLift = () => {
-  const reduceMotion = useReducedMotion();
-  const lift = useSharedValue(0);
-  const style = useAnimatedStyle(() => ({
-    transform: [{ scale: 1 + lift.value * (LENS_SCALE_X - 1) * 0.5 }],
-  }));
-  const onPressIn = () => {
-    if (!reduceMotion) {
-      lift.value = withSpring(1, SPRING);
-    }
-  };
-  const onPressOut = () => {
-    lift.value = withSpring(0, SPRING);
-  };
-  return { style, onPressIn, onPressOut };
-};
-
-export type { LiquidSelection };
-export { useLiquidSelection, useLiquidItem, usePressLift };