welcome-ui/dist/Avatar.js

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

"use client";
import { jsx as n } from "react/jsx-runtime";
import { forwardRef as i } from "react";
import { c as _ } from "./index-PAaZGbyz.js";
const l = "_root_zm5un_2", u = {
  root: l,
  "size-sm": "_size-sm_zm5un_24",
  "size-md": "_size-md_zm5un_27",
  "size-lg": "_size-lg_zm5un_30",
  "size-xl": "_size-xl_zm5un_33",
  "size-xxl": "_size-xxl_zm5un_36",
  "background-secondary-blue": "_background-secondary-blue_zm5un_39",
  "background-secondary-green": "_background-secondary-green_zm5un_42",
  "background-secondary-orange": "_background-secondary-orange_zm5un_45",
  "background-secondary-pink": "_background-secondary-pink_zm5un_48",
  "background-secondary-teal": "_background-secondary-teal_zm5un_51",
  "background-secondary-violet": "_background-secondary-violet_zm5un_54"
};
function g(e = "") {
  const [o, r] = e.split(" ");
  return o && r ? `${o.charAt(0).toUpperCase()}${r.charAt(0).toUpperCase()}` : o.substring(0, 2).toUpperCase();
}
const m = (e = "") => {
  const o = e.length % t.length;
  return t[o];
}, z = _(u), t = [
  "secondary-blue",
  "secondary-green",
  "secondary-orange",
  "secondary-pink",
  "secondary-teal",
  "secondary-violet"
], p = i(
  ({ className: e, getInitials: o = g, name: r, size: s = "md", src: a }, d) => {
    const c = m(r);
    return /* @__PURE__ */ n(
      "div",
      {
        "aria-label": r,
        className: z("root", s && `size-${s}`, c && `background-${c}`, e),
        ref: d,
        role: "img",
        children: a ? /* @__PURE__ */ n("img", { alt: r, src: a }) : /* @__PURE__ */ n("p", { children: o(r) })
      }
    );
  }
);
export {
  p as Avatar,
  t as colors
};