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

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

'use client';
"use strict";var r=require("react/jsx-runtime"),e=require("react"),t=require("framer-motion"),a=require("clsx"),o=require("tailwind-merge"),n=function(){return n=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},n.apply(this,arguments)};function i(){for(var r=[],e=0;e<arguments.length;e++)r[e]=arguments[e];return o.twMerge(a.clsx(r))}"function"==typeof SuppressedError&&SuppressedError;var d=e.forwardRef((function(a,o){var d=a.label,l=a.placeholder,s=void 0===l?"":l,u=a.type,c=void 0===u?"text":u,b=a.defaultValue,v=void 0===b?"":b,m=a.value,p=a.name,g=a.id,f=a.disabled,h=void 0!==f&&f,x=a.required,k=void 0!==x&&x,y=a.error,w=a.success,j=void 0!==w&&w,N=a.icon,z=a.iconPosition,E=void 0===z?"left":z,C=a.variant,L=void 0===C?"default":C,I=a.size,S=void 0===I?"md":I,q=a.radius,M=void 0===q?"md":q,O=a.fullWidth,R=void 0!==O&&O,B=a.className,F=void 0===B?"":B,W=a.inputClassName,$=void 0===W?"":W,U=a.labelClassName,A=void 0===U?"":U,D=a.onChange,P=a.onFocus,T=a.onBlur,V=a.pattern,G=a.validate,H=a.successMessage,J=a["aria-label"],K=a["aria-describedby"],Q=a.description,X=a.errorId,Y=a.descriptionId,Z=a.hideLabel,_=void 0!==Z&&Z,rr=a.autoComplete,er=a.readOnly,tr=void 0!==er&&er,ar=e.useState(!1),or=ar[0],nr=ar[1],ir=e.useState(v),dr=ir[0],lr=ir[1],sr=e.useState(y),ur=sr[0],cr=sr[1],br=e.useState(j),vr=br[0],mr=br[1],pr=e.useState(!1),gr=pr[0],fr=pr[1],hr=e.useRef(null),xr=e.useState(!1),kr=xr[0],yr=xr[1],wr="password"===c&&kr?"text":c,jr=void 0!==m;e.useEffect((function(){jr||lr(v)}),[v,jr]);var Nr=e.useState(void 0!==y),zr=Nr[0],Er=Nr[1];e.useEffect((function(){void 0!==y?(cr(y),Er(!0)):Er(!1),void 0!==j&&mr(j)}),[y,j]);var Cr=e.useCallback((function(r){var e=V||G||"email"===c||"url"===c;if(zr&&!e||(cr(void 0),mr(!1)),!k||r){if(e&&r){var t=!0;if(V&&r)if(!new RegExp(V).test(r))return cr("email"===c?"Introduce un correo electrónico válido":"url"===c?"Introduce una URL válida":"El formato introducido no es válido"),void(t=!1);if(r){if("email"===c&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r))return cr("Introduce un correo electrónico válido"),void(t=!1);if("url"===c&&!/^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/.test(r))return cr("Introduce una URL válida"),void(t=!1)}if(G&&r)if("string"==typeof G){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,G);if(a)return cr(a),void(t=!1)}else if("function"==typeof G)try{var o=G(r);if(o)return cr(o),void(t=!1)}catch(r){return console.error("Error al ejecutar la validación:",r),cr("Error de validación"),void(t=!1)}e&&t&&mr(!0)}}else cr("Este campo es obligatorio")}),[V,G,c,k,zr]);e.useEffect((function(){!(V||G||"email"===c||"url"===c)||!dr||gr||ur||vr||(fr(!0),Cr(dr))}),[V,G,c,dr,gr,ur,vr,Cr]),e.useEffect((function(){void 0===j&&gr&&(!zr||zr&&(V||G||"email"===c||"url"===c))&&Cr(dr)}),[dr,gr,j,zr,V,G,c,Cr]);var Lr=e.useId(),Ir="input-".concat(Lr.replace(/:/g,"")),Sr=g||p||Ir,qr=X||"".concat(Sr,"-error"),Mr=Y||"".concat(Sr,"-description"),Or="".concat(Sr,"-label"),Rr=e.useState(""),Br=Rr[0],Fr=Rr[1];e.useEffect((function(){if(Br){var r=setTimeout((function(){return Fr("")}),1e3);return function(){return clearTimeout(r)}}}),[Br]);var Wr,$r=function(r){Fr(r)},Ur={sm:N?"left"===E?"pl-7 pr-3":"pl-3 pr-7":"px-3",md:N?"left"===E?"pl-9 pr-4":"pl-4 pr-9":"px-4",lg:N?"left"===E?"pl-10 pr-5":"pl-5 pr-10":"px-5"},Ar={sm:"w-3.5 h-3.5",md:"w-4 h-4",lg:"w-5 h-5"},Dr={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"}},Pr="border-red-500 dark:border-red-500 ring-1 ring-red-500/20 dark:ring-red-500/20",Tr="border-red-700 dark:border-red-400 ring-1 ring-red-700/30 dark:ring-red-400/30",Vr="border-green-500 dark:border-green-500 ring-1 ring-green-500/20 dark:ring-green-500/20",Gr="border-green-700 dark:border-green-300 ring-1 ring-green-700/30 dark:ring-green-300/30",Hr=Dr[L].base;return ur?Hr=or?Tr:Pr:vr&&(V||G||"email"===c||"url"===c||void 0!==j)?Hr=or?Gr:Vr:or&&(Hr=Dr[L].focused),r.jsxs("div",{className:i("relative",R?"w-full":"inline-block",F),children:[r.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:Br}),d&&r.jsxs("label",{id:Or,htmlFor:Sr,className:i(_?"sr-only":"block mb-1.5 font-medium",{sm:"text-xs",md:"text-sm",lg:"text-base"}[S],h?"text-neutral-400 dark:text-neutral-600":"text-neutral-900 dark:text-neutral-100",A),children:[d,k&&r.jsxs(r.Fragment,{children:[r.jsx("span",{"aria-hidden":"true",className:"text-red-500 ml-0.5",children:"*"}),r.jsx("span",{className:"sr-only",children:"(requerido)"})]})]}),Q&&r.jsx("div",{id:Mr,className:"text-sm text-neutral-500 dark:text-neutral-400 mb-1",children:Q}),r.jsxs("div",{className:"relative",children:[r.jsx("input",n({ref:o||hr,type:wr,id:Sr,name:p,className:i("w-full border bg-white dark:bg-zinc-900",{sm:"h-8 text-xs",md:"h-10 text-sm",lg:"h-12 text-base"}[S],Ur[S],{none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"}[M],Hr,h?"opacity-60 cursor-not-allowed":"focus:outline-none ring-inset transition-all duration-200 ease-in-out","min-h-[44px]","password"===c?"pr-10":"","text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-600 dark:placeholder:text-neutral-400",$),placeholder:s,disabled:h,required:k,readOnly:tr,autoComplete:rr},jr?{value:m}:{value:dr},{onChange:function(r){var e=r.target.value;jr||lr(e),gr||fr(!0),(!zr||zr&&(V||G||"email"===c||"url"===c))&&Cr(e),ur?$r("Error de validación corregido"):vr&&$r("Campo válido"),null==D||D(r)},onFocus:function(r){nr(!0),Q&&$r(Q),null==P||P(r)},onBlur:function(r){nr(!1),fr(!0),(!zr||zr&&(V||G||"email"===c||"url"===c))&&Cr(r.target.value),ur&&$r("Error: ".concat(ur)),null==T||T(r)},pattern:V,"aria-invalid":!!ur,"aria-required":k,"aria-label":_?J||d:void 0,"aria-labelledby":_?void 0:Or,"aria-describedby":(Wr=[],Q&&Wr.push(Mr),ur&&Wr.push(qr),K&&Wr.push(K),Wr.length>0?Wr.join(" "):void 0),"aria-disabled":h,role:"search"===c?"searchbox":void 0})),N&&r.jsx("div",{className:i("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"}}[S][E],h?"text-neutral-400 dark:text-neutral-600":ur?"text-red-500 dark:text-red-400":vr&&(V||G||"email"===c||"url"===c||void 0!==j)?"text-green-500 dark:text-green-400":or?"text-".concat("default"===L?"zinc":L,"-500 dark:text-").concat("default"===L?"zinc":L,"-400"):"text-neutral-500 dark:text-neutral-400","transition-colors duration-200"),"aria-hidden":"true",children:e.cloneElement(N,{className:Ar[S]})}),"password"===c&&!h&&r.jsx("button",{type:"button",onClick:function(){return yr(!kr)},className:i("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":kr?"Ocultar contraseña":"Mostrar contraseña",tabIndex:-1,children:kr?r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:Ar[S],children:r.jsx("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.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:Ar[S],children:[r.jsx("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"}),r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12a3 3 0 11-6 0 3 3 0 016 0z"})]})})]}),ur&&r.jsx(t.motion.div,{id:qr,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:ur}),vr&&!ur&&H&&r.jsx(t.motion.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:H})]})}));d.displayName="Input",module.exports=d;
//# sourceMappingURL=index.js.map