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

React component library

"use strict";const a=require("react/jsx-runtime"),U=require("react"),y=require("./index-CxWXiOMf.cjs"),r=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),t=require("./utils-BK6B_Y9X.cjs"),T=require("./Icon.cjs"),q=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k={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"}},x=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?k[e.size].icon:k[e.size].regular};
        padding-right: ${e.hasTrailingIcon?k[e.size].icon:k[e.size].regular};
    `,W=r.styled.span`
  padding-right: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
`,w=r.styled.span`
  padding-left: ${e=>e.size==="small"?"0.25rem":"0.5rem"};
`,O=r.styled.button`
  ${e=>x(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",e.color,"disabled","background","backgroundOpacity")};
    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","backgroundOpacity")};
    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","backgroundOpacity")};
    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","backgroundOpacity")};
    color: ${e=>e.disabled===!1&&t.getColorRgbaValue(e.theme,"ButtonFilled",e.color,"active","text")};
  }
`,D=r.styled.button`
  ${e=>x(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)};
     */
    color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"disabled","text")};
    cursor: default;
    background-color: ${e=>t.getColorRgbaValue(e.theme,"ButtonTinted",e.color,"disabled","background","backgroundOpacity")};
  }
`,v=r.styled.button`
  ${e=>x(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",e.color,"disabled","background","backgroundOpacity")};
  }
`,E=r.styled(v)`
  border: 1px solid
    ${e=>t.getColorRgbaValue(e.theme,"ButtonBasic",e.color,"enabled","border","borderOpacity")};
`,_=U.forwardRef((e,d)=>{const{text:V="",iconStyle:R="solid",leadingIcon:f=null,trailingIcon:z=null,borderRadius:j="regular",btnType:l="filled",disabled:F=!1,tabIndex:u=0,onFocus:g,onBlur:s,onClick:b,onKeyDown:m,size:C="small",color:n="primary",className:h="",style:I={},children:N,...$}=e,o={theme:q.useTheme(),color:n,size:C,style:I,disabled:F,borderRadius:j,btnType:l,className:"lnc-ui-button "},c=!y.isEmpty(f),i=!y.isEmpty(z),S=!y.isEmpty(V),B=()=>a.jsxs(a.Fragment,{children:[c&&a.jsx(W,{size:C,children:a.jsx(T,{icon:f,sizeInUnits:"1.125rem",iconStyle:R})}),V,N,i&&a.jsx(w,{size:C,children:a.jsx(T,{icon:z,sizeInUnits:"1.125rem",iconStyle:R})})]});return l==="filled"?a.jsx(O,{ref:d,"data-type":"filled",...o,className:`${o==null?void 0:o.className} ${n}-${l}-lnc-btn ${h}`,hasLeadingIcon:c,hasTrailingIcon:i,onFocus:g,onBlur:s,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...$,children:B()}):l==="tinted"?a.jsx(D,{ref:d,"data-type":"tinted",...o,className:`${o==null?void 0:o.className} ${n}-${l}-lnc-btn ${h}`,hasLeadingIcon:c,hasTrailingIcon:i,onFocus:g,onBlur:s,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...$,children:B()}):l==="outline"?a.jsx(E,{ref:d,"data-type":"outline",...o,className:`${o==null?void 0:o.className} ${n}-${l}-lnc-btn ${h}`,hasLeadingIcon:c,hasTrailingIcon:i,onFocus:g,onBlur:s,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...$,children:B()}):l==="basic"?a.jsx(v,{ref:d,"data-type":"basic",...o,className:`${o==null?void 0:o.className} ${n}-${l}-lnc-btn ${h}`,hasLeadingIcon:c,hasTrailingIcon:i,onFocus:g,onBlur:s,onClick:b,onKeyDown:m,tabIndex:u,btnType:l,...$,children:B()}):a.jsx(O,{ref:d,"data-type":"filled",size:C,...o,className:`${o==null?void 0:o.className} ${n}-${l}-lnc-btn ${h}`,hasLeadingIcon:c,hasTrailingIcon:i,onFocus:g,onBlur:s,onClick:b,onKeyDown:m,hasText:S,tabIndex:u,btnType:l,...$,children:B()})});module.exports=_;