@retray-dev/ui-kit 12.2.0 → 13.2.0

package/src/components/Select/Select.tsx

@@ -1,13 +1,11 @@
 import React, { useRef, useState } from 'react'
 import { View, Text, TouchableOpacity, Modal, StyleSheet, ViewStyle, Platform } from 'react-native'
-import Animated from 'react-native-reanimated'
 import { Picker } from '@react-native-picker/picker'
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { usePressScale } from '../../utils/usePressScale'
-import { PRESS_SCALE } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
 const isIOS = Platform.OS === 'ios'
 const isAndroid = Platform.OS === 'android'
@@ -25,10 +23,12 @@ export interface SelectProps {
   onValueChange?: (value: string) => void
   placeholder?: string
   label?: string
+  hint?: string
   error?: string
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 export function Select({
@@ -37,16 +37,14 @@ export function Select({
   onValueChange,
   placeholder = 'Select an option',
   label,
+  hint,
   error,
   disabled,
   style,
   accessibilityLabel,
+  accessibilityHint,
 }: SelectProps) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled,
-  })
   const [pickerVisible, setPickerVisible] = useState(false)
   const [pendingValue, setPendingValue] = useState<string | undefined>(value)
   const pickerRef = useRef<React.ElementRef<typeof Picker>>(null)
@@ -82,38 +80,37 @@ export function Select({
 
       {/* Trigger button — shown on iOS and Android only */}
       {!isWeb ? (
-        <Animated.View style={[animatedStyle, { opacity: disabled ? 0.45 : 1 }]}>
-          <TouchableOpacity
+        <PressableButton
+          style={[
+            styles.trigger,
+            {
+              borderColor: error ? colors.destructive : colors.border,
+              backgroundColor: colors.background,
+            },
+            disabled && { opacity: 0.45 },
+          ]}
+          onPress={handleOpen}
+          enabled={!disabled}
+          rippleColor="transparent"
+          touchSoundDisabled
+          accessibilityRole="combobox"
+          accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityHint={accessibilityHint}
+          accessibilityValue={{ text: selected?.label ?? placeholder }}
+          accessibilityState={{ disabled: !!disabled, expanded: pickerVisible }}
+        >
+          <Text
             style={[
-              styles.trigger,
-              {
-                borderColor: error ? colors.destructive : colors.border,
-                backgroundColor: colors.background,
-              },
+              styles.triggerText,
+              { color: selected ? colors.foreground : colors.foregroundMuted },
             ]}
-            onPress={handleOpen}
-            onPressIn={onPressIn}
-            onPressOut={onPressOut}
-            activeOpacity={1}
-            touchSoundDisabled={true}
-            accessibilityRole="combobox"
-            accessibilityLabel={accessibilityLabel ?? label}
-            accessibilityValue={{ text: selected?.label ?? placeholder }}
-            accessibilityState={{ disabled: !!disabled, expanded: pickerVisible }}
+            numberOfLines={1}
+            allowFontScaling={true}
           >
-            <Text
-              style={[
-                styles.triggerText,
-                { color: selected ? colors.foreground : colors.foregroundMuted },
-              ]}
-              numberOfLines={1}
-              allowFontScaling={true}
-            >
-              {selected?.label ?? placeholder}
-            </Text>
-            <Entypo name="chevron-down" size={20} color={colors.foregroundMuted} />
-          </TouchableOpacity>
-        </Animated.View>
+            {selected?.label ?? placeholder}
+          </Text>
+          <Entypo name="chevron-down" size={20} color={colors.foregroundMuted} />
+        </PressableButton>
       ) : null}
 
       {/* iOS: Modal with wheel Picker */}
@@ -224,6 +221,8 @@ export function Select({
 
       {error ? (
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
+      ) : !error && hint ? (
+        <Text style={[styles.helperText, { color: colors.foregroundMuted }]} allowFontScaling={true}>{hint}</Text>
       ) : null}
     </View>
   )
@@ -251,9 +250,6 @@ const styles = StyleSheet.create({
     fontSize: ms(15),
     flex: 1,
   },
-  chevron: {
-    marginLeft: s(8),
-  },
   helperText: {
     fontFamily: 'Sohne-Regular',
     fontSize: ms(13),

package/src/components/SelectableCard/SelectableCard.tsx

@@ -5,7 +5,7 @@ import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
 
 type SelectType = 'radio' | 'checkbox'
@@ -146,20 +146,18 @@ export function SelectableCard({
   })()
 
   const resolvedIcon = iconName
-    ? renderIcon(iconName, ms(22), disabled ? colors.foregroundMuted : colors.foregroundMuted)
+    ? <Icon name={iconName} size={ms(22)} color={disabled ? colors.foregroundMuted : colors.foregroundMuted} />
     : icon
 
   const resolvedIconElement = resolvedIcon ? (
     <View style={[styles.iconWrapper, disabled && { opacity: 0.45 }]}>{resolvedIcon}</View>
   ) : null
 
-  const selectorAccessibilityRole = type === 'radio' ? 'radio' : 'checkbox'
-
   return (
     <Pressable
       onPress={handlePress}
       disabled={disabled}
-      accessibilityRole="button"
+      accessibilityRole={type === 'radio' ? 'radio' : 'checkbox'}
       accessibilityLabel={`${title}${description ? `, ${description}` : ''}`}
       accessibilityState={{ selected: isSelected, disabled }}
       style={[
@@ -171,7 +169,7 @@ export function SelectableCard({
     >
       <View style={styles.row}>
         {/* Selection indicator */}
-        <View style={styles.selectorContainer} accessibilityRole={selectorAccessibilityRole} accessibilityState={{ selected: isSelected, disabled }}>
+        <View style={styles.selectorContainer}>
           {type === 'radio' ? (
             <EaseView
               style={styles.radioCircle}

package/src/components/SelectableGrid/SelectableGrid.tsx

@@ -1,38 +1,27 @@
 import React, { useState } from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, ScrollView } from 'react-native'
-import Animated from 'react-native-reanimated'
+import { View, Text, StyleSheet, ViewStyle, ScrollView } from 'react-native'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
-import { usePressScale } from '../../utils/usePressScale'
+import { Icon } from '../../utils/icons'
+import { PressableChip } from '../../utils/pressable'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
-import { PRESS_SCALE } from '../../utils/animations'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
 
 export interface SelectableGridItem<T extends string | number = string> {
-  /** Unique value emitted on selection. */
   value: T
-  /** Label rendered under the icon. */
   label?: string
-  /** Icon name resolved via the icon registry. */
   iconName?: string
-  /** Custom icon node — overrides `iconName`. */
   icon?: React.ReactNode
   disabled?: boolean
 }
 
 export interface SelectableGridProps<T extends string | number = string> {
   items: SelectableGridItem<T>[]
-  /** Selected value(s). Array when `multiple`. */
   value: T | T[] | null
   onChange: (value: T) => void
-  /** Allow multiple selections. `value` should be an array. Defaults to false. */
   multiple?: boolean
-  /** Columns per row. Defaults to 4. Ignored when `orientation='horizontal'`. */
   numColumns?: number
-  /** Gap between cells (dp). Defaults to 12. */
   gap?: number
-  /** Layout orientation. 'grid' (default) wraps into rows. 'horizontal' creates a single scrollable row. */
   orientation?: 'grid' | 'horizontal'
   style?: ViewStyle
 }
@@ -51,63 +40,43 @@ interface CellProps<T extends string | number> {
 
 function Cell<T extends string | number>({ item, selected, width, onPress }: CellProps<T>) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip,
-    disabled: item.disabled,
-  })
 
   const iconColor = selected ? colors.primary : colors.foregroundSubtle
-  const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), iconColor) : null)
+  const iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={iconColor} /> : null)
 
   return (
-    <Animated.View style={[{ width }, animatedStyle]}>
-      <TouchableOpacity
-        onPress={onPress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={item.disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        accessibilityRole="button"
-        accessibilityState={{ selected, disabled: item.disabled }}
-        accessibilityLabel={item.label ?? String(item.value)}
-        {...hoverHandlers}
-        style={[
-          styles.cell,
-          {
-            backgroundColor: selected ? colors.primary + '14' : colors.surface,
-            borderColor: selected ? colors.primary : 'transparent',
-          },
-          item.disabled && styles.cellDisabled,
-        ]}
-      >
-        {iconNode}
-        {item.label ? (
-          <Text
-            style={[styles.label, { color: selected ? colors.primary : colors.foreground }]}
-            numberOfLines={1}
-            allowFontScaling={true}
-          >
-            {item.label}
-          </Text>
-        ) : null}
-      </TouchableOpacity>
-    </Animated.View>
+    <PressableChip
+      onPress={onPress}
+      enabled={!item.disabled}
+      rippleColor="transparent"
+      touchSoundDisabled
+      activateOnHover
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled: item.disabled }}
+      accessibilityLabel={item.label ?? String(item.value)}
+      style={[
+        { width },
+        styles.cell,
+        {
+          borderColor: selected ? colors.primary : 'transparent',
+        },
+        item.disabled && styles.cellDisabled,
+      ]}
+    >
+      {iconNode}
+      {item.label ? (
+        <Text
+          style={[styles.label, { color: selected ? colors.primary : colors.foreground }]}
+          numberOfLines={1}
+          allowFontScaling={true}
+        >
+          {item.label}
+        </Text>
+      ) : null}
+    </PressableChip>
   )
 }
 
-/**
- * Grid of selectable cells (icon + label) — for store / category / emoji pickers
- * where a list would be the wrong shape. Single or multi select.
- *
- * @example
- * <SelectableGrid
- *   items={categories}
- *   value={selected}
- *   onChange={setSelected}
- *   numColumns={4}
- * />
- */
 export function SelectableGrid<T extends string | number = string>({
   items,
   value,
@@ -120,10 +89,7 @@ export function SelectableGrid<T extends string | number = string>({
 }: SelectableGridProps<T>) {
   const [containerWidth, setContainerWidth] = useState(0)
   const gapPx = s(gap)
-  // Compute exact cell width so `numColumns` always fits — percentage widths + gap
-  // overflow and wrap one short. -0.5 guards against sub-pixel rounding overflow.
   const cellWidth = containerWidth > 0 ? (containerWidth - gapPx * (numColumns - 1)) / numColumns - 0.5 : 0
-  // Horizontal mode: fixed 72dp cell width (same scale as grid cells)
   const horizCellWidth = s(72)
 
   const handlePress = (item: SelectableGridItem<T>) => {
@@ -184,22 +150,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: s(4),
   },
   cell: {
-    flex: 1,
     borderRadius: RADIUS.md,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center',
     gap: vs(4),
-    paddingHorizontal: s(12),
-    paddingVertical: vs(12),
+    paddingHorizontal: s(8),
+    paddingVertical: vs(10),
   },
   cellDisabled: {
     opacity: 0.4,
   },
   label: {
     fontFamily: 'Sohne-Medium',
-    fontSize: ms(12),
-    lineHeight: mvs(15),
+    fontSize: ms(11),
+    lineHeight: mvs(14),
     textAlign: 'center',
   },
 })

package/src/components/Sheet/Sheet.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useId } from 'react'
+import React, { useCallback, useEffect, useRef, useState, useId } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
 import {
   BottomSheetModal,
@@ -95,28 +95,41 @@ export function Sheet({
   footer,
   snapPoints,
 }: SheetProps) {
+  type SheetState = 'idle' | 'presenting' | 'presented' | 'dismissing'
+
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const ref = useRef<BottomSheetModal>(null)
-  const wasOpened = useRef(false)
-  const isPresentedRef = useRef(false)
+  const sheetState = useRef<SheetState>('idle')
+  const onCloseRef = useRef(onClose)
   const name = useId()
+  const [tick, setTick] = useState(0)
 
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false
-    onClose?.()
+  useEffect(() => {
+    onCloseRef.current = onClose
   }, [onClose])
 
+  const handleDismiss = useCallback(() => {
+    sheetState.current = 'idle'
+    onCloseRef.current?.()
+    setTick((t) => t + 1)
+  }, [])
+
   useEffect(() => {
-    if (open && !isPresentedRef.current) {
-      impactMedium()
-      ref.current?.present()
-      wasOpened.current = true
-      isPresentedRef.current = true
-    } else if (!open && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss()
+    if (open) {
+      if (sheetState.current === 'idle') {
+        sheetState.current = 'presenting'
+        impactMedium()
+        ref.current?.present()
+        sheetState.current = 'presented'
+      }
+    } else {
+      if (sheetState.current === 'presented' || sheetState.current === 'presenting') {
+        sheetState.current = 'dismissing'
+        ref.current?.dismiss()
+      }
     }
-  }, [open])
+  }, [open, tick])
 
   const renderBackdrop = useCallback(
     (props: BottomSheetBackdropProps) => (
@@ -163,7 +176,7 @@ export function Sheet({
             activeOpacity={0.6}
             touchSoundDisabled={true}
             accessibilityRole="button"
-            accessibilityLabel="Close"
+            accessibilityLabel="Cerrar"
             hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
           >
             <AntDesign name="close" size={ms(18)} color={colors.foregroundMuted} />

package/src/components/Sheet/index.ts

@@ -1,2 +1,2 @@
-export { Sheet, BottomSheetModalProvider, SheetTextInput } from './Sheet'
-export type { SheetProps } from './Sheet'
+export { Sheet, SheetHeader, SheetContent, SheetFooter, BottomSheetModalProvider, SheetTextInput } from './Sheet'
+export type { SheetProps, SheetHeaderProps, SheetContentProps, SheetFooterProps } from './Sheet'

package/src/components/SheetSelect/SheetSelect.tsx

@@ -4,7 +4,7 @@ import { EaseView } from 'react-native-ease'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION } from '../../utils/animations'
 import { PressableChip } from '../../utils/pressable'
 import { RADIUS } from '../../tokens'
@@ -47,7 +47,7 @@ function SheetSelectChip({
   }
 
   const iconColor = selected ? colors.primaryForeground : colors.foreground
-  const resolvedIcon = option.iconName ? renderIcon(option.iconName, ms(13), iconColor) : null
+  const resolvedIcon = option.iconName ? <Icon name={option.iconName} size={ms(13)} color={iconColor} /> : null
 
   return (
     <PressableChip
@@ -55,7 +55,7 @@ function SheetSelectChip({
       rippleColor="transparent"
       touchSoundDisabled
       accessibilityRole="button"
-      accessibilityLabel={option.disabled ? `${option.label}, unavailable` : option.label}
+      accessibilityLabel={option.disabled ? `${option.label}, no disponible` : option.label}
       accessibilityState={{ selected, disabled: option.disabled }}
     >
       <EaseView

package/src/components/Skeleton/Skeleton.tsx

@@ -83,7 +83,7 @@ export function Skeleton({
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
       accessibilityRole="progressbar"
-      accessibilityLabel="Loading"
+      accessibilityLabel="Cargando"
       accessibilityState={{ busy: true }}
     >
       <Animated.View style={[StyleSheet.absoluteFill, shimmerStyle]}>

package/src/components/Slider/Slider.tsx

@@ -16,6 +16,7 @@ export interface SliderProps {
   showValue?: boolean
   formatValue?: (value: number) => string
   accessibilityLabel?: string
+  accessibilityHint?: string
   disabled?: boolean
   style?: ViewStyle
 }
@@ -31,6 +32,7 @@ export function Slider({
   showValue = false,
   formatValue = (v: number) => v.toFixed(2),
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   style,
 }: SliderProps) {
@@ -50,6 +52,7 @@ export function Slider({
       style={[styles.wrapper, style]}
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
       accessibilityValue={{
         min: minimumValue,
         max: maximumValue,

package/src/components/Spinner/Spinner.tsx

@@ -13,7 +13,7 @@ export interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
 
 const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
   sm: 'small',
-  md: 'small',
+  md: 'large',
   lg: 'large',
 }
 
@@ -25,7 +25,7 @@ const labelFontSize: Record<SpinnerSize, number> = {
 
 export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
   const { colors } = useTheme()
-  const a11yLabel = label || 'Loading'
+  const a11yLabel = label || 'Cargando'
 
   if (label) {
     return (

package/src/components/Stats/Stats.tsx

@@ -4,7 +4,7 @@ import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { PressableCard } from '../../utils/pressable'
 
 export type StatsVariant = 'elevated' | 'outlined' | 'filled'
@@ -114,7 +114,7 @@ function StatsComponent({
 
   const iconColorResolved = iconColor ?? colors.primary
 
-  const resolvedIcon = iconName ? renderIcon(iconName, sizeStyles.iconSize, iconColorResolved) : icon
+  const resolvedIcon = iconName ? <Icon name={iconName} size={sizeStyles.iconSize} color={iconColorResolved} /> : icon
 
   const iconElement = resolvedIcon ? (
     <View style={styles.iconWrapper}>{resolvedIcon}</View>

package/src/components/Switch/Switch.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { TouchableOpacity, StyleSheet, ViewStyle, View } from 'react-native'
+import { StyleSheet, ViewStyle, View } from 'react-native'
 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 { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
 const TRACK_WIDTH  = s(52)
 const TRACK_HEIGHT = s(30)
@@ -22,24 +23,26 @@ export interface SwitchProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
-export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
+export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel, accessibilityHint }: SwitchProps) {
   const { colors } = useTheme()
   const isDisabled = !!disabled
 
   return (
     <View style={[{ alignSelf: 'flex-start' }, style]}>
-      <TouchableOpacity
+      <PressableButton
         onPress={() => {
           hapticSelection()
           onCheckedChange?.(!checked)
         }}
-        disabled={disabled}
-        activeOpacity={0.8}
-        touchSoundDisabled={true}
+        enabled={!disabled}
+        rippleColor="transparent"
+        touchSoundDisabled
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
         accessibilityState={{ checked, disabled: isDisabled }}
         style={styles.touchable}
       >
@@ -76,7 +79,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
             </EaseView>
           </EaseView>
         </View>
-      </TouchableOpacity>
+      </PressableButton>
     </View>
   )
 }
@@ -84,6 +87,8 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
 const styles = StyleSheet.create({
   touchable: {
     alignSelf: 'flex-start',
+    minHeight: 44,
+    justifyContent: 'center',
   },
   trackContainer: {
     position: 'relative',

package/src/components/TabBar/TabBar.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { PressableTab } from '../../utils/pressable'
 
 export interface TabBarItem {
   /** Unique key for the tab. */
@@ -74,23 +75,23 @@ export function TabBar({
       {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 iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={tint} /> : null)
         const showBadge = item.badge !== undefined && item.badge !== false
         const badgeCount = typeof item.badge === 'number' ? item.badge : undefined
 
         return (
-          <TouchableOpacity
+          <PressableTab
             key={item.key}
-            style={styles.tab}
             onPress={() => {
               if (!active) hapticSelection()
               onTabPress(item.key)
             }}
-            activeOpacity={0.7}
-            touchSoundDisabled={true}
+            rippleColor="transparent"
+            touchSoundDisabled
             accessibilityRole="tab"
             accessibilityState={{ selected: active }}
             accessibilityLabel={item.label ?? item.key}
+            style={styles.tab}
           >
             <View>
               {iconNode}
@@ -115,7 +116,7 @@ export function TabBar({
                 {item.label}
               </Text>
             ) : null}
-          </TouchableOpacity>
+          </PressableTab>
         )
       })}
     </View>

package/src/components/Text/Text.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
+
+declare const __DEV__: boolean | undefined
 import { useTheme } from '../../theme'
 import { TYPOGRAPHY } from '../../tokens'
 import { ms, mvs } from '../../utils/scaling'
-import { warnIfFontsMissing } from '../../utils/fontGuard'
+import { isLoaded as expoFontIsLoaded } from 'expo-font'
 
 export type TextVariant =
   | 'display-hero'
@@ -70,6 +72,16 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'button-sm':    'foreground',
 }
 
+let fontWarned = false
+function warnIfFontsMissing(): void {
+  if (fontWarned || typeof __DEV__ === 'undefined' || !__DEV__) return
+  fontWarned = true
+  if (!expoFontIsLoaded('Sohne-Regular')) {
+    // eslint-disable-next-line no-console
+    console.warn('[retray-ui-kit] Sohne fonts not loaded — text falls back to system font.')
+  }
+}
+
 function TextBase({ variant = 'body-md', color, style, uppercase, children, ...props }: TextProps) {
   warnIfFontsMissing()
   const { colors } = useTheme()