@retray-dev/ui-kit 2.5.1 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -37,18 +37,19 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=17",
-    "react-native": ">=0.70",
+    "@expo/vector-icons": ">=14.0.0",
+    "@gorhom/bottom-sheet": ">=5.0.0",
+    "@react-native-community/slider": ">=4.0.0",
+    "@react-native-picker/picker": ">=2.0.0",
     "expo-haptics": ">=14.0.0",
     "expo-linear-gradient": ">=13.0.0",
-    "@gorhom/bottom-sheet": ">=5.0.0",
-    "react-native-reanimated": ">=4.0.0",
+    "react": ">=17",
+    "react-native": ">=0.70",
     "react-native-gesture-handler": ">=2.0.0",
-    "react-native-worklets": ">=0.8.0",
+    "react-native-reanimated": ">=4.0.0",
     "react-native-safe-area-context": ">=4.0.0",
-    "@react-native-picker/picker": ">=2.0.0",
-    "@react-native-community/slider": ">=4.0.0",
-    "@expo/vector-icons": ">=14.0.0"
+    "react-native-size-matters": ">=0.4.0",
+    "react-native-worklets": ">=0.8.0"
   },
   "pnpm": {
     "overrides": {
@@ -62,27 +63,28 @@
     ]
   },
   "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "react-native-size-matters": "^0.4.2",
+    "@expo/vector-icons": "^15.1.1",
     "@gorhom/bottom-sheet": "^5.0.0",
-    "@react-native-picker/picker": "2.11.4",
-    "@react-native-community/slider": "^4.5.5",
+    "@react-native-community/slider": "5.0.1",
+    "@react-native-picker/picker": "2.11.1",
     "@types/react": "^19.1.0",
-    "@expo/vector-icons": "^15.1.1",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "expo-haptics": "~15.0.8",
     "expo-linear-gradient": "~15.0.8",
+    "prettier": "^3.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
-    "react-native-worklets": "~0.5.1",
     "react-native-safe-area-context": "~5.6.2",
-    "eslint": "^9.0.0",
-    "@eslint/js": "^9.0.0",
-    "typescript-eslint": "^8.0.0",
-    "eslint-plugin-react": "^7.37.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-config-prettier": "^10.0.0",
-    "prettier": "^3.0.0",
+    "react-native-worklets": "~0.5.1",
     "tsup": "^8.0.0",
-    "typescript": "^5.4.0"
+    "typescript": "^5.4.0",
+    "typescript-eslint": "^8.0.0"
   }
 }

package/src/components/Accordion/Accordion.tsx

@@ -1,22 +1,22 @@
-import React, { useState, useRef } from 'react'
+import React, { useState } from 'react'
 import {
   View,
   Text,
-  TouchableOpacity,
-  Animated,
+  Pressable,
   StyleSheet,
-  LayoutChangeEvent,
   ViewStyle,
 } from 'react-native'
