@onlynative/components 0.1.0-alpha.2 → 0.1.0

package/dist/typography/index.js

@@ -25,6 +25,7 @@ __export(typography_exports, {
 module.exports = __toCommonJS(typography_exports);
 
 // src/typography/Typography.tsx
+var import_react = require("react");
 var import_react_native = require("react-native");
 var import_core = require("@onlynative/core");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -48,6 +49,13 @@ function Typography({
   const theme = (0, import_core.useTheme)();
   const typographyStyle = theme.typography[variant];
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
+  const lineHeightFix = (0, import_react.useMemo)(() => {
+    if (!style) return void 0;
+    const flat = import_react_native.StyleSheet.flatten(style);
+    if (!(flat == null ? void 0 : flat.fontSize) || flat.lineHeight) return void 0;
+    const ratio = typographyStyle.lineHeight / typographyStyle.fontSize;
+    return { lineHeight: Math.ceil(flat.fontSize * ratio) };
+  }, [style, typographyStyle.fontSize, typographyStyle.lineHeight]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Component,
     {
@@ -57,6 +65,7 @@ function Typography({
         { color: theme.colors.onSurface },
         typographyStyle,
         style,
+        lineHeightFix,
         color != null ? { color } : void 0
       ],
       children

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlynative/components",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0",
   "description": "Material Design 3 UI components for React Native — Button, Card, Chip, TextField, and more.",
   "private": false,
   "sideEffects": false,
@@ -74,6 +74,11 @@
       "types": "./dist/list/index.d.ts",
       "react-native": "./src/list/index.ts",
       "default": "./dist/list/index.js"
+    },
+    "./keyboard-avoiding-wrapper": {
+      "types": "./dist/keyboard-avoiding-wrapper/index.d.ts",
+      "react-native": "./src/keyboard-avoiding-wrapper/index.ts",
+      "default": "./dist/keyboard-avoiding-wrapper/index.js"
     }
   },
   "typesVersions": {
@@ -113,6 +118,9 @@
       ],
       "list": [
         "dist/list/index.d.ts"
+      ],
+      "keyboard-avoiding-wrapper": [
+        "dist/keyboard-avoiding-wrapper/index.d.ts"
       ]
     }
   },
@@ -140,13 +148,14 @@
     "material-you"
   ],
   "scripts": {
-    "build": "tsup src/index.ts src/typography/index.ts src/layout/index.ts src/button/index.ts src/icon-button/index.ts src/appbar/index.ts src/card/index.ts src/chip/index.ts src/checkbox/index.ts src/radio/index.ts src/switch/index.ts src/text-field/index.ts src/list/index.ts --dts --format cjs --outDir dist --clean",
+    "build": "tsup src/index.ts src/typography/index.ts src/layout/index.ts src/button/index.ts src/icon-button/index.ts src/appbar/index.ts src/card/index.ts src/chip/index.ts src/checkbox/index.ts src/radio/index.ts src/switch/index.ts src/text-field/index.ts src/list/index.ts src/keyboard-avoiding-wrapper/index.ts --dts --format cjs --outDir dist --clean",
     "typecheck": "tsc --noEmit",
     "test": "jest --passWithNoTests"
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.1.0-alpha.2",
+    "@onlynative/core": ">=0.1.0",
+    "@onlynative/utils": ">=0.1.0-alpha.3",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"
@@ -159,6 +168,7 @@
   "devDependencies": {
     "@react-native/babel-preset": "^0.81.5",
     "@onlynative/core": "workspace:*",
+    "@onlynative/utils": "workspace:*",
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.14",
     "@types/react": "^19.0.0",

package/src/appbar/AppBar.tsx

@@ -9,7 +9,7 @@ import { IconButton } from '../icon-button'
 import type { IconButtonProps } from '../icon-button'
 import { Typography } from '../typography'
 import type { TypographyVariant } from '../typography'
-import { selectRTL } from '../utils/rtl'
+import { selectRTL } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { AppBarProps } from './types'
 

package/src/button/Button.tsx

@@ -1,4 +1,3 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable } from 'react-native'
 import { StyleSheet } from 'react-native'
@@ -6,6 +5,7 @@ import { Text } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { ButtonProps } from './types'
 
@@ -75,6 +75,9 @@ export function Button({
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor],
   )
 
+  const MaterialCommunityIcons =
+    leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null
+
   const resolvedIconColor = useMemo(() => {
     const base = StyleSheet.flatten([
       styles.label,

package/src/button/styles.ts

@@ -2,8 +2,7 @@ import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
 import type { ButtonVariant } from './types'
-import { alphaColor, blendColor } from '../utils/color'
-import { elevationStyle } from '../utils/elevation'
+import { alphaColor, blendColor, elevationStyle } from '@onlynative/utils'
 
 interface VariantColors {
   backgroundColor: string

package/src/card/styles.ts

@@ -2,8 +2,7 @@ import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
 import type { CardVariant } from './types'
-import { alphaColor, blendColor } from '../utils/color'
-import { elevationStyle } from '../utils/elevation'
+import { alphaColor, blendColor, elevationStyle } from '@onlynative/utils'
 
 interface VariantColors {
   backgroundColor: string

package/src/checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable, StyleSheet, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { CheckboxProps } from './types'
 
@@ -55,6 +55,10 @@ export function Checkbox({
   const isDisabled = Boolean(disabled)
   const isChecked = Boolean(value)
 
+  const MaterialCommunityIcons = isChecked
+    ? getMaterialCommunityIcons()
+    : null
+
   const theme = useTheme()
   const styles = useMemo(
     () => createStyles(theme, isChecked, containerColor, contentColor),

package/src/checkbox/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
-import { alphaColor, blendColor } from '../utils/color'
+import { alphaColor, blendColor } from '@onlynative/utils'
 
 interface BoxColors {
   backgroundColor: string

package/src/chip/Chip.tsx

@@ -1,9 +1,9 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { ChipProps } from './types'
 
@@ -72,6 +72,12 @@ export function Chip({
       (variant === 'filter' && isSelected),
   )
 
+  const needsIcons =
+    Boolean(leadingIcon) || (variant === 'filter' && isSelected) || showCloseIcon
+  const MaterialCommunityIcons = needsIcons
+    ? getMaterialCommunityIcons()
+    : null
+
   const theme = useTheme()
   const styles = useMemo(
     () =>

package/src/chip/styles.ts

@@ -2,8 +2,7 @@ import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
 import type { ChipVariant } from './types'
-import { alphaColor, blendColor } from '../utils/color'
-import { elevationStyle } from '../utils/elevation'
+import { alphaColor, blendColor, elevationStyle } from '@onlynative/utils'
 
 interface VariantColors {
   backgroundColor: string

package/src/icon-button/IconButton.tsx

@@ -1,16 +1,19 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Pressable } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import {
+  alphaColor,
+  blendColor,
+  getMaterialCommunityIcons,
+} from '@onlynative/utils'
 import { createStyles } from './styles'
 import type {
   IconButtonProps,
   IconButtonSize,
   IconButtonVariant,
 } from './types'
-import { alphaColor, blendColor } from '../utils/color'
 
 function getIconColor(
   variant: IconButtonVariant,
@@ -263,6 +266,7 @@ export function IconButton({
   accessibilityLabel,
   ...props
 }: IconButtonProps) {
+  const MaterialCommunityIcons = getMaterialCommunityIcons()
   const theme = useTheme()
   const styles = useMemo(() => createStyles(theme), [theme])
   const isDisabled = Boolean(disabled)

package/src/icon-button/styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
-import { alphaColor, blendColor } from '../utils/color'
+import { alphaColor, blendColor } from '@onlynative/utils'
 
 export function createStyles(theme: MaterialTheme) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)

package/src/index.ts

@@ -49,3 +49,6 @@ export type {
   ListItemProps,
   ListDividerProps,
 } from './list'
+
+export { KeyboardAvoidingWrapper } from './keyboard-avoiding-wrapper'
+export type { KeyboardAvoidingWrapperProps } from './keyboard-avoiding-wrapper'

package/src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx

@@ -0,0 +1,69 @@
+import { useEffect } from 'react'
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+} from 'react-native'
+
+import type { KeyboardAvoidingWrapperProps } from './types'
+import { styles } from './styles'
+
+const isIOS = Platform.OS === 'ios'
+
+export function KeyboardAvoidingWrapper({
+  children,
+  behavior = 'padding',
+  keyboardVerticalOffset = 0,
+  enabled = true,
+  scrollViewProps,
+  onKeyboardShow,
+  onKeyboardHide,
+  style,
+  contentContainerStyle,
+}: KeyboardAvoidingWrapperProps) {
+  useEffect(() => {
+    const subscriptions: ReturnType<typeof Keyboard.addListener>[] = []
+
+    if (onKeyboardShow) {
+      const showEvent = isIOS
+        ? 'keyboardWillShow'
+        : 'keyboardDidShow'
+      subscriptions.push(
+        Keyboard.addListener(showEvent, onKeyboardShow),
+      )
+    }
+
+    if (onKeyboardHide) {
+      const hideEvent = isIOS
+        ? 'keyboardWillHide'
+        : 'keyboardDidHide'
+      subscriptions.push(
+        Keyboard.addListener(hideEvent, onKeyboardHide),
+      )
+    }
+
+    return () => {
+      subscriptions.forEach((sub) => sub.remove())
+    }
+  }, [onKeyboardShow, onKeyboardHide])
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.root, style]}
+      behavior={behavior}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+      enabled={!isIOS && enabled}
+    >
+      <ScrollView
+        automaticallyAdjustKeyboardInsets={isIOS && enabled}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+        {...scrollViewProps}
+        contentContainerStyle={[styles.container, contentContainerStyle]}
+      >
+        {children}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  )
+}

package/src/keyboard-avoiding-wrapper/index.ts

@@ -0,0 +1,2 @@
+export { KeyboardAvoidingWrapper } from './KeyboardAvoidingWrapper'
+export type { KeyboardAvoidingWrapperProps } from './types'

package/src/keyboard-avoiding-wrapper/styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native'
+
+export const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  container: {
+    flexGrow: 1,
+  },
+})

package/src/keyboard-avoiding-wrapper/types.ts

@@ -0,0 +1,37 @@
+import type { PropsWithChildren } from 'react'
+import type {
+  KeyboardAvoidingViewProps,
+  KeyboardEvent,
+  ScrollViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
+
+export interface KeyboardAvoidingWrapperProps extends PropsWithChildren {
+  /**
+   * Keyboard avoidance strategy.
+   * @default 'padding'
+   */
+  behavior?: KeyboardAvoidingViewProps['behavior']
+  /**
+   * Extra offset added to the keyboard height calculation.
+   * Useful for accounting for headers or tab bars.
+   * @default 0
+   */
+  keyboardVerticalOffset?: number
+  /**
+   * Enable or disable the keyboard avoiding behavior.
+   * @default true
+   */
+  enabled?: boolean
+  /** Props forwarded to the inner `ScrollView`. */
+  scrollViewProps?: ScrollViewProps
+  /** Called when the keyboard is about to show (iOS) or has shown (Android). */
+  onKeyboardShow?: (event: KeyboardEvent) => void
+  /** Called when the keyboard is about to hide (iOS) or has hidden (Android). */
+  onKeyboardHide?: (event: KeyboardEvent) => void
+  /** Style applied to the outer `KeyboardAvoidingView`. */
+  style?: StyleProp<ViewStyle>
+  /** Style applied to the inner `ScrollView` contentContainerStyle. */
+  contentContainerStyle?: StyleProp<ViewStyle>
+}

package/src/list/styles.ts

@@ -2,7 +2,7 @@ import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
 import type { ListItemLines } from './types'
-import { alphaColor, blendColor } from '../utils/color'
+import { alphaColor, blendColor } from '@onlynative/utils'
 
 const ITEM_PADDING_VERTICAL = 12
 const INSET_START = 56

package/src/radio/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
-import { alphaColor } from '../utils/color'
+import { alphaColor } from '@onlynative/utils'
 
 interface RadioColors {
   borderColor: string

package/src/switch/Switch.tsx

@@ -1,9 +1,9 @@
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons'
 import { useMemo } from 'react'
 import { Platform, Pressable, StyleSheet, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { SwitchProps } from './types'
 
@@ -80,6 +80,9 @@ export function Switch({
   }
 
   const iconName = isSelected ? selectedIcon : unselectedIcon
+  const MaterialCommunityIcons = iconName
+    ? getMaterialCommunityIcons()
+    : null
   const iconSize = 16
 
   return (

package/src/switch/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
-import { alphaColor, blendColor } from '../utils/color'
+import { alphaColor, blendColor } from '@onlynative/utils'
 
 interface TrackColors {
   trackColor: string

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 '@onlynative/utils'
 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

@@ -2,8 +2,7 @@ import { StyleSheet } from 'react-native'
 import type { MaterialTheme } from '@onlynative/core'
 
 import type { TextFieldVariant } from './types'
-import { alphaColor } from '../utils/color'
-import { transformOrigin } from '../utils/rtl'
+import { alphaColor, transformOrigin } from '@onlynative/utils'
 
 const CONTAINER_HEIGHT = 56
 const ICON_SIZE = 24

package/src/typography/Typography.tsx

@@ -1,6 +1,7 @@
+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 { MaterialTheme } from '@onlynative/core'
 
@@ -48,6 +49,18 @@ export function Typography({
   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.
+  // Skipped when: no style prop (theme lineHeight is already proportional),
+  // no fontSize override, or consumer explicitly sets lineHeight.
+  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}
@@ -56,6 +69,7 @@ export function Typography({
         { color: theme.colors.onSurface },
         typographyStyle,
         style,
+        lineHeightFix,
         color != null ? { color } : undefined,
       ]}
     >

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

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

package/src/utils/color.ts

@@ -1,64 +0,0 @@
-interface RgbChannels {
-  r: number
-  g: number
-  b: number
-}
-
-function parseHexColor(color: string): RgbChannels | null {
-  const normalized = color.replace('#', '')
-
-  if (normalized.length !== 6 && normalized.length !== 8) {
-    return null
-  }
-
-  const r = Number.parseInt(normalized.slice(0, 2), 16)
-  const g = Number.parseInt(normalized.slice(2, 4), 16)
-  const b = Number.parseInt(normalized.slice(4, 6), 16)
-
-  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
-    return null
-  }
-
-  return { r, g, b }
-}
-
-function clampAlpha(alpha: number): number {
-  return Math.max(0, Math.min(1, alpha))
-}
-
-export function alphaColor(color: string, alpha: number): string {
-  const channels = parseHexColor(color)
-  const boundedAlpha = clampAlpha(alpha)
-
-  if (!channels) {
-    return color
-  }
-
-  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`
-}
-
-export function blendColor(
-  base: string,
-  overlay: string,
-  overlayAlpha: number,
-): string {
-  const baseChannels = parseHexColor(base)
-  const overlayChannels = parseHexColor(overlay)
-  const boundedAlpha = clampAlpha(overlayAlpha)
-
-  if (!baseChannels || !overlayChannels) {
-    return alphaColor(overlay, boundedAlpha)
-  }
-
-  const r = Math.round(
-    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r,
-  )
-  const g = Math.round(
-    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g,
-  )
-  const b = Math.round(
-    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b,
-  )
-
-  return `rgb(${r}, ${g}, ${b})`
-}

package/src/utils/elevation.ts

@@ -1,33 +0,0 @@
-import { Platform } from 'react-native'
-import type { ViewStyle } from 'react-native'
-import type { ElevationLevel } from '@onlynative/core'
-
-/**
- * Converts a theme elevation level into platform-appropriate shadow styles.
- * - Native: uses shadow* props + elevation
- * - Web: uses boxShadow string
- */
-export function elevationStyle(level: ElevationLevel): ViewStyle {
-  if (Platform.OS === 'web') {
-    const { shadowOffset, shadowOpacity, shadowRadius } = level
-
-    if (shadowOpacity === 0) {
-      return { boxShadow: 'none' } as ViewStyle
-    }
-
-    return {
-      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`,
-    } as ViewStyle
-  }
-
-  return {
-    shadowColor: level.shadowColor,
-    shadowOffset: {
-      width: level.shadowOffset.width,
-      height: level.shadowOffset.height,
-    },
-    shadowOpacity: level.shadowOpacity,
-    shadowRadius: level.shadowRadius,
-    elevation: level.elevation,
-  }
-}

package/src/utils/rtl.ts

@@ -1,19 +0,0 @@
-import { I18nManager } from 'react-native'
-
-/**
- * Returns the appropriate transform origin for animations that scale
- * from a horizontal edge (e.g. label shrink in TextField).
- */
-export function transformOrigin(
-  vertical: 'top' | 'center' | 'bottom' = 'top',
-): string {
-  return I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`
-}
-
-/**
- * Picks a value based on layout direction.
- * Useful for selecting mirrored icons or other direction-dependent values.
- */
-export function selectRTL<T>(ltr: T, rtl: T): T {
-  return I18nManager.isRTL ? rtl : ltr
-}