@retray-dev/ui-kit 6.1.0 → 7.0.1

package/src/components/Toggle/Toggle.tsx

@@ -1,12 +1,51 @@
-import React, { useRef, useEffect } from 'react'
-import { TouchableOpacity, Animated, StyleSheet, TouchableOpacityProps, ViewStyle, View, Easing, Platform } from 'react-native'
-
-const nativeDriver = Platform.OS !== 'web'
+import React from 'react'
+import { TouchableOpacity, StyleSheet, TouchableOpacityProps, ViewStyle, View } from 'react-native'
+import Animated, {
+  useAnimatedStyle,
+  interpolateColor,
+} from 'react-native-reanimated'
 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 { usePressScale } from '../../utils/usePressScale'
+import { useColorTransition } from '../../utils/useColorTransition'
+import { PRESS_SCALE } from '../../utils/animations'
+
+interface ToggleIconProps {
+  pressed: boolean
+  iconName?: string
+  activeIconName?: string
+  icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode)
+  iconColor?: string
+  activeIconColor?: string
+  iconSize: number
+  primaryColor: string
+  mutedColor: string
+}
+
+function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconColor, activeIconColor, iconSize, primaryColor, mutedColor }: ToggleIconProps) {
+  const renderProp = (prop?: React.ReactNode | ((p: boolean) => React.ReactNode)) => {
+    if (!prop) return null
+    if (typeof prop === 'function') return (prop as (p: boolean) => React.ReactNode)(pressed)
+    return prop
+  }
+
+  if (pressed) {
+    if (activeIconName) return <>{renderIcon(activeIconName, iconSize, 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)}</>
+  const custom = renderProp(icon)
+  if (custom) return <>{custom}</>
+
+  return <FontAwesome5 name="circle" size={iconSize} color={mutedColor} />
+}
 
 export type ToggleVariant = 'default' | 'outline'
 export type ToggleSize = 'sm' | 'md' | 'lg'
@@ -59,96 +98,75 @@ export function Toggle({
   activeIconColor,
   disabled,
   style,
+  accessibilityLabel,
   ...props
 }: ToggleProps) {
   const { colors } = useTheme()
-  const scale = useRef(new Animated.Value(1)).current
-  // 0 = unpressed, 1 = pressed — used to interpolate colors (JS thread)
-  const pressAnim = useRef(new Animated.Value(pressed ? 1 : 0)).current
-
-  useEffect(() => {
-    Animated.timing(pressAnim, {
-      toValue: pressed ? 1 : 0,
-      duration: 150,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: false,
-    }).start()
-  }, [pressed, pressAnim])
-
-  const handlePressIn = () => {
-    if (disabled) return
-    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, stiffness: 280, damping: 22, mass: 0.8 }).start()
-  }
-
-  // Keep borderWidth constant at 2 to prevent layout jumps when pressing.
-  // Animate borderColor and backgroundColor instead.
-  const borderColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [variant === 'outline' ? colors.border : 'transparent', colors.primary],
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled,
   })
+  const progress = useColorTransition(pressed)
 
-  const backgroundColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['transparent', colors.surfaceStrong],
-  })
+  const inactiveBorder = variant === 'outline' ? colors.border : 'transparent'
 
-  const textColor = pressAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.foreground, colors.primary],
-  })
+  const surfaceStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorder, colors.primary]),
+    backgroundColor: interpolateColor(progress.value, [0, 1], ['transparent', colors.surfaceStrong]),
+  }))
 
-  const iconSize = iconSizeMap[size]
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary]),
+  }))
 
