@tamagui/avatar 1.0.1-beta.100

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 (19) hide show
  1. package/dist/cjs/Avatar.js +159 -0
  2. package/dist/cjs/Avatar.js.map +7 -0
  3. package/dist/cjs/index.js +18 -0
  4. package/dist/cjs/index.js.map +7 -0
  5. package/dist/esm/Avatar.js +135 -0
  6. package/dist/esm/Avatar.js.map +7 -0
  7. package/dist/esm/index.js +2 -0
  8. package/dist/esm/index.js.map +7 -0
  9. package/dist/jsx/Avatar.js +83 -0
  10. package/dist/jsx/Avatar.js.map +7 -0
  11. package/dist/jsx/index.js +2 -0
  12. package/dist/jsx/index.js.map +7 -0
  13. package/package.json +46 -0
  14. package/src/Avatar.tsx +167 -0
  15. package/src/index.ts +1 -0
  16. package/types/Avatar.d.ts +373 -0
  17. package/types/Avatar.d.ts.map +1 -0
  18. package/types/index.d.ts +2 -0
  19. package/types/index.d.ts.map +1 -0
package/dist/cjs/Avatar.js ADDED
@@ -0,0 +1,159 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __objRest = (source, exclude) => {
25
+ var target = {};
26
+ for (var prop in source)
27
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
28
+ target[prop] = source[prop];
29
+ if (source != null && __getOwnPropSymbols)
30
+ for (var prop of __getOwnPropSymbols(source)) {
31
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
32
+ target[prop] = source[prop];
33
+ }
34
+ return target;
35
+ };
36
+ var __export = (target, all) => {
37
+ for (var name in all)
38
+ __defProp(target, name, { get: all[name], enumerable: true });
39
+ };
40
+ var __copyProps = (to, from, except, desc) => {
41
+ if (from && typeof from === "object" || typeof from === "function") {
42
+ for (let key of __getOwnPropNames(from))
43
+ if (!__hasOwnProp.call(to, key) && key !== except)
44
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
45
+ }
46
+ return to;
47
+ };
48
+ 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));
49
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
50
+ var Avatar_exports = {};
51
+ __export(Avatar_exports, {
52
+ Avatar: () => Avatar,
53
+ AvatarFallback: () => AvatarFallback,
54
+ AvatarFallbackFrame: () => AvatarFallbackFrame,
55
+ AvatarFrame: () => AvatarFrame,
56
+ AvatarImage: () => AvatarImage,
57
+ createAvatarScope: () => createAvatarScope
58
+ });
59
+ module.exports = __toCommonJS(Avatar_exports);
60
+ var import_core = require("@tamagui/core");
61
+ var import_create_context = require("@tamagui/create-context");
62
+ var import_image = require("@tamagui/image");
63
+ var import_shapes = require("@tamagui/shapes");
64
+ var import_stacks = require("@tamagui/stacks");
65
+ var React = __toESM(require("react"));
66
+ const AVATAR_NAME = "Avatar";
67
+ const [createAvatarContext, createAvatarScope] = (0, import_create_context.createContextScope)(AVATAR_NAME);
68
+ const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
69
+ const IMAGE_NAME = "AvatarImage";
70
+ const AvatarImage = React.forwardRef((props, forwardedRef) => {
71
+ var _b;
72
+ const _a = props, { __scopeAvatar, src, onLoadingStatusChange = () => {
73
+ } } = _a, imageProps = __objRest(_a, ["__scopeAvatar", "src", "onLoadingStatusChange"]);
74
+ const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
75
+ const [status, setStatus] = React.useState("idle");
76
+ const extras = (0, import_core.getVariantExtras)(props);
77
+ const shapeSize = (0, import_core.getVariableValue)((_b = (0, import_shapes.getShapeSize)(context.size, extras)) == null ? void 0 : _b.width);
78
+ React.useEffect(() => {
79
+ setStatus("idle");
80
+ }, [JSON.stringify(src)]);
81
+ React.useEffect(() => {
82
+ onLoadingStatusChange(status);
83
+ context.onImageLoadingStatusChange(status);
84
+ }, [status]);
85
+ return /* @__PURE__ */ React.createElement(import_stacks.YStack, {
86
+ fullscreen: true,
87
+ zIndex: 1
88
+ }, /* @__PURE__ */ React.createElement(import_image.Image, __spreadProps(__spreadValues(__spreadValues({
89
+ fullscreen: true
90
+ }, typeof shapeSize === "number" && !isNaN(shapeSize) && {
91
+ width: shapeSize,
92
+ height: shapeSize
93
+ }), imageProps), {
94
+ ref: forwardedRef,
95
+ src,
96
+ onError: () => {
97
+ setStatus("error");
98
+ },
99
+ onLoad: () => {
100
+ setStatus("loaded");
101
+ }
102
+ })));
103
+ });
104
+ AvatarImage.displayName = IMAGE_NAME;
105
+ const FALLBACK_NAME = "AvatarFallback";
106
+ const AvatarFallbackFrame = (0, import_core.styled)(import_stacks.YStack, {
107
+ name: FALLBACK_NAME,
108
+ position: "absolute",
109
+ fullscreen: true,
110
+ zIndex: 0
111
+ });
112
+ const AvatarFallback = AvatarFallbackFrame.extractable(React.forwardRef((props, forwardedRef) => {
113
+ const _a = props, { __scopeAvatar, delayMs } = _a, fallbackProps = __objRest(_a, ["__scopeAvatar", "delayMs"]);
114
+ const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
115
+ const [canRender, setCanRender] = React.useState(delayMs === void 0);
116
+ React.useEffect(() => {
117
+ if (delayMs !== void 0) {
118
+ const timerId = setTimeout(() => setCanRender(true), delayMs);
119
+ return () => clearTimeout(timerId);
120
+ }
121
+ }, [delayMs]);
122
+ return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ React.createElement(AvatarFallbackFrame, __spreadProps(__spreadValues({}, fallbackProps), {
123
+ ref: forwardedRef
124
+ })) : null;
125
+ }));
126
+ AvatarFallback.displayName = FALLBACK_NAME;
127
+ const AvatarFrame = (0, import_core.styled)(import_shapes.Square, {
128
+ name: AVATAR_NAME,
129
+ position: "relative",
130
+ overflow: "hidden"
131
+ });
132
+ const Avatar = (0, import_core.withStaticProperties)(React.forwardRef((props, forwardedRef) => {
133
+ const _a = props, { __scopeAvatar, size = "$4" } = _a, avatarProps = __objRest(_a, ["__scopeAvatar", "size"]);
134
+ const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
135
+ return /* @__PURE__ */ React.createElement(AvatarProvider, {
136
+ size,
137
+ scope: __scopeAvatar,
138
+ imageLoadingStatus,
139
+ onImageLoadingStatusChange: setImageLoadingStatus
140
+ }, /* @__PURE__ */ React.createElement(AvatarFrame, __spreadProps(__spreadValues({
141
+ size
142
+ }, avatarProps), {
143
+ ref: forwardedRef
144
+ })));
145
+ }), {
146
+ Image: AvatarImage,
147
+ Fallback: AvatarFallback
148
+ });
149
+ Avatar.displayName = AVATAR_NAME;
150
+ // Annotate the CommonJS export names for ESM import in node:
151
+ 0 && (module.exports = {
152
+ Avatar,
153
+ AvatarFallback,
154
+ AvatarFallbackFrame,
155
+ AvatarFrame,
156
+ AvatarImage,
157
+ createAvatarScope
158
+ });
159
+ //# sourceMappingURL=Avatar.js.map
package/dist/cjs/Avatar.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Avatar.tsx"],
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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",
6
+ "names": []
7
+ }
package/dist/cjs/index.js ADDED
@@ -0,0 +1,18 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from === "object" || typeof from === "function") {
7
+ for (let key of __getOwnPropNames(from))
8
+ if (!__hasOwnProp.call(to, key) && key !== except)
9
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
+ }
11
+ return to;
12
+ };
13
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
14
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+ var src_exports = {};
16
+ module.exports = __toCommonJS(src_exports);
17
+ __reExport(src_exports, require("./Avatar"), module.exports);
18
+ //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.ts"],
4
+ "sourcesContent": ["export * from './Avatar'\n"],
5
+ "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;",
6
+ "names": []
7
+ }
package/dist/esm/Avatar.js ADDED
@@ -0,0 +1,135 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ var __objRest = (source, exclude) => {
21
+ var target = {};
22
+ for (var prop in source)
23
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
+ target[prop] = source[prop];
25
+ if (source != null && __getOwnPropSymbols)
26
+ for (var prop of __getOwnPropSymbols(source)) {
27
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
+ target[prop] = source[prop];
29
+ }
30
+ return target;
31
+ };
32
+ import {
33
+ getVariableValue,
34
+ getVariantExtras,
35
+ styled,
36
+ withStaticProperties
37
+ } from "@tamagui/core";
38
+ import { createContextScope } from "@tamagui/create-context";
39
+ import { Image } from "@tamagui/image";
40
+ import { Square, getShapeSize } from "@tamagui/shapes";
41
+ import { YStack } from "@tamagui/stacks";
42
+ import * as React from "react";
43
+ const AVATAR_NAME = "Avatar";
44
+ const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
45
+ const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
46
+ const IMAGE_NAME = "AvatarImage";
47
+ const AvatarImage = React.forwardRef((props, forwardedRef) => {
48
+ var _b;
49
+ const _a = props, { __scopeAvatar, src, onLoadingStatusChange = () => {
50
+ } } = _a, imageProps = __objRest(_a, ["__scopeAvatar", "src", "onLoadingStatusChange"]);
51
+ const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
52
+ const [status, setStatus] = React.useState("idle");
53
+ const extras = getVariantExtras(props);
54
+ const shapeSize = getVariableValue((_b = getShapeSize(context.size, extras)) == null ? void 0 : _b.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__ */ React.createElement(YStack, {
63
+ fullscreen: true,
64
+ zIndex: 1
65
+ }, /* @__PURE__ */ React.createElement(Image, __spreadProps(__spreadValues(__spreadValues({
66
+ fullscreen: true
67
+ }, typeof shapeSize === "number" && !isNaN(shapeSize) && {
68
+ width: shapeSize,
69
+ height: shapeSize
70
+ }), imageProps), {
71
+ ref: forwardedRef,
72
+ src,
73
+ onError: () => {
74
+ setStatus("error");
75
+ },
76
+ onLoad: () => {
77
+ setStatus("loaded");
78
+ }
79
+ })));
80
+ });
81
+ AvatarImage.displayName = IMAGE_NAME;
82
+ const FALLBACK_NAME = "AvatarFallback";
83
+ const AvatarFallbackFrame = styled(YStack, {
84
+ name: FALLBACK_NAME,
85
+ position: "absolute",
86
+ fullscreen: true,
87
+ zIndex: 0
88
+ });
89
+ const AvatarFallback = AvatarFallbackFrame.extractable(React.forwardRef((props, forwardedRef) => {
90
+ const _a = props, { __scopeAvatar, delayMs } = _a, fallbackProps = __objRest(_a, ["__scopeAvatar", "delayMs"]);
91
+ const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
92
+ const [canRender, setCanRender] = React.useState(delayMs === void 0);
93
+ React.useEffect(() => {
94
+ if (delayMs !== void 0) {
95
+ const timerId = setTimeout(() => setCanRender(true), delayMs);
96
+ return () => clearTimeout(timerId);
97
+ }
98
+ }, [delayMs]);
99
+ return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ React.createElement(AvatarFallbackFrame, __spreadProps(__spreadValues({}, fallbackProps), {
100
+ ref: forwardedRef
101
+ })) : null;
102
+ }));
103
+ AvatarFallback.displayName = FALLBACK_NAME;
104
+ const AvatarFrame = styled(Square, {
105
+ name: AVATAR_NAME,
106
+ position: "relative",
107
+ overflow: "hidden"
108
+ });
109
+ const Avatar = withStaticProperties(React.forwardRef((props, forwardedRef) => {
110
+ const _a = props, { __scopeAvatar, size = "$4" } = _a, avatarProps = __objRest(_a, ["__scopeAvatar", "size"]);
111
+ const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
112
+ return /* @__PURE__ */ React.createElement(AvatarProvider, {
113
+ size,
114
+ scope: __scopeAvatar,
115
+ imageLoadingStatus,
116
+ onImageLoadingStatusChange: setImageLoadingStatus
117
+ }, /* @__PURE__ */ React.createElement(AvatarFrame, __spreadProps(__spreadValues({
118
+ size
119
+ }, avatarProps), {
120
+ ref: forwardedRef
121
+ })));
122
+ }), {
123
+ Image: AvatarImage,
124
+ Fallback: AvatarFallback
125
+ });
126
+ Avatar.displayName = AVATAR_NAME;
127
+ export {
128
+ Avatar,
129
+ AvatarFallback,
130
+ AvatarFallbackFrame,
131
+ AvatarFrame,
132
+ AvatarImage,
133
+ createAvatarScope
134
+ };
135
+ //# sourceMappingURL=Avatar.js.map
package/dist/esm/Avatar.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Avatar.tsx"],
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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",
6
+ "names": []
7
+ }
package/dist/esm/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./Avatar";
2
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.ts"],
4
+ "sourcesContent": ["export * from './Avatar'\n"],
5
+ "mappings": "AAAA;",
6
+ "names": []
7
+ }
package/dist/jsx/Avatar.js ADDED
@@ -0,0 +1,83 @@
1
+ import {
2
+ getVariableValue,
3
+ getVariantExtras,
4
+ styled,
5
+ withStaticProperties
6
+ } from "@tamagui/core";
7
+ import { createContextScope } from "@tamagui/create-context";
8
+ import { Image } from "@tamagui/image";
9
+ import { Square, getShapeSize } from "@tamagui/shapes";
10
+ import { YStack } from "@tamagui/stacks";
11
+ import * as React from "react";
12
+ const AVATAR_NAME = "Avatar";
13
+ const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
14
+ const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
15
+ 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 <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
+ AvatarImage.displayName = IMAGE_NAME;
41
+ const FALLBACK_NAME = "AvatarFallback";
42
+ const AvatarFallbackFrame = styled(YStack, {
43
+ name: FALLBACK_NAME,
44
+ position: "absolute",
45
+ fullscreen: true,
46
+ zIndex: 0
47
+ });
48
+ const AvatarFallback = AvatarFallbackFrame.extractable(React.forwardRef((props, forwardedRef) => {
49
+ const { __scopeAvatar, delayMs, ...fallbackProps } = props;
50
+ const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
51
+ const [canRender, setCanRender] = React.useState(delayMs === void 0);
52
+ React.useEffect(() => {
53
+ if (delayMs !== void 0) {
54
+ const timerId = setTimeout(() => setCanRender(true), delayMs);
55
+ return () => clearTimeout(timerId);
56
+ }
57
+ }, [delayMs]);
58
+ return canRender && context.imageLoadingStatus !== "loaded" ? <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} /> : null;
59
+ }));
60
+ AvatarFallback.displayName = FALLBACK_NAME;
61
+ const AvatarFrame = styled(Square, {
62
+ name: AVATAR_NAME,
63
+ position: "relative",
64
+ overflow: "hidden"
65
+ });
66
+ const Avatar = withStaticProperties(React.forwardRef((props, forwardedRef) => {
67
+ const { __scopeAvatar, size = "$4", ...avatarProps } = props;
68
+ const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
69
+ return <AvatarProvider size={size} scope={__scopeAvatar} imageLoadingStatus={imageLoadingStatus} onImageLoadingStatusChange={setImageLoadingStatus}><AvatarFrame size={size} {...avatarProps} ref={forwardedRef} /></AvatarProvider>;
70
+ }), {
71
+ Image: AvatarImage,
72
+ Fallback: AvatarFallback
73
+ });
74
+ Avatar.displayName = AVATAR_NAME;
75
+ export {
76
+ Avatar,
77
+ AvatarFallback,
78
+ AvatarFallbackFrame,
79
+ AvatarFrame,
80
+ AvatarImage,
81
+ createAvatarScope
82
+ };
83
+ //# sourceMappingURL=Avatar.js.map
package/dist/jsx/Avatar.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/Avatar.tsx"],
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,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;",
6
+ "names": []
7
+ }
package/dist/jsx/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./Avatar";
2
+ //# sourceMappingURL=index.js.map
package/dist/jsx/index.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/index.ts"],
4
+ "sourcesContent": ["export * from './Avatar'\n"],
5
+ "mappings": "AAAA;",
6
+ "names": []
7
+ }
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@tamagui/avatar",
3
+ "version": "1.0.1-beta.100",
4
+ "sideEffects": [
5
+ "*.css"
6
+ ],
7
+ "source": "src/index.ts",
8
+ "types": "./types/index.d.ts",
9
+ "main": "dist/cjs",
10
+ "module": "dist/esm",
11
+ "module:jsx": "dist/jsx",
12
+ "files": [
13
+ "src",
14
+ "types",
15
+ "dist"
16
+ ],
17
+ "scripts": {
18
+ "build": "tamagui-build",
19
+ "watch": "tamagui-build --watch",
20
+ "clean": "tamagui-build clean",
21
+ "clean:build": "tamagui-build clean:build"
22
+ },
23
+ "dependencies": {
24
+ "@radix-ui/react-use-callback-ref": "^0.1.0",
25
+ "@tamagui/core": "^1.0.1-beta.100",
26
+ "@tamagui/image": "^1.0.1-beta.100",
27
+ "@tamagui/shapes": "^1.0.1-beta.100",
28
+ "@tamagui/text": "^1.0.1-beta.100"
29
+ },
30
+ "peerDependencies": {
31
+ "react": "*",
32
+ "react-dom": "*",
33
+ "react-native": "*"
34
+ },
35
+ "devDependencies": {
36
+ "@tamagui/build": "^1.0.1-beta.100",
37
+ "@types/react-dom": "^18.0.3",
38
+ "@types/react-native": "^0.67.3",
39
+ "react": "*",
40
+ "react-dom": "*",
41
+ "react-native": "*"
42
+ },
43
+ "publishConfig": {
44
+ "access": "public"
45
+ }
46
+ }
package/src/Avatar.tsx ADDED
@@ -0,0 +1,167 @@
1
+ // forked from radix https://github.com/radix-ui/primitives/blob/main/packages/react/avatar/src/Avatar.tsx
2
+
3
+ import {
4
+ GetProps,
5
+ SizeTokens,
6
+ TamaguiElement,
7
+ getVariableValue,
8
+ getVariantExtras,
9
+ styled,
10
+ withStaticProperties,
11
+ } from '@tamagui/core'
12
+ import { Scope, createContextScope } from '@tamagui/create-context'
13
+ import { Image, ImageProps } from '@tamagui/image'
14
+ import { Square, getShapeSize } from '@tamagui/shapes'
15
+ import { YStack } from '@tamagui/stacks'
16
+ import * as React from 'react'
17
+
18
+ const AVATAR_NAME = 'Avatar'
19
+
20
+ type ScopedProps<P> = P & { __scopeAvatar?: Scope }
21
+ const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)
22
+
23
+ type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
24
+
25
+ type AvatarContextValue = {
26
+ size: SizeTokens
27
+ imageLoadingStatus: ImageLoadingStatus
28
+ onImageLoadingStatusChange(status: ImageLoadingStatus): void
29
+ }
30
+
31
+ const [AvatarProvider, useAvatarContext] = createAvatarContext<AvatarContextValue>(AVATAR_NAME)
32
+
33
+ /* -------------------------------------------------------------------------------------------------
34
+ * AvatarImage
35
+ * -----------------------------------------------------------------------------------------------*/
36
+
37
+ const IMAGE_NAME = 'AvatarImage'
38
+
39
+ type AvatarImageProps = Partial<ImageProps> & {
40
+ onLoadingStatusChange?: (status: ImageLoadingStatus) => void
41
+ }
42
+
43
+ const AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(
44
+ (props: ScopedProps<AvatarImageProps>, forwardedRef) => {
45
+ const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props
46
+ const context = useAvatarContext(IMAGE_NAME, __scopeAvatar)
47
+ const [status, setStatus] = React.useState<ImageLoadingStatus>('idle')
48
+ const extras = getVariantExtras(props)
49
+ const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width) as number
50
+
51
+ React.useEffect(() => {
52
+ setStatus('idle')
53
+ }, [JSON.stringify(src)])
54
+
55
+ React.useEffect(() => {
56
+ onLoadingStatusChange(status)
57
+ context.onImageLoadingStatusChange(status)
58
+ }, [status])
59
+
60
+ return (
61
+ <YStack fullscreen zIndex={1}>
62
+ <Image
63
+ fullscreen
64
+ {...(typeof shapeSize === 'number' &&
65
+ !isNaN(shapeSize) && {
66
+ width: shapeSize,
67
+ height: shapeSize,
68
+ })}
69
+ {...imageProps}
70
+ // @ts-ignore
71
+ ref={forwardedRef}
72
+ // @ts-ignore
73
+ src={src}
74
+ // onLoadStart={() => {
75
+ // // setStatus('loading')
76
+ // }}
77
+ onError={() => {
78
+ setStatus('error')
79
+ }}
80
+ onLoad={() => {
81
+ setStatus('loaded')
82
+ }}
83
+ />
84
+ </YStack>
85
+ )
86
+ }
87
+ )
88
+
89
+ AvatarImage.displayName = IMAGE_NAME
90
+
91
+ /* -------------------------------------------------------------------------------------------------
92
+ * AvatarFallback
93
+ * -----------------------------------------------------------------------------------------------*/
94
+
95
+ const FALLBACK_NAME = 'AvatarFallback'
96
+
97
+ export const AvatarFallbackFrame = styled(YStack, {
98
+ name: FALLBACK_NAME,
99
+ position: 'absolute',
100
+ fullscreen: true,
101
+ zIndex: 0,
102
+ })
103
+
104
+ type AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & {
105
+ delayMs?: number
106
+ }
107
+
108
+ const AvatarFallback = AvatarFallbackFrame.extractable(
109
+ React.forwardRef<TamaguiElement, AvatarFallbackProps>(
110
+ (props: ScopedProps<AvatarFallbackProps>, forwardedRef) => {
111
+ const { __scopeAvatar, delayMs, ...fallbackProps } = props
112
+ const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar)
113
+ const [canRender, setCanRender] = React.useState(delayMs === undefined)
114
+
115
+ React.useEffect(() => {
116
+ if (delayMs !== undefined) {
117
+ const timerId = setTimeout(() => setCanRender(true), delayMs)
118
+ return () => clearTimeout(timerId)
119
+ }
120
+ }, [delayMs])
121
+
122
+ return canRender && context.imageLoadingStatus !== 'loaded' ? (
123
+ <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />
124
+ ) : null
125
+ }
126
+ )
127
+ )
128
+
129
+ AvatarFallback.displayName = FALLBACK_NAME
130
+
131
+ /* -------------------------------------------------------------------------------------------------
132
+ * Avatar
133
+ * -----------------------------------------------------------------------------------------------*/
134
+
135
+ export const AvatarFrame = styled(Square, {
136
+ name: AVATAR_NAME,
137
+ position: 'relative',
138
+ overflow: 'hidden',
139
+ })
140
+
141
+ type AvatarProps = GetProps<typeof AvatarFrame>
142
+
143
+ const Avatar = withStaticProperties(
144
+ React.forwardRef<TamaguiElement, AvatarProps>((props: ScopedProps<AvatarProps>, forwardedRef) => {
145
+ const { __scopeAvatar, size = '$4', ...avatarProps } = props
146
+ const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle')
147
+ return (
148
+ <AvatarProvider
149
+ size={size}
150
+ scope={__scopeAvatar}
151
+ imageLoadingStatus={imageLoadingStatus}
152
+ onImageLoadingStatusChange={setImageLoadingStatus}
153
+ >
154
+ <AvatarFrame size={size} {...avatarProps} ref={forwardedRef} />
155
+ </AvatarProvider>
156
+ )
157
+ }),
158
+ {
159
+ Image: AvatarImage,
160
+ Fallback: AvatarFallback,
161
+ }
162
+ )
163
+
164
+ Avatar.displayName = AVATAR_NAME
165
+
166
+ export { createAvatarScope, Avatar, AvatarImage, AvatarFallback }
167
+ export type { AvatarProps, AvatarImageProps, AvatarFallbackProps }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Avatar'
package/types/Avatar.d.ts ADDED
@@ -0,0 +1,373 @@
1
+ import { GetProps, SizeTokens, TamaguiElement } from '@tamagui/core';
2
+ import { ImageProps } from '@tamagui/image';
3
+ import * as React from 'react';
4
+ declare const createAvatarScope: import("@tamagui/create-context").CreateScope;
5
+ declare type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
6
+ declare type AvatarImageProps = Partial<ImageProps> & {
7
+ onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
8
+ };
9
+ declare const AvatarImage: React.ForwardRefExoticComponent<Partial<ImageProps> & {
10
+ onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
11
+ } & React.RefAttributes<TamaguiElement>>;
12
+ export declare const AvatarFallbackFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
13
+ readonly fullscreen?: boolean | undefined;
14
+ readonly elevation?: SizeTokens | undefined;
15
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
16
+ readonly fullscreen?: boolean | undefined;
17
+ readonly elevation?: SizeTokens | undefined;
18
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
19
+ readonly fullscreen?: boolean | undefined;
20
+ readonly elevation?: SizeTokens | undefined;
21
+ }>>) | (Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
22
+ readonly fullscreen?: boolean | undefined;
23
+ readonly elevation?: SizeTokens | undefined;
24
+ }, string | number> & {
25
+ [x: string]: undefined;
26
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
27
+ readonly fullscreen?: boolean | undefined;
28
+ readonly elevation?: SizeTokens | undefined;
29
+ }, string | number> & {
30
+ [x: string]: undefined;
31
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
32
+ readonly fullscreen?: boolean | undefined;
33
+ readonly elevation?: SizeTokens | undefined;
34
+ }, string | number> & {
35
+ [x: string]: undefined;
36
+ }>>), any, import("@tamagui/core").StackPropsBase, {
37
+ readonly fullscreen?: boolean | undefined;
38
+ readonly elevation?: SizeTokens | undefined;
39
+ } & ({} | {
40
+ [x: string]: undefined;
41
+ })>;
42
+ declare type AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & {
43
+ delayMs?: number;
44
+ };
45
+ declare const AvatarFallback: React.ForwardRefExoticComponent<((Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
46
+ readonly fullscreen?: boolean | undefined;
47
+ readonly elevation?: SizeTokens | undefined;
48
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
49
+ readonly fullscreen?: boolean | undefined;
50
+ readonly elevation?: SizeTokens | undefined;
51
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
52
+ readonly fullscreen?: boolean | undefined;
53
+ readonly elevation?: SizeTokens | undefined;
54
+ }>> & {
55
+ delayMs?: number | undefined;
56
+ }) | Pick<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
57
+ readonly fullscreen?: boolean | undefined;
58
+ readonly elevation?: SizeTokens | undefined;
59
+ }, string | number> & {
60
+ [x: string]: undefined;
61
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
62
+ readonly fullscreen?: boolean | undefined;
63
+ readonly elevation?: SizeTokens | undefined;
64
+ }, string | number> & {
65
+ [x: string]: undefined;
66
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
67
+ readonly fullscreen?: boolean | undefined;
68
+ readonly elevation?: SizeTokens | undefined;
69
+ }, string | number> & {
70
+ [x: string]: undefined;
71
+ }>> & {
72
+ delayMs?: number | undefined;
73
+ }, string | number>) & React.RefAttributes<TamaguiElement>>;
74
+ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
75
+ readonly fullscreen?: boolean | undefined;
76
+ readonly elevation?: SizeTokens | undefined;
77
+ } & {
78
+ fontFamily?: unknown;
79
+ backgrounded?: boolean | undefined;
80
+ radiused?: boolean | undefined;
81
+ hoverTheme?: boolean | undefined;
82
+ pressTheme?: boolean | undefined;
83
+ focusTheme?: boolean | undefined;
84
+ circular?: boolean | undefined;
85
+ padded?: boolean | undefined;
86
+ elevate?: boolean | undefined;
87
+ bordered?: number | boolean | undefined;
88
+ transparent?: boolean | undefined;
89
+ chromeless?: boolean | undefined;
90
+ }, "size" | "circular"> & {
91
+ circular?: boolean | undefined;
92
+ size?: SizeTokens | undefined;
93
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
94
+ readonly fullscreen?: boolean | undefined;
95
+ readonly elevation?: SizeTokens | undefined;
96
+ } & {
97
+ fontFamily?: unknown;
98
+ backgrounded?: boolean | undefined;
99
+ radiused?: boolean | undefined;
100
+ hoverTheme?: boolean | undefined;
101
+ pressTheme?: boolean | undefined;
102
+ focusTheme?: boolean | undefined;
103
+ circular?: boolean | undefined;
104
+ padded?: boolean | undefined;
105
+ elevate?: boolean | undefined;
106
+ bordered?: number | boolean | undefined;
107
+ transparent?: boolean | undefined;
108
+ chromeless?: boolean | undefined;
109
+ }, "size" | "circular"> & {
110
+ circular?: boolean | undefined;
111
+ size?: SizeTokens | undefined;
112
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
113
+ readonly fullscreen?: boolean | undefined;
114
+ readonly elevation?: SizeTokens | undefined;
115
+ } & {
116
+ fontFamily?: unknown;
117
+ backgrounded?: boolean | undefined;
118
+ radiused?: boolean | undefined;
119
+ hoverTheme?: boolean | undefined;
120
+ pressTheme?: boolean | undefined;
121
+ focusTheme?: boolean | undefined;
122
+ circular?: boolean | undefined;
123
+ padded?: boolean | undefined;
124
+ elevate?: boolean | undefined;
125
+ bordered?: number | boolean | undefined;
126
+ transparent?: boolean | undefined;
127
+ chromeless?: boolean | undefined;
128
+ }, "size" | "circular"> & {
129
+ circular?: boolean | undefined;
130
+ size?: SizeTokens | undefined;
131
+ }>>) | (Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
132
+ readonly fullscreen?: boolean | undefined;
133
+ readonly elevation?: SizeTokens | undefined;
134
+ } & {
135
+ fontFamily?: unknown;
136
+ backgrounded?: boolean | undefined;
137
+ radiused?: boolean | undefined;
138
+ hoverTheme?: boolean | undefined;
139
+ pressTheme?: boolean | undefined;
140
+ focusTheme?: boolean | undefined;
141
+ circular?: boolean | undefined;
142
+ padded?: boolean | undefined;
143
+ elevate?: boolean | undefined;
144
+ bordered?: number | boolean | undefined;
145
+ transparent?: boolean | undefined;
146
+ chromeless?: boolean | undefined;
147
+ } & {
148
+ circular?: boolean | undefined;
149
+ size?: SizeTokens | undefined;
150
+ }, string | number> & {
151
+ [x: string]: undefined;
152
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
153
+ readonly fullscreen?: boolean | undefined;
154
+ readonly elevation?: SizeTokens | undefined;
155
+ } & {
156
+ fontFamily?: unknown;
157
+ backgrounded?: boolean | undefined;
158
+ radiused?: boolean | undefined;
159
+ hoverTheme?: boolean | undefined;
160
+ pressTheme?: boolean | undefined;
161
+ focusTheme?: boolean | undefined;
162
+ circular?: boolean | undefined;
163
+ padded?: boolean | undefined;
164
+ elevate?: boolean | undefined;
165
+ bordered?: number | boolean | undefined;
166
+ transparent?: boolean | undefined;
167
+ chromeless?: boolean | undefined;
168
+ } & {
169
+ circular?: boolean | undefined;
170
+ size?: SizeTokens | undefined;
171
+ }, string | number> & {
172
+ [x: string]: undefined;
173
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
174
+ readonly fullscreen?: boolean | undefined;
175
+ readonly elevation?: SizeTokens | undefined;
176
+ } & {
177
+ fontFamily?: unknown;
178
+ backgrounded?: boolean | undefined;
179
+ radiused?: boolean | undefined;
180
+ hoverTheme?: boolean | undefined;
181
+ pressTheme?: boolean | undefined;
182
+ focusTheme?: boolean | undefined;
183
+ circular?: boolean | undefined;
184
+ padded?: boolean | undefined;
185
+ elevate?: boolean | undefined;
186
+ bordered?: number | boolean | undefined;
187
+ transparent?: boolean | undefined;
188
+ chromeless?: boolean | undefined;
189
+ } & {
190
+ circular?: boolean | undefined;
191
+ size?: SizeTokens | undefined;
192
+ }, string | number> & {
193
+ [x: string]: undefined;
194
+ }>>), any, import("@tamagui/core").StackPropsBase, {
195
+ readonly fullscreen?: boolean | undefined;
196
+ readonly elevation?: SizeTokens | undefined;
197
+ } & {
198
+ fontFamily?: unknown;
199
+ backgrounded?: boolean | undefined;
200
+ radiused?: boolean | undefined;
201
+ hoverTheme?: boolean | undefined;
202
+ pressTheme?: boolean | undefined;
203
+ focusTheme?: boolean | undefined;
204
+ circular?: boolean | undefined;
205
+ padded?: boolean | undefined;
206
+ elevate?: boolean | undefined;
207
+ bordered?: number | boolean | undefined;
208
+ transparent?: boolean | undefined;
209
+ chromeless?: boolean | undefined;
210
+ } & {
211
+ circular?: boolean | undefined;
212
+ size?: SizeTokens | undefined;
213
+ } & ({} | {
214
+ [x: string]: undefined;
215
+ })>;
216
+ declare type AvatarProps = GetProps<typeof AvatarFrame>;
217
+ declare const Avatar: React.ForwardRefExoticComponent<((Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
218
+ readonly fullscreen?: boolean | undefined;
219
+ readonly elevation?: SizeTokens | undefined;
220
+ } & {
221
+ fontFamily?: unknown;
222
+ backgrounded?: boolean | undefined;
223
+ radiused?: boolean | undefined;
224
+ hoverTheme?: boolean | undefined;
225
+ pressTheme?: boolean | undefined;
226
+ focusTheme?: boolean | undefined;
227
+ circular?: boolean | undefined;
228
+ padded?: boolean | undefined;
229
+ elevate?: boolean | undefined;
230
+ bordered?: number | boolean | undefined;
231
+ transparent?: boolean | undefined;
232
+ chromeless?: boolean | undefined;
233
+ }, "size" | "circular"> & {
234
+ circular?: boolean | undefined;
235
+ size?: SizeTokens | undefined;
236
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
237
+ readonly fullscreen?: boolean | undefined;
238
+ readonly elevation?: SizeTokens | undefined;
239
+ } & {
240
+ fontFamily?: unknown;
241
+ backgrounded?: boolean | undefined;
242
+ radiused?: boolean | undefined;
243
+ hoverTheme?: boolean | undefined;
244
+ pressTheme?: boolean | undefined;
245
+ focusTheme?: boolean | undefined;
246
+ circular?: boolean | undefined;
247
+ padded?: boolean | undefined;
248
+ elevate?: boolean | undefined;
249
+ bordered?: number | boolean | undefined;
250
+ transparent?: boolean | undefined;
251
+ chromeless?: boolean | undefined;
252
+ }, "size" | "circular"> & {
253
+ circular?: boolean | undefined;
254
+ size?: SizeTokens | undefined;
255
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
256
+ readonly fullscreen?: boolean | undefined;
257
+ readonly elevation?: SizeTokens | undefined;
258
+ } & {
259
+ fontFamily?: unknown;
260
+ backgrounded?: boolean | undefined;
261
+ radiused?: boolean | undefined;
262
+ hoverTheme?: boolean | undefined;
263
+ pressTheme?: boolean | undefined;
264
+ focusTheme?: boolean | undefined;
265
+ circular?: boolean | undefined;
266
+ padded?: boolean | undefined;
267
+ elevate?: boolean | undefined;
268
+ bordered?: number | boolean | undefined;
269
+ transparent?: boolean | undefined;
270
+ chromeless?: boolean | undefined;
271
+ }, "size" | "circular"> & {
272
+ circular?: boolean | undefined;
273
+ size?: SizeTokens | undefined;
274
+ }>>) | Pick<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
275
+ readonly fullscreen?: boolean | undefined;
276
+ readonly elevation?: SizeTokens | undefined;
277
+ } & {
278
+ fontFamily?: unknown;
279
+ backgrounded?: boolean | undefined;
280
+ radiused?: boolean | undefined;
281
+ hoverTheme?: boolean | undefined;
282
+ pressTheme?: boolean | undefined;
283
+ focusTheme?: boolean | undefined;
284
+ circular?: boolean | undefined;
285
+ padded?: boolean | undefined;
286
+ elevate?: boolean | undefined;
287
+ bordered?: number | boolean | undefined;
288
+ transparent?: boolean | undefined;
289
+ chromeless?: boolean | undefined;
290
+ } & {
291
+ circular?: boolean | undefined;
292
+ size?: SizeTokens | undefined;
293
+ }, string | number> & {
294
+ [x: string]: undefined;
295
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
296
+ readonly fullscreen?: boolean | undefined;
297
+ readonly elevation?: SizeTokens | undefined;
298
+ } & {
299
+ fontFamily?: unknown;
300
+ backgrounded?: boolean | undefined;
301
+ radiused?: boolean | undefined;
302
+ hoverTheme?: boolean | undefined;
303
+ pressTheme?: boolean | undefined;
304
+ focusTheme?: boolean | undefined;
305
+ circular?: boolean | undefined;
306
+ padded?: boolean | undefined;
307
+ elevate?: boolean | undefined;
308
+ bordered?: number | boolean | undefined;
309
+ transparent?: boolean | undefined;
310
+ chromeless?: boolean | undefined;
311
+ } & {
312
+ circular?: boolean | undefined;
313
+ size?: SizeTokens | undefined;
314
+ }, string | number> & {
315
+ [x: string]: undefined;
316
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
317
+ readonly fullscreen?: boolean | undefined;
318
+ readonly elevation?: SizeTokens | undefined;
319
+ } & {
320
+ fontFamily?: unknown;
321
+ backgrounded?: boolean | undefined;
322
+ radiused?: boolean | undefined;
323
+ hoverTheme?: boolean | undefined;
324
+ pressTheme?: boolean | undefined;
325
+ focusTheme?: boolean | undefined;
326
+ circular?: boolean | undefined;
327
+ padded?: boolean | undefined;
328
+ elevate?: boolean | undefined;
329
+ bordered?: number | boolean | undefined;
330
+ transparent?: boolean | undefined;
331
+ chromeless?: boolean | undefined;
332
+ } & {
333
+ circular?: boolean | undefined;
334
+ size?: SizeTokens | undefined;
335
+ }, string | number> & {
336
+ [x: string]: undefined;
337
+ }>>, string | number>) & React.RefAttributes<TamaguiElement>> & {
338
+ Image: React.ForwardRefExoticComponent<Partial<ImageProps> & {
339
+ onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
340
+ } & React.RefAttributes<TamaguiElement>>;
341
+ Fallback: React.ForwardRefExoticComponent<((Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
342
+ readonly fullscreen?: boolean | undefined;
343
+ readonly elevation?: SizeTokens | undefined;
344
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
345
+ readonly fullscreen?: boolean | undefined;
346
+ readonly elevation?: SizeTokens | undefined;
347
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
348
+ readonly fullscreen?: boolean | undefined;
349
+ readonly elevation?: SizeTokens | undefined;
350
+ }>> & {
351
+ delayMs?: number | undefined;
352
+ }) | Pick<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
353
+ readonly fullscreen?: boolean | undefined;
354
+ readonly elevation?: SizeTokens | undefined;
355
+ }, string | number> & {
356
+ [x: string]: undefined;
357
+ } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
358
+ readonly fullscreen?: boolean | undefined;
359
+ readonly elevation?: SizeTokens | undefined;
360
+ }, string | number> & {
361
+ [x: string]: undefined;
362
+ }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
363
+ readonly fullscreen?: boolean | undefined;
364
+ readonly elevation?: SizeTokens | undefined;
365
+ }, string | number> & {
366
+ [x: string]: undefined;
367
+ }>> & {
368
+ delayMs?: number | undefined;
369
+ }, string | number>) & React.RefAttributes<TamaguiElement>>;
370
+ };
371
+ export { createAvatarScope, Avatar, AvatarImage, AvatarFallback };
372
+ export type { AvatarProps, AvatarImageProps, AvatarFallbackProps };
373
+ //# sourceMappingURL=Avatar.d.ts.map
package/types/Avatar.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EAKf,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAS,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAGlD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAA4B,iBAAiB,+CAAmC,CAAA;AAEhF,aAAK,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAgBjE,aAAK,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG;IAC5C,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAC7D,CAAA;AAED,QAAA,MAAM,WAAW;sCAHkB,kBAAkB,KAAK,IAAI;wCA+C7D,CAAA;AAUD,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAK9B,CAAA;AAEF,aAAK,mBAAmB,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,GAAG;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;2DAmBnB,CAAA;AAQD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAItB,CAAA;AAEF,aAAK,WAAW,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAE/C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CAvGuB,kBAAkB,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0H7D,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA;AACjE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}
package/types/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './Avatar';
2
+ //# sourceMappingURL=index.d.ts.map
package/types/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}