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

React component library

"use strict";const l=require("react/jsx-runtime"),q=require("react"),w=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),a=require("./utils-BK6B_Y9X.cjs"),S=require("./Avatar.cjs"),O=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),u=e=>{var r="fas";return`${r} fa-${e} fa-fw`},F=(e,r,n,t)=>e?`padding-right: ${t=="small"?"0.75rem":"0.625rem"}; padding-left: ${t=="small"?"0.25rem":"0.125rem"};`:r?`padding-right: ${t=="small"?"0.5rem":"0.375rem"}; padding-left: ${t=="small"?"0.5rem":"0.375rem"};`:n?`padding-right: ${t=="small"?"0.5rem":"0.375rem"}; padding-left: ${t=="small"?"0.75rem":"0.625rem"};`:`padding-right: ${t=="small"?"1rem":"0.75rem"}; padding-left: ${t=="small"?"1rem":"0.75rem"};`,N=w.styled.span`
  cursor: pointer;
  display: inline-flex;
  height: ${e=>a.getSizeValueWithUnits(e.theme,e.size)};
  ${e=>e.disabled===!0&&a.getDisabledStateCss(e.theme)};
  background-color: ${e=>!e.disabled&&a.getColorRgbaValue(e.theme,"Chip",e.color,"enabled","background","backgroundOpacity")};
  color: ${e=>!e.disabled&&a.getColorRgbaValue(e.theme,"Chip",e.color,"enabled","text")};
  font-weight: ${e=>e.theme.typography.fontWeightBold};
  ${e=>F(e.avatar,e.leadingIcon,e.trailingIcon,e.size)}
  gap: 0.375rem;
  border-radius: ${e=>a.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
  justify-content: center;
  align-items: center;
  ${e=>a.getComponentTypographyCss(e.theme,"Chip",e.size,"enabled")};
  backdrop-filter: ${e=>a.getComponentPropValue(e.theme,"Chip",e.color,"enabled","backDropFilter")};

  &:hover {
    background-color: ${e=>!e.disabled&&a.getColorRgbaValue(e.theme,"Chip",e.color,"hover","background","backgroundOpacity")};
  }
  &:focus {
    background-color: ${e=>!e.disabled&&a.getColorRgbaValue(e.theme,"Chip",e.color,"focus","background","backgroundOpacity")};
    ${e=>!e.disabled&&a.getOutlineCss(e.theme)};
  }
  &:active {
    background-color: ${e=>!e.disabled&&a.getColorRgbaValue(e.theme,"Chip",e.color,"active","background","backgroundOpacity")};
  }
`,P=(e,r)=>`calc(${a.getSizeValueWithUnits(e,r)} - 8px)`,U=q.forwardRef((e,r)=>{const{label:n,leadingIcon:t,trailingIcon:i,avatar:c=!1,size:o="small",borderRadius:m="regular",disabled:d=!1,tabIndex:h=0,onFocus:b=()=>{},onBlur:C=()=>{},onClick:$=()=>{},onKeyDown:f=()=>{},onLeadingIconClick:k=()=>{},onTrailingIconClick:y=()=>{},className:x="",style:R={},color:v="primary",avatarProps:I,children:V,...j}=e,s=O.useTheme(),g={theme:s,color:v,style:R,size:o,className:"lnc-ui-chip "+x};return l.jsxs(N,{ref:r,size:o,...g,trailingIcon:i,leadingIcon:t,avatar:c,borderRadius:m,disabled:d,tabIndex:h,onClick:$,onKeyDown:f,onBlur:C,onFocus:b,...j,children:[c&&l.jsx(S,{...g,disabled:d,sizeInUnits:P(s,o),...I}),t&&l.jsx("i",{className:u(t),onClick:k}),l.jsxs(l.Fragment,{children:[n,V]}),i&&l.jsx("i",{className:u(i),onClick:y})]})});module.exports=U;