welcome-ui/dist/Avatar.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as s } from "./jsx-runtime-B7I4PJ0H.mjs";
import m, { th as g, useTheme as j } from "@xstyled/styled-components";
import { memo as v } from "react";
import { Box as y } from "./Box.mjs";
import { forwardRef as C } from "./System.mjs";
import { Shape as $ } from "./Shape.mjs";
import { Text as b } from "./Text.mjs";
const A = m($)`
  flex-shrink: 0;
`, z = m(b)`
  ${g("avatars.text")};
`;
function S(e, t = "") {
  const r = Object.keys(e).filter((o) => o.startsWith("secondary-")), a = t.length % r.length;
  return r[a];
}
function T(e = "") {
  const [t, r] = e.split(" ");
  return t && r ? `${t.charAt(0).toUpperCase()}${r.charAt(0).toUpperCase()}` : t.substring(0, 2).toUpperCase();
}
const k = v(
  C(
    ({
      color: e,
      fontSize: t,
      getInitials: r = T,
      h: a,
      name: o,
      shape: p = "circle",
      size: f = "md",
      src: i,
      w: n,
      ...h
    }, x) => {
      const l = j(), u = e || S(l.colors, o), c = l.avatars.sizes[f], d = t || `calc(${n ? l.toRem(n) : c} / 2.5)`;
      return /* @__PURE__ */ s.jsxs(
        A,
        {
          "aria-label": o,
          backgroundColor: u,
          h: a || c,
          ref: x,
          role: "img",
          shape: p,
          w: n || c,
          ...h,
          children: [
            i ? /* @__PURE__ */ s.jsx("img", { alt: o, src: i }) : null,
            !i && /* @__PURE__ */ s.jsx(y, { children: /* @__PURE__ */ s.jsx(z, { fontSize: d, m: 0, children: r(o) }) })
          ]
        }
      );
    }
  )
);
k.displayName = "Avatar";
export {
  k as Avatar
};