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

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

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