@multiplatform.one/forms 7.45.1 → 7.47.0

package/src/fields/FileUpload/index.tsx

@@ -3,7 +3,7 @@ import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
-import { useProps, type SizeTokens } from "tamagui";
+import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -112,7 +112,7 @@ export type FileUploadProps<
      * The file the value already names (a stored URL), shown as a preview
      * tile until a new pick replaces it — never as a raw path.
      */
-    existing?: { src: string; name?: string } | null;
+    existing?: { src: string; name?: string; isImage?: boolean } | null;
     /** Removes the existing file; given, its tile carries a remove disc. */
     onExistingRemove?: () => void;
   };
@@ -203,6 +203,7 @@ export function FileUpload<
   TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>,
 >(props: FileUploadProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
   const hydrationTouch = useTouchSurface();
+  const media = useMedia();
   const {
     defaultValue,
     form,
@@ -274,6 +275,29 @@ export function FileUpload<
   const tileRemoveInset = -Math.round(knobProps.nestedControl.px / 4);
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [replacing, setReplacing] = useState(false);
+  const [existingRemoved, setExistingRemoved] = useState(false);
+  const [pixelated, setPixelated] = useState(false);
+  const replaceRef = useRef<HTMLElement>(null);
+  const sourceRef = useRef<HTMLElement>(null);
+  const storedSrcRef = useRef(existing?.src);
+  const previousReplacing = useRef(replacing);
+  useEffect(() => {
+    if (storedSrcRef.current === existing?.src) return;
+    storedSrcRef.current = existing?.src;
+    const currentFiles: unknown[] = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    if (existing?.src || !selectedFiles.every((file) => currentFiles.includes(file)))
+      setSelectedFiles([]);
+    setExistingRemoved(false);
+    setReplacing(false);
+  }, [existing?.src]);
+  useEffect(() => {
+    if (previousReplacing.current === replacing) return;
+    previousReplacing.current = replacing;
+    if (!isWeb) return;
+    const target = replacing ? sourceRef : replaceRef;
+    target.current?.querySelector<HTMLElement>('button, [role="button"]')?.focus();
+  }, [replacing]);
   const [transfers, setTransfers] = useState<TransferItem[]>([]);
   const [isDragOver, setIsDragOver] = useState(false);
   const [validationError, setValidationError] = useState<string | undefined>();
@@ -377,6 +401,7 @@ export function FileUpload<
         });
         if (controller.signal.aborted) return;
         setTransfersAndRef((prev) => prev.filter((item) => item.id !== id));
