@tamagui/avatar 2.7.7 → 3.0.0-beta.1093.1

package/dist/cjs/Avatar.cjs

@@ -5,40 +5,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_core = require("@tamagui/core");
@@ -53,108 +46,95 @@ const AVATAR_NAME = "Avatar";
 const [createAvatarContext, createAvatarScope] = (0, import_create_context.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__ */(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",
-      width: "100%",
-      height: "100%",
-      ...imageProps,
-      ref: forwardedRef,
-      src: resolvedSrc,
-      onError: () => {
-        setStatus("error");
-      },
-      onLoad: () => {
-        setStatus("loaded");
-      }
-    })
-  });
+const AvatarImage = (0, import_core.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__ */ (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: () => {
+				setStatus("error");
+			},
+			onLoad: () => {
+				setStatus("loaded");
+			}
+		})
+	});
 });
 AvatarImage.displayName = IMAGE_NAME;
 const FALLBACK_NAME = "AvatarFallback";
 const 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
 });
-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__ */(0, import_jsx_runtime.jsx)(AvatarFallbackFrame, {
-    ...fallbackProps,
-    ref: forwardedRef
-  }) : null;
+const AvatarFallback = (0, import_core.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__ */ (0, import_jsx_runtime.jsx)(AvatarFallbackFrame, {
+		...fallbackProps,
+		ref: forwardedRef
+	}) : null;
 });
 AvatarFallback.displayName = FALLBACK_NAME;
 const AvatarFrame = (0, import_core.styled)(import_shapes.Square, {
-  name: AVATAR_NAME,
-  position: "relative",
-  overflow: "hidden"
+	displayName: AVATAR_NAME,
+	position: "relative",
+	overflow: "hidden"
 });
-const Avatar = (0, import_helpers.withStaticProperties)(React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAvatar,
-    size = "$true",
-    ...avatarProps
-  } = props;
-  const [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
-    })
-  });
+const Avatar = (0, import_helpers.withStaticProperties)((0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { __scopeAvatar, size = true, ...avatarProps } = props;
+	const [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;
+Avatar.displayName = AVATAR_NAME;

package/dist/cjs/Avatar.native.cjs

@@ -0,0 +1,146 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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
+	});
+};
+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 __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 Avatar_exports = {};
+__export(Avatar_exports, {
+	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");
+var import_core = require("@tamagui/core");
+var import_create_context = require("@tamagui/create-context");
+var import_helpers = require("@tamagui/helpers");
+var import_image = require("@tamagui/image");
+var import_shapes = require("@tamagui/shapes");
+var import_stacks = require("@tamagui/stacks");
+var React = __toESM(require("react"), 1);
+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 = (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, {
+	displayName: FALLBACK_NAME,
+	position: "absolute",
+	inset: 0,
+	zIndex: 0
+});
+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, {
+	displayName: AVATAR_NAME,
+	position: "relative",
+	overflow: "hidden"
+});
+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
+});
+Avatar.displayName = AVATAR_NAME;