welcome-ui/dist/Avatar.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Avatar.css';
import { jsxs as _, jsx as n } from "react/jsx-runtime";
import { forwardRef as u } from "react";
import { Icon as m } from "./Icon.js";
import { Text as p } from "./Text.js";
import { c as b } from "./index-B6iGEm-i.js";
const y = "_root_4g321_2", h = "_placeholder_4g321_36", k = {
  root: y,
  "size-xs": "_size-xs_4g321_24",
  "size-sm": "_size-sm_4g321_27",
  "size-md": "_size-md_4g321_30",
  "size-lg": "_size-lg_4g321_33",
  placeholder: h,
  "placeholder-icon": "_placeholder-icon_4g321_42",
  "background-secondary-blue": "_background-secondary-blue_4g321_45",
  "background-secondary-green": "_background-secondary-green_4g321_49",
  "background-secondary-orange": "_background-secondary-orange_4g321_53",
  "background-secondary-pink": "_background-secondary-pink_4g321_57",
  "background-secondary-teal": "_background-secondary-teal_4g321_61",
  "background-secondary-violet": "_background-secondary-violet_4g321_65"
}, d = [
  "secondary-blue",
  "secondary-green",
  "secondary-orange",
  "secondary-pink",
  "secondary-teal",
  "secondary-violet"
];
function x(r = "", a) {
  const [o, e] = r.split(" ");
  return a === "xs" || a === "sm" ? o.charAt(0).toUpperCase() : e ? `${o.charAt(0).toUpperCase()}${e.charAt(0).toUpperCase()}` : o.substring(0, 2).toUpperCase();
}
const f = (r) => {
  if (!r) return;
  const a = r.length % d.length;
  return d[a];
}, l = b(k), v = {
  lg: "xxl",
  md: "lg",
  sm: "md",
  xs: "sm"
}, z = {
  lg: "label-xl",
  md: "label-xl",
  sm: "label-lg",
  xs: "label-sm-strong"
}, C = u(
  ({ className: r, getInitials: a = x, name: o, size: e = "md", src: s, ...i }, g) => {
    const c = f(o), t = !s && !o;
    return /* @__PURE__ */ _(
      "div",
      {
        ...i,
        "aria-label": o,
        className: l(
          "root",
          `size-${e}`,
          c && `background-${c}`,
          t && "placeholder",
          r
        ),
        ref: g,
        role: "img",
        children: [
          t ? /* @__PURE__ */ n(m, { className: l("placeholder-icon"), name: "user", size: v[e] }) : null,
          s ? /* @__PURE__ */ n("img", { alt: o, src: s }) : null,
          !s && o ? /* @__PURE__ */ n(p, { as: "span", className: l("initials"), variant: z[e], children: a(o, e) }) : null
        ]
      }
    );
  }
);
C.displayName = "Avatar";
export {
  C as Avatar,
  k as avatarClasses
};