@retray-dev/ui-kit 6.2.0 → 7.0.1

package/src/components/ListGroup/ListGroup.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 ListGroupVariant = 'plain' | 'card'
+
+export interface ListGroupProps {
+  children: React.ReactNode
+  /**
+   * - `plain` (default): no background, plain ListItems inside.
+   * - `card`: card surface with background + border wrapping plain ListItems.
+   */
+  variant?: ListGroupVariant
+  style?: ViewStyle
+}
+
+export interface ListGroupHeaderProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface ListGroupFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+/**
+ * ListGroup wraps multiple ListItems and auto-adds separators between them.
+ * Use variant="card" for a standalone surface or "plain" for items inside another container.
+ */
+export function ListGroup({ children, variant = 'plain', style }: ListGroupProps) {
+  const { colors } = useTheme()
+
+  // Auto-inject showSeparator={true} to all ListItem children except the last
+  const processedChildren = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child
+    
+    // Skip ListGroup.Header and ListGroup.Footer
+    if (child.type === ListGroupHeader || child.type === ListGroupFooter) {
+      return child
+    }
+
+    // Check if it's a ListItem (has title prop as a heuristic)
+    const childProps = child.props as Record<string, unknown>
+    const isListItem = 'title' in childProps
+    if (!isListItem) 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 ListGroupHeader({ children, style }: ListGroupHeaderProps) {
+  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 ListGroupFooter({ children, style }: ListGroupFooterProps) {
+  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>
+}
+
+ListGroup.Header = ListGroupHeader
+ListGroup.Footer = ListGroupFooter
+
+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/ListGroup/index.ts

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

package/src/components/ListItem/ListItem.tsx

@@ -81,7 +81,7 @@ export interface ListItemProps {
   accessibilityLabel?: string
 }
 
-export function ListItem({
+function ListItemBase({
   leftRender,
   rightRender,
   trailing,
@@ -210,10 +210,7 @@ export function ListItem({
         <View
           style={[
             styles.separator,
-            {
-              backgroundColor: colors.border,
-              marginLeft: effectiveLeft ? s(44) + s(12) : 0
-            },
+            { backgroundColor: colors.separator },
           ]}
         />
       ) : null}
@@ -221,11 +218,13 @@ export function ListItem({
   )
 }
 
+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 +240,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 +262,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
@@ -191,6 +191,8 @@ export function MediaCard({
   return cardContent
 }
 
+export const MediaCard = React.memo(MediaCardBase)
+
 const styles = StyleSheet.create({
   card: {
     borderRadius: RADIUS.md,
@@ -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

@@ -60,7 +60,7 @@ export interface MenuItemProps {
   accessibilityLabel?: string
 }
 
-export function MenuItem({
+function MenuItemBase({
   label,
   subtitle,
   iconName,
@@ -164,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}
@@ -176,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),
@@ -196,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'],
@@ -103,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/RadioGroup/RadioGroup.tsx

@@ -45,7 +45,6 @@ function RadioItem({
   })
   const colorProgress = useColorTransition(selected)
 
-  // Pop-in animation for the inner dot
   const dotScale = useSharedValue(selected ? 1 : 0)
   useEffect(() => {
     dotScale.value = withSpring(selected ? 1 : 0, SPRINGS.elastic)
@@ -61,8 +60,11 @@ function RadioItem({
   }))
 
   return (
+    // AUDIT FIX: opacity was applied only to the radio circle, leaving the label
+    // at full opacity when disabled. The whole row now dims uniformly so users
+    // get a single, consistent disabled signal across the entire item.
     <TouchableOpacity
-      style={styles.row}
+      style={[styles.row, option.disabled && styles.rowDisabled]}
       onPress={() => {
         if (!option.disabled) {
           hapticSelection()
@@ -79,21 +81,12 @@ function RadioItem({
       accessibilityState={{ checked: selected, disabled: !!option.disabled }}
     >
       <Animated.View style={scaleStyle}>
-        <Animated.View
-          style={[
-            styles.radio,
-            { opacity: option.disabled ? 0.45 : 1 },
-            radioStyle,
-          ]}
-        >
+        <Animated.View style={[styles.radio, radioStyle]}>
           <Animated.View style={[styles.dot, { backgroundColor: colors.primary }, dotStyle]} />
         </Animated.View>
       </Animated.View>
       <Text
-        style={[
-          styles.label,
-          { color: option.disabled ? colors.foregroundMuted : colors.foreground },
-        ]}
+        style={[styles.label, { color: colors.foreground }]}
         allowFontScaling={true}
       >
         {option.label}
@@ -141,6 +134,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: s(12),
   },
+  // AUDIT FIX: was opacity on the inner circle only
+  rowDisabled: {
+    opacity: 0.45,
+  },
   radio: {
     width: s(24),
     height: s(24),
@@ -155,7 +152,7 @@ const styles = StyleSheet.create({
     borderRadius: s(5),
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },

package/src/components/Select/Select.tsx

@@ -60,7 +60,7 @@ export function Select({
       setPendingValue(value)
       setPickerVisible(true)
     } else if (isAndroid) {
-      ;(pickerRef.current as any)?.focus()
+      ;(pickerRef.current as { focus?: () => void })?.focus?.()
     }
   }
 
@@ -234,7 +234,7 @@ const styles = StyleSheet.create({
     gap: vs(8),
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
   },
   trigger: {
@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
     paddingVertical: vs(11),
   },
   triggerText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     flex: 1,
   },
@@ -255,7 +255,7 @@ const styles = StyleSheet.create({
     marginLeft: s(8),
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
   },
   iosBackdrop: {
@@ -276,14 +276,14 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
   },
   iosToolbarTitle: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(17),
   },
   iosDoneBtn: {
     padding: s(4),
   },
   iosDoneBtnText: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(17),
   },
   androidHiddenPicker: {

package/src/components/Separator/Separator.tsx

@@ -14,7 +14,7 @@ export function Separator({ orientation = 'horizontal', style }: SeparatorProps)
     <View
       style={[
         orientation === 'horizontal' ? styles.horizontal : styles.vertical,
-        { backgroundColor: colors.border },
+        { backgroundColor: colors.separator },
         style,
       ]}
     />
@@ -25,11 +25,9 @@ const styles = StyleSheet.create({
   horizontal: {
     height: 1,
     width: '100%',
-    opacity: 0.7,
   },
   vertical: {
     width: 1,
     height: '100%',
-    opacity: 0.7,
   },
 })