@retray-dev/ui-kit 12.1.0 → 13.0.0

package/src/components/Stats/Stats.tsx

@@ -4,10 +4,11 @@ import { impactLight } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { RADIUS } from '../../tokens'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { PressableCard } from '../../utils/pressable'
 
 export type StatsVariant = 'elevated' | 'outlined' | 'filled'
+export type StatsSize = 'default' | 'compact'
 
 export interface StatsProps {
   value: string
@@ -17,6 +18,8 @@ export interface StatsProps {
   iconName?: string
   iconColor?: string
   variant?: StatsVariant
+  /** `'compact'` reduces everything proportionally for tight grids. */
+  size?: StatsSize
   onPress?: () => void
   style?: ViewStyle
   accessibilityLabel?: string
@@ -38,6 +41,7 @@ function StatsComponent({
   iconName,
   iconColor,
   variant = 'elevated',
+  size = 'default',
   onPress,
   style,
   accessibilityLabel,
@@ -60,6 +64,30 @@ function StatsComponent({
 
   const isCompact = containerWidth > 0 && containerWidth < COMPACT_THRESHOLD && !!(icon ?? iconName)
 
+  const sizeStyles = size === 'compact'
+    ? {
+        valueFontFamily: 'Sohne-SemiBold' as const,
+        valueFontSize: ms(16),
+        valueLineHeight: mvs(20),
+        labelFontSize: ms(11),
+        labelLineHeight: mvs(14),
+        descriptionFontSize: ms(10),
+        descriptionLineHeight: mvs(14),
+        iconSize: ms(18),
+        padding: s(12),
+      }
+    : {
+        valueFontFamily: 'Sohne-Bold' as const,
+        valueFontSize: ms(21),
+        valueLineHeight: mvs(25),
+        labelFontSize: ms(13),
+        labelLineHeight: mvs(18),
+        descriptionFontSize: ms(12),
+        descriptionLineHeight: mvs(16),
+        iconSize: ms(20),
+        padding: s(16),
+      }
+
   const variantStyle: ViewStyle = {
     elevated: {
       backgroundColor: colors.card,
@@ -86,29 +114,29 @@ function StatsComponent({
 
   const iconColorResolved = iconColor ?? colors.primary
 
-  const resolvedIcon = iconName ? renderIcon(iconName, ms(22), iconColorResolved) : icon
+  const resolvedIcon = iconName ? <Icon name={iconName} size={sizeStyles.iconSize} color={iconColorResolved} /> : icon
 
   const iconElement = resolvedIcon ? (
     <View style={styles.iconWrapper}>{resolvedIcon}</View>
   ) : null
 
   const valueElement = (
-    <Text style={[styles.value, { color: colors.foreground }]} allowFontScaling={true}>
+    <Text style={[styles.value, { color: colors.foreground, fontFamily: sizeStyles.valueFontFamily, fontSize: sizeStyles.valueFontSize, lineHeight: sizeStyles.valueLineHeight }]} allowFontScaling={true}>
       {value}
     </Text>
   )
 
   const cardContent = (
-    <View style={[styles.card, variantStyle, style]} onLayout={handleLayout}>
+    <View style={[styles.card, variantStyle, { padding: sizeStyles.padding }, style]} onLayout={handleLayout}>
       {isCompact ? (
         <>
           {iconElement}
           <View style={styles.compactValue}>{valueElement}</View>
-          <Text style={[styles.label, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
+          <Text style={[styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }]} allowFontScaling={true}>
             {label}
           </Text>
           {description ? (
-            <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+            <Text style={[styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }]} allowFontScaling={true}>
               {description}
             </Text>
           ) : null}
@@ -119,11 +147,11 @@ function StatsComponent({
             {iconElement}
             {valueElement}
           </View>
-          <Text style={[styles.label, { color: colors.foregroundSubtle }]} allowFontScaling={true}>
+          <Text style={[styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }]} allowFontScaling={true}>
             {label}
           </Text>
           {description ? (
-            <Text style={[styles.description, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+            <Text style={[styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }]} allowFontScaling={true}>
               {description}
             </Text>
           ) : null}

package/src/components/Switch/Switch.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
-import { TouchableOpacity, StyleSheet, ViewStyle, View } from 'react-native'
+import { StyleSheet, ViewStyle, View } from 'react-native'
 import { EaseView } from 'react-native-ease'
 import { Feather } from '@expo/vector-icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { useTheme } from '../../theme'
 import { s } from '../../utils/scaling'
 import { COLOR_TRANSITION, OPACITY_TRANSITION, SPRING_ELASTIC } from '../../utils/animations'
+import { PressableButton } from '../../utils/pressable'
 
 const TRACK_WIDTH  = s(52)
 const TRACK_HEIGHT = s(30)
@@ -30,14 +31,14 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
 
   return (
     <View style={[{ alignSelf: 'flex-start' }, style]}>
-      <TouchableOpacity
+      <PressableButton
         onPress={() => {
           hapticSelection()
           onCheckedChange?.(!checked)
         }}
-        disabled={disabled}
-        activeOpacity={0.8}
-        touchSoundDisabled={true}
+        enabled={!disabled}
+        rippleColor="transparent"
+        touchSoundDisabled
         accessibilityRole="switch"
         accessibilityLabel={accessibilityLabel}
         accessibilityState={{ checked, disabled: isDisabled }}
@@ -76,7 +77,7 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
             </EaseView>
           </EaseView>
         </View>
-      </TouchableOpacity>
+      </PressableButton>
     </View>
   )
 }
@@ -84,6 +85,8 @@ export function Switch({ checked = false, onCheckedChange, disabled, style, acce
 const styles = StyleSheet.create({
   touchable: {
     alignSelf: 'flex-start',
+    minHeight: 44,
+    justifyContent: 'center',
   },
   trackContainer: {
     position: 'relative',

package/src/components/TabBar/TabBar.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { View, Text, TouchableOpacity, StyleSheet, ViewStyle } from 'react-native'
+import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
-import { renderIcon } from '../../utils/icons'
+import { Icon } from '../../utils/icons'
 import { selectionAsync as hapticSelection } from '../../utils/haptics'
 import { s, vs, ms, mvs } from '../../utils/scaling'
+import { PressableTab } from '../../utils/pressable'
 
 export interface TabBarItem {
   /** Unique key for the tab. */
@@ -74,23 +75,23 @@ export function TabBar({
       {items.map((item) => {
         const active = item.key === activeKey
         const tint = active ? resolvedActive : resolvedInactive
-        const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), tint) : null)
+        const iconNode = item.icon ?? (item.iconName ? <Icon name={item.iconName} size={ms(24)} color={tint} /> : null)
         const showBadge = item.badge !== undefined && item.badge !== false
         const badgeCount = typeof item.badge === 'number' ? item.badge : undefined
 
         return (
-          <TouchableOpacity
+          <PressableTab
             key={item.key}
-            style={styles.tab}
             onPress={() => {
               if (!active) hapticSelection()
               onTabPress(item.key)
             }}
-            activeOpacity={0.7}
-            touchSoundDisabled={true}
+            rippleColor="transparent"
+            touchSoundDisabled
             accessibilityRole="tab"
             accessibilityState={{ selected: active }}
             accessibilityLabel={item.label ?? item.key}
+            style={styles.tab}
           >
             <View>
               {iconNode}
@@ -115,7 +116,7 @@ export function TabBar({
                 {item.label}
               </Text>
             ) : null}
-          </TouchableOpacity>
+          </PressableTab>
         )
       })}
     </View>

package/src/components/Text/Text.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
 import { Text as RNText, TextProps as RNTextProps, TextStyle } from 'react-native'
+
+declare const __DEV__: boolean | undefined
 import { useTheme } from '../../theme'
 import { TYPOGRAPHY } from '../../tokens'
 import { ms, mvs } from '../../utils/scaling'
-import { warnIfFontsMissing } from '../../utils/fontGuard'
+import { isLoaded as expoFontIsLoaded } from 'expo-font'
 
 export type TextVariant =
   | 'display-hero'
@@ -70,6 +72,15 @@ const defaultColorVariant: Partial<Record<TextVariant, 'foreground' | 'foregroun
   'button-sm':    'foreground',
 }
 
+let fontWarned = false
+function warnIfFontsMissing(): void {
+  if (fontWarned || typeof __DEV__ === 'undefined' || !__DEV__) return
+  fontWarned = true
+  if (!expoFontIsLoaded('Sohne-Regular')) {
+    console.warn('[retray-ui-kit] Sohne fonts not loaded — text falls back to system font.')
+  }
+}
+
 function TextBase({ variant = 'body-md', color, style, uppercase, children, ...props }: TextProps) {
   warnIfFontsMissing()
   const { colors } = useTheme()

package/src/components/Textarea/Textarea.tsx

@@ -1,15 +1,10 @@
 import React, { useState } from 'react'
 import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, Platform } from 'react-native'
-import Animated, {
-  useAnimatedStyle,
-  interpolateColor,
-  interpolate,
-} from 'react-native-reanimated'
+import { EaseView } from 'react-native-ease'
 import { useTheme } from '../../theme'
 import { s, vs, ms } from '../../utils/scaling'
-import { renderIcon } from '../../utils/icons'
-import { useColorTransition } from '../../utils/useColorTransition'
-import { TIMINGS } from '../../utils/animations'
+import { Icon } from '../../utils/icons'
+import { COLOR_TRANSITION } from '../../utils/animations'
 
 const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
@@ -20,6 +15,7 @@ export interface TextareaProps extends TextInputProps {
   label?: string
   error?: string
   hint?: string
+  disabled?: boolean
   rows?: number
   prefixIcon?: string
   prefixIconNode?: React.ReactNode
@@ -31,6 +27,7 @@ export function Textarea({
   label,
   error,
   hint,
+  disabled,
   rows = 4,
   prefixIcon,
   prefixIconNode,
@@ -44,46 +41,36 @@ export function Textarea({
 }: TextareaProps) {
   const { colors } = useTheme()
   const [focused, setFocused] = useState(false)
-  const focusProgress = useColorTransition(focused, {
-    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
-  })
 
   const resolvedPrefixIcon = prefixIcon
-    ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted)
+    ? <Icon name={prefixIcon} size={ms(16)} color={prefixIconColor ?? colors.foregroundMuted} />
     : prefixIconNode
 
-  // Border drawn on an absolute overlay (mirrors Input.tsx) so the 1px→2px
-  // focus weight change never resizes the box / reflows content.
-  const borderAnimStyle = useAnimatedStyle(() => ({
-    borderColor: error
-      ? colors.destructive
-      : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error
-      ? 2
-      : interpolate(focusProgress.value, [0, 1], [1, 2]),
-  }))
+  const borderColor = error ? colors.destructive : (focused ? colors.primary : colors.border)
 
   return (
     <View style={[styles.container, containerStyle]}>
       {label ? <Text style={[styles.label, { color: colors.foreground }]} allowFontScaling={true}>{label}</Text> : null}
-      <Animated.View
-        style={[
-          styles.inputWrapper,
-          { backgroundColor: colors.background },
-        ]}
-      >
-        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
+      <View style={[styles.inputWrapper, { backgroundColor: colors.background }]}>
+        <EaseView
+          style={[styles.borderOverlay, { borderWidth: error ? 2 : 1 }]}
+          animate={{ borderColor }}
+          transition={COLOR_TRANSITION}
+          pointerEvents="none"
+        />
         {resolvedPrefixIcon ? <View style={styles.prefixIcon}>{resolvedPrefixIcon}</View> : null}
         <TextInput
           multiline
           numberOfLines={rows}
           textAlignVertical="top"
+          editable={!disabled}
           style={[
             styles.input,
             {
               color: colors.foreground,
               minHeight: rows * vs(30),
             },
+            disabled && { opacity: 0.45 },
             webInputResetStyle,
             style,
           ]}
@@ -98,9 +85,10 @@ export function Textarea({
           placeholderTextColor={colors.foregroundMuted}
           allowFontScaling={true}
           accessibilityLabel={accessibilityLabel ?? label}
+          accessibilityState={{ disabled: !!disabled }}
           {...props}
         />
-      </Animated.View>
+      </View>
       {error ? (
         <Text
           style={[styles.helperText, { color: colors.destructive }]}
@@ -128,8 +116,6 @@ const styles = StyleSheet.create({
     marginBottom: vs(2),
   },
   inputWrapper: {
-    // Border lives on borderOverlay (absolute); wrapper carries none so the
-    // focus weight change never reflows content.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),

package/src/components/Toggle/Toggle.tsx

@@ -5,7 +5,7 @@ import { FontAwesome5 } 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 { Icon } from '../../utils/icons'
 import { COLOR_TRANSITION } from '../../utils/animations'
 import { PressableButton } from '../../utils/pressable'
 
@@ -30,13 +30,13 @@ function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconC
   }
 
   if (pressed) {
-    if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? primaryColor)}</>
+    if (activeIconName) return <Icon name={activeIconName} size={iconSize} color={activeIconColor ?? primaryColor} />
     const active = renderProp(activeIcon)
     if (active) return <>{active}</>
     return <FontAwesome5 name="check-circle" size={iconSize} color={primaryColor} />
   }
 
-  if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? mutedColor)}</>
+  if (iconName) return <Icon name={iconName} size={iconSize} color={iconColor ?? mutedColor} />
   const custom = renderProp(icon)
   if (custom) return <>{custom}</>
 

package/src/hooks/useConfirmDialog.ts

@@ -1,67 +1,56 @@
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface UseConfirmDialogOptions {
   onConfirm: () => void | Promise<void>
   onCancel?: () => void
 }
 
-export interface UseConfirmDialogResult<T> {
-  /** Pass to ConfirmDialog `visible` prop. */
+export interface UseConfirmDialogResult {
   visible: boolean
-  /** The value passed to `open()` — available during the confirmation flow. */
-  target: T | null
-  /** Whether `onConfirm` is currently executing. Pass to ConfirmDialog `loading` prop. */
   loading: boolean
-  /** Open the dialog, optionally with an associated value (e.g. the item to delete). */
-  open: (target?: T) => void
-  /** Handlers to pass directly to ConfirmDialog. */
-  dialogProps: {
-    visible: boolean
-    loading: boolean
-    onConfirm: () => void
-    onCancel: () => void
-  }
+  open: () => void
+  onConfirm: () => void
+  onCancel: () => void
 }
 
-export function useConfirmDialog<T = undefined>(
-  options: UseConfirmDialogOptions,
-): UseConfirmDialogResult<T> {
+export function useConfirmDialog(options: UseConfirmDialogOptions): UseConfirmDialogResult {
   const [visible, setVisible] = useState(false)
-  const [target, setTarget] = useState<T | null>(null)
   const [loading, setLoading] = useState(false)
+  const mountedRef = useRef(true)
+  const onConfirmRef = useRef(options.onConfirm)
+  const onCancelRef = useRef(options.onCancel)
 
-  const open = useCallback((t?: T) => {
-    setTarget(t ?? null)
-    setVisible(true)
+  useEffect(() => {
+    onConfirmRef.current = options.onConfirm
+    onCancelRef.current = options.onCancel
+  })
+
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false
+    }
   }, [])
 
+  const open = useCallback(() => setVisible(true), [])
+
   const handleConfirm = useCallback(async () => {
     setLoading(true)
     try {
-      await options.onConfirm()
+      await onConfirmRef.current()
+    } catch {
+      /* consumer handles error in onConfirm */
     } finally {
-      setLoading(false)
-      setVisible(false)
-      setTarget(null)
+      if (mountedRef.current) {
+        setLoading(false)
+        setVisible(false)
+      }
     }
-  }, [options])
+  }, [])
 
   const handleCancel = useCallback(() => {
     setVisible(false)
-    setTarget(null)
-    options.onCancel?.()
-  }, [options])
+    onCancelRef.current?.()
+  }, [])
 
-  return {
-    visible,
-    target,
-    loading,
-    open,
-    dialogProps: {
-      visible,
-      loading,
-      onConfirm: handleConfirm,
-      onCancel: handleCancel,
-    },
-  }
+  return { visible, loading, open, onConfirm: handleConfirm, onCancel: handleCancel }
 }

package/src/index.ts

@@ -44,12 +44,12 @@ export * from './components/CategoryStrip'
 export * from './components/Pressable'
 export * from './components/DetailRow'
 export * from './components/Form'
-export * from './components/VirtualList'
 export * from './components/RetrayProvider'
 export * from './components/ErrorBoundary'
 export * from './components/PagerDots'
 export * from './components/AppHeader'
 export * from './components/SelectableGrid'
+export * from './components/SelectableCard'
 export * from './components/PricingCard'
 export * from './components/TabBar'
 export * from './components/ImageViewer'
@@ -63,10 +63,10 @@ export * from './components/Stats'
 // barrel's module graph. Deep-import it: '@retray-dev/ui-kit/HolographicCard'.
 
 // Icon utility
-export { Icon, renderIcon, configureIconFamilies, getValidIconNames } from './utils/icons'
+export { Icon } from './utils/icons'
 
 // Color utilities
-export { withAlpha } from './theme/colorUtils'
+export { withAlpha, hexToRgb } from './theme/colorUtils'
 
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'
@@ -81,13 +81,13 @@ export {
   notificationSuccess,
   notificationError,
   notificationWarning,
-  richHaptics,
 } from './utils/haptics'
 
 // Hooks
 export { useConfirmDialog } from './hooks/useConfirmDialog'
 export type { UseConfirmDialogOptions, UseConfirmDialogResult } from './hooks/useConfirmDialog'
 
+
 // Design tokens
 export {
   SPACING,

package/src/theme/ThemeProvider.tsx

@@ -3,10 +3,7 @@ import { useColorScheme } from 'react-native'
 import { ThemeColors, Theme, ColorScheme, ThemeContextValue } from './types'
 import { defaultLight, defaultDark, deriveColors } from './colors'
 
-const ThemeContext = createContext<ThemeContextValue>({
-  colors: deriveColors(defaultLight, 'light'),
-  colorScheme: 'light',
-})
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 export interface ThemeProviderProps {
   children: React.ReactNode

package/src/theme/colorUtils.ts

@@ -1,7 +1,4 @@
-// Hex color manipulation utilities for internal theme derivation.
-// All functions are pure — no side effects, no React dependencies.
-
-function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
   const clean = hex.replace('#', '')
   const full = clean.length === 3
     ? clean.split('').map(c => c + c).join('')
@@ -14,74 +11,6 @@ function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
   }
 }
 
-function componentToHex(c: number): string {
-  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, '0')
-}
-
-function rgbToHex(r: number, g: number, b: number): string {
-  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
-}
-
-// Returns hex color with alpha blended onto a white background (for tint derivation)
-export function withAlphaOnWhite(hex: string, alpha: number): string {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return hex
-  const r = rgb.r * alpha + 255 * (1 - alpha)
-  const g = rgb.g * alpha + 255 * (1 - alpha)
-  const b = rgb.b * alpha + 255 * (1 - alpha)
-  return rgbToHex(r, g, b)
-}
-
-// Returns hex color with alpha blended onto a dark background (for dark mode tints)
-export function withAlphaOnDark(hex: string, alpha: number, bgHex = '#0f0f0f'): string {
-  const rgb = hexToRgb(hex)
-  const bg = hexToRgb(bgHex)
-  if (!rgb || !bg) return hex
-  const r = rgb.r * alpha + bg.r * (1 - alpha)
-  const g = rgb.g * alpha + bg.g * (1 - alpha)
-  const b = rgb.b * alpha + bg.b * (1 - alpha)
-  return rgbToHex(r, g, b)
-}
-
-// Mix foreground color with background at given opacity (for text hierarchy)
-export function mixWithBackground(fgHex: string, bgHex: string, opacity: number): string {
-  const fg = hexToRgb(fgHex)
-  const bg = hexToRgb(bgHex)
-  if (!fg || !bg) return fgHex
-  const r = fg.r * opacity + bg.r * (1 - opacity)
-  const g = fg.g * opacity + bg.g * (1 - opacity)
-  const b = fg.b * opacity + bg.b * (1 - opacity)
-  return rgbToHex(r, g, b)
-}
-
-// Lighten a hex color by mixing with white
-export function lighten(hex: string, amount: number): string {
-  return withAlphaOnWhite(hex, 1 - amount)
-}
-
-// Darken a hex color by mixing with black
-export function darken(hex: string, amount: number): string {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return hex
-  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount))
-}
-
-// Detect if a hex color is "dark" (luminance < 0.5)
-export function isDark(hex: string): boolean {
-  const rgb = hexToRgb(hex)
-  if (!rgb) return false
-  // Relative luminance (WCAG formula)
-  const toLinear = (c: number) => {
-    const s = c / 255
-    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
-  }
-  const L = 0.2126 * toLinear(rgb.r) + 0.7152 * toLinear(rgb.g) + 0.0722 * toLinear(rgb.b)
-  return L < 0.5
-}
-
-// Convert a hex color to rgba with the given alpha.
-// Returns an rgba() string suitable for use with semi-transparent backgrounds,
-// borders, and overlays.
 export function withAlpha(hex: string, alpha: number): string {
   const rgb = hexToRgb(hex)
   if (!rgb) return hex