@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/cjs/images/Image/ImageFrame.cjs

@@ -0,0 +1,242 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ImageFrame_exports = {};
+__export(ImageFrame_exports, {
+  ImageFrame: () => ImageFrame,
+  mediaFillProps: () => mediaFillProps
+});
+module.exports = __toCommonJS(ImageFrame_exports);
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../../componentColors.cjs");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_shared = require("./shared.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function glyphSize(px) {
+  return Math.max(14, Math.min(28, Math.round(px * 0.42)));
+}
+function DefaultFallback({
+  px
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-image-fallback": "",
+    width: "100%",
+    height: "100%",
+    minHeight: px,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "$color3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageIcon, {
+      size: glyphSize(px),
+      color: import_componentColors.componentColors.text.muted
+    })
+  });
+}
+function ImageFrame({
+  children,
+  alt,
+  fill = false,
+  framed = false,
+  compact = false,
+  groupPosition,
+  groupOrientation = "horizontal",
+  thumbnailPx: thumbnailPxProp,
+  size,
+  width,
+  height,
+  aspectRatio,
+  borderRadius: borderRadiusProp,
+  objectFit,
+  objectPosition: _objectPosition,
+  onPress,
+  disabled = false,
+  hasSource,
+  status,
+  placeholder = "empty",
+  placeholderSrc,
+  fallback,
+  ...props
+}) {
+  const {
+    knobProps,
+    control,
+    disabledState
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Image",
+    compact
+  });
+  const ctxPosition = (0, import_theme.useGroupPosition)();
+  const position = groupPosition ?? ctxPosition;
+  const nestedPx = knobProps.nestedControl.px;
+  const thumbnailPx = thumbnailPxProp ?? (size != null && ((0, import_shared.isThumbnailSize)(size) || typeof size === "number") ? (0, import_shared.thumbnailPx)(size, nestedPx, compact) : void 0);
+  const hasPress = Boolean(onPress);
+  const interactive = hasPress && !disabled;
+  const visualPx = thumbnailPx ?? (typeof width === "number" && typeof height === "number" ? Math.min(width, height) : void 0);
+  const needsHitSlop = hasPress && visualPx != null && visualPx < import_theme.MIN_PRESS_TARGET;
+  const minTarget = hasPress && visualPx == null ? (0, import_theme.pressTargetStyle)() : void 0;
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const radiusValue = borderRadiusProp ?? radiusToken;
+  const radiusFragment = position ? (0, import_theme.stackRadiusProps)(position, radiusValue, groupOrientation) : {
+    borderRadius: radiusValue,
+    className: knobProps.borderRadius.className
+  };
+  const heightOnly = typeof height !== "undefined" && typeof width === "undefined" && typeof aspectRatio === "undefined" && thumbnailPx == null && !fill;
+  const square = thumbnailPx != null;
+  const frameWidth = square ? thumbnailPx : width;
+  const frameHeight = square ? thumbnailPx : height;
+  const frameAspect = square ? 1 : aspectRatio;
+  const fallbackPx = visualPx ?? nestedPx;
+  const showPlaceholder = status === "loading" && placeholder != null && placeholder !== "empty" && hasSource;
+  const showFallback = status === "error" || !hasSource;
+  const handleKeyDown = e => {
+    if (!interactive) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault?.();
+      onPress?.();
+    }
+  };
+  const pressA11y = hasPress ? import_tamagui.isWeb ? {
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": alt || void 0,
+    "aria-disabled": disabled || void 0,
+    onKeyDown: handleKeyDown
+  } : {
+    accessibilityRole: "button",
+    accessibilityLabel: alt || void 0,
+    accessibilityState: {
+      disabled
+    }
+  } : import_tamagui.isWeb ? null : {
+    accessible: false
+  };
+  const painted = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-image-frame": "",
+    "data-nested-px": thumbnailPx === nestedPx ? nestedPx : void 0,
+    "data-group-position": position,
+    overflow: "hidden",
+    position: fill ? "absolute" : "relative",
+    ...(fill ? {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: "100%",
+      height: "100%"
+    } : null),
+    ...(!fill && frameWidth != null ? {
+      width: frameWidth
+    } : null),
+    ...(!fill && frameHeight != null ? {
+      height: frameHeight
+    } : null),
+    ...(!fill && frameAspect != null ? {
+      aspectRatio: frameAspect
+    } : null),
+    ...(heightOnly ? {
+      width: "auto",
+      alignSelf: "flex-start"
+    } : null),
+    ...radiusFragment,
+    ...(framed ? {
+      backgroundColor: knobProps.surface.backgroundColor,
+      borderColor: knobProps.surface.borderColor,
+      borderWidth: knobProps.surface.borderWidth
+    } : null),
+    ...(hasPress ? {
+      cursor: disabled ? "not-allowed" : "pointer",
+      outlineWidth: 0,
+      hoverStyle: interactive ? framed ? control.hoverKnobProps : {
+        opacity: 0.92
+      } : void 0,
+      pressStyle: interactive ? framed ? control.pressKnobProps : {
+        opacity: 0.85
+      } : void 0,
+      focusVisibleStyle: interactive ? control.focusVisibleKnobProps : void 0,
+      // onPress rides in loose (zero-or-event) so callers can forward the
+      // RN/Tamagui handler; re-emit it to the View as an event handler.
+      onPress: interactive ? onPress : void 0,
+      ...(!import_tamagui.isWeb && needsHitSlop ? {
+        hitSlop: (0, import_theme.pressTargetHitSlop)(visualPx ?? nestedPx)
+      } : null),
+      ...minTarget,
+      ...pressA11y
+    } : pressA11y),
+    ...(disabled && hasPress ? disabledState.chromeKnobProps : null),
+    ...props,
+    children: showFallback ? fallback ?? /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultFallback, {
+      px: fallbackPx
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [children, showPlaceholder ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        children: placeholder === "blur" && placeholderSrc ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+          src: placeholderSrc,
+          alt: "",
+          width: "100%",
+          height: "100%",
+          objectFit: objectFit ?? "cover",
+          ...(import_tamagui.isWeb ? {
+            style: {
+              filter: "blur(12px)"
+            }
+          } : {
+            blurRadius: 12
+          })
+        }) : placeholder === "blur" || placeholder === "skeleton" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: "100%",
+          height: "100%",
+          variant: "rounded"
+        }) : placeholder
+      }) : null]
+    })
+  });
+  if (import_tamagui.isWeb && needsHitSlop) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "transparent",
+      ...(0, import_theme.pressTargetStyle)(),
+      children: painted
+    });
+  }
+  return painted;
+}
+function mediaFillProps(opts) {
+  const constrained = opts.fill || opts.thumbnail || opts.width != null && opts.height != null || opts.width != null && opts.aspectRatio != null || opts.height != null && opts.aspectRatio != null;
+  const heightOnly = opts.height != null && opts.width == null && opts.aspectRatio == null && !opts.fill && !opts.thumbnail;
+  return {
+    width: constrained ? "100%" : heightOnly ? "auto" : opts.width != null ? "100%" : void 0,
+    height: constrained ? "100%" : heightOnly ? "100%" : void 0,
+    objectFit: opts.objectFit,
+    ...(opts.objectPosition ? {
+      objectPosition: opts.objectPosition
+    } : null),
+    display: "block"
+  };
+}

