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

React component library

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

  &:hover {
    background-color: ${(e) => !e.disabled && t(
  e.theme,
  "Chip",
  e.color,
  "hover",
  "background",
  "backgroundOpacity"
)};
  }
  &:focus {
    background-color: ${(e) => !e.disabled && t(
  e.theme,
  "Chip",
  e.color,
  "focus",
  "background",
  "backgroundOpacity"
)};
    ${(e) => !e.disabled && U(e.theme)};
  }
  &:active {
    background-color: ${(e) => !e.disabled && t(
  e.theme,
  "Chip",
  e.color,
  "active",
  "background",
  "backgroundOpacity"
)};
  }
`, z = (e, n) => `calc(${b(e, n)} - 8px)`, q = S((e, n) => {
  const {
    label: l,
    leadingIcon: r,
    trailingIcon: o,
    avatar: d = !1,
    size: i = "small",
    borderRadius: f = "regular",
    disabled: s = !1,
    tabIndex: y = 0,
    //----------------
    onFocus: C = () => {
    },
    onBlur: $ = () => {
    },
    onClick: k = () => {
    },
    onKeyDown: p = () => {
    },
    onLeadingIconClick: I = () => {
    },
    onTrailingIconClick: v = () => {
    },
    //----------------
    className: x = "",
    style: O = {},
    color: w = "primary",
    avatarProps: P,
    children: R,
    ...T
  } = e, m = A(), g = {
    theme: m,
    color: w,
    style: O,
    size: i,
    className: "lnc-ui-chip " + x
  };
  return /* @__PURE__ */ u(
    L,
    {
      ref: n,
      size: i,
      ...g,
      trailingIcon: o,
      leadingIcon: r,
      avatar: d,
      borderRadius: f,
      disabled: s,
      tabIndex: y,
      onClick: k,
      onKeyDown: p,
      onBlur: $,
      onFocus: C,
      ...T,
      children: [
        d && /* @__PURE__ */ c(
          W,
          {
            ...g,
            disabled: s,
            sizeInUnits: z(m, i),
            ...P
          }
        ),
        r && /* @__PURE__ */ c("i", { className: h(r), onClick: I }),
        /* @__PURE__ */ u(N, { children: [
          l,
          R
        ] }),
        o && /* @__PURE__ */ c(
          "i",
          {
            className: h(o),
            onClick: v
          }
        )
      ]
    }
  );
});
q.propTypes = {
  label: a.string,
  leadingIcon: a.string,
  trailingIcon: a.string,
  avatar: a.bool,
  borderRadius: a.oneOf([
    "slight",
    "regular",
    "edged",
    "curved",
    "none"
  ]),
  disabled: a.bool,
  tabIndex: a.number,
  //---------------------------------------------------------------
  onBlur: a.func,
  onFocus: a.func,
  onClick: a.func,
  onKeyDown: a.func,
  onLeadingIconClick: a.func,
  onTrailingIconClick: a.func,
  //---------------------------------------------------------------
  className: a.string,
  style: a.object,
  color: a.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ]),
  size: a.oneOf(["small", "medium", "large"]),
  avatarProps: a.any
};
export {
  q as default
};