import { defineComponent as v, useAttrs as f, useCssModule as _, computed as c, openBlock as i, createElementBlock as d, mergeProps as u, unref as e, toDisplayString as h } from "vue";
import { getColorScheme as b } from "@leaflink/stash-utils/colorScheme";
import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const C = ["alt", "src", "tabindex"], x = ["tabindex"], g = /* @__PURE__ */ v({
  name: "ll-avatar",
  __name: "Avatar",
  props: {
    name: { default: "" },
    colorScheme: { default: "ice" },
    shade: { default: "light" },
    src: { default: void 0 },
    alt: { default: void 0 },
    bgColor: { default: void 0 },
    textColor: { default: void 0 }
  },
  setup(m) {
    const t = m, s = f(), a = _(), n = c(() => b({
      shade: t.shade,
      color: t.colorScheme
    })), p = c(() => {
      const [l, r] = String(t.name).toUpperCase().split(" ");
      return r ? l.charAt(0) + r.charAt(0) : l.charAt(0);
    }), o = c(() => !!s.onClick);
    return (l, r) => t.src ? (i(), d("img", u({
      key: 0,
      class: ["stash-avatar stash-avatar--image inline-block rounded-full", [e(a).root, { [e(a).clickable]: o.value }]],
      alt: t.alt,
      src: t.src,
      tabindex: o.value ? 0 : -1,
      "data-test": "stash-avatar"
    }, e(s)), null, 16, C)) : (i(), d("div", u({
      key: 1,
      class: ["stash-avatar stash-avatar--initials inline-block cursor-default rounded-full text-center font-semibold", [
        e(a).root,
        `text-${t.textColor || n.value.computedTextColor}`,
        `bg-${t.bgColor || n.value.computedBgColor}`,
        { [e(a).clickable]: o.value }
      ]],
      tabindex: o.value ? 0 : -1,
      "data-test": "stash-avatar"
    }, e(s)), h(p.value), 17, x));
  }
}), A = "_root_0A_Gw", y = "_clickable_n-kkm", S = {
  root: A,
  clickable: y
}, B = {
  $style: S
}, D = /* @__PURE__ */ k(g, [["__cssModules", B]]);
export {
  D as default
};
//# sourceMappingURL=Avatar.js.map
