@retray-dev/ui-kit 9.3.1 → 10.1.0

package/scripts/test-consumer-fonts.sh

@@ -0,0 +1,82 @@
+#!/usr/bin/env bash
+# Verifies that dist/fonts.js paths resolve correctly from a consumer's perspective.
+# Simulates what npm publish sends: packs the package, installs into a temp Expo app,
+# then checks that Metro can find all .otf files without ../traversal.
+#
+# Run from repo root: ./scripts/test-consumer-fonts.sh
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+TMP="$(mktemp -d)"
+PACK_DIR="$TMP/pack"
+
+# Find npm — prefer nvm node, fallback to PATH
+NPM_BIN=""
+for node_dir in "$HOME"/.nvm/versions/node/*/bin; do
+  if [ -f "$node_dir/npm" ]; then NPM_BIN="$node_dir/npm"; fi
+done
+if [ -z "$NPM_BIN" ]; then NPM_BIN="npm"; fi
+
+cleanup() { rm -rf "$TMP"; }
+trap cleanup EXIT
+
+echo "=== 1. Build ui-kit ==="
+cd "$ROOT"
+pnpm build
+
+echo ""
+echo "=== 2. Pack (simulates npm publish tarball) ==="
+mkdir -p "$PACK_DIR"
+cd "$ROOT"
+TARBALL=$("$NPM_BIN" pack --pack-destination "$PACK_DIR" 2>/dev/null | tail -1)
+TARBALL_PATH="$PACK_DIR/$TARBALL"
+echo "Packed: $TARBALL_PATH"
+
+echo ""
+echo "=== 3. Verify tarball contents ==="
+echo "Files in tarball matching fonts:"
+tar -tzf "$TARBALL_PATH" | grep -E "(fonts|\.otf)" | sort
+
+echo ""
+echo "=== 4. Check dist/fonts.js paths stay within dist/ ==="
+tar -xzf "$TARBALL_PATH" -C "$TMP" package/dist/fonts.js 2>/dev/null
+
+FONTS_JS="$TMP/package/dist/fonts.js"
+if grep -q "\.\./src" "$FONTS_JS"; then
+  echo "FAIL: dist/fonts.js still contains ../src traversal:"
+  grep "\.\./src" "$FONTS_JS"
+  exit 1
+else
+  echo "OK: No ../src traversal found in dist/fonts.js"
+fi
+
+echo ""
+echo "=== 5. Verify all 28 .otf files exist in dist/assets/fonts/ ==="
+OTF_COUNT=$(tar -tzf "$TARBALL_PATH" | grep "^package/dist/assets/fonts/.*\.otf$" | wc -l | tr -d ' ')
+if [ "$OTF_COUNT" -eq 28 ]; then
+  echo "OK: 28 .otf files present in dist/assets/fonts/ inside tarball"
+else
+  echo "FAIL: expected 28 .otf files in dist/assets/fonts/, found $OTF_COUNT"
+  tar -tzf "$TARBALL_PATH" | grep "^package/dist/assets/fonts/.*\.otf$"
+  exit 1
+fi
+
+echo ""
+echo "=== 6. Validate require paths — no ../traversal ==="
+TRAVERSALS=$(grep -oE '"[^"]+\.otf"' "$FONTS_JS" | grep "\.\." || true)
+if [ -n "$TRAVERSALS" ]; then
+  echo "FAIL: Traversal paths found in dist/fonts.js:"
+  echo "$TRAVERSALS"
+  exit 1
+else
+  echo "OK: All .otf require() paths use ./ (within dist/)"
+fi
+
+echo ""
+echo "=== PASS: Consumer font resolution looks correct ==="
+echo "dist/fonts.js uses ./assets/fonts/ paths"
+echo "All 28 .otf files are present in dist/assets/fonts/ in the tarball"
+echo ""
+echo "Consumer usage (no watchFolders hack needed):"
+echo "  import { SohneFonts } from '@retray-dev/ui-kit/fonts'"
+echo "  useFonts(SohneFonts)"

package/src/components/Accordion/Accordion.tsx

@@ -21,7 +21,7 @@ import { TIMINGS, EASINGS } from '../../utils/animations'
 
 export interface AccordionItem {
   value: string
-  trigger: string
+  trigger: string | React.ReactNode
   content: React.ReactNode
   /** Icon name from @expo/vector-icons rendered left of trigger. */
   iconName?: string
