@tamagui/avatar 1.0.1-beta.151 → 1.0.1-beta.152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/Avatar.js +82 -67
  2. package/dist/cjs/Avatar.js.map +1 -1
  3. package/dist/esm/Avatar.js +78 -66
  4. package/dist/esm/Avatar.js.map +1 -1
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/jsx/Avatar.js +51 -42
  7. package/dist/jsx/Avatar.js.map +1 -1
  8. package/dist/jsx/index.js.map +1 -1
  9. package/package.json +7 -7
package/dist/cjs/Avatar.js CHANGED
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
17
17
  }
18
18
  return to;
19
19
  };
20
- 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));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
21
24
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
22
25
  var Avatar_exports = {};
23
26
  __export(Avatar_exports, {
@@ -29,6 +32,7 @@ __export(Avatar_exports, {
29
32
  createAvatarScope: () => createAvatarScope
30
33
  });
31
34
  module.exports = __toCommonJS(Avatar_exports);
35
+ var import_jsx_runtime = require("react/jsx-runtime");
32
36
  var import_core = require("@tamagui/core");
33
37
  var import_create_context = require("@tamagui/create-context");
34
38
  var import_image = require("@tamagui/image");
@@ -39,41 +43,44 @@ const AVATAR_NAME = "Avatar";
39
43
  const [createAvatarContext, createAvatarScope] = (0, import_create_context.createContextScope)(AVATAR_NAME);
40
44
  const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
41
45
  const IMAGE_NAME = "AvatarImage";
42
- const AvatarImage = React.forwardRef((props, forwardedRef) => {
43
- var _a;
44
- const { __scopeAvatar, src, onLoadingStatusChange = () => {
45
- }, ...imageProps } = props;
46
- const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
47
- const [status, setStatus] = React.useState("idle");
48
- const extras = (0, import_core.getVariantExtras)(props);
49
- const shapeSize = (0, import_core.getVariableValue)((_a = (0, import_shapes.getShapeSize)(context.size, extras)) == null ? void 0 : _a.width);
50
- React.useEffect(() => {
51
- setStatus("idle");
52
- }, [JSON.stringify(src)]);
53
- React.useEffect(() => {
54
- onLoadingStatusChange(status);
55
- context.onImageLoadingStatusChange(status);
56
- }, [status]);
57
- return /* @__PURE__ */ React.createElement(import_stacks.YStack, {
58
- fullscreen: true,
59
- zIndex: 1
60
- }, /* @__PURE__ */ React.createElement(import_image.Image, {
61
- fullscreen: true,
62
- ...typeof shapeSize === "number" && !isNaN(shapeSize) && {
63
- width: shapeSize,
64
- height: shapeSize
65
- },
66
- ...imageProps,
67
- ref: forwardedRef,
68
- src,
69
- onError: () => {
70
- setStatus("error");
71
- },
72
- onLoad: () => {
73
- setStatus("loaded");
74
- }
75
- }));
76
- });
46
+ const AvatarImage = React.forwardRef(
47
+ (props, forwardedRef) => {
48
+ var _a;
49
+ const { __scopeAvatar, src, onLoadingStatusChange = () => {
50
+ }, ...imageProps } = props;
51
+ const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
52
+ const [status, setStatus] = React.useState("idle");
53
+ const extras = (0, import_core.getVariantExtras)(props);
54
+ const shapeSize = (0, import_core.getVariableValue)((_a = (0, import_shapes.getShapeSize)(context.size, extras)) == null ? void 0 : _a.width);
55
+ React.useEffect(() => {
56
+ setStatus("idle");
57
+ }, [JSON.stringify(src)]);
58
+ React.useEffect(() => {
59
+ onLoadingStatusChange(status);
60
+ context.onImageLoadingStatusChange(status);
61
+ }, [status]);
62
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
63
+ fullscreen: true,
64
+ zIndex: 1,
65
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.Image, {
66
+ fullscreen: true,
67
+ ...typeof shapeSize === "number" && !isNaN(shapeSize) && {
68
+ width: shapeSize,
69
+ height: shapeSize
70
+ },
71
+ ...imageProps,
72
+ ref: forwardedRef,
73
+ src,
74
+ onError: () => {
75
+ setStatus("error");
76
+ },
77
+ onLoad: () => {
78
+ setStatus("loaded");
79
+ }
80
+ })
81
+ });
82
+ }
83
+ );
77
84
  AvatarImage.displayName = IMAGE_NAME;
78
85
  const FALLBACK_NAME = "AvatarFallback";
