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

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

'use client';
import{jsxs as e,jsx as r,Fragment as a}from"react/jsx-runtime";import{useState as t,useRef as o,useId as n,useEffect as i}from"react";import{motion as d,AnimatePresence as l}from"framer-motion";import{ChevronUp as u,ChevronDown as c,Plus as s,Minus as b}from"lucide-react";import{clsx as p}from"clsx";import{twMerge as m}from"tailwind-merge";var v=function(){return v=Object.assign||function(e){for(var r,a=1,t=arguments.length;a<t;a++)for(var o in r=arguments[a])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},v.apply(this,arguments)};function g(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return m(p(e))}"function"==typeof SuppressedError&&SuppressedError;var f=function(p){var m=p.value,f=p.defaultValue,x=p.min,h=p.max,k=p.step,y=void 0===k?1:k,w=p.disabled,z=void 0!==w&&w,N=p.readonly,C=void 0!==N&&N,D=p.label,S=p.placeholder,B=p.error,j=p.size,E=void 0===j?"md":j,F=p.variant,O=void 0===F?"default":F,V=p.radius,q=void 0===V?"md":V,I=p.fullWidth,P=void 0!==I&&I,A=p.className,T=void 0===A?"":A,$=p.inputClassName,L=void 0===$?"":$,R=p.labelClassName,U=void 0===R?"":R,H=p.errorClassName,K=void 0===H?"":H,M=p.controlsClassName,W=void 0===M?"":M,G=p.controlButtonClassName,J=void 0===G?"":G,Q=p.inputContainerClassName,X=void 0===Q?"":Q,Y=p.controlsLayout,Z=void 0===Y?"default":Y,_=p.controlsPosition,ee=void 0===_?"right":_,re=p.showControls,ae=void 0===re||re,te=p.iconSet,oe=void 0===te?"chevron":te,ne=p.required,ie=void 0!==ne&&ne,de=p.name,le=p.id,ue=p.animationStyle,ce=void 0===ue?"slide":ue,se=p.format,be=void 0===se?"default":se,pe=p.formatOptions,me=void 0===pe?{}:pe,ve=p.onChange,ge=p.onFocus,fe=p.onBlur,xe=p["aria-label"],he=p["aria-describedby"],ke=p.description,ye=p.errorId,we=p.descriptionId,ze=p.hideLabel,Ne=void 0!==ze&&ze,Ce=p.autoComplete,De=t(void 0!==m?m:f),Se=De[0],Be=De[1],je=t(!1),Ee=je[0],Fe=je[1],Oe=t(null),Ve=Oe[0],qe=Oe[1],Ie=t(!1),Pe=Ie[0],Ae=Ie[1],Te=t(""),$e=Te[0],Le=Te[1],Re=o(null),Ue=void 0!==m,He=Ue?m:Se,Ke=n(),Me=le||"number-input-".concat(Ke.replace(/:/g,"")),We="".concat(Me,"-label"),Ge=ye||"".concat(Me,"-error"),Je=we||"".concat(Me,"-description"),Qe="".concat(Me,"-live");i((function(){Ue&&Be(m)}),[Ue,m]),i((function(){if($e){var e=setTimeout((function(){return Le("")}),1e3);return function(){return clearTimeout(e)}}}),[$e]);var Xe=function(e){Le(e)},Ye=function(){if(!z&&!C){var e=0;void 0!==x&&x>0&&(e=x);var r=(void 0!==He?He:e)+y;void 0!==h&&r>h?Xe("Valor máximo alcanzado: ".concat(h)):_e(r,"up")}},Ze=function(){if(!z&&!C){var e=0;void 0!==h&&h<0&&(e=h);var r=(void 0!==He?He:e)-y;void 0!==x&&r<x?Xe("Valor mínimo alcanzado: ".concat(x)):_e(r,"down")}},_e=function(e,r){var a=rr(e);Ue||Be(a),null==ve||ve(a),Xe("Valor cambiado a ".concat(a)),qe(r),er()},er=function(){Ae(!0),setTimeout((function(){return Ae(!1)}),300)},rr=function(e){var r=e;return void 0!==x&&e<x?r=x:void 0!==h&&e>h&&(r=h),r},ar=function(e){if(void 0===e)return"";switch(be){case"percentage":return"".concat(e).concat("prefix"===me.position?"%":""," ").concat("suffix"===me.position?"%":"").trim();case"currency":var r=me.symbol||"€";return"".concat("prefix"===me.position?r:""," ").concat(e.toFixed(2)," ").concat("suffix"===me.position?r:"").trim();case"signed":return e>0?"+".concat(e):e.toString();default:return e.toString()}},tr={sm:{input:"h-8 text-xs",button:"w-6 h-6",icon:12,paddingControls:"pr-10",paddingBoth:"px-10",paddingSides:"px-7",label:"text-xs"},md:{input:"h-10 text-sm",button:"w-8 h-8",icon:14,paddingControls:"pr-16",paddingBoth:"px-16",paddingSides:"px-10",label:"text-sm"},lg:{input:"h-12 text-base min-h-[48px]",button:"w-10 h-10 min-h-[40px]",icon:16,paddingControls:"pr-20",paddingBoth:"px-20",paddingSides:"px-12",label:"text-base"}};tr.sm.input+=" min-h-[32px]",tr.sm.button+=" min-h-[20px]",tr.md.input+=" min-h-[40px]",tr.md.button+=" min-h-[32px]";var or={default:{input:"bg-white dark:bg-zinc-900 border-zinc-300 dark:border-zinc-700 focus:border-zinc-500 dark:focus:border-zinc-400 text-neutral-900 dark:text-neutral-100",button:"bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-neutral-700 dark:text-neutral-300 border-zinc-300 dark:border-zinc-700",active:"bg-zinc-200 dark:bg-zinc-700",text:"text-neutral-700 dark:text-neutral-300",focus:"ring-zinc-500/30 dark:ring-zinc-400/30 border-zinc-500 dark:border-zinc-400"},primary:{input:"bg-white dark:bg-zinc-900 border-blue-300 dark:border-blue-700 focus:border-blue-500 dark:focus:border-blue-400 text-neutral-900 dark:text-neutral-100",button:"bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-800/50 text-blue-600 dark:text-blue-300 border-blue-300 dark:border-blue-700",active:"bg-blue-100 dark:bg-blue-800/50",text:"text-blue-700 dark:text-blue-300",focus:"ring-blue-500/30 dark:ring-blue-400/30 border-blue-500 dark:border-blue-400"},secondary:{input:"bg-white dark:bg-zinc-900 border-purple-300 dark:border-purple-700 focus:border-purple-500 dark:focus:border-purple-400 text-neutral-900 dark:text-neutral-100",button:"bg-purple-50 dark:bg-purple-900/30 hover:bg-purple-100 dark:hover:bg-purple-800/50 text-purple-600 dark:text-purple-300 border-purple-300 dark:border-purple-700",active:"bg-purple-100 dark:bg-purple-800/50",text:"text-purple-700 dark:text-purple-300",focus:"ring-purple-500/30 dark:ring-purple-400/30 border-purple-500 dark:border-purple-400"},success:{input:"bg-white dark:bg-zinc-900 border-green-300 dark:border-green-700 focus:border-green-500 dark:focus:border-green-400 text-neutral-900 dark:text-neutral-100",button:"bg-green-50 dark:bg-green-900/30 hover:bg-green-100 dark:hover:bg-green-800/50 text-green-600 dark:text-green-300 border-green-300 dark:border-green-700",active:"bg-green-100 dark:bg-green-800/50",text:"text-green-700 dark:text-green-300",focus:"ring-green-500/30 dark:ring-green-400/30 border-green-500 dark:border-green-400"},warning:{input:"bg-white dark:bg-zinc-900 border-amber-300 dark:border-amber-700 focus:border-amber-500 dark:focus:border-amber-400 text-neutral-900 dark:text-neutral-100",button:"bg-amber-50 dark:bg-amber-900/30 hover:bg-amber-100 dark:hover:bg-amber-800/50 text-amber-600 dark:text-amber-300 border-amber-300 dark:border-amber-700",active:"bg-amber-100 dark:bg-amber-800/50",text:"text-amber-700 dark:text-amber-300",focus:"ring-amber-500/30 dark:ring-amber-400/30 border-amber-500 dark:border-amber-400"},danger:{input:"bg-white dark:bg-zinc-900 border-red-300 dark:border-red-700 focus:border-red-500 dark:focus:border-red-400 text-neutral-900 dark:text-neutral-100",button:"bg-red-50 dark:bg-red-900/30 hover:bg-red-100 dark:hover:bg-red-800/50 text-red-600 dark:text-red-300 border-red-300 dark:border-red-700",active:"bg-red-100 dark:bg-red-800/50",text:"text-red-700 dark:text-red-300",focus:"ring-red-500/30 dark:ring-red-400/30 border-red-500 dark:border-red-400"}},nr="";if(ae)switch(ee){case"right":nr=tr[E].paddingControls;break;case"both":nr=tr[E].paddingBoth}var ir,dr=function(e){return r("chevron"===oe?"up"===e?u:c:"up"===e?s:b,{size:tr[E].icon,className:"stroke-[2.5px]","aria-hidden":"true"})};return e("div",{className:g(P?"w-full":"inline-block",T),children:[r("div",{id:Qe,className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:$e}),D&&e("label",{id:We,htmlFor:Me,className:g(Ne?"sr-only":"block mb-1 font-medium",tr[E].label,or[O].text,B?"text-red-600 dark:text-red-400":"",U),children:[D,ie&&e(a,{children:[r("span",{"aria-hidden":"true",className:"text-red-500 ml-0.5",children:"*"}),r("span",{className:"sr-only",children:"(requerido)"})]})]}),ke&&r("div",{id:Je,className:"text-sm text-neutral-500 dark:text-neutral-400 mb-1",children:ke}),e("div",{className:g("relative",X),children:[r(d.div,{animate:Pe?function(){var e={duration:.3,ease:[.34,1.56,.64,1]};switch(ce){case"pulse":return{scale:[1,1.05,1],transition:v(v({},e),{times:[0,.5,1]})};case"scale":return{scale:[1,"up"===Ve?1.1:.9,1],transition:v(v({},e),{times:[0,.5,1]})};case"bounce":return{y:"up"===Ve?[-3,0]:[3,0],transition:v(v({},e),{times:[0,1]})};default:return{x:"up"===Ve?[-5,0]:[5,0],opacity:[.7,1],transition:v(v({},e),{times:[0,1]})}}}():{},className:"relative",children:r("input",{ref:Re,id:Me,type:"text",inputMode:"numeric",value:void 0!==He?"default"!==be?ar(He):He.toString():"",onChange:function(e){if(!z&&!C){var r=e.target.value,a=!0;if("default"===be)a=!isNaN(Number(r))||"-"===r||""===r;else if("percentage"===be)a=/^-?\d*\.?\d*%?$/.test(r)||""===r;else if("currency"===be){var t=me.symbol||"€";a=new RegExp("^[".concat(t,"]?\\s?-?\\d*\\.?\\d*\\s?[").concat(t,"]?$")).test(r)||""===r}else"signed"===be&&(a=/^[+-]?\d*\.?\d*$/.test(r)||""===r);if(a){var o=function(e){if(""!==e){var r=e;switch(be){case"percentage":r=e.replace(/%/g,"");break;case"currency":var a=me.symbol||"€";r=e.replace(new RegExp("[".concat(a,"]"),"g"),"").trim()}var t=parseFloat(r);return isNaN(t)?void 0:t}}(r);Ue?null==ve||ve(void 0!==o?rr(o):0):(Be(o),void 0!==o&&(null==ve||ve(rr(o))))}}},onFocus:function(e){Fe(!0),ke&&Xe(ke),null==ge||ge(e)},onBlur:function(e){var r=Se;if(void 0!==r||ie){var a=rr(null!=r?r:0);Ue||Be(a),a===Se||Ue||(null==ve||ve(a),Xe("Valor corregido a ".concat(a)))}Fe(!1),null==fe||fe(e)},onKeyDown:function(e){if(!z&&!C)switch(e.key){case"ArrowUp":e.preventDefault(),Ye();break;case"ArrowDown":e.preventDefault(),Ze();break;case"Home":if(void 0!==x)e.preventDefault(),_e(x,"down");break;case"End":if(void 0!==h)e.preventDefault(),_e(h,"up");break;case"PageUp":e.preventDefault();var r=10*y,a=void 0!==He?He+r:r;_e(void 0===h||a<=h?a:h,"up");break;case"PageDown":e.preventDefault();var t=10*y,o=void 0!==He?He-t:-t;_e(void 0===x||o>=x?o:x,"down")}},disabled:z,readOnly:C,name:de,placeholder:S,required:ie,autoComplete:Ce,className:g("block border px-3 w-full",nr,tr[E].input,{none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"}[q],B?"border-red-500 dark:border-red-500 focus:border-red-500 dark:focus:border-red-500 ring-1 ring-red-500/20 dark:ring-red-500/20":or[O].input,"transition-all duration-200",z&&"opacity-60 cursor-not-allowed",C&&"opacity-80 cursor-default",Ee&&"ring ".concat(or[O].focus),"focus:outline-none focus-visible:ring focus-visible:ring-offset-0",L),role:"spinbutton","aria-valuemin":x,"aria-valuemax":h,"aria-valuenow":He,"aria-valuetext":void 0!==He?"default"!==be?ar(He):He.toString():void 0,"aria-invalid":!!B,"aria-required":ie,"aria-label":Ne?xe||D:void 0,"aria-labelledby":Ne?void 0:We,"aria-describedby":(ir=[],ke&&ir.push(Je),B&&ir.push(Ge),he&&ir.push(he),ir.length>0?ir.join(" "):void 0),"aria-disabled":z})}),function(){if(!ae)return null;var t=void 0!==h&&void 0!==He&&He>=h,o=void 0!==x&&void 0!==He&&He<=x,n=function(e){var a="compact"===Z?{sm:"w-5 h-3",md:"w-8 h-5",lg:"w-10 h-6"}[E]:tr[E].button;return r("button",{type:"button",onClick:"up"===e?Ye:Ze,disabled:z||C||"up"===e&&t||"down"===e&&o,className:g("flex items-center justify-center border",or[O].button,"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1","hover:scale-105 active:scale-95 transition-transform duration-200","active:".concat(or[O].active),"disabled:opacity-40 disabled:cursor-not-allowed disabled:scale-100",a,"plusminus"===oe?"rounded-full":"rounded-md","shadow-sm",J),"aria-label":"up"===e?"Aumentar valor".concat(t?" (valor máximo alcanzado)":""):"Disminuir valor".concat(o?" (valor mínimo alcanzado)":""),"aria-controls":Me,"aria-disabled":"up"===e?t:o,tabIndex:0,children:dr(e)})};return"compact"!==Z||"right"!==ee&&"both"!==ee?"right"===ee?e("div",{className:g("absolute right-0 inset-y-0 flex items-center gap-1 pr-1 my-1.5",W),role:"group","aria-label":"Controles de entrada numérica",children:[n("down"),n("up")]}):"both"===ee?e(a,{children:[r("div",{className:g("absolute left-0 inset-y-0 flex items-center pl-1 my-1.5",W),role:"group","aria-label":"Decrementar valor",children:n("down")}),r("div",{className:g("absolute right-0 inset-y-0 flex items-center pr-1 my-1.5",W),role:"group","aria-label":"Incrementar valor",children:n("up")})]}):null:e("div",{className:g("absolute right-0 top-0 bottom-0 flex flex-col justify-center","sm"===E?"gap-0.5 mr-0.5 py-0.5":"gap-0.5 mr-1 py-1",W),role:"group","aria-label":"Controles de entrada numérica",children:[n("up"),n("down")]})}()]}),B&&r(l,{children:r(d.div,{id:Ge,role:"alert",initial:{opacity:0,y:-5},animate:{opacity:1,y:0},exit:{opacity:0,y:-5},className:g("text-red-500 text-xs mt-1",K),children:B})})]})};export{f as default};
//# sourceMappingURL=index.esm.js.map