@start-base/react-form-elements/Input/index.mjs

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import e,{forwardRef as l,useCallback as a,useMemo as n}from"react";import r from"clsx";var t=Object.defineProperty,o=Object.defineProperties,p=Object.getOwnPropertyDescriptors,u=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,m=(e,l,a)=>l in e?t(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,i=(e,l)=>{for(var a in l||(l={}))d.call(l,a)&&m(e,a,l[a]);if(u)for(var a of u(l))s.call(l,a)&&m(e,a,l[a]);return e},c="SUI-Input-module-root-Jh-4e",b="SUI-Input-module-inputRoot-Ug822",I="SUI-Input-module-label-fpxAl",S="SUI-Input-module-disableShrink-VTup6",f="SUI-Input-module-prepend-PTtkE",h="SUI-Input-module-placeholder-RxhY2",v="SUI-Input-module-labelPlaceholder-03rs3",N="SUI-Input-module-input-SMgjS",U="SUI-Input-module-disabledLabel-hKDBK",y="SUI-Input-module-append-TNa8b",C="SUI-Input-module-appendDisabledShrink-ULDV8",g="SUI-Input-module-prependDisabledShrink-5DxUo",E="SUI-Input-module-errorLabel-Qp8cB",O="SUI-Input-module-inputError-EeFMs",j="SUI-Input-module-disabled--Ng0A",x=l((l,t)=>{var m=l,{name:x,onChange:k,error:P=null,label:D=null,placeholder:w,value:A="",inputClassName:L=null,labelClassName:T=null,errorClassName:q=null,prepend:B=null,prependClassName:F=null,append:K=null,appendClassName:M=null,disableShrink:R=!1,disabled:V=!1}=m,J=((e,l)=>{var a={};for(var n in e)d.call(e,n)&&l.indexOf(n)<0&&(a[n]=e[n]);if(null!=e&&u)for(var n of u(e))l.indexOf(n)<0&&s.call(e,n)&&(a[n]=e[n]);return a})(m,["name","onChange","error","label","placeholder","value","inputClassName","labelClassName","errorClassName","prepend","prependClassName","append","appendClassName","disableShrink","disabled"]);const Q=a(e=>{k(e)},[k]),Y=n(()=>{let e=null;return P&&"string"==typeof P?e=P:P&&"object"==typeof P&&(null==P?void 0:P.message)&&(e=P.message),e},[P]),$=n(()=>e.createElement("input",i({type:"text",className:r(N,i({[S]:R||!D,[h]:D&&w&&!R,[j]:V,[O]:"boolean"==typeof P&&P},L?{[L]:!0}:{})),name:x,value:A,ref:t,onChange:Q,disabled:V,placeholder:w},J)),[R,D,w,V,P,L,x,A,t,Q,J]),z=n(()=>e.createElement("label",{htmlFor:x,className:r(I,i({[U]:V,[S]:R,[v]:D&&w&&!R},T?{[T]:!0}:{})),onClick:()=>{var e;try{const l=document.querySelectorAll(`[name="${x}"]`);if(!l.length)return;let a=l[0];"hidden"===(null==a?void 0:a.type)&&(a=null==(e=null==a?void 0:a.parentNode)?void 0:e.querySelector("input")),null==a||a.focus()}catch(e){throw e}}},D),[V,x,R,D,w,T]);return e.createElement("div",{className:r(c)},e.createElement("div",{className:r(b)},B&&e.createElement("div",{className:r(f,(G=i({},F?{[F]:!0}:{}),H={[g]:R},o(G,p(H))))},B),K&&e.createElement("div",{className:r(y,i({[C]:R},M?{[M]:!0}:{}))},K),D&&R?z:null,$,D&&!R?z:null),Y?e.createElement("span",{className:r(E,i({},q?{[q]:!0}:{}))},Y):null);var G,H});x.displayName="Input";var k=x;export{k as default};