retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.18 kB
JavaScript
;var s=require("../../_virtual/_tslib.js"),e=require("react"),a=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),r=require("../../utils/classNames.js"),t=require("../../constants/commonClassNames.js"),o=require("./PasswordInput.styled.js");const i=e.forwardRef(((i,n)=>{var{id:d,className:l,variant:u="filled",size:c="medium",showToggle:m=!0,sx:w,onPasswordChange:g,onChange:p}=i,j=s.__rest(i,["id","className","variant","size","showToggle","sx","onPasswordChange","onChange"]);const[h,v]=e.useState(!1);return a.jsxs(o.PasswordInputContainer,Object.assign({className:r.classNames("password-input-root",l,t.default),sx:w},{children:[a.jsx(o.PasswordInputField,Object.assign({},j,{ref:n,id:d,type:h?"text":"password",$variant:u,$size:c,onChange:s=>{null==g||g(s.target.value),null==p||p(s)},className:"password-input-field"}),void 0),m&&a.jsx(o.PasswordToggleButton,Object.assign({type:"button",$variant:u,onClick:()=>{v(!h)},className:"password-toggle-button","aria-label":h?"Hide password":"Show password",tabIndex:-1},{children:h?"●":"○"}),void 0)]}),void 0)}));i.displayName="PasswordInput",exports.PasswordInput=i;