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

React component library

"use strict";const l=require("react/jsx-runtime"),h=require("react"),g=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),t=require("./utils-BK6B_Y9X.cjs"),O=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),q=e=>e=="left"?"row-reverse":"row",B=g.styled.label`
  min-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>t.getSizeValueWithUnits(e.theme,e.size)};
  width: 100%;
  display: inline-flex;
  justify-content: start;
  align-items: center;
  flex-direction: ${e=>q(e.labelPosition)};
  ${e=>e.spaceBetween===!0&&"justify-content: space-between;"}
  gap: 0.5rem;
  ${e=>e.disabled===!0&&"pointer-events: none;"}
  ${e=>t.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?t.getOutlineCss(e.theme):""};
    & svg {
      fill: transparent;
      & .outer-circle {
        stroke: ${e=>t.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","border")};
      }
      & .inner-circle {
        stroke: ${e=>t.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","border")};
      }
    }
  }
  & input:hover ~ .lnc-radio-input-label {
    color: ${e=>t.getColorRgbaValue(e.theme,"Radio",e.color,"hover","text")};
  }

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

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


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

    & input:hover ~ .lnc-radio-input-label {
      color: ${e=>t.getColorRgbaValue(e.theme,"Radio",e.color,"hover","text")};
    }
    & input[hover]:checked ~ .checkmark {
      & svg {
        fill: ${e=>t.getColorRgbaValue(e.theme,"Radio",e.color,"hover","background","backgroundOpacity")};
        & .outer-circle {
          fill: ${e=>t.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
        }
        & .inner-circle {
          fill: ${e=>e.innerColor==="white"||e.innerColor==="transparent"?e.innerColor:t.getColorRgbaValue(e.theme,"Radio",e.color,"disabled","border")};
        }
      }
    }
`,N=g.styled.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=>t.getColorRgbaValue(e.theme,"Radio",e.color,"enabled","text")};
`,P=h.forwardRef((e,m)=>{const{wrapperRef:R,className:f="",style:C={},color:$="primary",innerColor:k="white",size:x="small",onChange:a,onFocus:o,onBlur:r,onClick:n,label:s,labelPosition:v="right",spaceBetween:w,disabled:c,readOnly:d,...y}=e,[V,u]=h.useState(!1);var b={theme:O.useTheme(),size:x,color:$,disabled:c,labelPosition:v,spaceBetween:w};const z=i=>{u(!1),r&&(r==null||r(i))},j=i=>{u(!0),o&&(o==null||o(i))};return l.jsxs(B,{...b,ref:R,className:f,style:C,tabIndex:-1,readOnly:d,focused:V,onClick:i=>n==null?void 0:n(i),innerColor:k,children:[l.jsx("input",{ref:m,disabled:c||d,type:"radio",onBlur:z,onFocus:j,onChange:i=>a==null?void 0:a(i),...y}),l.jsx("div",{className:"checkmark",children:l.jsxs("svg",{id:"eqw1eBsfm9l1",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",shapeRendering:"geometricPrecision",textRendering:"geometricPrecision",children:[l.jsx("ellipse",{className:"outer-circle",rx:"9.5",ry:"9.5",transform:"translate(10 10)",fillRule:"evenodd",stroke:"red"}),l.jsx("ellipse",{rx:"5",ry:"5",transform:"translate(10 10)",className:"inner-circle",strokeWidth:"0"})]})}),l.jsx(N,{...b,className:"lnc-radio-input-label",disalbed:c,readOnly:d,title:s,tabIndex:-1,children:s})]})});module.exports=P;