79
86
  const AvatarFallbackFrame = (0, import_core.styled)(import_stacks.YStack, {
@@ -82,44 +89,52 @@ const AvatarFallbackFrame = (0, import_core.styled)(import_stacks.YStack, {
82
89
  fullscreen: true,
83
90
  zIndex: 0
84
91
  });
85
- const AvatarFallback = AvatarFallbackFrame.extractable(React.forwardRef((props, forwardedRef) => {
86
- const { __scopeAvatar, delayMs, ...fallbackProps } = props;
87
- const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
88
- const [canRender, setCanRender] = React.useState(delayMs === void 0);
89
- React.useEffect(() => {
90
- if (delayMs !== void 0) {
91
- const timerId = setTimeout(() => setCanRender(true), delayMs);
92
- return () => clearTimeout(timerId);
92
+ const AvatarFallback = AvatarFallbackFrame.extractable(
93
+ React.forwardRef(
94
+ (props, forwardedRef) => {
95
+ const { __scopeAvatar, delayMs, ...fallbackProps } = props;
96
+ const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
97
+ const [canRender, setCanRender] = React.useState(delayMs === void 0);
98
+ React.useEffect(() => {
99
+ if (delayMs !== void 0) {
100
+ const timerId = setTimeout(() => setCanRender(true), delayMs);
101
+ return () => clearTimeout(timerId);
102
+ }
103
+ }, [delayMs]);
104
+ return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallbackFrame, {
105
+ ...fallbackProps,
106
+ ref: forwardedRef
107
+ }) : null;
93
108
  }
94
- }, [delayMs]);
95
- return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ React.createElement(AvatarFallbackFrame, {
96
- ...fallbackProps,
97
- ref: forwardedRef
98
- }) : null;
99
- }));
109
+ )
110
+ );
100
111
  AvatarFallback.displayName = FALLBACK_NAME;
101
112
  const AvatarFrame = (0, import_core.styled)(import_shapes.Square, {
102
113
  name: AVATAR_NAME,
103
114
  position: "relative",
104
115
  overflow: "hidden"
105
116
  });
106
- const Avatar = (0, import_core.withStaticProperties)(React.forwardRef((props, forwardedRef) => {
107
- const { __scopeAvatar, size = "$4", ...avatarProps } = props;
108
- const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
109
- return /* @__PURE__ */ React.createElement(AvatarProvider, {
110
- size,
111
- scope: __scopeAvatar,
112
- imageLoadingStatus,
113
- onImageLoadingStatusChange: setImageLoadingStatus
114
- }, /* @__PURE__ */ React.createElement(AvatarFrame, {
115
- size,
116
- ...avatarProps,
117
- ref: forwardedRef
118
- }));
119
- }), {
120
- Image: AvatarImage,
121
- Fallback: AvatarFallback
122
- });
117
+ const Avatar = (0, import_core.withStaticProperties)(
118
+ React.forwardRef((props, forwardedRef) => {
119
+ const { __scopeAvatar, size = "$4", ...avatarProps } = props;
120
+ const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
121
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarProvider, {
122
+ size,
123
+ scope: __scopeAvatar,
124
+ imageLoadingStatus,
125
+ onImageLoadingStatusChange: setImageLoadingStatus,
126
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFrame, {
127
+ size,
128
+ ...avatarProps,
129
+ ref: forwardedRef
130
+ })
131
+ });
132
+ }),
133
+ {
134
+ Image: AvatarImage,
135
+ Fallback: AvatarFallback
136
+ }
137
+ );
123
138
  Avatar.displayName = AVATAR_NAME;
124
139
  // Annotate the CommonJS export names for ESM import in node:
