'use strict';

var React = require('react');
var index = require('../../../../../@radix-ui_react-context@1.1.2_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.cjs');
var index$2 = require('../../../../../@radix-ui_react-use-callback-ref@1.1.1_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-use-callback-ref/dist/index.cjs');
var index$3 = require('../../../../../@radix-ui_react-use-layout-effect@1.1.1_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-use-layout-effect/dist/index.cjs');
var index$1 = require('../../../../../@radix-ui_react-primitive@2.1.3_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3._wizft3keermhycaiqreghf4gsi/node_modules/@radix-ui/react-primitive/dist/index.cjs');
var index$4 = require('../../../../../@radix-ui_react-use-is-hydrated@0.1.0_@types_react@18.2.12_react@18.2.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.cjs');
var jsxRuntime = require('../../../../../react@18.2.0/node_modules/react/jsx-runtime.cjs');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);

var AVATAR_NAME = "Avatar";
var [createAvatarContext, createAvatarScope] = index.createContextScope(AVATAR_NAME);
var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
var Avatar = React__namespace.forwardRef(
  (props, forwardedRef) => {
    const { __scopeAvatar, ...avatarProps } = props;
    const [imageLoadingStatus, setImageLoadingStatus] = React__namespace.useState("idle");
    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
      AvatarProvider,
      {
        scope: __scopeAvatar,
        imageLoadingStatus,
        onImageLoadingStatusChange: setImageLoadingStatus,
        children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.Primitive.span, { ...avatarProps, ref: forwardedRef })
      }
    );
  }
);
Avatar.displayName = AVATAR_NAME;
var IMAGE_NAME = "AvatarImage";
var AvatarImage = React__namespace.forwardRef(
  (props, forwardedRef) => {
    const { __scopeAvatar, src, onLoadingStatusChange = () => {
    }, ...imageProps } = props;
    const context = useAvatarContext(IMAGE_NAME, __scopeAvatar);
    const imageLoadingStatus = useImageLoadingStatus(src, imageProps);
    const handleLoadingStatusChange = index$2.useCallbackRef((status) => {
      onLoadingStatusChange(status);
      context.onImageLoadingStatusChange(status);
    });
    index$3.useLayoutEffect(() => {
      if (imageLoadingStatus !== "idle") {
        handleLoadingStatusChange(imageLoadingStatus);
      }
    }, [imageLoadingStatus, handleLoadingStatusChange]);
    return imageLoadingStatus === "loaded" ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.Primitive.img, { ...imageProps, ref: forwardedRef, src }) : null;
  }
);
AvatarImage.displayName = IMAGE_NAME;
var FALLBACK_NAME = "AvatarFallback";
var AvatarFallback = React__namespace.forwardRef(
  (props, forwardedRef) => {
    const { __scopeAvatar, delayMs, ...fallbackProps } = props;
    const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
    const [canRender, setCanRender] = React__namespace.useState(delayMs === void 0);
    React__namespace.useEffect(() => {
      if (delayMs !== void 0) {
        const timerId = window.setTimeout(() => setCanRender(true), delayMs);
        return () => window.clearTimeout(timerId);
      }
    }, [delayMs]);
    return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index$1.Primitive.span, { ...fallbackProps, ref: forwardedRef }) : null;
  }
);
AvatarFallback.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 = index$4.useIsHydrated();
  const imageRef = React__namespace.useRef(null);
  const image = (() => {
    if (!isHydrated) return null;
    if (!imageRef.current) {
      imageRef.current = new window.Image();
    }
    return imageRef.current;
  })();
  const [loadingStatus, setLoadingStatus] = React__namespace.useState(
    () => resolveLoadingStatus(image, src)
  );
  index$3.useLayoutEffect(() => {
    setLoadingStatus(resolveLoadingStatus(image, src));
  }, [image, src]);
  index$3.useLayoutEffect(() => {
    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;
var Image = AvatarImage;
var Fallback = AvatarFallback;

exports.Avatar = Avatar;
exports.AvatarFallback = AvatarFallback;
exports.AvatarImage = AvatarImage;
exports.Fallback = Fallback;
exports.Image = Image;
exports.Root = Root;
exports.createAvatarScope = createAvatarScope;
//# sourceMappingURL=index.cjs.map
