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

React component library

"use strict";const c=require("react/jsx-runtime"),a=require("react"),p=require("./index-Cp66dWMi.cjs"),B=require("./Icon.cjs"),h=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),l=require("./utils-BK6B_Y9X.cjs"),D=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),P=h.styled.div`
  display: flex;
  align-items: center;

  min-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
  background-color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
  border: 1px solid
    ${e=>l.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,e.disabled===!0?"disabled":"enabled","border")};
  border-radius: ${e=>l.getBorderRadiusValueWithUnits(e.theme,"regular")};

  ${e=>e.focused&&e.readOnly!==!0?l.getOutlineCss(e.theme):""}
  /* ${e=>e.disabled===!0?l.getDisabledStateCss(e.theme):""} */
  ${e=>e.disabled===!0&&`background-color: ${l.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
        color: ${o=>l.getColorRgbaValue(o.theme,"Input",o.color,"disabled","text")};`}
`,$=h.styled.span`
  padding: 0 12px;
  color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","prefix")};
`,A=h.styled($)``,G=h.styled($)`
  cursor: pointer;
`,H=h.styled.input`
  background: none;
  border: none;
  outline: none;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  width: 100%;

  ${e=>l.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
  min-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
  max-height: ${e=>l.getSizeValueWithUnits(e.theme,e.size)};
  color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.focused===!0?"primary":e.color,"enabled","text")};
  caret-color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.color,"enabled","caret")};
  padding-right: ${e=>e.suffix?"0":"0.75rem"};
  padding-left: ${e=>e.prefix?"0":"0.75rem"};

  &::placeholder {
    color: ${e=>l.getColorRgbaValue(e.theme,"Input",e.color,"enabled","placeholder")};
  }

  &:read-only {
    cursor: default;
  }

  &:disabled {
    /* ${e=>l.getDisabledStateCss(e.theme)} */
    ${e=>`background-color: ${l.getColorRgbaValue(e.theme,"Input",e.color,"disabled","background","backgroundOpacity")};
        color: ${o=>l.getColorRgbaValue(o.theme,"Input",o.color,"disabled","text")};`}
    background: none;
  }
`,J=a.forwardRef((e,o)=>{const{wrapperRef:R,disabled:C,readOnly:S,debounceTime:z=0,placeholder:v,prefix:m,suffix:f,value:d,defaultValue:j,onChange:u,onBlur:x,onFocus:y,className:q="",style:w={},size:k="small",color:s="primary",...O}=e,n=a.useRef(),i=D.useTheme(),[W,I]=a.useState(d||j||"");a.useEffect(()=>{d!=null&&I(d)},[d]);const[b,E]=a.useState(!0),[g,V]=a.useState(!1);a.useEffect(()=>{var r;const t=((r=n==null?void 0:n.current)==null?void 0:r.value)||"";n.current.selectionStart=t!=null&&t.length?t.length:0,n.current.selectionEnd=t!=null&&t.length?t.length:0},[b]),a.useEffect(()=>{o!=null&&(o.current=n.current)},[o,n]);const U=a.useCallback(p.debounce((t,r)=>_(t,r),z),[u]),_=(t,r)=>{u&&(u==null||u(t,r))},F=t=>{I(t.target.value),U(t,t.target.value)},L=()=>{E(!b),n.current.focus()},N=t=>{V(!0),y==null||y(t)},T=t=>{V(!1),x==null||x(t)};return c.jsxs(P,{ref:R,style:w,className:q,theme:i,color:s,size:k,focused:g,disabled:C,readOnly:S,children:[m&&c.jsx($,{theme:i,color:s,focused:g,className:"lnc-input-prefix",children:m}),c.jsx(H,{ref:n,type:b?"password":"text",theme:i,color:s,size:k,placeholder:v,prefix:m,suffix:f,disabled:C,readOnly:S,focused:g,onFocus:N,onBlur:T,onChange:F,value:W,...O}),c.jsx(G,{theme:i,color:s,focused:g,onClick:L,children:c.jsx(B,{icon:b?"eye-slash":"eye"})}),f&&c.jsx(A,{theme:i,color:s,focused:g,className:"lnc-input-suffix",children:f})]})});module.exports=J;