package/dist/cjs/images/Image/ImageFrame.native.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ImageFrame_exports = {};
+__export(ImageFrame_exports, {
+  ImageFrame: () => ImageFrame,
+  mediaFillProps: () => mediaFillProps
+});
+module.exports = __toCommonJS(ImageFrame_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../../componentColors.native.js");
+var import_Skeleton = require("../../Skeleton/index.native.js");
+var import_shared = require("./shared.native.js");
+function glyphSize(px) {
+  return Math.max(14, Math.min(28, Math.round(px * 0.42)));
+}
+function DefaultFallback(param) {
+  var {
+    px
+  } = param;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-image-fallback": "",
+    width: "100%",
+    height: "100%",
+    minHeight: px,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "$color3",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageIcon, {
+      size: glyphSize(px),
+      color: import_componentColors.componentColors.text.muted
+    })
+  });
+}
+function ImageFrame(param) {
+  var {
+    children,
+    alt,
+    fill = false,
+    framed = false,
+    compact = false,
+    groupPosition,
+    groupOrientation = "horizontal",
+    thumbnailPx: thumbnailPxProp,
+    size,
+    width,
+    height,
+    aspectRatio,
+    borderRadius: borderRadiusProp,
+    objectFit,
+    objectPosition: _objectPosition,
+    onPress,
+    disabled = false,
+    hasSource,
+    status,
+    placeholder = "empty",
+    placeholderSrc,
+    fallback,
+    ...props
+  } = param;
+  var {
+    knobProps,
+    control,
+    disabledState
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "Image",
+    compact
+  });
+  var ctxPosition = (0, import_theme.useGroupPosition)();
+  var position = groupPosition !== null && groupPosition !== void 0 ? groupPosition : ctxPosition;
+  var nestedPx = knobProps.nestedControl.px;
+  var thumbnailPx = thumbnailPxProp !== null && thumbnailPxProp !== void 0 ? thumbnailPxProp : size != null && ((0, import_shared.isThumbnailSize)(size) || typeof size === "number") ? (0, import_shared.thumbnailPx)(size, nestedPx, compact) : void 0;
+  var hasPress = Boolean(onPress);
+  var interactive = hasPress && !disabled;
+  var visualPx = thumbnailPx !== null && thumbnailPx !== void 0 ? thumbnailPx : typeof width === "number" && typeof height === "number" ? Math.min(width, height) : void 0;
+  var needsHitSlop = hasPress && visualPx != null && visualPx < import_theme.MIN_PRESS_TARGET;
+  var minTarget = hasPress && visualPx == null ? (0, import_theme.pressTargetStyle)() : void 0;
+  var radiusToken = knobProps.borderRadius.borderRadius;
+  var radiusValue = borderRadiusProp !== null && borderRadiusProp !== void 0 ? borderRadiusProp : radiusToken;
+  var radiusFragment = position ? (0, import_theme.stackRadiusProps)(position, radiusValue, groupOrientation) : {
+    borderRadius: radiusValue,
+    className: knobProps.borderRadius.className
+  };
+  var heightOnly = typeof height !== "undefined" && typeof width === "undefined" && typeof aspectRatio === "undefined" && thumbnailPx == null && !fill;
+  var square = thumbnailPx != null;
+  var frameWidth = square ? thumbnailPx : width;
+  var frameHeight = square ? thumbnailPx : height;
+  var frameAspect = square ? 1 : aspectRatio;
+  var fallbackPx = visualPx !== null && visualPx !== void 0 ? visualPx : nestedPx;
+  var showPlaceholder = status === "loading" && placeholder != null && placeholder !== "empty" && hasSource;
+  var showFallback = status === "error" || !hasSource;
+  var handleKeyDown = function handleKeyDown2(e) {
+    if (!interactive) return;
+    if (e.key === "Enter" || e.key === " ") {
+      var _e_preventDefault;
+      (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+      onPress === null || onPress === void 0 ? void 0 : onPress();
+    }
+  };
+  var pressA11y = hasPress ? import_tamagui.isWeb ? {
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-label": alt || void 0,
+    "aria-disabled": disabled || void 0,
+    onKeyDown: handleKeyDown
+  } : {
+    accessibilityRole: "button",
+    accessibilityLabel: alt || void 0,
+    accessibilityState: {
+      disabled
+    }
+  } : import_tamagui.isWeb ? null : {
+    accessible: false
+  };
+  var painted = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    "data-image-frame": "",
+    "data-nested-px": thumbnailPx === nestedPx ? nestedPx : void 0,
+    "data-group-position": position,
+    overflow: "hidden",
+    position: fill ? "absolute" : "relative",
+    ...(fill ? {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: "100%",
+      height: "100%"
+    } : null),
+    ...(!fill && frameWidth != null ? {
+      width: frameWidth
+    } : null),
+    ...(!fill && frameHeight != null ? {
+      height: frameHeight
+    } : null),
+    ...(!fill && frameAspect != null ? {
+      aspectRatio: frameAspect
+    } : null),
+    ...(heightOnly ? {
+      width: "auto",
+      alignSelf: "flex-start"
+    } : null),
+    ...radiusFragment,
+    ...(framed ? {
+      backgroundColor: knobProps.surface.backgroundColor,
+      borderColor: knobProps.surface.borderColor,
+      borderWidth: knobProps.surface.borderWidth
+    } : null),
+    ...(hasPress ? {
+      cursor: disabled ? "not-allowed" : "pointer",
+      outlineWidth: 0,
+      hoverStyle: interactive ? framed ? control.hoverKnobProps : {
+        opacity: 0.92
+      } : void 0,
+      pressStyle: interactive ? framed ? control.pressKnobProps : {
+        opacity: 0.85
+      } : void 0,
+      focusVisibleStyle: interactive ? control.focusVisibleKnobProps : void 0,
+      // onPress rides in loose (zero-or-event) so callers can forward the
+      // RN/Tamagui handler; re-emit it to the View as an event handler.
+      onPress: interactive ? onPress : void 0,
+      ...(!import_tamagui.isWeb && needsHitSlop ? {
+        hitSlop: (0, import_theme.pressTargetHitSlop)(visualPx !== null && visualPx !== void 0 ? visualPx : nestedPx)
+      } : null),
+      ...minTarget,
+      ...pressA11y
+    } : pressA11y),
+    ...(disabled && hasPress ? disabledState.chromeKnobProps : null),
+    ...props,
+    children: showFallback ? fallback !== null && fallback !== void 0 ? fallback : /* @__PURE__ */(0, import_jsx_runtime.jsx)(DefaultFallback, {
+      px: fallbackPx
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [children, showPlaceholder ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        children: placeholder === "blur" && placeholderSrc ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+          src: placeholderSrc,
+          alt: "",
+          width: "100%",
+          height: "100%",
+          objectFit: objectFit !== null && objectFit !== void 0 ? objectFit : "cover",
+          ...(import_tamagui.isWeb ? {
+            style: {
+              filter: "blur(12px)"
+            }
+          } : {
+            blurRadius: 12
+          })
+        }) : placeholder === "blur" || placeholder === "skeleton" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: "100%",
+          height: "100%",
+          variant: "rounded"
+        }) : placeholder
+      }) : null]
+    })
+  });
+  if (import_tamagui.isWeb && needsHitSlop) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "transparent",
+      ...(0, import_theme.pressTargetStyle)(),
+      children: painted
+    });
+  }
+  return painted;
+}
+function mediaFillProps(opts) {
+  var constrained = opts.fill || opts.thumbnail || opts.width != null && opts.height != null || opts.width != null && opts.aspectRatio != null || opts.height != null && opts.aspectRatio != null;
+  var heightOnly = opts.height != null && opts.width == null && opts.aspectRatio == null && !opts.fill && !opts.thumbnail;
+  return {
+    width: constrained ? "100%" : heightOnly ? "auto" : opts.width != null ? "100%" : void 0,
+    height: constrained ? "100%" : heightOnly ? "100%" : void 0,
+    objectFit: opts.objectFit,
+    ...(opts.objectPosition ? {
+      objectPosition: opts.objectPosition
+    } : null),
+    display: "block"
+  };
+}
+//# sourceMappingURL=ImageFrame.native.js.map