-  const LeftIcon = () => {
-    const renderProp = (prop?: any) => {
-      if (!prop) return null
-      if (typeof prop === 'function') return prop(pressed)
-      return prop
-    }
-
-    if (pressed) {
-      if (activeIconName) return <>{renderIcon(activeIconName, iconSize, activeIconColor ?? colors.primary)}</>
-      const active = renderProp(activeIcon)
-      if (active) return <>{active}</>
-      return <FontAwesome5 name="check-circle" size={iconSize} color={colors.primary} />
-    }
-
-    if (iconName) return <>{renderIcon(iconName, iconSize, iconColor ?? colors.foregroundMuted)}</>
-    const custom = renderProp(icon)
-    if (custom) return <>{custom}</>
-
-    // Default: empty circle to signal an action is available
-    return <FontAwesome5 name="circle" size={iconSize} color={colors.foregroundMuted} />
-  }
+  const iconSize = iconSizeMap[size]
 
   return (
-    <Animated.View style={[{ transform: [{ scale }] }, disabled && styles.disabled, style]}>
+    <Animated.View
+      style={[scaleStyle, disabled && styles.disabled, style]}
+      {...hoverHandlers}
+    >
       <TouchableOpacity
         onPress={() => {
           hapticSelection()
           onPressedChange?.(!pressed)
         }}
-        onPressIn={handlePressIn}
-        onPressOut={handlePressOut}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
         disabled={disabled}
         activeOpacity={1}
         touchSoundDisabled={true}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ selected: pressed, disabled: !!disabled }}
         {...props}
       >
         <Animated.View
           style={[
             styles.base,
             sizeStyles[size],
-            { borderColor, backgroundColor, borderWidth: 2 },
+            { borderWidth: 2 },
+            surfaceStyle,
           ]}
         >
           <View style={styles.inner}>
-            <LeftIcon />
-            {label ? <Animated.Text style={[styles.label, { color: textColor }]} allowFontScaling={true}>{label}</Animated.Text> : null}
+            <ToggleIcon
+              pressed={pressed}
+              iconName={iconName}
+              activeIconName={activeIconName}
+              icon={icon}
+              activeIcon={activeIcon}
+              iconColor={iconColor}
+              activeIconColor={activeIconColor}
+              iconSize={iconSize}
+              primaryColor={colors.primary}
+              mutedColor={colors.foregroundMuted}
+            />
+            {label ? (
+              <Animated.Text style={[styles.label, textStyle]} allowFontScaling={true}>
+                {label}
+              </Animated.Text>
+            ) : null}
           </View>
         </Animated.View>
       </TouchableOpacity>
@@ -170,7 +188,7 @@ const styles = StyleSheet.create({
     opacity: 0.45,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
 })

package/src/components/VirtualList/VirtualList.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react'
+import { FlatList, FlatListProps, ListRenderItem } from 'react-native'
+
+export interface VirtualListItem {
+  id?: string | number
+}
+
+export interface VirtualListProps<T> extends Omit<FlatListProps<T>, 'getItemLayout'> {
+  /**
+   * Fixed row height in px. When provided, enables `getItemLayout` so the list
+   * skips async measurement — large datasets scroll and `scrollToIndex` jump
+   * without layout passes. Omit only for variable-height rows.
+   */
+  itemHeight?: number
+}
+
+const defaultKeyExtractor = <T,>(item: T, index: number): string => {
+  const id = (item as VirtualListItem | null)?.id
+  return id !== undefined ? String(id) : String(index)
+}
+
+/**
+ * Virtualized list primitive. Thin wrapper over `FlatList` with sane defaults
+ * for the common case: stable keys + optional fixed-height fast path.
+ *
+ * For 10k+ rows, pass `itemHeight` and a `React.memo`-wrapped `renderItem` so
+ * only on-screen rows mount and re-render.
+ *
+ * @example
+ * const renderItem = useCallback(({ item }) => <ListItem title={item.title} onPress={...} />, [])
+ * <VirtualList data={rows} renderItem={renderItem} itemHeight={64} />
+ */
+function VirtualListInner<T>(
+  { itemHeight, keyExtractor, renderItem, ...props }: VirtualListProps<T>,
+  ref: React.Ref<FlatList<T>>,
+) {
+  const getItemLayout = useCallback(
+    (_data: ArrayLike<T> | null | undefined, index: number) => ({
+      length: itemHeight ?? 0,
+      offset: (itemHeight ?? 0) * index,
+      index,
+    }),
+    [itemHeight],
+  )
+
+  return (
+    <FlatList<T>
+      ref={ref}
+      keyExtractor={keyExtractor ?? defaultKeyExtractor}
+      renderItem={renderItem as ListRenderItem<T>}
+      getItemLayout={itemHeight !== undefined ? getItemLayout : undefined}
+      removeClippedSubviews
+      {...props}
+    />
+  )
+}
+
+export const VirtualList = React.forwardRef(VirtualListInner) as <T>(
+  props: VirtualListProps<T> & { ref?: React.Ref<FlatList<T>> },
+) => React.ReactElement

