@infinityfx/fluid/dist/components/input/password-field.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useMemo as o}from"react";import i from"./field.js";import a from"./toggle.js";import n from"../feedback/progress-bar.js";import s from"../../hooks/use-input-props.js";import{combineClasses as c,classes as l}from"../../core/utils.js";import{createStyles as m}from"../../core/style.js";import{Icon as d}from"../../core/icons.js";const f=["#eb2a1c","#eb2a1c","#e8831e","#f0d030","#fff952","#5aff54"],p=m("password-field",{".wrapper":{minWidth:"min(var(--width, 100vw), 12em)"},".field":{"--width":"100%"},".wrapper .track":{width:"100%",marginTop:"var(--f-spacing-xsm)"},".field .toggle":{marginRight:".25em"}});function g({cc:m={},strengthBar:g=!1,size:h="med",round:u,error:v,icon:w,left:b,right:j,defaultValue:k,onEnter:x,inputRef:y,ref:z,...C}){const R=c(p,m),[E,L]=void 0!==C.value?[C.value]:t(k||""),[N,T]=t(!1),W=o((()=>{let e=0;for(const r of[/[a-z]/,/[A-Z]/,/\d/,/\W|_/,new RegExp(`.{${C.minLength||10},}`)])r.test(E?.toString()||"")&&e++;return e}),[E,C.minLength]),[A,B]=s(C);return e("div",{ref:z,...B,className:l(R.wrapper,C.className),children:[r(i,{...A,inputRef:y,type:N?"text":"password",round:u,size:h,error:v,icon:w,left:b,value:E,onEnter:x,cc:{...m,field:R.field},onChange:e=>{L?.(e.target.value),C.onChange?.(e)},right:r(a,{compact:!0,"aria-label":"Toggle visibility",round:u,size:h,variant:"minimal",disabled:C.disabled,checkedContent:r(d,{type:"hide"}),checked:N,onChange:e=>T(e.target.checked),cc:{toggle:R.toggle},children:r(d,{type:"show"})})}),g&&r(n,{size:"sml",value:W/5,color:f[W],cc:{track:R.track},"aria-label":"Password strength"})]})}export{g as default};
//# sourceMappingURL=password-field.js.map