import{_ as _extends}from"./_rollupPluginBabelHelpers-B5fk9IVe.js";import React__default,{useRef,useState,useEffect,useMemo,useId}from"react";import PropTypes from"prop-types";import{L as Label,F as FormHint}from"./FormHint.component-BPhoMz7f.js";import{I as Icon}from"./Icon.component-BVkaZqpA.js";const textinputstyles=`
	jn-bg-theme-textinput
	jn-text-theme-textinput
  jn-border
	jn-text-base
	jn-leading-4
	jn-px-4
	jn-h-textinput
	jn-rounded-3px
	focus:jn-outline-none
	focus:jn-ring-2
	focus:jn-ring-theme-focus
	disabled:jn-opacity-50
  autofill:jn-bg-theme-textinput-autofill
  autofill:jn-text-theme-textinput-autofill
  peer
`,defaultborderstyles=`
	jn-border-theme-textinput-default
`,invalidstyles=`
	jn-border-theme-error
`,validstyles=`
	jn-border-theme-success
`,withLabelStyles=`
  jn-pt-[1.125rem] 
  jn-pb-1
`,noLabelStyles=`
  jn-py-4
`,wrapperStyles=`
  jn-inline-block
  jn-relative
`,labelStyles=`
  peer-autofill:jn-text-theme-textinput-autofill-label
  jn-pointer-events-none
  jn-top-2
  jn-left-[0.9375rem]
`,iconcontainerstyles=`
  jn-inline-flex
  jn-absolute
  jn-top-[.4rem]
  jn-right-3
`,disablediconstyles=`
  jn-opacity-50
`,hintStyles=`
  jn-mt-0
`,TextInput=a=>{let{value:c="",id:d="",placeholder:e="",disabled:f=!1,readOnly:g=!1,required:h=!1,invalid:i=!1,valid:j=!1,autoFocus:k=!1,className:l="",autoComplete:m="off",helptext:n="",successtext:o="",errortext:p="",onChange:q=void 0,onFocus:r=void 0,onBlur:s=void 0,type:t=null,label:u=void 0,width:v="full",wrapperClassName:w="",...b}=a;const x=a=>"string"!=typeof a||0!==a.trim().length,y=useRef(),[z,A]=useState(""),[B,C]=useState(!1),[D,E]=useState(!1),[F,G]=useState(!1);useEffect(()=>{document.hasFocus()&&y.current.contains(document.activeElement)&&C(!0)},[]),useEffect(()=>{A(c)},[c]);const H=useMemo(()=>i||!!(p&&x(p)),[i,p]),I=useMemo(()=>j||!!(o&&x(o)),[j,o]);useEffect(()=>{E(H)},[H]),useEffect(()=>{G(I)},[I]);const J=d||(()=>"juno-textinput-"+useId())();return React__default.createElement("div",null,React__default.createElement("span",{className:`
          juno-textinput-wrapper 
          ${wrapperStyles}
          ${"auto"==v?"jn-inline-block":"jn-block"}
          ${"auto"==v?"jn-w-auto":"jn-w-full"}
          ${w}
          `},React__default.createElement("input",_extends({type:t,name:name,autoComplete:m,value:z,id:J,ref:y,placeholder:e,disabled:f,readOnly:g,autoFocus:k,onChange:a=>{A(a.target.value),q&&q(a)},onFocus:a=>{C(!0),r&&r(a)},onBlur:a=>{C(!1),s&&s(a)},className:`juno-textinput 
            ${textinputstyles}
            ${u?withLabelStyles:noLabelStyles}
            ${D?"juno-textinput-invalid "+invalidstyles:""} 
            ${F?"juno-textinput-valid "+validstyles:""}  
            ${F||D?"":defaultborderstyles} 
            ${"auto"==v?"jn-w-auto":"jn-w-full"}
            ${l}
          `},b)),u&&u.length?React__default.createElement(Label,{text:u,htmlFor:J,className:`${labelStyles}`,disabled:f,required:h,floating:!0,minimized:!!(e||B||z&&z.length)}):"",React__default.createElement(a=>{let{disabled:b}=a;return F||D?React__default.createElement("div",{className:`juno-textinput-row-icon-container ${iconcontainerstyles} ${b?disablediconstyles:""}`},D?React__default.createElement(Icon,{icon:"dangerous",color:"jn-text-theme-error"}):null,F?React__default.createElement(Icon,{icon:"checkCircle",color:"jn-text-theme-success"}):null):""},{disabled:f})),p&&x(p)?React__default.createElement(FormHint,{text:p,variant:"error",className:`${hintStyles}`}):"",o&&x(o)?React__default.createElement(FormHint,{text:o,variant:"success",className:`${hintStyles}`}):"",n&&x(n)?React__default.createElement(FormHint,{text:n,className:`${hintStyles}`}):"")};TextInput.propTypes={name:PropTypes.string,value:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),id:PropTypes.string,placeholder:PropTypes.string,disabled:PropTypes.bool,readOnly:PropTypes.bool,required:PropTypes.bool,invalid:PropTypes.bool,valid:PropTypes.bool,autoFocus:PropTypes.bool,className:PropTypes.string,autoComplete:PropTypes.string,onChange:PropTypes.func,onFocus:PropTypes.func,onBlur:PropTypes.func,type:PropTypes.oneOf(["text","email","password","tel","url","number"]),label:PropTypes.string,helptext:PropTypes.node,successtext:PropTypes.node,errortext:PropTypes.node,width:PropTypes.oneOf(["full","auto"]),wrapperClassName:PropTypes.string};export{TextInput as T};