@tamagui/avatar 2.7.7 → 3.0.0-beta.643.1

package/src/Avatar.tsx

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

package/types/Avatar.d.ts

@@ -1,4 +1,4 @@
-import type { GetProps, SizeTokens, TamaguiElement } from '@tamagui/core';
+import type { GetProps, TamaguiElement } from '@tamagui/core';
 import type { Scope } from '@tamagui/create-context';
 import type { ImageProps } from '@tamagui/image';
 import * as React from 'react';
@@ -7,40 +7,58 @@ type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 type AvatarImageProps = Partial<ImageProps> & {
     onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
 };
-declare const AvatarImage: React.ForwardRefExoticComponent<Partial<ImageProps> & {
-    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-} & React.RefAttributes<TamaguiElement>>;
-export declare const AvatarFallbackFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
-    elevation?: number | SizeTokens | undefined;
-    fullscreen?: boolean | undefined;
-}, import("@tamagui/core").StaticConfigPublic>;
+declare const AvatarImage: import("@tamagui/core").RefComponent<TamaguiElement, AvatarImageProps>;
+export declare const AvatarFallbackFrame: React.FunctionComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "elevation" | keyof import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
+    elevation?: number | import("@tamagui/core").Size | undefined;
+} & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & {
+    ref?: React.Ref<TamaguiElement> | undefined;
+}> & import("@tamagui/core").StaticComponentObject<import("@tamagui/core").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+    elevation?: number | import("@tamagui/core").Size | undefined;
+}, import("@tamagui/core").StaticConfigPublic> & Omit<import("@tamagui/core").StaticConfigPublic, "staticConfig"> & {
+    __tama: [import("@tamagui/core").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+        elevation?: number | import("@tamagui/core").Size | undefined;
+    }, import("@tamagui/core").StaticConfigPublic];
+};
 type AvatarFallbackExtraProps = {
-    delayMs?: number;
+    /** The delay in milliseconds before the fallback renders. */
+    delay?: number;
 };
 type AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & AvatarFallbackExtraProps;
 declare const AvatarFallback: import("@tamagui/core").TamaguiComponent<Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
-    elevation?: number | SizeTokens | undefined;
-    fullscreen?: boolean | undefined;
-}>, "delayMs" | "__scopeAvatar"> & AvatarFallbackExtraProps & {
+    elevation?: number | import("@tamagui/core").Size | undefined;
+}>, "__scopeAvatar" | "delay"> & AvatarFallbackExtraProps & {
     __scopeAvatar?: Scope;
-}, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps & AvatarFallbackExtraProps & {
+}, import("react-native").View | (HTMLElement & import("@tamagui/core").TamaguiElementMethods), import("@tamagui/core").RNTamaguiViewNonStyleProps & AvatarFallbackExtraProps & {
     __scopeAvatar?: Scope;
 }, import("@tamagui/core").StackStyleBase, {
-    elevation?: number | SizeTokens | undefined;
-    fullscreen?: boolean | undefined;
+    elevation?: number | import("@tamagui/core").Size | undefined;
 }, import("@tamagui/core").StaticConfigPublic>;
-export declare const AvatarFrame: import("@tamagui/core").TamaguiComponent<import("@tamagui/core").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
-    elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
+export declare const AvatarFrame: React.FunctionComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "circular" | "elevation" | "size" | "transparent" | keyof import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
+    circular?: boolean | undefined;
+    elevation?: number | import("@tamagui/core").Size | undefined;
+    size?: number | import("@tamagui/core").Size | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
+} & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & {
+    ref?: React.Ref<TamaguiElement> | undefined;
+}> & import("@tamagui/core").StaticComponentObject<import("@tamagui/core").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
     circular?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
+    elevation?: number | import("@tamagui/core").Size | undefined;
+    size?: number | import("@tamagui/core").Size | undefined;
+    transparent?: boolean | undefined;
 }, import("@tamagui/core").StaticConfigPublic & {
     memo: true;
-}>;
+}> & Omit<import("@tamagui/core").StaticConfigPublic & {
+    memo: true;
+}, "staticConfig"> & {
+    __tama: [import("@tamagui/core").TamaDefer, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
+        circular?: boolean | undefined;
+        elevation?: number | import("@tamagui/core").Size | undefined;
+        size?: number | import("@tamagui/core").Size | undefined;
+        transparent?: boolean | undefined;
+    }, import("@tamagui/core").StaticConfigPublic & {
+        memo: true;
+    }];
+};
 type AvatarProps = GetProps<typeof AvatarFrame>;
 /**
  * @summary A component that displays an image or a fallback icon.
@@ -48,56 +66,33 @@ type AvatarProps = GetProps<typeof AvatarFrame>;
  *
  * @example
  * ```tsx
- * <Avatar circular size="$10">
+ * <Avatar circular size="10">
  *  <Avatar.Image
  *    aria-label="Cam"
  *    src="https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80"
  *  />
- *  <Avatar.Fallback backgroundColor="$blue10" />
+ *  <Avatar.Fallback backgroundColor="blue10" />
  * </Avatar>
  * ```
  */
