@tamagui/avatar 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/Avatar.native.js

@@ -1,5 +1,6 @@
 "use strict";
 
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,40 +8,33 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	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;
+	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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Avatar_exports = {};
 __export(Avatar_exports, {
-  Avatar: () => Avatar,
-  AvatarFallback: () => AvatarFallback,
-  AvatarFallbackFrame: () => AvatarFallbackFrame,
-  AvatarFrame: () => AvatarFrame,
-  AvatarImage: () => AvatarImage,
-  createAvatarScope: () => createAvatarScope
+	Avatar: () => Avatar,
+	AvatarFallback: () => AvatarFallback,
+	AvatarFallbackFrame: () => AvatarFallbackFrame,
+	AvatarFrame: () => AvatarFrame,
+	AvatarImage: () => AvatarImage,
+	createAvatarScope: () => createAvatarScope
 });
 module.exports = __toCommonJS(Avatar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -52,133 +46,108 @@ var import_shapes = require("@tamagui/shapes");
 var import_stacks = require("@tamagui/stacks");
 var React = __toESM(require("react"), 1);
 function _type_of(obj) {
-  "@swc/helpers - typeof";
-
-  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+	"@swc/helpers - typeof";
+	return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
 var AVATAR_NAME = "Avatar";
 var [createAvatarContext, createAvatarScope] = (0, import_create_context.createContextScope)(AVATAR_NAME);
 var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
 var IMAGE_NAME = "AvatarImage";
-var AvatarImage = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    __scopeAvatar,
-    src,
-    source,
-    onLoadingStatusChange = function () {},
-    ...imageProps
-  } = props;
-  var context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
-  var [status, setStatus] = React.useState("idle");
-  var resolvedSrc = src || (source && (typeof source === "undefined" ? "undefined" : _type_of(source)) === "object" && "uri" in source ? source.uri : source);
-  React.useEffect(function () {
-    if (!resolvedSrc) {
-      setStatus("error");
-    } else {
-      setStatus("idle");
-    }
-  }, [resolvedSrc]);
-  React.useEffect(function () {
-    onLoadingStatusChange(status);
-    context.onImageLoadingStatusChange(status);
-  }, [status]);
-  if (!resolvedSrc) {
-    return null;
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
-    fullscreen: true,
-    zIndex: 1,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_image.Image, {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      objectFit: "cover",
-      // fill the frame. previously the image was sized to
-      // getShapeSize(context.size) — but that resolves a numeric `size`
-      // (e.g. <Avatar size={16} />) as a size-TOKEN index (tokens.size[16]),
-      // so it got the token-scale value (~224px) instead of 16px, blowing
-      // the image far past its frame; object-fit:cover then showed a
-      // blurry mis-cropped corner. the frame already owns the size, so the
-      // image just fills it — correct for numeric and token sizes alike.
-      width: "100%",
-      height: "100%",
-      ...imageProps,
-      // @ts-ignore
-      ref: forwardedRef,
-      // @ts-ignore
-      src: resolvedSrc,
-      // onLoadStart={() => {
-      //   // setStatus('loading')
-      // }}
-      onError: function () {
-        setStatus("error");
-      },
-      onLoad: function () {
-        setStatus("loaded");
-      }
-    })
-  });
+var AvatarImage = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeAvatar, src, source, onLoadingStatusChange = function() {}, ...imageProps } = props;
+	var context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
+	var [status, setStatus] = React.useState("idle");
+	var resolvedSrc = src || (source && (typeof source === "undefined" ? "undefined" : _type_of(source)) === "object" && "uri" in source ? source.uri : source);
+	React.useEffect(function() {
+		if (!resolvedSrc) {
+			setStatus("error");
+		} else {
+			setStatus("idle");
+		}
+	}, [resolvedSrc]);
+	React.useEffect(function() {
+		onLoadingStatusChange(status);
+		context.onImageLoadingStatusChange(status);
+	}, [status]);
+	if (!resolvedSrc) {
+		return null;
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
+		position: "absolute",
+		inset: 0,
+		zIndex: 1,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.Image, {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			objectFit: "cover",
+			width: "100%",
+			height: "100%",
+			...imageProps,
+			ref: forwardedRef,
+			src: resolvedSrc,
+			onError: function() {
+				setStatus("error");
+			},
+			onLoad: function() {
+				setStatus("loaded");
+			}
+		})
+	});
 });
 AvatarImage.displayName = IMAGE_NAME;
 var FALLBACK_NAME = "AvatarFallback";
 var AvatarFallbackFrame = (0, import_core.styled)(import_stacks.YStack, {
-  name: FALLBACK_NAME,
-  position: "absolute",
-  fullscreen: true,
-  zIndex: 0
+	displayName: FALLBACK_NAME,
+	position: "absolute",
+	inset: 0,
+	zIndex: 0
 });
