@retray-dev/ui-kit 5.4.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "5.4.0",
+  "version": "6.0.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -52,7 +52,9 @@
     "react-native-reanimated": ">=4.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-size-matters": ">=0.4.0",
-    "react-native-worklets": ">=0.5.0"
+    "react-native-worklets": ">=0.5.0",
+    "react-native-svg": ">=15.0.0",
+    "react-native-screens": ">=3.0.0"
   },
   "pnpm": {
     "overrides": {
@@ -87,6 +89,9 @@
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.2",
     "react-native-worklets": "~0.5.1",
+    "sonner-native": "0.23.1",
+    "react-native-svg": "15.12.1",
+    "react-native-screens": "4.16.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "typescript-eslint": "^8.0.0"

package/src/components/Accordion/Accordion.tsx

@@ -12,7 +12,11 @@ import Animated, {
   useAnimatedStyle,
   withTiming,
   Easing,
+  type EasingFunction,
 } from 'react-native-reanimated'
+
+const easingExpand: EasingFunction = Easing.bezier(0.23, 1, 0.32, 1) as unknown as EasingFunction
+const easingCollapse: EasingFunction = Easing.in(Easing.ease)
 import { Entypo } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
@@ -73,14 +77,14 @@ function AccordionItemComponent({
   const derivedHeight = useDerivedValue(() =>
     withTiming(height.value * Number(isExpanded.value), {
       duration: 220,
-      easing: isExpanded.value ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
+      easing: isExpanded.value ? easingExpand : easingCollapse,
     })
   )
 
   const derivedRotation = useDerivedValue(() =>
     withTiming(isExpanded.value ? 1 : 0, {
       duration: 220,
-      easing: isExpanded.value ? Easing.out(Easing.ease) : Easing.in(Easing.ease),
+      easing: isExpanded.value ? easingExpand : easingCollapse,
     })
   )
 

package/src/components/AlertBanner/AlertBanner.tsx

@@ -4,6 +4,7 @@ import { FontAwesome5, MaterialIcons, Entypo } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
+import { RADIUS } from '../../tokens'
 
 export type AlertBannerVariant = 'default' | 'destructive' | 'success' | 'warning'
 
@@ -20,52 +21,36 @@ export interface AlertBannerProps {
 export function AlertBanner({ title, description, variant = 'default', icon, iconName, iconColor, style }: AlertBannerProps) {
   const { colors } = useTheme()
 
-  const bgColor =
-    variant === 'destructive' ? colors.destructiveTint
-    : variant === 'success'   ? colors.successTint
-    : variant === 'warning'   ? colors.warningTint
-    : colors.card
-
-  const borderColor =
-    variant === 'destructive' ? colors.destructiveBorder
-    : variant === 'success'   ? colors.successBorder
-    : variant === 'warning'   ? colors.warningBorder
-    : colors.border
-
   const accentColor =
     variant === 'destructive' ? colors.destructive
     : variant === 'success'   ? colors.success
     : variant === 'warning'   ? colors.warning
     : colors.primary
 
-  const titleColor =
-    variant === 'default' ? colors.foreground : accentColor
-
-  const descColor =
-    variant === 'default' ? colors.foregroundMuted : accentColor
-
   const defaultIcon =
     variant === 'success' ? (
-      <FontAwesome5 name="check-circle" size={16} color={accentColor} />
+      <FontAwesome5 name="check-circle" size={ms(16)} color={accentColor} />
     ) : variant === 'destructive' ? (
-      <MaterialIcons name="error-outline" size={17} color={accentColor} />
+      <MaterialIcons name="error-outline" size={ms(17)} color={accentColor} />
     ) : variant === 'warning' ? (
-      <MaterialIcons name="warning-amber" size={17} color={accentColor} />
+      <MaterialIcons name="warning-amber" size={ms(17)} color={accentColor} />
     ) : (
-      <Entypo name="info-with-circle" size={16} color={accentColor} />
+      <Entypo name="info-with-circle" size={ms(16)} color={accentColor} />
     )
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, 16, iconColor ?? accentColor)
+    ? renderIcon(iconName, ms(16), iconColor ?? accentColor)
     : icon ?? defaultIcon
 
   return (
-    <View style={[styles.container, { backgroundColor: bgColor, borderColor }, style]}>
+    <View style={[styles.container, { backgroundColor: colors.card }, style]}>
+      {/* Icon */}
       <View style={styles.iconSlot}>{effectiveIcon}</View>
+      {/* Text */}
       <View style={styles.content}>
-        <Text style={[styles.title, { color: titleColor }]} allowFontScaling={true}>{title}</Text>
+        <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>{title}</Text>
         {description ? (
-          <Text style={[styles.description, { color: descColor }]} allowFontScaling={true}>{description}</Text>
+          <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
     </View>
@@ -76,11 +61,10 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    borderWidth: 0.5,
-    borderRadius: 10,
-    paddingHorizontal: s(12),
-    paddingVertical: vs(10),
-    gap: s(10),
+    borderRadius: RADIUS.lg,
+    gap: s(8),
+    paddingVertical: vs(8),
+    paddingHorizontal: s(10),
   },
   iconSlot: {
     marginTop: vs(1),
@@ -92,12 +76,11 @@ const styles = StyleSheet.create({
   title: {
     fontFamily: 'Poppins-Medium',
     fontSize: ms(13),
-    lineHeight: ms(18),
+    lineHeight: ms(19),
   },
   description: {
     fontFamily: 'Poppins-Regular',
     fontSize: ms(12),
     lineHeight: ms(17),
-    opacity: 0.85,
   },
 })

package/src/components/Button/Button.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native'
 
 const nativeDriver = Platform.OS !== 'web'
-import { impactLight } from '../../utils/haptics'
+import { impactMedium } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
@@ -73,15 +73,15 @@ export function Button({
 
   const handlePressIn = () => {
     if (isDisabled) return
-    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, stiffness: 600, damping: 35, mass: 0.8 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, stiffness: 280, damping: 22, mass: 0.8 }).start()
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
-    impactLight()
+    impactMedium()
     onPress?.(e)
   }
 
@@ -135,7 +135,16 @@ export function Button({
         {...props}
       >
         {loading ? (
-          <ActivityIndicator size="small" color={spinnerColor} />
+          <>
+            <ActivityIndicator size="small" color={spinnerColor} style={{ marginRight: s(6) }} />
+            <Text
+              style={[styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading]}
+              allowFontScaling={true}
+              numberOfLines={1}
+            >
+              {label}
+            </Text>
+          </>
         ) : (
           <>
             {effectiveIcon && iconPosition === 'left' && <>{effectiveIcon}</>}
@@ -156,7 +165,7 @@ export function Button({
 
 const styles = StyleSheet.create({
   base: {
-    borderRadius: RADIUS.xl,   // 32px — pill-shaped primary CTA (Airbnb spec)
+    borderRadius: RADIUS.md,   // 14px — Airbnb-aligned rounded rect (not pill)
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
@@ -174,4 +183,7 @@ const styles = StyleSheet.create({
   labelWithIcon: {
     marginHorizontal: s(6),
   },
+  labelLoading: {
+    opacity: 0.6,
+  },
 })

package/src/components/Card/Card.tsx

@@ -3,6 +3,7 @@ import { View, Text, TouchableOpacity, Animated, StyleSheet, ViewStyle, TextStyl
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { RADIUS } from '../../tokens'
 
 const nativeDriver = Platform.OS !== 'web'
 
@@ -51,8 +52,9 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
     Animated.spring(scale, {
       toValue: 0.98,
       useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0,
+      stiffness: 400,
+      damping: 30,
+      mass: 1.0,
     }).start()
   }
 
@@ -61,8 +63,9 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
     Animated.spring(scale, {
       toValue: 1,
       useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 4,
+      stiffness: 250,
+      damping: 24,
+      mass: 1.0,
     }).start()
   }
 
@@ -77,10 +80,10 @@ export function Card({ children, variant = 'elevated', onPress, style }: CardPro
       backgroundColor: colors.card,
       borderColor: colors.border,
       shadowColor: '#000',
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.06,
-      shadowRadius: 12,
-      elevation: 3,
+      shadowOffset: { width: 0, height: 6 },
+      shadowOpacity: 0.10,
+      shadowRadius: 16,
+      elevation: 4,
     },
     outlined: {
       backgroundColor: colors.card,
@@ -147,7 +150,7 @@ export function CardFooter({ children, style }: CardFooterProps) {
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 14,           // RADIUS.md — Airbnb property card spec
+    borderRadius: RADIUS.md,    // 14px — Airbnb property card spec
     borderWidth: 1,
   },
   header: {

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -7,7 +7,7 @@ import {
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet'
 import { Feather } from '@expo/vector-icons'
-import { impactLight } from '../../utils/haptics'
+import { impactMedium, notificationSuccess, selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { Button } from '../Button'
 import { s, vs, ms, mvs } from '../../utils/scaling'
@@ -38,7 +38,7 @@ export function ConfirmDialog({
 
   useEffect(() => {
     if (visible) {
-      impactLight()
+      impactMedium()
       ref.current?.present()
     } else {
       ref.current?.dismiss()
@@ -78,7 +78,7 @@ export function ConfirmDialog({
             label={confirmLabel}
             variant={confirmVariant}
             fullWidth
-            onPress={onConfirm}
+            onPress={() => { notificationSuccess(); onConfirm() }}
             icon={
               <Feather
                 name={confirmVariant === 'destructive' ? 'trash-2' : 'check'}
@@ -95,7 +95,7 @@ export function ConfirmDialog({
             label={cancelLabel}
             variant="secondary"
             fullWidth
-            onPress={onCancel}
+            onPress={() => { hapticSelection(); onCancel() }}
             icon={<Feather name="x" size={15} color={colors.foreground} />}
           />
         </View>

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -12,6 +12,13 @@ const variantFontSize: Record<CurrencyDisplayVariant, number> = {
   small:  ms(14),
 }
 
+const variantLetterSpacing: Record<CurrencyDisplayVariant, number> = {
+  hero:   -2,
+  large:  -1,
+  medium: -0.5,
+  small:  0,
+}
+
 export interface CurrencyDisplayProps {
   value: number | string
   /** Symbol prepended to the formatted value. Defaults to `'$'`. */
@@ -47,11 +54,12 @@ export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, tex
   const formatted = formatValue(value, prefix, showDecimals)
   const baseFontSize = variant ? variantFontSize[variant] : ms(56)
   const fontSize = maxFontSize ?? baseFontSize
+  const letterSpacing = variant ? variantLetterSpacing[variant] : -2
 
   return (
     <View style={[styles.container, style]}>
       <Text
-        style={[styles.amount, { color: textColor ?? colors.foreground, fontSize }]}
+        style={[styles.amount, { color: textColor ?? colors.foreground, fontSize, letterSpacing }]}
         allowFontScaling={true}
         numberOfLines={autoScale ? 1 : undefined}
         adjustsFontSizeToFit={autoScale}
@@ -64,9 +72,12 @@ export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, tex
 }
 
 const styles = StyleSheet.create({
-  container: {},
+  container: {
+    alignSelf: 'flex-start',
+  },
   amount: {
     fontFamily: 'Poppins-Bold',
-    letterSpacing: -2,
+    includeFontPadding: false,
+    textAlignVertical: 'top',
   },
 })

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/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: {