@retray-dev/ui-kit 4.0.0 → 5.2.0

package/src/components/Input/Input.tsx

@@ -55,16 +55,16 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry
 
   const effectivePrefix: React.ReactNode = prefixIcon
-    ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.mutedForeground)
+    ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted)
     : prefix
 
   // If type is password and no suffix override is provided, add the toggle button
   const effectiveSuffix: React.ReactNode = isPassword && !suffix && !suffixIcon ? (
     <TouchableOpacity onPress={() => setShowPassword(!showPassword)} style={styles.passwordToggle} activeOpacity={0.6}>
-      <AntDesign name={showPassword ? 'eye' : 'eye-invisible'} size={20} color={colors.mutedForeground} />
+      <AntDesign name={showPassword ? 'eye' : 'eye-invisible'} size={20} color={colors.foregroundMuted} />
     </TouchableOpacity>
   ) : suffixIcon
-    ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.mutedForeground)
+    ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted)
     : suffix
 
   return (
@@ -77,7 +77,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
             borderColor: error
               ? colors.destructive
               : focused
-                ? (colors.ring ?? colors.primary)
+                ? colors.primary
                 : colors.border,
             backgroundColor: colors.background,
           },
@@ -86,7 +86,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
       >
         {effectivePrefix ? (
           typeof effectivePrefix === 'string' ? (
-            <Text style={[styles.prefixText, { color: colors.mutedForeground }, prefixStyle]} allowFontScaling={true}>
+            <Text style={[styles.prefixText, { color: colors.foregroundMuted }, prefixStyle]} allowFontScaling={true}>
               {effectivePrefix}
             </Text>
           ) : (
@@ -110,14 +110,14 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
             setFocused(false)
             onBlur?.(e)
           }}
-          placeholderTextColor={colors.mutedForeground}
+          placeholderTextColor={colors.foregroundMuted}
           allowFontScaling={true}
           secureTextEntry={effectiveSecure}
           {...props}
         />
         {effectiveSuffix ? (
           typeof effectiveSuffix === 'string' ? (
-            <Text style={[styles.suffixText, { color: colors.mutedForeground }, suffixStyle]} allowFontScaling={true}>
+            <Text style={[styles.suffixText, { color: colors.foregroundMuted }, suffixStyle]} allowFontScaling={true}>
               {effectiveSuffix}
             </Text>
           ) : (
@@ -129,7 +129,7 @@ export function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixS
         <Text style={[styles.helperText, { color: colors.destructive }]} allowFontScaling={true}>{error}</Text>
       ) : null}
       {!error && hint ? (
-        <Text style={[styles.helperText, { color: colors.mutedForeground }]} allowFontScaling={true}>{hint}</Text>
+        <Text style={[styles.helperText, { color: colors.foregroundMuted }]} allowFontScaling={true}>{hint}</Text>
       ) : null}
     </View>
   )
@@ -141,21 +141,23 @@ const styles = StyleSheet.create({
   },
   label: {
     fontFamily: 'Poppins-Medium',
-    fontSize: ms(13),
+    fontSize: ms(14),           // caption size for input labels
   },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 1,
-    borderRadius: ms(8),
+    borderWidth: 2,
+    borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
+    minHeight: 48,
   },
   input: {
     fontFamily: 'Poppins-Regular',
     flex: 1,
-    fontSize: ms(15),
-    paddingVertical: 0,
+    fontSize: ms(16),
+    paddingVertical: vs(2),
+    includeFontPadding: false,
   },
   prefixContainer: {
     marginRight: s(8),

package/src/components/LabelValue/LabelValue.tsx

@@ -14,7 +14,7 @@ export function LabelValue({ label, value, style }: LabelValueProps) {
 
   return (
     <View style={[styles.container, style]}>
-      <Text style={[styles.label, { color: colors.mutedForeground }]} allowFontScaling={true}>
+      <Text style={[styles.label, { color: colors.foregroundMuted }]} allowFontScaling={true}>
         {label}
       </Text>
       {typeof value === 'string' ? (

package/src/components/ListItem/ListItem.tsx

@@ -133,7 +133,7 @@ export function ListItem({
     : leftRender ?? icon
 
   const effectiveRight: React.ReactNode | string | undefined = rightIcon
-    ? renderIcon(rightIcon, 24, rightIconColor ?? colors.mutedForeground)
+    ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)
     : rightRender ?? trailing
 
   const cardStyle: ViewStyle =
@@ -176,7 +176,7 @@ export function ListItem({
           </Text>
           {subtitle ? (
             <Text
-              style={[styles.subtitle, { color: colors.mutedForeground }, subtitleStyle]}
+              style={[styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle]}
               numberOfLines={2}
               allowFontScaling={true}
             >
@@ -185,7 +185,7 @@ export function ListItem({
           ) : null}
           {caption ? (
             <Text
-              style={[styles.caption, { color: colors.mutedForeground }, captionStyle]}
+              style={[styles.caption, { color: colors.foregroundMuted }, captionStyle]}
               numberOfLines={1}
               allowFontScaling={true}
             >
@@ -198,7 +198,7 @@ export function ListItem({
           <View style={styles.rightContainer}>
             {typeof effectiveRight === 'string' ? (
               <Text
-                style={[styles.rightText, { color: colors.mutedForeground }]}
+                style={[styles.rightText, { color: colors.foregroundMuted }]}
                 allowFontScaling={true}
               >
                 {effectiveRight}
@@ -208,7 +208,7 @@ export function ListItem({
             )}
           </View>
         ) : showChevron ? (
-          <Entypo name="chevron-with-circle-right" size={20} color={colors.mutedForeground} />
+          <Entypo name="chevron-with-circle-right" size={20} color={colors.foregroundMuted} />
         ) : null}
       </TouchableOpacity>
 

package/src/components/MediaCard/MediaCard.tsx

@@ -0,0 +1,249 @@
+import React, { useRef, useState } from 'react'
+import {
+  View,
+  Image,
+  Text,
+  TouchableOpacity,
+  Animated,
+  StyleSheet,
+  ViewStyle,
+  ImageSourcePropType,
+  Platform,
+} from 'react-native'
+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 { 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> = {
+  '1:1':  1,
+  '4:3':  3 / 4,
+  '16:9': 9 / 16,
+  '4:5':  5 / 4,
+  '3:2':  2 / 3,
+}
+
+export interface MediaCardProps {
+  /** Image source — URI string or require(). */
+  imageSource?: ImageSourcePropType
+  /** Image aspect ratio. Defaults to `'4:3'`. */
+  aspectRatio?: MediaCardAspectRatio
+  /** Badge content rendered top-left over the image (e.g. a Badge component or Text). */
+  badge?: React.ReactNode
+  /** Icon rendered in a circle button top-right over the image. Defaults to `'heart'`. */
+  actionIcon?: React.ReactNode
+  /** Icon name for the action button. Overrides `actionIcon`. */
+  actionIconName?: string
+  /** Whether the action icon is in active/filled state. */
+  actionActive?: boolean
+  /** Called when the top-right action icon is pressed. */
+  onActionPress?: () => void
+  /** Primary text below the image. */
+  title?: string
+  /** Secondary text below the title. */
+  subtitle?: string
+  /** Tertiary / caption text below subtitle. */
+  caption?: string
+  /** Called when the card body is pressed. */
+  onPress?: () => void
+  style?: ViewStyle
+  /** Style for the image container. */
+  imageStyle?: ViewStyle
+  /** Additional content rendered below caption. */
+  footer?: React.ReactNode
+}
+
+export function MediaCard({
+  imageSource,
+  aspectRatio = '4:3',
+  badge,
+  actionIcon,
+  actionIconName,
+  actionActive = false,
+  onActionPress,
+  title,
+  subtitle,
+  caption,
+  onPress,
+  style,
+  imageStyle,
+  footer,
+}: 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 handlePress = () => {
+    if (!onPress) return
+    impactLight()
+    onPress()
+  }
+
+  const ratio = aspectRatioMap[aspectRatio]
+
+  // Action icon: active = primary fill, inactive = foreground outline
+  const resolvedActionIcon = actionIconName
+    ? renderIcon(actionIconName, 18, actionActive ? colors.primary : colors.background)
+    : actionIcon ?? renderIcon('heart', 18, actionActive ? colors.primary : colors.background)
+
+  const cardContent = (
+    <View
+      style={[
+        styles.card,
+        hovered && styles.cardHovered,
+        style,
+      ]}
+      {...(Platform.OS === 'web' ? hoverHandlers : {})}
+    >
+      {/* Image area */}
+      <View style={[styles.imageContainer, imageStyle]}>
+        <View style={{ paddingTop: `${ratio * 100}%` as any }}>
+          <View style={StyleSheet.absoluteFill}>
+            {imageSource ? (
+              <Image
+                source={imageSource}
+                style={styles.image}
+                resizeMode="cover"
+              />
+            ) : (
+              <View style={[styles.imagePlaceholder, { backgroundColor: colors.surface }]} />
+            )}
+          </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}
+          >
+            {resolvedActionIcon}
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Metadata */}
+      {(title || subtitle || caption || footer) && (
+        <View style={styles.meta}>
+          {title ? (
+            <Text style={[styles.title, { color: colors.foreground }]} numberOfLines={2} allowFontScaling={true}>
+              {title}
+            </Text>
+          ) : null}
+          {subtitle ? (
+            <Text style={[styles.subtitle, { color: colors.foregroundSubtle }]} numberOfLines={1} allowFontScaling={true}>
+              {subtitle}
+            </Text>
+          ) : null}
+          {caption ? (
+            <Text style={[styles.caption, { color: colors.foregroundMuted }]} numberOfLines={1} allowFontScaling={true}>
+              {caption}
+            </Text>
+          ) : null}
+          {footer}
+        </View>
+      )}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          activeOpacity={1}
+          touchSoundDisabled={true}
+        >
+          {cardContent}
+        </TouchableOpacity>
+      </Animated.View>
+    )
+  }
+
+  return cardContent
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,    // 14px — Airbnb property card spec
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+  },
+  cardHovered: {
+    // Web hover: lift shadow
+    ...SHADOWS.md,
+  },
+  imageContainer: {
+    borderRadius: RADIUS.md,
+    overflow: 'hidden',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  imagePlaceholder: {
+    width: '100%',
+    height: '100%',
+  },
+  badgeContainer: {
+    position: 'absolute',
+    top: s(8),
+    left: s(8),
+  },
+  actionButton: {
+    position: 'absolute',
+    top: s(8),
+    right: s(8),
+    width: s(32),
+    height: s(32),
+    borderRadius: 9999,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  meta: {
+    paddingTop: vs(8),
+    gap: vs(2),
+  },
+  title: {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: ms(14),
+    lineHeight: mvs(20),
+  },
+  subtitle: {
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(13),
+    lineHeight: mvs(18),
+  },
+  caption: {
+    fontFamily: 'Poppins-Regular',
+    fontSize: ms(12),
+    lineHeight: mvs(16),
+  },
+})

package/src/components/MediaCard/index.ts

@@ -0,0 +1,2 @@
+export { MediaCard } from './MediaCard'
+export type { MediaCardProps, MediaCardAspectRatio } from './MediaCard'

package/src/components/Pressable/Pressable.tsx

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react'
+import {
+  TouchableOpacity,
+  Animated,
+  ViewStyle,
+  Platform,
+  TouchableOpacityProps,
+} from 'react-native'
+import { impactLight } from '../../utils/haptics'
+import { useHover } from '../../utils/hover'
+
+const nativeDriver = Platform.OS !== 'web'
+
+export interface PressableProps extends Omit<TouchableOpacityProps, 'activeOpacity'> {
+  /** Children content to render inside the pressable. */
+  children: React.ReactNode
+  /** Called when pressed. */
+  onPress?: () => void
+  /** Scale value on press. Defaults to `0.98` (MediaCard-style). */
+  pressScale?: number
+  /** Bounciness of the spring animation on release. Defaults to `4`. */
+  bounciness?: number
+  /** Enable haptic feedback on press. Defaults to `true`. */
+  haptics?: boolean
+  /** Additional style for the Animated wrapper. */
+  style?: ViewStyle
+  /** Disable interaction. */
+  disabled?: boolean
+  /** Hover scale (web only). Defaults to `1.02`. Set to `1` to disable. */
+  hoverScale?: number
+}
+
+/**
+ * Generic pressable with beautiful spring bounce effect matching MediaCard interaction.
+ * Use for custom pressable content that needs consistent press feel.
+ */
+export function Pressable({
+  children,
+  onPress,
+  pressScale = 0.98,
+  bounciness = 4,
+  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 handlePress = () => {
+    if (disabled || !onPress) return
+    if (haptics) impactLight()
+    onPress()
+  }
+
+  const hoverScaleValue = hovered && hoverScale !== 1 ? hoverScale : 1
+
+  return (
+    <Animated.View
+      style={[
+        { transform: [{ scale: Animated.multiply(scale, hoverScaleValue) }] },
+        style,
+      ]}
+      {...(Platform.OS === 'web' ? hoverHandlers : {})}
+    >
+      <TouchableOpacity
+        onPress={handlePress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        disabled={disabled}
+        touchSoundDisabled={true}
+        {...touchableProps}
+      >
+        {children}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}

package/src/components/Pressable/index.ts

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

package/src/components/Progress/Progress.tsx

@@ -3,15 +3,16 @@ import { View, Animated, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
 import { vs } from '../../utils/scaling'
 
+export type ProgressVariant = 'default' | 'success' | 'warning' | 'destructive'
+
 export interface ProgressProps {
-  /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
   value?: number
-  /** Maximum value. Defaults to `100`. */
   max?: number
+  variant?: ProgressVariant
   style?: ViewStyle
 }
 
-export function Progress({ value = 0, max = 100, style }: ProgressProps) {
+export function Progress({ value = 0, max = 100, variant = 'default', style }: ProgressProps) {
   const { colors } = useTheme()
   const percent = Math.min(Math.max((value / max) * 100, 0), 100)
   const [trackWidth, setTrackWidth] = useState(0)
@@ -27,13 +28,19 @@ export function Progress({ value = 0, max = 100, style }: ProgressProps) {
     }).start()
   }, [percent, trackWidth])
 
+  const indicatorColor =
+    variant === 'success'     ? colors.success
+    : variant === 'warning'     ? colors.warning
+    : variant === 'destructive' ? colors.destructive
+    : colors.primary
+
   return (
     <View
-      style={[styles.track, { backgroundColor: colors.muted }, style]}
+      style={[styles.track, { backgroundColor: colors.surface }, style]}
       onLayout={(e) => setTrackWidth(e.nativeEvent.layout.width)}
     >
       <Animated.View
-        style={[styles.indicator, { width: animatedWidth, backgroundColor: colors.primary }]}
+        style={[styles.indicator, { width: animatedWidth, backgroundColor: indicatorColor }]}
       />
     </View>
   )
@@ -42,12 +49,12 @@ export function Progress({ value = 0, max = 100, style }: ProgressProps) {
 const styles = StyleSheet.create({
   track: {
     height: vs(8),
-    borderRadius: 999,
+    borderRadius: 9999,
     overflow: 'hidden',
     width: '100%',
   },
   indicator: {
     height: '100%',
-    borderRadius: 999,
+    borderRadius: 9999,
   },
 })

package/src/components/RadioGroup/RadioGroup.tsx

@@ -71,7 +71,7 @@ function RadioItem({
       <Text
         style={[
           styles.label,
-          { color: option.disabled ? colors.mutedForeground : colors.foreground },
+          { color: option.disabled ? colors.foregroundMuted : colors.foreground },
         ]}
         allowFontScaling={true}
       >

package/src/components/Select/Select.tsx

@@ -102,14 +102,14 @@ export function Select({
             <Text
               style={[
                 styles.triggerText,
-                { color: selected ? colors.foreground : colors.mutedForeground },
+                { color: selected ? colors.foreground : colors.foregroundMuted },
               ]}
               numberOfLines={1}
               allowFontScaling={true}
             >
               {selected?.label ?? placeholder}
             </Text>
-            <Entypo name="chevron-with-circle-down" size={20} color={colors.mutedForeground} />
+            <Entypo name="chevron-with-circle-down" size={20} color={colors.foregroundMuted} />
           </TouchableOpacity>
         </Animated.View>
       ) : null}
@@ -144,7 +144,7 @@ export function Select({
               itemStyle={{ color: colors.foreground }}
             >
               {!value ? (
-                <Picker.Item label={placeholder} value="" color={colors.mutedForeground} enabled={false} />
+                <Picker.Item label={placeholder} value="" color={colors.foregroundMuted} enabled={false} />
               ) : null}
               {options.map((o) => (
                 <Picker.Item
@@ -152,7 +152,7 @@ export function Select({
                   label={o.label}
                   value={o.value}
                   enabled={!o.disabled}
-                  color={o.disabled ? colors.mutedForeground : colors.foreground}
+                  color={o.disabled ? colors.foregroundMuted : colors.foreground}
                 />
               ))}
             </Picker>
@@ -202,7 +202,7 @@ export function Select({
             styles.webPicker,
             {
               borderColor: error ? colors.destructive : colors.border,
-              color: selected ? colors.foreground : colors.mutedForeground,
+              color: selected ? colors.foreground : colors.foregroundMuted,
               backgroundColor: colors.background,
               opacity: disabled ? 0.45 : 1,
             },