"use client";
import { jsx as d } from "react/jsx-runtime";
import { cn as c } from "../../../lib/utils.js";
import * as o from "react";
import { f as w, u as v, N as M } from "../../../useRenderElement-DNB2vtF1.js";
import { u as O } from "../../../useTimeout-DAqPwigF.js";
import { u as V } from "../../../useStableCallback-CudqoENs.js";
import { u as S } from "../../../useIsoLayoutEffect-DpJo20by.js";
import { u as D, a as j, t as _ } from "../../../useOpenChangeComplete-DkeH9FGJ.js";
const b = /* @__PURE__ */ o.createContext(void 0);
process.env.NODE_ENV !== "production" && (b.displayName = "AvatarRootContext");
function h() {
  const t = o.useContext(b);
  if (t === void 0)
    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>." : w(13));
  return t;
}
const z = {
  imageLoadingStatus: () => null
}, E = /* @__PURE__ */ o.forwardRef(function(a, n) {
  const {
    className: f,
    render: l,
    ...r
  } = a, [e, i] = o.useState("idle"), u = {
    imageLoadingStatus: e
  }, g = o.useMemo(() => ({
    imageLoadingStatus: e,
    setImageLoadingStatus: i
  }), [e, i]), s = v("span", a, {
    state: u,
    ref: n,
    props: r,
    stateAttributesMapping: z
  });
  return /* @__PURE__ */ d(b.Provider, {
    value: g,
    children: s
  });
});
process.env.NODE_ENV !== "production" && (E.displayName = "AvatarRoot");
function F(t, {
  referrerPolicy: a,
  crossOrigin: n
}) {
  const [f, l] = o.useState("idle");
  return S(() => {
    if (!t)
      return l("error"), M;
    let r = !0;
    const e = new window.Image(), i = (u) => () => {
      r && l(u);
    };
    return l("loading"), e.onload = i("loaded"), e.onerror = i("error"), a && (e.referrerPolicy = a), e.crossOrigin = n ?? null, e.src = t, () => {
      r = !1;
    };
  }, [t, n, a]), f;
}
const P = {
  ...z,
  ..._
}, R = /* @__PURE__ */ o.forwardRef(function(a, n) {
  const {
    className: f,
    render: l,
    onLoadingStatusChange: r,
    referrerPolicy: e,
    crossOrigin: i,
    ...u
  } = a, g = h(), s = F(a.src, {
    referrerPolicy: e,
    crossOrigin: i
  }), m = s === "loaded", {
    mounted: p,
    transitionStatus: k,
    setMounted: y
  } = D(m), x = o.useRef(null), A = V((N) => {
    r?.(N), g.setImageLoadingStatus(N);
  });
  S(() => {
    s !== "idle" && A(s);
  }, [s, A]);
  const L = {
    imageLoadingStatus: s,
    transitionStatus: k
  };
  j({
    open: m,
    ref: x,
    onComplete() {
      m || y(!1);
    }
  });
  const I = v("img", a, {
    state: L,
    ref: [n, x],
    props: u,
    stateAttributesMapping: P,
    enabled: p
  });
  return p ? I : null;
});
process.env.NODE_ENV !== "production" && (R.displayName = "AvatarImage");
const C = /* @__PURE__ */ o.forwardRef(function(a, n) {
  const {
    className: f,
    render: l,
    delay: r,
    ...e
  } = a, {
    imageLoadingStatus: i
  } = h(), [u, g] = o.useState(r === void 0), s = O();
  return o.useEffect(() => (r !== void 0 && s.start(r, () => g(!0)), s.clear), [s, r]), v("span", a, {
    state: {
      imageLoadingStatus: i
    },
    ref: n,
    props: e,
    stateAttributesMapping: z,
    enabled: i !== "loaded" && u
  });
});
process.env.NODE_ENV !== "production" && (C.displayName = "AvatarFallback");
function J({
  className: t,
  size: a = "default",
  ...n
}) {
  return /* @__PURE__ */ d(
    E,
    {
      className: c(
        "group/avatar relative flex size-8 shrink-0 select-none rounded-full 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",
        t
      ),
      "data-size": a,
      "data-slot": "avatar",
      ...n
    }
  );
}
function K({ className: t, ...a }) {
  return /* @__PURE__ */ d(
    R,
    {
      className: c(
        "aspect-square size-full rounded-full object-cover",
        t
      ),
      "data-slot": "avatar-image",
      ...a
    }
  );
}
function Q({
  className: t,
  ...a
}) {
  return /* @__PURE__ */ d(
    C,
    {
      className: c(
        "flex size-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",
        t
      ),
      "data-slot": "avatar-fallback",
      ...a
    }
  );
}
function W({ className: t, ...a }) {
  return /* @__PURE__ */ d(
    "span",
    {
      className: c(
        "absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background",
        "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",
        t
      ),
      "data-slot": "avatar-badge",
      ...a
    }
  );
}
function X({ className: t, ...a }) {
  return /* @__PURE__ */ d(
    "div",
    {
      className: c(
        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
        t
      ),
      "data-slot": "avatar-group",
      ...a
    }
  );
}
function Y({
  className: t,
  ...a
}) {
  return /* @__PURE__ */ d(
    "div",
    {
      className: c(
        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm 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",
        t
      ),
      "data-slot": "avatar-group-count",
      ...a
    }
  );
}
export {
  J as Avatar,
  W as AvatarBadge,
  Q as AvatarFallback,
  X as AvatarGroup,
  Y as AvatarGroupCount,
  K as AvatarImage
};
