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

React component library

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

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