@lunalytics/ui/dist/components/avatar/avatar.js

React based component library created to be used in Lunalytics

import { jsx as f, jsxs as S } from "react/jsx-runtime";
import * as o from "react";
import { u as p, a as y, b as L, c as M } from "../../useTimeout-BZrhyGBQ.js";
import { N as w } from "../../noop-D0ZWT7db.js";
import '../../assets/avatar.css';const g = /* @__PURE__ */ o.createContext(void 0);
process.env.NODE_ENV !== "production" && (g.displayName = "AvatarRootContext");
function E() {
  const n = o.useContext(g);
  if (n === void 0)
    throw new Error("Base UI: AvatarRootContext is missing. Avatar parts must be placed within <Avatar.Root>.");
  return n;
}
const v = {
  imageLoadingStatus: () => null
}, R = /* @__PURE__ */ o.forwardRef(function(e, i) {
  const {
    className: l,
    render: u,
    ...a
  } = e, [t, r] = o.useState("idle"), c = o.useMemo(() => ({
    imageLoadingStatus: t
  }), [t]), d = o.useMemo(() => ({
    imageLoadingStatus: t,
    setImageLoadingStatus: r
  }), [t, r]), s = p("span", e, {
    state: c,
    ref: i,
    props: a,
    customStyleHookMapping: v
  });
  return /* @__PURE__ */ f(g.Provider, {
    value: d,
    children: s
  });
});
process.env.NODE_ENV !== "production" && (R.displayName = "AvatarRoot");
function C(n, {
  referrerPolicy: e,
  crossOrigin: i
}) {
  const [l, u] = o.useState("idle");
  return y(() => {
    if (!n)
      return u("error"), w;
    let a = !0;
    const t = new window.Image(), r = (c) => () => {
      a && u(c);
    };
    return u("loading"), t.onload = r("loaded"), t.onerror = r("error"), e && (t.referrerPolicy = e), t.crossOrigin = i ?? null, t.src = n, () => {
      a = !1;
    };
  }, [n, i, e]), l;
}
const x = /* @__PURE__ */ o.forwardRef(function(e, i) {
  const {
    className: l,
    render: u,
    onLoadingStatusChange: a,
    referrerPolicy: t,
    crossOrigin: r,
    ...c
  } = e, d = E(), s = C(e.src, {
    referrerPolicy: t,
    crossOrigin: r
  }), m = L((A) => {
    a == null || a(A), d.setImageLoadingStatus(A);
  });
  y(() => {
    s !== "idle" && m(s);
  }, [s, m]);
  const N = o.useMemo(() => ({
    imageLoadingStatus: s
  }), [s]);
  return p("img", e, {
    state: N,
    ref: i,
    props: c,
    customStyleHookMapping: v,
    enabled: s === "loaded"
  });
});
process.env.NODE_ENV !== "production" && (x.displayName = "AvatarImage");
const h = /* @__PURE__ */ o.forwardRef(function(e, i) {
  const {
    className: l,
    render: u,
    delay: a,
    ...t
  } = e, {
    imageLoadingStatus: r
  } = E(), [c, d] = o.useState(a === void 0), s = M();
  o.useEffect(() => (a !== void 0 && s.start(a, () => d(!0)), s.clear), [s, a]);
  const m = o.useMemo(() => ({
    imageLoadingStatus: r
  }), [r]);
  return p("span", e, {
    state: m,
    ref: i,
    props: t,
    customStyleHookMapping: v,
    enabled: r !== "loaded" && c
  });
});
process.env.NODE_ENV !== "production" && (h.displayName = "AvatarFallback");
const b = ({ avatar: n, name: e, showName: i = !0, ...l }) => {
  var u;
  return /* @__PURE__ */ S("div", { className: "luna-avatar-container", ...l, children: [
    /* @__PURE__ */ S(R, { children: [
      /* @__PURE__ */ f(x, { src: n, className: "luna-avatar" }),
      /* @__PURE__ */ f(h, { className: "luna-avatar-default", children: (u = e == null ? void 0 : e.charAt(0)) == null ? void 0 : u.toUpperCase() })
    ] }),
    i && /* @__PURE__ */ f("div", { className: "luna-avatar-username", children: e })
  ] });
};
b.displayName = "Avatar";
export {
  b as default
};