Move font and text style to theme

package.json

@@ -1,7 +1,12 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.73.0",
+  "version": "1.74.0",
   "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./theme": "./src/theme/index.ts",
+    "./styles": "./src/styles/index.ts"
+  },
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
   "license": "MIT",
@@ -15,7 +20,6 @@
     "@react-navigation/native": "^7.1.26",
     "@rnx-kit/align-deps": "^3.3.4",
     "@testing-library/react-native": "^13.3.3",
-    "@types/color": "^4.2.0",
     "@types/jest": "^30.0.0",
     "@types/react": "^19.2.0",
     "eslint": "^9.39.2",
@@ -50,13 +54,14 @@
     "src"
   ],
   "peerDependencies": {
-    "@react-navigation/native": "^6.0.8",
-    "react": "19.2.0",
-    "react-native": "0.83.1"
+    "@react-navigation/native": "^7.0.0",
+    "react": "^19.0.0",
+    "react-native": ">=0.83.0",
+    "react-native-svg": ">=15.0.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/pro-light-svg-icons": "^6.7.2",
     "@fortawesome/pro-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-native-fontawesome": "^0.3.2",

src/@types/font.ts

@@ -11,7 +11,8 @@ import { MixedSizeCSSPropertiesKeys } from 'react-native-render-html'
  */
 export type FontStyle = TextStyle & { overflow?: 'visible' | 'hidden' | undefined } & {
   [k in MixedSizeCSSPropertiesKeys]?: number | string
-}
+} & Required<Pick<TextStyle, 'fontSize' | 'lineHeight'>>
+
 export type FontName =
   | 'extraSmall'
   | 'small'

src/components/BackButton.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { NavigationProp, ParamListBase } from '@react-navigation/native'
 
 import IconButton from '../components/IconButton'
