@retray-dev/ui-kit 5.2.0 → 6.0.0

package/src/components/DetailRow/DetailRow.tsx

@@ -0,0 +1,140 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
+import { useTheme } from '../../theme'
+import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
+
+export type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none'
+export type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold'
+
+const weightMap: Record<DetailRowLabelWeight, string> = {
+  normal:   'Poppins-Regular',
+  medium:   'Poppins-Medium',
+  semibold: 'Poppins-SemiBold',
+  bold:     'Poppins-Bold',
+}
+
+export interface DetailRowProps {
+  label: React.ReactNode
+  value: string
+  /** Dotted/dashed/solid line between label and value. Defaults to 'dotted'. */
+  separator?: DetailRowSeparator
+  labelWeight?: DetailRowLabelWeight
+  /** Semantic color key or hex string for value text. */
+  valueColor?: string
+  /** Node rendered left of the label (e.g. Avatar, Icon). */
+  leftIcon?: React.ReactNode
+  /** Icon name from @expo/vector-icons rendered left of label. Takes precedence over leftIcon. */
+  leftIconName?: string
+  /** Override left icon color. Defaults to foregroundMuted. */
+  leftIconColor?: string
+  /** Icon name from @expo/vector-icons rendered right of value. */
+  rightIconName?: string
+  /** Override right icon color. Defaults to foregroundMuted. */
+  rightIconColor?: string
+  style?: ViewStyle
+  labelStyle?: TextStyle
+  valueStyle?: TextStyle
+}
+
+export function DetailRow({
+  label,
+  value,
+  separator = 'dotted',
+  labelWeight = 'normal',
+  valueColor,
+  leftIcon,
+  leftIconName,
+  leftIconColor,
+  rightIconName,
+  rightIconColor,
+  style,
+  labelStyle,
+  valueStyle,
+}: DetailRowProps) {
+  const { colors } = useTheme()
+
+  const resolvedLeftIcon = leftIconName
+    ? renderIcon(leftIconName, ms(14), leftIconColor ?? colors.foregroundMuted)
+    : leftIcon
+
+  const resolvedRightIcon = rightIconName
+    ? renderIcon(rightIconName, ms(14), rightIconColor ?? colors.foregroundMuted)
+    : null
+
+  const separatorStyle: ViewStyle | null =
+    separator === 'none'
+      ? null
+      : {
+          flex: 1,
+          height: 1,
+          borderBottomWidth: 1,
+          borderStyle: separator,
+          borderColor: 'rgba(128,128,128,0.3)',
+          marginHorizontal: s(4),
+        }
+
+  return (
+    <View style={[styles.row, style]}>
+      <View style={styles.labelSide}>
+        {resolvedLeftIcon ? <View style={styles.icon}>{resolvedLeftIcon}</View> : null}
+        {typeof label === 'string' ? (
+          <Text
+            style={[styles.labelText, { color: colors.foregroundMuted, fontFamily: weightMap[labelWeight] }, labelStyle]}
+            allowFontScaling={true}
+          >
+            {label}
+          </Text>
+        ) : (
+          label
+        )}
+      </View>
+      {separatorStyle ? <View style={separatorStyle} /> : <View style={styles.spacer} />}
+      <View style={styles.valueSide}>
+        <Text
+          style={[styles.valueText, { color: valueColor ?? colors.foreground }, valueStyle]}
+          allowFontScaling={true}
+        >
+          {value}
+        </Text>
+        {resolvedRightIcon ? <View style={styles.icon}>{resolvedRightIcon}</View> : null}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(4),
+  },
+  labelSide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(4),
+    flexShrink: 0,
+  },
+  icon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  spacer: {
+    flex: 1,
+  },
+  labelText: {
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+  valueSide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(4),
+    flexShrink: 0,
+  },
+  valueText: {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+})

package/src/components/DetailRow/index.ts

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

