@retray-dev/ui-kit 6.2.0 → 9.0.0

package/src/components/Slider/Slider.tsx

@@ -101,11 +101,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(15),
   },
   valueText: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   slider: {

package/src/components/Spinner/Spinner.tsx

@@ -25,10 +25,16 @@ const labelFontSize: Record<SpinnerSize, number> = {
 
 export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
   const { colors } = useTheme()
+  const a11yLabel = label || 'Loading'
 
   if (label) {
     return (
-      <View style={styles.wrapper}>
+      <View
+        style={styles.wrapper}
+        accessibilityRole="progressbar"
+        accessibilityLabel={a11yLabel}
+        accessibilityState={{ busy: true }}
+      >
         <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
         <Text
           style={[styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }]}
@@ -40,7 +46,16 @@ export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
     )
   }
 
-  return <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
+  return (
+    <ActivityIndicator
+      size={sizeMap[size]}
+      color={color ?? colors.primary}
+      accessibilityRole="progressbar"
+      accessibilityLabel={a11yLabel}
+      accessibilityState={{ busy: true }}
+      {...props}
+    />
+  )
 }
 
 const styles = StyleSheet.create({
@@ -49,7 +64,7 @@ const styles = StyleSheet.create({
     gap: vs(6),
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     lineHeight: mvs(18),
   },
 })

package/src/components/Switch/Switch.tsx

@@ -1,24 +1,18 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { TouchableOpacity, StyleSheet, ViewStyle, View } from 'react-native'
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-  withTiming,
-  interpolateColor,
-} from 'react-native-reanimated'
+import { EaseView } from 'react-native-ease'
 import { Feather } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
-import { SPRINGS, TIMINGS, EASINGS } from '../../utils/animations'
+import { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
 
-const TRACK_WIDTH = s(52)
+const TRACK_WIDTH  = s(52)
 const TRACK_HEIGHT = s(30)
-const THUMB_SIZE = s(24)
+const THUMB_SIZE   = s(24)
 const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
-const ICON_SIZE = s(13)
+const ICON_SIZE    = s(13)
 
 export interface SwitchProps {
   checked?: boolean
@@ -31,35 +25,8 @@ export interface SwitchProps {
 export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
   const { colors } = useTheme()
 
-  // Single 0→1 progress drives thumb position, track color, and icon crossfade — all UI thread.
-  const progress = useSharedValue(checked ? 1 : 0)
-
-  useEffect(() => {
-    progress.value = withSpring(checked ? 1 : 0, SPRINGS.elastic)
-  }, [checked, progress])
-
-  const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: progress.value * THUMB_TRAVEL }],
-  }))
-
-  const trackStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(
-      progress.value,
-      [0, 1],
-      [colors.surfaceStrong, colors.primary],
-    ),
-  }))
-
-  const checkIconStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
-  }))
-
-  const crossIconStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 0 : 1, { duration: TIMINGS.state.duration, easing: EASINGS.standard }),
-  }))
-
   return (
-    <View style={[{ opacity: disabled ? 0.45 : 1 }, style]}>
+    <View style={[{ opacity: disabled ? 0.45 : 1, alignSelf: 'flex-start' }, style]}>
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
@@ -71,30 +38,56 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
         accessibilityState={{ checked, disabled: !!disabled }}
+        style={styles.touchable}
       >
-        <Animated.View style={[styles.track, trackStyle]}>
-          <Animated.View
-            style={[styles.thumb, { backgroundColor: colors.primaryForeground }, thumbStyle]}
+        <EaseView
+          style={styles.track}
+          animate={{ backgroundColor: checked ? colors.primary : colors.surfaceStrong }}
+          transition={COLOR_TRANSITION}
+        >
+          {/*
+            AUDIT FIX: the off-state track used surfaceStrong (~#ebebeb in light mode)
+            with no border — nearly invisible on white page/card surfaces. A 1.5px border
+            that fades out as the track fills gives the off state clear visual definition
+            without adding visual weight to the on state.
+          */}
+          <EaseView
+            style={[styles.trackBorder, { borderWidth: 1.5 }]}
+            pointerEvents="none"
+            animate={{ borderColor: checked ? 'transparent' : colors.border }}
+            transition={COLOR_TRANSITION}
+          />
+          <EaseView
+            style={[styles.thumb, { backgroundColor: colors.primaryForeground }]}
+            animate={{ translateX: checked ? THUMB_TRAVEL : 0 }}
+            transition={SPRING_ELASTIC}
           >
-            <Animated.View style={[styles.iconWrapper, checkIconStyle]}>
+            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 1 : 0 }} transition={OPACITY_TRANSITION}>
               <Feather name="check" size={ICON_SIZE} color={colors.primary} />