-import { useTheme } from '../theme/ThemeProvider'
+import { useTheme } from '../theme'
 
 type Props = {
   navigation: NavigationProp<ParamListBase>

src/components/BottomSheet.tsx

@@ -4,10 +4,8 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { useTheme as useNavigationTheme } from '@react-navigation/native'
 
 import LargeButton, { LargeButtonProps } from './LargeButton'
-import { Theme } from '../@types/theme'
 import { shadow } from '../styles'
-import textStyle from '../styles/text'
-import { useStyles, useTheme } from '../theme/ThemeProvider'
+import { Theme, useStyles, useTheme } from '../theme/'
 
 type Props = {
   title?: string
@@ -31,13 +29,13 @@ const BottomSheet = ({ title, text, buttons = [], style, testID, children }: Pro
           <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
             {title && (
               <View style={{ flex: 1 }}>
-                <Text style={textStyle.lead}>{title}</Text>
+                <Text style={theme.text.lead}>{title}</Text>
               </View>
             )}
           </View>
           {text && (
             <View style={{ marginTop: theme.margin.half }}>
-              <Text style={textStyle.body}>{text}</Text>
+              <Text style={theme.text.body}>{text}</Text>
             </View>
           )}
           {children}

src/components/BrandIcon.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
 
 import BrandIcons, { BrandIconName } from '../lib/BrandIcons'
-import { useTheme } from '../theme/ThemeProvider'
+import { useTheme } from '../theme'
 
 type Props = {
   name: BrandIconName

src/components/Checkbox.tsx

@@ -3,7 +3,7 @@ import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-
 
 import { Icon } from './Icon'
 import Log from '../lib/Log'
-import { useTheme } from '../theme/ThemeProvider'
+import { useTheme } from '../theme'
 
 type Props = {
   enabled: boolean

src/components/Chip.tsx

@@ -10,10 +10,7 @@ import {
   ViewStyle,
 } from 'react-native'
 
-import { Theme } from '../@types/theme'
-import { fontSize } from '../styles'
-import appTextStyle from '../styles/text'
-import { useStyles, useTheme } from '../theme/ThemeProvider'
+import { Theme, useStyles, useTheme } from '../theme'
 
 type Props = {
   text?: string
@@ -48,10 +45,10 @@ const createStyles = (theme: Theme) =>
       justifyContent: 'center',
     },
     chipText: {
-      ...appTextStyle.body,
+      ...theme.text.body,
       color: theme.color.white,
       lineHeight: theme.margin.common,
-      fontSize: fontSize.medium,
+      fontSize: theme.fontSize.medium,
     },
     chipContainer: {
       backgroundColor: theme.color.accentLime400,

src/components/ContentImage.tsx

@@ -4,9 +4,8 @@ import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'rea
 import ScalableImage from 'react-native-scalable-image'
 
 import Lightbox from './Lightbox'
-import { Theme } from '../@types/theme'
-import { font, rounded, shadow } from '../styles'
-import { useTheme } from '../theme/ThemeProvider'
+import { rounded, shadow } from '../styles'
+import { Theme, useTheme } from '../theme'
 
 type Props = {
   src: string
@@ -89,12 +88,12 @@ const createStyles = (theme: Theme) =>
       justifyContent: 'center',
     },
     title: {
-      ...font.smallBold,
+      ...theme.font.smallBold,
       color: theme.color.black,
       marginBottom: theme.margin.quarter,
     },
     description: {
-      ...font.small,
+      ...theme.font.small,
       color: theme.color.grey500,
     },
   })

src/components/Date.tsx

@@ -3,7 +3,6 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
-import textStyle from '../styles/text'
 import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
@@ -19,7 +18,7 @@ const Date = ({ date, containerStyle }: Props) => {
       text={date}
       style={{
         containerStyle,
-        textStyle: textStyle.light,
+        textStyle: theme.text.light,
       }}
       singleLineText
     />

src/components/Disclose.tsx

@@ -2,10 +2,8 @@ import React from 'react'
 import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
-import { Theme } from '../@types/theme'
 import Log from '../lib/Log'
-import appTextStyle from '../styles/text'
-import { useStyles, useTheme } from '../theme/ThemeProvider'
+import { Theme, useStyles, useTheme } from '../theme'
 
 type Props = {
   text: string
@@ -22,7 +20,7 @@ const Disclose = ({ text, onPress, textStyle, containerStyle }: Props) => {
   return (
     <TouchableOpacity activeOpacity={0.5} onPress={onPress}>
       <View style={[styles.containerStyle, containerStyle]}>
-        <Text style={[appTextStyle.link, textStyle]}>{text}</Text>
+        <Text style={[theme.text.link, textStyle]}>{text}</Text>
         <Icon name="chevron-right" size={theme.icon.size.xl} />
       </View>
     </TouchableOpacity>

src/components/DocumentLink.tsx

@@ -3,7 +3,6 @@ import { StyleProp, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
 import IconText from './IconText'
-import textStyle from '../styles/text'
 import { useTheme } from '../theme/ThemeProvider'
 
 type Props = {
@@ -21,7 +20,7 @@ const DocumentLink = ({ onPress, containerStyle, label }: Props) => {
       text={label}
       style={{
         containerStyle,
-        textStyle: textStyle.link,
+        textStyle: theme.text.link,
       }}
       onPress={onPress}
     />

src/components/IconText.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
 
-import { Theme } from '../@types/theme'
-import { useStyles } from '../theme/ThemeProvider'
+import { Theme, useStyles } from '../theme'
 
 type IconTextStyle = {
   containerStyle?: StyleProp<ViewStyle>

src/components/InputField.tsx

@@ -3,10 +3,8 @@ import { Platform, StyleProp, StyleSheet, Text, TextInput, TextInputProps, View,
 
 import { Icon } from './Icon'
 import IconText from './IconText'
-import { Theme } from '../@types/theme'
-import { font, inputStyles, layout, rounded } from '../styles'
-import textStyle from '../styles/text'
-import { useStyles, useTheme } from '../theme/ThemeProvider'
+import { font, layout, rounded } from '../styles'
+import { Theme, createInputStyles, useStyles, useTheme } from '../theme'
 
 type Props = {
   containerStyle?: StyleProp<ViewStyle>
@@ -102,19 +100,22 @@ const InputField = ({
 
 export default InputField
 
-const createStyles = (theme: Theme) =>
-  StyleSheet.create({
+// eslint-disable-next-line observation/no-function-without-logging
+const createStyles = (theme: Theme) => {
+  const inputStyles = createInputStyles(theme)
+
+  return StyleSheet.create({
     containerStyle: {
       flexDirection: 'column',
     },
     labelStyle: {
-      ...textStyle.inputLabel,
+      ...theme.text.inputLabel,
       marginBottom: theme.margin.half,
     },
     inputStyle: {
       ...rounded.normal,
       ...inputStyles.input,
-      ...textStyle.input,
+      ...theme.text.input,
     },
     rightIcon: {
       ...layout.absoluteRight,
@@ -129,3 +130,4 @@ const createStyles = (theme: Theme) =>
       color: theme.color.grey800,
     },
   })
+}

src/components/LargeButton.tsx

@@ -2,14 +2,12 @@ import React from 'react'
 import { StyleProp, StyleSheet, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
 
 import { Icon } from './Icon'
-import { Theme } from '../@types/theme'
 import { IconName } from '../lib/Icons'
 import * as LargeButtonStyles from '../lib/LargeButtonStyles'
 import { LargeButtonStyle } from '../lib/LargeButtonStyles'
 import Log from '../lib/Log'
 import { rounded } from '../styles'
-import appTextStyle from '../styles/text'
-import { useStyles, useTheme } from '../theme/ThemeProvider'
+import { Theme, useStyles, useTheme } from '../theme'
 
 type LargeButtonProps = {
   title: string
@@ -100,7 +98,7 @@ const createStyles = (theme: Theme) =>
     },
     title: {
       textAlignVertical: 'center',
-      ...appTextStyle.lead,
+      ...theme.text.lead,
     },
     titleContainer: {
       marginHorizontal: theme.margin.common,