import { jsx as m } from "react/jsx-runtime";
import { a as p } from "../index-BmAFn37q.mjs";
import * as g from "react";
import { useState as k, useEffect as B } from "react";
import { a as b } from "../Slot-C98rL4yy.mjs";
import { PenOutline as O } from "@spark-ui/icons/PenOutline";
import { I as R } from "../Icon-D1RueiPY.mjs";
import { I as E } from "../IconButton-BY3gYXtU.mjs";
const z = g.createContext(void 0), f = () => {
  const t = g.useContext(z);
  if (!t)
    throw new Error("useAvatarContext must be used within an Avatar component");
  return t;
}, N = {
  xs: 24,
  sm: 32,
  md: 40,
  lg: 56,
  xl: 64,
  // default
  "2xl": 96
}, C = g.forwardRef(
  ({
    className: t,
    size: a = "xl",
    isOnline: n = !1,
    onlineText: e,
    username: s,
    asChild: l,
    children: i,
    shape: c = "circle",
    ...o
  }, u) => {
    const d = l ? b : "div", r = g.useMemo(
      () => ({
        size: a,
        isOnline: n,
        onlineText: e,
        username: s,
        shape: c,
        pixelSize: N[a]
      }),
      [a, n, s, c, e]
    );
    return /* @__PURE__ */ m(z.Provider, { value: r, children: /* @__PURE__ */ m(
      d,
      {
        ref: u,
        style: {
          width: N[a],
          height: N[a]
        },
        "data-spark-component": "avatar",
        className: p("relative inline-flex items-center justify-center", t),
        ...o,
        children: i
      }
    ) });
  }
);
C.displayName = "Avatar";
const I = ({
  className: t,
  asChild: a,
  src: n,
  onLoad: e,
  onError: s,
  ...l
}) => {
  const { username: i, isOnline: c, onlineText: o } = f(), u = a ? b : "img", [d, r] = k(!1), y = c && o ? `${i} (${o})` : i;
  if (B(() => {
    r(!1);
  }, [n]), !n)
    return null;
  const h = (A) => {
    r(!0), e?.(A);
  }, x = (A) => {
    r(!1), s?.(A);
  };
  return /* @__PURE__ */ m(
    u,
    {
      "aria-hidden": !0,
      className: p(
        "absolute inset-0 size-full",
        "object-cover",
        { "transition-all duration-300 group-hover:scale-120": l.onClick },
        "focus-visible:u-outline",
        d ? "block" : "hidden",
        t
      ),
      alt: y,
      src: n,
      onLoad: h,
      onError: x,
      ...l
    }
  );
};
I.displayName = "AvatarImage";
const P = ({
  className: t,
  children: a,
  asChild: n,
  angle: e = 135,
  ariaLabel: s,
  ...l
}) => {
  const i = n ? b : E, { pixelSize: c, shape: o } = f();
  function u(y) {
    const h = (90 - e) * Math.PI / 180, x = y / 2;
    return {
      x: x + x * Math.cos(h),
      y: x - x * Math.sin(h)
    };
  }
  const d = u(c), r = n;
  return /* @__PURE__ */ m(
    i,
    {
      "data-spark-component": "avatar-action",
      style: {
        position: "absolute",
        ...o === "circle" ? { left: `${d.x}px`, top: `${d.y}px` } : {},
        ...o === "square" ? { right: "0px", bottom: "0px" } : {}
      },
      className: p(
        "z-raised",
        o === "circle" ? "-translate-x-1/2 -translate-y-1/2" : "translate-x-1/4 translate-y-1/4",
        { "shadow-sm": !r },
        t
      ),
      "aria-label": s,
      title: s,
      ...r ? {} : { size: "sm", intent: "support", design: "contrast" },
      ...l,
      children: a || /* @__PURE__ */ m(R, { size: "sm", children: /* @__PURE__ */ m(O, {}) })
    }
  );
};
P.displayName = "AvatarAction";
const M = ({ angle: t = 135, ...a }) => {
  const { isOnline: n, pixelSize: e, shape: s, onlineText: l, size: i } = f();
  if (!n) return null;
  function c(u) {
    const d = (90 - t) * Math.PI / 180, r = u / 2;
    return {
      x: r + r * Math.cos(d),
      y: r - r * Math.sin(d)
    };
  }
  const o = c(e);
  return /* @__PURE__ */ m(
    "div",
    {
      "data-spark-component": "avatar-online-badge",
      role: "status",
      "aria-label": l,
      style: {
        ...s === "circle" ? { left: `${o.x}px`, top: `${o.y}px` } : { right: "0px", bottom: "0px" }
      },
      className: p(
        "bg-success outline-surface absolute rounded-full",
        s === "circle" ? "-translate-x-1/2 -translate-y-1/2" : "translate-x-1/4 translate-y-1/4",
        ["lg", "xl", "2xl"].includes(i) ? p("size-sz-12 outline-4") : p("size-sz-8 outline-2")
      ),
      ...a
    }
  );
};
M.displayName = "AvatarOnlineBadge";
const $ = ({ asChild: t, children: a, className: n, ...e }) => {
  const { shape: s, isOnline: l, onlineText: i, username: c } = f(), o = t ? b : "div", u = l && i ? `${c} (${i})` : c;
  return /* @__PURE__ */ m(
    o,
    {
      ...!t && { role: "img" },
      "aria-label": u,
      title: u,
      className: p(
        "group default:border-outline relative size-full overflow-hidden",
        "focus-visible:u-outline",
        {
          "default:rounded-full": s === "circle",
          "default:rounded-md": s === "square",
          "hover:opacity-dim-1 cursor-pointer": t || e.onClick
        },
        n
      ),
      ...e,
      children: a
    }
  );
};
$.displayName = "AvatarUser";
const w = ({ className: t, children: a, ...n }) => {
  const { size: e, username: s } = f(), l = s?.charAt(0);
  return /* @__PURE__ */ m(
    "div",
    {
      "aria-hidden": !0,
      className: p(
        "absolute inset-0 flex size-full items-center justify-center",
        "default:bg-neutral default:text-on-neutral",
        {
          "text-display-1": e === "2xl",
          "text-display-2": ["xl", "lg"].includes(e),
          "text-display-3": e === "md",
          "text-headline-2": e === "sm",
          "text-body-2 font-bold": e === "xs"
        },
        t
      ),
      ...n,
      children: a || l
    }
  );
};
w.displayName = "AvatarPlaceholder";
const v = C;
v.Image = I;
v.Action = P;
v.OnlineBadge = M;
v.User = $;
v.Placeholder = w;
export {
  v as Avatar
};
//# sourceMappingURL=index.mjs.map
