@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/esm/images/Image/ImageFrame.mjs

@@ -0,0 +1,216 @@
+import { ImageIcon } from "@phosphor-icons/react";
+import { MIN_PRESS_TARGET, pressTargetHitSlop, pressTargetStyle, stackRadiusProps, useGroupPosition, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Image as TamaguiImage, View, isWeb } from "tamagui";
+import { componentColors } from "../../componentColors.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { isThumbnailSize, thumbnailPx as resolveThumbnailPx } from "./shared.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function glyphSize(px) {
+  return Math.max(14, Math.min(28, Math.round(px * 0.42)));
+}
+function DefaultFallback({
+  px
+}) {
+  return /* @__PURE__ */jsx(View, {
+    "data-image-fallback": "",
+    width: "100%",
+    height: "100%",
+    minHeight: px,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "$color3",
+    children: /* @__PURE__ */jsx(ImageIcon, {
+      size: glyphSize(px),
+      color: 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
+  } = useResolvedKnobs({
+    component: "Image",
+    compact
+  });
+  const ctxPosition = useGroupPosition();
+  const position = groupPosition ?? ctxPosition;
+  const nestedPx = knobProps.nestedControl.px;
+  const thumbnailPx = thumbnailPxProp ?? (size != null && (isThumbnailSize(size) || typeof size === "number") ? resolveThumbnailPx(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 < MIN_PRESS_TARGET;
+  const minTarget = hasPress && visualPx == null ? pressTargetStyle() : void 0;
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const radiusValue = borderRadiusProp ?? radiusToken;
+  const radiusFragment = position ? 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 ? 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
+    }
+  } : isWeb ? null : {
+    accessible: false
+  };
+  const painted = /* @__PURE__ */jsx(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,
+      ...(!isWeb && needsHitSlop ? {
+        hitSlop: pressTargetHitSlop(visualPx ?? nestedPx)
+      } : null),
+      ...minTarget,
+      ...pressA11y
+    } : pressA11y),
+    ...(disabled && hasPress ? disabledState.chromeKnobProps : null),
+    ...props,
+    children: showFallback ? fallback ?? /* @__PURE__ */jsx(DefaultFallback, {
+      px: fallbackPx
+    }) : /* @__PURE__ */jsxs(Fragment, {
+      children: [children, showPlaceholder ? /* @__PURE__ */jsx(View, {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        children: placeholder === "blur" && placeholderSrc ? /* @__PURE__ */jsx(TamaguiImage, {
+          src: placeholderSrc,
+          alt: "",
+          width: "100%",
+          height: "100%",
+          objectFit: objectFit ?? "cover",
+          ...(isWeb ? {
+            style: {
+              filter: "blur(12px)"
+            }
+          } : {
+            blurRadius: 12
+          })
+        }) : placeholder === "blur" || placeholder === "skeleton" ? /* @__PURE__ */jsx(Skeleton, {
+          width: "100%",
+          height: "100%",
+          variant: "rounded"
+        }) : placeholder
+      }) : null]
+    })
+  });
+  if (isWeb && needsHitSlop) {
+    return /* @__PURE__ */jsx(View, {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "transparent",
+      ...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"
+  };
+}
+export { ImageFrame, mediaFillProps };
+//# sourceMappingURL=ImageFrame.mjs.map

package/dist/esm/images/Image/ImageFrame.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["ImageIcon","MIN_PRESS_TARGET","pressTargetHitSlop","pressTargetStyle","stackRadiusProps","useGroupPosition","useResolvedKnobs","Image","TamaguiImage","View","isWeb","componentColors","Skeleton","isThumbnailSize","thumbnailPx","resolveThumbnailPx","Fragment","jsx","jsxs","glyphSize","px","Math","max","min","round","DefaultFallback","width","height","minHeight","alignItems","justifyContent","backgroundColor","children","size","color","text","muted","ImageFrame","alt","fill","framed","compact","groupPosition","groupOrientation","thumbnailPxProp","aspectRatio","borderRadius","borderRadiusProp","objectFit","objectPosition","_objectPosition","onPress","disabled","hasSource","status","placeholder","placeholderSrc","fallback","props","knobProps","control","disabledState","component","ctxPosition","position","nestedPx","nestedControl","hasPress","Boolean","interactive","visualPx","needsHitSlop","minTarget","radiusToken","radiusValue","radiusFragment","className","heightOnly","square","frameWidth","frameHeight","frameAspect","fallbackPx","showPlaceholder","showFallback","handleKeyDown","e","key","preventDefault","pressA11y","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","chromeKnobProps","pointerEvents","src","style","filter","blurRadius","variant","mediaFillProps","opts","constrained","thumbnail","display"],"sources":["../../../../src/images/Image/ImageFrame.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ImageIcon } from "@phosphor-icons/react";
+import { MIN_PRESS_TARGET, pressTargetHitSlop, pressTargetStyle, stackRadiusProps, useGroupPosition, useResolvedKnobs } from "@multiplatform.one/theme";
+import { Image as TamaguiImage, View, isWeb } from "tamagui";
+import { componentColors } from "../../componentColors.native.js";
+import { Skeleton } from "../../Skeleton/index.native.js";
+import { isThumbnailSize, thumbnailPx as resolveThumbnailPx } from "./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__ */_jsx(View, {
+    "data-image-fallback": "",
+    width: "100%",
+    height: "100%",
+    minHeight: px,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "$color3",
+    children: /* @__PURE__ */_jsx(ImageIcon, {
+      size: glyphSize(px),
+      color: 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
+  } = useResolvedKnobs({
+    component: "Image",
+    compact
+  });
+  var ctxPosition = 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 && (isThumbnailSize(size) || typeof size === "number") ? resolveThumbnailPx(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 < MIN_PRESS_TARGET;
+  var minTarget = hasPress && visualPx == null ? pressTargetStyle() : void 0;
+  var radiusToken = knobProps.borderRadius.borderRadius;
+  var radiusValue = borderRadiusProp !== null && borderRadiusProp !== void 0 ? borderRadiusProp : radiusToken;
+  var radiusFragment = position ? 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 ? 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
+    }
+  } : isWeb ? null : {
+    accessible: false
+  };
+  var painted = /* @__PURE__ */_jsx(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,
+      ...(!isWeb && needsHitSlop ? {
+        hitSlop: 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__ */_jsx(DefaultFallback, {
+      px: fallbackPx
+    }) : /* @__PURE__ */_jsxs(_Fragment, {
+      children: [children, showPlaceholder ? /* @__PURE__ */_jsx(View, {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        pointerEvents: "none",
+        children: placeholder === "blur" && placeholderSrc ? /* @__PURE__ */_jsx(TamaguiImage, {
+          src: placeholderSrc,
+          alt: "",
+          width: "100%",
+          height: "100%",
+          objectFit: objectFit !== null && objectFit !== void 0 ? objectFit : "cover",
+          ...(isWeb ? {
+            style: {
+              filter: "blur(12px)"
+            }
+          } : {
+            blurRadius: 12
+          })
+        }) : placeholder === "blur" || placeholder === "skeleton" ? /* @__PURE__ */_jsx(Skeleton, {
+          width: "100%",
+          height: "100%",
+          variant: "rounded"
+        }) : placeholder
+      }) : null]
+    })
+  });
+  if (isWeb && needsHitSlop) {
+    return /* @__PURE__ */_jsx(View, {
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "transparent",
+      ...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"
+  };
+}
+export { ImageFrame, mediaFillProps };
+//# sourceMappingURL=ImageFrame.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ImageIcon","MIN_PRESS_TARGET","pressTargetHitSlop","pressTargetStyle","stackRadiusProps","useGroupPosition","useResolvedKnobs","Image","TamaguiImage","View","isWeb","componentColors","Skeleton","isThumbnailSize","thumbnailPx","resolveThumbnailPx","glyphSize","px","Math","max","min","round","DefaultFallback","param","width","height","minHeight","alignItems","justifyContent","backgroundColor","children","size","color","text","muted","ImageFrame","alt","fill","framed","compact","groupPosition","groupOrientation","thumbnailPxProp","aspectRatio","borderRadius","borderRadiusProp","objectFit","objectPosition","_objectPosition","onPress","disabled","hasSource","status","placeholder","placeholderSrc","fallback","props","knobProps","control","disabledState","component","ctxPosition","position","nestedPx","nestedControl","hasPress","Boolean","interactive","visualPx","needsHitSlop","minTarget","radiusToken","radiusValue","radiusFragment","className","heightOnly","square","frameWidth","frameHeight","frameAspect","fallbackPx","showPlaceholder","showFallback","handleKeyDown","handleKeyDown2","e","key","_e_preventDefault","preventDefault","call","pressA11y","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","chromeKnobProps","pointerEvents","src","style","filter","blurRadius","variant"],"sources":["../../../../src/images/Image/ImageFrame.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/images/Image/index.mjs

@@ -1,16 +1,18 @@
-import { useMemo } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Image as TamaguiImage } from "tamagui";
-import { useAssets } from "../../hooks/useAssets/index.mjs";
+import { ImageFrame, mediaFillProps } from "./ImageFrame.mjs";
+import { isThumbnailSize, useResolvedImageSource } from "./shared.mjs";
 import { jsx } from "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,
@@ -25,49 +27,100 @@ 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] = useAssets(typeof source === "number" ? [source] : []);
-  const imageUriSource = useMemo(() => {
-    if (typeof source === "string") {
-      return {
-        uri: source
-      };
-    }
-    if (typeof source === "number") return asset;
-    return source?.default || source;
-  }, [asset, source]);
-  const resolvedSrc = 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
+  } = useResolvedImageSource(sourceProp, src);
+  const hasSource = Boolean(resolvedSrc) || typeof source === "number";
+  const thumbnail = size != null && (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] = useState(() => hasSource ? "loading" : "error");
+  useEffect(() => {
+    setStatus(hasSource ? "loading" : "error");
+  }, [hasSource, resolvedSrc]);
+  const handleLoad = useCallback(event => {
+    setStatus("loaded");
+    onLoad?.(event);
+  }, [onLoad]);
+  const handleError = useCallback(error => {
+    setStatus("error");
+    onError?.(error);
+  }, [onError]);
+  if (!hasSource && !isFramed && fallback == null && !fill && size == null) {
+    return null;
+  }
+  return /* @__PURE__ */jsx(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__ */jsx(TamaguiImage, {
-    ...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__ */jsx(TamaguiImage, {
+      alt,
+      crossOrigin,
+      decoding,
+      fetchPriority: priority ? "high" : void 0,
+      loading,
+      objectFit,
+      objectPosition,
+      onError: handleError,
+      onLoad: handleLoad,
+      onLoadEnd,
+      onLoadStart,
+      onProgress,
+      referrerPolicy,
+      sizes,
+      src: resolvedSrc,
+      srcSet,
+      ...mediaFillProps({
+        fill,
+        thumbnail,
+        width,
+        height,
+        aspectRatio,
+        objectFit,
+        objectPosition
+      })
+    }) : null
   });
 }
 export { Image };

package/dist/esm/images/Image/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","Image","TamaguiImage","useAssets","jsx","alt","blurRadius","_blurRadius","capInsets","_capInsets","crossOrigin","defaultSource","_defaultSource","fadeDuration","_fadeDuration","loadingIndicatorSource","_loadingIndicatorSource","objectFit","onError","onLoad","onLoadEnd","onLoadStart","onPartialLoad","_onPartialLoad","onProgress","progressiveRenderingEnabled","_progressiveRenderingEnabled","referrerPolicy","resizeMethod","_resizeMethod","source","sourceProp","src","srcSet","svg","_svg","tintColor","_tintColor","props","asset","imageUriSource","uri","default","resolvedSrc","Array","isArray","width","height","aspectRatio","heightOnly","alignSelf"],"sources":["../../../../src/images/Image/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,OAAA,QAAe;AAExB,SAASC,KAAA,IAASC,YAAA,QAAoB;AACtC,SAASC,SAAA,QAAiB;AAmEtB,SAAAC,GAAA;AA9DG,SAASH,MAAM;EACpBI,GAAA;EACAC,UAAA,EAAYC,WAAA;EACZC,SAAA,EAAWC,UAAA;EACXC,WAAA;EACAC,aAAA,EAAeC,cAAA;EACfC,YAAA,EAAcC,aAAA;EACdC,sBAAA,EAAwBC,uBAAA;EACxBC,SAAA;EACAC,OAAA;EACAC,MAAA;EACAC,SAAA;EACAC,WAAA;EACAC,aAAA,EAAeC,cAAA;EACfC,UAAA;EACAC,2BAAA,EAA6BC,4BAAA;EAC7BC,cAAA;EACAC,YAAA,EAAcC,aAAA;EACdC,MAAA,EAAQC,UAAA;EACRC,GAAA;EACAC,MAAA;EACAC,GAAA,EAAKC,IAAA;EACLC,SAAA,EAAWC,UAAA;EACX,GAAGC;AACL,GAAe;EACb,MAAMR,MAAA,GAASC,UAAA,IAAcC,GAAA;EAC7B,MAAM,CAACO,KAAK,IAAIpC,SAAA,CAAU,OAAO2B,MAAA,KAAW,WAAW,CAACA,MAAM,IAAI,EAAE;EAEpE,MAAMU,cAAA,GAAiBxC,OAAA,CAAQ,MAAM;IACnC,IAAI,OAAO8B,MAAA,KAAW,UAAU;MAC9B,OAAO;QAAEW,GAAA,EAAKX;MAAO;IACvB;IACA,IAAI,OAAOA,MAAA,KAAW,UAAU,OAAOS,KAAA;IACvC,OACGT,MAAA,EAA4DY,OAAA,IAC5DZ,MAAA;EAEL,GAAG,CAACS,KAAA,EAAOT,MAAM,CAAC;EAElB,MAAMa,WAAA,GAAc3C,OAAA,CAAQ,MAAM;IAChC,IAAI,OAAO8B,MAAA,KAAW,UAAU,OAAOA,MAAA;IACvC,IAAI,CAACU,cAAA,IAAkBI,KAAA,CAAMC,OAAA,CAAQL,cAAc,GAAG,OAAO;IAC7D,OAAOA,cAAA,CAAeC,GAAA;EACxB,GAAG,CAACX,MAAA,EAAQU,cAAc,CAAC;EAE3B,IAAI,CAACG,WAAA,IAAe,OAAOb,MAAA,KAAW,UAAU,OAAO;EAMvD,MAAM;IAAEgB,KAAA;IAAOC,MAAA;IAAQC;EAAY,IAAIV,KAAA;EAKvC,MAAMW,UAAA,GACJ,OAAOF,MAAA,KAAW,eAClB,OAAOD,KAAA,KAAU,eACjB,OAAOE,WAAA,KAAgB;EAEzB,OACE,eAAA5C,GAAA,CAACF,YAAA;IACE,GAAIoC,KAAA;IACJ,IAAIW,UAAA,IAAc;MAAEH,KAAA,EAAO;MAAQI,SAAA,EAAW;IAAa;IAC5D7C,GAAA;IACAK,WAAA;IACAO,SAAA;IACAC,OAAA;IACAC,MAAA;IACAC,SAAA;IACAC,WAAA;IACAG,UAAA;IACAG,cAAA;IACAG,MAAA,EAAQU,cAAA;IACRR,GAAA,EAAKW,WAAA;IACLV;EAAA,CACF;AAEJ","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useState","Image","TamaguiImage","ImageFrame","mediaFillProps","isThumbnailSize","useResolvedImageSource","jsx","alt","blurRadius","_blurRadius","capInsets","_capInsets","crossOrigin","defaultSource","_defaultSource","fadeDuration","_fadeDuration","loadingIndicatorSource","_loadingIndicatorSource","objectFit","objectFitProp","objectPosition","onError","onLoad","onLoadEnd","onLoadStart","onPartialLoad","_onPartialLoad","onProgress","progressiveRenderingEnabled","_progressiveRenderingEnabled","referrerPolicy","resizeMethod","_resizeMethod","source","sourceProp","src","srcSet","svg","_svg","tintColor","_tintColor","fill","sizes","loading","loadingProp","priority","placeholder","placeholderSrc","fallback","framed","size","compact","groupPosition","groupOrientation","decoding","onPress","disabled","width","height","aspectRatio","borderRadius","props","resolvedSrc","hasSource","Boolean","thumbnail","isFramed","status","setStatus","handleLoad","event","handleError","error","children","fetchPriority"],"sources":["../../../../src/images/Image/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,EAAaC,SAAA,EAAWC,QAAA,QAAgB;AACjD,SAASC,KAAA,IAASC,YAAA,QAAoB;AACtC,SAASC,UAAA,EAAYC,cAAA,QAAwC;AAC7D,SAASC,eAAA,EAAiBC,sBAAA,QAA8B;AA0GhD,SAAAC,GAAA;AArGD,SAASN,MAAM;EACpBO,GAAA,GAAM;EACNC,UAAA,EAAYC,WAAA;EACZC,SAAA,EAAWC,UAAA;EACXC,WAAA;EACAC,aAAA,EAAeC,cAAA;EACfC,YAAA,EAAcC,aAAA;EACdC,sBAAA,EAAwBC,uBAAA;EACxBC,SAAA,EAAWC,aAAA;EACXC,cAAA;EACAC,OAAA;EACAC,MAAA;EACAC,SAAA;EACAC,WAAA;EACAC,aAAA,EAAeC,cAAA;EACfC,UAAA;EACAC,2BAAA,EAA6BC,4BAAA;EAC7BC,cAAA;EACAC,YAAA,EAAcC,aAAA;EACdC,MAAA,EAAQC,UAAA;EACRC,GAAA;EACAC,MAAA;EACAC,GAAA,EAAKC,IAAA;EACLC,SAAA,EAAWC,UAAA;EACXC,IAAA,GAAO;EACPC,KAAA;EACAC,OAAA,EAASC,WAAA;EACTC,QAAA;EACAC,WAAA,GAAc;EACdC,cAAA;EACAC,QAAA;EACAC,MAAA;EACAC,IAAA;EACAC,OAAA,GAAU;EACVC,aAAA;EACAC,gBAAA;EACAC,QAAA,GAAW;EACXC,OAAA;EACAC,QAAA;EACAC,KAAA;EACAC,MAAA;EACAC,WAAA;EACAC,YAAA;EACA,GAAGC;AACL,GAAe;EACb,MAAM;IAAE5B,MAAA;IAAQ6B;EAAY,IAAI1D,sBAAA,CAAuB8B,UAAA,EAAYC,GAAG;EACtE,MAAM4B,SAAA,GAAYC,OAAA,CAAQF,WAAW,KAAK,OAAO7B,MAAA,KAAW;EAC5D,MAAMgC,SAAA,GAAYf,IAAA,IAAQ,SAAS/C,eAAA,CAAgB+C,IAAI,KAAK,OAAOA,IAAA,KAAS;EAC5E,MAAMgB,QAAA,GAAWjB,MAAA,IAAUgB,SAAA;EAC3B,MAAM/C,SAAA,GAAYC,aAAA,KAAkBsB,IAAA,IAAQwB,SAAA,GAAY,UAAU;EAClE,MAAMtB,OAAA,GAAUE,QAAA,GAAW,UAAWD,WAAA,IAAe;EAErD,MAAM,CAACuB,MAAA,EAAQC,SAAS,IAAItE,QAAA,CAAsB,MAAOiE,SAAA,GAAY,YAAY,OAAQ;EACzFlE,SAAA,CAAU,MAAM;IACduE,SAAA,CAAUL,SAAA,GAAY,YAAY,OAAO;EAC3C,GAAG,CAACA,SAAA,EAAWD,WAAW,CAAC;EAE3B,MAAMO,UAAA,GAAazE,WAAA,CAChB0E,KAAA,IAA6D;IAC5DF,SAAA,CAAU,QAAQ;IAClB9C,MAAA,GAASgD,KAAK;EAChB,GACA,CAAChD,MAAM,CACT;EACA,MAAMiD,WAAA,GAAc3E,WAAA,CACjB4E,KAAA,IAA6D;IAC5DJ,SAAA,CAAU,OAAO;IACjB/C,OAAA,GAAUmD,KAAK;EACjB,GACA,CAACnD,OAAO,CACV;EAEA,IAAI,CAAC0C,SAAA,IAAa,CAACG,QAAA,IAAYlB,QAAA,IAAY,QAAQ,CAACP,IAAA,IAAQS,IAAA,IAAQ,MAAM;IACxE,OAAO;EACT;EAEA,OACE,eAAA7C,GAAA,CAACJ,UAAA;IACCK,GAAA;IACAmC,IAAA;IACAQ,MAAA,EAAQiB,QAAA;IACRf,OAAA;IACAC,aAAA;IACAC,gBAAA;IACAH,IAAA;IACAO,KAAA;IACAC,MAAA;IACAC,WAAA;IACAC,YAAA;IACA1C,SAAA;IACAE,cAAA;IACAmC,OAAA;IACAC,QAAA;IACAO,SAAA;IACAI,MAAA;IACArB,WAAA;IACAC,cAAA;IACAC,QAAA;IACC,GAAGa,KAAA;IAEHY,QAAA,EAAAV,SAAA,IAAaI,MAAA,KAAW,UACvB,eAAA9D,GAAA,CAACL,YAAA;MACCM,GAAA;MACAK,WAAA;MACA2C,QAAA;MACAoB,aAAA,EAAe7B,QAAA,GAAW,SAAS;MACnCF,OAAA;MACAzB,SAAA;MACAE,cAAA;MACAC,OAAA,EAASkD,WAAA;MACTjD,MAAA,EAAQ+C,UAAA;MACR9C,SAAA;MACAC,WAAA;MACAG,UAAA;MACAG,cAAA;MACAY,KAAA;MACAP,GAAA,EAAK2B,WAAA;MACL1B,MAAA;MACC,GAAGlC,cAAA,CAAe;QACjBuC,IAAA;QACAwB,SAAA;QACAR,KAAA;QACAC,MAAA;QACAC,WAAA;QACAzC,SAAA;QACAE;MACF,CAAC;IAAA,CACH,IACE;EAAA,CACN;AAEJ","ignoreList":[]}