@tamagui/avatar 2.7.7 → 3.0.0-beta.1091.1

package/dist/jsx/Avatar.native.js

@@ -7,40 +7,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");
@@ -51,134 +44,105 @@ var import_image = require("@tamagui/image");
 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;
-}
 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 === "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/jsx/Avatar.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__create","Object","create","__defProp","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__getProtoOf","getPrototypeOf","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toESM","mod","isNodeMode","__esModule","value","__toCommonJS","Avatar_exports","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","_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"],"sources":["../../src/Avatar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Avatar.native.js","names":[],"sources":["jsx/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);\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 === \"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/jsx/index.js

@@ -1,2 +1 @@
-export * from "./Avatar.mjs";
-//# sourceMappingURL=index.js.map
+export * from "./Avatar.mjs"

package/dist/jsx/index.mjs

@@ -1,2 +1 @@
-export * from "./Avatar.mjs";
-//# sourceMappingURL=index.mjs.map
+export * from "./Avatar.mjs"

package/dist/jsx/index.native.cjs

@@ -0,0 +1,20 @@
+"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/jsx/index.native.js

@@ -5,19 +5,18 @@ 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/jsx/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":[],"sources":["jsx/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/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/avatar",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1091.1",
+  "license": "MIT",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -34,18 +35,18 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/core": "2.7.7",
-    "@tamagui/create-context": "2.7.7",
-    "@tamagui/helpers": "2.7.7",
-    "@tamagui/image": "2.7.7",
-    "@tamagui/shapes": "2.7.7",
-    "@tamagui/stacks": "2.7.7",
-    "@tamagui/text": "2.7.7"
+    "@tamagui/core": "3.0.0-beta.1091.1",
+    "@tamagui/create-context": "3.0.0-beta.1091.1",
+    "@tamagui/helpers": "3.0.0-beta.1091.1",
+    "@tamagui/image": "3.0.0-beta.1091.1",
+    "@tamagui/shapes": "3.0.0-beta.1091.1",
+    "@tamagui/stacks": "3.0.0-beta.1091.1",
+    "@tamagui/text": "3.0.0-beta.1091.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
-    "react": ">=19",
-    "react-native": "0.83.2"
+    "@tamagui/build": "3.0.0-beta.1091.1",
+    "react": "19.2.3",
+    "react-native": "0.86.2"
   },
   "peerDependencies": {
     "react": ">=19"

package/src/Avatar.tsx

@@ -1,7 +1,7 @@
 // forked from radix https://github.com/radix-ui/primitives/blob/main/packages/react/avatar/src/Avatar.tsx
 
 import type { GetProps, SizeTokens, TamaguiElement } from '@tamagui/core'
-import { styled } from '@tamagui/core'
+import { createStyledHOC, styled, createRefComponent } from '@tamagui/core'
 import type { Scope } from '@tamagui/create-context'
 import { createContextScope } from '@tamagui/create-context'
 import { withStaticProperties } from '@tamagui/helpers'
@@ -19,7 +19,8 @@ const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)
 type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
 
 type AvatarContextValue = {
-  size: SizeTokens
+  // mirrors the frame's own size prop; nothing reads it for shape math anymore
+  size: AvatarProps['size'] | true
   imageLoadingStatus: ImageLoadingStatus
   onImageLoadingStatusChange(status: ImageLoadingStatus): void
 }
@@ -37,7 +38,7 @@ type AvatarImageProps = Partial<ImageProps> & {
   onLoadingStatusChange?: (status: ImageLoadingStatus) => void
 }
 
-const AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(
+const AvatarImage = createRefComponent<TamaguiElement, AvatarImageProps>(
   (props: ScopedProps<AvatarImageProps>, forwardedRef) => {
     const {
       __scopeAvatar,
@@ -74,7 +75,7 @@ const AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(
     }
 
     return (
-      <YStack fullscreen zIndex={1}>
+      <YStack position="absolute" inset={0} zIndex={1}>
         <Image
           position="absolute"
           top={0}
@@ -120,35 +121,37 @@ AvatarImage.displayName = IMAGE_NAME
 const FALLBACK_NAME = 'AvatarFallback'
 
 export const AvatarFallbackFrame = styled(YStack, {
-  name: FALLBACK_NAME,
+  displayName: FALLBACK_NAME,
   position: 'absolute',
-  fullscreen: true,
+  inset: 0,
   zIndex: 0,
 })
 
 type AvatarFallbackExtraProps = {
-  delayMs?: number
+  /** The delay in milliseconds before the fallback renders. */
+  delay?: number
 }
 type AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & AvatarFallbackExtraProps
 
-const AvatarFallback = AvatarFallbackFrame.styleable<
-  ScopedProps<AvatarFallbackExtraProps>
->((props, forwardedRef) => {
-  const { __scopeAvatar, delayMs, ...fallbackProps } = props
-  const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar)
-  const [canRender, setCanRender] = React.useState(delayMs === undefined)
-
-  React.useEffect(() => {
-    if (delayMs !== undefined) {
-      const timerId = setTimeout(() => setCanRender(true), delayMs)
-      return () => clearTimeout(timerId)
-    }
-  }, [delayMs])
+const AvatarFallback = createStyledHOC(
+  AvatarFallbackFrame,
+  (props: ScopedProps<AvatarFallbackExtraProps>, forwardedRef) => {
+    const { __scopeAvatar, delay, ...fallbackProps } = props
+    const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar)
+    const [canRender, setCanRender] = React.useState(delay === undefined)
 
-  return canRender && context.imageLoadingStatus !== 'loaded' ? (
-    <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />
-  ) : null
-})
+    React.useEffect(() => {
+      if (delay !== undefined) {
+        const timerId = setTimeout(() => setCanRender(true), delay)
+        return () => clearTimeout(timerId)
+      }
+    }, [delay])
+
+    return canRender && context.imageLoadingStatus !== 'loaded' ? (
+      <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />
+    ) : null
+  }
+)
 
 AvatarFallback.displayName = FALLBACK_NAME
 
@@ -157,7 +160,7 @@ AvatarFallback.displayName = FALLBACK_NAME
  * -----------------------------------------------------------------------------------------------*/
 
 export const AvatarFrame = styled(Square, {
-  name: AVATAR_NAME,
+  displayName: AVATAR_NAME,
   position: 'relative',
   overflow: 'hidden',
 })
@@ -170,19 +173,19 @@ type AvatarProps = GetProps<typeof AvatarFrame>
  *
  * @example
  * ```tsx
- * <Avatar circular size="$10">
+ * <Avatar circular size="10">
  *  <Avatar.Image
  *    aria-label="Cam"
  *    src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
  *  />
- *  <Avatar.Fallback backgroundColor="$blue10" />
+ *  <Avatar.Fallback backgroundColor="blue10" />
  * </Avatar>
  * ```
  */
 const Avatar = withStaticProperties(
-  React.forwardRef<TamaguiElement, AvatarProps>(
+  createRefComponent<TamaguiElement, AvatarProps>(
     (props: ScopedProps<AvatarProps>, forwardedRef) => {
-      const { __scopeAvatar, size = '$true', ...avatarProps } = props
+      const { __scopeAvatar, size = true, ...avatarProps } = props
       const [imageLoadingStatus, setImageLoadingStatus] =
         React.useState<ImageLoadingStatus>('idle')
       return (