@retray-dev/ui-kit 12.1.0 → 12.2.0

package/dist/chunk-2P2CB235.mjs

@@ -0,0 +1,236 @@
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React, { createContext, useContext } from 'react';
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+var SelectableCardContext = createContext(null);
+function SelectableCardGroup({
+  type,
+  value,
+  onValueChange,
+  variant = "elevated",
+  gap = s(8),
+  style,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(SelectableCardContext.Provider, { value: { type, value, onValueChange, variant } }, /* @__PURE__ */ React.createElement(View, { style: [styles.group, { gap }, style] }, children));
+}
+function SelectableCard({
+  value,
+  title,
+  description,
+  iconName,
+  icon,
+  disabled = false,
+  style
+}) {
+  const ctx = useContext(SelectableCardContext);
+  if (!ctx) {
+    throw new Error("SelectableCard must be used inside <SelectableCard.Group>");
+  }
+  const { colors } = useTheme();
+  const { type, value: selectedValue, onValueChange, variant } = ctx;
+  const isSelected = type === "radio" ? selectedValue === value : Array.isArray(selectedValue) && selectedValue.includes(value);
+  const handlePress = () => {
+    if (disabled) return;
+    impactLight();
+    if (type === "radio") {
+      onValueChange(value);
+    } else {
+      const arr = Array.isArray(selectedValue) ? selectedValue : [];
+      if (arr.includes(value)) {
+        onValueChange(arr.filter((v) => v !== value));
+      } else {
+        onValueChange([...arr, value]);
+      }
+    }
+  };
+  const variantStyle = (() => {
+    const borderWidth = 2;
+    const base = {
+      elevated: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: "transparent"
+        // reserve space for selected border
+      },
+      outlined: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: colors.border
+      },
+      filled: {
+        backgroundColor: colors.surfaceStrong,
+        borderWidth,
+        borderColor: colors.border
+      }
+    }[variant];
+    if (isSelected && !disabled) {
+      return {
+        ...base,
+        borderColor: colors.primary,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0
+      };
+    }
+    if (disabled) {
+      return {
+        ...base,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0,
+        borderColor: colors.border
+      };
+    }
+    return base;
+  })();
+  const resolvedIcon = iconName ? renderIcon(iconName, ms(22), disabled ? colors.foregroundMuted : colors.foregroundMuted) : icon;
+  const resolvedIconElement = resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: [styles.iconWrapper, disabled && { opacity: 0.45 }] }, resolvedIcon) : null;
+  const selectorAccessibilityRole = type === "radio" ? "radio" : "checkbox";
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: `${title}${description ? `, ${description}` : ""}`,
+      accessibilityState: { selected: isSelected, disabled },
+      style: [
+        styles.card,
+        variantStyle,
+        isSelected && !disabled && styles.cardSelected,
+        style
+      ]
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.row }, /* @__PURE__ */ React.createElement(View, { style: styles.selectorContainer, accessibilityRole: selectorAccessibilityRole, accessibilityState: { selected: isSelected, disabled } }, type === "radio" ? /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.radioCircle,
+        animate: { borderColor: !disabled && isSelected ? colors.primary : colors.border },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          animate: {
+            scale: !disabled && isSelected ? 1 : 0,
+            opacity: !disabled && isSelected ? 1 : 0
+          },
+          transition: SPRING_ELASTIC
+        },
+        /* @__PURE__ */ React.createElement(View, { style: [styles.radioDot, { backgroundColor: colors.primary }] })
+      )
+    ) : /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.checkboxBox,
+        animate: {
+          borderColor: !disabled && isSelected ? colors.primary : colors.border,
+          backgroundColor: !disabled && isSelected ? colors.primary : "transparent"
+        },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          animate: { opacity: !disabled && isSelected ? 1 : 0 },
+          transition: OPACITY_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(View, { style: [styles.checkmark, { borderColor: colors.primaryForeground }] })
+      )
+    )), resolvedIconElement, /* @__PURE__ */ React.createElement(View, { style: styles.textArea }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.title, { color: disabled ? colors.foregroundMuted : colors.foreground }],
+        allowFontScaling: true,
+        numberOfLines: 2
+      },
+      title
+    ), description ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.description, { color: disabled ? colors.foregroundMuted : colors.foregroundSubtle }],
+        allowFontScaling: true,
+        numberOfLines: 4
+      },
+      description
+    ) : null))
+  );
+}
+var styles = StyleSheet.create({
+  group: {
+    width: "100%"
+  },
+  card: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1
+  },
+  cardSelected: {
+    backgroundColor: void 0
+    // overridden by variantStyle
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: s(16),
+    gap: s(12)
+  },
+  selectorContainer: {
+    paddingTop: vs(1)
+  },
+  radioCircle: {
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  radioDot: {
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5)
+  },
+  checkboxBox: {
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(4),
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkmark: {
+    width: s(12),
+    height: vs(7),
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: "-45deg" }, { translateY: -1 }]
+  },
+  iconWrapper: {
+    paddingTop: vs(1)
+  },
+  textArea: {
+    flex: 1,
+    gap: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(16),
+    lineHeight: mvs(22)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  }
+});
+
+export { SelectableCard, SelectableCardGroup };

