@onlynative/components 0.1.0-alpha.3 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlynative/components",
-  "version": "0.1.0-alpha.3",
+  "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.3",
+    "@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

@@ -5,7 +5,7 @@ import { Text } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
-import { getMaterialCommunityIcons } from '../utils/icon'
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { ButtonProps } from './types'
 

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

@@ -3,7 +3,7 @@ import { Platform, Pressable, StyleSheet, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
-import { getMaterialCommunityIcons } from '../utils/icon'
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { CheckboxProps } from './types'
 

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

@@ -3,7 +3,7 @@ import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
-import { getMaterialCommunityIcons } from '../utils/icon'
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { ChipProps } from './types'
 

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

@@ -3,14 +3,17 @@ import { Pressable } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
-import { getMaterialCommunityIcons } from '../utils/icon'
+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,

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

@@ -3,7 +3,7 @@ import { Platform, Pressable, StyleSheet, View } from 'react-native'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
-import { getMaterialCommunityIcons } from '../utils/icon'
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles } from './styles'
 import type { SwitchProps } from './types'
 

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

@@ -10,7 +10,7 @@ import {
 import type { NativeSyntheticEvent, TargetedEvent } from 'react-native'
 import { useTheme } from '@onlynative/core'
 
-import { getMaterialCommunityIcons } from '../utils/icon'
+import { getMaterialCommunityIcons } from '@onlynative/utils'
 import { createStyles, labelPositions } from './styles'
 import type { TextFieldProps } from './types'
 

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

@@ -51,6 +51,8 @@ export function Typography({
 
   // 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)

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/icon.ts

@@ -1,30 +0,0 @@
-// 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
-}

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
-}