@start-base/react-form-elements/PasswordInput/index.js

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

"use strict";var e=require("react"),l=require("clsx");function a(e){return e&&e.__esModule?e:{default:e}}var t=a(e),r=a(l),n=Object.defineProperty,u=Object.defineProperties,o=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,m=(e,l,a)=>l in e?n(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,c=(e,l)=>{for(var a in l||(l={}))s.call(l,a)&&m(e,a,l[a]);if(d)for(var a of d(l))p.call(l,a)&&m(e,a,l[a]);return e},i=(e,l)=>u(e,o(l)),f=(e,l)=>{var a={};for(var t in e)s.call(e,t)&&l.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&d)for(var t of d(e))l.indexOf(t)<0&&p.call(e,t)&&(a[t]=e[t]);return a},I="SUI-Input-module-root-Jh-4e",b="SUI-Input-module-inputRoot-Ug822",S="SUI-Input-module-label-fpxAl",v="SUI-Input-module-disableShrink-VTup6",h="SUI-Input-module-prepend-PTtkE",N="SUI-Input-module-placeholder-RxhY2",y="SUI-Input-module-labelPlaceholder-03rs3",U="SUI-Input-module-input-SMgjS",w="SUI-Input-module-disabledLabel-hKDBK",E="SUI-Input-module-append-TNa8b",C="SUI-Input-module-appendDisabledShrink-ULDV8",g="SUI-Input-module-prependDisabledShrink-5DxUo",P="SUI-Input-module-errorLabel-Qp8cB",k="SUI-Input-module-inputError-EeFMs",x="SUI-Input-module-disabled--Ng0A",M=e.forwardRef(((l,a)=>{var n=l,{name:u,onChange:o,error:d=null,label:s=null,placeholder:p,value:m="",inputClassName:M=null,labelClassName:O=null,errorClassName:j=null,prepend:q=null,prependClassName:D=null,append:T=null,appendClassName:A=null,disableShrink:B=!1,disabled:F=!1}=n,L=f(n,["name","onChange","error","label","placeholder","value","inputClassName","labelClassName","errorClassName","prepend","prependClassName","append","appendClassName","disableShrink","disabled"]);const R=e.useCallback((e=>{o(e)}),[o]),V=e.useMemo((()=>{let e=null;return d&&"string"==typeof d?e=d:d&&"object"==typeof d&&(null==d?void 0:d.message)&&(e=d.message),e}),[d]),K=e.useMemo((()=>t.default.createElement("input",c({type:"text",className:r.default(U,c({[v]:B||!s,[N]:s&&p&&!B,[x]:F,[k]:"boolean"==typeof d&&d},M?{[M]:!0}:{})),name:u,value:m,ref:a,onChange:R,disabled:F,placeholder:p},L))),[B,s,p,F,d,M,u,m,a,R,L]),_=e.useMemo((()=>t.default.createElement("label",{htmlFor:u,className:r.default(S,c({[w]:F,[v]:B,[y]:s&&p&&!B},O?{[O]:!0}:{})),onClick:()=>{var e;try{const l=document.querySelectorAll(`[name="${u}"]`);if(!l.length)return;let a=l[0];"hidden"===(null==a?void 0:a.type)&&(a=null==(e=null==a?void 0:a.parentNode)?void 0:e.querySelector("input")),null==a||a.focus()}catch(e){throw e}}},s)),[F,u,B,s,p,O]);return t.default.createElement("div",{className:r.default(I)},t.default.createElement("div",{className:r.default(b)},q&&t.default.createElement("div",{className:r.default(h,i(c({},D?{[D]:!0}:{}),{[g]:B}))},q),T&&t.default.createElement("div",{className:r.default(E,c({[C]:B},A?{[A]:!0}:{}))},T),s&&B?_:null,K,s&&!B?_:null),V?t.default.createElement("span",{className:r.default(P,c({},j?{[j]:!0}:{}))},V):null)}));M.displayName="Input";var O=M,j="SUI-PasswordInput-module-toggle-8EyjV",q="SUI-PasswordInput-module-iconEye-oM3Hj",D="SUI-PasswordInput-module-eyeOpen-87-pd",T="SUI-PasswordInput-module-eyeClose-pq-bC",A="SUI-PasswordInput-module-eye-verXZ",B="SUI-PasswordInput-module-eyeBottom-AS2w1",F="SUI-PasswordInput-module-eyeTop-qt-jI",L="SUI-PasswordInput-module-eyeLashes-UeFnm",R="SUI-PasswordInput-module-eyePupil-TawFz",V=e.forwardRef(((l,a)=>{var n=f(l,[]);const[u,o]=e.useState(!1),d=e.useCallback((e=>{e.preventDefault(),o((e=>!e))}),[]);return t.default.createElement(O,i(c({ref:a},n),{type:u?"text":"password",append:t.default.createElement("button",{type:"button",className:j,onClick:d},t.default.createElement("div",{className:r.default({[D]:u,[T]:!u})},t.default.createElement("div",{className:q},t.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"-20 -220 320 400",width:20,height:20},t.default.createElement("g",{fill:"none",className:A,strokeWidth:40},t.default.createElement("g",{stroke:"currentColor",className:L},t.default.createElement("path",{d:"M140 90v90M70 60l-60 80M210 60l60 80"})),t.default.createElement("path",{stroke:"currentColor",d:"M0 0q140 190 280 0",className:B}),t.default.createElement("path",{stroke:"currentColor",d:"M0 0q140 190 280 0",className:F}),t.default.createElement("circle",{cx:140,r:40,fill:"currentColor",className:R}))))))}))}));V.displayName="PasswordInput";var K=V;module.exports=K;