@retray-dev/ui-kit 2.5.1 → 2.5.2

package/src/components/Slider/Slider.tsx

@@ -1,8 +1,9 @@
 import React, { useRef } from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import RNSlider from '@react-native-community/slider'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { vs, ms } from '../../utils/scaling'
 
 export interface SliderProps {
   value?: number
@@ -39,7 +40,7 @@ export function Slider({
   const handleValueChange = (v: number) => {
     if (step && v !== lastSteppedValue.current) {
       lastSteppedValue.current = v
-      Haptics.selectionAsync()
+      hapticSelection()
     }
     onValueChange?.(v)
   }
@@ -82,7 +83,7 @@ export function Slider({
 
 const styles = StyleSheet.create({
   wrapper: {
-    gap: 8,
+    gap: vs(8),
   },
   header: {
     flexDirection: 'row',
@@ -90,16 +91,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '500',
   },
   valueText: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
   },
   slider: {
     width: '100%',
-    height: 40,
+    height: vs(40),
   },
   disabled: {
     opacity: 0.45,

package/src/components/Switch/Switch.tsx

@@ -2,13 +2,14 @@ import React, { useEffect, useRef } from 'react'
 import { TouchableOpacity, Animated, StyleSheet, ViewStyle, Platform, View } from 'react-native'
 
 const nativeDriver = Platform.OS !== 'web'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
 
-const TRACK_WIDTH = 60
-const TRACK_HEIGHT = 36
-const THUMB_SIZE = 28
-const THUMB_OFFSET = 4
+const TRACK_WIDTH = s(60)
+const TRACK_HEIGHT = vs(36)
+const THUMB_SIZE = s(28)
+const THUMB_OFFSET = s(4)
 const THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2
 
 export interface SwitchProps {
@@ -47,7 +48,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style }: Sw
     <View style={[{ opacity: disabled ? 0.45 : 1 }, style]}>
       <TouchableOpacity
         onPress={() => {
-          Haptics.selectionAsync()
+          hapticSelection()
           onCheckedChange?.(!checked)
         }}
         disabled={disabled}

package/src/components/Tabs/Tabs.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react'
-import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle } from 'react-native'
-import * as Haptics from 'expo-haptics'
+import { View, TouchableOpacity, Text, Animated, StyleSheet, ViewStyle, Platform } from 'react-native'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
+
+const nativeDriver = Platform.OS !== 'web'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 export interface TabItem {
   label: string
@@ -43,11 +46,11 @@ function TabTrigger({
   const scale = useRef(new Animated.Value(1)).current
 
   const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   return (
@@ -123,7 +126,7 @@ export function Tabs({ tabs, value, onValueChange, children, style }: TabsProps)
   }, [active])
 
   const handlePress = (v: string) => {
-    Haptics.selectionAsync()
+    hapticSelection()
     if (!value) setInternal(v)
     onValueChange?.(v)
   }
@@ -180,16 +183,16 @@ export function TabsContent({ value, activeValue, children, style }: TabsContent
 const styles = StyleSheet.create({
   list: {
     flexDirection: 'row',
-    borderRadius: 12,
-    padding: 4,
-    gap: 4,
+    borderRadius: ms(12),
+    padding: s(4),
+    gap: s(4),
   },
   pill: {},
   trigger: {
     flex: 1,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    borderRadius: 8,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: ms(8),
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 1,
@@ -198,15 +201,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 8,
+    gap: s(8),
   },
   triggerIcon: {
-    marginRight: 6,
+    marginRight: s(6),
     alignItems: 'center',
     justifyContent: 'center',
   },
   triggerLabel: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '400',
   },
   activeTriggerLabel: {

package/src/components/Text/Text.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { ms, mvs } from '../../utils/scaling'
 
 export type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label'
 
@@ -10,12 +11,12 @@ export interface TextProps extends RNTextProps {
 }
 
 const variantStyles: Record<TextVariant, TextStyle> = {
-  h1: { fontSize: 40, fontWeight: '700', lineHeight: 52 },
-  h2: { fontSize: 28, fontWeight: '700', lineHeight: 36 },
-  h3: { fontSize: 22, fontWeight: '600', lineHeight: 30 },
-  body: { fontSize: 17, fontWeight: '400', lineHeight: 26 },
-  caption: { fontSize: 13, fontWeight: '400', lineHeight: 20 },
-  label: { fontSize: 15, fontWeight: '500', lineHeight: 22 },
+  h1: { fontSize: ms(40), fontWeight: '700', lineHeight: mvs(52) },
+  h2: { fontSize: ms(28), fontWeight: '700', lineHeight: mvs(36) },
+  h3: { fontSize: ms(22), fontWeight: '600', lineHeight: mvs(30) },
+  body: { fontSize: ms(17), fontWeight: '400', lineHeight: mvs(26) },
+  caption: { fontSize: ms(13), fontWeight: '400', lineHeight: mvs(20) },
+  label: { fontSize: ms(15), fontWeight: '500', lineHeight: mvs(22) },
 }
 
 export function Text({ variant = 'body', color, style, children, ...props }: TextProps) {

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 const webInputResetStyle: any =
   Platform.OS === 'web'
@@ -50,7 +51,7 @@ export function Textarea({
                 : colors.border,
             color: colors.foreground,
             backgroundColor: colors.background,
-            minHeight: rows * 30,
+            minHeight: rows * vs(30),
           },
           webInputResetStyle,
           style,
@@ -79,20 +80,20 @@ export function Textarea({
 
 const styles = StyleSheet.create({
   container: {
-    gap: 8,
+    gap: vs(8),
   },
   label: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '500',
   },
   input: {
     borderWidth: 1.5,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    fontSize: 17,
+    borderRadius: ms(8),
+    paddingHorizontal: s(16),
+    paddingVertical: vs(14),
+    fontSize: ms(17),
   },
   helperText: {
-    fontSize: 13,
+    fontSize: ms(13),
   },
 })

package/src/components/Toast/Toast.tsx

@@ -11,8 +11,9 @@ import Animated, {
 import { scheduleOnRN } from 'react-native-worklets'
 import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import * as Haptics from 'expo-haptics'
+import { notificationSuccess, notificationError, impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 export type ToastVariant = 'default' | 'destructive' | 'success'
 
@@ -148,11 +149,11 @@ export function ToastProvider({ children }: ToastProviderProps) {
   const toast = useCallback((item: Omit<ToastItem, 'id'>) => {
     const id = Math.random().toString(36).slice(2)
     if (item.variant === 'success') {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
+      notificationSuccess()
     } else if (item.variant === 'destructive') {
-      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+      notificationError()
     } else {
-      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+      impactLight()
     }
     setToasts((prev) => [{ ...item, id }, ...prev].slice(0, 3))
   }, [])
@@ -176,23 +177,23 @@ export function ToastProvider({ children }: ToastProviderProps) {
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
-    left: 16,
-    right: 16,
-    gap: 8,
+    left: s(16),
+    right: s(16),
+    gap: vs(8),
     zIndex: 9999,
   },
   containerWeb: {
     left: undefined,
     right: undefined,
     alignSelf: 'center',
-    width: 400,
+    width: s(400),
   },
   toast: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderRadius: 16,
-    paddingHorizontal: 20,
-    paddingVertical: 14,
+    borderRadius: ms(16),
+    paddingHorizontal: s(20),
+    paddingVertical: vs(14),
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.15,
@@ -201,23 +202,23 @@ const styles = StyleSheet.create({
   },
   toastContent: {
     flex: 1,
-    gap: 4,
+    gap: vs(4),
   },
   leftIconContainer: {
-    width: 40,
+    width: s(40),
     alignItems: 'center',
     justifyContent: 'center',
-    marginRight: 8,
+    marginRight: s(8),
   },
   toastTitle: {
-    fontSize: 15,
+    fontSize: ms(15),
     fontWeight: '600',
   },
   toastDescription: {
-    fontSize: 14,
+    fontSize: ms(14),
   },
   dismissButton: {
-    padding: 8,
-    marginLeft: 4,
+    padding: s(8),
+    marginLeft: s(4),
   },
 })

package/src/components/Toggle/Toggle.tsx

@@ -1,8 +1,9 @@
 import React, { useRef, useEffect } from 'react'
 import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing } from 'react-native'
 import { FontAwesome5 } from '@expo/vector-icons'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
@@ -20,9 +21,9 @@ export interface ToggleProps extends TouchableOpacityProps {
 }
 
 const sizeStyles: Record<ToggleSize, ViewStyle> = {
-  sm: { paddingHorizontal: 12, paddingVertical: 8, minWidth: 40, minHeight: 40 },
-  md: { paddingHorizontal: 16, paddingVertical: 12, minWidth: 44, minHeight: 44 },
-  lg: { paddingHorizontal: 20, paddingVertical: 14, minWidth: 48, minHeight: 48 },
+  sm: { paddingHorizontal: s(12), paddingVertical: vs(8), minWidth: s(40), minHeight: vs(40) },
+  md: { paddingHorizontal: s(16), paddingVertical: vs(12), minWidth: s(44), minHeight: vs(44) },
+  lg: { paddingHorizontal: s(20), paddingVertical: vs(14), minWidth: s(48), minHeight: vs(48) },
 }
 
 export function Toggle({
@@ -101,7 +102,7 @@ export function Toggle({
     <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled, style]}>
       <TouchableOpacity
         onPress={() => {
-          Haptics.selectionAsync()
+          hapticSelection()
           onPressedChange?.(!pressed)
         }}
         onPressIn={handlePressIn}
@@ -130,19 +131,19 @@ export function Toggle({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: 8,
+    borderRadius: ms(8),
   },
   inner: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 8,
+    gap: s(8),
   },
   disabled: {
     opacity: 0.45,
   },
   label: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
   },
 })

package/src/utils/haptics.ts

@@ -0,0 +1,32 @@
+import { Platform } from 'react-native'
+
+/**
+ * Web-safe haptics helpers. All calls are no-ops on web since expo-haptics
+ * is a native-only module and throws on web.
+ */
+
+let Haptics: typeof import('expo-haptics') | null = null
+
+if (Platform.OS !== 'web') {
+  Haptics = require('expo-haptics')
+}
+
+export function selectionAsync(): void {
+  Haptics?.selectionAsync()
+}
+
+export function impactLight(): void {
+  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+}
+
+export function impactMedium(): void {
+  Haptics?.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
+}
+
+export function notificationSuccess(): void {
+  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Success)
+}
+
+export function notificationError(): void {
+  Haptics?.notificationAsync(Haptics.NotificationFeedbackType.Error)
+}

package/src/utils/scaling.ts

@@ -0,0 +1,26 @@
+import { Platform } from 'react-native'
+import {
+  scale,
+  verticalScale,
+  moderateScale,
+  moderateVerticalScale,
+} from 'react-native-size-matters'
+
+/**
+ * Scaling utilities wrapping react-native-size-matters.
+ *
+ * On native: scales relative to guideline base 350×680 (~5" mobile).
+ * On web: identity functions — no scaling, values used as-is (px in web = pt on a standard display).
+ *
+ * Usage:
+ *   s(n)   — scale horizontal values  (paddingHorizontal, width, gap)
+ *   vs(n)  — scale vertical values    (paddingVertical, height, minHeight)
+ *   ms(n)  — moderate scale           (fontSize, borderRadius)
+ *   mvs(n) — moderate vertical scale  (lineHeight)
+ */
+const isWeb = Platform.OS === 'web'
+
+export const s   = isWeb ? (n: number) => n : scale
+export const vs  = isWeb ? (n: number) => n : verticalScale
+export const ms  = isWeb ? (n: number, _factor?: number) => n : moderateScale
+export const mvs = isWeb ? (n: number, _factor?: number) => n : moderateVerticalScale