@retray-dev/ui-kit 6.1.0 → 7.0.1

package/src/components/MediaCard/MediaCard.tsx

@@ -1,24 +1,24 @@
-import React, { useRef, useState } from 'react'
+import React from 'react'
 import {
   View,
   Image,
   Text,
   TouchableOpacity,
-  Animated,
   StyleSheet,
   ViewStyle,
   ImageSourcePropType,
   Platform,
 } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { useHover } from '../../utils/hover'
+import { usePressScale } from '../../utils/usePressScale'
+import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 import { RADIUS, SHADOWS } from '../../tokens'
 
-const nativeDriver = Platform.OS !== 'web'
-
 export type MediaCardAspectRatio = '1:1' | '4:3' | '16:9' | '4:5' | '3:2'
 
 const aspectRatioMap: Record<MediaCardAspectRatio, number> = {
@@ -57,9 +57,11 @@ export interface MediaCardProps {
   imageStyle?: ViewStyle
   /** Additional content rendered below caption. */
   footer?: React.ReactNode
+  /** Accessibility label override. Defaults to title (and subtitle if present). */
+  accessibilityLabel?: string
 }
 
-export function MediaCard({
+function MediaCardBase({
   imageSource,
   aspectRatio = '4:3',
   badge,
@@ -74,20 +76,16 @@ export function MediaCard({
   style,
   imageStyle,
   footer,
+  accessibilityLabel,
 }: MediaCardProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
   const { hovered, hoverHandlers } = useHover()
-
-  const handlePressIn = () => {
-    if (!onPress) return
-    Animated.spring(scale, { toValue: 0.98, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
-  }
-
-  const handlePressOut = () => {
-    if (!onPress) return
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.card,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress,
+  })
 
   const handlePress = () => {
     if (!onPress) return
@@ -102,6 +100,8 @@ export function MediaCard({
     ? renderIcon(actionIconName, 18, actionActive ? colors.primary : colors.background)
     : actionIcon ?? renderIcon('heart', 18, actionActive ? colors.primary : colors.background)
 
+  const a11yLabel = accessibilityLabel ?? [title, subtitle].filter(Boolean).join('. ')
+
   const cardContent = (
     <View
       style={[
@@ -111,9 +111,8 @@ export function MediaCard({
       ]}
       {...(Platform.OS === 'web' ? hoverHandlers : {})}
     >
-      {/* Image area */}
       <View style={[styles.imageContainer, imageStyle]}>
-        <View style={{ paddingTop: `${ratio * 100}%` as any }}>
+        <View style={{ paddingTop: `${ratio * 100}%` as `${number}%` }}>
           <View style={StyleSheet.absoluteFill}>
             {imageSource ? (
               <Image
@@ -127,27 +126,27 @@ export function MediaCard({
           </View>
         </View>
 
-        {/* Badge — top left */}
         {badge && (
           <View style={styles.badgeContainer}>
             {badge}
           </View>
         )}
 
-        {/* Action icon — top right */}
         {(onActionPress || actionIcon || actionIconName) && (
           <TouchableOpacity
             style={[styles.actionButton, { backgroundColor: 'rgba(0,0,0,0.24)' }]}
             onPress={() => { impactLight(); onActionPress?.() }}
             activeOpacity={0.8}
             touchSoundDisabled={true}
+            accessibilityRole="button"
+            accessibilityLabel={actionIconName ?? 'action'}
+            accessibilityState={{ selected: actionActive }}
           >
             {resolvedActionIcon}
           </TouchableOpacity>
         )}
       </View>
 
-      {/* Metadata */}
       {(title || subtitle || caption || footer) && (
         <View style={styles.meta}>
           {title ? (
@@ -173,13 +172,15 @@ export function MediaCard({
 
   if (onPress) {
     return (
-      <Animated.View style={{ transform: [{ scale }] }}>
+      <Animated.View style={animatedStyle}>
         <TouchableOpacity
           onPress={handlePress}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
           activeOpacity={1}
           touchSoundDisabled={true}
+          accessibilityRole="button"
+          accessibilityLabel={a11yLabel}
         >
           {cardContent}
         </TouchableOpacity>
@@ -190,14 +191,15 @@ export function MediaCard({
   return cardContent
 }
 
+export const MediaCard = React.memo(MediaCardBase)
+
 const styles = StyleSheet.create({
   card: {
-    borderRadius: RADIUS.md,    // 14px — Airbnb property card spec
+    borderRadius: RADIUS.md,
     overflow: 'hidden',
     backgroundColor: 'transparent',
   },
   cardHovered: {
-    // Web hover: lift shadow
     ...SHADOWS.md,
   },
   imageContainer: {
@@ -233,17 +235,17 @@ const styles = StyleSheet.create({
     gap: vs(2),
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },
   subtitle: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },
   caption: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
     lineHeight: mvs(16),
   },

package/src/components/MenuGroup/MenuGroup.tsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
+import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
+
+export type MenuGroupVariant = 'plain' | 'card'
+
+export interface MenuGroupProps {
+  children: React.ReactNode
+  /**
+   * - `plain` (default): no background, plain MenuItems inside.
+   * - `card`: card surface with background + border wrapping plain MenuItems.
+   */
+  variant?: MenuGroupVariant
+  style?: ViewStyle
+}
+
+export interface MenuGroupHeaderProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface MenuGroupFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+/**
+ * MenuGroup wraps multiple MenuItems and auto-adds separators between them.
+ * Use variant="card" for a standalone surface or "plain" for items inside another container.
+ */
+export function MenuGroup({ children, variant = 'plain', style }: MenuGroupProps) {
+  const { colors } = useTheme()
+
+  // Auto-inject showSeparator={true} to all MenuItem children except the last
+  const processedChildren = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child
+    
+    // Skip MenuGroup.Header and MenuGroup.Footer
+    if (child.type === MenuGroupHeader || child.type === MenuGroupFooter) {
+      return child
+    }
+
+    // Check if it's a MenuItem (has onPress prop as a heuristic)
+    const childProps = child.props as Record<string, unknown>
+    const isMenuItem = 'onPress' in childProps
+    if (!isMenuItem) return child
+
+    const isLast = index === React.Children.count(children) - 1
+
+    // Only add separator if not already explicitly set and not last item
+    if (childProps['showSeparator'] === undefined && !isLast) {
+      return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
+        showSeparator: true,
+      })
+    }
+
+    return child
+  })
+
+  const cardStyle: ViewStyle =
+    variant === 'card'
+      ? {
+          backgroundColor: colors.card,
+          borderRadius: RADIUS.md,
+          borderWidth: 1,
+          borderColor: colors.border,
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.06,
+          shadowRadius: 6,
+          elevation: 2,
+          paddingVertical: vs(4),
+        }
+      : {}
+
+  return (
+    <View style={[styles.container, cardStyle, style]}>
+      {processedChildren}
+    </View>
+  )
+}
+
+export function MenuGroupHeader({ children, style }: MenuGroupHeaderProps) {
+  const { colors } = useTheme()
+  
+  if (typeof children === 'string') {
+    return (
+      <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>
+        <Text style={[styles.headerText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {children}
+        </Text>
+      </View>
+    )
+  }
+
+  return <View style={[styles.header, { borderBottomColor: colors.separator }, style]}>{children}</View>
+}
+
+export function MenuGroupFooter({ children, style }: MenuGroupFooterProps) {
+  const { colors } = useTheme()
+  
+  if (typeof children === 'string') {
+    return (
+      <View style={[styles.footer, style]}>
+        <Text style={[styles.footerText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {children}
+        </Text>
+      </View>
+    )
+  }
+
+  return <View style={[styles.footer, style]}>{children}</View>
+}
+
+MenuGroup.Header = MenuGroupHeader
+MenuGroup.Footer = MenuGroupFooter
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(12),
+    paddingBottom: vs(8),
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerText: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: 'uppercase',
+  },
+  footer: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(8),
+    paddingBottom: vs(12),
+  },
+  footerText: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 12,
+  },
+})

package/src/components/MenuGroup/index.ts

@@ -0,0 +1 @@
+export * from './MenuGroup'

package/src/components/MenuItem/MenuItem.tsx

@@ -1,22 +1,21 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import {
   TouchableOpacity,
-  Animated,
   View,
   Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
-  Platform,
 } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
 
 export type MenuItemVariant = 'plain' | 'card'
 
@@ -57,9 +56,11 @@ export interface MenuItemProps {
   style?: ViewStyle
   /** Style applied to the label Text. */
   labelStyle?: TextStyle
+  /** Accessibility label override. Defaults to label. */
+  accessibilityLabel?: string
 }
 
-export function MenuItem({
+function MenuItemBase({
   label,
   subtitle,
   iconName,
@@ -73,30 +74,15 @@ export function MenuItem({
   showSeparator = false,
   style,
   labelStyle,
+  accessibilityLabel,
 }: MenuItemProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-
-  const handlePressIn = () => {
-    if (disabled) return
-    Animated.spring(scale, {
-      toValue: 0.97,
-      useNativeDriver: nativeDriver,
-      stiffness: 350,
-      damping: 28,
-      mass: 0.9,
-    }).start()
-  }
-
-  const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      stiffness: 220,
-      damping: 20,
-      mass: 0.9,
-    }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.row,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled,
+  })
 
   const handlePress = () => {
     hapticSelection()
@@ -122,16 +108,21 @@ export function MenuItem({
         }
       : {}
 
+  const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label)
+
   return (
-    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled]}>
+    <Animated.View style={[animatedStyle, disabled && styles.disabled]} {...hoverHandlers}>
       <TouchableOpacity
         style={[styles.container, cardStyle, style]}
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         disabled={disabled}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={a11yLabel}
+        accessibilityState={{ disabled }}
       >
         {resolvedIcon ? (
           <View style={styles.iconContainer}>{resolvedIcon}</View>
@@ -157,7 +148,7 @@ export function MenuItem({
         </View>
 
         {rightRender !== undefined ? (
-          <View 
+          <View
             style={styles.rightContainer}
             onStartShouldSetResponder={() => true}
             onResponderRelease={() => {}}
@@ -173,11 +164,7 @@ export function MenuItem({
         <View
           style={[
             styles.separator,
-            {
-              backgroundColor: colors.border,
-              marginLeft: resolvedIcon ? s(22) + s(12) : 0,
-              opacity: 0.6,
-            },
+            { backgroundColor: colors.separator },
           ]}
         />
       ) : null}
@@ -185,11 +172,13 @@ export function MenuItem({
   )
 }
 
+export const MenuItem = React.memo(MenuItemBase)
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 0,
+    paddingHorizontal: s(16),
     paddingVertical: vs(16),
     minHeight: vs(54),
     gap: s(12),
@@ -205,11 +194,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(15),
   },
   subtitle: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(12),
     marginTop: vs(1),
   },

package/src/components/MonthPicker/MonthPicker.tsx

@@ -3,7 +3,7 @@ import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-nativ
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
-import { s, vs, ms, mvs } from '../../utils/scaling'
+import { s, ms, mvs } from '../../utils/scaling'
 
 const MONTH_NAMES: Record<string, string[]> = {
   en: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
@@ -56,16 +56,23 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
   }
 
   return (
-    <View style={[styles.container, style]}>
+    <View style={[styles.container, style]} accessibilityRole="adjustable" accessibilityLabel={getLabel()}>
       <TouchableOpacity
         style={styles.arrow}
         onPress={handlePrev}
         activeOpacity={0.6}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel="Previous month"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-left" size={22} color={colors.foreground} />
       </TouchableOpacity>
-      <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>
+      <Text
+        style={[styles.label, { color: colors.foreground }]}
+        allowFontScaling={true}
+        accessibilityLiveRegion="polite"
+      >
         {getLabel()}
       </Text>
       <TouchableOpacity
@@ -73,6 +80,9 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
         onPress={handleNext}
         activeOpacity={0.6}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel="Next month"
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-right" size={22} color={colors.foreground} />
       </TouchableOpacity>
@@ -93,7 +103,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(17),
     lineHeight: mvs(24),
     textAlign: 'center',

package/src/components/Pressable/Pressable.tsx

@@ -1,15 +1,9 @@
-import React, { useRef } from 'react'
-import {
-  TouchableOpacity,
-  Animated,
-  ViewStyle,
-  Platform,
-  TouchableOpacityProps,
-} from 'react-native'
+import React from 'react'
+import { TouchableOpacity, Platform, ViewStyle, TouchableOpacityProps } from 'react-native'
+import Animated from 'react-native-reanimated'
 import { impactLight } from '../../utils/haptics'
-import { useHover } from '../../utils/hover'
-
-const nativeDriver = Platform.OS !== 'web'
+import { usePressScale } from '../../utils/usePressScale'
+import { PRESS_SCALE, SPRINGS } from '../../utils/animations'
 
 export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
   /** Children content to render inside the pressable. */
@@ -18,7 +12,10 @@ export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpaci
   onPress?: () => void
   /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
   pressScale?: number
-  /** Bounciness of the spring animation on release. Defaults to `4`. */
+  /**
+   * @deprecated Use Reanimated spring config via `pressOutSpring` instead. Ignored.
+   * Kept for backwards compatibility with v6.x consumers.
+   */
   bounciness?: number
   /** Enable haptic feedback on press. Defaults to `true`. */
   haptics?: boolean
@@ -31,42 +28,29 @@ export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpaci
 }
 
 /**
- * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
- * Use for custom pressable content that needs consistent press feel.
+ * Generic pressable with a calibrated spring bounce — Apple HIG / Airbnb feel.
+ * All animation runs on the UI thread via Reanimated v4 worklets.
+ *
+ * Use this for any custom pressable surface that needs consistent press feel
+ * (cards, list rows, image tiles, etc).
  */
 export function Pressable({
   children,
   onPress,
-  pressScale = 0.98,
-  bounciness = 4,
+  pressScale = PRESS_SCALE.card,
   haptics = true,
   style,
   disabled,
   hoverScale = 1.02,
   ...touchableProps
 }: PressableProps) {
-  const scale = useRef(new Animated.Value(1)).current
-  const { hovered, hoverHandlers } = useHover()
-
-  const handlePressIn = () => {
-    if (disabled) return
-    Animated.spring(scale, {
-      toValue: pressScale,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0,
-    }).start()
-  }
-
-  const handlePressOut = () => {
-    if (disabled) return
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness,
-    }).start()
-  }
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale,
+    hoverScale,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled,
+  })
 
   const handlePress = () => {
     if (disabled || !onPress) return
@@ -74,23 +58,20 @@ export function Pressable({
     onPress()
   }
 
-  const hoverScaleValue = hovered && hoverScale !== 1 ? hoverScale : 1
-
   return (
     <Animated.View
-      style={[
-        { transform: [{ scale: Animated.multiply(scale, hoverScaleValue) }] },
-        style,
-      ]}
+      style={[animatedStyle, style]}
       {...(Platform.OS === 'web' ? hoverHandlers : {})}
     >
       <TouchableOpacity
         onPress={handlePress}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         activeOpacity={1}
         disabled={disabled}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!disabled }}
         {...touchableProps}
       >
         {children}