-import ReanimatedAnimated, {
+import Animated, {
   useSharedValue,
+  useDerivedValue,
   useAnimatedStyle,
   withTiming,
   Easing,
 } from 'react-native-reanimated'
 import { Entypo } 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 interface AccordionItem {
   value: string
@@ -46,71 +46,73 @@ function AccordionItemComponent({
   onToggle: () => void
 }) {
   const { colors } = useTheme()
-  const animatedHeight = useSharedValue(0)
-  const animatedRotation = useSharedValue(0)
-  const contentHeight = useRef(0)
-  const scale = useRef(new Animated.Value(1)).current
 
-  const toggle = (open: boolean) => {
-    const easing = open ? Easing.out(Easing.ease) : Easing.in(Easing.ease)
-    animatedHeight.value = withTiming(open ? contentHeight.current : 0, { duration: 220, easing })
-    animatedRotation.value = withTiming(open ? 1 : 0, { duration: 220, easing })
-  }
+  // Shared values — all animation lives on the UI thread
+  const isExpanded = useSharedValue(isOpen)
+  const height = useSharedValue(0)
 
+  // Keep isExpanded in sync with the parent-driven isOpen prop
   React.useEffect(() => {
-    toggle(isOpen)
+    isExpanded.value = isOpen
   }, [isOpen])
 
-  const onLayout = (e: LayoutChangeEvent) => {
-    if (contentHeight.current === 0) {
-      contentHeight.current = e.nativeEvent.layout.height
-      if (isOpen) animatedHeight.value = contentHeight.current
-    }
-  }
+  // Derived animated height — pattern from Reanimated docs:
+  // height * Number(isExpanded) gives 0 when closed and the measured height when open.
+  // withTiming wraps it so every change animates automatically.
+  const derivedHeight = useDerivedValue(() =>
+    withTiming(height.value * Number(isExpanded.value), {
+      duration: 220,
+      easing: isExpanded.value ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
+    })
+  )
 
-  const heightStyle = useAnimatedStyle(() => ({
-    height: animatedHeight.value,
+  const derivedRotation = useDerivedValue(() =>
+    withTiming(isExpanded.value ? 1 : 0, {
+      duration: 220,
+      easing: isExpanded.value ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
+    })
+  )
+
+  const bodyStyle = useAnimatedStyle(() => ({
+    height: derivedHeight.value,
     overflow: 'hidden',
   }))
 
   const rotationStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${animatedRotation.value * 180}deg` }],
+    transform: [{ rotate: `${derivedRotation.value * 180}deg` }],
   }))
 
-  const handlePressIn = () => {
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: true, speed: 40, bounciness: 0 }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 40, bounciness: 4 }).start()
-  }
-
   return (
     <View style={[styles.item, { borderBottomColor: colors.border }]}>
-      <Animated.View style={{ transform: [{ scale }] }}>
-        <TouchableOpacity
-          style={styles.trigger}
-          onPress={() => {
-            Haptics.selectionAsync()
-            onToggle()
+      <Pressable
+        style={({ pressed }) => [styles.trigger, { opacity: pressed ? 0.6 : 1 }]}
+        onPress={() => {
+          hapticSelection()
+          onToggle()
+        }}
+      >
+        <Text style={[styles.triggerText, { color: colors.foreground }]}>{item.trigger}</Text>
+        <Animated.View style={[styles.chevron, rotationStyle]}>
+          <Entypo name="chevron-down" size={20} color={colors.foreground} />
+        </Animated.View>
+      </Pressable>
+
+      {/*
+        The Animated.View height is driven by derivedHeight (0 when closed, full height when open).
+        The inner View uses position:'absolute' so onLayout always measures the natural content
+        height regardless of the animated wrapper's current height — this is the key pattern
+        from the Reanimated docs that prevents the jump.
+      */}
+      <Animated.View style={bodyStyle}>
+        <View
+          style={styles.content}
+          onLayout={(e) => {
+            height.value = e.nativeEvent.layout.height
           }}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-          activeOpacity={1}
-          touchSoundDisabled={true}
         >
-          <Text style={[styles.triggerText, { color: colors.foreground }]}>{item.trigger}</Text>
-          <ReanimatedAnimated.View style={[styles.chevron, rotationStyle]}>
-            <Entypo name="chevron-down" size={20} color={colors.foreground} />
-          </ReanimatedAnimated.View>
-        </TouchableOpacity>
-      </Animated.View>
-
-      <ReanimatedAnimated.View style={heightStyle}>
-        <View style={styles.content} onLayout={onLayout}>
           {item.content}
         </View>
-      </ReanimatedAnimated.View>
+      </Animated.View>
     </View>
   )
 }
@@ -153,18 +155,20 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: 20,
+    paddingVertical: vs(20),
   },
   triggerText: {
-    fontSize: 17,
+    fontSize: ms(17),
     fontWeight: '500',
     flex: 1,
   },
   chevron: {
-    marginLeft: 8,
+    marginLeft: s(8),
   },
+  // position:'absolute' is the key — the inner View escapes the animated wrapper's
+  // clipped height so onLayout always reports the true content height.
   content: {
-    paddingBottom: 20,
+    paddingBottom: vs(20),
     position: 'absolute',
     width: '100%',
   },

package/src/components/Alert/Alert.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
@@ -56,28 +57,28 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderWidth: 1,
-    borderRadius: 8,
-    padding: 16,
-    gap: 12,
+    borderRadius: ms(8),
+    padding: s(16),
+    gap: s(12),
   },
   icon: {
-    marginTop: 2,
+    marginTop: vs(2),
   },
   content: {
     flex: 1,
-    gap: 4,
+    gap: vs(4),
   },
   title: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
-    lineHeight: 20,
+    lineHeight: mvs(20),
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: ms(14),
+    lineHeight: mvs(20),
   },
   defaultIcon: {
-    fontSize: 18,
+    fontSize: ms(18),
     fontWeight: '700',
   },
 })

package/src/components/AlertBanner/AlertBanner.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
@@ -57,9 +58,9 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderWidth: 1,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
+    borderRadius: ms(12),
+    padding: s(16),
+    gap: s(12),
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 4 },
     shadowOpacity: 0.06,
@@ -71,15 +72,15 @@ const styles = StyleSheet.create({
   },
   content: {
     flex: 1,
-    gap: 4,
+    gap: vs(4),
   },
   title: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
-    lineHeight: 20,
+    lineHeight: mvs(20),
   },
   description: {
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: ms(14),
+    lineHeight: mvs(20),
   },
 })

package/src/components/Avatar/Avatar.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { View, Text, Image, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, ms } from '../../utils/scaling'
 
 export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'
 
@@ -14,17 +15,17 @@ export interface AvatarProps {
 }
 
 const sizeMap: Record<AvatarSize, number> = {
-  sm: 28,
-  md: 40,
-  lg: 56,
-  xl: 72,
+  sm: s(28),
+  md: s(40),
+  lg: s(56),
+  xl: s(72),
 }
 
 const fontSizeMap: Record<AvatarSize, number> = {
-  sm: 12,
-  md: 16,
-  lg: 22,
-  xl: 28,
+  sm: ms(12),
+  md: ms(16),
+  lg: ms(22),
+  xl: ms(28),
 }
 
 export function Avatar({ src, fallback, size = 'md', style }: AvatarProps) {

package/src/components/Badge/Badge.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
 export type BadgeSize = 'sm' | 'md' | 'lg'
@@ -17,21 +18,21 @@ export interface BadgeProps {
 }
 
 const sizePadding: Record<BadgeSize, ViewStyle> = {
-  sm: { paddingHorizontal: 8, paddingVertical: 2 },
-  md: { paddingHorizontal: 10, paddingVertical: 4 },
-  lg: { paddingHorizontal: 12, paddingVertical: 6 },
+  sm: { paddingHorizontal: s(8), paddingVertical: vs(2) },
+  md: { paddingHorizontal: s(10), paddingVertical: vs(4) },
+  lg: { paddingHorizontal: s(12), paddingVertical: vs(6) },
 }
 
 const sizeFontSize: Record<BadgeSize, TextStyle> = {
-  sm: { fontSize: 11 },
-  md: { fontSize: 13 },
-  lg: { fontSize: 15 },
+  sm: { fontSize: ms(11) },
+  md: { fontSize: ms(13) },
+  lg: { fontSize: ms(15) },
 }
 
 const sizeIconGap: Record<BadgeSize, number> = {
-  sm: 4,
-  md: 6,
-  lg: 6,
+  sm: s(4),
+  md: s(6),
+  lg: s(6),
 }
 
 export function Badge({ label, children, variant = 'default', size = 'md', icon, style }: BadgeProps) {
@@ -69,7 +70,7 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
 
 const styles = StyleSheet.create({
   container: {
-    borderRadius: 6,
+    borderRadius: ms(6),
     alignSelf: 'flex-start',
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Button/Button.tsx

@@ -12,8 +12,9 @@ import {
 } from 'react-native'
 
 const nativeDriver = Platform.OS !== 'web'
-import * as Haptics from 'expo-haptics'
+import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
@@ -38,15 +39,15 @@ export interface ButtonProps extends TouchableOpacityProps {
 }
 
 const containerSizeStyles: Record<ButtonSize, ViewStyle> = {
-  sm: { paddingHorizontal: 20, paddingVertical: 10 },
-  md: { paddingHorizontal: 24, paddingVertical: 14 },
-  lg: { paddingHorizontal: 32, paddingVertical: 18 },
+  sm: { paddingHorizontal: s(20), paddingVertical: vs(10) },
+  md: { paddingHorizontal: s(24), paddingVertical: vs(14) },
+  lg: { paddingHorizontal: s(32), paddingVertical: vs(18) },
 }
 
 const labelSizeStyles: Record<ButtonSize, TextStyle> = {
-  sm: { fontSize: 15 },
-  md: { fontSize: 17 },
-  lg: { fontSize: 18 },
+  sm: { fontSize: ms(15) },
+  md: { fontSize: ms(17) },
+  lg: { fontSize: ms(18) },
 }
 
 export function Button({
@@ -81,7 +82,7 @@ export function Button({
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+    impactLight()
     onPress?.(e)
   }
 
@@ -156,6 +157,6 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   labelWithIcon: {
-    marginHorizontal: 8,
+    marginHorizontal: s(8),
   },
 })

package/src/components/Card/Card.tsx

@@ -1,7 +1,8 @@
 import React, { useRef } from 'react'
 import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle, TextStyle, Platform } from 'react-native'
-import * as Haptics from 'expo-haptics'
+import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -67,7 +68,7 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
 
   const handlePress = () => {
     if (!onPress) return
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+    impactLight()
     onPress()
   }
 
@@ -146,28 +147,28 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 12,
+    borderRadius: ms(12),
     borderWidth: 1,
   },
   header: {
-    padding: 24,
+    padding: s(24),
     paddingBottom: 0,
-    gap: 8,
+    gap: vs(8),
   },
   title: {
-    fontSize: 20,
+    fontSize: ms(20),
     fontWeight: '600',
-    lineHeight: 28,
+    lineHeight: mvs(28),
   },
   description: {
-    fontSize: 15,
-    lineHeight: 22,
+    fontSize: ms(15),
+    lineHeight: mvs(22),
   },
   content: {
-    padding: 24,
+    padding: s(24),
   },
   footer: {
-    padding: 24,
+    padding: s(24),
     paddingTop: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,10 @@
 import React, { useRef } from 'react'
-import { TouchableOpacity, Animated, View, Text, StyleSheet, ViewStyle } from 'react-native'
-import * as Haptics from 'expo-haptics'
+import { TouchableOpacity, Animated, View, Text, 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, mvs } from '../../utils/scaling'
 
 export interface CheckboxProps {
   checked?: boolean
@@ -23,11 +26,11 @@ export function Checkbox({
 
   const handlePressIn = () => {
     if (disabled) return
-    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 (
@@ -35,7 +38,7 @@ export function Checkbox({
     <TouchableOpacity
       style={[styles.row, style]}
       onPress={() => {
-        Haptics.selectionAsync()
+        hapticSelection()
         onCheckedChange?.(!checked)
       }}
       onPressIn={handlePressIn}
@@ -74,25 +77,25 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12,
+    gap: s(12),
   },
   box: {
-    width: 24,
-    height: 24,
-    borderRadius: 8,
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(8),
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   checkmark: {
-    width: 12,
-    height: 7,
+    width: s(12),
+    height: vs(7),
     borderLeftWidth: 2,
     borderBottomWidth: 2,
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],
   },
   label: {
-    fontSize: 15,
-    lineHeight: 22,
+    fontSize: ms(15),
+    lineHeight: mvs(22),
   },
 })

package/src/components/Chip/Chip.tsx

@@ -9,8 +9,9 @@ import {
   Platform,
   Easing,
 } from 'react-native'
-import * as Haptics from 'expo-haptics'
+import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -68,7 +69,7 @@ export function Chip({ label, selected = false, onPress, style }: ChipProps) {
   }
 
   const handlePress = () => {
-    Haptics.selectionAsync()
+    hapticSelection()
     onPress?.()
   }
 
@@ -154,20 +155,20 @@ const styles = StyleSheet.create({
   wrapper: {},
   chip: {
     borderRadius: 999,
-    paddingHorizontal: 14,
-    paddingVertical: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(8),
     borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center',
   },
   label: {
-    fontSize: 14,
+    fontSize: ms(14),
     fontWeight: '500',
-    lineHeight: 20,
+    lineHeight: mvs(20),
   },
   group: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 8,
+    gap: s(8),
   },
 })