@compsych/mobile-ui 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compsych/mobile-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "ComPsych React Native Design System — 19 mobile UI components with self-contained design tokens",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -18,8 +18,8 @@
   ],
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@expo-google-fonts/google-sans": ">=0.4.0",
     "@expo/vector-icons": ">=15.0.0",
+    "expo-font": ">=13.0.0",
     "react": ">=18.0.0",
     "react-native": ">=0.73.0"
   }

package/src/BodyText.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, type TextProps } from 'react-native';
+import { useFonts } from 'expo-font';
 
 import { sys } from './tokens';
 
@@ -23,7 +24,7 @@ const FONT_FAMILY: Record<string, string> = {
   semibold: 'GoogleSans_600SemiBold',
 };
 
-const VARIANT_TOKEN_KEY: Record<BodyVariant, string> = {
+const VARIANT_TOKEN_KEY: Record<BodyVariant, keyof typeof sys.typeScale> = {
   large: 'bodyLarge',
   medium: 'bodyMedium',
   small: 'bodySmall',
@@ -41,6 +42,12 @@ export function BodyText({
   style,
   ...rest
 }: BodyTextProps) {
+  const [fontsLoaded] = useFonts({
+    GoogleSans_400Regular: require('./fonts/GoogleSans_400Regular.ttf'),
+    GoogleSans_500Medium: require('./fonts/GoogleSans_500Medium.ttf'),
+    GoogleSans_600SemiBold: require('./fonts/GoogleSans_600SemiBold.ttf'),
+  });
+
   const token = ts[VARIANT_TOKEN_KEY[variant]];
   const weight = emphasized ? token.sysFontWeightEmphasized : token.sysFontWeight;
 
@@ -48,7 +55,7 @@ export function BodyText({
     <Text
       style={[
         {
-          fontFamily: FONT_FAMILY[weight],
+          fontFamily: fontsLoaded ? FONT_FAMILY[weight] : undefined,
           fontSize: token.sysFontSize,
           lineHeight: token.sysLineHeight,
           letterSpacing: token.sysTracking,

package/src/HeaderText.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text, type TextProps } from 'react-native';
+import { useFonts } from 'expo-font';
 
 import { sys } from './tokens';
 
@@ -26,7 +27,7 @@ const FONT_FAMILY: Record<string, string> = {
   semibold: 'GoogleSans_600SemiBold',
 };
 
-const VARIANT_TOKEN_KEY: Record<HeaderVariant, string> = {
+const VARIANT_TOKEN_KEY: Record<HeaderVariant, keyof typeof sys.typeScale> = {
   large: 'displayLarge',
   medium: 'displayMedium',
   small: 'displaySmall',
@@ -47,6 +48,12 @@ export function HeaderText({
   style,
   ...rest
 }: HeaderTextProps) {
+  const [fontsLoaded] = useFonts({
+    GoogleSans_400Regular: require('./fonts/GoogleSans_400Regular.ttf'),
+    GoogleSans_500Medium: require('./fonts/GoogleSans_500Medium.ttf'),
+    GoogleSans_600SemiBold: require('./fonts/GoogleSans_600SemiBold.ttf'),
+  });
+
   const token = ts[VARIANT_TOKEN_KEY[variant]];
   const weight = emphasized ? token.sysFontWeightEmphasized : token.sysFontWeight;
 
@@ -55,7 +62,7 @@ export function HeaderText({
       accessibilityRole="header"
       style={[
         {
-          fontFamily: FONT_FAMILY[weight],
+          fontFamily: fontsLoaded ? FONT_FAMILY[weight] : undefined,
           fontSize: token.sysFontSize,
           lineHeight: token.sysLineHeight,
           letterSpacing: token.sysTracking,