@retray-dev/ui-kit 4.0.0 → 5.2.0

package/src/components/CategoryStrip/CategoryStrip.tsx

@@ -0,0 +1,185 @@
+import React, { useRef } from 'react'
+import {
+  ScrollView,
+  TouchableOpacity,
+  Animated,
+  Text,
+  View,
+  StyleSheet,
+  ViewStyle,
+  Platform,
+} from 'react-native'
+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 interface CategoryItem {
+  label: string
+  value: string
+  /** Icon rendered to the left of the label. ReactNode or icon name string. */
+  icon?: React.ReactNode | string
+  /** Badge count over the icon/label. */
+  badge?: number
+}
+
+export interface CategoryStripProps {
+  categories: CategoryItem[]
+  value?: string | string[]
+  /** Called with new value(s) on selection change. */
+  onValueChange?: (value: string | string[]) => void
+  /** Allow multiple simultaneous selections. Defaults to false. */
+  multiSelect?: boolean
+  style?: ViewStyle
+  /** Style applied to each pill item. */
+  itemStyle?: ViewStyle
+}
+
+function CategoryChip({
+  item,
+  selected,
+  onPress,
+}: {
+  item: CategoryItem
+  selected: boolean
+  onPress: () => void
+}) {
+  const { colors } = useTheme()
+  const scale = useRef(new Animated.Value(1)).current
+
+  const handlePressIn = () => {
+    Animated.spring(scale, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
+  }
+
+  const bgColor = selected ? colors.primary : colors.surface
+  const textColor = selected ? colors.primaryForeground : colors.foregroundSubtle
+  const borderColor = selected ? colors.primary : colors.border
+
+  const resolvedIcon =
+    typeof item.icon === 'string'
+      ? renderIcon(item.icon, 16, textColor)
+      : item.icon ?? null
+
+  return (
+    <Animated.View style={{ transform: [{ scale }] }}>
+      <TouchableOpacity
+        style={[
+          styles.chip,
+          {
+            backgroundColor: bgColor,
+            borderColor,
+          },
+        ]}
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        touchSoundDisabled={true}
+      >
+        {resolvedIcon && <View style={styles.chipIcon}>{resolvedIcon}</View>}
+        <Text style={[styles.chipLabel, { color: textColor }]} allowFontScaling={true}>
+          {item.label}
+        </Text>
+        {item.badge !== undefined && item.badge > 0 && (
+          <View style={[styles.chipBadge, { backgroundColor: colors.primary }]}>
+            <Text style={[styles.chipBadgeText, { color: colors.primaryForeground }]}>
+              {Math.min(item.badge, 99)}
+            </Text>
+          </View>
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  )
+}
+
+export function CategoryStrip({
+  categories,
+  value,
+  onValueChange,
+  multiSelect = false,
+  style,
+  itemStyle,
+}: CategoryStripProps) {
+  const selected = Array.isArray(value) ? value : value ? [value] : []
+
+  const handlePress = (v: string) => {
+    hapticSelection()
+    if (multiSelect) {
+      const current = Array.isArray(value) ? value : value ? [value] : []
+      const next = current.includes(v)
+        ? current.filter((x) => x !== v)
+        : [...current, v]
+      onValueChange?.(next)
+    } else {
+      onValueChange?.(v === value ? '' : v)
+    }
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[styles.container, style]}
+      style={styles.scroll}
+    >
+      {categories.map((cat) => (
+        <View key={cat.value} style={itemStyle}>
+          <CategoryChip
+            item={cat}
+            selected={selected.includes(cat.value)}
+            onPress={() => handlePress(cat.value)}
+          />
+        </View>
+      ))}
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flexGrow: 0,
+  },
+  container: {
+    flexDirection: 'row',
+    gap: s(8),
+    paddingHorizontal: s(4),
+    paddingVertical: vs(4),
+  },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: RADIUS.full,
+    borderWidth: 1,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(8),
+    gap: s(6),
+  },
+  chipIcon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chipLabel: {
+    fontFamily: 'Poppins-Medium',
+    fontSize: ms(13),
+  },
+  chipBadge: {
+    minWidth: 16,
+    height: 16,
+    borderRadius: 9999,
+    paddingHorizontal: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  chipBadgeText: {
+    fontFamily: 'Poppins-Bold',
+    fontSize: ms(9),
+    lineHeight: 14,
+  },
+})

package/src/components/CategoryStrip/index.ts

@@ -0,0 +1,2 @@
+export { CategoryStrip } from './CategoryStrip'
+export type { CategoryStripProps, CategoryItem } from './CategoryStrip'

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useEffect } from 'react'
 import { TouchableOpacity, Animated, View, Text, StyleSheet, ViewStyle, Platform } from 'react-native'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 
