stofli-ui/dist/components/input/index.esm.js

Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion

'use client';
import{jsxs as r,jsx as e,Fragment as t}from"react/jsx-runtime";import a,{useState as o,useRef as n,useEffect as i,useCallback as d,useId as l}from"react";import{motion as s}from"framer-motion";import{clsx as u}from"clsx";import{twMerge as c}from"tailwind-merge";var m=function(){return m=Object.assign||function(r){for(var e,t=1,a=arguments.length;t<a;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(r[o]=e[o]);return r},m.apply(this,arguments)};function b(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];return c(u(r))}"function"==typeof SuppressedError&&SuppressedError;var v=a.forwardRef((function(u,c){var v=u.label,p=u.placeholder,g=void 0===p?"":p,f=u.type,h=void 0===f?"text":f,k=u.defaultValue,x=void 0===k?"":k,y=u.value,w=u.name,N=u.id,z=u.disabled,C=void 0!==z&&z,L=u.required,I=void 0!==L&&L,E=u.error,j=u.success,M=void 0!==j&&j,O=u.icon,R=u.iconPosition,q=void 0===R?"left":R,B=u.variant,W=void 0===B?"default":B,$=u.size,F=void 0===$?"md":$,U=u.radius,A=void 0===U?"md":U,D=u.fullWidth,P=void 0!==D&&D,S=u.className,T=void 0===S?"":S,V=u.inputClassName,G=void 0===V?"":V,H=u.labelClassName,J=void 0===H?"":H,K=u.onChange,Q=u.onFocus,X=u.onBlur,Y=u.pattern,Z=u.validate,_=u.successMessage,rr=u["aria-label"],er=u["aria-describedby"],tr=u.description,ar=u.errorId,or=u.descriptionId,nr=u.hideLabel,ir=void 0!==nr&&nr,dr=u.autoComplete,lr=u.readOnly,sr=void 0!==lr&&lr,ur=o(!1),cr=ur[0],mr=ur[1],br=o(x),vr=br[0],pr=br[1],gr=o(E),fr=gr[0],hr=gr[1],kr=o(M),xr=kr[0],yr=kr[1],wr=o(!1),Nr=wr[0],zr=wr[1],Cr=n(null),Lr=o(!1),Ir=Lr[0],Er=Lr[1],jr="password"===h&&Ir?"text":h,Mr=void 0!==y;i((function(){Mr||pr(x)}),[x,Mr]);var Or=o(void 0!==E),Rr=Or[0],qr=Or[1];i((function(){void 0!==E?(hr(E),qr(!0)):qr(!1),void 0!==M&&yr(M)}),[E,M]);var Br=d((function(r){var e=Y||Z||"email"===h||"url"===h;if(Rr&&!e||(hr(void 0),yr(!1)),!I||r){if(e&&r){var t=!0;if(Y&&r)if(!new RegExp(Y).test(r))return hr("email"===h?"Introduce un correo electrónico válido":"url"===h?"Introduce una URL válida":"El formato introducido no es válido"),void(t=!1);if(r){if("email"===h&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r))return hr("Introduce un correo electrónico válido"),void(t=!1);if("url"===h&&!/^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(r))return hr("Introduce una URL válida"),void(t=!1)}if(Z&&r)if("string"==typeof Z){var a=function(r,e){switch(e){case"email":return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)?void 0:"Introduce un correo electrónico válido";case"url":return/^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(r)?void 0:"Introduce una URL válida";case"min:8":return r.length<8?"Debe tener al menos 8 caracteres":void 0;default:if(e.startsWith("min:")){var t=parseInt(e.split(":")[1]);return r.length<t?"Debe tener al menos ".concat(t," caracteres"):void 0}return}}(r,Z);if(a)return hr(a),void(t=!1)}else if("function"==typeof Z)try{var o=Z(r);if(o)return hr(o),void(t=!1)}catch(r){return console.error("Error al ejecutar la validación:",r),hr("Error de validación"),void(t=!1)}e&&t&&yr(!0)}}else hr("Este campo es obligatorio")}),[Y,Z,h,I,Rr]);i((function(){!(Y||Z||"email"===h||"url"===h)||!vr||Nr||fr||xr||(zr(!0),Br(vr))}),[Y,Z,h,vr,Nr,fr,xr,Br]),i((function(){void 0===M&&Nr&&(!Rr||Rr&&(Y||Z||"email"===h||"url"===h))&&Br(vr)}),[vr,Nr,M,Rr,Y,Z,h,Br]);var Wr=l(),$r="input-".concat(Wr.replace(/:/g,"")),Fr=N||w||$r,Ur=ar||"".concat(Fr,"-error"),Ar=or||"".concat(Fr,"-description"),Dr="".concat(Fr,"-label"),Pr=o(""),Sr=Pr[0],Tr=Pr[1];i((function(){if(Sr){var r=setTimeout((function(){return Tr("")}),1e3);return function(){return clearTimeout(r)}}}),[Sr]);var Vr,Gr=function(r){Tr(r)},Hr={sm:O?"left"===q?"pl-7 pr-3":"pl-3 pr-7":"px-3",md:O?"left"===q?"pl-9 pr-4":"pl-4 pr-9":"px-4",lg:O?"left"===q?"pl-10 pr-5":"pl-5 pr-10":"px-5"},Jr={sm:"w-3.5 h-3.5",md:"w-4 h-4",lg:"w-5 h-5"},Kr={default:{base:"border-zinc-400 dark:border-zinc-800 hover:border-zinc-500 dark:hover:border-zinc-700 transition-colors duration-200",focused:"border-zinc-700 dark:border-zinc-300 ring-1 ring-zinc-700/30 dark:ring-zinc-300/30"},primary:{base:"border-blue-400 dark:border-blue-800 hover:border-blue-500 dark:hover:border-blue-700 transition-colors duration-200",focused:"border-blue-700 dark:border-blue-300 ring-1 ring-blue-700/30 dark:ring-blue-300/30"},secondary:{base:"border-purple-400 dark:border-purple-800 hover:border-purple-500 dark:hover:border-purple-700 transition-colors duration-200",focused:"border-purple-700 dark:border-purple-300 ring-1 ring-purple-700/30 dark:ring-purple-300/30"},success:{base:"border-green-400 dark:border-green-800 hover:border-green-500 dark:hover:border-green-700 transition-colors duration-200",focused:"border-green-700 dark:border-green-300 ring-1 ring-green-700/30 dark:ring-green-300/30"},warning:{base:"border-amber-400 dark:border-amber-800 hover:border-amber-500 dark:hover:border-amber-700 transition-colors duration-200",focused:"border-amber-700 dark:border-amber-300 ring-1 ring-amber-700/30 dark:ring-amber-300/30"},danger:{base:"border-red-400 dark:border-red-800 hover:border-red-500 dark:hover:border-red-700 transition-colors duration-200",focused:"border-red-700 dark:border-red-300 ring-1 ring-red-700/30 dark:ring-red-300/30"}},Qr="border-red-500 dark:border-red-500 ring-1 ring-red-500/20 dark:ring-red-500/20",Xr="border-red-700 dark:border-red-400 ring-1 ring-red-700/30 dark:ring-red-400/30",Yr="border-green-500 dark:border-green-500 ring-1 ring-green-500/20 dark:ring-green-500/20",Zr="border-green-700 dark:border-green-300 ring-1 ring-green-700/30 dark:ring-green-300/30",_r=Kr[W].base;return fr?_r=cr?Xr:Qr:xr&&(Y||Z||"email"===h||"url"===h||void 0!==M)?_r=cr?Zr:Yr:cr&&(_r=Kr[W].focused),r("div",{className:b("relative",P?"w-full":"inline-block",T),children:[e("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:Sr}),v&&r("label",{id:Dr,htmlFor:Fr,className:b(ir?"sr-only":"block mb-1.5 font-medium",{sm:"text-xs",md:"text-sm",lg:"text-base"}[F],C?"text-neutral-400 dark:text-neutral-600":"text-neutral-900 dark:text-neutral-100",J),children:[v,I&&r(t,{children:[e("span",{"aria-hidden":"true",className:"text-red-500 ml-0.5",children:"*"}),e("span",{className:"sr-only",children:"(requerido)"})]})]}),tr&&e("div",{id:Ar,className:"text-sm text-neutral-500 dark:text-neutral-400 mb-1",children:tr}),r("div",{className:"relative",children:[e("input",m({ref:c||Cr,type:jr,id:Fr,name:w,className:b("w-full border bg-white dark:bg-zinc-900",{sm:"h-8 text-xs",md:"h-10 text-sm",lg:"h-12 text-base"}[F],Hr[F],{none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"}[A],_r,C?"opacity-60 cursor-not-allowed":"focus:outline-none ring-inset transition-all duration-200 ease-in-out","min-h-[44px]","password"===h?"pr-10":"","text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-600 dark:placeholder:text-neutral-400",G),placeholder:g,disabled:C,required:I,readOnly:sr,autoComplete:dr},Mr?{value:y}:{value:vr},{onChange:function(r){var e=r.target.value;Mr||pr(e),Nr||zr(!0),(!Rr||Rr&&(Y||Z||"email"===h||"url"===h))&&Br(e),fr?Gr("Error de validación corregido"):xr&&Gr("Campo válido"),null==K||K(r)},onFocus:function(r){mr(!0),tr&&Gr(tr),null==Q||Q(r)},onBlur:function(r){mr(!1),zr(!0),(!Rr||Rr&&(Y||Z||"email"===h||"url"===h))&&Br(r.target.value),fr&&Gr("Error: ".concat(fr)),null==X||X(r)},pattern:Y,"aria-invalid":!!fr,"aria-required":I,"aria-label":ir?rr||v:void 0,"aria-labelledby":ir?void 0:Dr,"aria-describedby":(Vr=[],tr&&Vr.push(Ar),fr&&Vr.push(Ur),er&&Vr.push(er),Vr.length>0?Vr.join(" "):void 0),"aria-disabled":C,role:"search"===h?"searchbox":void 0})),O&&e("div",{className:b("absolute top-1/2 transform -translate-y-1/2",{sm:{left:"left-3",right:"right-3"},md:{left:"left-3.5",right:"right-3.5"},lg:{left:"left-4",right:"right-4"}}[F][q],C?"text-neutral-400 dark:text-neutral-600":fr?"text-red-500 dark:text-red-400":xr&&(Y||Z||"email"===h||"url"===h||void 0!==M)?"text-green-500 dark:text-green-400":cr?"text-".concat("default"===W?"zinc":W,"-500 dark:text-").concat("default"===W?"zinc":W,"-400"):"text-neutral-500 dark:text-neutral-400","transition-colors duration-200"),"aria-hidden":"true",children:a.cloneElement(O,{className:Jr[F]})}),"password"===h&&!C&&e("button",{type:"button",onClick:function(){return Er(!Ir)},className:b("absolute top-1/2 transform -translate-y-1/2 right-3.5","text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300","transition-colors duration-200 focus:outline-none"),"aria-label":Ir?"Ocultar contraseña":"Mostrar contraseña",tabIndex:-1,children:Ir?e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:Jr[F],children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"})}):r("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:Jr[F],children:[e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"}),e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})]})})]}),fr&&e(s.div,{id:Ur,role:"alert",initial:{opacity:0,y:-5},animate:{opacity:1,y:0},className:"text-red-500 dark:text-red-400 text-xs mt-1",children:fr}),xr&&!fr&&_&&e(s.div,{role:"status",initial:{opacity:0,y:-5},animate:{opacity:1,y:0},className:"text-green-500 dark:text-green-400 text-xs mt-1",children:_})]})}));v.displayName="Input";export{v as default};
//# sourceMappingURL=index.esm.js.map