package/src/components/VirtualList/index.ts

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

package/src/fonts.ts

@@ -1,30 +1,48 @@
 /**
- * Poppins font family required by @retray-dev/ui-kit components.
- * 
+ * Sohne font family required by @retray-dev/ui-kit components.
+ *
  * Consumer apps must load these fonts at app root using expo-font:
- * 
+ *
  * @example
  * import { useFonts } from 'expo-font'
- * import { PoppinsFonts } from '@retray-dev/ui-kit'
- * 
+ * import { SohneFonts } from '@retray-dev/ui-kit/fonts'
+ *
  * function App() {
- *   const [fontsLoaded] = useFonts(PoppinsFonts)
+ *   const [fontsLoaded] = useFonts(SohneFonts)
  *   if (!fontsLoaded) return null
  *   // render app
  * }
  */
-export const PoppinsFonts = {
-  'Poppins-Thin':           require('./assets/fonts/Poppins-Thin.ttf'),
-  'Poppins-ExtraLight':     require('./assets/fonts/Poppins-ExtraLight.ttf'),
-  'Poppins-Light':          require('./assets/fonts/Poppins-Light.ttf'),
-  'Poppins-Regular':        require('./assets/fonts/Poppins-Regular.ttf'),
-  'Poppins-Medium':         require('./assets/fonts/Poppins-Medium.ttf'),
-  'Poppins-SemiBold':       require('./assets/fonts/Poppins-SemiBold.ttf'),
-  'Poppins-Bold':           require('./assets/fonts/Poppins-Bold.ttf'),
-  'Poppins-ExtraBold':      require('./assets/fonts/Poppins-ExtraBold.ttf'),
-  'Poppins-Black':          require('./assets/fonts/Poppins-Black.ttf'),
-  'Poppins-Italic':         require('./assets/fonts/Poppins-Italic.ttf'),
-  'Poppins-MediumItalic':   require('./assets/fonts/Poppins-MediumItalic.ttf'),
-  'Poppins-SemiBoldItalic': require('./assets/fonts/Poppins-SemiBoldItalic.ttf'),
-  'Poppins-BoldItalic':     require('./assets/fonts/Poppins-BoldItalic.ttf'),
+/* eslint-disable @typescript-eslint/no-require-imports */
+export const SohneFonts = {
+  // Sohne base
+  'Sohne-ExtraLight':         require('./assets/fonts/Sohne-ExtraLight.otf'),
+  'Sohne-ExtraLightItalic':   require('./assets/fonts/Sohne-ExtraLightItalic.otf'),
+  'Sohne-Light':              require('./assets/fonts/Sohne-Light.otf'),
+  'Sohne-LightItalic':        require('./assets/fonts/Sohne-LightItalic.otf'),
+  'Sohne-Regular':            require('./assets/fonts/Sohne-Regular.otf'),
+  'Sohne-Italic':             require('./assets/fonts/Sohne-Italic.otf'),
+  'Sohne-Medium':             require('./assets/fonts/Sohne-Medium.otf'),
+  'Sohne-MediumItalic':       require('./assets/fonts/Sohne-MediumItalic.otf'),
+  'Sohne-SemiBold':           require('./assets/fonts/Sohne-SemiBold.otf'),
+  'Sohne-SemiBoldItalic':     require('./assets/fonts/Sohne-SemiBoldItalic.otf'),
+  'Sohne-Bold':               require('./assets/fonts/Sohne-Bold.otf'),
+  'Sohne-BoldItalic':         require('./assets/fonts/Sohne-BoldItalic.otf'),
+  'Sohne-ExtraBold':          require('./assets/fonts/Sohne-ExtraBold.otf'),
+  'Sohne-ExtraBoldItalic':    require('./assets/fonts/Sohne-ExtraBoldItalic.otf'),
+  // SohneMono
+  'SohneMono-ExtraLight':         require('./assets/fonts/SohneMono-ExtraLight.otf'),
+  'SohneMono-ExtraLightItalic':   require('./assets/fonts/SohneMono-ExtraLightItalic.otf'),
+  'SohneMono-Light':              require('./assets/fonts/SohneMono-Light.otf'),
+  'SohneMono-LightItalic':        require('./assets/fonts/SohneMono-LightItalic.otf'),
+  'SohneMono-Regular':            require('./assets/fonts/SohneMono-Regular.otf'),
+  'SohneMono-Italic':             require('./assets/fonts/SohneMono-Italic.otf'),
+  'SohneMono-Medium':             require('./assets/fonts/SohneMono-Medium.otf'),
+  'SohneMono-MediumItalic':       require('./assets/fonts/SohneMono-MediumItalic.otf'),
+  'SohneMono-SemiBold':           require('./assets/fonts/SohneMono-SemiBold.otf'),
+  'SohneMono-SemiBoldItalic':     require('./assets/fonts/SohneMono-SemiBoldItalic.otf'),
+  'SohneMono-Bold':               require('./assets/fonts/SohneMono-Bold.otf'),
+  'SohneMono-BoldItalic':         require('./assets/fonts/SohneMono-BoldItalic.otf'),
+  'SohneMono-ExtraBold':          require('./assets/fonts/SohneMono-ExtraBold.otf'),
+  'SohneMono-ExtraBoldItalic':    require('./assets/fonts/SohneMono-ExtraBoldItalic.otf'),
 } as const

package/src/index.ts

@@ -34,7 +34,9 @@ export * from './components/CurrencyDisplay'
 // CurrencyInputLarge is deprecated — use <CurrencyInput size="large" /> instead
 export { CurrencyInput as CurrencyInputLarge } from './components/CurrencyInput'
 export * from './components/ListItem'
+export * from './components/ListGroup'
 export * from './components/MenuItem'
+export * from './components/MenuGroup'
 export * from './components/Chip'
 export * from './components/ConfirmDialog'
 export * from './components/LabelValue'
@@ -43,9 +45,11 @@ export * from './components/MediaCard'
 export * from './components/CategoryStrip'
 export * from './components/Pressable'
 export * from './components/DetailRow'
+export * from './components/Form'
+export * from './components/VirtualList'
 
 // Icon utility
-export { Icon, renderIcon } from './utils/icons'
+export { Icon, renderIcon, configureIconFamilies } from './utils/icons'
 
 // Typography utilities
 export { getResponsiveFontSize } from './utils/typography'

package/src/theme/colors.ts

@@ -1,61 +1,74 @@
 import { ThemeColors, ResolvedColors } from './types'
-import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken, isDark } from './colorUtils'
+import { mixWithBackground, withAlphaOnWhite, withAlphaOnDark, lighten, darken } from './colorUtils'
 
