@hanzogui/avatar 8.3.0 → 8.3.2

package/dist/cjs/Avatar.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarFallback = exports.AvatarImage = exports.Avatar = exports.createAvatarScope = exports.AvatarFrame = exports.AvatarFallbackFrame = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@hanzogui/core");
+const create_context_1 = require("@hanzogui/create-context");
+const helpers_1 = require("@hanzogui/helpers");
+const image_1 = require("@hanzogui/image");
+const shapes_1 = require("@hanzogui/shapes");
+const stacks_1 = require("@hanzogui/stacks");
+const React = tslib_1.__importStar(require("react"));
+const AVATAR_NAME = 'Avatar';
+const [createAvatarContext, createAvatarScope] = (0, create_context_1.createContextScope)(AVATAR_NAME);
+exports.createAvatarScope = createAvatarScope;
+const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
+/* -------------------------------------------------------------------------------------------------
+ * AvatarImage
+ * -----------------------------------------------------------------------------------------------*/
+const IMAGE_NAME = 'AvatarImage';
+const AvatarImage = React.forwardRef((props, forwardedRef) => {
+    const { __scopeAvatar, src, source, onLoadingStatusChange = () => { }, ...imageProps } = props;
+    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
+    const [status, setStatus] = React.useState('idle');
+    // 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 ((0, jsx_runtime_1.jsx)(stacks_1.YStack, { fullscreen: true, zIndex: 1, children: (0, jsx_runtime_1.jsx)(image_1.Image, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, objectFit: "cover", 
+            // fill the frame. previously the image was sized to
+            // getShapeSize(context.size) — but that resolves a numeric `size`
+            // (e.g. <Avatar size={16} />) as a size-TOKEN index (tokens.size[16]),
+            // so it got the token-scale value (~224px) instead of 16px, blowing
+            // the image far past its frame; object-fit:cover then showed a
+            // blurry mis-cropped corner. the frame already owns the size, so the
+            // image just fills it — correct for numeric and token sizes alike.
+            width: "100%", height: "100%", ...imageProps, 
+            // @ts-ignore
+            ref: forwardedRef, 
+            // @ts-ignore
+            src: resolvedSrc, 
+            // onLoadStart={() => {
+            //   // setStatus('loading')
+            // }}
+            onError: () => {
+                setStatus('error');
+            }, onLoad: () => {
+                setStatus('loaded');
+            } }) }));
+});
+exports.AvatarImage = AvatarImage;
+AvatarImage.displayName = IMAGE_NAME;
+/* -------------------------------------------------------------------------------------------------
+ * AvatarFallback
+ * -----------------------------------------------------------------------------------------------*/
+const FALLBACK_NAME = 'AvatarFallback';
+exports.AvatarFallbackFrame = (0, core_1.styled)(stacks_1.YStack, {
+    name: FALLBACK_NAME,
+    position: 'absolute',
+    fullscreen: true,
+    zIndex: 0,
+});
+const AvatarFallback = exports.AvatarFallbackFrame.styleable((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' ? ((0, jsx_runtime_1.jsx)(exports.AvatarFallbackFrame, { ...fallbackProps, ref: forwardedRef })) : null;
+});
+exports.AvatarFallback = AvatarFallback;
+AvatarFallback.displayName = FALLBACK_NAME;
+/* -------------------------------------------------------------------------------------------------
+ * Avatar
+ * -----------------------------------------------------------------------------------------------*/
+exports.AvatarFrame = (0, core_1.styled)(shapes_1.Square, {
+    name: AVATAR_NAME,
+    position: 'relative',
+    overflow: 'hidden',
+});
+/**
+ * @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 = (0, helpers_1.withStaticProperties)(React.forwardRef((props, forwardedRef) => {
+    const { __scopeAvatar, size = '$true', ...avatarProps } = props;
+    const [imageLoadingStatus, setImageLoadingStatus] = React.useState('idle');
+    return ((0, jsx_runtime_1.jsx)(AvatarProvider, { size: size, scope: __scopeAvatar, imageLoadingStatus: imageLoadingStatus, onImageLoadingStatusChange: setImageLoadingStatus, children: (0, jsx_runtime_1.jsx)(exports.AvatarFrame, { size: size, ...avatarProps, ref: forwardedRef }) }));
+}), {
+    Image: AvatarImage,
+    Fallback: AvatarFallback,
+});
+exports.Avatar = Avatar;
+Avatar.displayName = AVATAR_NAME;
+//# sourceMappingURL=Avatar.js.map

package/dist/cjs/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Avatar.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B"}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/dist/esm/Avatar.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@hanzogui/core';
+import { createContextScope } from '@hanzogui/create-context';
+import { withStaticProperties } from '@hanzogui/helpers';
+import { Image } from '@hanzogui/image';
+import { Square } from '@hanzogui/shapes';
+import { YStack } from '@hanzogui/stacks';
+import * as React from 'react';
+const AVATAR_NAME = 'Avatar';
+const [createAvatarContext, createAvatarScope] = createContextScope(AVATAR_NAME);
+const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
+/* -------------------------------------------------------------------------------------------------
+ * AvatarImage
+ * -----------------------------------------------------------------------------------------------*/
+const IMAGE_NAME = 'AvatarImage';
+const AvatarImage = React.forwardRef((props, forwardedRef) => {
+    const { __scopeAvatar, src, source, onLoadingStatusChange = () => { }, ...imageProps } = props;
+    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
+    const [status, setStatus] = React.useState('idle');
+    // 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 (_jsx(YStack, { fullscreen: true, zIndex: 1, children: _jsx(Image, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, objectFit: "cover", 
+            // fill the frame. previously the image was sized to
+            // getShapeSize(context.size) — but that resolves a numeric `size`
+            // (e.g. <Avatar size={16} />) as a size-TOKEN index (tokens.size[16]),
+            // so it got the token-scale value (~224px) instead of 16px, blowing
+            // the image far past its frame; object-fit:cover then showed a
+            // blurry mis-cropped corner. the frame already owns the size, so the
+            // image just fills it — correct for numeric and token sizes alike.
+            width: "100%", height: "100%", ...imageProps, 
+            // @ts-ignore
+            ref: forwardedRef, 
+            // @ts-ignore
+            src: resolvedSrc, 
+            // onLoadStart={() => {
+            //   // setStatus('loading')
+            // }}
+            onError: () => {
+                setStatus('error');
+            }, onLoad: () => {
+                setStatus('loaded');
+            } }) }));
+});
+AvatarImage.displayName = IMAGE_NAME;
+/* -------------------------------------------------------------------------------------------------
+ * AvatarFallback
+ * -----------------------------------------------------------------------------------------------*/
+const FALLBACK_NAME = 'AvatarFallback';
+export const AvatarFallbackFrame = styled(YStack, {
+    name: FALLBACK_NAME,
+    position: 'absolute',
+    fullscreen: true,
+    zIndex: 0,
+});
+const AvatarFallback = AvatarFallbackFrame.styleable((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' ? (_jsx(AvatarFallbackFrame, { ...fallbackProps, ref: forwardedRef })) : null;
+});
+AvatarFallback.displayName = FALLBACK_NAME;
+/* -------------------------------------------------------------------------------------------------
+ * Avatar
+ * -----------------------------------------------------------------------------------------------*/
+export const AvatarFrame = styled(Square, {
+    name: AVATAR_NAME,
+    position: 'relative',
+    overflow: 'hidden',
+});
+/**
+ * @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((props, forwardedRef) => {
+    const { __scopeAvatar, size = '$true', ...avatarProps } = props;
+    const [imageLoadingStatus, setImageLoadingStatus] = React.useState('idle');
+    return (_jsx(AvatarProvider, { size: size, scope: __scopeAvatar, imageLoadingStatus: imageLoadingStatus, onImageLoadingStatusChange: setImageLoadingStatus, children: _jsx(AvatarFrame, { size: size, ...avatarProps, ref: forwardedRef }) }));
+}), {
+    Image: AvatarImage,
+    Fallback: AvatarFallback,
+});
+Avatar.displayName = AVATAR_NAME;
+export { createAvatarScope, Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=Avatar.js.map

package/dist/esm/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export * from "./Avatar.mjs";
-//# sourceMappingURL=index.js.map
+export * from './Avatar.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzogui/avatar",
-  "version": "8.3.0",
+  "version": "8.3.2",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -9,47 +9,47 @@
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "dist/cjs",
-  "module": "dist/esm",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "types": "./types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "types": "./types/index.d.ts",
-      "react-native": "./dist/esm/index.native.js",
-      "browser": "./dist/esm/index.mjs",
-      "module": "./dist/esm/index.mjs",
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/cjs/index.cjs",
-      "default": "./dist/esm/index.mjs"
+      "react-native": "./dist/esm/index.js",
+      "browser": "./dist/esm/index.js",
+      "module": "./dist/esm/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "hanzogui-build",
+    "build": "hanzogui-build --skip-native",
     "watch": "hanzogui-build --watch",
     "clean": "hanzogui-build clean",
     "clean:build": "hanzogui-build clean:build"
   },
   "dependencies": {
-    "@hanzogui/core": "8.3.0",
-    "@hanzogui/create-context": "8.3.0",
-    "@hanzogui/helpers": "8.3.0",
-    "@hanzogui/image": "8.3.0",
-    "@hanzogui/shapes": "8.3.0",
-    "@hanzogui/stacks": "8.3.0",
-    "@hanzogui/text": "8.3.0",
-    "@hanzogui/web": "8.3.0"
+    "@hanzogui/core": "8.3.2",
+    "@hanzogui/create-context": "8.3.2",
+    "@hanzogui/helpers": "8.3.2",
+    "@hanzogui/image": "8.3.2",
+    "@hanzogui/shapes": "8.3.2",
+    "@hanzogui/stacks": "8.3.2",
+    "@hanzogui/text": "8.3.2",
+    "@hanzogui/web": "8.3.2"
   },
   "devDependencies": {
-    "@hanzogui/build": "8.3.0",
-    "react": ">=19",
-    "react-native": "0.83.2"
+    "@hanzogui/build": "8.3.2",
+    "react": "19.2.8",
+    "react-native": "^0.87.1"
   },
   "peerDependencies": {
-    "react": ">=19"
+    "react": ">=19.2.8"
   },
   "module:jsx": "dist/jsx",
   "repository": {

package/src/index.ts

@@ -1 +1 @@
-export * from './Avatar'
+export * from './Avatar.tsx'

package/types/Avatar.d.ts

@@ -21,7 +21,7 @@ type AvatarFallbackProps = GetProps<typeof AvatarFallbackFrame> & AvatarFallback
 declare const AvatarFallback: import("@hanzogui/web").GuiComponent<Omit<import("@hanzogui/web").GetFinalProps<import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | SizeTokens | undefined;
     fullscreen?: boolean | undefined;
-}>, "delayMs" | "__scopeAvatar"> & AvatarFallbackExtraProps & {
+}>, "__scopeAvatar" | "delayMs"> & AvatarFallbackExtraProps & {
     __scopeAvatar?: Scope;
 }, GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps & AvatarFallbackExtraProps & {
     __scopeAvatar?: Scope;
@@ -30,14 +30,14 @@ declare const AvatarFallback: import("@hanzogui/web").GuiComponent<Omit<import("
     fullscreen?: boolean | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
 export declare const AvatarFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    bordered?: boolean | undefined;
+    chromeless?: "all" | boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | 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/web").StaticConfigPublic & {
     memo: true;
 }>;
@@ -57,33 +57,33 @@ type AvatarProps = GetProps<typeof AvatarFrame>;
  * </Avatar>
  * ```
  */