-declare const Avatar: React.ForwardRefExoticComponent<Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "size" | "elevation" | keyof import("@tamagui/core").StackStyleBase | "fullscreen" | "transparent" | "circular" | "elevate" | "bordered" | "chromeless"> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
-    elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
-    transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
+declare const Avatar: ((props: Omit<import("@tamagui/core").RNTamaguiViewNonStyleProps, "circular" | "elevation" | "size" | "transparent" | keyof import("@tamagui/core").StackStyleBase> & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
     circular?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
-} & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").WithPseudoProps<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase> & {
-    elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
+    elevation?: number | import("@tamagui/core").Size | undefined;
+    size?: number | import("@tamagui/core").Size | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
-    circular?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
-} & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>>> & import("@tamagui/core").WithMediaProps<import("@tamagui/core").WithThemeShorthandsAndPseudos<import("@tamagui/core").StackStyleBase, {
-    elevation?: number | import("@tamagui/web").SizeTokens | undefined;
-    size?: number | import("@tamagui/web").SizeTokens | undefined;
-    transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
-    circular?: boolean | undefined;
-    elevate?: boolean | undefined;
-    bordered?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
-}>> & React.RefAttributes<TamaguiElement>> & {
-    Image: React.ForwardRefExoticComponent<Partial<ImageProps> & {
-        onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-    } & React.RefAttributes<TamaguiElement>>;
+} & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStyleBase>> & import("@tamagui/core").RefProp<TamaguiElement>) => React.ReactNode) & {
+    displayName?: string;
+    propTypes?: any;
+} & {
+    Image: import("@tamagui/core").RefComponent<TamaguiElement, AvatarImageProps>;
     Fallback: import("@tamagui/core").TamaguiComponent<Omit<import("@tamagui/core").GetFinalProps<import("@tamagui/core").RNTamaguiViewNonStyleProps, import("@tamagui/core").StackStyleBase, {
-        elevation?: number | SizeTokens | undefined;
-        fullscreen?: boolean | undefined;
-    }>, "delayMs" | "__scopeAvatar"> & AvatarFallbackExtraProps & {
+        elevation?: number | import("@tamagui/core").Size | undefined;
+    }>, "__scopeAvatar" | "delay"> & AvatarFallbackExtraProps & {
         __scopeAvatar?: Scope;
-    }, TamaguiElement, import("@tamagui/core").RNTamaguiViewNonStyleProps & AvatarFallbackExtraProps & {
+    }, import("react-native").View | (HTMLElement & import("@tamagui/core").TamaguiElementMethods), import("@tamagui/core").RNTamaguiViewNonStyleProps & AvatarFallbackExtraProps & {
         __scopeAvatar?: Scope;
     }, import("@tamagui/core").StackStyleBase, {
-        elevation?: number | SizeTokens | undefined;
-        fullscreen?: boolean | undefined;
+        elevation?: number | import("@tamagui/core").Size | undefined;
     }, import("@tamagui/core").StaticConfigPublic>;
 };
 export { createAvatarScope, Avatar, AvatarImage, AvatarFallback };

package/types/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAEzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAGpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAIhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAA4B,iBAAiB,+CAAmC,CAAA;AAEhF,KAAK,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAiBjE,KAAK,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG;IAC5C,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAC7D,CAAA;AAED,QAAA,MAAM,WAAW;4BAHS,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;wCA2E7D,CAAA;AAUD,eAAO,MAAM,mBAAmB;;;8CAK9B,CAAA;AAEF,KAAK,wBAAwB,GAAG;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AACD,KAAK,mBAAmB,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,GAAG,wBAAwB,CAAA;AAE1F,QAAA,MAAM,cAAc;;;;oBAtHwB,KAAK;;oBAAL,KAAK;;;;8CAuI/C,CAAA;AAQF,eAAO,MAAM,WAAW;;;;;;;;;;;EAItB,CAAA;AAEF,KAAK,WAAW,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAE/C;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAjJc,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;;;;;;wBArBlB,KAAK;;wBAAL,KAAK;;;;;CA4LhD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA;AACjE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAc,cAAc,EAAE,MAAM,eAAe,CAAA;AAEzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAGpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAIhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAA4B,iBAAiB,+CAAmC,CAAA;AAEhF,KAAK,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAiBjE,KAAK,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,GAAG;IAC5C,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAC7D,CAAA;AAED,QAAA,MAAM,WAAW,wEAwEhB,CAAA;AAUD,eAAO,MAAM,mBAAmB;;;;;;;;;;CAK9B,CAAA;AAEF,KAAK,wBAAwB,GAAG;IAC9B,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AACD,KAAK,mBAAmB,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,GAAG,wBAAwB,CAAA;AAE1F,QAAA,MAAM,cAAc;;;oBAvHwB,KAAK;;;;;8CAyIhD,CAAA;AAQD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;CAItB,CAAA;AAEF,KAAK,WAAW,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAE/C;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,MAAM;;;;;;;;;;;;;wBAxKgC,KAAK;;;;;;CA8LhD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA;AACjE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/esm/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}

package/dist/jsx/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc","ignoreList":[]}