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

React component library

"use strict";const n=require("react/jsx-runtime"),q=require("react"),o=require("./index-BPVoEhTF.cjs"),C=require("./index-DAOBjHnD.cjs"),r=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),t=require("./utils-NZLCh-J5.cjs"),V=require("./Icon.cjs"),W=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),B={small:{regular:"1rem",icon:"0.75rem",justIcon:"0.5rem"},medium:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"},large:{regular:"1.5rem",icon:"1rem",justIcon:"0.5rem"}},f=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)};
        
        padding-left: ${e.hasLeadingIcon?B[e.size].icon:B[e.size].regular};
        padding-right: ${e.hasTrailingIcon?B[e.size].icon:B[e.size].regular};
    `,D=r.newStyled.span`
  padding-right: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
`,E=r.newStyled.span`
  padding-left: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
`,z=r.newStyled.button`
  ${e=>f(e)}

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

  background-color: ${e=>!e.disabled&&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)};

  &: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")};
  }

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

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

  &:active {
    background-color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","background")};
    color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","text")};
  }
`,L=r.newStyled.button`
  ${e=>f(e)}

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

  backdrop-filter: blur(48px);
  background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"enabled","background","backgroundOpacity")};

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

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

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

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

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

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

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

  &:disabled {
    ${e=>e.disabled===!0&&t.getDisabledStateCss(e.theme)};
    cursor: default;
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted","gray","disabled","background")};
  }
`,I=r.newStyled.button`
  ${e=>f(e)}

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

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

  background-color: ${e=>e.disabled===!1&&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,"focus","text")};

    ${e=>!e.disabled&&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")};
  }
`,_=r.newStyled(I)`
  border: 1px solid
    ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
`,O=q.forwardRef((e,c)=>{const{text:k="",iconStyle:T="solid",leadingIcon:x=null,trailingIcon:R=null,borderRadius:v="regular",btnType:l="filled",disabled:S=!1,tabIndex:d=0,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,onLeadingIconClick:N,onTrailingIconClick:K,size:$="small",color:P="primary",className:j="",style:F={},children:w,...m}=e,h={theme:W.useTheme(),color:P,size:$,style:F,disabled:S,borderRadius:v,btnType:l,className:"lnc-ui-button "+j},a=!C.isEmpty(x),i=!C.isEmpty(R),U=!C.isEmpty(k),y=()=>n.jsxs(n.Fragment,{children:[a&&n.jsx(D,{size:$,children:n.jsx(V,{icon:x,sizeInUnits:"1.125rem",iconStyle:T})}),k,w,i&&n.jsx(E,{size:$,children:n.jsx(V,{icon:R,sizeInUnits:"1.125rem",iconStyle:T})})]});return l==="filled"?n.jsx(z,{ref:c,"data-type":"filled",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:l,...m,children:y()}):l==="tinted"?n.jsx(L,{ref:c,"data-type":"tinted",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:l,...m,children:y()}):l==="outline"?n.jsx(_,{ref:c,"data-type":"outline",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:l,...m,children:y()}):l==="basic"?n.jsx(I,{ref:c,"data-type":"basic",...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,tabIndex:d,btnType:l,...m,children:y()}):n.jsx(z,{ref:c,"data-type":"filled",size:$,...h,hasLeadingIcon:a,hasTrailingIcon:i,onFocus:u,onBlur:s,onClick:g,onKeyDown:b,hasText:U,tabIndex:d,btnType:l,...m,children:y()})});O.propTypes={text:o.PropTypes.string,iconStyle:o.PropTypes.oneOf(["regular","solid"]),leadingIcon:o.PropTypes.string,trailingIcon:o.PropTypes.string,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=O;