'use strict';

var jsxRuntime = require('react/jsx-runtime');
var utils = require('../utils-BhM0B89p.js');
var React = require('react');
var index$4 = require('../index-CGUGhyIp.js');
var index$2 = require('../index-lWVw05cs.js');
var index$3 = require('../index-CCdG4z4E.js');
var index$1 = require('../index-DMbj7vXd.js');
var index = require('../index-DnKJmaCq.js');
require('react-dom');
require('../index-D-iDn9RI.js');
require('../index-BrpkRQoS.js');

function _interopNamespace(e) {
  if (e && e.__esModule) return 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__*/_interopNamespace(React);

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

var AVATAR_NAME = "Avatar";
var [createAvatarContext] = index$4.createContextScope(AVATAR_NAME);
var [AvatarProvider, useAvatarContext] = createAvatarContext(AVATAR_NAME);
var Avatar$2 = React__namespace.forwardRef(
  (props, forwardedRef) => {
    const { __scopeAvatar, ...avatarProps } = props;
    const [imageLoadingStatus, setImageLoadingStatus] = React__namespace.useState("idle");
    return /* @__PURE__ */ jsxRuntime.jsx(
      AvatarProvider,
      {
        scope: __scopeAvatar,
        imageLoadingStatus,
        onImageLoadingStatusChange: setImageLoadingStatus,
        children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Primitive.span, { ...avatarProps, ref: forwardedRef })
      }
    );
  }
);
Avatar$2.displayName = AVATAR_NAME;
var IMAGE_NAME = "AvatarImage";
var AvatarImage$2 = 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.useLayoutEffect2(() => {
      if (imageLoadingStatus !== "idle") {
        handleLoadingStatusChange(imageLoadingStatus);
      }
    }, [imageLoadingStatus, handleLoadingStatusChange]);
    return imageLoadingStatus === "loaded" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Primitive.img, { ...imageProps, ref: forwardedRef, src }) : null;
  }
);
AvatarImage$2.displayName = IMAGE_NAME;
var FALLBACK_NAME = "AvatarFallback";
var AvatarFallback$2 = 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.jsx(index$1.Primitive.span, { ...fallbackProps, ref: forwardedRef }) : null;
  }
);
AvatarFallback$2.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__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.useLayoutEffect2(() => {
    setLoadingStatus(resolveLoadingStatus(image, src));
  }, [image, src]);
  index$3.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$2;
var Image = AvatarImage$2;
var Fallback = AvatarFallback$2;

function Avatar$1({
  className,
  size = "default",
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    Root,
    {
      "data-slot": "avatar",
      "data-size": size,
      className: utils.cn(
        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
        className
      ),
      ...props
    }
  );
}
function AvatarImage$1({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    Image,
    {
      "data-slot": "avatar-image",
      className: utils.cn(
        "aspect-square size-full rounded-full object-cover",
        className
      ),
      ...props
    }
  );
}
function AvatarFallback$1({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    Fallback,
    {
      "data-slot": "avatar-fallback",
      className: utils.cn(
        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
        className
      ),
      ...props
    }
  );
}
function AvatarBadge$1({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "span",
    {
      "data-slot": "avatar-badge",
      className: utils.cn(
        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
        className
      ),
      ...props
    }
  );
}
function AvatarGroup$1({ className, ...props }) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "avatar-group",
      className: utils.cn(
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
        className
      ),
      ...props
    }
  );
}
function AvatarGroupCount$1({
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      "data-slot": "avatar-group-count",
      className: utils.cn(
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
        className
      ),
      ...props
    }
  );
}

const Avatar = (props) => /* @__PURE__ */ jsxRuntime.jsx(Avatar$1, { ...props });
const AvatarImage = (props) => /* @__PURE__ */ jsxRuntime.jsx(AvatarImage$1, { ...props });
const AvatarFallback = (props) => /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback$1, { ...props });
const AvatarBadge = (props) => /* @__PURE__ */ jsxRuntime.jsx(AvatarBadge$1, { ...props });
const AvatarGroup = (props) => /* @__PURE__ */ jsxRuntime.jsx(AvatarGroup$1, { ...props });
const AvatarGroupCount = (props) => /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupCount$1, { ...props });

exports.Avatar = Avatar;
exports.AvatarBadge = AvatarBadge;
exports.AvatarFallback = AvatarFallback;
exports.AvatarGroup = AvatarGroup;
exports.AvatarGroupCount = AvatarGroupCount;
exports.AvatarImage = AvatarImage;
//# sourceMappingURL=Avatar.js.map
