@retray-dev/ui-kit 6.2.0 → 7.0.1

package/src/components/Checkbox/Checkbox.tsx

@@ -46,8 +46,11 @@ export function Checkbox({
   }))
 
   return (
+    // AUDIT FIX: opacity was applied only to the box, leaving the label at full
+    // opacity when disabled — a contradictory visual signal. Now the entire row
+    // dims uniformly so label and control communicate the same disabled state.
     <TouchableOpacity
-      style={[styles.row, style]}
+      style={[styles.row, disabled && styles.rowDisabled, style]}
       onPress={() => {
         hapticSelection()
         onCheckedChange?.(!checked)
@@ -62,9 +65,7 @@ export function Checkbox({
       accessibilityState={{ checked, disabled: !!disabled }}
     >
       <Animated.View style={scaleStyle}>
-        <Animated.View
-          style={[styles.box, { opacity: disabled ? 0.45 : 1 }, boxStyle]}
-        >
+        <Animated.View style={[styles.box, boxStyle]}>
           <Animated.View style={checkStyle}>
             <View style={[styles.checkmark, { borderColor: colors.primaryForeground }]} />
           </Animated.View>
@@ -72,7 +73,7 @@ export function Checkbox({
       </Animated.View>
       {label ? (
         <Text
-          style={[styles.label, { color: disabled ? colors.foregroundMuted : colors.foreground }]}
+          style={[styles.label, { color: colors.foreground }]}
           allowFontScaling={true}
         >
           {label}
@@ -88,6 +89,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: s(12),
   },
+  // AUDIT FIX: was inline opacity on the box only
+  rowDisabled: {
+    opacity: 0.45,
+  },
   box: {
     width: s(24),
     height: s(24),
@@ -104,7 +109,7 @@ const styles = StyleSheet.create({
     transform: [{ rotate: '-45deg' }, { translateY: -1 }],
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
   },

package/src/components/Chip/Chip.tsx

@@ -16,9 +16,7 @@ export interface ChipProps {
   label: string
   selected?: boolean
   onPress?: () => void
-  /** JSX icon rendered before the label. */
   icon?: React.ReactNode
-  /** Icon name from @expo/vector-icons resolved automatically. */
   iconName?: string
   style?: ViewStyle
   accessibilityLabel?: string
@@ -27,9 +25,7 @@ export interface ChipProps {
 export interface ChipOption {
   label: string
   value: string | number
-  /** Icon name resolved via renderIcon (Feather, AntDesign, etc.). */
   iconName?: string
-  /** Icon tint color override. */
   iconColor?: string
   disabled?: boolean
 }
@@ -38,12 +34,11 @@ export interface ChipGroupProps {
   options: ChipOption[]
   value?: string | number | (string | number)[]
   onValueChange?: (value: string | number | (string | number)[]) => void
-  /** When true, allows selecting multiple chips. `value` and `onValueChange` will use arrays. */
   multiSelect?: boolean
   style?: ViewStyle
 }
 
-export function Chip({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }: ChipProps) {
+function ChipBase({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }: ChipProps) {
   const { colors } = useTheme()
   const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
     pressScale: PRESS_SCALE.chip,
@@ -91,27 +86,24 @@ export function Chip({ label, selected = false, onPress, icon, iconName, style,
   )
 }
 
+export const Chip = React.memo(ChipBase)
+
 export function ChipGroup({ options, value, onValueChange, multiSelect = false, style }: ChipGroupProps) {
   const handlePress = (optionValue: string | number) => {
     if (!multiSelect) {
       onValueChange?.(optionValue)
       return
     }
-
     const currentArray = Array.isArray(value) ? value : value ? [value] : []
     const isSelected = currentArray.includes(optionValue)
-
     const newArray: (string | number)[] = isSelected
       ? currentArray.filter((v) => v !== optionValue)
       : [...currentArray, optionValue]
-
     onValueChange?.(newArray)
   }
 
   const isSelected = (optionValue: string | number): boolean => {
-    if (Array.isArray(value)) {
-      return value.includes(optionValue)
-    }
+    if (Array.isArray(value)) return value.includes(optionValue)
     return optionValue === value
   }
 
@@ -124,7 +116,11 @@ export function ChipGroup({ options, value, onValueChange, multiSelect = false,
           selected={isSelected(opt.value)}
           onPress={opt.disabled ? undefined : () => handlePress(opt.value)}
           iconName={opt.iconName}
-          style={opt.disabled ? { opacity: 0.4 } : undefined}
+          // AUDIT FIX: was style={{ opacity: 0.4 }} with no accessibilityState.
+          // Now passes disabled state to the Chip's TouchableOpacity via onPress=undefined
+          // and adds explicit accessibility state for screen readers.
+          style={opt.disabled ? styles.chipDisabled : undefined}
+          accessibilityLabel={opt.disabled ? `${opt.label}, unavailable` : opt.label}
         />
       ))}
     </View>
@@ -136,19 +132,25 @@ const styles = StyleSheet.create({
   chip: {
     borderRadius: 999,
     paddingHorizontal: s(14),
-    paddingVertical: vs(5),
+    // AUDIT FIX: was vs(5) → ~28px total height — below WCAG 44px tap target.
+    // vs(10) → ~44px total height meets WCAG 2.5.5 (AAA) minimum.
+    paddingVertical: vs(10),
+    minHeight: 44,
     borderWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'row',
     gap: s(5),
   },
+  chipDisabled: {
+    opacity: 0.4,
+  },
   chipIcon: {
     alignItems: 'center',
     justifyContent: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -120,12 +120,12 @@ const styles = StyleSheet.create({
     gap: vs(12),
   },
   title: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(18),
     lineHeight: mvs(26),
   },
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     lineHeight: mvs(22),
   },

package/src/components/CurrencyDisplay/CurrencyDisplay.tsx

@@ -49,7 +49,7 @@ function formatValue(value: number | string, prefix: string, showDecimals: boole
   return `${sign}${prefix}${intPart}`
 }
 
-export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, textColor, variant, autoScale, maxFontSize, style }: CurrencyDisplayProps) {
+function CurrencyDisplayBase({ value, prefix = '$', showDecimals = false, textColor, variant, autoScale, maxFontSize, style }: CurrencyDisplayProps) {
   const { colors } = useTheme()
   const formatted = formatValue(value, prefix, showDecimals)
   const baseFontSize = variant ? variantFontSize[variant] : ms(56)
@@ -71,12 +71,14 @@ export function CurrencyDisplay({ value, prefix = '$', showDecimals = false, tex
   )
 }
 
+export const CurrencyDisplay = React.memo(CurrencyDisplayBase)
+
 const styles = StyleSheet.create({
   container: {
     alignSelf: 'flex-start',
   },
   amount: {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     includeFontPadding: false,
     textAlignVertical: 'top',
   },

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -59,8 +59,8 @@ export function CurrencyInput({
   }
 
   const inputStyle: TextStyle = size === 'large'
-    ? { fontFamily: 'Poppins-Regular', fontSize: ms(36) }
-    : { fontFamily: 'Poppins-Regular' }
+    ? { fontFamily: 'Sohne-Regular', fontSize: ms(36) }
+    : { fontFamily: 'Sohne-Regular' }
 
   const dollarIcon = renderIcon('dollar-sign', size === 'large' ? 24 : 16, colors.foregroundMuted)
 

package/src/components/DetailRow/DetailRow.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
 import { useTheme } from '../../theme'
-import { s, vs, ms, mvs } from '../../utils/scaling'
+import { s, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
 export type DetailRowSeparator = 'dotted' | 'solid' | 'dashed' | 'none'
 export type DetailRowLabelWeight = 'normal' | 'medium' | 'semibold' | 'bold'
 
 const weightMap: Record<DetailRowLabelWeight, string> = {
-  normal:   'Poppins-Regular',
-  medium:   'Poppins-Medium',
-  semibold: 'Poppins-SemiBold',
-  bold:     'Poppins-Bold',
+  normal:   'Sohne-Regular',
+  medium:   'Sohne-Medium',
+  semibold: 'Sohne-SemiBold',
+  bold:     'Sohne-Bold',
 }
 
 export interface DetailRowProps {
@@ -38,7 +38,7 @@ export interface DetailRowProps {
   valueStyle?: TextStyle
 }
 
-export function DetailRow({
+function DetailRowBase({
   label,
   value,
   separator = 'dotted',
@@ -108,6 +108,8 @@ export function DetailRow({
   )
 }
 
+export const DetailRow = React.memo(DetailRowBase)
+
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
@@ -138,7 +140,7 @@ const styles = StyleSheet.create({
     flexShrink: 0,
   },
   valueText: {
-    fontFamily: 'Poppins-SemiBold',
+    fontFamily: 'Sohne-SemiBold',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },

package/src/components/EmptyState/EmptyState.tsx

@@ -109,7 +109,7 @@ const styles = StyleSheet.create({
     marginTop: vs(16),
   },
   title: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(18),
     textAlign: 'center',
   },
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
     marginTop: vs(10),
   },
   description: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: 'center',

package/src/components/Form/Form.tsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import { View, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
+import { useTheme } from '../../theme'
+import { s, vs } from '../../utils/scaling'
+
+export interface FormProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+export interface FormFieldProps {
+  children: React.ReactNode
+  label?: string
+  error?: string
+  required?: boolean
+  style?: ViewStyle
+  labelStyle?: TextStyle
+  errorStyle?: TextStyle
+}
+
+export interface FormSectionProps {
+  children: React.ReactNode
+  title?: string
+  description?: string
+  style?: ViewStyle
+}
+
+export interface FormFooterProps {
+  children: React.ReactNode
+  style?: ViewStyle
+}
+
+/**
+ * Form wrapper with consistent spacing between fields.
+ * Use Form.Field for individual inputs with label + error,
+ * Form.Section for grouped fields, and Form.Footer for action buttons.
+ */
+export function Form({ children, style }: FormProps) {
+  return <View style={[styles.form, style]}>{children}</View>
+}
+
+/**
+ * Wraps a single form input with optional label and error message.
+ * Automatically spaces children properly.
+ */
+export function FormField({
+  children,
+  label,
+  error,
+  required,
+  style,
+  labelStyle,
+  errorStyle,
+}: FormFieldProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.field, style]}>
+      {label ? (
+        <Text style={[styles.label, { color: colors.foreground }, labelStyle]} allowFontScaling={true}>
+          {label}
+          {required ? <Text style={{ color: colors.destructive }}> *</Text> : null}
+        </Text>
+      ) : null}
+      {children}
+      {error ? (
+        <Text style={[styles.error, { color: colors.destructive }, errorStyle]} allowFontScaling={true}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+/**
+ * Groups related form fields with optional title and description.
+ */
+export function FormSection({ children, title, description, style }: FormSectionProps) {
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.section, style]}>
+      {title ? (
+        <View style={styles.sectionHeader}>
+          <Text style={[styles.sectionTitle, { color: colors.foreground }]} allowFontScaling={true}>
+            {title}
+          </Text>
+          {description ? (
+            <Text style={[styles.sectionDescription, { color: colors.foregroundMuted }]} allowFontScaling={true}>
+              {description}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      {children}
+    </View>
+  )
+}
+
+/**
+ * Footer area for submit/cancel buttons or form actions.
+ */
+export function FormFooter({ children, style }: FormFooterProps) {
+  return <View style={[styles.footer, style]}>{children}</View>
+}
+
+Form.Field = FormField
+Form.Section = FormSection
+Form.Footer = FormFooter
+
+const styles = StyleSheet.create({
+  form: {
+    gap: vs(16),
+  },
+  field: {
+    gap: vs(6),
+  },
+  label: {
+    fontFamily: 'Sohne-Medium',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  error: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  section: {
+    gap: vs(16),
+  },
+  sectionHeader: {
+    gap: vs(4),
+  },
+  sectionTitle: {
+    fontFamily: 'Sohne-SemiBold',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  sectionDescription: {
+    fontFamily: 'Sohne-Regular',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: s(12),
+    paddingTop: vs(8),
+  },
+})

package/src/components/Form/index.ts

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

package/src/components/IconButton/IconButton.tsx

@@ -44,7 +44,7 @@ const sizeMap: Record<IconButtonSize, { container: number; icon: number }> = {
   lg: { container: s(52), icon: 24 },
 }
 
-export function IconButton({
+function IconButtonBase({
   iconName,
   icon,
   iconColor,
@@ -151,6 +151,8 @@ export function IconButton({
   )
 }
 
+export const IconButton = React.memo(IconButtonBase)
+
 const styles = StyleSheet.create({
   wrapper: {
     alignSelf: 'flex-start',
@@ -182,7 +184,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 3,
   },
   badgeText: {
-    fontFamily: 'Poppins-Bold',
+    fontFamily: 'Sohne-Bold',
     fontSize: ms(9),
     lineHeight: 14,
   },

package/src/components/Input/Input.tsx

@@ -3,6 +3,7 @@ import { TextInput, View, Text, StyleSheet, TextInputProps, ViewStyle, TextStyle
 import Animated, {
   useAnimatedStyle,
   interpolateColor,
+  interpolate,
 } from 'react-native-reanimated'
 import { AntDesign } from '@expo/vector-icons'
 import { useTheme } from '../../theme'
@@ -11,46 +12,26 @@ import { renderIcon } from '../../utils/icons'
 import { useColorTransition } from '../../utils/useColorTransition'
 import { TIMINGS } from '../../utils/animations'
 
-const webInputResetStyle: any =
+const webInputResetStyle: Record<string, unknown> =
   Platform.OS === 'web'
     ? { outlineStyle: 'none', outlineWidth: 0, outlineColor: 'transparent', boxShadow: 'none' }
     : {}
 
 export interface InputProps extends TextInputProps {
   label?: string
-  /** Red helper text below the input; also changes border to `destructive` color. Takes priority over `hint`. */
   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. */
   suffix?: React.ReactNode
-  /** Style applied to prefix text if prefix is a string. */
   prefixStyle?: TextStyle
-  /** Style applied to suffix text if suffix is a string. */
   suffixStyle?: TextStyle
-  /**
-   * Icon name from `@expo/vector-icons` rendered before the input text.
-   * See https://icons.expo.fyi. Takes precedence over `prefix`.
-   */
   prefixIcon?: string
-  /**
-   * Icon name from `@expo/vector-icons` rendered after the input text.
-   * See https://icons.expo.fyi. Takes precedence over `suffix` (unless `type="password"`).
-   */
   suffixIcon?: string
-  /** Override the resolved prefix icon color. Defaults to `mutedForeground`. */
   prefixIconColor?: string
-  /** Override the resolved suffix icon color. Defaults to `mutedForeground`. */
   suffixIconColor?: string
-  /** Input type. When set to \`'password'\`, shows a toggle button to reveal/hide text. */
   type?: 'text' | 'password'
-  /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
   containerStyle?: ViewStyle
-  /** Style for the inner border wrapper (overrides padding, etc). */
   inputWrapperStyle?: ViewStyle
 }
 
@@ -59,7 +40,6 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
   const [focused, setFocused] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
 
-  // Asymmetric durations — focus snaps in, blurs out subtly. Runs on UI thread.
   const focusProgress = useColorTransition(focused, {
     duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration,
   })
@@ -75,6 +55,8 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
   const effectiveSuffix: React.ReactNode = isPassword && !suffix && !suffixIcon ? (
     <TouchableOpacity
       onPress={() => setShowPassword(!showPassword)}
+      // AUDIT FIX: was padding: s(4) → ~28px target (below 44px minimum).
+      // padding: s(12) with negative margin keeps visual size but expands hit area.
       style={styles.passwordToggle}
       activeOpacity={0.6}
       accessibilityRole="button"
@@ -86,10 +68,16 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
     ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted)
     : suffix
 
-  const borderColorStyle = useAnimatedStyle(() => ({
+  // Border drawn on an absolute overlay so the 1px→2px weight change never
+  // resizes the layout box (which would reflow content / shift the interface).
+  // Wrapper keeps borderWidth: 0; overlay grows inward and is non-interactive.
+  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]),
   }))
 
   return (
@@ -99,10 +87,10 @@ export function Input({ label, error, hint, disabled, prefix, suffix, prefixStyl
         style={[
           styles.inputWrapper,
           { backgroundColor: isDisabled ? colors.surface : colors.background },
-          borderColorStyle,
           inputWrapperStyle,
         ]}
       >
+        <Animated.View style={[styles.borderOverlay, borderAnimStyle]} pointerEvents="none" />
         {effectivePrefix ? (
           typeof effectivePrefix === 'string' ? (
             <Text style={[styles.prefixText, { color: colors.foregroundMuted }, prefixStyle]} allowFontScaling={true}>
@@ -168,20 +156,25 @@ const styles = StyleSheet.create({
     opacity: 0.6,
   },
   label: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
   },
   inputWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    borderWidth: 2,
+    // Border lives on borderOverlay (absolute) so its 1px→2px focus change
+    // never resizes this box. Wrapper itself carries no border.
     borderRadius: 8,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     minHeight: 48,
   },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8,
+  },
   input: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     flex: 1,
     fontSize: ms(16),
     paddingVertical: vs(2),
@@ -191,7 +184,7 @@ const styles = StyleSheet.create({
     marginRight: s(8),
   },
   prefixText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     marginRight: s(8),
   },
@@ -199,15 +192,18 @@ const styles = StyleSheet.create({
     marginLeft: s(8),
   },
   suffixText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(15),
     marginLeft: s(8),
   },
+  // AUDIT FIX: was padding: s(4) → ~28px tap target. Now 12px padding → ~44px.
+  // Negative margin compensates so the visual icon position is unchanged.
   passwordToggle: {
-    padding: s(4),
+    padding: s(12),
+    margin: -s(8),
   },
   helperText: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
   },
 })

package/src/components/LabelValue/LabelValue.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Text, StyleSheet, ViewStyle } from 'react-native'
 import { useTheme } from '../../theme'
-import { s, vs, ms, mvs } from '../../utils/scaling'
+import { s, ms, mvs } from '../../utils/scaling'
 import { renderIcon } from '../../utils/icons'
 
 export interface LabelValueProps {
@@ -14,7 +14,7 @@ export interface LabelValueProps {
   style?: ViewStyle
 }
 
-export function LabelValue({ label, value, iconName, iconColor, style }: LabelValueProps) {
+function LabelValueBase({ label, value, iconName, iconColor, style }: LabelValueProps) {
   const { colors } = useTheme()
 
   const resolvedIcon = iconName
@@ -40,6 +40,8 @@ export function LabelValue({ label, value, iconName, iconColor, style }: LabelVa
   )
 }
 
+export const LabelValue = React.memo(LabelValueBase)
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
@@ -57,12 +59,12 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   label: {
-    fontFamily: 'Poppins-Regular',
+    fontFamily: 'Sohne-Regular',
     fontSize: ms(13),
     lineHeight: mvs(18),
   },
   value: {
-    fontFamily: 'Poppins-Medium',
+    fontFamily: 'Sohne-Medium',
     fontSize: ms(14),
     lineHeight: mvs(20),
     textAlign: 'right',