@@ -102,11 +102,15 @@ function AccordionItemComponent({
         }}
         accessibilityRole="button"
         accessibilityState={{ expanded: isOpen }}
-        accessibilityLabel={item.trigger}
+        accessibilityLabel={typeof item.trigger === 'string' ? item.trigger : undefined}
       >
         <View style={styles.triggerContent}>
           {resolvedIcon ? <View style={styles.icon}>{resolvedIcon}</View> : null}
-          <Text style={[styles.triggerText, { color: colors.foreground }]} allowFontScaling={true}>{item.trigger}</Text>
+          {typeof item.trigger === 'string' ? (
+            <Text style={[styles.triggerText, { color: colors.foreground }]} allowFontScaling={true}>{item.trigger}</Text>
+          ) : (
+            item.trigger
+          )}
         </View>
         <Animated.View style={[styles.chevron, rotationStyle]}>
           <Entypo name="chevron-down" size={18} color={colors.foregroundMuted} />

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import {
-  BottomSheetModal,
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import BottomSheet, {
   BottomSheetView,
   BottomSheetBackdrop,
   type BottomSheetBackdropProps,
@@ -15,12 +14,17 @@ import { s, vs, ms, mvs } from '../../utils/scaling'
 export interface ConfirmDialogProps {
   visible: boolean
   title: string
+  /** Secondary text below title. */
+  subtitle?: string
+  /** @deprecated Use `subtitle` instead. */
   description?: string
   confirmLabel?: string
   cancelLabel?: string
   confirmVariant?: 'primary' | 'destructive'
   /** Show a loading spinner in the confirm button (e.g. while async action completes). */
   loading?: boolean
+  /** Show an X close button in the top-right corner. */
+  showCloseButton?: boolean
   onConfirm: () => void
   onCancel: () => void
 }
@@ -28,23 +32,26 @@ export interface ConfirmDialogProps {
 export function ConfirmDialog({
   visible,
   title,
+  subtitle,
   description,
   confirmLabel = 'Confirm',
   cancelLabel = 'Cancel',
   confirmVariant = 'primary',
   loading = false,
+  showCloseButton = false,
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) {
   const { colors } = useTheme()
-  const ref = useRef<BottomSheetModal>(null)
+  const ref = useRef<BottomSheet>(null)
+  const effectiveSubtitle = subtitle ?? description
 
   useEffect(() => {
     if (visible) {
       impactMedium()
-      ref.current?.present()
+      ref.current?.snapToIndex(0)
     } else {
-      ref.current?.dismiss()
+      ref.current?.close()
     }
   }, [visible])
 
@@ -58,24 +65,42 @@ export function ConfirmDialog({
   )
 
   return (
-    <BottomSheetModal
+    <BottomSheet
       ref={ref}
+      index={-1}
+      onClose={onCancel}
       enableDynamicSizing
-      onDismiss={onCancel}
       backdropComponent={renderBackdrop}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
       handleIndicatorStyle={[styles.handle, { backgroundColor: colors.border }]}
       enablePanDownToClose
     >
       <BottomSheetView style={styles.content}>
-        <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
-          {title}
-        </Text>
-        {description ? (
-          <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-            {description}
-          </Text>
-        ) : null}
+        <View style={styles.header} accessibilityRole="header">
+          <View style={styles.headerRow}>
+            <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
+              {title}
+            </Text>
+            {showCloseButton ? (
+              <TouchableOpacity
+                onPress={onCancel}
+                style={styles.closeButton}
+                activeOpacity={0.6}
+                touchSoundDisabled={true}
+                accessibilityRole="button"
+                accessibilityLabel="Close"
+                hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+              >
+                <Feather name="x" size={ms(18)} color={colors.foregroundMuted} />
+              </TouchableOpacity>
+            ) : null}
+          </View>
+          {effectiveSubtitle ? (
+            <Text style={[styles.subtitle, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+              {effectiveSubtitle}
+            </Text>
+          ) : null}
+        </View>
         <View style={styles.actions}>
           <Button
             label={confirmLabel}
@@ -105,7 +130,7 @@ export function ConfirmDialog({
           />
         </View>
       </BottomSheetView>
-    </BottomSheetModal>
+    </BottomSheet>
   )
 }
 
@@ -120,19 +145,32 @@ const styles = StyleSheet.create({
     borderRadius: ms(2),
   },
   content: {
-    paddingHorizontal: s(24),
+    paddingHorizontal: s(16),
     paddingBottom: vs(32),
-    gap: vs(12),
+  },
+  header: {
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4),
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
   },
   title: {
     fontFamily: 'Sohne-SemiBold',
     fontSize: ms(18),
-    lineHeight: mvs(26),
+    flex: 1,
+  },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8),
   },
-  description: {
+  subtitle: {
     fontFamily: 'Sohne-Regular',
-    fontSize: ms(15),
-    lineHeight: mvs(22),
+    fontSize: ms(14),
+    lineHeight: mvs(20),
   },
   actions: {
     gap: vs(10),

package/src/components/ImageViewer/ImageViewer.tsx

@@ -2,7 +2,8 @@ import React, { useState, useCallback } from 'react'
 import {
   Modal,
   View,
-  TouchableOpacity,
+  Image,
+  Dimensions,
   StyleSheet,
   useWindowDimensions,
   ImageSourcePropType,
@@ -18,7 +19,7 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { renderIcon } from '../../utils/icons'
+import { IconButton } from '../IconButton'
 import { PagerDots } from '../PagerDots'
 import { s, vs } from '../../utils/scaling'
 
@@ -102,13 +103,11 @@ function ZoomableImage({ source, width, height, onZoomChange }: ZoomableImagePro
 
   return (
     <GestureDetector gesture={composed}>
-      <Animated.View style={[{ width, height }, styles.imageWrap]}>
-        <Animated.Image
-          source={source}
-          style={[{ width, height }, animatedStyle]}
-          resizeMode="contain"
-        />
-      </Animated.View>
+      <View style={[{ width, height }, styles.imageWrap]} collapsable={false}>
+        <Animated.View style={[{ width, height }, animatedStyle]}>
+          <Image source={source} style={{ width, height }} resizeMode="contain" />
+        </Animated.View>
+      </View>
     </GestureDetector>
   )
 }
@@ -132,7 +131,9 @@ export interface ImageViewerProps {
  * <ImageViewer images={pages} visible={open} initialIndex={page} onClose={() => setOpen(false)} />
  */
 export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: ImageViewerProps) {
-  const { width, height } = useWindowDimensions()
+  const window = useWindowDimensions()
+  const width = window.width > 0 ? window.width : Dimensions.get('window').width
+  const height = window.height > 0 ? window.height : Dimensions.get('window').height
   const insets = useSafeAreaInsets()
   const [index, setIndex] = useState(initialIndex)
   const [pagingEnabled, setPagingEnabled] = useState(true)
@@ -203,7 +204,7 @@ export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: Imag
         <Animated.View style={[styles.backdrop, backdropStyle]} pointerEvents="none" />
         <Animated.View style={[styles.container, dismissStyle]}>
           <GestureDetector gesture={swipeDown}>
-            <Animated.View style={styles.root}>
+            <View style={styles.root} collapsable={false}>
               <ScrollView
                 ref={scrollRef}
                 horizontal
@@ -223,20 +224,20 @@ export function ImageViewer({ images, visible, onClose, initialIndex = 0 }: Imag
                   />
                 ))}
               </ScrollView>
-            </Animated.View>
+            </View>
           </GestureDetector>
 
-          <TouchableOpacity
-            style={[styles.closeButton, { top: insets.top + vs(8) }]}
-            onPress={onClose}
-            activeOpacity={0.7}
-            touchSoundDisabled={true}
-            accessibilityRole="button"
-            accessibilityLabel="Close"
-            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-          >
-            {renderIcon('x', 26, '#fff')}
-          </TouchableOpacity>
+          <View style={[styles.closeButtonWrapper, { top: insets.top + vs(8) }]}>
+            <IconButton
+              iconName="x"
+              size="md"
+              variant="text"
+              style={{ backgroundColor: 'rgba(255,255,255,0.18)' }}
+              iconColor="#fff"
+              onPress={onClose}
+              accessibilityLabel="Close"
+            />
+          </View>
 
           {images.length > 1 ? (
             <View style={[styles.dots, { bottom: insets.bottom + vs(16) }]} pointerEvents="box-none">
@@ -271,15 +272,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     overflow: 'hidden',
   },
-  closeButton: {
+  closeButtonWrapper: {
     position: 'absolute',
     right: s(12),
-    width: s(40),
-    height: s(40),
-    borderRadius: s(20),
-    backgroundColor: 'rgba(0,0,0,0.4)',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   dots: {
     position: 'absolute',

package/src/components/Sheet/Sheet.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import { View, Text, TouchableOpacity, StyleSheet, ViewStyle, Dimensions, Platform, Modal, ScrollView, useWindowDimensions, Pressable } from 'react-native'
-import {
-  BottomSheetModal,
+import BottomSheet, {
   BottomSheetView,
   BottomSheetScrollView,
   BottomSheetBackdrop,
@@ -149,7 +148,7 @@ export function Sheet({
   const { colors } = useTheme()
   const insets = useSafeAreaInsets()
   const { width: windowWidth } = useWindowDimensions()
-  const ref = useRef<BottomSheetModal>(null)
+  const ref = useRef<BottomSheet>(null)
   const asDialog = responsive && windowWidth >= BREAKPOINTS.wide
   
   // 'interactive' + 'adjustPan' works properly with enableDynamicSizing on both platforms
@@ -159,9 +158,9 @@ export function Sheet({
   useEffect(() => {
     if (open) {
       impactMedium()
-      ref.current?.present()
+      ref.current?.snapToIndex(0)
     } else {
-      ref.current?.dismiss()
+      ref.current?.close()
     }
   }, [open])
 
@@ -193,7 +192,7 @@ export function Sheet({
   const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader
 
   const headerNode = customHeader ? customHeader : (showHeader ? (
-    <View style={styles.header} accessibilityRole="header">
+    <View style={[styles.header, { backgroundColor: colors.card }]} accessibilityRole="header">
       <View style={styles.headerRow}>
         {title ? (
           <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
@@ -270,12 +269,13 @@ export function Sheet({
   const useDynamicSizing = !snapPoints
   
   return (
-    <BottomSheetModal
+    <BottomSheet
       ref={ref}
+      index={-1}
+      onClose={onClose}
       enableDynamicSizing={useDynamicSizing}
       snapPoints={snapPoints}
       maxDynamicContentSize={useDynamicSizing ? effectiveMaxHeight : undefined}
-      onDismiss={onClose}
       backdropComponent={renderBackdrop}
       footerComponent={effectiveFooter ? renderFooter : undefined}
       backgroundStyle={[styles.background, { backgroundColor: colors.card }]}
@@ -297,6 +297,7 @@ export function Sheet({
           showsVerticalScrollIndicator={true}
           indicatorStyle="black"
           persistentScrollbar={isAndroid}
+          stickyHeaderIndices={headerNode ? [0] : undefined}
         >
           {headerNode}
           {contentNode}
@@ -307,7 +308,7 @@ export function Sheet({
           {contentNode}
         </BottomSheetView>
       )}
-    </BottomSheetModal>
+    </BottomSheet>
   )
 }
 

package/src/components/Switch/Switch.tsx

@@ -14,6 +14,8 @@ const THUMB_OFFSET = s(3)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 const ICON_SIZE    = s(13)
 
+const DISABLED_OPACITY = 0.45
+
 export interface SwitchProps {
   checked?: boolean
   onCheckedChange?: (checked: boolean) => void
@@ -24,9 +26,10 @@ export interface SwitchProps {
 
 export function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }: SwitchProps) {
   const { colors } = useTheme()
+  const isDisabled = !!disabled
 
   return (
-    <View style={[{ opacity: disabled ? 0.45 : 1, alignSelf: 'flex-start' }, style]}>
+    <View style={[{ alignSelf: 'flex-start' }, style]}>
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
@@ -37,20 +40,15 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
         touchSoundDisabled={true}
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ checked, disabled: !!disabled }}
+        accessibilityState={{ checked, disabled: isDisabled }}
         style={styles.touchable}
       >
-        <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.
-          */}
+        <View style={styles.trackContainer}>
+          <EaseView
+            style={[styles.track, isDisabled && styles.disabledTrack]}
+            animate={{ backgroundColor: checked ? colors.primary : colors.surfaceStrong }}
+            transition={COLOR_TRANSITION}
+          />
           <EaseView
             style={[styles.trackBorder, { borderWidth: 1.5 }]}
             pointerEvents="none"
@@ -62,14 +60,22 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
             animate={{ translateX: checked ? THUMB_TRAVEL : 0 }}
             transition={SPRING_ELASTIC}
           >
-            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 1 : 0 }} transition={OPACITY_TRANSITION}>
+            <EaseView
+              style={styles.iconWrapper}
+              animate={{ opacity: checked ? (isDisabled ? DISABLED_OPACITY : 1) : 0 }}
+              transition={OPACITY_TRANSITION}
+            >
               <Feather name="check" size={ICON_SIZE} color={colors.primary} />
             </EaseView>
-            <EaseView style={styles.iconWrapper} animate={{ opacity: checked ? 0 : 1 }} transition={OPACITY_TRANSITION}>
+            <EaseView
+              style={styles.iconWrapper}
+              animate={{ opacity: checked ? 0 : (isDisabled ? DISABLED_OPACITY : 1) }}
+              transition={OPACITY_TRANSITION}
+            >
               <Feather name="x" size={ICON_SIZE} color={colors.foregroundMuted} />
             </EaseView>
           </EaseView>
-        </EaseView>
+        </View>
       </TouchableOpacity>
     </View>
   )
@@ -79,11 +85,18 @@ const styles = StyleSheet.create({
   touchable: {
     alignSelf: 'flex-start',
   },
-  track: {
+  trackContainer: {
+    position: 'relative',
     width: TRACK_WIDTH,
     height: TRACK_HEIGHT,
+  },
+  track: {
+    ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2,
   },
+  disabledTrack: {
+    opacity: DISABLED_OPACITY,
+  },
   trackBorder: {
     ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2,

package/src/fonts.ts

@@ -1,53 +1,72 @@
 /**
- * Sohne font family required by @retray-dev/ui-kit components.
+ * Sohne font family names for @retray-dev/ui-kit components.
  *
- * Consumer apps must load these fonts at app root using expo-font:
+ * The postinstall script copies 28 .otf files to your project's assets/fonts/sohne/ folder.
+ * You must define SohneFonts with static require() calls in your App.tsx:
  *
  * @example
  * import { useFonts } from 'expo-font'
- * import { SohneFonts } from '@retray-dev/ui-kit/fonts'
+ *
+ * // Fonts copied to assets/fonts/sohne/ by @retray-dev/ui-kit postinstall
+ * const SohneFonts = {
+ *   'Sohne-ExtraLight': require('./assets/fonts/sohne/Sohne-ExtraLight.otf'),
+ *   'Sohne-ExtraLightItalic': require('./assets/fonts/sohne/Sohne-ExtraLightItalic.otf'),
+ *   // ... see CONSUMER.md for full boilerplate
+ * }
  *
  * function App() {
  *   const [fontsLoaded] = useFonts(SohneFonts)
  *   if (!fontsLoaded) return null
  *   // render app
  * }
+ *
+ * @see CONSUMER.md for the full SohneFonts boilerplate to copy into your App.tsx
  */
-// `.otf` assets resolve to a Metro asset module id (number) via require() at the
-// consumer's build time. Paths are relative to dist/fonts.js (the compiled output).
-// The build step copies all .otf files into dist/assets/fonts/ so these paths
-// resolve correctly without any ../traversal that Metro would reject.
-declare const require: (path: string) => number
 
-export const SohneFonts = {
-  // Sohne base
-  'Sohne-ExtraLight':         require('./assets/fonts/Sohne-ExtraLight.otf'),
-  'Sohne-ExtraLightItalic':   require('./assets/fonts/Sohne-ExtraLightItalic.otf'),
-  'Sohne-Light':              require('./assets/fonts/Sohne-Light.otf'),
-  'Sohne-LightItalic':        require('./assets/fonts/Sohne-LightItalic.otf'),
-  'Sohne-Regular':            require('./assets/fonts/Sohne-Regular.otf'),
-  'Sohne-Italic':             require('./assets/fonts/Sohne-Italic.otf'),
-  'Sohne-Medium':             require('./assets/fonts/Sohne-Medium.otf'),
-  'Sohne-MediumItalic':       require('./assets/fonts/Sohne-MediumItalic.otf'),
-  'Sohne-SemiBold':           require('./assets/fonts/Sohne-SemiBold.otf'),
-  'Sohne-SemiBoldItalic':     require('./assets/fonts/Sohne-SemiBoldItalic.otf'),
-  'Sohne-Bold':               require('./assets/fonts/Sohne-Bold.otf'),
-  'Sohne-BoldItalic':         require('./assets/fonts/Sohne-BoldItalic.otf'),
-  'Sohne-ExtraBold':          require('./assets/fonts/Sohne-ExtraBold.otf'),
-  'Sohne-ExtraBoldItalic':    require('./assets/fonts/Sohne-ExtraBoldItalic.otf'),
-  // SohneMono
-  'SohneMono-ExtraLight':         require('./assets/fonts/SohneMono-ExtraLight.otf'),
-  'SohneMono-ExtraLightItalic':   require('./assets/fonts/SohneMono-ExtraLightItalic.otf'),
-  'SohneMono-Light':              require('./assets/fonts/SohneMono-Light.otf'),
-  'SohneMono-LightItalic':        require('./assets/fonts/SohneMono-LightItalic.otf'),
-  'SohneMono-Regular':            require('./assets/fonts/SohneMono-Regular.otf'),
-  'SohneMono-Italic':             require('./assets/fonts/SohneMono-Italic.otf'),
-  'SohneMono-Medium':             require('./assets/fonts/SohneMono-Medium.otf'),
-  'SohneMono-MediumItalic':       require('./assets/fonts/SohneMono-MediumItalic.otf'),
-  'SohneMono-SemiBold':           require('./assets/fonts/SohneMono-SemiBold.otf'),
-  'SohneMono-SemiBoldItalic':     require('./assets/fonts/SohneMono-SemiBoldItalic.otf'),
-  'SohneMono-Bold':               require('./assets/fonts/SohneMono-Bold.otf'),
-  'SohneMono-BoldItalic':         require('./assets/fonts/SohneMono-BoldItalic.otf'),
-  'SohneMono-ExtraBold':          require('./assets/fonts/SohneMono-ExtraBold.otf'),
-  'SohneMono-ExtraBoldItalic':    require('./assets/fonts/SohneMono-ExtraBoldItalic.otf'),
-} as const
+/**
+ * Array of all 28 Sohne font family names.
+ * Use this for validation or programmatic checks — NOT for loading fonts.
+ * To load fonts, use the static require() boilerplate from CONSUMER.md.
+ */
+export const SohneFontNames = [
+  // Sohne base (14)
+  'Sohne-ExtraLight',
+  'Sohne-ExtraLightItalic',
+  'Sohne-Light',
+  'Sohne-LightItalic',
+  'Sohne-Regular',
+  'Sohne-Italic',
+  'Sohne-Medium',
+  'Sohne-MediumItalic',
+  'Sohne-SemiBold',
+  'Sohne-SemiBoldItalic',
+  'Sohne-Bold',
+  'Sohne-BoldItalic',
+  'Sohne-ExtraBold',
+  'Sohne-ExtraBoldItalic',
+  // SohneMono (14)
+  'SohneMono-ExtraLight',
+  'SohneMono-ExtraLightItalic',
+  'SohneMono-Light',
+  'SohneMono-LightItalic',
+  'SohneMono-Regular',
+  'SohneMono-Italic',
+  'SohneMono-Medium',
+  'SohneMono-MediumItalic',
+  'SohneMono-SemiBold',
+  'SohneMono-SemiBoldItalic',
+  'SohneMono-Bold',
+  'SohneMono-BoldItalic',
+  'SohneMono-ExtraBold',
+  'SohneMono-ExtraBoldItalic',
+] as const
+
+/** Type for any valid Sohne font family name */
+export type SohneFontName = (typeof SohneFontNames)[number]
+
+/**
+ * @deprecated SohneFonts export removed in v10.0.0.
+ * Metro cannot resolve require() calls from node_modules reliably.
+ * Copy the static SohneFonts boilerplate from CONSUMER.md into your App.tsx instead.
+ */
+export const SohneFonts = undefined