@retray-dev/ui-kit 2.5.1 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "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,8 @@ 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'
+import { renderIcon } from '../../utils/icons'
 
 export type AlertBannerVariant = 'default' | 'destructive' | 'success'
 
@@ -10,10 +12,17 @@ export interface AlertBannerProps {
   description?: string
   variant?: AlertBannerVariant
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+   * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the variant title color. */
+  iconColor?: string
   style?: ViewStyle
 }
 
-export function AlertBanner({ title, description, variant = 'default', icon, style }: AlertBannerProps) {
+export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
   const { colors } = useTheme()
 
   const borderColor =
@@ -40,9 +49,13 @@ export function AlertBanner({ title, description, variant = 'default', icon, sty
       <Entypo name="info-with-circle" size={18} color={titleColor} />
     )
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, 18, iconColor ?? titleColor)
+    : icon ?? defaultIcon
+
   return (
     <View style={[styles.container, { backgroundColor: colors.card, borderColor }, style]}>
-      <View style={styles.icon}>{icon ?? defaultIcon}</View>
+      <View style={styles.icon}>{effectiveIcon}</View>
       <View style={styles.content}>
         {title ? <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text> : null}
         {description ? (
@@ -57,9 +70,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 +84,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,8 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
+import { s, vs, ms } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
 export type BadgeSize = 'sm' | 'md' | 'lg'
@@ -13,28 +15,37 @@ export interface BadgeProps {
   size?: BadgeSize
   /** Icon rendered before the label/children. */
   icon?: React.ReactNode
+  /**
+   * Icon name from `@expo/vector-icons` rendered before the label.
+   * See https://icons.expo.fyi. Takes precedence over `icon`.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the variant foreground color. */
+  iconColor?: string
   style?: ViewStyle
 }
 
 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) {
+const sizeIconSize: Record<BadgeSize, number> = { sm: 10, md: 12, lg: 14 }
+
+export function Badge({ label, children, variant = 'default', size = 'md', icon, iconName, iconColor, style }: BadgeProps) {
   const { colors } = useTheme()
 
   const containerStyle: ViewStyle = {
@@ -51,11 +62,15 @@ export function Badge({ label, children, variant = 'default', size = 'md', icon,
     outline: colors.foreground,
   }[variant]
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor)
+    : icon
+
   const content = children ?? label
 
   return (
     <View style={[styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style]}>
-      {icon ? <View style={styles.iconContainer}>{icon}</View> : null}
+      {effectiveIcon ? <View style={styles.iconContainer}>{effectiveIcon}</View> : null}
       {typeof content === 'string' ? (
         <Text style={[styles.label, { color: textColor }, sizeFontSize[size]]} allowFontScaling={true}>
           {content}
@@ -69,7 +84,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,10 @@ 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'
+import { renderIcon } from '../../utils/icons'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
 export type ButtonSize = 'sm' | 'md' | 'lg'
@@ -33,22 +35,32 @@ export interface ButtonProps extends TouchableOpacityProps {
   fullWidth?: boolean
   /** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
   icon?: React.ReactNode | ((props: { label: string; size: ButtonSize; variant: ButtonVariant }) => React.ReactNode)
+  /**
+   * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"arrow-right"`).
+   * See https://icons.expo.fyi to browse available icons.
+   * Takes precedence over `icon` when both are supplied.
+   */
+  iconName?: string
+  /** Override the resolved icon color. Defaults to the label foreground color for the active variant. */
+  iconColor?: string
   /** Side the icon appears on. Defaults to `'left'`. */
   iconPosition?: 'left' | 'right'
 }
 
 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) },
 }
 
+const iconSizeMap: Record<ButtonSize, number> = { sm: 16, md: 18, lg: 20 }
+
 export function Button({
   label,
   variant = 'primary',
@@ -56,6 +68,8 @@ export function Button({
   loading = false,
   fullWidth = false,
   icon,
+  iconName,
+  iconColor,
   iconPosition = 'left',
   disabled,
   style,
@@ -81,7 +95,7 @@ export function Button({
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+    impactLight()
     onPress?.(e)
   }
 
@@ -101,6 +115,10 @@ export function Button({
     destructive: { color: colors.destructiveForeground },
   }[variant]
 
+  const effectiveIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, iconSizeMap[size], iconColor ?? (labelVariantStyle.color as string))
+    : typeof icon === 'function' ? icon({ label, size, variant }) : icon
+
   const spinnerColor =
     variant === 'destructive' ? colors.destructiveForeground
     : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
@@ -129,9 +147,9 @@ export function Button({
           <ActivityIndicator size="small" color={spinnerColor} />
         ) : (
           <>
-            {icon && iconPosition === 'left' && <>{typeof icon === 'function' ? icon({ label, size, variant }) : icon}</>}
-            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], icon ? styles.labelWithIcon : undefined]}>{label}</Text>
-            {icon && iconPosition === 'right' && <>{typeof icon === 'function' ? icon({ label, size, variant }) : icon}</>}
+            {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
+            <Text style={[styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : undefined]}>{label}</Text>
+            {effectiveIcon && iconPosition === 'right' && <>{effectiveIcon}</>}
           </>
         )}
       </TouchableOpacity>
@@ -156,6 +174,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',