125
140
  0 && (module.exports = {
package/dist/cjs/Avatar.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/Avatar.tsx"],
4
4
  "sourcesContent": ["// forked from radix https://github.com/radix-ui/primitives/blob/main/packages/react/avatar/src/Avatar.tsx\n\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n getVariableValue,\n getVariantExtras,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { Image, ImageProps } from '@tamagui/image'\nimport { Square, getShapeSize } from '@tamagui/shapes'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nconst AVATAR_NAME = 'Avatar'\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope }\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\ntype AvatarContextValue = {\n size: SizeTokens\n imageLoadingStatus: ImageLoadingStatus\n onImageLoadingStatusChange(status: ImageLoadingStatus): void\n}\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage'\n\ntype AvatarImageProps = Partial<ImageProps> & {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void\n}\n\nconst AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar)\n const [status, setStatus] = React.useState<ImageLoadingStatus>('idle')\n const extras = getVariantExtras(props)\n const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width) as number\n\n React.useEffect(() => {\n setStatus('idle')\n }, [JSON.stringify(src)])\n\n React.useEffect(() => {\n onLoadingStatusChange(status)\n context.onImageLoadingStatusChange(status)\n }, [status])\n\n return (\n <YStack fullscreen zIndex={1}>\n <Image\n fullscreen\n {...(typeof shapeSize === 'number' &&\n !isNaN(shapeSize) && {\n width: shapeSize,\n height: shapeSize,\n })}\n {...imageProps}\n // @ts-ignore\n ref={forwardedRef}\n // @ts-ignore\n src={src}\n // onLoadStart={() => {\n // // setStatus('loading')\n // }}\n onError={() => {\n setStatus('error')\n }}\n onLoad={() => {\n setStatus('loaded')\n }}\n />\n </YStack>\n )\n }\n)\n\nAvatarImage.displayName = IMAGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback'\n\nexport const AvatarFallbackFrame = styled(YStack, {\n name: FALLBACK_NAME,\n position: 'absolute',\n fullscreen: true,\n zIndex: 0,\n})\n\ntype AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & {\n delayMs?: number\n}\n\nconst AvatarFallback = AvatarFallbackFrame.extractable(\n React.forwardRef<TamaguiElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar)\n const [canRender, setCanRender] = React.useState(delayMs === undefined)\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = setTimeout(() => setCanRender(true), delayMs)\n return () => clearTimeout(timerId)\n }\n }, [delayMs])\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />\n ) : null\n }\n )\n)\n\nAvatarFallback.displayName = FALLBACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nexport const AvatarFrame = styled(Square, {\n name: AVATAR_NAME,\n position: 'relative',\n overflow: 'hidden',\n})\n\ntype AvatarProps = GetProps<typeof AvatarFrame>\n\nconst Avatar = withStaticProperties(\n React.forwardRef<TamaguiElement, AvatarProps>((props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, size = '$4', ...avatarProps } = props\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle')\n return (\n <AvatarProvider\n size={size}\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\n >\n <AvatarFrame size={size} {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n )\n }),\n {\n Image: AvatarImage,\n Fallback: AvatarFallback,\n }\n)\n\nAvatar.displayName = AVATAR_NAME\n\nexport { createAvatarScope, Avatar, AvatarImage, AvatarFallback }\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps }\n"],
5
- "mappings": "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",
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/Avatar.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { jsx } from "react/jsx-runtime";
1
2
  import {
2
3
  getVariableValue,
3
4
  getVariantExtras,
@@ -13,41 +14,44 @@ const AVATAR_NAME = "Avatar";
13
14
  const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
14
15
  const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
15
16
  const IMAGE_NAME = "AvatarImage";
16
- const AvatarImage = React.forwardRef((props, forwardedRef) => {
17
- var _a;
18
- const { __scopeAvatar, src, onLoadingStatusChange = () => {
19
- }, ...imageProps } = props;
20
- const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
21
- const [status, setStatus] = React.useState("idle");
22
- const extras = getVariantExtras(props);
23
- const shapeSize = getVariableValue((_a = getShapeSize(context.size, extras)) == null ? void 0 : _a.width);
24
- React.useEffect(() => {
25
- setStatus("idle");
26
- }, [JSON.stringify(src)]);
27
- React.useEffect(() => {
28
- onLoadingStatusChange(status);
29
- context.onImageLoadingStatusChange(status);
30
- }, [status]);
31
- return /* @__PURE__ */ React.createElement(YStack, {
32
- fullscreen: true,
33
- zIndex: 1
34
- }, /* @__PURE__ */ React.createElement(Image, {
35
- fullscreen: true,
36
- ...typeof shapeSize === "number" && !isNaN(shapeSize) && {
37
- width: shapeSize,
38
- height: shapeSize
39
- },
40
- ...imageProps,
41
- ref: forwardedRef,
42
- src,
43
- onError: () => {
44
- setStatus("error");
45
- },
46
- onLoad: () => {
47
- setStatus("loaded");
48
- }
49
- }));
50
- });
17
+ const AvatarImage = React.forwardRef(
18
+ (props, forwardedRef) => {
19
+ var _a;
20
+ const { __scopeAvatar, src, onLoadingStatusChange = () => {
21
+ }, ...imageProps } = props;
22
+ const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
23
+ const [status, setStatus] = React.useState("idle");
24
+ const extras = getVariantExtras(props);
25
+ const shapeSize = getVariableValue((_a = getShapeSize(context.size, extras)) == null ? void 0 : _a.width);
26
+ React.useEffect(() => {
27
+ setStatus("idle");
28
+ }, [JSON.stringify(src)]);
29
+ React.useEffect(() => {
30
+ onLoadingStatusChange(status);
31
+ context.onImageLoadingStatusChange(status);
32
+ }, [status]);
33
+ return /* @__PURE__ */ jsx(YStack, {
34
+ fullscreen: true,
35
+ zIndex: 1,
36
+ children: /* @__PURE__ */ jsx(Image, {
37
+ fullscreen: true,
38
+ ...typeof shapeSize === "number" && !isNaN(shapeSize) && {
39
+ width: shapeSize,
40
+ height: shapeSize
41
+ },
42
+ ...imageProps,
43
+ ref: forwardedRef,
44
+ src,
45
+ onError: () => {
46
+ setStatus("error");
47
+ },
48
+ onLoad: () => {
49
+ setStatus("loaded");
50
+ }
51
+ })
52
+ });
53
+ }
54
+ );
51
55
  AvatarImage.displayName = IMAGE_NAME;
52
56
  const FALLBACK_NAME = "AvatarFallback";
53
57
  const AvatarFallbackFrame = styled(YStack, {
@@ -56,44 +60,52 @@ const AvatarFallbackFrame = styled(YStack, {
56
60
  fullscreen: true,
57
61
  zIndex: 0
58
62
  });
59
- const AvatarFallback = AvatarFallbackFrame.extractable(React.forwardRef((props, forwardedRef) => {
60
- const { __scopeAvatar, delayMs, ...fallbackProps } = props;
61
- const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
62
- const [canRender, setCanRender] = React.useState(delayMs === void 0);
63
- React.useEffect(() => {
64
- if (delayMs !== void 0) {
65
- const timerId = setTimeout(() => setCanRender(true), delayMs);
66
- return () => clearTimeout(timerId);
63
+ const AvatarFallback = AvatarFallbackFrame.extractable(
64
+ React.forwardRef(
65
+ (props, forwardedRef) => {
66
+ const { __scopeAvatar, delayMs, ...fallbackProps } = props;
67
+ const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
68
+ const [canRender, setCanRender] = React.useState(delayMs === void 0);
69
+ React.useEffect(() => {
70
+ if (delayMs !== void 0) {
71
+ const timerId = setTimeout(() => setCanRender(true), delayMs);
72
+ return () => clearTimeout(timerId);
73
+ }
74
+ }, [delayMs]);
75
+ return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ jsx(AvatarFallbackFrame, {
76
+ ...fallbackProps,
77
+ ref: forwardedRef
78
+ }) : null;
67
79
  }
68
- }, [delayMs]);
69
- return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ React.createElement(AvatarFallbackFrame, {
70
- ...fallbackProps,
71
- ref: forwardedRef
72
- }) : null;
73
- }));
80
+ )
81
+ );
74
82
  AvatarFallback.displayName = FALLBACK_NAME;
75
83
  const AvatarFrame = styled(Square, {
76
84
  name: AVATAR_NAME,
77
85
  position: "relative",
78
86
  overflow: "hidden"
79
87
  });
80
- const Avatar = withStaticProperties(React.forwardRef((props, forwardedRef) => {
81
- const { __scopeAvatar, size = "$4", ...avatarProps } = props;
82
- const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
83
- return /* @__PURE__ */ React.createElement(AvatarProvider, {
84
- size,
85
- scope: __scopeAvatar,
86
- imageLoadingStatus,
87
- onImageLoadingStatusChange: setImageLoadingStatus
88
- }, /* @__PURE__ */ React.createElement(AvatarFrame, {
89
- size,
90
- ...avatarProps,
91
- ref: forwardedRef
92
- }));
93
- }), {
94
- Image: AvatarImage,
95
- Fallback: AvatarFallback
96
- });
88
+ const Avatar = withStaticProperties(
89
+ React.forwardRef((props, forwardedRef) => {
90
+ const { __scopeAvatar, size = "$4", ...avatarProps } = props;
91
+ const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
92
+ return /* @__PURE__ */ jsx(AvatarProvider, {
93
+ size,
94
+ scope: __scopeAvatar,
95
+ imageLoadingStatus,
96
+ onImageLoadingStatusChange: setImageLoadingStatus,
97
+ children: /* @__PURE__ */ jsx(AvatarFrame, {
98
+ size,
99
+ ...avatarProps,
100
+ ref: forwardedRef
101
+ })
102
+ });
103
+ }),
104
+ {
105
+ Image: AvatarImage,
106
+ Fallback: AvatarFallback
107
+ }
108
+ );
97
109
  Avatar.displayName = AVATAR_NAME;
98
110
  export {
99
111
  Avatar,
package/dist/esm/Avatar.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/Avatar.tsx"],
4
4
  "sourcesContent": ["// forked from radix https://github.com/radix-ui/primitives/blob/main/packages/react/avatar/src/Avatar.tsx\n\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n getVariableValue,\n getVariantExtras,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { Image, ImageProps } from '@tamagui/image'\nimport { Square, getShapeSize } from '@tamagui/shapes'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nconst AVATAR_NAME = 'Avatar'\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope }\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\ntype AvatarContextValue = {\n size: SizeTokens\n imageLoadingStatus: ImageLoadingStatus\n onImageLoadingStatusChange(status: ImageLoadingStatus): void\n}\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage'\n\ntype AvatarImageProps = Partial<ImageProps> & {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void\n}\n\nconst AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar)\n const [status, setStatus] = React.useState<ImageLoadingStatus>('idle')\n const extras = getVariantExtras(props)\n const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width) as number\n\n React.useEffect(() => {\n setStatus('idle')\n }, [JSON.stringify(src)])\n\n React.useEffect(() => {\n onLoadingStatusChange(status)\n context.onImageLoadingStatusChange(status)\n }, [status])\n\n return (\n <YStack fullscreen zIndex={1}>\n <Image\n fullscreen\n {...(typeof shapeSize === 'number' &&\n !isNaN(shapeSize) && {\n width: shapeSize,\n height: shapeSize,\n })}\n {...imageProps}\n // @ts-ignore\n ref={forwardedRef}\n // @ts-ignore\n src={src}\n // onLoadStart={() => {\n // // setStatus('loading')\n // }}\n onError={() => {\n setStatus('error')\n }}\n onLoad={() => {\n setStatus('loaded')\n }}\n />\n </YStack>\n )\n }\n)\n\nAvatarImage.displayName = IMAGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback'\n\nexport const AvatarFallbackFrame = styled(YStack, {\n name: FALLBACK_NAME,\n position: 'absolute',\n fullscreen: true,\n zIndex: 0,\n})\n\ntype AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & {\n delayMs?: number\n}\n\nconst AvatarFallback = AvatarFallbackFrame.extractable(\n React.forwardRef<TamaguiElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar)\n const [canRender, setCanRender] = React.useState(delayMs === undefined)\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = setTimeout(() => setCanRender(true), delayMs)\n return () => clearTimeout(timerId)\n }\n }, [delayMs])\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />\n ) : null\n }\n )\n)\n\nAvatarFallback.displayName = FALLBACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nexport const AvatarFrame = styled(Square, {\n name: AVATAR_NAME,\n position: 'relative',\n overflow: 'hidden',\n})\n\ntype AvatarProps = GetProps<typeof AvatarFrame>\n\nconst Avatar = withStaticProperties(\n React.forwardRef<TamaguiElement, AvatarProps>((props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, size = '$4', ...avatarProps } = props\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle')\n return (\n <AvatarProvider\n size={size}\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\n >\n <AvatarFrame size={size} {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n )\n }),\n {\n Image: AvatarImage,\n Fallback: AvatarFallback,\n }\n)\n\nAvatar.displayName = AVATAR_NAME\n\nexport { createAvatarScope, Avatar, AvatarImage, AvatarFallback }\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps }\n"],
5
- "mappings": "AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc;AAGpB,MAAM,CAAC,qBAAqB,qBAAqB,mBAAmB,WAAW;AAU/E,MAAM,CAAC,gBAAgB,oBAAoB,oBAAwC,WAAW;AAM9F,MAAM,aAAa;AAMnB,MAAM,cAAc,MAAM,WACxB,CAAC,OAAsC,iBAAiB;AA3C1D;AA4CI,QAAM,EAAE,eAAe,KAAK,wBAAwB,MAAM;AAAA,EAAC,MAAM,eAAe;AAChF,QAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,QAAM,CAAC,QAAQ,aAAa,MAAM,SAA6B,MAAM;AACrE,QAAM,SAAS,iBAAiB,KAAK;AACrC,QAAM,YAAY,iBAAiB,mBAAa,QAAQ,MAAM,MAAM,MAAjC,mBAAoC,KAAK;AAE5E,QAAM,UAAU,MAAM;AACpB,cAAU,MAAM;AAAA,EAClB,GAAG,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC;AAExB,QAAM,UAAU,MAAM;AACpB,0BAAsB,MAAM;AAC5B,YAAQ,2BAA2B,MAAM;AAAA,EAC3C,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,oCAAC;AAAA,IAAO,YAAU;AAAA,IAAC,QAAQ;AAAA,KACzB,oCAAC;AAAA,IACC,YAAU;AAAA,IACT,GAAI,OAAO,cAAc,YACxB,CAAC,MAAM,SAAS,KAAK;AAAA,MACnB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACD,GAAG;AAAA,IAEJ,KAAK;AAAA,IAEL;AAAA,IAIA,SAAS,MAAM;AACb,gBAAU,OAAO;AAAA,IACnB;AAAA,IACA,QAAQ,MAAM;AACZ,gBAAU,QAAQ;AAAA,IACpB;AAAA,GACF,CACF;AAEJ,CACF;AAEA,YAAY,cAAc;AAM1B,MAAM,gBAAgB;AAEf,MAAM,sBAAsB,OAAO,QAAQ;AAAA,EAChD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAMD,MAAM,iBAAiB,oBAAoB,YACzC,MAAM,WACJ,CAAC,OAAyC,iBAAiB;AACzD,QAAM,EAAE,eAAe,YAAY,kBAAkB;AACrD,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,YAAY,MAAS;AAEtE,QAAM,UAAU,MAAM;AACpB,QAAI,YAAY,QAAW;AACzB,YAAM,UAAU,WAAW,MAAM,aAAa,IAAI,GAAG,OAAO;AAC5D,aAAO,MAAM,aAAa,OAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,aAAa,QAAQ,uBAAuB,WACjD,oCAAC;AAAA,IAAqB,GAAG;AAAA,IAAe,KAAK;AAAA,GAAc,IACzD;AACN,CACF,CACF;AAEA,eAAe,cAAc;AAMtB,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;AAID,MAAM,SAAS,qBACb,MAAM,WAAwC,CAAC,OAAiC,iBAAiB;AAC/F,QAAM,EAAE,eAAe,OAAO,SAAS,gBAAgB;AACvD,QAAM,CAAC,oBAAoB,yBAAyB,MAAM,SAA6B,MAAM;AAC7F,SACE,oCAAC;AAAA,IACC;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,4BAA4B;AAAA,KAE5B,oCAAC;AAAA,IAAY;AAAA,IAAa,GAAG;AAAA,IAAa,KAAK;AAAA,GAAc,CAC/D;AAEJ,CAAC,GACD;AAAA,EACE,OAAO;AAAA,EACP,UAAU;AACZ,CACF;AAEA,OAAO,cAAc;",
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts"],
4
4
  "sourcesContent": ["export * from './Avatar'\n"],
5
- "mappings": "AAAA;",
5
+ "mappings": "AAAA,cAAc;",
6
6
  "names": []
7
7
  }
package/dist/jsx/Avatar.js CHANGED
@@ -13,29 +13,31 @@ const AVATAR_NAME = "Avatar";
13
13
  const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
14
14
  const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
15
15
  const IMAGE_NAME = "AvatarImage";
16
- const AvatarImage = React.forwardRef((props, forwardedRef) => {
17
- const { __scopeAvatar, src, onLoadingStatusChange = () => {
18
- }, ...imageProps } = props;
19
- const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
20
- const [status, setStatus] = React.useState("idle");
21
- const extras = getVariantExtras(props);
22
- const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width);
23
- React.useEffect(() => {
24
- setStatus("idle");
25
- }, [JSON.stringify(src)]);
26
- React.useEffect(() => {
27
- onLoadingStatusChange(status);
28
- context.onImageLoadingStatusChange(status);
29
- }, [status]);
30
- return <YStack fullscreen zIndex={1}><Image fullscreen {...typeof shapeSize === "number" && !isNaN(shapeSize) && {
31
- width: shapeSize,
32
- height: shapeSize
33
- }} {...imageProps} ref={forwardedRef} src={src} onError={() => {
34
- setStatus("error");
35
- }} onLoad={() => {
36
- setStatus("loaded");
37
- }} /></YStack>;
38
- });
16
+ const AvatarImage = React.forwardRef(
17
+ (props, forwardedRef) => {
18
+ const { __scopeAvatar, src, onLoadingStatusChange = () => {
19
+ }, ...imageProps } = props;
20
+ const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
21
+ const [status, setStatus] = React.useState("idle");
22
+ const extras = getVariantExtras(props);
23
+ const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width);
24
+ React.useEffect(() => {
25
+ setStatus("idle");
26
+ }, [JSON.stringify(src)]);
27
+ React.useEffect(() => {
28
+ onLoadingStatusChange(status);
29
+ context.onImageLoadingStatusChange(status);
30
+ }, [status]);
31
+ return <YStack fullscreen zIndex={1}><Image fullscreen {...typeof shapeSize === "number" && !isNaN(shapeSize) && {
32
+ width: shapeSize,
33
+ height: shapeSize
34
+ }} {...imageProps} ref={forwardedRef} src={src} onError={() => {
35
+ setStatus("error");
36
+ }} onLoad={() => {
37
+ setStatus("loaded");
38
+ }} /></YStack>;
39
+ }
40
+ );
39
41
  AvatarImage.displayName = IMAGE_NAME;
40
42
  const FALLBACK_NAME = "AvatarFallback";
41
43
  const AvatarFallbackFrame = styled(YStack, {
@@ -44,32 +46,39 @@ const AvatarFallbackFrame = styled(YStack, {
44
46
  fullscreen: true,
45
47
  zIndex: 0
46
48
  });
47
- const AvatarFallback = AvatarFallbackFrame.extractable(React.forwardRef((props, forwardedRef) => {
48
- const { __scopeAvatar, delayMs, ...fallbackProps } = props;
49
- const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
50
- const [canRender, setCanRender] = React.useState(delayMs === void 0);
51
- React.useEffect(() => {
52
- if (delayMs !== void 0) {
53
- const timerId = setTimeout(() => setCanRender(true), delayMs);
54
- return () => clearTimeout(timerId);
49
+ const AvatarFallback = AvatarFallbackFrame.extractable(
50
+ React.forwardRef(
51
+ (props, forwardedRef) => {
52
+ const { __scopeAvatar, delayMs, ...fallbackProps } = props;
53
+ const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
54
+ const [canRender, setCanRender] = React.useState(delayMs === void 0);
55
+ React.useEffect(() => {
56
+ if (delayMs !== void 0) {
57
+ const timerId = setTimeout(() => setCanRender(true), delayMs);
58
+ return () => clearTimeout(timerId);
59
+ }
60
+ }, [delayMs]);
61
+ return canRender && context.imageLoadingStatus !== "loaded" ? <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} /> : null;
55
62
  }
56
- }, [delayMs]);
57
- return canRender && context.imageLoadingStatus !== "loaded" ? <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} /> : null;
58
- }));
63
+ )
64
+ );
59
65
  AvatarFallback.displayName = FALLBACK_NAME;
60
66
  const AvatarFrame = styled(Square, {
61
67
  name: AVATAR_NAME,
62
68
  position: "relative",
63
69
  overflow: "hidden"
64
70
  });
65
- const Avatar = withStaticProperties(React.forwardRef((props, forwardedRef) => {
66
- const { __scopeAvatar, size = "$4", ...avatarProps } = props;
67
- const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
68
- return <AvatarProvider size={size} scope={__scopeAvatar} imageLoadingStatus={imageLoadingStatus} onImageLoadingStatusChange={setImageLoadingStatus}><AvatarFrame size={size} {...avatarProps} ref={forwardedRef} /></AvatarProvider>;
69
- }), {
70
- Image: AvatarImage,
71
- Fallback: AvatarFallback
72
- });
71
+ const Avatar = withStaticProperties(
72
+ React.forwardRef((props, forwardedRef) => {
73
+ const { __scopeAvatar, size = "$4", ...avatarProps } = props;
74
+ const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
75
+ return <AvatarProvider size={size} scope={__scopeAvatar} imageLoadingStatus={imageLoadingStatus} onImageLoadingStatusChange={setImageLoadingStatus}><AvatarFrame size={size} {...avatarProps} ref={forwardedRef} /></AvatarProvider>;
76
+ }),
77
+ {
78
+ Image: AvatarImage,
79
+ Fallback: AvatarFallback
80
+ }
81
+ );
73
82
  Avatar.displayName = AVATAR_NAME;
74
83
  export {
75
84
  Avatar,
package/dist/jsx/Avatar.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/Avatar.tsx"],
4
4
  "sourcesContent": ["// forked from radix https://github.com/radix-ui/primitives/blob/main/packages/react/avatar/src/Avatar.tsx\n\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n getVariableValue,\n getVariantExtras,\n styled,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { Image, ImageProps } from '@tamagui/image'\nimport { Square, getShapeSize } from '@tamagui/shapes'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nconst AVATAR_NAME = 'Avatar'\n\ntype ScopedProps<P> = P & { __scopeAvatar?: Scope }\nconst [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)\n\ntype ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\ntype AvatarContextValue = {\n size: SizeTokens\n imageLoadingStatus: ImageLoadingStatus\n onImageLoadingStatusChange(status: ImageLoadingStatus): void\n}\n\nconst [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME)\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarImage\n * -----------------------------------------------------------------------------------------------*/\n\nconst IMAGE_NAME = 'AvatarImage'\n\ntype AvatarImageProps = Partial<ImageProps> & {\n onLoadingStatusChange?: (status: ImageLoadingStatus) => void\n}\n\nconst AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(\n (props: ScopedProps<AvatarImageProps>, forwardedRef) => {\n const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props\n const context = useAvatarContext(IMAGE_NAME, __scopeAvatar)\n const [status, setStatus] = React.useState<ImageLoadingStatus>('idle')\n const extras = getVariantExtras(props)\n const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width) as number\n\n React.useEffect(() => {\n setStatus('idle')\n }, [JSON.stringify(src)])\n\n React.useEffect(() => {\n onLoadingStatusChange(status)\n context.onImageLoadingStatusChange(status)\n }, [status])\n\n return (\n <YStack fullscreen zIndex={1}>\n <Image\n fullscreen\n {...(typeof shapeSize === 'number' &&\n !isNaN(shapeSize) && {\n width: shapeSize,\n height: shapeSize,\n })}\n {...imageProps}\n // @ts-ignore\n ref={forwardedRef}\n // @ts-ignore\n src={src}\n // onLoadStart={() => {\n // // setStatus('loading')\n // }}\n onError={() => {\n setStatus('error')\n }}\n onLoad={() => {\n setStatus('loaded')\n }}\n />\n </YStack>\n )\n }\n)\n\nAvatarImage.displayName = IMAGE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * AvatarFallback\n * -----------------------------------------------------------------------------------------------*/\n\nconst FALLBACK_NAME = 'AvatarFallback'\n\nexport const AvatarFallbackFrame = styled(YStack, {\n name: FALLBACK_NAME,\n position: 'absolute',\n fullscreen: true,\n zIndex: 0,\n})\n\ntype AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & {\n delayMs?: number\n}\n\nconst AvatarFallback = AvatarFallbackFrame.extractable(\n React.forwardRef<TamaguiElement, AvatarFallbackProps>(\n (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {\n const { __scopeAvatar, delayMs, ...fallbackProps } = props\n const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar)\n const [canRender, setCanRender] = React.useState(delayMs === undefined)\n\n React.useEffect(() => {\n if (delayMs !== undefined) {\n const timerId = setTimeout(() => setCanRender(true), delayMs)\n return () => clearTimeout(timerId)\n }\n }, [delayMs])\n\n return canRender && context.imageLoadingStatus !== 'loaded' ? (\n <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />\n ) : null\n }\n )\n)\n\nAvatarFallback.displayName = FALLBACK_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Avatar\n * -----------------------------------------------------------------------------------------------*/\n\nexport const AvatarFrame = styled(Square, {\n name: AVATAR_NAME,\n position: 'relative',\n overflow: 'hidden',\n})\n\ntype AvatarProps = GetProps<typeof AvatarFrame>\n\nconst Avatar = withStaticProperties(\n React.forwardRef<TamaguiElement, AvatarProps>((props: ScopedProps<AvatarProps>, forwardedRef) => {\n const { __scopeAvatar, size = '$4', ...avatarProps } = props\n const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle')\n return (\n <AvatarProvider\n size={size}\n scope={__scopeAvatar}\n imageLoadingStatus={imageLoadingStatus}\n onImageLoadingStatusChange={setImageLoadingStatus}\n >\n <AvatarFrame size={size} {...avatarProps} ref={forwardedRef} />\n </AvatarProvider>\n )\n }),\n {\n Image: AvatarImage,\n Fallback: AvatarFallback,\n }\n)\n\nAvatar.displayName = AVATAR_NAME\n\nexport { createAvatarScope, Avatar, AvatarImage, AvatarFallback }\nexport type { AvatarProps, AvatarImageProps, AvatarFallbackProps }\n"],
5
- "mappings": "AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc;AAGpB,MAAM,CAAC,qBAAqB,qBAAqB,mBAAmB,WAAW;AAU/E,MAAM,CAAC,gBAAgB,oBAAoB,oBAAwC,WAAW;AAM9F,MAAM,aAAa;AAMnB,MAAM,cAAc,MAAM,WACxB,CAAC,OAAsC,iBAAiB;AACtD,QAAM,EAAE,eAAe,KAAK,wBAAwB,MAAM;AAAA,EAAC,MAAM,eAAe;AAChF,QAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,QAAM,CAAC,QAAQ,aAAa,MAAM,SAA6B,MAAM;AACrE,QAAM,SAAS,iBAAiB,KAAK;AACrC,QAAM,YAAY,iBAAiB,aAAa,QAAQ,MAAM,MAAM,GAAG,KAAK;AAE5E,QAAM,UAAU,MAAM;AACpB,cAAU,MAAM;AAAA,EAClB,GAAG,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC;AAExB,QAAM,UAAU,MAAM;AACpB,0BAAsB,MAAM;AAC5B,YAAQ,2BAA2B,MAAM;AAAA,EAC3C,GAAG,CAAC,MAAM,CAAC;AAEX,SACE,CAAC,OAAO,WAAW,QAAQ,GACzB,CAAC,MACC,eACK,OAAO,cAAc,YACxB,CAAC,MAAM,SAAS,KAAK;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV,OACE,YAEJ,KAAK,cAEL,KAAK,KAIL,SAAS,MAAM;AACb,cAAU,OAAO;AAAA,EACnB,GACA,QAAQ,MAAM;AACZ,cAAU,QAAQ;AAAA,EACpB,GACF,EACF,EAvBC;AAyBL,CACF;AAEA,YAAY,cAAc;AAM1B,MAAM,gBAAgB;AAEf,MAAM,sBAAsB,OAAO,QAAQ;AAAA,EAChD,MAAM;AAAA,EACN,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAMD,MAAM,iBAAiB,oBAAoB,YACzC,MAAM,WACJ,CAAC,OAAyC,iBAAiB;AACzD,QAAM,EAAE,eAAe,YAAY,kBAAkB;AACrD,QAAM,UAAU,iBAAiB,eAAe,aAAa;AAC7D,QAAM,CAAC,WAAW,gBAAgB,MAAM,SAAS,YAAY,MAAS;AAEtE,QAAM,UAAU,MAAM;AACpB,QAAI,YAAY,QAAW;AACzB,YAAM,UAAU,WAAW,MAAM,aAAa,IAAI,GAAG,OAAO;AAC5D,aAAO,MAAM,aAAa,OAAO;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO,aAAa,QAAQ,uBAAuB,WACjD,CAAC,wBAAwB,eAAe,KAAK,cAAc,KACzD;AACN,CACF,CACF;AAEA,eAAe,cAAc;AAMtB,MAAM,cAAc,OAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;AAID,MAAM,SAAS,qBACb,MAAM,WAAwC,CAAC,OAAiC,iBAAiB;AAC/F,QAAM,EAAE,eAAe,OAAO,SAAS,gBAAgB;AACvD,QAAM,CAAC,oBAAoB,yBAAyB,MAAM,SAA6B,MAAM;AAC7F,SACE,CAAC,eACC,MAAM,MACN,OAAO,eACP,oBAAoB,oBACpB,4BAA4B,uBAE5B,CAAC,YAAY,MAAM,UAAU,aAAa,KAAK,cAAc,EAC/D,EAPC;AASL,CAAC,GACD;AAAA,EACE,OAAO;AAAA,EACP,UAAU;AACZ,CACF;AAEA,OAAO,cAAc;",
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/jsx/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts"],
4
4
  "sourcesContent": ["export * from './Avatar'\n"],
5
- "mappings": "AAAA;",
5
+ "mappings": "AAAA,cAAc;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/avatar",
3
- "version": "1.0.1-beta.151",
3
+ "version": "1.0.1-beta.152",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -30,11 +30,11 @@
30
30
  }
31
31
  },
32
32
  "dependencies": {
33
- "@tamagui/core": "^1.0.1-beta.151",
34
- "@tamagui/image": "^1.0.1-beta.151",
35
- "@tamagui/shapes": "^1.0.1-beta.151",
36
- "@tamagui/text": "^1.0.1-beta.151",
37
- "@tamagui/use-event": "^1.0.1-beta.151"
33
+ "@tamagui/core": "^1.0.1-beta.152",
34
+ "@tamagui/image": "^1.0.1-beta.152",
35
+ "@tamagui/shapes": "^1.0.1-beta.152",
36
+ "@tamagui/text": "^1.0.1-beta.152",
37
+ "@tamagui/use-event": "^1.0.1-beta.152"
38
38
  },
39
39
  "peerDependencies": {
40
40
  "react": "*",
@@ -42,7 +42,7 @@
42
42
  "react-native": "*"
43
43
  },
44
44
  "devDependencies": {
45
- "@tamagui/build": "^1.0.1-beta.151",
45
+ "@tamagui/build": "^1.0.1-beta.152",
46
46
  "@types/react-dom": "^18.0.3",
47
47
  "@types/react-native": "^0.69.2",
48
48
  "react": "*",