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

React component library

"use strict";const a=require("react/jsx-runtime"),$=require("react"),o=require("./index-BPVoEhTF.cjs"),b=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./utils-NZLCh-J5.cjs"),S=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),m=e=>`
        outline: none;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border: none;
        transition: all 50  ms ease-in;
        cursor: pointer;
        color: ${!e.disabled&&"white"};

        border-radius: ${t.getBorderRadiusValueWithUnits(e.theme,e.borderRadius)};

        min-width: ${t.getSizeValueWithUnits(e.theme,e.size)};
        max-width: ${t.getSizeValueWithUnits(e.theme,e.size)};
    `,P=b.newStyled.i`
  font-size: 1.125rem;
`,B=b.newStyled.button`
  ${e=>m(e)}

  ${e=>t.getComponentTypographyCss(e.theme,"ButtonFilled",e.size,"enabled")};

  background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"enabled","background")};
  color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"enabled","text")};

  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};

  &:hover {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"hover","background")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"hover","text")};
  }

  &:focus {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"focus","background")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"focus","text")};

    ${e=>e.disabled===!1&&t.getOutlineCss(e.theme)};
  }

  &:active {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","background")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","text")};
  }

  &:disabled {
    ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
    cursor: default;
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled","gray","disabled","background")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"disabled","text")};
  }
`,w=b.newStyled.button`
  ${e=>m(e)}

  ${e=>t.getComponentTypographyCss(e.theme,"ButtonTinted",e.size,"enabled")};

  backdrop-filter: blur(48px);
  color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"enabled","text")};

  background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"enabled","background","backgroundOpacity")};

  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};

  &:hover {
    background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"hover","background","backgroundOpacity")};
    color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"hover","text")};
  }

  &:focus {
    background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"focus","background","backgroundOpacity")};
    color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"focus","text")};
    ${e=>e.disabled===!1&&t.getOutlineCss(e.theme)};
  }

  &:active {
    background-color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"active","background","backgroundOpacity")};
    color: ${e=>e.disabled!==!0&&t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"active","text")};
  }
  &:disabled {
    ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
    cursor: default;
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","background","backgroundOpacity")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","text")};
  }
`,C=b.newStyled.button`
  ${e=>m(e)}

  ${e=>t.getComponentTypographyCss(e.theme,"ButtonTinted",e.size,"enabled")};

  color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","text")};

  background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","background","backgroundOpacity")};

  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};

  &:hover {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"hover","background","backgroundOpacity")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"hover","text")};
  }

  &:focus {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"focus","background","backgroundOpacity")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"hover","text")};
    ${e=>e.disabled===!1&&t.getOutlineCss(e.theme)};
  }

  &:active {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"active","background","backgroundOpacity")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"active","text")};
  }

  &:disabled {
    ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
    cursor: default;
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic","gray","disabled","background","backgroundOpacity")};
  }
`,F=b.newStyled(C)`
  border: 1px solid
    ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
`,f=$.forwardRef((e,n)=>{const{icon:h=null,iconStyle:k="solid",borderRadius:V="regular",btnType:l="filled",disabled:R=!1,tabIndex:j=0,onFocus:r=()=>{},onBlur:i=()=>{},onClick:c=()=>{},onKeyDown:u=()=>{},size:y="small",color:T="primary",className:x="",style:z={},...d}=e,g={theme:S.useTheme(),color:T,size:y,style:z,className:"lnc-ui-icon-button "+x,disabled:R,borderRadius:V,btnType:l},v=()=>{var O=k==="solid"?"fas":"far";return`${O} fa-${h} fa-fw`},s=()=>$.isValidElement(h)?h:a.jsx(P,{className:v()});return l==="filled"?a.jsx(B,{ref:n,"data-type":"filled",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,type:l,...d,children:s()}):l==="tinted"?a.jsx(w,{ref:n,"data-type":"tinted",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()}):l==="outline"?a.jsx(F,{ref:n,"data-type":"outline",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()}):l==="basic"?a.jsx(C,{ref:n,"data-type":"basic",...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()}):a.jsx(B,{ref:n,"data-type":"filled",size:y,...g,onFocus:r,onBlur:i,onClick:c,onKeyDown:u,...d,children:s()})});f.propTypes={icon:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),iconStyle:o.PropTypes.oneOf(["regular","solid"]),borderRadius:o.PropTypes.oneOf(["slight","regular","edged","curved","none"]),btnType:o.PropTypes.oneOf(["filled","tinted","outline","basic"]),disabled:o.PropTypes.bool,tabIndex:o.PropTypes.number,onBlur:o.PropTypes.func,onFocus:o.PropTypes.func,onClick:o.PropTypes.func,onKeyDown:o.PropTypes.func,className:o.PropTypes.string,style:o.PropTypes.object,color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:o.PropTypes.oneOf(["small","medium","large"])};module.exports=f;