@onlynative/components 0.1.0-alpha.0 → 0.1.0-alpha.3

package/src/test-utils/render-with-theme.tsx

@@ -1,13 +1,13 @@
 import { render, type RenderOptions } from '@testing-library/react-native'
 import type { ReactElement } from 'react'
-import { MaterialProvider } from '@onlynative/core'
+import { ThemeProvider } from '@onlynative/core'
 
 export function renderWithTheme(
   ui: ReactElement,
   options?: Omit<RenderOptions, 'wrapper'>,
 ) {
   return render(ui, {
-    wrapper: ({ children }) => <MaterialProvider>{children}</MaterialProvider>,
+    wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
     ...options,
   })
 }

package/src/text-field/TextField.tsx

@@ -1,4 +1,3 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   Animated,
@@ -11,6 +10,7 @@ import {
 import type { NativeSyntheticEvent, TargetedEvent } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '../utils/icon'
 import { createStyles, labelPositions } from './styles'
 import type { TextFieldProps } from './types'
 
@@ -46,6 +46,9 @@ export function TextField({
   const isFilled = variant === 'filled'
   const hasLeadingIcon = Boolean(leadingIcon)
 
+  const MaterialCommunityIcons =
+    leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null
+
   const { colors, styles } = useMemo(
     () => createStyles(theme, variant),
     [theme, variant],

package/src/text-field/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { TextFieldVariant } from './types'
 import { alphaColor } from '../utils/color'
@@ -51,7 +51,7 @@ interface VariantColors {
 }
 
 function getVariantColors(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: TextFieldVariant,
 ): VariantColors {
   const disabledOpacity = theme.stateLayer.disabledOpacity
@@ -92,7 +92,7 @@ function getVariantColors(
   }
 }
 
-export function createStyles(theme: Theme, variant: TextFieldVariant) {
+export function createStyles(theme: MaterialTheme, variant: TextFieldVariant) {
   const colors = getVariantColors(theme, variant)
   const bodyLarge = theme.typography.bodyLarge
   const bodySmall = theme.typography.bodySmall

package/src/typography/Typography.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react'
 import type { ComponentType, ReactNode } from 'react'
 import type { StyleProp, TextProps, TextStyle } from 'react-native'
-import { Text } from 'react-native'
+import { StyleSheet, Text } from 'react-native'
 import { useTheme } from '@onlynative/core'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { TypographyVariant } from './types'
 
@@ -24,9 +24,9 @@ export interface TypographyProps extends Omit<TextProps, 'children' | 'style'> {
    * @default 'bodyMedium'
    */
   variant?: TypographyVariant
-  /** Override the text color. Defaults to the theme's `onSurface` color. */
+  /** Override the text color. Takes priority over `style.color`. Defaults to the theme's `onSurface` color. */
   color?: string
-  /** Additional text styles merged after the theme typography styles. */
+  /** Additional text styles. Can override the default theme color via `style.color` when no `color` prop is set. */
   style?: StyleProp<TextStyle>
   /**
    * Override the underlying text component (e.g. Animated.Text).
@@ -44,20 +44,32 @@ export function Typography({
   accessibilityRole,
   ...textProps
 }: TypographyProps) {
-  const theme = useTheme() as Theme
+  const theme = useTheme() as MaterialTheme
   const typographyStyle = theme.typography[variant]
-  const colorStyle = useMemo(
-    () => ({ color: color ?? theme.colors.onSurface }),
-    [color, theme.colors.onSurface],
-  )
   const resolvedRole =
     accessibilityRole ?? (HEADING_VARIANTS.has(variant) ? 'header' : undefined)
 
+  // When the consumer overrides fontSize via style, auto-adjust lineHeight
+  // proportionally so text isn't clipped inside overflow:hidden containers.
+  const lineHeightFix = useMemo(() => {
+    if (!style) return undefined
+    const flat = StyleSheet.flatten(style)
+    if (!flat?.fontSize || flat.lineHeight) return undefined
+    const ratio = typographyStyle.lineHeight / typographyStyle.fontSize
+    return { lineHeight: Math.ceil(flat.fontSize * ratio) }
+  }, [style, typographyStyle.fontSize, typographyStyle.lineHeight])
+
   return (
     <Component
       {...textProps}
       accessibilityRole={resolvedRole}
-      style={[typographyStyle, colorStyle, style]}
+      style={[
+        { color: theme.colors.onSurface },
+        typographyStyle,
+        style,
+        lineHeightFix,
+        color != null ? { color } : undefined,
+      ]}
     >
       {children}
     </Component>

package/src/utils/icon.ts

@@ -0,0 +1,30 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let _MCIcons: any = null
+let _resolved = false
+
+/**
+ * Lazily resolves MaterialCommunityIcons from `@expo/vector-icons`.
+ *
+ * Called at render time (not module load) so that components can be
+ * imported without `@expo/vector-icons` installed — the error only
+ * fires when an icon is actually rendered.
+ */
+export function getMaterialCommunityIcons() {
+  if (!_resolved) {
+    _resolved = true
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      const mod = require('@expo/vector-icons/MaterialCommunityIcons')
+      _MCIcons = mod.default || mod
+    } catch {
+      _MCIcons = null
+    }
+  }
+  if (!_MCIcons) {
+    throw new Error(
+      '@expo/vector-icons is required for icon support. ' +
+        'Install it with: npx expo install @expo/vector-icons',
+    )
+  }
+  return _MCIcons
+}