koval-ui/dist/src/lib/InputPassword/InputPassword.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("react"),P=require("classnames"),_=require("../../internal/Icons/IconLock.cjs"),z=require("../../internal/Icons/IconLockOpen.cjs"),A=require("../../internal/inputs/ValidationProps.cjs"),D=require("../../internal/inputs/useValidation.cjs"),G=require("../../internal/inputs/useRevalidateOnFormChange.cjs"),H=require("../../internal/inputs/useExternalValidation.cjs"),J=require("../../internal/inputs/useValidationIcon.cjs"),K=require("../../internal/hooks/useInternalId.cjs"),Q=require("../../internal/hooks/useInternalRef.cjs"),a=require("./InputPassword.module.css.cjs"),x=e.forwardRef(({className:h,placeholder:q="",disabled:V,value:w,onChange:d=()=>{},onFocus:b=()=>{},onBlur:k=()=>{},onKeyDown:g=()=>{},onKeyUp:C=()=>{},defaultValue:R,id:j,readOnly:o,size:y=16,revalidateOnFormChange:L,validation:r,errorMessage:S,displayIcon:I=!0,...n},N)=>{const F=!!r||!!n.required||typeof n.maxLength=="number"||typeof n.minLength=="number"||typeof n.pattern=="string",{validateTextual:p,validity:m,setValidity:l}=D.useValidation({validation:r,hasValidators:F}),c=Q.useInternalRef(N);G.useRevalidateOnFormChange(c,p,L),H.useExternalValidation({errorMessage:S,inputRef:c,setValidity:l,validation:r});const O=J.useValidationIcon(m),T=e.useCallback(i=>{d(i)},[d]),v=e.useCallback(()=>{l(A.ValidationState.error)},[l]),f=K.useInternalId(j),B=e.useCallback(i=>{o&&i.target.select()},[o]),[t,u]=e.useState("password"),E=e.useMemo(()=>({text:z.IconLockOpen,password:_.IconLock})[t],[t]),M=e.useCallback(()=>{t==="password"&&u("text"),t==="text"&&u("password")},[t,u]);return s.jsxs("div",{className:P(a.default.wrapper,{[a.default.withValidationIcon]:I},h),children:[s.jsx("label",{tabIndex:-1,onClick:M,className:a.default.prefix,htmlFor:f,children:s.jsx(E,{})}),s.jsx("input",{...n,size:y,id:f,readOnly:o,placeholder:q,className:a.default.input,ref:c,disabled:V,type:t,value:w,defaultValue:R,onChange:T,onBlur:k,onFocus:b,onKeyUp:C,onKeyDown:g,onInvalid:v,onInput:p,onSelect:B}),I&&m&&s.jsx(O,{})]})});x.displayName="InputPassword";exports.InputPassword=x;
//# sourceMappingURL=InputPassword.cjs.map