@hanzogui/avatar 2.0.0-rc.41-hanzoai.1

package/src/Avatar.tsx

@@ -0,0 +1,212 @@
+// forked from radix https://github.com/radix-ui/primitives/blob/main/packages/react/avatar/src/Avatar.tsx
+
+import type { GetProps, SizeTokens, HanzoguiElement } from '@hanzogui/core'
+import { getTokens, getVariableValue, styled } from '@hanzogui/core'
+import type { Scope } from '@hanzogui/create-context'
+import { createContextScope } from '@hanzogui/create-context'
+import { withStaticProperties } from '@hanzogui/helpers'
+import type { ImageProps } from '@hanzogui/image'
+import { Image } from '@hanzogui/image'
+import { Square, getShapeSize } from '@hanzogui/shapes'
+import { YStack } from '@hanzogui/stacks'
+import * as React from 'react'
+
+const AVATAR_NAME = 'Avatar'
+
+type ScopedProps<P> = P & { __scopeAvatar?: Scope }
+const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME)
+
+type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
+
+type AvatarContextValue = {
+  size: SizeTokens
+  imageLoadingStatus: ImageLoadingStatus
+  onImageLoadingStatusChange(status: ImageLoadingStatus): void
+}
+
+const [AvatarProvider, useAvatarContext] =
+  createAvatarContext<AvatarContextValue>(AVATAR_NAME)
+
+/* -------------------------------------------------------------------------------------------------
+ * AvatarImage
+ * -----------------------------------------------------------------------------------------------*/
+
+const IMAGE_NAME = 'AvatarImage'
+
+type AvatarImageProps = Partial<ImageProps> & {
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void
+}
+
+const AvatarImage = React.forwardRef<HanzoguiElement, AvatarImageProps>(
+  (props: ScopedProps<AvatarImageProps>, forwardedRef) => {
+    const {
+      __scopeAvatar,
+      src,
+      source,
+      onLoadingStatusChange = () => {},
+      ...imageProps
+    } = props
+    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar)
+    const [status, setStatus] = React.useState<ImageLoadingStatus>('idle')
+    const shapeSize = getVariableValue(
+      getShapeSize(
+        context.size,
+        // @ts-expect-error
+        { tokens: getTokens() }
+      )?.width
+    ) as number
+
+    // Support both `src` (web) and `source` (RN) props
+    const resolvedSrc =
+      src ||
+      (source && typeof source === 'object' && 'uri' in source ? source.uri : source)
+
+    React.useEffect(() => {
+      // If src is falsy, immediately set error status so fallback renders
+      if (!resolvedSrc) {
+        setStatus('error')
+      } else {
+        setStatus('idle')
+      }
+    }, [resolvedSrc])
+
+    React.useEffect(() => {
+      onLoadingStatusChange(status)
+      context.onImageLoadingStatusChange(status)
+    }, [status])
+
+    // Don't render Image if src is falsy to avoid Android warning
+    if (!resolvedSrc) {
+      return null
+    }
+
+    return (
+      <YStack fullscreen zIndex={1}>
+        <Image
+          position="absolute"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          objectFit="cover"
+          {...(typeof shapeSize === 'number' &&
+            !Number.isNaN(shapeSize) && {
+              width: shapeSize,
+              height: shapeSize,
+            })}
+          {...imageProps}
+          // @ts-ignore
+          ref={forwardedRef}
+          // @ts-ignore
+          src={resolvedSrc}
+          // onLoadStart={() => {
+          //   // setStatus('loading')
+          // }}
+          onError={() => {
+            setStatus('error')
+          }}
+          onLoad={() => {
+            setStatus('loaded')
+          }}
+        />
+      </YStack>
+    )
+  }
+)
+
+AvatarImage.displayName = IMAGE_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * AvatarFallback
+ * -----------------------------------------------------------------------------------------------*/
+
+const FALLBACK_NAME = 'AvatarFallback'
+
+export const AvatarFallbackFrame = styled(YStack, {
+  name: FALLBACK_NAME,
+  position: 'absolute',
+  fullscreen: true,
+  zIndex: 0,
+})
+
+type AvatarFallbackExtraProps = {
+  delayMs?: 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])
+
+  return canRender && context.imageLoadingStatus !== 'loaded' ? (
+    <AvatarFallbackFrame {...fallbackProps} ref={forwardedRef} />
+  ) : null
+})
+
+AvatarFallback.displayName = FALLBACK_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * Avatar
+ * -----------------------------------------------------------------------------------------------*/
+
+export const AvatarFrame = styled(Square, {
+  name: AVATAR_NAME,
+  position: 'relative',
+  overflow: 'hidden',
+})
+
+type AvatarProps = GetProps<typeof AvatarFrame>
+
+/**
+ * @summary A component that displays an image or a fallback icon.
+ * @see — Docs https://hanzogui.dev/ui/avatar
+ *
+ * @example
+ * ```tsx
+ * <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>
+ * ```
+ */
+const Avatar = withStaticProperties(
+  React.forwardRef<HanzoguiElement, AvatarProps>(
+    (props: ScopedProps<AvatarProps>, forwardedRef) => {
+      const { __scopeAvatar, size = '$true', ...avatarProps } = props
+      const [imageLoadingStatus, setImageLoadingStatus] =
+        React.useState<ImageLoadingStatus>('idle')
+      return (
+        <AvatarProvider
+          size={size}
+          scope={__scopeAvatar}
+          imageLoadingStatus={imageLoadingStatus}
+          onImageLoadingStatusChange={setImageLoadingStatus}
+        >
+          <AvatarFrame size={size} {...avatarProps} ref={forwardedRef} />
+        </AvatarProvider>
+      )
+    }
+  ),
+  {
+    Image: AvatarImage,
+    Fallback: AvatarFallback,
+  }
+)
+
+Avatar.displayName = AVATAR_NAME
+
+export { createAvatarScope, Avatar, AvatarImage, AvatarFallback }
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps }

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Avatar'

