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

React component library

import { jsxs as g, jsx as o, Fragment as P } from "react/jsx-runtime";
import { forwardRef as S } from "react";
import { s as V } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { e as h, i as j, c as r, b as B, d as D, g as F, f as T } from "./utils-BUdHa0nB.js";
import U from "./Avatar.js";
import { u as W } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const u = (e) => {
  var t = "fas";
  return `${t} fa-${e} fa-fw`;
}, A = (e, t, l, a) => e ? `padding-right: ${a == "small" ? "0.75rem" : "0.625rem"}; padding-left: ${a == "small" ? "0.25rem" : "0.125rem"};` : t ? `padding-right: ${a == "small" ? "0.5rem" : "0.375rem"}; padding-left: ${a == "small" ? "0.5rem" : "0.375rem"};` : l ? `padding-right: ${a == "small" ? "0.5rem" : "0.375rem"}; padding-left: ${a == "small" ? "0.75rem" : "0.625rem"};` : `padding-right: ${a == "small" ? "1rem" : "0.75rem"}; padding-left: ${a == "small" ? "1rem" : "0.75rem"};`, K = V.span`
  cursor: pointer;
  display: inline-flex;
  height: ${(e) => h(e.theme, e.size)};
  ${(e) => e.disabled === !0 && j(e.theme)};
  background-color: ${(e) => !e.disabled && r(
  e.theme,
  "Chip",
  e.color,
  "enabled",
  "background",
  "backgroundOpacity"
)};
  color: ${(e) => !e.disabled && r(e.theme, "Chip", e.color, "enabled", "text")};
  font-weight: ${(e) => e.theme.typography.fontWeightBold};
  ${(e) => A(e.avatar, e.leadingIcon, e.trailingIcon, e.size)}
  gap: 0.375rem;
  border-radius: ${(e) => B(e.theme, e.borderRadius)};
  justify-content: center;
  align-items: center;
  ${(e) => D(e.theme, "Chip", e.size, "enabled")};
  backdrop-filter: ${(e) => F(
  e.theme,
  "Chip",
  e.color,
  "enabled",
  "backDropFilter"
)};

  &:hover {
    background-color: ${(e) => !e.disabled && r(
  e.theme,
  "Chip",
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
  }
  &:focus {
    background-color: ${(e) => !e.disabled && r(
  e.theme,
  "Chip",
  e.color,
  "focus",
  "background",
  "backgroundOpacity"
)};
    ${(e) => !e.disabled && T(e.theme)};
  }
  &:active {
    background-color: ${(e) => !e.disabled && r(
  e.theme,
  "Chip",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
  }
`, L = (e, t) => `calc(${h(e, t)} - 8px)`, M = S((e, t) => {
  const {
    label: l,
    leadingIcon: a,
    trailingIcon: i,
    avatar: d = !1,
    size: n = "small",
    borderRadius: b = "regular",
    disabled: c = !1,
    tabIndex: f = 0,
    //----------------
    onFocus: $ = () => {
    },
    onBlur: C = () => {
    },
    onClick: k = () => {
    },
    onKeyDown: y = () => {
    },
    onLeadingIconClick: v = () => {
    },
    onTrailingIconClick: I = () => {
    },
    //----------------
    className: p = "",
    style: x = {},
    color: O = "primary",
    avatarProps: R,
    children: w,
    ...N
  } = e, s = W(), m = {
    theme: s,
    color: O,
    style: x,
    size: n,
    className: "lnc-ui-chip " + p
  };
  return /* @__PURE__ */ g(
    K,
    {
      ref: t,
      size: n,
      ...m,
      trailingIcon: i,
      leadingIcon: a,
      avatar: d,
      borderRadius: b,
      disabled: c,
      tabIndex: f,
      onClick: k,
      onKeyDown: y,
      onBlur: C,
      onFocus: $,
      ...N,
      children: [
        d && /* @__PURE__ */ o(
          U,
          {
            ...m,
            disabled: c,
            sizeInUnits: L(s, n),
            ...R
          }
        ),
        a && /* @__PURE__ */ o("i", { className: u(a), onClick: v }),
        /* @__PURE__ */ g(P, { children: [
          l,
          w
        ] }),
        i && /* @__PURE__ */ o(
          "i",
          {
            className: u(i),
            onClick: I
          }
        )
      ]
    }
  );
});
export {
  M as default
};