ivt/dist/avatar/index.mjs

Ivt Components Library

import * as React from 'react';
import { c as createContextScope } from '../chunks/index-DT8WgpCS.mjs';
import { u as useCallbackRef } from '../chunks/index-Cbm3--wc.mjs';
import { u as useLayoutEffect2 } from '../chunks/index-DKOlG3mh.mjs';
import { P as Primitive } from '../chunks/index-DgKlJYZP.mjs';
import { r as requireShim } from '../chunks/index-korrz_kD.mjs';
import { jsx } from 'react/jsx-runtime';
import { c as cn } from '../chunks/utils-05LlW3Cl.mjs';
import 'react-dom';
import '@radix-ui/react-slot';
import '../chunks/bundle-mjs-BYcyWisL.mjs';

var shimExports = requireShim();

// src/use-is-hydrated.tsx
function useIsHydrated() {
    return shimExports.useSyncExternalStore(subscribe, ()=>true, ()=>false);
}
function subscribe() {
    return ()=>{};
}

var AVATAR_NAME = "Avatar";
var [createAvatarContext] = createContextScope(AVATAR_NAME);
var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
var Avatar$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAvatar, ...avatarProps } = props;
    const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
    return /* @__PURE__ */ jsx(AvatarProvider, {
        scope: __scopeAvatar,
        imageLoadingStatus,
        onImageLoadingStatusChange: setImageLoadingStatus,
        children: /* @__PURE__ */ jsx(Primitive.span, {
            ...avatarProps,
            ref: forwardedRef
        })
    });
});
Avatar$1.displayName = AVATAR_NAME;
var IMAGE_NAME = "AvatarImage";
var AvatarImage$1 = React.forwardRef((props, forwardedRef)=>{
    const { __scopeAvatar, src, onLoadingStatusChange = ()=>{}, ...imageProps } = props;
    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
    const imageLoadingStatus = useImageLoadingStatus(src, imageProps);
    const handleLoadingStatusChange = useCallbackRef((status)=>{
        onLoadingStatusChange(status);
        context.onImageLoadingStatusChange(status);
    });
    useLayoutEffect2(()=>{
        if (imageLoadingStatus !== "idle") {
            handleLoadingStatusChange(imageLoadingStatus);
        }
    }, [
        imageLoadingStatus,
        handleLoadingStatusChange
    ]);
    return imageLoadingStatus === "loaded" ? /* @__PURE__ */ jsx(Primitive.img, {
        ...imageProps,
        ref: forwardedRef,
        src
    }) : null;
});
AvatarImage$1.displayName = IMAGE_NAME;
var FALLBACK_NAME = "AvatarFallback";
var AvatarFallback$1 = React.forwardRef((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 = window.setTimeout(()=>setCanRender(true), delayMs);
            return ()=>window.clearTimeout(timerId);
        }
    }, [
        delayMs
    ]);
    return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ jsx(Primitive.span, {
        ...fallbackProps,
        ref: forwardedRef
    }) : null;
});
AvatarFallback$1.displayName = FALLBACK_NAME;
function resolveLoadingStatus(image, src) {
    if (!image) {
        return "idle";
    }
    if (!src) {
        return "error";
    }
    if (image.src !== src) {
        image.src = src;
    }
    return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
}
function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
    const isHydrated = useIsHydrated();
    const imageRef = React.useRef(null);
    const image = (()=>{
        if (!isHydrated) return null;
        if (!imageRef.current) {
            imageRef.current = new window.Image();
        }
        return imageRef.current;
    })();
    const [loadingStatus, setLoadingStatus] = React.useState(()=>resolveLoadingStatus(image, src));
    useLayoutEffect2(()=>{
        setLoadingStatus(resolveLoadingStatus(image, src));
    }, [
        image,
        src
    ]);
    useLayoutEffect2(()=>{
        const updateStatus = (status)=>()=>{
                setLoadingStatus(status);
            };
        if (!image) return;
        const handleLoad = updateStatus("loaded");
        const handleError = updateStatus("error");
        image.addEventListener("load", handleLoad);
        image.addEventListener("error", handleError);
        if (referrerPolicy) {
            image.referrerPolicy = referrerPolicy;
        }
        if (typeof crossOrigin === "string") {
            image.crossOrigin = crossOrigin;
        }
        return ()=>{
            image.removeEventListener("load", handleLoad);
            image.removeEventListener("error", handleError);
        };
    }, [
        image,
        crossOrigin,
        referrerPolicy
    ]);
    return loadingStatus;
}
var Root = Avatar$1;
var Image = AvatarImage$1;
var Fallback = AvatarFallback$1;

function Avatar({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Root, {
        "data-slot": "avatar",
        className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
        ...props
    });
}
function AvatarImage({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Image, {
        "data-slot": "avatar-image",
        className: cn("aspect-square h-full w-full", className),
        ...props
    });
}
function AvatarFallback({ className, ...props }) {
    return /*#__PURE__*/ React.createElement(Fallback, {
        "data-slot": "avatar-fallback",
        className: cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className),
        ...props
    });
}

export { Avatar, AvatarFallback, AvatarImage };
//# sourceMappingURL=index.mjs.map