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

React component library

"use strict";const i=require("react/jsx-runtime"),h=require("react"),m=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),r=require("./index-BPVoEhTF.cjs"),o=require("./utils-NZLCh-J5.cjs"),O=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),j=e=>e=="left"?"row-reverse":"row",q=m.newStyled.label`
  min-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>o.getSizeValueWithUnits(e.theme,e.size)};
  width: 100%;
  display: inline-flex;
  justify-content: start;
  align-items: center;
  flex-direction: ${e=>j(e.labelPosition)};
  ${e=>e.spaceBetween===!0&&"justify-content: space-between;"}
  gap: 0.5rem;
  ${e=>e.disabled===!0&&"pointer-events: none;"}
  ${e=>o.getComponentTypographyCss(e.theme,"Radio",e.size,"enabled")};
  gap: 0.75rem;
  cursor: pointer;
  position: relative;
  & input {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  & .checkmark {
    box-sizing: border-box;
    cursor: pointer;
    min-height: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
    min-width: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
    height: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
    width: ${e=>e.theme.components.Radio.default.enabled.sizes[e.size]};
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    ${e=>e.focused===!0&&e.disabled!==!0&&e.readOnly!==!0?o.getOutlineCss(e.theme):""};
    & svg {
      fill: transparent;
      & .outer-circle {
        stroke: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","border")};
      }
      & .inner-circle {
        stroke: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","border")};
      }
    }
  }
  & input:hover ~ .lnc-radio-input-label {
    color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"hover","text")};
  }

  
  & input:checked ~ .lnc-radio-input-label {
    color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"active","text")};
  }
  & input:checked ~ .checkmark {
    & svg {
      fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"active","background","backgroundOpacity")};
      & .outer-circle {
        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"active","border")};
      }
      & .inner-circle {
        fill: ${e=>e.innerColor==="white"||e.innerColor==="transparent"?e.innerColor:o.getColorRgbaValue(e.theme,"Radio",e.color,"active","border")}};
      }
    }
  }

  & input:disabled ~ .lnc-radio-input-label {
    color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","text")};
  }
  
  & input[disabled]:checked ~ .checkmark {
    & svg {
      fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","background","backgroundOpacity")};
      & .outer-circle {
        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
      }
      & .inner-circle {
        fill: ${e=>e.innerColor==="white"||e.innerColor==="transparent"?e.innerColor:o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")}
            };
      }
    }


    & input[disabled] ~ .checkmark {
      & svg {
        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","background","backgroundOpacity")};
        & .outer-circle {
          fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
        }
        & .inner-circle {
          fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")}
              };
        }
      }

    & input:hover ~ .lnc-radio-input-label {
      color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"hover","text")};
    }
    & input[hover]:checked ~ .checkmark {
      & svg {
        fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"hover","background","backgroundOpacity")};
        & .outer-circle {
          fill: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
        }
        & .inner-circle {
          fill: ${e=>e.innerColor==="white"||e.innerColor==="transparent"?e.innerColor:o.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")}};
        }
      }
`,B=m.newStyled.label`
  ${e=>e.disabled!==!0&&e.readOnly!==!0&&"cursor: pointer"};
  min-width: 0;
  flex-shrink: 1;
  min-height: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: ${e=>o.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","text")};
`,f=h.forwardRef((e,y)=>{const{wrapperRef:R,className:C="",style:w={},color:k="primary",innerColor:x="white",size:$="small",onChange:a,onFocus:l,onBlur:n,onClick:c,onKeyDown:N,label:u,labelPosition:p="right",spaceBetween:v,disabled:s,readOnly:d,...P}=e,[T,b]=h.useState(!1);var g={theme:O.useTheme(),size:$,color:k,disabled:s,labelPosition:p,spaceBetween:v};const V=t=>{b(!1),n&&(n==null||n(t))},z=t=>{b(!0),l&&(l==null||l(t))};return i.jsxs(q,{...g,ref:R,className:C,style:w,tabIndex:-1,readOnly:d,focused:T,onClick:t=>c==null?void 0:c(t),innerColor:x,children:[i.jsx("input",{ref:y,disabled:s||d,type:"radio",onBlur:V,onFocus:z,onChange:t=>a==null?void 0:a(t),...P}),i.jsx("div",{className:"checkmark",children:i.jsxs("svg",{id:"eqw1eBsfm9l1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",shapeRendering:"geometricPrecision",textRendering:"geometricPrecision",children:[i.jsx("ellipse",{className:"outer-circle",rx:"9.5",ry:"9.5",transform:"translate(10 10)",fillRule:"evenodd",stroke:"red"}),i.jsx("ellipse",{rx:"5",ry:"5",transform:"translate(10 10)",className:"inner-circle",strokeWidth:"0"})]})}),i.jsx(B,{...g,className:"lnc-radio-input-label",disalbed:s,readOnly:d,title:u,tabIndex:-1,children:u})]})});f.propTypes={id:r.PropTypes.string,name:r.PropTypes.string,checked:r.PropTypes.bool,disabled:r.PropTypes.bool,readOnly:r.PropTypes.bool,label:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element]),labelPosition:r.PropTypes.oneOf(["right","left"]),tabIndex:r.PropTypes.number,spaceBetween:r.PropTypes.bool,onChange:r.PropTypes.func,onFocus:r.PropTypes.func,onBlur:r.PropTypes.func,onClick:r.PropTypes.func,onKeyDown:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"]),innerColor:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray","white","transparent"])};module.exports=f;