+        setReplacing(false);
         setSelectedFiles((prev) => {
           const nextFiles = multipleRef.current ? [...prev, file] : [file];
           syncFieldValue(nextFiles, emitFieldRef.current);
@@ -385,7 +410,10 @@ export function FileUpload<
       } catch (err) {
         if (
           controller.signal.aborted ||
-          (err instanceof DOMException && err.name === "AbortError")
+          (err instanceof Error && err.name === "AbortError") ||
+          (typeof DOMException !== "undefined" &&
+            err instanceof DOMException &&
+            err.name === "AbortError")
         ) {
           setTransfersAndRef((prev) => prev.filter((item) => item.id !== id));
           return;
@@ -504,6 +532,7 @@ export function FileUpload<
         if (onUploadRef.current) {
           validFiles.forEach((file) => startTransfer(file));
         } else {
+          setReplacing(false);
           setSelectedFiles((prev) => {
             const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
             syncFieldValue(nextFiles, onValueChange);
@@ -532,9 +561,12 @@ export function FileUpload<
         return nextFiles;
       });
 
+      if (fileInputRef.current) fileInputRef.current.value = "";
+      setReplacing(false);
+      if (!multiple) setExistingRemoved(true);
       onFileRemove?.(fileToRemove);
     },
-    [onFileRemove, syncFieldValue],
+    [multiple, onFileRemove, syncFieldValue],
   );
 
   // Depth counter so dragenter/dragleave pairs from nested children don't cancel the highlight
@@ -697,7 +729,7 @@ export function FileUpload<
   if (skeleton) {
     const minHeightPx = getFieldHeight(
       (fieldProps.size || knobProps.sizeToken) as SizeTokens,
-      5,
+      2,
       hydrationTouch,
     );
     return (
@@ -708,8 +740,19 @@ export function FileUpload<
   }
 
   const canInteract = !disabled && !readOnly;
-  const showExisting =
-    Boolean(existing?.src) && selectedFiles.length === 0 && transfers.length === 0;
+  const showExisting = Boolean(existing?.src) && !existingRemoved && selectedFiles.length === 0;
+  const singleFile = !multiple ? selectedFiles[0] : undefined;
+  const filled = !multiple && (showExisting || Boolean(singleFile));
+  const storedImage =
+    existing?.isImage ??
+    /^(data:image\/)|\.(png|jpe?g|gif|webp|svg|avif|bmp)(?:[?#]|$)/i.test(existing?.src ?? "");
+  const singlePreview = showPreview
+    ? singleFile
+      ? getFilePreview(singleFile)
+      : storedImage
+        ? existing?.src
+        : undefined
+    : undefined;
   const existingName = existing?.name || fileNameFromSrc(existing?.src ?? "");
   const hasRows = selectedFiles.length > 0 || transfers.length > 0 || showExisting;
 
@@ -831,13 +874,13 @@ export function FileUpload<
       ? isWeb
         ? ({
             // DROPZONE-FULL-TARGET: the entire surface is the click target.
-            role: "button",
-            tabIndex: 0,
+            role: filled ? "group" : "button",
+            tabIndex: filled ? undefined : 0,
             onFocus: handleZoneFocus,
             onBlur: handleZoneBlur,
             cursor: "pointer",
-            onClick: handleZoneClick,
-            onKeyDown: handleZoneKeyDown,
+            onClick: filled ? undefined : handleZoneClick,
+            onKeyDown: filled ? undefined : handleZoneKeyDown,
             ...(dragDrop
               ? {
                   onDragEnter: handleDragEnter,
@@ -850,7 +893,9 @@ export function FileUpload<
                 }
               : null),
           } as any)
-        : ({ role: "button", onPress: requestFiles } as any)
+        : filled
+          ? {}
+          : ({ role: "button", onPress: requestFiles } as any)
       : { cursor: disabled ? "not-allowed" : undefined };
 
     // Committed image picks become tiles; everything else stays a row.
@@ -887,14 +932,6 @@ export function FileUpload<
         {...(errorProp ? { borderColor: formCommonColors.error } : undefined)}
         elevation={knobProps.elevation}
         {...transitionProps(knobProps.motion.control)}
-        // CONTRACT (boards media-01..03): the getFieldHeight floor sits on
-        // the FRAME, so the frame border-box measures 220 — hanging it on
-        // the inner stack painted 222, a number no token expresses.
-        minHeight={getFieldHeight(
-          (fieldProps.size || knobProps.sizeToken) as SizeTokens,
-          5,
-          hydrationTouch,
-        )}
         aria-required={fieldProps.required || undefined}
         aria-invalid={!!errorProp || undefined}
         aria-readonly={readOnly || undefined}
@@ -923,7 +960,7 @@ export function FileUpload<
             : undefined
         }
         {...zoneInteractionProps}
-        {...(canInteract
+        {...(canInteract && !filled
           ? // Labeled fields get aria-labelledby auto-wired by the FieldLayout
             // Label (tamagui Label htmlFor → this id); the aria-label fallback
             // covers label-less usage, and is what a screen reader announces
@@ -966,36 +1003,119 @@ export function FileUpload<
 
         <YStack
           {...knobProps.panelPadding}
-          flexGrow={1}
           width="100%"
           alignItems="center"
           justifyContent="center"
           {...knobProps.gap}
         >
-          <XStack
-            alignItems="center"
-            justifyContent="center"
-            flexWrap="wrap"
-            maxWidth="100%"
-            {...knobProps.gap}
-          >
-            <Button
-              onPress={requestFiles}
-              disabled={!canInteract}
-              size={knobProps.sizeToken}
-              tabIndex={-1}
-              // BENTO-DERIVED (bento-pickers-measured.md §2/§4): NO standalone
-              // glyph exists — the upload mark rides INSIDE the CTA. Held at
-              // the house 44 control with the recipe's 16px icon (Bento draws
-              // 14 on its own 36/$3 button — ruled exception).
-              icon={UploadIcon}
+          {filled ? (
+            <YStack data-file-upload="preview" width="100%" alignItems="center" {...knobProps.gap}>
+              <YStack
+                data-file-upload={showExisting ? "existing" : "selected"}
+                alignItems="center"
+                width="100%"
+              >
+                {singlePreview ? (
+                  <Image
+                    src={singlePreview}
+                    alt={singleFile?.name ?? existingName}
+                    width="$14"
+                    height="$14"
+                    maxWidth="100%"
+                    objectFit="contain"
+                    onLoad={(event) => {
+                      if (!isWeb) return;
+                      const image = event.currentTarget as unknown as HTMLImageElement;
+                      setPixelated(image.naturalWidth > 0 && image.naturalWidth < image.width);
+                    }}
+                    {...(isWeb && pixelated
+                      ? { style: { imageRendering: "pixelated" } as any }
+                      : {})}
+                  />
+                ) : (
+                  <YStack alignItems="center" {...knobProps.gap}>
+                    <FileIcon size={rowGlyphSize} />
+                    <Text {...knobProps.body} textAlign="center" numberOfLines={2}>
+                      {singleFile?.name ?? existingName}
+                    </Text>
+                  </YStack>
+                )}
+              </YStack>
+              {canInteract ? (
+                <XStack
+                  ref={replaceRef as any}
+                  {...knobProps.gap}
+                  justifyContent="center"
+                  flexWrap="wrap"
+                >
+                  <Button
+                    size={knobProps.sizeToken}
+                    aria-label={replacing ? t("Cancel replacement") : t("Replace")}
+                    aria-expanded={replacing}
+                    onPress={(event) => {
+                      event.stopPropagation();
+                      if (replacing) {
+                        transfersRef.current.forEach((item) => item.controller.abort());
+                        setTransfersAndRef(() => []);
+                        if (fileInputRef.current) fileInputRef.current.value = "";
+                        if (isWeb)
+                          replaceRef.current
+                            ?.querySelector<HTMLElement>('button, [role="button"]')
+                            ?.focus();
+                      }
+                      setReplacing(!replacing);
+                    }}
+                  >
+                    {replacing ? t("Cancel") : t("Replace")}
+                  </Button>
+                  {singleFile || onExistingRemove ? (
+                    <Button
+                      size={knobProps.sizeToken}
+                      outlined
+                      aria-label={t("Remove {{name}}", { name: singleFile?.name ?? existingName })}
+                      onPress={(event) => {
+                        event.stopPropagation();
+                        transfersRef.current.forEach((item) => item.controller.abort());
+                        setTransfersAndRef(() => []);
+                        if (singleFile) handleFileRemove(singleFile, onValueChange);
+                        else onExistingRemove?.();
+                        setReplacing(false);
+                      }}
+                    >
+                      {t("Remove")}
+                    </Button>
+                  ) : null}
+                </XStack>
+              ) : null}
+            </YStack>
+          ) : null}
+          {!filled || replacing ? (
+            <XStack
+              ref={sourceRef as any}
+              data-file-upload="sources"
+              width="100%"
+              flexDirection={media.xs ? "column" : "row"}
+              alignItems="stretch"
+              {...knobProps.gap}
             >
-              <Button.Text {...knobProps.body}>{buttonText}</Button.Text>
-            </Button>
-            {actions}
-          </XStack>
-
-          {selectedFiles.length === 0 && transfers.length === 0 && !showExisting && (
+              <Button
+                alignSelf="stretch"
+                flex={media.xs ? undefined : 1}
+                onPress={(event) => {
+                  event.stopPropagation();
+                  requestFiles();
+                }}
+                disabled={!canInteract}
+                size={knobProps.sizeToken}
+                tabIndex={replacing ? 0 : -1}
+                icon={UploadIcon}
+              >
+                <Button.Text {...knobProps.body}>{buttonText}</Button.Text>
+              </Button>
+              {actions}
+            </XStack>
+          ) : null}
+          {!hasRows && (
             <Text color={formCommonColors.muted} textAlign="center" {...knobProps.body}>
               {placeholder}
             </Text>
@@ -1018,13 +1138,13 @@ export function FileUpload<
           ) : null}
         </YStack>
 
-        {hasRows && (
+        {((multiple && hasRows) || transfers.length > 0) && (
           <UploadFileListFrame
             data-file-upload="files"
             // The hairline tracks the frame edge's knob width — one dash voice.
             borderTopWidth={knobProps.borderRadius.borderWidth ?? 1}
           >
-            {showExisting && existing ? (
+            {multiple && showExisting && existing ? (
               <UploadTileGridFrame
                 data-file-upload="tiles"
                 {...knobProps.gap}
@@ -1061,7 +1181,7 @@ export function FileUpload<
                 </YStack>
               </UploadTileGridFrame>
             ) : null}
-            {imageTiles.length > 0 ? (
+            {multiple && imageTiles.length > 0 ? (
               <UploadTileGridFrame
                 data-file-upload="tiles"
                 {...knobProps.gap}
@@ -1072,7 +1192,7 @@ export function FileUpload<
                 )}
               </UploadTileGridFrame>
             ) : null}
-            {fileRows.map(({ file, preview, index }) => {
+            {(multiple ? fileRows : []).map(({ file, preview, index }) => {
               return (
                 <XStack
                   key={`${file.name}-${index}`}
@@ -1187,7 +1307,7 @@ export function FileUpload<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        {renderUploadArea(standaloneError, emitChange)}
+        {renderUploadArea(standaloneError, emitChange, fieldProps.onBlur)}
       </FieldLayout>
     );
   }

package/src/fields/Geolocation/Geolocation.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { ArrowsOutIcon, NavigationArrowIcon } from "@phosphor-icons/react";
 import { useForm } from "@tanstack/react-form";
 import { useCallback, useState } from "react";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { TableCellContext } from "../../shared/tableCellContext";
@@ -13,6 +13,7 @@ import type { GeocodeResult, Geocoder } from "./geocoder";
 import { GeocoderProvider } from "./geocoderContext";
 import { parseGeoValue } from "./geoValue";
 import { createPhotonGeocoder } from "./photonGeocoder";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Geolocation> = {
   title: "Forms/Geolocation",

package/src/fields/Geolocation/GeolocationMap.native.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
 import { Platform } from "react-native";
-import { Text, YStack } from "tamagui";
+import { YStack } from "tamagui";
 // Type-only imports are erased at runtime — the value module loads through
 // `loadExpoMaps` so the peer stays optional (Video / expo-video precedent).
 import type { AppleMaps as AppleMapsNS, GoogleMaps as GoogleMapsNS } from "expo-maps";
@@ -8,6 +8,7 @@ import { t } from "../../shared/t";
 import { loadExpoMaps } from "./expoMapsLoader";
 import { zoomFromDelta } from "./mapMath";
 import type { GeolocationMapSurfaceProps } from "./mapTypes";
+import { Text } from "@multiplatform.one/theme";
 
 interface MapClickEvent {
   coordinates?: { latitude?: number; longitude?: number };

package/src/fields/Geolocation/GeolocationMap.tsx

@@ -1,11 +1,12 @@
 import { MapPinIcon } from "@phosphor-icons/react";
 import { useCallback, useMemo, useState } from "react";
 import type { LayoutChangeEvent } from "react-native";
-import { Text, View, YStack } from "tamagui";
+import { View, YStack } from "tamagui";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import { OSM_TILE_SIZE, latLngFromMapClick, tilesForView, zoomFromDelta } from "./mapMath";
 import type { GeolocationMapSurfaceProps } from "./mapTypes";
+import { Text } from "@multiplatform.one/theme";
 
 function tileSrc(zoom: number, x: number, y: number) {
   if (typeof process !== "undefined" && process.env.VITEST) {

package/src/fields/Geolocation/index.tsx

@@ -1,4 +1,5 @@
 import {
+  edgeColorAt,
   ensureFocusVisibleRing,
   pressTargetHitSlop,
   sizeTokenStep,
@@ -6,12 +7,13 @@ import {
   useGlyphColor,
   useTouchSurface,
   type KnobProps,
+  Text,
 } from "@multiplatform.one/theme";
 import { MagnifyingGlassIcon, MapPinIcon, NavigationArrowIcon, XIcon } from "@phosphor-icons/react";
 import type { KeyboardEvent, MutableRefObject, ReactNode } from "react";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { ScrollView, Spinner, Text, View, XStack, YStack, isWeb } from "tamagui";
+import { ScrollView, Spinner, Text as TamaguiText, View, XStack, YStack, isWeb } from "tamagui";
 import { AdaptivePopup } from "../../AdaptivePopup";
 import { Button } from "../../Button";
 import { Field, FieldLayout } from "../../fieldLayout";
@@ -217,9 +219,9 @@ function CoordinatesPanel({
   return (
     <YStack testID="geolocation-coords-panel" gap="$3" minWidth={260} {...knobProps.panelPadding}>
       <YStack gap="$1">
-        <Text fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
+        <TamaguiText fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
           {t("Lat")}
-        </Text>
+        </TamaguiText>
         <InputParts size={knobProps.sizeToken}>
           <InputParts.Box>
             <InputParts.Area
@@ -236,9 +238,9 @@ function CoordinatesPanel({
         </InputParts>
       </YStack>
       <YStack gap="$1">
-        <Text fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
+        <TamaguiText fontSize="$1" {...knobProps.body} color={formCommonColors.muted}>
           {t("Lng")}
-        </Text>
+        </TamaguiText>
         <InputParts size={knobProps.sizeToken}>
           <InputParts.Box>
             <InputParts.Area
@@ -557,9 +559,14 @@ function GeoMapSurface({
         paddingHorizontal="$2"
         hitSlop={pressTargetHitSlop(COORD_LINE_HEIGHT)}
       >
-        <Text fontFamily="$mono" fontSize={12} lineHeight={22} color={formCommonColors.muted}>
+        <TamaguiText
+          fontFamily="$mono"
+          fontSize={12}
+          lineHeight={22}
+          color={formCommonColors.muted}
+        >
           {hasValue ? formatCoordPair(mapLat, mapLng) : t("Enter coordinates")}
-        </Text>
+        </TamaguiText>
       </XStack>
     ) : (
       <FloatingPanel
@@ -593,9 +600,14 @@ function GeoMapSurface({
                 }
               : {})}
           >
-            <Text fontFamily="$mono" fontSize={12} lineHeight={22} color={formCommonColors.muted}>
+            <TamaguiText
+              fontFamily="$mono"
+              fontSize={12}
+              lineHeight={22}
+              color={formCommonColors.muted}
+            >
               {hasValue ? formatCoordPair(mapLat, mapLng) : t("Enter coordinates")}
-            </Text>
+            </TamaguiText>
           </XStack>
         }
       >
@@ -619,7 +631,11 @@ function GeoMapSurface({
         {...knobProps.borderRadius}
         {...knobProps.inputSurface}
         borderRadius={cappedRadius}
-        borderColor={hasError ? formCommonColors.error : formInputColors.border.base}
+        borderColor={
+          hasError
+            ? formCommonColors.error
+            : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop)
+        }
         overflow="hidden"
         height={mapHeight}
         position="relative"
@@ -661,9 +677,9 @@ function GeoMapSurface({
             justifyContent="center"
             pointerEvents="none"
           >
-            <Text {...knobProps.body} color={formCommonColors.muted}>
+            <TamaguiText {...knobProps.body} color={formCommonColors.muted}>
               {t("No location set")}
-            </Text>
+            </TamaguiText>
           </YStack>
         ) : null}
       </YStack>
@@ -674,14 +690,14 @@ function GeoMapSurface({
           role="alert"
           {...knobProps.borderRadius}
           {...knobProps.inputSurface}
-          borderColor={formInputColors.border.base}
+          borderColor={edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop)}
           padding="$3"
           gap="$2"
           alignItems="center"
         >
-          <Text {...knobProps.body} color={formCommonColors.error} textAlign="center">
+          <TamaguiText {...knobProps.body} color={formCommonColors.error} textAlign="center">
             {locateError}
-          </Text>
+          </TamaguiText>
           <XStack gap="$2">
             <Button size="$2" onPress={onRetryLocate} aria-label={t("Retry location")}>
               {t("Retry")}
@@ -1084,7 +1100,14 @@ export function Geolocation({
     if (!resultsOpen || shouldUseSheet) return;
     const onDoc = (event: MouseEvent) => {
       const root = searchRootRef.current;
-      if (root && event.target instanceof Node && root.contains(event.target)) return;
+      if (
+        root &&
+        typeof Node !== "undefined" &&
+        event.target instanceof Node &&
+        root.contains(event.target)
+      ) {
+        return;
+      }
       closeSearch(false);
     };
     const onKey = (event: globalThis.KeyboardEvent) => {

package/src/fields/Icon/index.tsx

@@ -1,9 +1,9 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { MagnifyingGlassIcon } from "@phosphor-icons/react";
 import { Pressable as RNPressable } from "react-native";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, useResolvedKnobs, Text } from "@multiplatform.one/theme";
 import { useCallback, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
-import { Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
+import { Text as TamaguiText, View, XStack, YStack, isWeb, useProps } from "tamagui";
 import { Field, FieldLayout } from "../../fieldLayout";
 import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
@@ -280,20 +280,14 @@ function IconControl({
   ) : undefined;
   const nativeClear =
     !isWeb && showClear ? (
-      <InputParts.Button
+      <InputParts.Action
         testID="icon-clear-native"
-        aria-label={t("Clear icon")}
-        accessibilityLabel={t("Clear icon")}
+        label={t("Clear icon")}
         disabled={disabled}
-        onPress={(e) => {
-          e.stopPropagation();
-          handleClear();
-        }}
+        onPress={handleClear}
       >
-        <InputParts.Icon>
-          <DrawnIcon name="x" size={16} />
-        </InputParts.Icon>
-      </InputParts.Button>
+        <DrawnIcon name="x" />
+      </InputParts.Action>
     ) : undefined;
 
   return (
@@ -358,7 +352,7 @@ function IconControl({
                   >
                     {/* Outside InputParts.Icon, so the colour is passed here. */}
                     <DrawnIcon name={name} size={16} color={cellInk} />
-                    <Text
+                    <TamaguiText
                       fontFamily="$mono"
                       fontSize={11}
                       // $color10 measures 3.95-4.36:1, under the 4.5:1 AA floor
@@ -367,7 +361,7 @@ function IconControl({
                       numberOfLines={1}
                     >
                       {name}
-                    </Text>
+                    </TamaguiText>
                   </YStack>
                 </View>
               );

package/src/fields/ImageField/index.tsx

@@ -9,7 +9,7 @@
  * the borderRadius fragment, never clampRadiusForControl / containerRadius.
  */
 
-import { transitionProps } from "@multiplatform.one/theme";
+import { edgeColorAt, transitionProps, Text } from "@multiplatform.one/theme";
 import { ImageSquareIcon, XIcon } from "@phosphor-icons/react";
 import {
   ensureFocusVisibleRing,
@@ -21,7 +21,7 @@ import {
 import type { DragEvent, ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { LabelProps, SizeTokens } from "tamagui";
-import { Image, Text, View, YStack, isWeb, styled } from "tamagui";
+import { Image, Text as TamaguiText, View, YStack, isWeb, styled } from "tamagui";
 import { Button } from "../../Button";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
@@ -166,7 +166,7 @@ function ImageControl({
 
   useEffect(() => {
     setBroken(false);
-    if (!(currentValue instanceof File) || !isWeb) {
+    if (!isWeb || typeof File === "undefined" || !(currentValue instanceof File)) {
       setPreviewUrl(null);
       return;
     }
@@ -178,11 +178,12 @@ function ImageControl({
   const displayUrl =
     typeof currentValue === "string" && currentValue
       ? currentValue
-      : currentValue instanceof File
+      : typeof File !== "undefined" && currentValue instanceof File
         ? previewUrl
         : null;
   const hasValue =
-    currentValue instanceof File || (typeof currentValue === "string" && !!currentValue);
+    (typeof File !== "undefined" && currentValue instanceof File) ||
+    (typeof currentValue === "string" && !!currentValue);
   const hasPreview = !!displayUrl && !broken;
   const minEdge = Math.min(imageWidth, imageHeight);
   const caption = placeholder === undefined ? t("Add image") : placeholder;
@@ -310,7 +311,7 @@ function ImageControl({
       ? errorProp
         ? formCommonColors.error
         : formCommonColors.text
-      : formInputColors.border.base;
+      : edgeColorAt(formInputColors.border.base, knobProps.borderWidthStop);
   const altText =
     typeof label === "string" && label ? label : fieldA11y?.label || t("Selected image");
   const emptyName =
@@ -385,14 +386,14 @@ function ImageControl({
           <View alignItems="center" justifyContent="center" gap="$1" padding="$1">
             <ImageSquareIcon size={iconSize} color="var(--color11)" />
             {showCaption ? (
-              <Text
+              <TamaguiText
                 {...knobProps.body}
                 color={formCommonColors.muted}
                 textAlign="center"
                 numberOfLines={2}
               >
                 {hasValue && broken ? t("Image failed to load") : caption}
-              </Text>
+              </TamaguiText>
             ) : hasValue && broken ? (
               <Text color={formCommonColors.muted} textAlign="center" fontSize="$1">
                 {t("Image failed to load")}