import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { c as createContextScope } from "../../index-voAj_M6Q.js";
import { u as useCallbackRef } from "../../index-BrOBcuY5.js";
import { u as useLayoutEffect2 } from "../../index-C60qVN2n.js";
import { P as Primitive } from "../../index-BEpjRf6p.js";
import { s as shimExports } from "../../index-CrwxnJCP.js";
import { c as cva } from "../../index-BHpUy2Ix.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
function useIsHydrated() {
  return shimExports.useSyncExternalStore(
    subscribe,
    () => true,
    () => false
  );
}
function subscribe() {
  return () => {
  };
}
var AVATAR_NAME = "Avatar";
var [createAvatarContext, createAvatarScope] = 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;
const avatarFallbackVariants = cva(
  "flex h-full w-full items-center justify-center rounded-full font-medium [font-size:max(0.625rem,40cqw)]",
  {
    variants: {
      color: {
        accent: "bg-accent/10 text-accent",
        neutral: "bg-subtle text-subtle",
        red: "bg-red-500/10 text-red-700 dark:text-red-400",
        blue: "bg-blue-500/10 text-blue-700 dark:text-blue-400",
        green: "bg-green-500/10 text-green-700 dark:text-green-400",
        yellow: "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400",
        amber: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
        emerald: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
        purple: "bg-purple-500/10 text-purple-700 dark:text-purple-400"
      }
    },
    defaultVariants: {
      color: "accent"
    }
  }
);
const Avatar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  Root,
  {
    ref,
    "data-slot": "avatar",
    className: cn(
      "relative flex size-8 shrink-0 overflow-hidden rounded-full bg-default @container",
      className
    ),
    ...props
  }
));
Avatar.displayName = Root.displayName;
const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  Image,
  {
    ref,
    "data-slot": "avatar-image",
    className: cn("aspect-square size-full object-cover", className),
    ...props
  }
));
AvatarImage.displayName = Image.displayName;
const AvatarFallback = React.forwardRef(({ className, color, ...props }, ref) => /* @__PURE__ */ jsx(
  Fallback,
  {
    ref,
    "data-slot": "avatar-fallback",
    className: cn(avatarFallbackVariants({ color }), className),
    ...props
  }
));
AvatarFallback.displayName = Fallback.displayName;
const AvatarLegacy = React.forwardRef(({ className, color, src, alt, fallback, ...props }, ref) => {
  if (process.env.NODE_ENV === "development") {
    console.warn(
      "AvatarLegacy is deprecated. Please use the composable pattern with Avatar, AvatarImage, and AvatarFallback components instead."
    );
  }
  return /* @__PURE__ */ jsxs(
    Root,
    {
      ref,
      "data-slot": "avatar",
      className: cn(
        "relative flex size-8 shrink-0 overflow-hidden rounded-full bg-default @container",
        className
      ),
      ...props,
      children: [
        src && /* @__PURE__ */ jsx(
          Image,
          {
            "data-slot": "avatar-image",
            className: "aspect-square size-full object-cover",
            src,
            alt
          }
        ),
        /* @__PURE__ */ jsx(
          Fallback,
          {
            "data-slot": "avatar-fallback",
            className: cn(
              "flex h-full w-full items-center justify-center rounded-full font-medium [font-size:max(0.625rem,40cqw)]",
              avatarFallbackVariants({ color })
            ),
            children: fallback
          }
        )
      ]
    }
  );
});
AvatarLegacy.displayName = "AvatarLegacy";
export {
  Avatar,
  AvatarFallback,
  AvatarImage,
  AvatarLegacy,
  avatarFallbackVariants
};