-// ─── Default palettes (12 tokens each) ───────────────────────────────────────
-// These are the only values consumers need to override.
-// Designed to look great out of the box with no customization.
+// ─── Default palettes ─────────────────────────────────────────────────────────
+// AUDIT FIXES applied:
+//   · accent + accentForeground added — system was fully achromatic
+//   · warning darkened: #e67e00 → #9a5200 (white text: 2.86:1 → 5.86:1 ✓ AA)
+//   · destructive darkened: #e53935 → #c72828 (white text: 4.22:1 → 5.59:1 ✓ AA)
+//   · foreground tweaked #222222 → #1a1a1a (matches primary, 16.1:1 on white ✓)
 
 export const defaultLight: ThemeColors = {
-  background: '#ffffff',
-  foreground: '#222222',       // Airbnb ink — deep near-black, never pure black
-  card: '#ffffff',
-  primary: '#1a1a1a',          // Near-black primary — clean, premium default
-  primaryForeground: '#ffffff',
-  border: '#dddddd',           // Airbnb hairline — light, airy
-  destructive: '#e53935',
+  background:            '#ffffff',
+  foreground:            '#1a1a1a',
+  card:                  '#ffffff',
+  primary:               '#1a1a1a',
+  primaryForeground:     '#ffffff',
+  // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
+  accent:                '#d4561d',
+  accentForeground:      '#ffffff',
+  border:                '#dddddd',
+  // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
+  destructive:           '#c72828',
   destructiveForeground: '#ffffff',
-  success: '#1a7a45',
-  successForeground: '#ffffff',
-  warning: '#e67e00',
-  warningForeground: '#ffffff',
+  success:               '#1a7a45',
+  successForeground:     '#ffffff',
+  // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
+  warning:               '#9a5200',
+  warningForeground:     '#ffffff',
 }
 
 export const defaultDark: ThemeColors = {
-  background: '#0f0f0f',
-  foreground: '#fafafa',
-  card: '#1c1c1c',
-  primary: '#fafafa',
-  primaryForeground: '#0f0f0f',
-  border: '#303030',
-  destructive: '#ef5350',
+  background:            '#0f0f0f',
+  foreground:            '#fafafa',
+  card:                  '#1c1c1c',
+  primary:               '#fafafa',
+  primaryForeground:     '#0f0f0f',
+  // AUDIT FIX: lighter accent for dark surfaces (warm amber-orange)
+  accent:                '#e87645',
+  accentForeground:      '#ffffff',
+  border:                '#303030',
+  destructive:           '#ef5350',
   destructiveForeground: '#ffffff',
-  success: '#2e7d52',
-  successForeground: '#ffffff',
-  warning: '#f57c00',
-  warningForeground: '#ffffff',
+  success:               '#2e7d52',
+  successForeground:     '#ffffff',
+  // AUDIT FIX: brighter amber for dark-bg visibility; dark text for contrast
+  // #f5a623 on #0f0f0f = 8.6:1 ✓ as indicator; #0f0f0f text on #f5a623 = 8.6:1 ✓
+  warning:               '#f5a623',
+  warningForeground:     '#0f0f0f',
 }
 
 // ─── Color derivation ─────────────────────────────────────────────────────────
