UNPKG

stofli-ui

Version:

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

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