package/types/Avatar.d.ts

@@ -0,0 +1,105 @@
+import type { GetProps, SizeTokens, HanzoguiElement } from '@hanzogui/core';
+import type { Scope } from '@hanzogui/create-context';
+import type { ImageProps } from '@hanzogui/image';
+import * as React from 'react';
+declare const createAvatarScope: import("@hanzogui/create-context").CreateScope;
+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<HanzoguiElement>>;
+export declare const AvatarFallbackFrame: import("@hanzogui/core").HanzoguiComponent<import("@hanzogui/core").TamaDefer, HanzoguiElement, import("@hanzogui/core").RNHanzoguiViewNonStyleProps, import("@hanzogui/core").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/core").StaticConfigPublic>;
+type AvatarFallbackExtraProps = {
+    delayMs?: number;
+};
+type AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & AvatarFallbackExtraProps;
+declare const AvatarFallback: import("@hanzogui/core").HanzoguiComponent<Omit<import("@hanzogui/core").GetFinalProps<import("@hanzogui/core").RNHanzoguiViewNonStyleProps, import("@hanzogui/core").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}>, "delayMs" | "__scopeAvatar"> & AvatarFallbackExtraProps & {
+    __scopeAvatar?: Scope;
+}, HanzoguiElement, import("@hanzogui/core").RNHanzoguiViewNonStyleProps & AvatarFallbackExtraProps & {
+    __scopeAvatar?: Scope;
+}, import("@hanzogui/core").StackStyleBase, {
+    elevation?: number | SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/core").StaticConfigPublic>;
+export declare const AvatarFrame: import("@hanzogui/core").HanzoguiComponent<import("@hanzogui/core").TamaDefer, HanzoguiElement, import("@hanzogui/core").RNHanzoguiViewNonStyleProps, import("@hanzogui/core").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    size?: number | import("@hanzogui/web").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}, import("@hanzogui/core").StaticConfigPublic & {
+    memo: true;
+}>;
+type AvatarProps = GetProps<typeof AvatarFrame>;
+/**
+ * @summary A component that displays an image or a fallback icon.
+ * @see — Docs https://hanzogui.dev/ui/avatar
+ *
+ * @example
+ * ```tsx
+ * <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>
+ * ```
+ */
+declare const Avatar: React.ForwardRefExoticComponent<Omit<import("@hanzogui/core").RNHanzoguiViewNonStyleProps, "size" | "elevation" | keyof import("@hanzogui/core").StackStyleBase | "fullscreen" | "transparent" | "circular" | "elevate" | "bordered" | "chromeless"> & import("@hanzogui/core").WithThemeValues<import("@hanzogui/core").StackStyleBase> & {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    size?: number | import("@hanzogui/web").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+} & import("@hanzogui/core").WithShorthands<import("@hanzogui/core").WithThemeValues<import("@hanzogui/core").StackStyleBase>> & import("@hanzogui/core").WithPseudoProps<import("@hanzogui/core").WithThemeValues<import("@hanzogui/core").StackStyleBase> & {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    size?: number | import("@hanzogui/web").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+} & import("@hanzogui/core").WithShorthands<import("@hanzogui/core").WithThemeValues<import("@hanzogui/core").StackStyleBase>>> & import("@hanzogui/core").WithMediaProps<import("@hanzogui/core").WithThemeShorthandsAndPseudos<import("@hanzogui/core").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    size?: number | import("@hanzogui/web").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    fullscreen?: boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}>> & React.RefAttributes<HanzoguiElement>> & {
+    Image: React.ForwardRefExoticComponent<Partial<ImageProps> & {
+        onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+    } & React.RefAttributes<HanzoguiElement>>;
+    Fallback: import("@hanzogui/core").HanzoguiComponent<Omit<import("@hanzogui/core").GetFinalProps<import("@hanzogui/core").RNHanzoguiViewNonStyleProps, import("@hanzogui/core").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }>, "delayMs" | "__scopeAvatar"> & AvatarFallbackExtraProps & {
+        __scopeAvatar?: Scope;
+    }, HanzoguiElement, import("@hanzogui/core").RNHanzoguiViewNonStyleProps & AvatarFallbackExtraProps & {
+        __scopeAvatar?: Scope;
+    }, import("@hanzogui/core").StackStyleBase, {
+        elevation?: number | SizeTokens | undefined;
+        fullscreen?: boolean | undefined;
+    }, import("@hanzogui/core").StaticConfigPublic>;
+};
+export { createAvatarScope, Avatar, AvatarImage, AvatarFallback };
+export type { AvatarProps, AvatarImageProps, AvatarFallbackProps };
+//# sourceMappingURL=Avatar.d.ts.map

package/types/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAE3E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAGrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAIjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAA4B,iBAAiB,gDAAmC,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;yCA8E7D,CAAA;AAUD,eAAO,MAAM,mBAAmB;;;+CAK9B,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;;;;oBAzHwB,KAAK;;oBAAL,KAAK;;;;+CA0I/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCApJc,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;;;;;;wBArBlB,KAAK;;wBAAL,KAAK;;;;;CA+LhD,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

@@ -0,0 +1,2 @@
+export * from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}