@tamagui/avatar 1.0.1-beta.68 → 1.0.1-beta.71

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 (11) hide show
  1. package/dist/cjs/Avatar.js +2 -5
  2. package/dist/cjs/Avatar.js.map +2 -2
  3. package/dist/esm/Avatar.js +2 -8
  4. package/dist/esm/Avatar.js.map +2 -2
  5. package/dist/jsx/Avatar.js +3 -8
  6. package/package.json +9 -7
  7. package/src/Avatar.tsx +6 -6
  8. package/types/Avatar.d.ts +40 -40
  9. package/types/Avatar.d.ts.map +1 -1
  10. package/types/index.d.ts +0 -0
  11. package/types/index.d.ts.map +0 -0
package/dist/cjs/Avatar.js CHANGED
@@ -52,6 +52,7 @@ var Avatar_exports = {};
52
52
  __export(Avatar_exports, {
53
53
  Avatar: () => Avatar,
54
54
  AvatarFallback: () => AvatarFallback,
55
+ AvatarFallbackFrame: () => AvatarFallbackFrame,
55
56
  AvatarFrame: () => AvatarFrame,
56
57
  AvatarImage: () => AvatarImage,
57
58
  createAvatarScope: () => createAvatarScope
@@ -68,13 +69,10 @@ const [createAvatarContext, createAvatarScope] = (0, import_create_context.creat
68
69
  const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
69
70
  const IMAGE_NAME = "AvatarImage";
70
71
  const AvatarImage = React.forwardRef((props, forwardedRef) => {
71
- var _b;
72
72
  const _a = props, { __scopeAvatar, src, onLoadingStatusChange = /* @__PURE__ */ __name(() => {
73
73
  }, "onLoadingStatusChange") } = _a, imageProps = __objRest(_a, ["__scopeAvatar", "src", "onLoadingStatusChange"]);
74
74
  const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
75
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
76
  React.useEffect(() => {
79
77
  setStatus("idle");
80
78
  }, [JSON.stringify(src)]);
@@ -90,8 +88,6 @@ const AvatarImage = React.forwardRef((props, forwardedRef) => {
90
88
  }, imageProps), {
91
89
  ref: forwardedRef,
92
90
  src,
93
- onLoadStart: () => {
94
- },
95
91
  onError: () => {
96
92
  setStatus("error");
97
93
  },
@@ -150,6 +146,7 @@ Avatar.displayName = AVATAR_NAME;
150
146
  0 && (module.exports = {
151
147
  Avatar,
152
148
  AvatarFallback,
149
+ AvatarFallbackFrame,
153
150
  AvatarFrame,
154
151
  AvatarImage,
155
152
  createAvatarScope
package/dist/cjs/Avatar.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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)\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 {...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\nconst 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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",
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)\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 {...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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAQO;AACP,4BAA0C;AAC1C,mBAAkC;AAClC,oBAAqC;AACrC,oBAAuB;AACvB,YAAuB;AAEvB,MAAM,cAAc;AAGpB,MAAM,CAAC,qBAAqB,qBAAqB,8CAAmB,WAAW;AAU/E,MAAM,CAAC,gBAAgB,oBAAoB,oBAAwC,WAAW;AAM9F,MAAM,aAAa;AAMnB,MAAM,cAAc,MAAM,WACxB,CAAC,OAAsC,iBAAiB;AACtD,QAAgF,YAAxE,iBAAe,KAAK,wBAAwB,6BAAM;AAAA,EAAC,GAAP,6BAA4B,IAAf,uBAAe,IAAf,CAAzD,iBAAe,OAAK;AAC5B,QAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,QAAM,CAAC,QAAQ,aAAa,MAAM,SAA6B,MAAM;AAIrE,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,KACN,aAFL;AAAA,IAIC,KAAK;AAAA,IAEL;AAAA,IAIA,SAAS,MAAM;AACb,gBAAU,OAAO;AAAA,IACnB;AAAA,IACA,QAAQ,MAAM;AACZ,gBAAU,QAAQ;AAAA,IACpB;AAAA,IACF,CACF;AAEJ,CACF;AAEA,YAAY,cAAc;AAM1B,MAAM,gBAAgB;AAEf,MAAM,sBAAsB,wBAAO,sBAAQ;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,QAAqD,YAA7C,iBAAe,YAA8B,IAAlB,0BAAkB,IAAlB,CAA3B,iBAAe;AACvB,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,sDAAwB,gBAAxB;AAAA,IAAuC,KAAK;AAAA,IAAc,IACzD;AACN,CACF,CACF;AAEA,eAAe,cAAc;AAMtB,MAAM,cAAc,wBAAO,sBAAQ;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ,CAAC;AAID,MAAM,SAAS,sCACb,MAAM,WAAwC,CAAC,OAAiC,iBAAiB;AAC/F,QAAuD,YAA/C,iBAAe,OAAO,SAAyB,IAAhB,wBAAgB,IAAhB,CAA/B,iBAAe;AACvB,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,KAAgB,cAA5B;AAAA,IAAyC,KAAK;AAAA,IAAc,CAC/D;AAEJ,CAAC,GACD;AAAA,EACE,OAAO;AAAA,EACP,UAAU;AACZ,CACF;AAEA,OAAO,cAAc;",
6
6
  "names": []
7
7
  }
package/dist/esm/Avatar.js CHANGED
@@ -1,14 +1,12 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
3
  import {
4
- getVariableValue,
5
- getVariantExtras,
6
4
  styled,
7
5
  withStaticProperties
8
6
  } from "@tamagui/core";
9
7
  import { createContextScope } from "@tamagui/create-context";
10
8
  import { Image } from "@tamagui/image";
11
- import { Square, getShapeSize } from "@tamagui/shapes";
9
+ import { Square } from "@tamagui/shapes";
12
10
  import { YStack } from "@tamagui/stacks";
13
11
  import * as React from "react";
14
12
  const AVATAR_NAME = "Avatar";
@@ -16,13 +14,10 @@ const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)
16
14
  const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
17
15
  const IMAGE_NAME = "AvatarImage";
18
16
  const AvatarImage = React.forwardRef((props, forwardedRef) => {
19
- var _a;
20
17
  const { __scopeAvatar, src, onLoadingStatusChange = /* @__PURE__ */ __name(() => {
21
18
  }, "onLoadingStatusChange"), ...imageProps } = props;
22
19
  const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
23
20
  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
21
  React.useEffect(() => {
27
22
  setStatus("idle");
28
23
  }, [JSON.stringify(src)]);
@@ -38,8 +33,6 @@ const AvatarImage = React.forwardRef((props, forwardedRef) => {
38
33
  ...imageProps,
39
34
  ref: forwardedRef,
40
35
  src,
41
- onLoadStart: () => {
42
- },
43
36
  onError: () => {
44
37
  setStatus("error");
45
38
  },
@@ -98,6 +91,7 @@ Avatar.displayName = AVATAR_NAME;
98
91
  export {
99
92
  Avatar,
100
93
  AvatarFallback,
94
+ AvatarFallbackFrame,
101
95
  AvatarFrame,
102
96
  AvatarImage,
103
97
  createAvatarScope
package/dist/esm/Avatar.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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)\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 {...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\nconst 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,6BAAM;AAAA,EAAC,GAAP,6BAAa,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,GAAG;AAAA,IAEJ,KAAK;AAAA,IAEL;AAAA,IACA,aAAa,MAAM;AAAA,IAEnB;AAAA,IACA,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;AAEtB,MAAM,sBAAsB,OAAO,QAAQ;AAAA,EACzC,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;",
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)\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 {...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;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,6BAAM;AAAA,EAAC,GAAP,6BAAa,eAAe;AAChF,QAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,QAAM,CAAC,QAAQ,aAAa,MAAM,SAA6B,MAAM;AAIrE,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,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;",
6
6
  "names": []
7
7
  }
package/dist/jsx/Avatar.js CHANGED
@@ -1,14 +1,12 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
3
  import {
4
- getVariableValue,
5
- getVariantExtras,
6
4
  styled,
7
5
  withStaticProperties
8
6
  } from "@tamagui/core";
9
7
  import { createContextScope } from "@tamagui/create-context";
10
8
  import { Image } from "@tamagui/image";
11
- import { Square, getShapeSize } from "@tamagui/shapes";
9
+ import { Square } from "@tamagui/shapes";
12
10
  import { YStack } from "@tamagui/stacks";
13
11
  import * as React from "react";
14
12
  const AVATAR_NAME = "Avatar";
@@ -16,13 +14,10 @@ const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)
16
14
  const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
17
15
  const IMAGE_NAME = "AvatarImage";
18
16
  const AvatarImage = React.forwardRef((props, forwardedRef) => {
19
- var _a;
20
17
  const { __scopeAvatar, src, onLoadingStatusChange = /* @__PURE__ */ __name(() => {
21
18
  }, "onLoadingStatusChange"), ...imageProps } = props;
22
19
  const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
23
20
  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
21
  React.useEffect(() => {
27
22
  setStatus("idle");
28
23
  }, [JSON.stringify(src)]);
@@ -30,8 +25,7 @@ const AvatarImage = React.forwardRef((props, forwardedRef) => {
30
25
  onLoadingStatusChange(status);
31
26
  context.onImageLoadingStatusChange(status);
32
27
  }, [status]);
33
- return <YStack fullscreen zIndex={1}><Image fullscreen {...imageProps} ref={forwardedRef} src={src} onLoadStart={() => {
34
- }} onError={() => {
28
+ return <YStack fullscreen zIndex={1}><Image fullscreen {...imageProps} ref={forwardedRef} src={src} onError={() => {
35
29
  setStatus("error");
36
30
  }} onLoad={() => {
37
31
  setStatus("loaded");
@@ -75,6 +69,7 @@ Avatar.displayName = AVATAR_NAME;
75
69
  export {
76
70
  Avatar,
77
71
  AvatarFallback,
72
+ AvatarFallbackFrame,
78
73
  AvatarFrame,
79
74
  AvatarImage,
80
75
  createAvatarScope
package/package.json CHANGED
@@ -1,7 +1,9 @@
1
1
  {
2
2
  "name": "@tamagui/avatar",
3
- "version": "1.0.1-beta.68",
4
- "sideEffects": true,
3
+ "version": "1.0.1-beta.71",
4
+ "sideEffects": [
5
+ "*.css"
6
+ ],
5
7
  "source": "src/index.ts",
6
8
  "types": "./types/index.d.ts",
7
9
  "main": "dist/cjs",
@@ -20,10 +22,10 @@
20
22
  },
21
23
  "dependencies": {
22
24
  "@radix-ui/react-use-callback-ref": "^0.1.0",
23
- "@tamagui/core": "^1.0.1-beta.68",
24
- "@tamagui/image": "^1.0.1-beta.68",
25
- "@tamagui/shapes": "^1.0.1-beta.68",
26
- "@tamagui/text": "^1.0.1-beta.68"
25
+ "@tamagui/core": "^1.0.1-beta.71",
26
+ "@tamagui/image": "^1.0.1-beta.71",
27
+ "@tamagui/shapes": "^1.0.1-beta.71",
28
+ "@tamagui/text": "^1.0.1-beta.71"
27
29
  },
28
30
  "peerDependencies": {
29
31
  "react": "*",
@@ -31,7 +33,7 @@
31
33
  "react-native": "*"
32
34
  },
33
35
  "devDependencies": {
34
- "@tamagui/build": "^1.0.1-beta.68",
36
+ "@tamagui/build": "^1.0.1-beta.71",
35
37
  "@types/react-dom": "^18.0.3",
36
38
  "@types/react-native": "^0.67.3",
37
39
  "react": "*",
package/src/Avatar.tsx CHANGED
@@ -45,8 +45,8 @@ const AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(
45
45
  const { __scopeAvatar, src, onLoadingStatusChange = () => {}, ...imageProps } = props
46
46
  const context = useAvatarContext(IMAGE_NAME, __scopeAvatar)
47
47
  const [status, setStatus] = React.useState<ImageLoadingStatus>('idle')
48
- const extras = getVariantExtras(props)
49
- const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width)
48
+ // const extras = getVariantExtras(props)
49
+ // const shapeSize = getVariableValue(getShapeSize(context.size, extras)?.width)
50
50
 
51
51
  React.useEffect(() => {
52
52
  setStatus('idle')
@@ -66,9 +66,9 @@ const AvatarImage = React.forwardRef<TamaguiElement, AvatarImageProps>(
66
66
  ref={forwardedRef}
67
67
  // @ts-ignore
68
68
  src={src}
69
- onLoadStart={() => {
70
- // setStatus('loading')
71
- }}
69
+ // onLoadStart={() => {
70
+ // // setStatus('loading')
71
+ // }}
72
72
  onError={() => {
73
73
  setStatus('error')
74
74
  }}
@@ -89,7 +89,7 @@ AvatarImage.displayName = IMAGE_NAME
89
89
 
90
90
  const FALLBACK_NAME = 'AvatarFallback'
91
91
 
92
- const AvatarFallbackFrame = styled(YStack, {
92
+ export const AvatarFallbackFrame = styled(YStack, {
93
93
  name: FALLBACK_NAME,
94
94
  position: 'absolute',
95
95
  fullscreen: true,
package/types/Avatar.d.ts CHANGED
@@ -9,7 +9,7 @@ declare type AvatarImageProps = Partial<ImageProps> & {
9
9
  declare const AvatarImage: React.ForwardRefExoticComponent<Partial<ImageProps> & {
10
10
  onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
11
11
  } & React.RefAttributes<TamaguiElement>>;
12
- 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"> & {
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
13
  readonly fullscreen?: boolean | undefined;
14
14
  readonly elevation?: SizeTokens | undefined;
15
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"> & {
@@ -78,9 +78,9 @@ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit
78
78
  fontFamily?: unknown;
79
79
  backgrounded?: boolean | undefined;
80
80
  radiused?: boolean | undefined;
81
- hoverable?: boolean | undefined;
82
- pressable?: boolean | undefined;
83
- focusable?: boolean | undefined;
81
+ hoverTheme?: boolean | undefined;
82
+ pressTheme?: boolean | undefined;
83
+ focusTheme?: boolean | undefined;
84
84
  circular?: boolean | undefined;
85
85
  padded?: boolean | undefined;
86
86
  elevate?: boolean | undefined;
@@ -97,9 +97,9 @@ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit
97
97
  fontFamily?: unknown;
98
98
  backgrounded?: boolean | undefined;
99
99
  radiused?: boolean | undefined;
100
- hoverable?: boolean | undefined;
101
- pressable?: boolean | undefined;
102
- focusable?: boolean | undefined;
100
+ hoverTheme?: boolean | undefined;
101
+ pressTheme?: boolean | undefined;
102
+ focusTheme?: boolean | undefined;
103
103
  circular?: boolean | undefined;
104
104
  padded?: boolean | undefined;
105
105
  elevate?: boolean | undefined;
@@ -116,9 +116,9 @@ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit
116
116
  fontFamily?: unknown;
117
117
  backgrounded?: boolean | undefined;
118
118
  radiused?: boolean | undefined;
119
- hoverable?: boolean | undefined;
120
- pressable?: boolean | undefined;
121
- focusable?: boolean | undefined;
119
+ hoverTheme?: boolean | undefined;
120
+ pressTheme?: boolean | undefined;
121
+ focusTheme?: boolean | undefined;
122
122
  circular?: boolean | undefined;
123
123
  padded?: boolean | undefined;
124
124
  elevate?: boolean | undefined;
@@ -135,9 +135,9 @@ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit
135
135
  fontFamily?: unknown;
136
136
  backgrounded?: boolean | undefined;
137
137
  radiused?: boolean | undefined;
138
- hoverable?: boolean | undefined;
139
- pressable?: boolean | undefined;
140
- focusable?: boolean | undefined;
138
+ hoverTheme?: boolean | undefined;
139
+ pressTheme?: boolean | undefined;
140
+ focusTheme?: boolean | undefined;
141
141
  circular?: boolean | undefined;
142
142
  padded?: boolean | undefined;
143
143
  elevate?: boolean | undefined;
@@ -156,9 +156,9 @@ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit
156
156
  fontFamily?: unknown;
157
157
  backgrounded?: boolean | undefined;
158
158
  radiused?: boolean | undefined;
159
- hoverable?: boolean | undefined;
160
- pressable?: boolean | undefined;
161
- focusable?: boolean | undefined;
159
+ hoverTheme?: boolean | undefined;
160
+ pressTheme?: boolean | undefined;
161
+ focusTheme?: boolean | undefined;
162
162
  circular?: boolean | undefined;
163
163
  padded?: boolean | undefined;
164
164
  elevate?: boolean | undefined;
@@ -177,9 +177,9 @@ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit
177
177
  fontFamily?: unknown;
178
178
  backgrounded?: boolean | undefined;
179
179
  radiused?: boolean | undefined;
180
- hoverable?: boolean | undefined;
181
- pressable?: boolean | undefined;
182
- focusable?: boolean | undefined;
180
+ hoverTheme?: boolean | undefined;
181
+ pressTheme?: boolean | undefined;
182
+ focusTheme?: boolean | undefined;
183
183
  circular?: boolean | undefined;
184
184
  padded?: boolean | undefined;
185
185
  elevate?: boolean | undefined;
@@ -198,9 +198,9 @@ export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<(Omit
198
198
  fontFamily?: unknown;
199
199
  backgrounded?: boolean | undefined;
200
200
  radiused?: boolean | undefined;
201
- hoverable?: boolean | undefined;
202
- pressable?: boolean | undefined;
203
- focusable?: boolean | undefined;
201
+ hoverTheme?: boolean | undefined;
202
+ pressTheme?: boolean | undefined;
203
+ focusTheme?: boolean | undefined;
204
204
  circular?: boolean | undefined;
205
205
  padded?: boolean | undefined;
206
206
  elevate?: boolean | undefined;
@@ -221,9 +221,9 @@ declare const Avatar: React.ForwardRefExoticComponent<((Omit<import("react-nativ
221
221
  fontFamily?: unknown;
222
222
  backgrounded?: boolean | undefined;
223
223
  radiused?: boolean | undefined;
224
- hoverable?: boolean | undefined;
225
- pressable?: boolean | undefined;
226
- focusable?: boolean | undefined;
224
+ hoverTheme?: boolean | undefined;
225
+ pressTheme?: boolean | undefined;
226
+ focusTheme?: boolean | undefined;
227
227
  circular?: boolean | undefined;
228
228
  padded?: boolean | undefined;
229
229
  elevate?: boolean | undefined;
@@ -240,9 +240,9 @@ declare const Avatar: React.ForwardRefExoticComponent<((Omit<import("react-nativ
240
240
  fontFamily?: unknown;
241
241
  backgrounded?: boolean | undefined;
242
242
  radiused?: boolean | undefined;
243
- hoverable?: boolean | undefined;
244
- pressable?: boolean | undefined;
245
- focusable?: boolean | undefined;
243
+ hoverTheme?: boolean | undefined;
244
+ pressTheme?: boolean | undefined;
245
+ focusTheme?: boolean | undefined;
246
246
  circular?: boolean | undefined;
247
247
  padded?: boolean | undefined;
248
248
  elevate?: boolean | undefined;
@@ -259,9 +259,9 @@ declare const Avatar: React.ForwardRefExoticComponent<((Omit<import("react-nativ
259
259
  fontFamily?: unknown;
260
260
  backgrounded?: boolean | undefined;
261
261
  radiused?: boolean | undefined;
262
- hoverable?: boolean | undefined;
263
- pressable?: boolean | undefined;
264
- focusable?: boolean | undefined;
262
+ hoverTheme?: boolean | undefined;
263
+ pressTheme?: boolean | undefined;
264
+ focusTheme?: boolean | undefined;
265
265
  circular?: boolean | undefined;
266
266
  padded?: boolean | undefined;
267
267
  elevate?: boolean | undefined;
@@ -278,9 +278,9 @@ declare const Avatar: React.ForwardRefExoticComponent<((Omit<import("react-nativ
278
278
  fontFamily?: unknown;
279
279
  backgrounded?: boolean | undefined;
280
280
  radiused?: boolean | undefined;
281
- hoverable?: boolean | undefined;
282
- pressable?: boolean | undefined;
283
- focusable?: boolean | undefined;
281
+ hoverTheme?: boolean | undefined;
282
+ pressTheme?: boolean | undefined;
283
+ focusTheme?: boolean | undefined;
284
284
  circular?: boolean | undefined;
285
285
  padded?: boolean | undefined;
286
286
  elevate?: boolean | undefined;
@@ -299,9 +299,9 @@ declare const Avatar: React.ForwardRefExoticComponent<((Omit<import("react-nativ
299
299
  fontFamily?: unknown;
300
300
  backgrounded?: boolean | undefined;
301
301
  radiused?: boolean | undefined;
302
- hoverable?: boolean | undefined;
303
- pressable?: boolean | undefined;
304
- focusable?: boolean | undefined;
302
+ hoverTheme?: boolean | undefined;
303
+ pressTheme?: boolean | undefined;
304
+ focusTheme?: boolean | undefined;
305
305
  circular?: boolean | undefined;
306
306
  padded?: boolean | undefined;
307
307
  elevate?: boolean | undefined;
@@ -320,9 +320,9 @@ declare const Avatar: React.ForwardRefExoticComponent<((Omit<import("react-nativ
320
320
  fontFamily?: unknown;
321
321
  backgrounded?: boolean | undefined;
322
322
  radiused?: boolean | undefined;
323
- hoverable?: boolean | undefined;
324
- pressable?: boolean | undefined;
325
- focusable?: boolean | undefined;
323
+ hoverTheme?: boolean | undefined;
324
+ pressTheme?: boolean | undefined;
325
+ focusTheme?: boolean | undefined;
326
326
  circular?: boolean | undefined;
327
327
  padded?: boolean | undefined;
328
328
  elevate?: boolean | undefined;
package/types/Avatar.d.ts.map CHANGED
@@ -1 +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;wCA0C7D,CAAA;AAUD,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKvB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CAlGuB,kBAAkB,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH7D,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA;AACjE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}
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;wCA0C7D,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CAlGuB,kBAAkB,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH7D,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 CHANGED
File without changes
package/types/index.d.ts.map CHANGED
File without changes