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

React component library

"use strict";const i=require("react/jsx-runtime"),R=require("react"),j=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),t=require("./utils-BK6B_Y9X.cjs"),V=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),O=e=>e=="left"?"row-reverse":"row",o=(e,l)=>`calc(${e.components.Checkbox.default.enabled.sizes[l]} / 2)`,I=j.styled.label`
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  display: inline-flex;
  align-items: center;
  justify-content: start;
  flex-direction: ${e=>O(e.labelPosition)};
  ${e=>e.spaceBetween==!0&&"justify-content: space-between;"}
  width: 100%;
  ${e=>e.disabled===!0&&"pointer-events: none;"}
  ${e=>t.getComponentTypographyCss(e.theme,"Checkbox",e.size,"enabled")};
  gap: 0.75rem;
  position: relative;
  & .checkbox-label {
    ${e=>!e.disabled&&e.readOnly!==!0&&"cursor: pointer;"}
    min-width: 0;
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
  }
  & input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    z-index: 3;
  }
  & input:focus {
    outline: none;
    background: transparent;
  }
  & input:active {
    outline: none;
    background: transparent;
  }
  & .checkmark {
    min-height: ${e=>e.theme.components.Checkbox.default.enabled.sizes[e.size]};
    min-width: ${e=>e.theme.components.Checkbox.default.enabled.sizes[e.size]};
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    background-color: transparent;
    color: ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
    border: 1px solid
      ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","border")};
    border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"slight")};
    ${e=>e.disabled===!0&&`background-color: ${t.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")}`};
    & svg {
      height: 0;
      width: 0;
      stroke: transparent;
    }
    & img {
      max-height: 0;
      max-width: 0;
      filter: brightness(0) invert(1);
    }
  }
  & input:checked ~ .checkmark {
    background-color: ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","background","backgroundOpacity")};
    border: 1px solid
      ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","border")};
    & .checked {
      height: ${e=>o(e.theme,e.size)};
      width: ${e=>o(e.theme,e.size)};
      stroke: white;
    }
    & .indeterminate {
      height: 0;
      width: 0;
    }
    & img {
      max-height: ${e=>o(e.theme,e.size)};
      max-width: ${e=>o(e.theme,e.size)};
    }
  }
  & input:checked ~ .checkbox-label {
    color: ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","text")};
  }
  & input:indeterminate ~ .checkmark {
    & .checked {
      height: 0;
      width: 0;
    }
    background-color: ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"active","background","backgroundOpacity")};
    & .indeterminate {
      height: ${e=>o(e.theme,e.size)};
      width: ${e=>o(e.theme,e.size)};
      stroke: white;
    }
  }
  & input:indeterminate ~ .checkbox-label {
    color: ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"enabled","text")};
  }
  & input:disabled ~ .checkmark {
    ${e=>e.readOnly!==!0&&`background-color: ${t.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")};
    border-color: ${t.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","border")};
    `};
  }
  & input:disabled ~ .checkbox-label {
    color: ${e=>t.getColorRgbaValue(e.theme,"Checkbox",e.color,"disabled","text")};
  }
  & input:focus ~ .checkmark {
    ${e=>t.getOutlineCss(e.theme)};
  }
  & input:active ~ .checkmark {
    ${e=>t.getOutlineCss(e.theme)};
  }
`,B=R.forwardRef((e,l)=>{const{containerRef:m,disabled:b,readOnly:h,label:r,labelPosition:u="right",spaceBetween:g,customCheckmark:s,onChange:d,onFocus:a,onBlur:c,onClick:k,color:x="primary",size:C="small",className:w="",style:$={},...f}=e;var v={theme:V.useTheme(),size:C,color:x,disabled:b,readOnly:h};const z=n=>{c&&(c==null||c(n))},y=n=>{a&&(a==null||a(n))};return i.jsxs(I,{ref:m,direction:u,className:w,style:$,label:r,labelPosition:u,spaceBetween:g,tabIndex:-1,readOnly:h,onClick:k,...v,children:[i.jsx("input",{ref:l,type:"checkbox",onBlur:z,onFocus:y,disabled:b||h,onChange:n=>d==null?void 0:d(n),...f}),i.jsxs("div",{className:"checkmark",tabIndex:-1,children:[!s&&i.jsx("svg",{viewBox:"0 0 8 6",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,disabled:!0,tabIndex:-1,className:"checked",children:i.jsx("path",{d:"M1 3.15385L2.89474 5L7 1",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",tabIndex:-1})}),i.jsx("svg",{width:"8",height:"2",viewBox:"0 0 8 2",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":!0,disabled:!0,tabIndex:-1,className:"indeterminate",children:i.jsx("path",{d:"M1 1H7",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",tabIndex:-1,title:r})}),s&&i.jsx(i.Fragment,{children:s})]}),r&&i.jsx("div",{className:"checkbox-label",tabIndex:-1,children:r})]})});module.exports=B;