-// Takes 12 public tokens → produces full ResolvedColors for component consumption.
-// Dark mode uses bg-blended tints instead of white-blended to stay on-palette.
-
 export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): ResolvedColors {
   const dark = scheme === 'dark'
   const bg = t.background
 
-  // Text hierarchy: foreground mixed with background at different opacities
-  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.55)
-  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.38)
+  // AUDIT FIX: Text hierarchy opacities raised to pass WCAG AA.
+  //   foregroundSubtle was 0.55 → ~#858585 (3.5:1 fail on white)
+  //   foregroundMuted  was 0.38 → ~#ababab (2.2:1 critical fail on white)
+  //   New values on light (#1a1a1a on #ffffff):
+  //     foregroundSubtle 0.70 → ~#646464 (5.9:1 ✓ AA)
+  //     foregroundMuted  0.62 → ~#767676 (4.5:1 ✓ AA minimum)
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.70)
+  const foregroundMuted  = mixWithBackground(t.foreground, bg, 0.62)
 
-  // Surface fills: slight offset from background
   const surface = dark
-    ? lighten(bg, -0.06)   // slightly lighter than dark bg
-    : darken(bg, 0.04)     // slightly darker than white → #f7f7f7 equivalent
+    ? lighten(bg, -0.06)
+    : darken(bg, 0.04)
   const surfaceStrong = dark
     ? lighten(bg, -0.12)
-    : darken(bg, 0.08)     // #ebebeb equivalent
+    : darken(bg, 0.08)
 
-  // Semantic tints: color blended toward background
   const destructiveTint = dark
     ? withAlphaOnDark(t.destructive, 0.15, bg)
     : withAlphaOnWhite(t.destructive, 0.08)
@@ -92,7 +105,8 @@ export function deriveColors(t: ThemeColors, scheme: 'light' | 'dark'): Resolved
     overlay: t.overlay ?? 'rgba(0,0,0,0.45)',
     accentResolved: t.accent ?? t.primary,
     accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
-    ring: t.primary,       // focus ring always = primary
-    input: t.border,       // input border always = border
+    ring: t.accent ?? t.primary,
+    input: t.border,
+    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16),
   }
 }

package/src/theme/types.ts

@@ -49,6 +49,9 @@ export type ResolvedColors = ThemeColors & {
   // Aliases (ring + input always equal primary + border for coherence)
   ring: string               // = primary
   input: string              // = border
+
+  // Divider/separator line — deliberately darker than border for visibility
+  separator: string
 }
 
 export type Theme = {