-declare const Avatar: React.ForwardRefExoticComponent<Omit<import("@hanzogui/core").RNGuiViewNonStyleProps, "size" | "elevation" | keyof import("@hanzogui/web").StackStyleBase | "fullscreen" | "transparent" | "circular" | "elevate" | "bordered" | "chromeless"> & import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & {
+declare const Avatar: React.ForwardRefExoticComponent<Omit<import("@hanzogui/core").RNGuiViewNonStyleProps, "bordered" | "chromeless" | "circular" | "elevate" | "elevation" | "fullscreen" | "size" | "transparent" | keyof import("@hanzogui/web").StackStyleBase> & import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & {
+    bordered?: boolean | undefined;
+    chromeless?: "all" | boolean | undefined;
+    circular?: boolean | undefined;
+    elevate?: boolean | undefined;
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
     size?: number | import("@hanzogui/web").SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
+} & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>> & import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & {
+    bordered?: boolean | undefined;
+    chromeless?: "all" | boolean | undefined;
     circular?: boolean | undefined;
     elevate?: boolean | undefined;
-    bordered?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
-} & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>> & import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase> & {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
     size?: number | import("@hanzogui/web").SizeTokens | undefined;
     transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
+} & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> & import("@hanzogui/web").WithMediaProps<import("@hanzogui/web").WithThemeShorthandsAndPseudos<import("@hanzogui/web").StackStyleBase, {
+    bordered?: boolean | undefined;
+    chromeless?: "all" | boolean | undefined;
     circular?: boolean | undefined;
     elevate?: boolean | undefined;
-    bordered?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
-} & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> & import("@hanzogui/web").WithMediaProps<import("@hanzogui/web").WithThemeShorthandsAndPseudos<import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | 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<GuiElement>> & {
     Image: React.ForwardRefExoticComponent<Partial<ImageProps> & {
         onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
@@ -91,7 +91,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Omit<import("@hanzogui/cor
     Fallback: import("@hanzogui/web").GuiComponent<Omit<import("@hanzogui/web").GetFinalProps<import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
         elevation?: number | SizeTokens | undefined;
         fullscreen?: boolean | undefined;
-    }>, "delayMs" | "__scopeAvatar"> & AvatarFallbackExtraProps & {
+    }>, "__scopeAvatar" | "delayMs"> & AvatarFallbackExtraProps & {
         __scopeAvatar?: Scope;
     }, GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps & AvatarFallbackExtraProps & {
         __scopeAvatar?: Scope;

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,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEtE,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;oCA2E7D,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,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEtE,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;oCA2E7D,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;;;;;;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;;;;;;;CA4LhD,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

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

package/types/index.d.ts.map

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

package/dist/cjs/Avatar.cjs

@@ -1,160 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
-var Avatar_exports = {};
-__export(Avatar_exports, {
-  Avatar: () => Avatar,
-  AvatarFallback: () => AvatarFallback,
-  AvatarFallbackFrame: () => AvatarFallbackFrame,
-  AvatarFrame: () => AvatarFrame,
-  AvatarImage: () => AvatarImage,
-  createAvatarScope: () => createAvatarScope
-});
-module.exports = __toCommonJS(Avatar_exports);
-var import_core = require("@hanzogui/core");
-var import_create_context = require("@hanzogui/create-context");
-var import_helpers = require("@hanzogui/helpers");
-var import_image = require("@hanzogui/image");
-var import_shapes = require("@hanzogui/shapes");
-var import_stacks = require("@hanzogui/stacks");
-var React = __toESM(require("react"), 1);
-var import_jsx_runtime = require("react/jsx-runtime");
-const AVATAR_NAME = "Avatar";
-const [createAvatarContext, createAvatarScope] = (0, import_create_context.createContextScope)(AVATAR_NAME);
-const [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
-const IMAGE_NAME = "AvatarImage";
-const AvatarImage = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAvatar,
-    src,
-    source,
-    onLoadingStatusChange = () => {},
-    ...imageProps
-  } = props;
-  const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
-  const [status, setStatus] = React.useState("idle");
-  const resolvedSrc = src || (source && typeof source === "object" && "uri" in source ? source.uri : source);
-  React.useEffect(() => {
-    if (!resolvedSrc) {
-      setStatus("error");
-    } else {
-      setStatus("idle");
-    }
-  }, [resolvedSrc]);
-  React.useEffect(() => {
-    onLoadingStatusChange(status);
-    context.onImageLoadingStatusChange(status);
-  }, [status]);
-  if (!resolvedSrc) {
-    return null;
-  }
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
-    fullscreen: true,
-    zIndex: 1,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_image.Image, {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      objectFit: "cover",
-      width: "100%",
-      height: "100%",
-      ...imageProps,
-      ref: forwardedRef,
-      src: resolvedSrc,
-      onError: () => {
-        setStatus("error");
-      },
-      onLoad: () => {
-        setStatus("loaded");
-      }
-    })
-  });
-});
-AvatarImage.displayName = IMAGE_NAME;
-const FALLBACK_NAME = "AvatarFallback";
-const AvatarFallbackFrame = (0, import_core.styled)(import_stacks.YStack, {
-  name: FALLBACK_NAME,
-  position: "absolute",
-  fullscreen: true,
-  zIndex: 0
-});
-const AvatarFallback = AvatarFallbackFrame.styleable((props, forwardedRef) => {
-  const {
-    __scopeAvatar,
-    delayMs,
-    ...fallbackProps
-  } = props;
-  const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
-  const [canRender, setCanRender] = React.useState(delayMs === void 0);
-  React.useEffect(() => {
-    if (delayMs !== void 0) {
-      const timerId = setTimeout(() => setCanRender(true), delayMs);
-      return () => clearTimeout(timerId);
-    }
-  }, [delayMs]);
-  return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarFallbackFrame, {
-    ...fallbackProps,
-    ref: forwardedRef
-  }) : null;
-});
-AvatarFallback.displayName = FALLBACK_NAME;
-const AvatarFrame = (0, import_core.styled)(import_shapes.Square, {
-  name: AVATAR_NAME,
-  position: "relative",
-  overflow: "hidden"
-});
-const Avatar = (0, import_helpers.withStaticProperties)(React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAvatar,
-    size = "$true",
-    ...avatarProps
-  } = props;
-  const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarProvider, {
-    size,
-    scope: __scopeAvatar,
-    imageLoadingStatus,
-    onImageLoadingStatusChange: setImageLoadingStatus,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AvatarFrame, {
-      size,
-      ...avatarProps,
-      ref: forwardedRef
-    })
-  });
-}), {
-  Image: AvatarImage,
-  Fallback: AvatarFallback
-});
-Avatar.displayName = AVATAR_NAME;