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

React component library

"use strict";const n=require("react/jsx-runtime"),C=require("react"),h=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),t=require("./utils-BK6B_Y9X.cjs"),T=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),$=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)};
    `,O=h.styled.i`
  font-size: 1.125rem;
`,k=h.styled.button`
  ${e=>$(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",e.color,"disabled","background","backgroundOpacity")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"disabled","text")};
  }
`,F=h.styled.button`
  ${e=>$(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",e.color,"disabled","background","backgroundOpacity")};
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"disabled","text")};
  }
`,V=h.styled.button`
  ${e=>$(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",e.color,"disabled","background","backgroundOpacity")};
  }
`,S=h.styled(V)`
  border: 1px solid
    ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
`,N=C.forwardRef((e,c)=>{const{icon:m=null,iconStyle:y="solid",borderRadius:R="regular",btnType:l="filled",disabled:f=!1,onFocus:i=()=>{},onBlur:u=()=>{},onClick:d=()=>{},onKeyDown:r=()=>{},size:B="small",color:a="primary",className:b="",style:x={},...g}=e,o={theme:T.useTheme(),color:a,size:B,style:x,className:"lnc-ui-icon-button",disabled:f,borderRadius:R,btnType:l},z=()=>{var v=y==="solid"?"fas":"far";return`${v} fa-${m} fa-fw`},s=()=>C.isValidElement(m)?m:n.jsx(O,{className:z()});return l==="filled"?n.jsx(k,{ref:c,"data-type":"filled",...o,className:`${o==null?void 0:o.className} ${a}-${l}-lnc-btn ${b}`,onFocus:i,onBlur:u,onClick:d,onKeyDown:r,type:l,...g,children:s()}):l==="tinted"?n.jsx(F,{ref:c,"data-type":"tinted",...o,className:`${o==null?void 0:o.className} ${a}-${l}-lnc-btn ${b}`,onFocus:i,onBlur:u,onClick:d,onKeyDown:r,...g,children:s()}):l==="outline"?n.jsx(S,{ref:c,"data-type":"outline",...o,className:`${o==null?void 0:o.className} ${a}-${l}-lnc-btn ${b}`,onFocus:i,onBlur:u,onClick:d,onKeyDown:r,...g,children:s()}):l==="basic"?n.jsx(V,{ref:c,"data-type":"basic",...o,className:`${o==null?void 0:o.className} ${a}-${l}-lnc-btn ${b}`,onFocus:i,onBlur:u,onClick:d,onKeyDown:r,...g,children:s()}):n.jsx(k,{ref:c,"data-type":"filled",size:B,...o,className:`${o==null?void 0:o.className} ${a}-${l}-lnc-btn ${b}`,onFocus:i,onBlur:u,onClick:d,onKeyDown:r,...g,children:s()})});module.exports=N;