-            </Animated.View>
-            <Animated.View style={[styles.iconWrapper, crossIconStyle]}>
+            </EaseView>
+            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 0 : 1 }} transition={OPACITY_TRANSITION}>
               <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
-            </Animated.View>
-          </Animated.View>
-        </Animated.View>
+            </EaseView>
+          </EaseView>
+        </EaseView>
       </TouchableOpacity>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
+  touchable: {
+    alignSelf: 'flex-start',
+  },
   track: {
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
     borderRadius: TRACK_HEIGHT / 2,
   },
+  trackBorder: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: TRACK_HEIGHT / 2,
+  },
   thumb: {
     position: 'absolute',
     top: THUMB_OFFSET,
@@ -112,5 +105,7 @@ const styles = StyleSheet.create({
   },
   iconWrapper: {
     position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
 })

package/src/components/TabBar/TabBar.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from '../../theme'
+import { renderIcon } from '../../utils/icons'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+
+export interface TabBarItem {
+  /** Unique key for the tab. */
+  key: string
+  /** Label under the icon. Omit for an icon-only tab. */
+  label?: string
+  /** Icon name (active + inactive share the name; color signals state). */
+  iconName?: string
+  /** Custom icon node — receives no state, overrides `iconName`. */
+  icon?: React.ReactNode
+  /** Badge overlay — `true` shows a dot, a number shows a count (capped at 99). */
+  badge?: boolean | number
+}
+
+export interface TabBarProps {
+  items: TabBarItem[]
+  /** Key of the active tab. */
+  activeKey: string
+  onTabPress: (key: string) => void
+  /** Active tint. Defaults to theme `primary`. */
+  activeColor?: string
+  /** Inactive tint. Defaults to theme `foregroundMuted`. */
+  inactiveColor?: string
+  /** Apply the bottom safe-area inset as padding. Defaults to true. */
+  withSafeArea?: boolean
+  style?: ViewStyle
+}
+
+/**
+ * Bottom tab bar — icon + label tabs with active tint and badge support. Pair
+ * with your navigator, or drive it with local state for a single-screen app.
+ *
+ * @example
+ * <TabBar
+ *   items={[{ key: 'home', label: 'Home', iconName: 'home' }, { key: 'profile', label: 'Profile', iconName: 'user', badge: 3 }]}
+ *   activeKey={tab}
+ *   onTabPress={setTab}
+ * />
+ */
+export function TabBar({
+  items,
+  activeKey,
+  onTabPress,
+  activeColor,
+  inactiveColor,
+  withSafeArea = true,
+  style,
+}: TabBarProps) {
+  const { colors } = useTheme()
+  const insets = useSafeAreaInsets()
+  const resolvedActive = activeColor ?? colors.primary
+  const resolvedInactive = inactiveColor ?? colors.foregroundMuted
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+          paddingBottom: withSafeArea ? insets.bottom : 0,
+        },
+        style,
+      ]}
+      accessibilityRole="tablist"
+    >
+      {items.map((item) => {
+        const active = item.key === activeKey
+        const tint = active ? resolvedActive : resolvedInactive
+        const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), tint) : null)
+        const showBadge = item.badge !== undefined && item.badge !== false
+        const badgeCount = typeof item.badge === 'number' ? item.badge : undefined
+
+        return (
+          <TouchableOpacity
+            key={item.key}
+            style={styles.tab}
+            onPress={() => {
+              if (!active) hapticSelection()
+              onTabPress(item.key)
+            }}
+            activeOpacity={0.7}
+            touchSoundDisabled={true}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active }}
+            accessibilityLabel={item.label ?? item.key}
+          >
+            <View>
+              {iconNode}
+              {showBadge ? (
+                <View
+                  style={[
+                    styles.badge,
+                    { backgroundColor: colors.destructive, borderColor: colors.card },
+                    badgeCount === undefined && styles.badgeDot,
+                  ]}
+                >
+                  {badgeCount !== undefined ? (
+                    <Text style={[styles.badgeText, { color: colors.destructiveForeground }]} allowFontScaling={false}>
+                      {badgeCount > 99 ? '99+' : badgeCount}
+                    </Text>
+                  ) : null}
+                </View>
+              ) : null}
+            </View>
+            {item.label ? (
+              <Text style={[styles.label, { color: tint }]} numberOfLines={1} allowFontScaling={true}>
+                {item.label}
+              </Text>
+            ) : null}
+          </TouchableOpacity>
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: vs(8),
+    paddingBottom: vs(6),
+    gap: vs(2),
+    minHeight: vs(48),
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: ms(11),
+    lineHeight: mvs(14),
+  },
+  badge: {
+    position: 'absolute',
+    top: -vs(4),
+    right: -s(10),
+    minWidth: s(16),
+    height: s(16),
+    borderRadius: s(8),
+    borderWidth: 1.5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: s(3),
+  },
+  badgeDot: {
+    minWidth: s(10),
+    height: s(10),
+    borderRadius: s(5),
+    top: -vs(2),
+    right: -s(6),
+    paddingHorizontal: 0,
+  },
+  badgeText: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: ms(9),
+    lineHeight: ms(11),
+  },
+})

