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

React component library

import { jsx as s } from "react/jsx-runtime";
import { forwardRef as I } from "react";
import { P as i } from "./index-S5Cd7WrG.js";
import { n as U } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { a as y, d as t, h as $, b as v } from "./utils-DtRLzzTZ.js";
import w from "./Icon.js";
import { u as R } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const x = U.div`
  border-radius: ${(e) => y(e.theme, e.borderRadius)};
  color: white;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: ${(e) => e.sizeInUnits ? e.sizeInUnits : t(e.theme, e.size)};
  width: ${(e) => e.sizeInUnits ? e.sizeInUnits : t(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 : t(e.theme, e.size)};
    width: ${(e) => e.sizeInUnits ? e.sizeInUnits : t(e.theme, e.size)};
  }
`, C = I((e, o) => {
  const {
    image: a,
    icon: l = "user",
    sizeInUnits: n,
    borderRadius: m = "curved",
    //----------------
    onFocus: d = () => {
    },
    onBlur: c = () => {
    },
    onClick: u = () => {
    },
    //----------------
    size: r = "small",
    color: h = "primary",
    className: g = "",
    style: f = {},
    ...z
  } = e, b = {
    theme: R(),
    color: h,
    style: f,
    size: r,
    sizeInUnits: n,
    className: "lnc-ui-avatar " + g
  };
  return /* @__PURE__ */ s(
    x,
    {
      ref: o,
      ...b,
      borderRadius: m,
      onClick: u,
      onFocus: d,
      onBlur: c,
      ...z,
      children: a ? /* @__PURE__ */ s("img", { src: a }) : /* @__PURE__ */ s(
        w,
        {
          icon: l,
          size: r,
          sizeInUnits: n ? `calc(${n} / 2)` : null
        }
      )
    }
  );
});
C.propTypes = {
  image: i.string,
  /**
   * If `image` is not defined, icon can be used.
   */
  icon: i.string,
  tabIndex: i.number,
  /**
   * it has higher priority than `size` prop
   */
  sizeInUnits: i.string,
  disabled: i.bool,
  borderRadius: i.oneOf([
    "slight",
    "regular",
    "edged",
    "curved",
    "none"
  ]),
  //---------------------------------------------------------------
  onBlur: i.func,
  onFocus: i.func,
  onClick: i.func,
  //---------------------------------------------------------------
  className: i.string,
  style: i.object,
  size: i.oneOf(["small", "medium", "large"]),
  color: i.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  C as default
};