@@ -23,6 +23,33 @@ export function Checkbox({
 }: CheckboxProps) {
   const { colors } = useTheme()
   const scale = useRef(new Animated.Value(1)).current
+  const bgOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
+  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(bgOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 150,
+        useNativeDriver: false,
+      }),
+      Animated.timing(checkOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 120,
+        useNativeDriver: false,
+      }),
+    ]).start()
+  }, [checked, bgOpacity, checkOpacity])
+
+  const borderColor = bgOpacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.border, colors.primary],
+  })
+
+  const backgroundColor = bgOpacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['transparent', colors.primary],
+  })
 
   const handlePressIn = () => {
     if (disabled) return
@@ -46,24 +73,25 @@ export function Checkbox({
       activeOpacity={1}
       touchSoundDisabled={true}
     >
-      <Animated.View
-        style={[
-          styles.box,
-          {
-            borderColor: checked ? colors.primary : colors.border,
-            backgroundColor: checked ? colors.primary : 'transparent',
-            opacity: disabled ? 0.45 : 1,
-            transform: [{ scale }],
-          },
-        ]}
-      >
-        {checked ? (
-          <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
-        ) : null}
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <Animated.View
+          style={[
+            styles.box,
+            {
+              borderColor,
+              backgroundColor,
+              opacity: disabled ? 0.45 : 1,
+            },
+          ]}
+        >
+          <Animated.View style={{ opacity: checkOpacity }}>
+            <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
+          </Animated.View>
+        </Animated.View>
       </Animated.View>
       {label ? (
         <Text
-          style={[styles.label, { color: disabled ? colors.mutedForeground : colors.foreground }]}
+          style={[styles.label, { color: disabled ? colors.foregroundMuted : colors.foreground }]}
           allowFontScaling={true}
         >
           {label}

package/src/components/Chip/Chip.tsx

@@ -80,7 +80,7 @@ export function Chip({ label, selected = false, onPress, icon, iconName, style }
 
   const backgroundColor = pressAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [colors.secondary, colors.primary],
+    outputRange: [colors.surface, colors.primary],
   })
 
   const textColor = pressAnim.interpolate({

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -65,22 +65,15 @@ export function ConfirmDialog({
       enablePanDownToClose
     >
       <BottomSheetView style={styles.content}>
-        <Text style={[styles.title, { color: colors.cardForeground }]} allowFontScaling={true}>
+        <Text style={[styles.title, { color: colors.foreground }]} allowFontScaling={true}>
           {title}
         </Text>
         {description ? (
-          <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>
+          <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
             {description}
           </Text>
         ) : null}
         <View style={styles.actions}>
-          <Button
-            label={cancelLabel}
-            variant="outline"
-            fullWidth
-            onPress={onCancel}
-            icon={<Feather name="x" size={15} color={colors.foreground} />}
-          />
           <Button
             label={confirmLabel}
             variant={confirmVariant}
@@ -98,6 +91,13 @@ export function ConfirmDialog({
               />
             }
           />
+          <Button
+            label={cancelLabel}
+            variant="secondary"
+            fullWidth
+            onPress={onCancel}
+            icon={<Feather name="x" size={15} color={colors.foreground} />}
+          />
         </View>
       </BottomSheetView>
     </BottomSheetModal>

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -45,5 +45,6 @@ const styles = StyleSheet.create({
   amount: {
     fontFamily: 'Poppins-Bold',
     fontSize: ms(56),
+    letterSpacing: -2,
   },
 })

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ViewStyle, TextStyle } from 'react-native'
 import { Input } from '../Input'
-import { ms } from '../../utils/scaling'
+import { ms, vs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 import { useTheme } from '../../theme'
 
@@ -58,9 +58,11 @@ export function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw)
   }
 
-  const inputStyle: TextStyle = size === 'large' ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) } : { fontFamily: 'Poppins-Regular' }
+  const inputStyle: TextStyle = size === 'large'
+    ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) }
+    : { fontFamily: 'Poppins-Regular' }
 
-  const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.mutedForeground)
+  const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.foregroundMuted)
 
   // Remove prefix from display value if present
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value
@@ -77,7 +79,7 @@ export function CurrencyInput({
       editable={editable}
       prefix={dollarIcon}
       containerStyle={containerStyle}
-      inputWrapperStyle={size === 'large' ? { paddingVertical: 10 } : undefined}
+      inputWrapperStyle={size === 'large' ? { paddingVertical: vs(16), minHeight: 72 } : undefined}
       style={[inputStyle, style]}
     />
   )

package/src/components/EmptyState/EmptyState.tsx

@@ -26,7 +26,7 @@ export function EmptyState({ icon, iconName, iconColor, title, description, acti
   const isCompact = size === 'compact'
 
   const effectiveIcon: React.ReactNode = iconName
-    ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.mutedForeground)
+    ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.foregroundMuted)
     : icon
 
   return (
@@ -43,7 +43,7 @@ export function EmptyState({ icon, iconName, iconColor, title, description, acti
           style={[
             styles.iconWrapper,
             isCompact && styles.iconWrapperCompact,
-            { backgroundColor: colors.muted },
+            { backgroundColor: colors.surface },
           ]}
         >
           {effectiveIcon}
@@ -57,7 +57,7 @@ export function EmptyState({ icon, iconName, iconColor, title, description, acti
           {title}
         </Text>
         {description && !isCompact ? (
-          <Text style={[styles.description, { color: colors.mutedForeground }]} allowFontScaling={true}>{description}</Text>
+          <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>{description}</Text>
         ) : null}
       </View>
       {action && !isCompact ? <View style={styles.action}>{action}</View> : null}
@@ -80,16 +80,16 @@ const styles = StyleSheet.create({
     gap: vs(10),
   },
   iconWrapper: {
-    width: s(48),
-    height: s(48),
-    borderRadius: ms(12),
+    width: s(80),
+    height: s(80),
+    borderRadius: ms(20),
     alignItems: 'center',
     justifyContent: 'center',
   },
   iconWrapperCompact: {
-    width: s(36),
-    height: s(36),
-    borderRadius: ms(8),
+    width: s(56),
+    height: s(56),
+    borderRadius: ms(14),
   },
   textWrapper: {
     alignItems: 'center',

package/src/components/IconButton/IconButton.tsx

@@ -4,6 +4,8 @@ import {
   Animated,
   ActivityIndicator,
   StyleSheet,
+  View,
+  Text,
   TouchableOpacityProps,
   ViewStyle,
   Platform,
@@ -12,30 +14,33 @@ import {
 const nativeDriver = Platform.OS !== 'web'
 import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
-import { s } from '../../utils/scaling'
+import { s, ms } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
-export type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+// primary: filled primary
+// secondary: filled surface — icon on neutral bg (Airbnb icon-button-circle)
+// outline: transparent + border
+// text: fully transparent
+// destructive: filled destructive
+export type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'destructive'
 export type IconButtonSize = 'sm' | 'md' | 'lg'
 
 export interface IconButtonProps extends TouchableOpacityProps {
-  /**
-   * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
-   * See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
-   */
   iconName?: string
-  /** ReactNode icon — used when `iconName` is not provided. */
   icon?: React.ReactNode
-  /** Override the resolved icon color. Defaults to the foreground color for the active variant. */
   iconColor?: string
   variant?: IconButtonVariant
   size?: IconButtonSize
-  /** Replaces icon with a spinner and forces `disabled`. */
   loading?: boolean
+  /**
+   * Badge overlay. `true` shows a dot. A number shows a count (capped at 99).
+   * The dot/count appears top-right of the button.
+   */
+  badge?: boolean | number
 }
 
 const sizeMap: Record<IconButtonSize, { container: number; icon: number }> = {
-  sm: { container: s(40), icon: 18 },
+  sm: { container: s(32), icon: 16 },
   md: { container: s(44), icon: 20 },
   lg: { container: s(52), icon: 24 },
 }
@@ -47,6 +52,7 @@ export function IconButton({
   variant = 'primary',
   size = 'md',
   loading = false,
+  badge,
   disabled,
   style,
   onPress,
@@ -58,21 +64,11 @@ export function IconButton({
 
   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, speed: 40, bounciness: 0 }).start()
   }
 
   const handlePressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 4,
-    }).start()
+    Animated.spring(scale, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start()
   }
 
   const handlePress: TouchableOpacityProps['onPress'] = (e) => {
@@ -81,24 +77,24 @@ export function IconButton({
   }
 
   const containerVariantStyle: ViewStyle = {
-    primary: { backgroundColor: colors.primary },
-    secondary: { backgroundColor: colors.secondary },
-    outline: { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
-    ghost: { backgroundColor: 'transparent' },
+    primary:     { backgroundColor: colors.primary },
+    secondary:   { backgroundColor: colors.surface },
+    outline:     { backgroundColor: 'transparent', borderWidth: 1.5, borderColor: colors.border },
+    text:        { backgroundColor: 'transparent' },
     destructive: { backgroundColor: colors.destructive },
   }[variant]
 
   const defaultIconColor: string = {
-    primary: colors.primaryForeground,
-    secondary: colors.secondaryForeground,
-    outline: colors.foreground,
-    ghost: colors.foreground,
+    primary:     colors.primaryForeground,
+    secondary:   colors.foreground,
+    outline:     colors.foreground,
+    text:        colors.foreground,
     destructive: colors.destructiveForeground,
   }[variant]
 
   const spinnerColor =
     variant === 'destructive' ? colors.destructiveForeground
-    : variant === 'primary' || variant === 'secondary' ? colors.primaryForeground
+    : variant === 'primary' ? colors.primaryForeground
     : colors.foreground
 
   const { container: containerSize, icon: iconSize } = sizeMap[size]
@@ -107,8 +103,13 @@ export function IconButton({
     ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor)
     : icon
 
+  // Badge rendering
+  const showBadge = badge !== undefined && badge !== false && badge !== 0
+  const badgeCount = typeof badge === 'number' ? Math.min(badge, 99) : null
+  const showCount = typeof badge === 'number' && badge > 0
+
   return (
-    <Animated.View style={{ transform: [{ scale }] }}>
+    <Animated.View style={[styles.wrapper, { transform: [{ scale }] }]}>
       <TouchableOpacity
         style={[
           styles.base,
@@ -131,17 +132,56 @@ export function IconButton({
           resolvedIcon
         )}
       </TouchableOpacity>
+      {showBadge && (
+        <View style={[
+          styles.badge,
+          { backgroundColor: colors.primary },
+          showCount ? styles.badgeCount : styles.badgeDot,
+        ]}>
+          {showCount && (
+            <Text style={[styles.badgeText, { color: colors.primaryForeground }]}>
+              {badgeCount}
+            </Text>
+          )}
+        </View>
+      )}
     </Animated.View>
   )
 }
 
 const styles = StyleSheet.create({
+  wrapper: {
+    alignSelf: 'flex-start',
+  },
   base: {
-    borderRadius: 999,
+    borderRadius: 9999,
     alignItems: 'center',
     justifyContent: 'center',
   },
   disabled: {
-    opacity: 0.5,
+    opacity: 0.45,
+  },
+  badge: {
+    position: 'absolute',
+    top: -2,
+    right: -2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 9999,
+  },
+  badgeCount: {
+    minWidth: 16,
+    height: 16,
+    borderRadius: 9999,
+    paddingHorizontal: 3,
+  },
+  badgeText: {
+    fontFamily: 'Poppins-Bold',
+    fontSize: ms(9),
+    lineHeight: 14,
   },
 })