@retray-dev/ui-kit 6.2.0 → 9.0.0

package/src/components/ListItem/ListItem.tsx

@@ -1,21 +1,18 @@
 import React from 'react'
 import {
-  TouchableOpacity,
   View,
   Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
 } 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, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { RADIUS } from '../../tokens'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { PressableRow } from '../../utils/pressable'
 
 export type ListItemVariant = 'plain' | 'card'
 
@@ -81,7 +78,7 @@ export interface ListItemProps {
   accessibilityLabel?: string
 }
 
-export function ListItem({
+function ListItemBase({
   leftRender,
   rightRender,
   trailing,
@@ -105,12 +102,6 @@ export function ListItem({
   accessibilityLabel,
 }: ListItemProps) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.row,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled: !onPress || disabled,
-  })
 
   const handlePress = () => {
     hapticSelection()
@@ -142,90 +133,101 @@ export function ListItem({
 
   const a11yLabel = accessibilityLabel ?? [title, subtitle, caption].filter(Boolean).join('. ')
 
-  return (
-    <Animated.View style={[animatedStyle, disabled && styles.disabled]} {...hoverHandlers}>
-      <TouchableOpacity
-        style={[styles.container, cardStyle, style]}
-        onPress={onPress ? handlePress : undefined}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
-        accessibilityRole={onPress ? 'button' : undefined}
-        accessibilityLabel={onPress ? a11yLabel : undefined}
-        accessibilityState={onPress ? { disabled: !!disabled } : undefined}
-      >
-        {effectiveLeft ? (
-          <View style={styles.leftContainer}>{effectiveLeft}</View>
-        ) : null}
+  const content = (
+    <>
+      {effectiveLeft ? (
+        <View style={styles.leftContainer}>{effectiveLeft}</View>
+      ) : null}
 
-        <View style={styles.content}>
+      <View style={styles.content}>
+        <Text
+          style={[styles.title, { color: colors.foreground }, titleStyle]}
+          numberOfLines={2}
+          allowFontScaling={true}
+        >
+          {title}
+        </Text>
+        {subtitle ? (
           <Text
-            style={[styles.title, { color: colors.foreground }, titleStyle]}
+            style={[styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle]}
             numberOfLines={2}
             allowFontScaling={true}
           >
-            {title}
+            {subtitle}
           </Text>
-          {subtitle ? (
-            <Text
-              style={[styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle]}
-              numberOfLines={2}
-              allowFontScaling={true}
-            >
-              {subtitle}
-            </Text>
-          ) : null}
-          {caption ? (
+        ) : null}
+        {caption ? (
+          <Text
+            style={[styles.caption, { color: colors.foregroundMuted }, captionStyle]}
+            numberOfLines={1}
+            allowFontScaling={true}
+          >
+            {caption}
+          </Text>
+        ) : null}
+      </View>
+
+      {effectiveRight !== undefined ? (
+        <View style={styles.rightContainer}>
+          {typeof effectiveRight === 'string' ? (
             <Text
-              style={[styles.caption, { color: colors.foregroundMuted }, captionStyle]}
-              numberOfLines={1}
+              style={[styles.rightText, { color: colors.foregroundMuted }]}
               allowFontScaling={true}
             >
-              {caption}
+              {effectiveRight}
             </Text>
-          ) : null}
+          ) : (
+            effectiveRight
+          )}
         </View>
+      ) : showChevron ? (
+        <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+      ) : null}
+    </>
+  )
 
-        {effectiveRight !== undefined ? (
-          <View style={styles.rightContainer}>
-            {typeof effectiveRight === 'string' ? (
-              <Text
-                style={[styles.rightText, { color: colors.foregroundMuted }]}
-                allowFontScaling={true}
-              >
-                {effectiveRight}
-              </Text>
-            ) : (
-              effectiveRight
-            )}
-          </View>
-        ) : showChevron ? (
-          <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
+  if (onPress) {
+    return (
+      <View style={disabled && styles.disabled}>
+        <PressableRow
+          style={[styles.container, cardStyle, style]}
+          onPress={handlePress}
+          enabled={!disabled}
+          rippleColor="transparent"
+          touchSoundDisabled
+          activateOnHover
+          accessibilityRole="button"
+          accessibilityLabel={a11yLabel}
+          accessibilityState={{ disabled: !!disabled }}
+        >
+          {content}
+        </PressableRow>
+        {showSeparator ? (
+          <View style={[styles.separator, { backgroundColor: colors.separator }]} />
         ) : null}
-      </TouchableOpacity>
+      </View>
+    )
+  }
 
+  return (
+    <View style={[disabled && styles.disabled]}>
+      <View style={[styles.container, cardStyle, style]}>
+        {content}
+      </View>
       {showSeparator ? (
-        <View
-          style={[
-            styles.separator,
-            {
-              backgroundColor: colors.border,
-              marginLeft: effectiveLeft ? s(44) + s(12) : 0
-            },
-          ]}
-        />
+        <View style={[styles.separator, { backgroundColor: colors.separator }]} />
       ) : null}
-    </Animated.View>
+    </View>
   )
 }
 
+export const ListItem = React.memo(ListItemBase)
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 0,
+    paddingHorizontal: s(16),
     paddingVertical: vs(10),
     gap: s(12),
   },
@@ -241,17 +243,17 @@ const styles = StyleSheet.create({
     gap: vs(4),
   },
   title: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(15),
     lineHeight: mvs(22),
   },
   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),
     opacity: 0.7,
@@ -263,7 +265,7 @@ const styles = StyleSheet.create({
     maxWidth: s(160),
   },
   rightText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
   },
   separator: {

package/src/components/MediaCard/MediaCard.tsx

@@ -61,7 +61,7 @@ export interface MediaCardProps {
   accessibilityLabel?: string
 }
 
-export function MediaCard({
+function MediaCardBase({
   imageSource,
   aspectRatio = '4:3',
   badge,
@@ -112,7 +112,7 @@ export function MediaCard({
       {...(Platform.OS === 'web' ? hoverHandlers : {})}
     >
       <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
@@ -135,10 +135,16 @@ export function MediaCard({
         {(onActionPress || actionIcon || actionIconName) && (
           <TouchableOpacity
             style={[styles.actionButton, { backgroundColor: 'rgba(0,0,0,0.24)' }]}
-            onPress={() => { impactLight(); onActionPress?.() }}
+            onPress={(e) => {
+              // Stop propagation to prevent triggering parent onPress
+              e?.stopPropagation?.()
+              impactLight()
+              onActionPress?.()
+            }}
             activeOpacity={0.8}
             touchSoundDisabled={true}
-            accessibilityRole="button"
+            // On web, avoid nested <button> by using a non-button role when parent is pressable
+            accessibilityRole={Platform.OS === 'web' && onPress ? undefined : 'button'}
             accessibilityLabel={actionIconName ?? 'action'}
             accessibilityState={{ selected: actionActive }}
           >
@@ -191,6 +197,8 @@ export function MediaCard({
   return cardContent
 }
 
+export const MediaCard = React.memo(MediaCardBase)
+
 const styles = StyleSheet.create({
   card: {
     borderRadius: RADIUS.md,
@@ -233,17 +241,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,21 +1,18 @@
 import React from 'react'
 import {
-  TouchableOpacity,
   View,
   Text,
   StyleSheet,
   ViewStyle,
   TextStyle,
 } 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'
-import { usePressScale } from '../../utils/usePressScale'
-import { SPRINGS, PRESS_SCALE } from '../../utils/animations'
+import { PressableRow } from '../../utils/pressable'
 
 export type MenuItemVariant = 'plain' | 'card'
 
@@ -60,7 +57,7 @@ export interface MenuItemProps {
   accessibilityLabel?: string
 }
 
-export function MenuItem({
+function MenuItemBase({
   label,
   subtitle,
   iconName,
@@ -77,12 +74,6 @@ export function MenuItem({
   accessibilityLabel,
 }: MenuItemProps) {
   const { colors } = useTheme()
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.row,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled,
-  })
 
   const handlePress = () => {
     hapticSelection()
@@ -111,15 +102,14 @@ export function MenuItem({
   const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label)
 
   return (
-    <Animated.View style={[animatedStyle, disabled && styles.disabled]} {...hoverHandlers}>
-      <TouchableOpacity
+    <View style={disabled && styles.disabled}>
+      <PressableRow
         style={[styles.container, cardStyle, style]}
         onPress={handlePress}
-        onPressIn={onPressIn}
-        onPressOut={onPressOut}
-        disabled={disabled}
-        activeOpacity={1}
-        touchSoundDisabled={true}
+        enabled={!disabled}
+        rippleColor="transparent"
+        touchSoundDisabled
+        activateOnHover
         accessibilityRole="button"
         accessibilityLabel={a11yLabel}
         accessibilityState={{ disabled }}
@@ -158,29 +148,22 @@ export function MenuItem({
         ) : showChevron ? (
           <Entypo name="chevron-right" size={18} color={colors.foregroundMuted} />
         ) : null}
-      </TouchableOpacity>
+      </PressableRow>
 
       {showSeparator ? (
-        <View
-          style={[
-            styles.separator,
-            {
-              backgroundColor: colors.border,
-              marginLeft: resolvedIcon ? s(22) + s(12) : 0,
-              opacity: 0.6,
-            },
-          ]}
-        />
+        <View style={[styles.separator, { backgroundColor: colors.separator }]} />
       ) : null}
-    </Animated.View>
+    </View>
   )
 }
 
+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),
@@ -196,11 +179,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'],
@@ -18,9 +18,27 @@ export interface MonthPickerValue {
   year: number
 }
 
+/** Convert a JS `Date` to a `MonthPickerValue` (uses local time). */
+export function dateToMonthPickerValue(date: Date): MonthPickerValue {
+  return { month: date.getMonth() + 1, year: date.getFullYear() }
+}
+
+/** Convert a `MonthPickerValue` to a `Date` at the first day of that month (local time). */
+export function monthPickerValueToDate(value: MonthPickerValue): Date {
+  return new Date(value.year, value.month - 1, 1)
+}
+
+// Absolute month index — lets us compare/clamp values with simple arithmetic.
+const toIndex = (v: MonthPickerValue) => v.year * 12 + (v.month - 1)
+const fromIndex = (i: number): MonthPickerValue => ({ year: Math.floor(i / 12), month: (i % 12) + 1 })
+
 export interface MonthPickerProps {
   value: MonthPickerValue
   onChange: (value: MonthPickerValue) => void
+  /** Earliest selectable month (inclusive). Prev arrow disables at this bound. */
+  minValue?: MonthPickerValue
+  /** Latest selectable month (inclusive). Next arrow disables at this bound — e.g. cap at the current month. */
+  maxValue?: MonthPickerValue
   /** BCP 47 locale tag. Built-in: 'en' | 'es' | 'pt' | 'fr'. For other locales supply formatLabel. */
   locale?: string
   /** Custom label formatter. Takes precedence over locale. */
@@ -28,9 +46,16 @@ export interface MonthPickerProps {
   style?: ViewStyle
 }
 
-export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style }: MonthPickerProps) {
+export function MonthPicker({ value, onChange, minValue, maxValue, locale = 'en', formatLabel, style }: MonthPickerProps) {
   const { colors } = useTheme()
 
+  const index = toIndex(value)
+  const minIndex = minValue ? toIndex(minValue) : -Infinity
+  const maxIndex = maxValue ? toIndex(maxValue) : Infinity
+
+  const prevDisabled = index - 1 < minIndex
+  const nextDisabled = index + 1 > maxIndex
+
   const getLabel = (): string => {
     if (formatLabel) return formatLabel(value)
     const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en
@@ -38,32 +63,28 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
   }
 
   const handlePrev = () => {
+    if (prevDisabled) return
     hapticSelection()
-    if (value.month === 1) {
-      onChange({ month: 12, year: value.year - 1 })
-    } else {
-      onChange({ month: value.month - 1, year: value.year })
-    }
+    onChange(fromIndex(index - 1))
   }
 
   const handleNext = () => {
+    if (nextDisabled) return
     hapticSelection()
-    if (value.month === 12) {
-      onChange({ month: 1, year: value.year + 1 })
-    } else {
-      onChange({ month: value.month + 1, year: value.year })
-    }
+    onChange(fromIndex(index + 1))
   }
 
   return (
     <View style={[styles.container, style]} accessibilityRole="adjustable" accessibilityLabel={getLabel()}>
       <TouchableOpacity
-        style={styles.arrow}
+        style={[styles.arrow, prevDisabled && styles.arrowDisabled]}
         onPress={handlePrev}
+        disabled={prevDisabled}
         activeOpacity={0.6}
         touchSoundDisabled={true}
         accessibilityRole="button"
         accessibilityLabel="Previous month"
+        accessibilityState={{ disabled: prevDisabled }}
         hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-left" size={22} color={colors.foreground} />
@@ -76,12 +97,14 @@ export function MonthPicker({ value, onChange, locale = 'en', formatLabel, style
         {getLabel()}
       </Text>
       <TouchableOpacity
-        style={styles.arrow}
+        style={[styles.arrow, nextDisabled && styles.arrowDisabled]}
         onPress={handleNext}
+        disabled={nextDisabled}
         activeOpacity={0.6}
         touchSoundDisabled={true}
         accessibilityRole="button"
         accessibilityLabel="Next month"
+        accessibilityState={{ disabled: nextDisabled }}
         hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       >
         <Entypo name="chevron-right" size={22} color={colors.foreground} />
@@ -102,8 +125,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  arrowDisabled: {
+    opacity: 0.3,
+  },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(17),
     lineHeight: mvs(24),
     textAlign: 'center',