@lanaco/lnc-react-ui/dist/Avatar.js

React component library

import { jsx as s } from "react/jsx-runtime";
import { forwardRef as U } from "react";
import { s as I } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { b, e as i, i as $, c as v } from "./utils-BUdHa0nB.js";
import y from "./Icon.js";
import { u as w } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const R = I.div`
  border-radius: ${(e) => b(e.theme, e.borderRadius)};
  color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
  width: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
  ${(e) => e.disabled === !0 && $(e.theme)};
  background-color: ${(e) => !e.disabled && v(e.theme, "Chip", e.color, "enabled", "text")};
  overflow: hidden;
  & img {
    height: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
    width: ${(e) => e.sizeInUnits ? e.sizeInUnits : i(e.theme, e.size)};
  }
`, B = U((e, r) => {
  const {
    image: n,
    icon: l = "user",
    sizeInUnits: t,
    borderRadius: m = "curved",
    //----------------
    onFocus: o = () => {
    },
    onBlur: d = () => {
    },
    onClick: c = () => {
    },
    //----------------
    size: a = "small",
    color: h = "primary",
    className: u = "",
    style: z = {},
    ...f
  } = e, g = {
    theme: w(),
    color: h,
    style: z,
    size: a,
    sizeInUnits: t,
    className: "lnc-ui-avatar " + u
  };
  return /* @__PURE__ */ s(
    R,
    {
      ref: r,
      ...g,
      borderRadius: m,
      onClick: c,
      onFocus: o,
      onBlur: d,
      ...f,
      children: n ? /* @__PURE__ */ s("img", { src: n }) : /* @__PURE__ */ s(
        y,
        {
          icon: l,
          size: a,
          sizeInUnits: t ? `calc(${t} / 2)` : null
        }
      )
    }
  );
});
export {
  B as default
};