package/dist/cjs/images/Image/ImageFrame.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ImageFrame_exports","__export","ImageFrame","mediaFillProps","module","exports","import_jsx_runtime","require","import_react","import_theme","import_tamagui","import_componentColors","import_Skeleton","import_shared","glyphSize","px","Math","max","min","round","DefaultFallback","param","jsx","View","width","height","minHeight","alignItems","justifyContent","backgroundColor","children","ImageIcon","size","color","componentColors","text","muted","alt","fill","framed","compact","groupPosition","groupOrientation","thumbnailPx","thumbnailPxProp","aspectRatio","borderRadius","borderRadiusProp","objectFit","objectPosition","_objectPosition","onPress","disabled","hasSource","status","placeholder","placeholderSrc","fallback","props","knobProps","control","disabledState","useResolvedKnobs","component","ctxPosition","useGroupPosition","position","nestedPx","nestedControl","isThumbnailSize","hasPress","Boolean","interactive","visualPx","needsHitSlop","MIN_PRESS_TARGET","minTarget","pressTargetStyle","radiusToken","radiusValue","radiusFragment","stackRadiusProps","className","heightOnly","square","frameWidth","frameHeight","frameAspect","fallbackPx","showPlaceholder","showFallback","handleKeyDown","handleKeyDown2","e","key","_e_preventDefault","preventDefault","call","pressA11y","isWeb","role","tabIndex","onKeyDown","accessibilityRole","accessibilityLabel","accessibilityState","accessible","painted","overflow","top","left","right","bottom","alignSelf","surface","borderColor","borderWidth","cursor","outlineWidth","hoverStyle","hoverKnobProps","opacity","pressStyle","pressKnobProps","focusVisibleStyle","focusVisibleKnobProps","hitSlop","pressTargetHitSlop","chromeKnobProps","jsxs","Fragment","pointerEvents","Image","src","style","filter","blurRadius","Skeleton","variant"],"sources":["../../../../src/images/Image/ImageFrame.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/images/Image/index.cjs

