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

React component library

import { jsx as h } from "react/jsx-runtime";
import { forwardRef as y } from "react";
import { P as r } from "./index-S5Cd7WrG.js";
import { n as b } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { c as p, b as o, a as z } from "./utils-DtRLzzTZ.js";
import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const a = (e) => e == "large" ? "2rem" : e == "medium" ? "1.75rem" : "1.5rem", B = b.div`
  ${(e) => p(e.theme, "Badge", e.size, "enabled")};
  background-color: ${(e) => o(
  e.theme,
  "Badge",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  color: ${(e) => o(e.theme, "Badge", e.color, "enabled", "text")};
  border-radius: ${(e) => z(e.theme, e.borderRadius)};
  display: inline-flex;
  min-width: ${(e) => a(e.size)};
  min-height: ${(e) => a(e.size)};
  max-height: ${(e) => a(e.size)};
  justify-content: center;
  align-items: center;
  padding: 0.313rem;

  & i {
    font-size: ${(e) => e.size == "small" ? "0.75rem" : e.size == "medium" ? "0.875rem" : "1rem"};
  }
`, R = y((e, t) => {
  const {
    borderRadius: i = "curved",
    onClick: n = () => {
    },
    className: s = "",
    style: m = {},
    color: d = "primary",
    size: l = "small",
    children: c,
    ...g
  } = e, u = $(), f = {
    borderRadius: i,
    theme: u,
    size: l,
    color: d,
    className: "lnc-ui-badge " + s,
    style: m
  };
  return /* @__PURE__ */ h(B, { ref: t, ...f, onClick: n, ...g, children: c });
});
R.propTypes = {
  onClick: r.func,
  borderRadius: r.oneOf([
    "slight",
    "regular",
    "edged",
    "curved",
    "none"
  ]),
  //---------------------------
  className: r.string,
  style: r.object,
  color: r.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ]),
  size: r.oneOf(["small", "medium", "large"])
};
export {
  R as default
};