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