package/dist/{chunk-MYZ2EDYU.mjs → chunk-3XCFYSX4.mjs}

@@ -3,7 +3,7 @@ import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE, COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useCallback } from 'react';
 import { TouchableOpacity, View, Text, StyleSheet, ScrollView } from 'react-native';

package/dist/{chunk-DOGIPOF5.mjs → chunk-4J2PXL36.mjs}

@@ -2,7 +2,7 @@ import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
 import { TYPOGRAPHY, RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
@@ -41,24 +41,26 @@ function ButtonBase({
     impactMedium();
     onPress?.();
   };
-  const containerVariantStyle = {
+  const containerVariantStyle = isDisabled ? {
+    primary: { backgroundColor: colors.surface },
+    secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
+    text: { backgroundColor: "transparent" },
+    destructive: { backgroundColor: colors.surface }
+  }[variant] : {
     primary: { backgroundColor: colors.primary },
     secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.primary },
     text: { backgroundColor: "transparent" },
     destructive: { backgroundColor: colors.destructive }
   }[variant];
-  const labelVariantStyle = {
-    primary: { color: colors.primaryForeground },
-    secondary: { color: colors.primary },
-    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
-    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
-    // carry the brand voltage. Falls back to primary when no accent is defined.
-    text: { color: colors.accentResolved },
-    destructive: { color: colors.destructiveForeground }
+  const labelColor = isDisabled ? colors.foregroundMuted : {
+    primary: colors.primaryForeground,
+    secondary: colors.primary,
+    text: colors.accentResolved,
+    destructive: colors.destructiveForeground
   }[variant];
-  const textColor = iconColor ?? labelVariantStyle.color;
+  const textColor = iconColor ?? labelColor;
   const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], textColor) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
-  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
+  const spinnerColor = isDisabled ? colors.foregroundMuted : variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
   const styleArray = Array.isArray(style) ? style : style ? [style] : [];
   const flatStyle = StyleSheet.flatten(styleArray);
   const { flex, ...restStyle } = flatStyle || {};
@@ -70,7 +72,6 @@ function ButtonBase({
         containerVariantStyle,
         containerSizeStyles[size],
         fullWidth && styles.fullWidth,
-        isDisabled && styles.disabled,
         restStyle
       ],
       enabled: !isDisabled,
@@ -86,7 +87,7 @@ function ButtonBase({
     loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React.createElement(
       Text,
       {
-        style: [styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading],
+        style: [styles.label, { color: labelColor }, labelSizeStyles[size], styles.labelLoading],
         allowFontScaling: true,
         numberOfLines: 1
       },
@@ -94,7 +95,7 @@ function ButtonBase({
     )) : /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon), /* @__PURE__ */ React.createElement(
       Text,
       {
-        style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
+        style: [styles.label, { color: labelColor }, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
         allowFontScaling: true,
         numberOfLines: 1
       },
@@ -113,9 +114,6 @@ var styles = StyleSheet.create({
   fullWidth: {
     width: "100%"
   },
-  disabled: {
-    opacity: 0.45
-  },
   label: {
     fontFamily: "Sohne-Medium",
     flexShrink: 1

package/dist/{chunk-V6NFJXKO.mjs → chunk-4OORJ2DY.mjs}

@@ -1,6 +1,6 @@
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';

package/dist/{chunk-5OLNXP3S.mjs → chunk-4XOB5TTD.mjs}

@@ -2,7 +2,7 @@ import { PressableCard } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useCallback } from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -16,6 +16,7 @@ function StatsComponent({
   iconName,
   iconColor,
   variant = "elevated",
+  size = "default",
   onPress,
   style,
   accessibilityLabel
@@ -34,6 +35,27 @@ function StatsComponent({
     onPress();
   };
   const isCompact = containerWidth > 0 && containerWidth < COMPACT_THRESHOLD && !!(icon ?? iconName);
+  const sizeStyles = size === "compact" ? {
+    valueFontFamily: "Sohne-SemiBold",
+    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",
+    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 = {
     elevated: {
       backgroundColor: colors.card,
@@ -58,10 +80,10 @@ function StatsComponent({
     }
   }[variant];
   const iconColorResolved = iconColor ?? colors.primary;
-  const resolvedIcon = iconName ? renderIcon(iconName, ms(22), iconColorResolved) : icon;
+  const resolvedIcon = iconName ? renderIcon(iconName, sizeStyles.iconSize, iconColorResolved) : icon;
   const iconElement = resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.iconWrapper }, resolvedIcon) : null;
-  const valueElement = /* @__PURE__ */ React.createElement(Text, { style: [styles.value, { color: colors.foreground }], allowFontScaling: true }, value);
-  const cardContent = /* @__PURE__ */ React.createElement(View, { style: [styles.card, variantStyle, style], onLayout: handleLayout }, isCompact ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconElement, /* @__PURE__ */ React.createElement(View, { style: styles.compactValue }, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles.valueRow }, iconElement, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null));
+  const valueElement = /* @__PURE__ */ React.createElement(Text, { style: [styles.value, { color: colors.foreground, fontFamily: sizeStyles.valueFontFamily, fontSize: sizeStyles.valueFontSize, lineHeight: sizeStyles.valueLineHeight }], allowFontScaling: true }, value);
+  const cardContent = /* @__PURE__ */ React.createElement(View, { style: [styles.card, variantStyle, { padding: sizeStyles.padding }, style], onLayout: handleLayout }, isCompact ? /* @__PURE__ */ React.createElement(React.Fragment, null, iconElement, /* @__PURE__ */ React.createElement(View, { style: styles.compactValue }, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }], allowFontScaling: true }, description) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles.valueRow }, iconElement, valueElement), /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundSubtle, fontSize: sizeStyles.labelFontSize, lineHeight: sizeStyles.labelLineHeight }], allowFontScaling: true }, label), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted, fontSize: sizeStyles.descriptionFontSize, lineHeight: sizeStyles.descriptionLineHeight }], allowFontScaling: true }, description) : null));
   if (onPress) {
     return /* @__PURE__ */ React.createElement(
       PressableCard,

package/dist/{chunk-P64WHW4A.mjs → chunk-57V2LXCK.mjs}

@@ -1,5 +1,5 @@
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-HJ46DTJE.mjs → chunk-7AFZWSCI.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-AQEVCEXV.mjs → chunk-7ELGZ66G.mjs}

@@ -3,7 +3,7 @@ import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { SPRINGS, PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Platform, Image, TouchableOpacity, Text } from 'react-native';

package/dist/{chunk-I4V5XZPS.mjs → chunk-AENAVIKT.mjs}

@@ -1,5 +1,5 @@
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';

package/dist/{chunk-2CBQKU7H.mjs → chunk-BXF4AMHY.mjs}

@@ -1,7 +1,7 @@
 import { PressableCard } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-JULSIZDM.mjs → chunk-C43HRKXH.mjs}