package/src/components/TabBar/index.ts

@@ -0,0 +1 @@
+export * from './TabBar'

package/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { View, TouchableOpacity, Text, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import { View, Text, StyleSheet, ViewStyle, LayoutChangeEvent } from 'react-native'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -8,8 +8,8 @@ import Animated, {
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { SPRINGS } from '../../utils/animations'
+import { PressableTab } from '../../utils/pressable'
 
 export interface TabItem {
   label: string
@@ -17,8 +17,6 @@ export interface TabItem {
   icon?: React.ReactNode | ((active: boolean) => React.ReactNode)
 }
 
-// pill: animated sliding pill background (default)
-// underline: 2px bottom border on active tab — Airbnb product-tab style
 export type TabsVariant = 'pill' | 'underline'
 
 export interface TabsProps {
@@ -51,46 +49,43 @@ function TabTrigger({
   variant: TabsVariant
 }) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-  })
   const isUnderline = variant === 'underline'
 
   return (
-    <TouchableOpacity
-      style={[
-        styles.trigger,
-        isUnderline && styles.triggerUnderline,
-        isUnderline && isActive && { borderBottomColor: colors.primary },
-      ]}
-      onPress={onPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onLayout={onLayout}
-      activeOpacity={1}
-      touchSoundDisabled={true}
-      accessibilityRole="tab"
-      accessibilityState={{ selected: isActive }}
-      accessibilityLabel={tab.label}
-    >
-      <Animated.View style={animatedStyle}>
+    <View onLayout={onLayout} style={styles.triggerWrap}>
+      <PressableTab
+        style={[
+          styles.trigger,
+          isUnderline && styles.triggerUnderline,
+          isUnderline && isActive && { borderBottomColor: colors.primary },
+        ]}
+        onPress={onPress}
+        rippleColor="transparent"
+        touchSoundDisabled
+        accessibilityRole="tab"
+        accessibilityState={{ selected: isActive }}
+        accessibilityLabel={tab.label}
+      >
         <View style={styles.triggerInner}>
           {tab.icon ? (
-            (typeof tab.icon === 'function' ? (tab.icon as any)(isActive) : tab.icon) as React.ReactNode
+            typeof tab.icon === 'function' ? tab.icon(isActive) : tab.icon
           ) : null}
           <Text
             style={[
               styles.triggerLabel,
+              // AUDIT FIX: active state now only changes color, never font metrics.
+              // Previously: inactive=Regular, active=Medium (pill) or SemiBold+fontSize14 (underline)
+              // The weight/size change caused measurable layout reflow every tab switch.
+              // Solution: all labels render at SemiBold always; active = foreground, inactive = foregroundMuted.
               { color: isActive ? colors.foreground : colors.foregroundMuted },
-              isActive && (isUnderline ? styles.activeTriggerLabelUnderline : styles.activeTriggerLabel),
             ]}
             allowFontScaling={true}
           >
             {tab.label}
           </Text>
         </View>
-      </Animated.View>
-    </TouchableOpacity>
+      </PressableTab>
+    </View>
   )
 }
 
@@ -100,26 +95,27 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
   const active = value ?? internal
 
   const tabLayouts = useRef<Record<string, { x: number; width: number }>>({})
-  // Shared values drive the pill position on the UI thread — no JS bridge cost on slide.
   const pillX = useSharedValue(0)
   const pillWidth = useSharedValue(0)
   const initialised = useRef(false)
 
-  const animatePill = (tabValue: string, animate: boolean) => {
+  const animatePill = useCallback((tabValue: string, animate: boolean) => {
     const layout = tabLayouts.current[tabValue]
     if (!layout) return
     if (animate) {
+      // eslint-disable-next-line react-hooks/immutability
       pillX.value = withSpring(layout.x, SPRINGS.glide)
+      // eslint-disable-next-line react-hooks/immutability
       pillWidth.value = withSpring(layout.width, SPRINGS.glide)
     } else {
       pillX.value = layout.x
       pillWidth.value = layout.width
     }
-  }
+  }, [pillX, pillWidth])
 
   useEffect(() => {
     if (initialised.current) animatePill(active, true)
-  }, [active])
+  }, [active, animatePill])
 
   const handlePress = (v: string) => {
     hapticSelection()
@@ -136,7 +132,9 @@ export function Tabs({ tabs, variant = 'pill', value, onValueChange, children, s
     <View style={style}>
       <View
         style={[
-          variant === 'pill' ? [styles.list, { backgroundColor: colors.surface }] : styles.listUnderline,
+          variant === 'pill'
+            ? [styles.list, { backgroundColor: colors.surface }]
+            : styles.listUnderline,
         ]}
         accessibilityRole="tablist"
       >
@@ -198,9 +196,14 @@ const styles = StyleSheet.create({
   },
   listUnderline: {
     flexDirection: 'row',
+    // AUDIT FIX: was missing borderBottomColor — the 1px hairline would render
+    // as transparent on some platforms. Explicit token reference ensures visibility.
     borderBottomWidth: 1,
   },
   pill: {},
+  triggerWrap: {
+    flex: 1,
+  },
   trigger: {
     flex: 1,
     paddingVertical: vs(7),
@@ -211,7 +214,7 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   triggerUnderline: {
-    flex: 0,
+    flex: 1,
     paddingVertical: vs(12),
     paddingHorizontal: s(16),
     borderRadius: 0,
@@ -224,15 +227,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     gap: s(4),
   },
+  // AUDIT FIX: was Sohne-Regular at rest, Sohne-Medium/SemiBold when active.
+  // Font-weight changes at runtime cause advance-width shifts → the tab bar would
+  // visibly jump/reflow on every selection. Now always SemiBold; active state
+  // is communicated by color alone (foreground vs foregroundMuted). The pill
+  // indicator provides additional active signal without text layout side-effects.
   triggerLabel: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(13),
   },
-  activeTriggerLabel: {
-    fontFamily: 'Poppins-Medium',
-  },
-  activeTriggerLabelUnderline: {
-    fontFamily: 'Poppins-SemiBold',
-    fontSize: ms(14),
-  },
 })

package/src/components/Text/Text.tsx

@@ -3,6 +3,7 @@ import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-nativ
 import { useTheme } from '../../theme'
 import { TYPOGRAPHY } from '../../tokens'
 import { ms, mvs } from '../../utils/scaling'
+import { warnIfFontsMissing } from '../../utils/fontGuard'
 
 export type TextVariant =
   | 'display-hero'
@@ -67,7 +68,8 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'button-sm':    'foreground',
 }
 
-export function Text({ variant = 'body-md', color, style, children, ...props }: TextProps) {
+function TextBase({ variant = 'body-md', color, style, children, ...props }: TextProps) {
+  warnIfFontsMissing()
   const { colors } = useTheme()
 
   const colorKey = defaultColorVariant[variant] ?? 'foreground'
@@ -83,3 +85,5 @@ export function Text({ variant = 'body-md', color, style, children, ...props }:
     </RNText>
   )
 }
+
+export const Text = React.memo(TextBase)

package/src/components/Textarea/Textarea.tsx

@@ -3,6 +3,7 @@ import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform
 import Animated, {
   useAnimatedStyle,
   interpolateColor,
+  interpolate,
 } from 'react-native-reanimated'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
@@ -10,26 +11,19 @@ import { renderIcon } from '../../utils/icons'
 import { useColorTransition } from '../../utils/useColorTransition'
 import { TIMINGS } from '../../utils/animations'
 
-const webInputResetStyle: any =
+const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
     ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
     : {}
 
 export interface TextareaProps extends TextInputProps {
   label?: string
-  /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
   error?: string
-  /** Helper text shown below the textarea when there is no error. */
   hint?: string
-  /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
   rows?: number
-  /** Icon name from @expo/vector-icons rendered inside top-left corner. */
   prefixIcon?: string
-  /** Custom icon node rendered top-left. */
   prefixIconNode?: React.ReactNode
-  /** Override prefix icon color. Defaults to foregroundMuted. */
   prefixIconColor?: string
-  /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
   containerStyle?: ViewStyle
 }
 
@@ -58,10 +52,15 @@ export function Textarea({
     ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted)
     : prefixIconNode
 
-  const borderColorStyle = useAnimatedStyle(() => ({
+  // Border drawn on an absolute overlay (mirrors Input.tsx) so the 1px→2px
+  // focus weight change never resizes the box / reflows content.
+  const borderAnimStyle = useAnimatedStyle(() => ({
     borderColor: error
       ? colors.destructive
       : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error
+      ? 2
+      : interpolate(focusProgress.value, [0, 1], [1, 2]),
   }))
 
   return (
@@ -71,9 +70,9 @@ export function Textarea({
         style={[
           styles.inputWrapper,
           { backgroundColor: colors.background },
-          borderColorStyle,
         ]}
       >
+        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
         {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
         <TextInput
           multiline
@@ -123,32 +122,37 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
     lineHeight: vs(18),
     marginBottom: vs(2),
   },
   inputWrapper: {
-    borderWidth: 2,
+    // Border lives on borderOverlay (absolute); wrapper carries none so the
+    // focus weight change never reflows content.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     gap: s(8),
   },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8,
+  },
   prefixIcon: {
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
     paddingTop: vs(2),
   },
   input: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: vs(22),
     padding: 0,
     margin: 0,
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
     lineHeight: vs(16),
     marginTop: vs(4),