@retray-dev/ui-kit 4.0.0 → 5.1.0

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,
             },

package/src/components/Sheet/Sheet.tsx

@@ -66,10 +66,10 @@ export function Sheet({
         {title || description ? (
           <View style={styles.header}>
             {title ? (
-              <Text style={[styles.title, { color: colors.cardForeground }]} allowFontScaling={true}>{title}</Text>
+              <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>{title}</Text>
             ) : null}
             {description ? (
-              <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
+              <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
                 {description}
               </Text>
             ) : null}

package/src/components/Skeleton/Skeleton.tsx

@@ -2,15 +2,30 @@ import React, { useEffect, useRef, useState } from 'react'
 import { Animated, StyleSheet, View, ViewStyle } from 'react-native'
 import { LinearGradient } from 'expo-linear-gradient'
 import { useTheme } from '../../theme'
+import { s } from '../../utils/scaling'
+
+// circle: circular avatar placeholder  text: short line preset  base: custom dimensions
+export type SkeletonPreset = 'base' | 'circle' | 'text'
 
 export interface SkeletonProps {
   width?: number | string
   height?: number
   borderRadius?: number
+  /** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
+  preset?: SkeletonPreset
+  /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
+  diameter?: number
   style?: ViewStyle
 }
 
-export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style }: SkeletonProps) {
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  borderRadius = 6,
+  preset = 'base',
+  diameter = 40,
+  style,
+}: SkeletonProps) {
   const { colors, colorScheme } = useTheme()
   const shimmerAnim = useRef(new Animated.Value(0)).current
   const [containerWidth, setContainerWidth] = useState(300)
@@ -20,11 +35,7 @@ export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style
 
   useEffect(() => {
     const animation = Animated.loop(
-      Animated.timing(shimmerAnim, {
-        toValue: 1,
-        duration: 1200,
-        useNativeDriver: true,
-      })
+      Animated.timing(shimmerAnim, { toValue: 1, duration: 1200, useNativeDriver: true })
     )
     animation.start()
     return () => animation.stop()
@@ -35,11 +46,27 @@ export function Skeleton({ width = '100%', height = 16, borderRadius = 6, style
     outputRange: [-containerWidth, containerWidth],
   })
 
+  // Resolve dimensions by preset
+  const resolvedWidth: number | string =
+    preset === 'circle' ? s(diameter)
+    : preset === 'text'   ? '60%'
+    : width
+
+  const resolvedHeight: number =
+    preset === 'circle' ? s(diameter)
+    : preset === 'text'   ? 14
+    : height
+
+  const resolvedRadius: number =
+    preset === 'circle' ? 9999
+    : preset === 'text'   ? 4
+    : borderRadius
+
   return (
     <View
       style={[
         styles.base,
-        { width: width as any, height, borderRadius, backgroundColor: colors.muted },
+        { width: resolvedWidth as any, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
         style,
       ]}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}

package/src/components/Slider/Slider.tsx

@@ -55,7 +55,7 @@ export function Slider({
             </Text>
           ) : null}
           {showValue ? (
-            <Text style={[styles.valueText, { color: colors.mutedForeground }]} allowFontScaling={true}>
+            <Text style={[styles.valueText, { color: colors.foregroundMuted }]} allowFontScaling={true}>
               {formatValue(value)}
             </Text>
           ) : null}
@@ -71,7 +71,7 @@ export function Slider({
           onValueChange={handleValueChange}
           onSlidingComplete={onSlidingComplete}
           minimumTrackTintColor={colors.primary}
-          maximumTrackTintColor={colors.muted}
+          maximumTrackTintColor={colors.surface}
           thumbTintColor={colors.primary}
           style={styles.slider}
           accessibilityLabel={accessibilityLabel}

package/src/components/Spinner/Spinner.tsx

@@ -31,7 +31,7 @@ export function Spinner({ size = 'md', color, label, ...props }: SpinnerProps) {
       <View style={styles.wrapper}>
         <ActivityIndicator size={sizeMap[size]} color={color ?? colors.primary} {...props} />
         <Text
-          style={[styles.label, { color: colors.mutedForeground, fontSize: labelFontSize[size] }]}
+          style={[styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }]}
           allowFontScaling={true}
         >
           {label}