@lanaco/lnc-react-ui
Version:
React component library
18 lines (16 loc) • 1.6 kB
JavaScript
;const h=require("react/jsx-runtime"),p=require("react"),r=require("./index-BPVoEhTF.cjs"),f=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),s=require("./utils-NZLCh-J5.cjs"),z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),t=e=>e=="large"?"2rem":e=="medium"?"1.75rem":"1.5rem",R=f.newStyled.div`
${e=>s.getComponentTypographyCss(e.theme,"Badge",e.size,"enabled")};
background-color: ${e=>s.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","background","backgroundOpacity")};
color: ${e=>s.getColorRgbaValue(e.theme,"Badge",e.color,"enabled","text")};
border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};
display: inline-flex;
min-width: ${e=>t(e.size)};
min-height: ${e=>t(e.size)};
max-height: ${e=>t(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"};
}
`,o=p.forwardRef((e,n)=>{const{borderRadius:i="curved",onClick:a=()=>{},className:d="",style:l={},color:c="primary",size:m="small",children:u,...g}=e,y=z.useTheme(),b={borderRadius:i,theme:y,size:m,color:c,className:"lnc-ui-badge "+d,style:l};return h.jsx(R,{ref:n,...b,onClick:a,...g,children:u})});o.propTypes={onClick:r.PropTypes.func,borderRadius:r.PropTypes.oneOf(["slight","regular","edged","curved","none"]),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"])};module.exports=o;