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

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

'use client';
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useState as r,useId as n,useEffect as i}from"react";import{motion as t}from"framer-motion";import{clsx as l}from"clsx";import{twMerge as o}from"tailwind-merge";var s=function(){return s=Object.assign||function(e){for(var a,r=1,n=arguments.length;r<n;r++)for(var i in a=arguments[r])Object.prototype.hasOwnProperty.call(a,i)&&(e[i]=a[i]);return e},s.apply(this,arguments)};function d(){for(var e=[],a=0;a<arguments.length;a++)e[a]=arguments[a];return o(l(e))}"function"==typeof SuppressedError&&SuppressedError;var u=function(l){var o=l.value,u=void 0===o?0:o,c=l.max,m=void 0===c?100:c,p=l.size,b=void 0===p?"md":p,g=l.variant,v=void 0===g?"default":g,f=l.showValue,h=void 0!==f&&f,x=l.animate,y=void 0===x||x,k=l.label,N=l.className,w=void 0===N?"":N,z=l.containerClassName,j=void 0===z?"":z,C=l.labelClassName,O=void 0===C?"":C,F=l.valueClassName,M=void 0===F?"":F,S=l.progressBarClassName,T=void 0===S?"":S,B=l.radius,E=void 0===B?"md":B,P=l.striped,I=void 0!==P&&P,V=l.indeterminate,q=void 0!==V&&V,A=l.description,D=l["aria-label"],G=l["aria-labelledby"],H=l["aria-describedby"],J=l.id,K=l.valueText,L=q?null:Math.min(100,Math.max(0,u/m*100)),Q=r(""),R=Q[0],U=Q[1],W=r(null),X=W[0],Y=W[1],Z=n(),$="progress-".concat(Z.replace(/:/g,"")),_=J||$,ee="".concat(_,"-label"),ae="".concat(_,"-description"),re="".concat(_,"-value");i((function(){null!==X&&null!==L&&Math.abs(L-X)>=10&&U(K||"Progreso: ".concat(L.toFixed(0)," por ciento")),Y(null===L?null:L)}),[L,X,K]),i((function(){if(R){var e=setTimeout((function(){return U("")}),1e3);return function(){return clearTimeout(e)}}}),[R]);var ne,ie={sm:"text-xs",md:"text-sm",lg:"text-base"},te={default:"bg-zinc-600 dark:bg-zinc-400",primary:"bg-blue-500 dark:bg-blue-400",secondary:"bg-purple-500 dark:bg-purple-400",success:"bg-green-500 dark:bg-green-400",warning:"bg-amber-500 dark:bg-amber-400",danger:"bg-red-500 dark:bg-red-400"},le={none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"},oe=I?{backgroundImage:"linear-gradient(45deg, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.5) 75%, transparent 75%, transparent)",backgroundSize:"1rem 1rem",animation:"progress-stripes 1s linear infinite"}:{},se=q?{width:"50%",left:"-50%",animation:"indeterminate-progress 1.5s infinite cubic-bezier(0.65, 0.815, 0.735, 0.395)"}:{};return e("div",{id:_,className:d("w-full",j),"aria-label":D||k||"Barra de progreso","aria-labelledby":k?ee:G,"aria-describedby":(ne=[],A&&ne.push(ae),H&&ne.push(H),ne.length>0?ne.join(" "):void 0),children:[a("style",{children:"\n    @keyframes progress-stripes {\n      from {\n        background-position: 0 0;\n      }\n      to {\n        background-position: 1rem 0;\n      }\n    }\n    \n    @keyframes indeterminate-progress {\n      0% {\n        left: -50%;\n      }\n      100% {\n        left: 100%;\n      }\n    }\n  "}),a("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:R}),A&&a("div",{id:ae,className:"sr-only",children:A}),(k||h)&&e("div",{className:"flex justify-between items-center mb-1",children:[k&&a("span",{id:ee,className:d(ie[b],"font-medium dark:text-neutral-100 text-neutral-900",O),children:k}),h&&a("span",{id:re,className:d(ie[b],"dark:text-neutral-400 text-neutral-600",M),children:null!==L?"".concat(L.toFixed(0),"%"):""})]}),a("div",s({className:d("w-full bg-zinc-200 dark:bg-zinc-700 overflow-hidden relative",le[E],{sm:"h-1 min-h-[4px]",md:"h-2 min-h-[8px]",lg:"h-3 min-h-[12px]"}[b],w)},q?{role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-busy":!0,"aria-valuetext":K||"Cargando..."}:{role:"progressbar","aria-valuemin":0,"aria-valuemax":m,"aria-valuenow":u,"aria-valuetext":K||"".concat(null==L?void 0:L.toFixed(0)," por ciento")},{children:a(t.div,q?{className:d("h-full absolute",te[v],le[E],T),style:s(s({},oe),se)}:{className:d("h-full",te[v],le[E],T),initial:y?{width:0}:{width:"".concat(L,"%")},animate:{width:"".concat(L,"%")},transition:{duration:y?.5:0,ease:"easeOut"},style:oe})}))]})};export{u as default};
//# sourceMappingURL=index.esm.js.map