-var AvatarFallback = AvatarFallbackFrame.styleable(function (props, forwardedRef) {
-  var {
-    __scopeAvatar,
-    delayMs,
-    ...fallbackProps
-  } = props;
-  var context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
-  var [canRender, setCanRender] = React.useState(delayMs === void 0);
-  React.useEffect(function () {
-    if (delayMs !== void 0) {
-      var timerId = setTimeout(function () {
-        return setCanRender(true);
-      }, delayMs);
-      return function () {
-        return clearTimeout(timerId);
-      };
-    }
-  }, [delayMs]);
-  return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarFallbackFrame, {
-    ...fallbackProps,
-    ref: forwardedRef
-  }) : null;
+var AvatarFallback = (0, import_core.createStyledHOC)(AvatarFallbackFrame, function(props, forwardedRef) {
+	var { __scopeAvatar, delay, ...fallbackProps } = props;
+	var context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
+	var [canRender, setCanRender] = React.useState(delay === void 0);
+	React.useEffect(function() {
+		if (delay !== void 0) {
+			var timerId = setTimeout(function() {
+				return setCanRender(true);
+			}, delay);
+			return function() {
+				return clearTimeout(timerId);
+			};
+		}
+	}, [delay]);
+	return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallbackFrame, {
+		...fallbackProps,
+		ref: forwardedRef
+	}) : null;
 });
 AvatarFallback.displayName = FALLBACK_NAME;
 var AvatarFrame = (0, import_core.styled)(import_shapes.Square, {
-  name: AVATAR_NAME,
-  position: "relative",
-  overflow: "hidden"
+	displayName: AVATAR_NAME,
+	position: "relative",
+	overflow: "hidden"
 });