@@ -27,17 +27,19 @@ __export(Image_exports, {
 module.exports = __toCommonJS(Image_exports);
 var import_react = require("react");
 var import_tamagui = require("tamagui");
-var import_useAssets = require("../../hooks/useAssets/index.cjs");
+var import_ImageFrame = require("./ImageFrame.cjs");
+var import_shared = require("./shared.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Image({
-  alt,
+  alt = "",
   blurRadius: _blurRadius,
   capInsets: _capInsets,
   crossOrigin,
   defaultSource: _defaultSource,
   fadeDuration: _fadeDuration,
   loadingIndicatorSource: _loadingIndicatorSource,
-  objectFit,
+  objectFit: objectFitProp,
+  objectPosition,
   onError,
   onLoad,
   onLoadEnd,
@@ -52,48 +54,99 @@ function Image({
   srcSet,
   svg: _svg,
   tintColor: _tintColor,
+  fill = false,
+  sizes,
+  loading: loadingProp,
+  priority,
+  placeholder = "empty",
+  placeholderSrc,
+  fallback,
+  framed,
+  size,
+  compact = false,
+  groupPosition,
+  groupOrientation,
+  decoding = "async",
+  onPress,
+  disabled,
+  width,
+  height,
+  aspectRatio,
+  borderRadius,
   ...props
 }) {
-  const source = sourceProp || src;
-  const [asset] = (0, import_useAssets.useAssets)(typeof source === "number" ? [source] : []);
-  const imageUriSource = (0, import_react.useMemo)(() => {
-    if (typeof source === "string") {
-      return {
-        uri: source
-      };
-    }
-    if (typeof source === "number") return asset;
-    return source?.default || source;
-  }, [asset, source]);
-  const resolvedSrc = (0, import_react.useMemo)(() => {
-    if (typeof source === "string") return source;
-    if (!imageUriSource || Array.isArray(imageUriSource)) return void 0;
-    return imageUriSource.uri;
-  }, [source, imageUriSource]);
-  if (!resolvedSrc && typeof source !== "number") return null;
   const {
+    source,
+    resolvedSrc
+  } = (0, import_shared.useResolvedImageSource)(sourceProp, src);
+  const hasSource = Boolean(resolvedSrc) || typeof source === "number";
+  const thumbnail = size != null && ((0, import_shared.isThumbnailSize)(size) || typeof size === "number");
+  const isFramed = framed ?? thumbnail;
+  const objectFit = objectFitProp ?? (fill || thumbnail ? "cover" : void 0);
+  const loading = priority ? "eager" : loadingProp ?? "lazy";
+  const [status, setStatus] = (0, import_react.useState)(() => hasSource ? "loading" : "error");
+  (0, import_react.useEffect)(() => {
+    setStatus(hasSource ? "loading" : "error");
+  }, [hasSource, resolvedSrc]);
+  const handleLoad = (0, import_react.useCallback)(event => {
+    setStatus("loaded");
+    onLoad?.(event);
+  }, [onLoad]);
+  const handleError = (0, import_react.useCallback)(error => {
+    setStatus("error");
+    onError?.(error);
+  }, [onError]);
+  if (!hasSource && !isFramed && fallback == null && !fill && size == null) {
+    return null;
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ImageFrame.ImageFrame, {
+    alt,
+    fill,
+    framed: isFramed,
+    compact,
+    groupPosition,
+    groupOrientation,
+    size,
     width,
     height,
-    aspectRatio
-  } = props;
-  const heightOnly = typeof height !== "undefined" && typeof width === "undefined" && typeof aspectRatio === "undefined";
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
-    ...props,
-    ...(heightOnly && {
-      width: "auto",
-      alignSelf: "flex-start"
-    }),
-    alt,
-    crossOrigin,
+    aspectRatio,
+    borderRadius,
     objectFit,
-    onError,
-    onLoad,
-    onLoadEnd,
-    onLoadStart,
-    onProgress,
-    referrerPolicy,
-    source: imageUriSource,
-    src: resolvedSrc,
-    srcSet
+    objectPosition,
+    onPress,
+    disabled,
+    hasSource,
+    status,
+    placeholder,
+    placeholderSrc,
+    fallback,
+    ...props,
+    children: hasSource && status !== "error" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+      alt,
+      crossOrigin,
+      decoding,
+      fetchPriority: priority ? "high" : void 0,
+      loading,
+      objectFit,
+      objectPosition,
+      onError: handleError,
+      onLoad: handleLoad,
+      onLoadEnd,
+      onLoadStart,
+      onProgress,
+      referrerPolicy,
+      sizes,
+      src: resolvedSrc,
+      srcSet,
+      ...(0, import_ImageFrame.mediaFillProps)({
+        fill,
+        thumbnail,
+        width,
+        height,
+        aspectRatio,
+        objectFit,
+        objectPosition
+      })
+    }) : null
   });
 }