@@ -1,5 +1,5 @@
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-GK4VRMNE.mjs → chunk-CF27NBXO.mjs}

@@ -1,10 +1,10 @@
-import { Spinner } from './chunk-BCWEHE34.mjs';
+import { Spinner } from './chunk-LIS6I5UP.mjs';
 import { PressableCard } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, Image, View, Text, Platform } from 'react-native';
 import { Feather } from '@expo/vector-icons';
 
@@ -18,11 +18,13 @@ function ImageUpload({
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = "cover",
+  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel
 }) {
   const { colors } = useTheme();
+  const [imageLoaded, setImageLoaded] = useState(false);
   const handlePress = async () => {
     if (disabled || loading) return;
     impactLight();
@@ -47,10 +49,11 @@ function ImageUpload({
     }
     const result = await picker.launchImageLibraryAsync({
       mediaTypes: ["images"],
-      allowsEditing: true,
+      allowsEditing,
       quality: 0.8
     });
     if (!result.canceled && result.assets?.[0]) {
+      setImageLoaded(false);
       onChange?.(result.assets[0].uri);
     }
   };
@@ -61,7 +64,7 @@ function ImageUpload({
     borderWidth: value ? 0 : 1,
     borderStyle: "dashed",
     borderColor: colors.border,
-    backgroundColor: value ? "transparent" : colors.surface,
+    backgroundColor: value && imageLoaded ? "transparent" : colors.surface,
     overflow: "hidden"
   };
   return /* @__PURE__ */ React.createElement(
@@ -81,7 +84,9 @@ function ImageUpload({
       {
         source: { uri: value },
         style: [StyleSheet.absoluteFillObject, { borderRadius }],
-        resizeMode
+        resizeMode,
+        onLoad: () => setImageLoaded(true),
+        onError: () => setImageLoaded(true)
       }
     ) : /* @__PURE__ */ React.createElement(View, { style: styles.placeholder }, /* @__PURE__ */ React.createElement(Feather, { name: "image", size: ms(28), color: colors.foregroundMuted }), showPlaceholderText ? /* @__PURE__ */ React.createElement(
       Text,

package/dist/{chunk-PGERH3P7.mjs → chunk-DF7JA72E.mjs}

@@ -1,6 +1,6 @@
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';

package/dist/{chunk-F4V6XLP4.mjs → chunk-E5UKLSJZ.mjs}

@@ -1,8 +1,8 @@
-import { Badge } from './chunk-3UYAZ7I4.mjs';
-import { Button } from './chunk-DOGIPOF5.mjs';
+import { Badge } from './chunk-GH67YXG6.mjs';
+import { Button } from './chunk-4J2PXL36.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-FUVYSVGR.mjs → chunk-EDLCGYIO.mjs}

@@ -2,7 +2,7 @@ import { PressableRow } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, Image, View, Text } from 'react-native';

package/dist/{chunk-N4ZPVCJH.mjs → chunk-ELGEOM7I.mjs}

@@ -2,7 +2,7 @@ import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-FA2KMTH5.mjs → chunk-F3YTWO3T.mjs}

@@ -2,7 +2,7 @@ import { PressableChip } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, mvs, ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-3UYAZ7I4.mjs → chunk-GH67YXG6.mjs}

@@ -1,5 +1,5 @@
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-357YO24D.mjs → chunk-GUTDFUNF.mjs}

@@ -1,5 +1,5 @@
 import { TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { Text as Text$1 } from 'react-native';

package/dist/{chunk-7HSILTC4.mjs → chunk-HC4VVCWY.mjs}

@@ -1,6 +1,6 @@
-import { Button } from './chunk-DOGIPOF5.mjs';
+import { Button } from './chunk-4J2PXL36.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-WOEWGSTU.mjs → chunk-HEDQPK4I.mjs}

@@ -1,7 +1,7 @@
 import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useRef } from 'react';
 import { Platform, StyleSheet, View, Text, TouchableOpacity, Modal } from 'react-native';

package/dist/{chunk-3GEYJ7I5.mjs → chunk-IVSRW4HS.mjs}

@@ -1,7 +1,7 @@
 import { PressableTab } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-P73V2EKS.mjs → chunk-KSUWPU2F.mjs}

@@ -3,7 +3,7 @@ import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, mvs, s, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, ScrollView } from 'react-native';

package/dist/{chunk-BCWEHE34.mjs → chunk-LIS6I5UP.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { ms, mvs, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';

package/dist/{chunk-J6Q2YJEV.mjs → chunk-LNPKGWBG.mjs}

@@ -1,7 +1,7 @@
 import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE, COLOR_TRANSITION, SPRING_ELASTIC } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { mvs, ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';

package/dist/{chunk-DF6DU42P.mjs → chunk-LOBLCFMN.mjs}

@@ -1,7 +1,7 @@
 import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-YTXRIXNZ.mjs';
 import { s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';