-var Avatar = (0, import_helpers.withStaticProperties)(/* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    __scopeAvatar,
-    size = "$true",
-    ...avatarProps
-  } = props;
-  var [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarProvider, {
-    size,
-    scope: __scopeAvatar,
-    imageLoadingStatus,
-    onImageLoadingStatusChange: setImageLoadingStatus,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarFrame, {
-      size,
-      ...avatarProps,
-      ref: forwardedRef
-    })
-  });
+var Avatar = (0, import_helpers.withStaticProperties)((0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeAvatar, size = true, ...avatarProps } = props;
+	var [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarProvider, {
+		size,
+		scope: __scopeAvatar,
+		imageLoadingStatus,
+		onImageLoadingStatusChange: setImageLoadingStatus,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFrame, {
+			size,
+			...avatarProps,
+			ref: forwardedRef
+		})
+	});
 }), {
-  Image: AvatarImage,
-  Fallback: AvatarFallback
+	Image: AvatarImage,
+	Fallback: AvatarFallback
 });
 Avatar.displayName = AVATAR_NAME;
+
 //# sourceMappingURL=Avatar.native.js.map

package/dist/cjs/Avatar.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Avatar_exports","__export","Avatar","AvatarFallback","AvatarFallbackFrame","AvatarFrame","AvatarImage","createAvatarScope","module","exports","import_jsx_runtime","require","import_core","import_create_context","import_helpers","import_image","import_shapes","import_stacks","React","__toESM","_type_of","obj","Symbol","constructor","AVATAR_NAME","createAvatarContext","createContextScope","AvatarProvider","useAvatarContext","IMAGE_NAME","forwardRef","props","forwardedRef","__scopeAvatar","src","source","onLoadingStatusChange","imageProps","context","status","setStatus","useState","resolvedSrc","uri","useEffect","onImageLoadingStatusChange","jsx","YStack","fullscreen","zIndex","children","Image","position","top","left","right","bottom","objectFit","width","height","ref","onError","onLoad","displayName","FALLBACK_NAME","styled","name","styleable","delayMs","fallbackProps","canRender","setCanRender","timerId","setTimeout","clearTimeout","imageLoadingStatus","Square","overflow"],"sources":["../../src/Avatar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Avatar.native.js","names":[],"sources":["cjs/Avatar.native.js"],"sourcesContent":["\"use strict\";\nvar __create = Object.create;\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __getProtoOf = Object.getPrototypeOf;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(\n  // If the importer is in node compatibility mode or this is not an ESM\n  // file that has been converted to a CommonJS file using a Babel-\n  // compatible transform (i.e. \"__esModule\" has not been set), then set\n  // \"default\" to the CommonJS \"module.exports\" for node compatibility.\n  isNodeMode || !mod || !mod.__esModule ? __defProp(target, \"default\", { value: mod, enumerable: true }) : target,\n  mod\n));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar Avatar_exports = {};\n__export(Avatar_exports, {\n  Avatar: () => Avatar,\n  AvatarFallback: () => AvatarFallback,\n  AvatarFallbackFrame: () => AvatarFallbackFrame,\n  AvatarFrame: () => AvatarFrame,\n  AvatarImage: () => AvatarImage,\n  createAvatarScope: () => createAvatarScope\n});\nmodule.exports = __toCommonJS(Avatar_exports);\nvar import_jsx_runtime = require(\"react/jsx-runtime\");\nvar import_core = require(\"@tamagui/core\");\nvar import_create_context = require(\"@tamagui/create-context\");\nvar import_helpers = require(\"@tamagui/helpers\");\nvar import_image = require(\"@tamagui/image\");\nvar import_shapes = require(\"@tamagui/shapes\");\nvar import_stacks = require(\"@tamagui/stacks\");\nvar React = __toESM(require(\"react\"), 1);\nfunction _type_of(obj) {\n  \"@swc/helpers - typeof\";\n  return obj && typeof Symbol !== \"undefined\" && obj.constructor === Symbol ? \"symbol\" : typeof obj;\n}\nvar AVATAR_NAME = \"Avatar\";\nvar [createAvatarContext, createAvatarScope] = (0, import_create_context.createContextScope)(AVATAR_NAME);\nvar [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);\nvar IMAGE_NAME = \"AvatarImage\";\nvar AvatarImage = (0, import_core.createRefComponent)(function(props, forwardedRef) {\n  var { __scopeAvatar, src, source, onLoadingStatusChange = function() {\n  }, ...imageProps } = props;\n  var context = useAvatarContext(IMAGE_NAME, __scopeAvatar);\n  var [status, setStatus] = React.useState(\"idle\");\n  var resolvedSrc = src || (source && (typeof source === \"undefined\" ? \"undefined\" : _type_of(source)) === \"object\" && \"uri\" in source ? source.uri : source);\n  React.useEffect(function() {\n    if (!resolvedSrc) {\n      setStatus(\"error\");\n    } else {\n      setStatus(\"idle\");\n    }\n  }, [\n    resolvedSrc\n  ]);\n  React.useEffect(function() {\n    onLoadingStatusChange(status);\n    context.onImageLoadingStatusChange(status);\n  }, [\n    status\n  ]);\n  if (!resolvedSrc) {\n    return null;\n  }\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {\n    position: \"absolute\",\n    inset: 0,\n    zIndex: 1,\n    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.Image, {\n      position: \"absolute\",\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      objectFit: \"cover\",\n      // fill the frame. previously the image was sized to\n      // getShapeSize(context.size) — but that resolves a numeric `size`\n      // (e.g. <Avatar size={16} />) as a size-TOKEN index (tokens.size[16]),\n      // so it got the token-scale value (~224px) instead of 16px, blowing\n      // the image far past its frame; object-fit:cover then showed a\n      // blurry mis-cropped corner. the frame already owns the size, so the\n      // image just fills it — correct for numeric and token sizes alike.\n      width: \"100%\",\n      height: \"100%\",\n      ...imageProps,\n      // @ts-ignore\n      ref: forwardedRef,\n      // @ts-ignore\n      src: resolvedSrc,\n      // onLoadStart={() => {\n      //   // setStatus('loading')\n      // }}\n      onError: function() {\n        setStatus(\"error\");\n      },\n      onLoad: function() {\n        setStatus(\"loaded\");\n      }\n    })\n  });\n});\nAvatarImage.displayName = IMAGE_NAME;\nvar FALLBACK_NAME = \"AvatarFallback\";\nvar AvatarFallbackFrame = (0, import_core.styled)(import_stacks.YStack, {\n  displayName: FALLBACK_NAME,\n  position: \"absolute\",\n  inset: 0,\n  zIndex: 0\n});\nvar AvatarFallback = (0, import_core.createStyledHOC)(AvatarFallbackFrame, function(props, forwardedRef) {\n  var { __scopeAvatar, delay, ...fallbackProps } = props;\n  var context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);\n  var [canRender, setCanRender] = React.useState(delay === void 0);\n  React.useEffect(function() {\n    if (delay !== void 0) {\n      var timerId = setTimeout(function() {\n        return setCanRender(true);\n      }, delay);\n      return function() {\n        return clearTimeout(timerId);\n      };\n    }\n  }, [\n    delay\n  ]);\n  return canRender && context.imageLoadingStatus !== \"loaded\" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallbackFrame, {\n    ...fallbackProps,\n    ref: forwardedRef\n  }) : null;\n});\nAvatarFallback.displayName = FALLBACK_NAME;\nvar AvatarFrame = (0, import_core.styled)(import_shapes.Square, {\n  displayName: AVATAR_NAME,\n  position: \"relative\",\n  overflow: \"hidden\"\n});\nvar Avatar = (0, import_helpers.withStaticProperties)((0, import_core.createRefComponent)(function(props, forwardedRef) {\n  var { __scopeAvatar, size = true, ...avatarProps } = props;\n  var [imageLoadingStatus, setImageLoadingStatus] = React.useState(\"idle\");\n  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarProvider, {\n    size,\n    scope: __scopeAvatar,\n    imageLoadingStatus,\n    onImageLoadingStatusChange: setImageLoadingStatus,\n    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFrame, {\n      size,\n      ...avatarProps,\n      ref: forwardedRef\n    })\n  });\n}), {\n  Image: AvatarImage,\n  Fallback: AvatarFallback\n});\nAvatar.displayName = AVATAR_NAME;\n//# sourceMappingURL=Avatar.js.map\n"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -1,20 +1,19 @@
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 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;
+	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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("./Avatar.cjs"), module.exports);
+__reExport(index_exports, require("./Avatar.cjs"), module.exports);

package/dist/cjs/index.native.cjs

@@ -0,0 +1,21 @@
+"use strict";
+
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./Avatar.native.js"), module.exports);

package/dist/cjs/index.native.js

@@ -1,23 +1,23 @@
 "use strict";
 
+
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 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;
+	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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("./Avatar.native.js"), module.exports);
+
 //# sourceMappingURL=index.native.js.map

package/dist/cjs/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","index_exports","module","exports"],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,aAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAP,YAAc,CAAAK,aAAA","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":[],"sources":["cjs/index.native.js"],"sourcesContent":["\"use strict\";\nvar __defProp = Object.defineProperty;\nvar __getOwnPropDesc = Object.getOwnPropertyDescriptor;\nvar __getOwnPropNames = Object.getOwnPropertyNames;\nvar __hasOwnProp = Object.prototype.hasOwnProperty;\nvar __copyProps = (to, from, except, desc) => {\n  if (from && typeof from === \"object\" || typeof from === \"function\") {\n    for (let key of __getOwnPropNames(from))\n      if (!__hasOwnProp.call(to, key) && key !== except)\n        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });\n  }\n  return to;\n};\nvar __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \"default\"), secondTarget && __copyProps(secondTarget, mod, \"default\"));\nvar __toCommonJS = (mod) => __copyProps(__defProp({}, \"__esModule\", { value: true }), mod);\nvar index_exports = {};\nmodule.exports = __toCommonJS(index_exports);\n__reExport(index_exports, require(\"./Avatar\"), module.exports);\n//# sourceMappingURL=index.js.map\n"],"mappings":";;;;AACA,IAAI,YAAY,OAAO;AACvB,IAAI,mBAAmB,OAAO;AAC9B,IAAI,oBAAoB,OAAO;AAC/B,IAAI,eAAe,OAAO,UAAU;AACpC,IAAI,eAAe,IAAI,MAAM,QAAQ,SAAS;CAC5C,IAAI,QAAQ,OAAO,SAAS,YAAY,OAAO,SAAS,YAAY;EAClE,KAAK,IAAI,OAAO,kBAAkB,IAAI,GACpC,IAAI,CAAC,aAAa,KAAK,IAAI,GAAG,KAAK,QAAQ,QACzC,UAAU,IAAI,KAAK;GAAE,WAAW,KAAK;GAAM,YAAY,EAAE,OAAO,iBAAiB,MAAM,GAAG,MAAM,KAAK;EAAW,CAAC;CACvH;CACA,OAAO;AACT;AACA,IAAI,cAAc,QAAQ,KAAK,kBAAkB,YAAY,QAAQ,KAAK,SAAS,GAAG,gBAAgB,YAAY,cAAc,KAAK,SAAS;AAC9I,IAAI,gBAAgB,QAAQ,YAAY,UAAU,CAAC,GAAG,cAAc,EAAE,OAAO,KAAK,CAAC,GAAG,GAAG;AACzF,IAAI,gBAAgB,CAAC;AACrB,OAAO,UAAU,aAAa,aAAa;AAC3C,WAAW,eAAe,QAAQ,oBAAU,GAAG,OAAO,OAAO"}

package/dist/esm/Avatar.mjs

@@ -1,4 +1,4 @@
-import { styled } from "@tamagui/core";
+import { createRefComponent, createStyledHOC, styled } from "@tamagui/core";
 import { createContextScope } from "@tamagui/create-context";
 import { withStaticProperties } from "@tamagui/helpers";
 import { Image } from "@tamagui/image";
@@ -6,114 +6,103 @@ import { Square } from "@tamagui/shapes";
 import { YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+
 const AVATAR_NAME = "Avatar";
 const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
 const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
 const IMAGE_NAME = "AvatarImage";
-const AvatarImage = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAvatar,
-    src,
-    source,
-    onLoadingStatusChange = () => {},
-    ...imageProps
-  } = props;
-  const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
-  const [status, setStatus] = React.useState("idle");
-  const resolvedSrc = src || (source && typeof source === "object" && "uri" in source ? source.uri : source);
-  React.useEffect(() => {
-    if (!resolvedSrc) {
-      setStatus("error");
-    } else {
-      setStatus("idle");
-    }
-  }, [resolvedSrc]);
-  React.useEffect(() => {
-    onLoadingStatusChange(status);
-    context.onImageLoadingStatusChange(status);
-  }, [status]);
-  if (!resolvedSrc) {
-    return null;
-  }
-  return /* @__PURE__ */jsx(YStack, {
-    fullscreen: true,
-    zIndex: 1,
-    children: /* @__PURE__ */jsx(Image, {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      objectFit: "cover",
-      width: "100%",
-      height: "100%",
-      ...imageProps,
-      ref: forwardedRef,
-      src: resolvedSrc,
-      onError: () => {
-        setStatus("error");
-      },
-      onLoad: () => {
-        setStatus("loaded");
-      }
-    })
-  });
+const AvatarImage = createRefComponent((props, forwardedRef) => {
+	const { __scopeAvatar, src, source, onLoadingStatusChange = () => {}, ...imageProps } = props;
+	const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
+	const [status, setStatus] = React.useState("idle");
+	const resolvedSrc = src || (source && typeof source === "object" && "uri" in source ? source.uri : source);
+	React.useEffect(() => {
+		if (!resolvedSrc) {
+			setStatus("error");
+		} else {
+			setStatus("idle");
+		}
+	}, [resolvedSrc]);
+	React.useEffect(() => {
+		onLoadingStatusChange(status);
+		context.onImageLoadingStatusChange(status);
+	}, [status]);
+	if (!resolvedSrc) {
+		return null;
+	}
+	return /* @__PURE__ */ jsx(YStack, {
+		position: "absolute",
+		inset: 0,
+		zIndex: 1,
+		children: /* @__PURE__ */ jsx(Image, {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			objectFit: "cover",
+			width: "100%",
+			height: "100%",
+			...imageProps,
+			ref: forwardedRef,
+			src: resolvedSrc,
+			onError: () => {
+				setStatus("error");
+			},
+			onLoad: () => {
+				setStatus("loaded");
+			}
+		})
+	});
 });
 AvatarImage.displayName = IMAGE_NAME;
 const FALLBACK_NAME = "AvatarFallback";
 const AvatarFallbackFrame = styled(YStack, {
-  name: FALLBACK_NAME,
-  position: "absolute",
-  fullscreen: true,
-  zIndex: 0
+	displayName: FALLBACK_NAME,
+	position: "absolute",
+	inset: 0,
+	zIndex: 0
 });
-const AvatarFallback = AvatarFallbackFrame.styleable((props, forwardedRef) => {
-  const {
-    __scopeAvatar,
-    delayMs,
-    ...fallbackProps
-  } = props;
-  const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
-  const [canRender, setCanRender] = React.useState(delayMs === void 0);
-  React.useEffect(() => {
-    if (delayMs !== void 0) {
-      const timerId = setTimeout(() => setCanRender(true), delayMs);
-      return () => clearTimeout(timerId);
-    }
-  }, [delayMs]);
-  return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */jsx(AvatarFallbackFrame, {
-    ...fallbackProps,
-    ref: forwardedRef
-  }) : null;
+const AvatarFallback = createStyledHOC(AvatarFallbackFrame, (props, forwardedRef) => {
+	const { __scopeAvatar, delay, ...fallbackProps } = props;
+	const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
+	const [canRender, setCanRender] = React.useState(delay === void 0);
+	React.useEffect(() => {
+		if (delay !== void 0) {
+			const timerId = setTimeout(() => setCanRender(true), delay);
+			return () => clearTimeout(timerId);
+		}
+	}, [delay]);
+	return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ jsx(AvatarFallbackFrame, {
+		...fallbackProps,
+		ref: forwardedRef
+	}) : null;
 });
 AvatarFallback.displayName = FALLBACK_NAME;
 const AvatarFrame = styled(Square, {
-  name: AVATAR_NAME,
-  position: "relative",
-  overflow: "hidden"
+	displayName: AVATAR_NAME,
+	position: "relative",
+	overflow: "hidden"
 });
-const Avatar = withStaticProperties(React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAvatar,
-    size = "$true",
-    ...avatarProps
-  } = props;
-  const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
-  return /* @__PURE__ */jsx(AvatarProvider, {
-    size,
-    scope: __scopeAvatar,
-    imageLoadingStatus,
-    onImageLoadingStatusChange: setImageLoadingStatus,
-    children: /* @__PURE__ */jsx(AvatarFrame, {
-      size,
-      ...avatarProps,
-      ref: forwardedRef
-    })
-  });
+const Avatar = withStaticProperties(createRefComponent((props, forwardedRef) => {
+	const { __scopeAvatar, size = true, ...avatarProps } = props;
+	const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
+	return /* @__PURE__ */ jsx(AvatarProvider, {
+		size,
+		scope: __scopeAvatar,
+		imageLoadingStatus,
+		onImageLoadingStatusChange: setImageLoadingStatus,
+		children: /* @__PURE__ */ jsx(AvatarFrame, {
+			size,
+			...avatarProps,
+			ref: forwardedRef
+		})
+	});
 }), {
-  Image: AvatarImage,
-  Fallback: AvatarFallback
+	Image: AvatarImage,
+	Fallback: AvatarFallback
 });
 Avatar.displayName = AVATAR_NAME;
+
 export { Avatar, AvatarFallback, AvatarFallbackFrame, AvatarFrame, AvatarImage, createAvatarScope };
 //# sourceMappingURL=Avatar.mjs.map