stofli-ui
Version:
Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion
4 lines (3 loc) • 4.21 kB
JavaScript
'use client';
"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("framer-motion"),n=require("clsx"),i=require("tailwind-merge"),t=function(){return t=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},t.apply(this,arguments)};function s(){for(var e=[],a=0;a<arguments.length;a++)e[a]=arguments[a];return i.twMerge(n.clsx(e))}"function"==typeof SuppressedError&&SuppressedError;module.exports=function(n){var i=n.value,l=void 0===i?0:i,o=n.max,d=void 0===o?100:o,u=n.size,c=void 0===u?"md":u,m=n.variant,b=void 0===m?"default":m,g=n.showValue,p=void 0!==g&&g,v=n.animate,f=void 0===v||v,x=n.label,h=n.className,y=void 0===h?"":h,j=n.containerClassName,k=void 0===j?"":j,w=n.labelClassName,N=void 0===w?"":w,z=n.valueClassName,q=void 0===z?"":z,C=n.progressBarClassName,S=void 0===C?"":C,E=n.radius,M=void 0===E?"md":E,O=n.striped,F=void 0!==O&&O,T=n.indeterminate,B=void 0!==T&&T,I=n.description,P=n["aria-label"],V=n["aria-labelledby"],A=n["aria-describedby"],D=n.id,G=n.valueText,H=B?null:Math.min(100,Math.max(0,l/d*100)),J=a.useState(""),K=J[0],L=J[1],Q=a.useState(null),R=Q[0],U=Q[1],W=a.useId(),X="progress-".concat(W.replace(/:/g,"")),Y=D||X,Z="".concat(Y,"-label"),$="".concat(Y,"-description"),_="".concat(Y,"-value");a.useEffect((function(){null!==R&&null!==H&&Math.abs(H-R)>=10&&L(G||"Progreso: ".concat(H.toFixed(0)," por ciento")),U(null===H?null:H)}),[H,R,G]),a.useEffect((function(){if(K){var e=setTimeout((function(){return L("")}),1e3);return function(){return clearTimeout(e)}}}),[K]);var ee,ae={sm:"text-xs",md:"text-sm",lg:"text-base"},re={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"},ne={none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"},ie=F?{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"}:{},te=B?{width:"50%",left:"-50%",animation:"indeterminate-progress 1.5s infinite cubic-bezier(0.65, 0.815, 0.735, 0.395)"}:{};return e.jsxs("div",{id:Y,className:s("w-full",k),"aria-label":P||x||"Barra de progreso","aria-labelledby":x?Z:V,"aria-describedby":(ee=[],I&&ee.push($),A&&ee.push(A),ee.length>0?ee.join(" "):void 0),children:[e.jsx("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 "}),e.jsx("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true",children:K}),I&&e.jsx("div",{id:$,className:"sr-only",children:I}),(x||p)&&e.jsxs("div",{className:"flex justify-between items-center mb-1",children:[x&&e.jsx("span",{id:Z,className:s(ae[c],"font-medium dark:text-neutral-100 text-neutral-900",N),children:x}),p&&e.jsx("span",{id:_,className:s(ae[c],"dark:text-neutral-400 text-neutral-600",q),children:null!==H?"".concat(H.toFixed(0),"%"):""})]}),e.jsx("div",t({className:s("w-full bg-zinc-200 dark:bg-zinc-700 overflow-hidden relative",ne[M],{sm:"h-1 min-h-[4px]",md:"h-2 min-h-[8px]",lg:"h-3 min-h-[12px]"}[c],y)},B?{role:"progressbar","aria-valuemin":0,"aria-valuemax":100,"aria-busy":!0,"aria-valuetext":G||"Cargando..."}:{role:"progressbar","aria-valuemin":0,"aria-valuemax":d,"aria-valuenow":l,"aria-valuetext":G||"".concat(null==H?void 0:H.toFixed(0)," por ciento")},{children:B?e.jsx(r.motion.div,{className:s("h-full absolute",re[b],ne[M],S),style:t(t({},ie),te)}):e.jsx(r.motion.div,{className:s("h-full",re[b],ne[M],S),initial:f?{width:0}:{width:"".concat(H,"%")},animate:{width:"".concat(H,"%")},transition:{duration:f?.5:0,ease:"easeOut"},style:ie})}))]})};
//# sourceMappingURL=index.js.map