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

React component library

"use strict";const a=require("react/jsx-runtime"),R=require("react"),h=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),t=require("./utils-BK6B_Y9X.cjs"),v=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),o={containerWidth:{small:"2.5rem",medium:"3rem",large:"3.5rem"},containerHeight:{small:"1.5rem",medium:"1.75rem",large:"2rem"},slider:{small:"1rem",medium:"1.25rem",large:"1.5rem"},icon:{small:"0.75rem",medium:"0.875rem",large:"1rem"},iconOff:{small:"0.625rem",medium:"0.6875rem",large:"0.75rem"}},V={checked:{left:{small:"1.25rem",medium:"1.5rem",large:"1.75rem"}}},l={on:{top:{small:"0.25rem",medium:"0.25rem",large:"0.25rem"},left:{small:"1.375rem",medium:"1.6875rem",large:"2rem"},right:{small:"0.5rem",medium:"0.5rem",large:"0.5rem"}},off:{top:{small:"0.375rem",medium:"0.4375rem",large:"0.5rem"},left:{small:"1.375rem",medium:"1.75rem",large:"2.125rem"},right:{small:"0.5rem",medium:"0.5rem",large:"0.5rem"}}},I=e=>e=="left"?"row-reverse":"row",j=h.styled.label`
  box-sizing: content-box !important;
  width: 100%;
  text-align: left;
  line-height: 1.5;
  display: flex;
  gap: 0.75rem;
  flex-direction: ${e=>I(e.labelPosition)};
  ${e=>e.spaceBetween==!0&&"justify-content: space-between;"}
  position: relative;
  cursor: ${e=>e.disabled||e.readOnly?"default":"pointer"};
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-items: center;
  flex-shrink: 0;

  min-height: ${e=>e.theme.sizes[e.size]};
  max-height: ${e=>e.theme.sizes[e.size]};

  & input:focus:enabled ~ span.toggle-slider {
    ${e=>!e.disabled&&t.getOutlineCss(e.theme)};
  }

  & input:hover:enabled ~ span.toggle-slider {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"Toggle",null,"hover","background","backgroundOpacity")};
  }

  & input:checked:hover:enabled ~ span.toggle-slider {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"Toggle",e.color,"hover","background")};
  }

  & input {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    height: 100%;
    width: 100%;
    transition: all 0.2s ease;
  }

  & input:checked ~ span.toggle-slider {
    background-color: ${e=>e.disabled!==!0?t.getColorRgbaValue(e.theme,"Toggle",e.color,"enabled","background"):t.getColorRgbaValue(e.theme,"Toggle",e.color,"disabled","background","backgroundOpacity")};
    transition: all 0.2s ease;
    border-radius: 100px;
    flex-shrink: 0;
  }

  & input:checked ~ span.toggle-slider:after {
    opacity: 1;
    transition: all 0.2s ease-out;
    box-sizing: content-box;
    left: ${e=>V.checked.left[e.size]};
    position: absolute;
    border-radius: 100px;
    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    background-color: ${e=>e.disabled===!0?t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"disabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"enabled","background","backgroundOpacity")};
  }

  & span.toggle-slider {
    width: ${e=>o.containerWidth[e.size]};
    height: ${e=>o.containerHeight[e.size]};
    border-radius: 100px;
    font-size: ${e=>o.icon[e.size]};
    flex-shrink: 0;
  }

  & span.toggle-slider::after {
    left: 0.25rem;
    width: ${e=>o.slider[e.size]};
    height: ${e=>o.slider[e.size]};
    top: 0.25rem;
    border-radius: 100px;
    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    flex-shrink: 0;
  }

  & span.toggle-slider::before {
    content: ${e=>`"${e.unicodeIcon?"\\"+e.unicodeIcon:""}"`};
    font-family: FontAwesome;
    font-weight: 900;
    width: ${e=>o.icon[e.size]};
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    position: absolute;
    color: ${e=>t.getColorRgbaValue(e.theme,"ToggleIcon",e.color,"enabled","text")};
      flex-shrink: 0;
    border-radius: 100px;
    z-index: 2;

    font-size: ${e=>o.iconOff[e.size]};
    width: ${e=>o.iconOff[e.size]};

    top: ${e=>l.off.top[e.size]};
    right: ${e=>l.off.right[e.size]};
    left: ${e=>l.off.left[e.size]};
  }

  & input:checked ~ span.toggle-slider::before {
    content: ${e=>`"${e.unicodeIcon?"\\"+e.unicodeIcon:""}"`};
    font-family: FontAwesome;
    font-weight: 900;
    width: ${e=>o.icon[e.size]};
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    flex-shrink: 0;
    color: ${e=>t.getColorRgbaValue(e.theme,"ToggleIcon",e.color,"enabled","text")};

    font-size: ${e=>o.icon[e.size]};
    width: ${e=>o.icon[e.size]};

    top: ${e=>l.on.top[e.size]};
    right: ${e=>l.on.right[e.size]};
    left: ${e=>l.on.left[e.size]};
  }

  & span.toggle-slider {
    position: relative;
    width: ${e=>o.containerWidth[e.size]};
    height: ${e=>o.containerHeight[e.size]};
    background-color: ${e=>e.disabled!==!0?t.getColorRgbaValue(e.theme,"Toggle",null,"enabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"Toggle",null,"disabled","background","backgroundOpacity")};
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  & span.toggle-slider:after {
    content: "";
    position: absolute;
    opacity: 1;
    flex-shrink: 0;
    background-color: ${e=>e.disabled===!0?t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"disabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"enabled","background","backgroundOpacity")};

    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
    transition: all 0.2s ease-out;
  }
`,S=h.styled.span`
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 3;

  ${e=>e.disabled?t.getComponentTypographyCss(e.theme,"Toggle",e.size,"disabled"):t.getComponentTypographyCss(e.theme,"Toggle",e.size,"enabled")};
`,q=e=>{const{disabled:s,readOnly:g,value:d,label:c,labelPosition:f="right",spaceBetween:x,unicodeIcon:k,onChange:m,onFocus:n,onBlur:r,className:$="",style:z={},size:w="medium",color:y="primary",...p}=e,C=v.useTheme(),[T,u]=R.useState(!1);let b={theme:C,size:w,color:y,disabled:s,readOnly:g,focused:T,labelPosition:f,spaceBetween:x};function O(i){s||g||(d===null?m(i,!1):m(i,!d))}return a.jsxs(j,{...b,className:$,style:z,unicodeIcon:k,tabIndex:-1,children:[a.jsx("input",{type:"checkbox",checked:d?"checked":"",disabled:s,readOnly:g,onChange:O,onFocus:i=>{u(!0),n&&(n==null||n(i))},onBlur:i=>{u(!1),r&&(r==null||r(i))},...p}),a.jsx("span",{tabIndex:-1,className:"toggle-slider"}),c&&a.jsx(S,{tabIndex:-1,title:c,...b,children:c})]})};module.exports=q;