package/src/components/EmptyState/EmptyState.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
+import { Button } from '../Button'
 
 export interface EmptyStateProps {
   icon?: React.ReactNode
@@ -15,13 +16,18 @@ export interface EmptyStateProps {
   iconColor?: string
   title: string
   description?: string
+  /** Custom action node. Use `actionLabel` + `onAction` for a pre-built primary Button. */
   action?: React.ReactNode
+  /** Label for a convenience primary Button rendered below description. Ignored in compact size. */
+  actionLabel?: string
+  /** Called when the convenience action Button is pressed. Required when `actionLabel` is set. */
+  onAction?: () => void
   /** `compact` hides description/action and uses tighter spacing and a smaller icon. */
   size?: 'default' | 'compact'
   style?: ViewStyle
 }
 
-export function EmptyState({ icon, iconName, iconColor, title, description, action, size = 'default', style }: EmptyStateProps) {
+export function EmptyState({ icon, iconName, iconColor, title, description, action, actionLabel, onAction, size = 'default', style }: EmptyStateProps) {
   const { colors } = useTheme()
   const isCompact = size === 'compact'
 
@@ -60,7 +66,13 @@ export function EmptyState({ icon, iconName, iconColor, title, description, acti
           <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
-      {action && !isCompact ? <View style={styles.action}>{action}</View> : null}
+      {!isCompact && (action ? (
+        <View style={styles.action}>{action}</View>
+      ) : actionLabel && onAction ? (
+        <View style={styles.action}>
+          <Button label={actionLabel} variant="primary" onPress={onAction} />
+        </View>
+      ) : null)}
     </View>
   )
 }
@@ -72,12 +84,8 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderStyle: 'dashed',
     borderRadius: ms(12),
-    padding: s(32),
-    gap: vs(16),
   },
   containerCompact: {
-    padding: s(20),
-    gap: vs(10),
   },
   iconWrapper: {
     width: s(80),
@@ -85,16 +93,20 @@ const styles = StyleSheet.create({
     borderRadius: ms(20),
     alignItems: 'center',
     justifyContent: 'center',
+    marginTop: s(32),
   },
   iconWrapperCompact: {
     width: s(56),
     height: s(56),
     borderRadius: ms(14),
+    marginTop: s(20),
   },
   textWrapper: {
     alignItems: 'center',
     gap: vs(8),
     maxWidth: s(320),
+    paddingHorizontal: s(32),
+    marginTop: vs(16),
   },
   title: {
     fontFamily: 'Poppins-Medium',
@@ -103,6 +115,7 @@ const styles = StyleSheet.create({
   },
   titleCompact: {
     fontSize: ms(15),
+    marginTop: vs(10),
   },
   description: {
     fontFamily: 'Poppins-Regular',
@@ -112,5 +125,7 @@ const styles = StyleSheet.create({
   },
   action: {
     marginTop: vs(8),
+    marginBottom: s(32),
+    paddingHorizontal: s(32),
   },
 })

package/src/components/Input/Input.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform } from 'react-native'
+import React, { useState, useRef } from 'react'
+import { TextInput, View, Text, Animated, StyleSheet, TextInputProps, ViewStyle, TextStyle, TouchableOpacity, Platform, Easing } from 'react-native'
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
@@ -16,6 +16,8 @@ export interface InputProps extends TextInputProps {
   error?: string
   /** Helper text shown below the input when there is no error. */
   hint?: string
+  /** Disabled visual state — dimmed appearance, not editable. Also sets `editable={false}`. */
+  disabled?: boolean
   /** Text or component rendered before the input text. */
   prefix?: React.ReactNode
   /** Text or component rendered after the input text. */
@@ -46,11 +48,13 @@ export interface InputProps extends TextInputProps {
   inputWrapperStyle?: ViewStyle
 }
 
-export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps) {
+export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = 'text', containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, ...props }: InputProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
+  const focusAnim = useRef(new Animated.Value(0)).current
 
+  const isDisabled = disabled || editable === false
   const isPassword = type === 'password'
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry
 
@@ -68,18 +72,19 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
     : suffix
 
   return (
-    <View style={[styles.container, containerStyle]}>
+    <View style={[styles.container, isDisabled && styles.containerDisabled, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <View
+      <Animated.View
         style={[
           styles.inputWrapper,
           {
             borderColor: error
               ? colors.destructive
-              : focused
-                ? colors.primary
-                : colors.border,
-            backgroundColor: colors.background,
+              : focusAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [colors.border, colors.primary],
+                }),
+            backgroundColor: isDisabled ? colors.surface : colors.background,
           },
           inputWrapperStyle,
         ]}
@@ -104,15 +109,18 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
           ]}
           onFocus={(e) => {
             setFocused(true)
+            Animated.timing(focusAnim, { toValue: 1, duration: 120, easing: Easing.out(Easing.ease), useNativeDriver: false }).start()
             onFocus?.(e)
           }}
           onBlur={(e) => {
             setFocused(false)
+            Animated.timing(focusAnim, { toValue: 0, duration: 80, easing: Easing.out(Easing.ease), useNativeDriver: false }).start()
             onBlur?.(e)
           }}
           placeholderTextColor={colors.foregroundMuted}
           allowFontScaling={true}
           secureTextEntry={effectiveSecure}
+          editable={isDisabled ? false : editable}
           {...props}
         />
         {effectiveSuffix ? (
@@ -124,7 +132,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
             <View style={styles.suffixContainer}>{effectiveSuffix}</View>
           )
         ) : null}
-      </View>
+      </Animated.View>
       {error ? (
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
@@ -139,6 +147,9 @@ const styles = StyleSheet.create({
   container: {
     gap: vs(8),
   },
+  containerDisabled: {
+    opacity: 0.6,
+  },
   label: {
     fontFamily: 'Poppins-Medium',
     fontSize: ms(14),           // caption size for input labels

package/src/components/LabelValue/LabelValue.tsx

@@ -2,21 +2,33 @@ import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { renderIcon } from '../../utils/icons'
 
 export interface LabelValueProps {
   label: string
   value: string | React.ReactNode
+  /** Icon name from @expo/vector-icons rendered left of label. */
+  iconName?: string
+  /** Override icon color. Defaults to foregroundMuted. */
+  iconColor?: string
   style?: ViewStyle
 }
 
-export function LabelValue({ label, value, style }: LabelValueProps) {
+export function LabelValue({ label, value, iconName, iconColor, style }: LabelValueProps) {
   const { colors } = useTheme()
 
+  const resolvedIcon = iconName
+    ? renderIcon(iconName, ms(14), iconColor ?? colors.foregroundMuted)
+    : null
+
   return (
     <View style={[styles.container, style]}>
-      <Text style={[styles.label, { color: colors.foregroundMuted }]} allowFontScaling={true}>
-        {label}
-      </Text>
+      <View style={styles.labelSide}>
+        {resolvedIcon ? <View style={styles.icon}>{resolvedIcon}</View> : null}
+        <Text style={[styles.label, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+          {label}
+        </Text>
+      </View>
       {typeof value === 'string' ? (
         <Text style={[styles.value, { color: colors.foreground }]} allowFontScaling={true}>
           {value}
@@ -35,6 +47,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: s(12),
   },
+  labelSide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: s(4),
+  },
+  icon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   label: {
     fontFamily: 'Poppins-Regular',
     fontSize: ms(13),

package/src/components/ListItem/ListItem.tsx

@@ -14,6 +14,7 @@ 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'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -109,8 +110,9 @@ export function ListItem({
     Animated.spring(scale, {
       toValue: 0.97,
       useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0,
+      stiffness: 350,
+      damping: 28,
+      mass: 0.9,
     }).start()
   }
 
@@ -118,8 +120,9 @@ export function ListItem({
     Animated.spring(scale, {
       toValue: 1,
       useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 4,
+      stiffness: 220,
+      damping: 20,
+      mass: 0.9,
     }).start()
   }
 
@@ -140,7 +143,7 @@ export function ListItem({
     variant === 'card'
       ? {
           backgroundColor: colors.card,
-          borderRadius: 12,
+          borderRadius: RADIUS.md,
           borderWidth: 1,
           borderColor: colors.border,
           shadowColor: '#000',
@@ -216,7 +219,10 @@ export function ListItem({
         <View
           style={[
             styles.separator,
-            { backgroundColor: colors.border, marginLeft: effectiveLeft ? s(16) + s(44) + s(12) : s(16) },
+            { 
+              backgroundColor: colors.border,
+              marginLeft: effectiveLeft ? s(44) + s(12) : 0
+            },
           ]}
         />
       ) : null}
@@ -228,7 +234,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: s(16),
+    paddingHorizontal: 0,
     paddingVertical: vs(10),
     gap: s(12),
   },
@@ -274,7 +280,7 @@ const styles = StyleSheet.create({
   },
   separator: {
     height: StyleSheet.hairlineWidth,
-    marginRight: s(16),
+    marginRight: 0,
   },
   disabled: {
     opacity: 0.45,

package/src/components/MediaCard/MediaCard.tsx

@@ -229,6 +229,7 @@ const styles = StyleSheet.create({
   },
   meta: {
     paddingTop: vs(8),
+    paddingBottom: vs(4),
     gap: vs(2),
   },
   title: {

package/src/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,206 @@
+import React, { useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  Platform,
+} from 'react-native'
+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'
+
+export type MenuItemVariant = 'plain' | 'card'
+
+export interface MenuItemProps {
+  label: string
+  /**
+   * Icon name from `@expo/vector-icons` rendered on the left.
+   * See https://icons.expo.fyi.
+   */
+  iconName?: string
+  /** Custom icon node rendered on the left. */
+  icon?: React.ReactNode
+  /** Override icon color. Defaults to `foreground`. */
+  iconColor?: string
+  /**
+   * Custom content rendered on the right.
+   * When provided, replaces the default chevron.
+   * Use for checkboxes, switches, badges, or other controls.
+   */
+  rightRender?: React.ReactNode
+  /**
+   * Show chevron on the right. Defaults to `true`.
+   * Ignored when `rightRender` is provided.
+   */
+  showChevron?: boolean
+  onPress: () => void
+  disabled?: boolean
+  /**
+   * - `plain` (default): no background — sits inside a parent surface.
+   * - `card`: standalone surface with background + border.
+   */
+  variant?: MenuItemVariant
+  /** Visual separator line at the bottom. */
+  showSeparator?: boolean
+  /** Style applied to the outer container. */
+  style?: ViewStyle
+  /** Style applied to the label Text. */
+  labelStyle?: TextStyle
+}
+
+export function MenuItem({
+  label,
+  iconName,
+  icon,
+  iconColor,
+  rightRender,
+  showChevron = true,
+  onPress,
+  disabled = false,
+  variant = 'plain',
+  showSeparator = false,
+  style,
+  labelStyle,
+}: 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 handlePress = () => {
+    hapticSelection()
+    onPress()
+  }
+
+  const resolvedIcon: React.ReactNode = iconName
+    ? renderIcon(iconName, 22, iconColor ?? colors.foreground)
+    : icon
+
+  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,
+        }
+      : {}
+
+  return (
+    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled]}>
+      <TouchableOpacity
+        style={[styles.container, cardStyle, style]}
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+      >
+        {resolvedIcon ? (
+          <View style={styles.iconContainer}>{resolvedIcon}</View>
+        ) : null}
+
+        <Text
+          style={[styles.label, { color: colors.foreground }, labelStyle]}
+          numberOfLines={1}
+          allowFontScaling={true}
+        >
+          {label}
+        </Text>
+
+        {rightRender !== undefined ? (
+          <View 
+            style={styles.rightContainer}
+            onStartShouldSetResponder={() => true}
+            onResponderRelease={() => {}}
+          >
+            {rightRender}
+          </View>
+        ) : showChevron ? (
+          <Entypo name="chevron-right" size={18} color={colors.foregroundMuted} />
+        ) : null}
+      </TouchableOpacity>
+
+      {showSeparator ? (
+        <View
+          style={[
+            styles.separator,
+            {
+              backgroundColor: colors.border,
+              marginLeft: resolvedIcon ? s(22) + s(12) : 0,
+              opacity: 0.6,
+            },
+          ]}
+        />
+      ) : null}
+    </Animated.View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 0,
+    paddingVertical: vs(16),
+    minHeight: vs(54),
+    gap: s(12),
+  },
+  iconContainer: {
+    width: s(22),
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  label: {
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(15),
+    flex: 1,
+  },
+  rightContainer: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginRight: 0,
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+})

package/src/components/MenuItem/index.ts

@@ -0,0 +1,2 @@
+export { MenuItem } from './MenuItem'
+export type { MenuItemProps, MenuItemVariant } from './MenuItem'