stofli-ui
Version:
Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion
4 lines (3 loc) • 3.93 kB
JavaScript
'use client';
import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import{useId as t}from"react";import{motion as i}from"framer-motion";import{clsx as o}from"clsx";import{twMerge as s}from"tailwind-merge";function n(){for(var e=[],a=0;a<arguments.length;a++)e[a]=arguments[a];return s(o(e))}var l=function(o){var s=o.value,l=void 0===s?0:s,c=o.max,d=void 0===c?100:c,m=o.size,u=void 0===m?"md":m,k=o.variant,f=void 0===k?"default":k,v=o.showValue,p=void 0!==v&&v,b=o.thickness,x=void 0===b?3:b,h=o.label,g=o.labelPosition,y=void 0===g?"top":g,N=o.className,w=void 0===N?"":N,z=o.circleClassName,S=void 0===z?"":z,C=o.bgCircleClassName,D=void 0===C?"":C,W=o.valueClassName,j=void 0===W?"":W,M=o.labelClassName,F=void 0===M?"":M,I=o.animate,L=void 0===I||I,O=o.spin,P=void 0!==O&&O,B=o.formatOptions,V=void 0===B?{style:"percent",maximumFractionDigits:0}:B,q=o["aria-label"],A=o["aria-describedby"],E=o["aria-valuetext"],G=o.indeterminate,H=void 0!==G&&G,J=Math.min(100,Math.max(0,l/d*100)),K=t(),Q="circular-progress-".concat(K.replace(/:/g,"")),R="".concat(Q,"-label"),T="".concat(Q,"-value"),U={sm:{box:32,radius:12,fontSize:"text-[8px]",labelSize:"text-xs"},md:{box:48,radius:18,fontSize:"text-[10px]",labelSize:"text-sm"},lg:{box:64,radius:24,fontSize:"text-xs",labelSize:"text-sm"}}[u],X=U.box,Y=U.radius,Z=U.fontSize,$=U.labelSize,_=X/2,ee=2*Math.PI*Y,ae=ee-J/100*ee,re={default:"stroke-zinc-600/80 dark:stroke-zinc-400/80",primary:"stroke-blue-500/80 dark:stroke-blue-400/80",secondary:"stroke-purple-500/80 dark:stroke-purple-400/80",success:"stroke-green-500/80 dark:stroke-green-400/80",warning:"stroke-amber-500/80 dark:stroke-amber-400/80",danger:"stroke-red-500/80 dark:stroke-red-400/80"},te={default:"stroke-zinc-200/20 dark:stroke-zinc-700/20",primary:"stroke-blue-200/20 dark:stroke-blue-700/20",secondary:"stroke-purple-200/20 dark:stroke-purple-700/20",success:"stroke-green-200/20 dark:stroke-green-700/20",warning:"stroke-amber-200/20 dark:stroke-amber-700/20",danger:"stroke-red-200/20 dark:stroke-red-700/20"},ie=new Intl.NumberFormat(void 0,V).format(J/100),oe={animate:{rotate:360,transition:{duration:1.5,ease:"linear",repeat:1/0}}},se=h&&e("span",{id:R,className:n("absolute","top"===y?"-top-6":"-bottom-6","left-1/2 -translate-x-1/2",$,"font-medium dark:text-neutral-400 text-neutral-600 whitespace-nowrap","min-contrast-[4.5]",F),children:h});return a("div",{className:n("relative inline-flex items-center justify-center",{sm:"w-8 h-8",md:"w-12 h-12",lg:"w-16 h-16"}[u],w),role:"progressbar","aria-valuemin":0,"aria-valuemax":d,"aria-valuenow":H?void 0:l,"aria-valuetext":E||(H?"Cargando...":"".concat(ie," completado")),"aria-label":q||h,"aria-labelledby":h?R:void 0,"aria-describedby":n(p?T:null,A),id:Q,children:["top"===y&&se,e(i.svg,{className:"w-full h-full",viewBox:"0 0 ".concat(X," ").concat(X),style:{transform:"rotate(-90deg)"},animate:P||H?"animate":void 0,variants:oe,"aria-hidden":"true",children:a(r,P||H?{children:[e("circle",{className:n(te[f],"transition-colors",D),cx:_,cy:_,r:Y,fill:"none",strokeWidth:x}),e("circle",{className:n(re[f],"transition-colors",S),cx:_,cy:_,r:Y,fill:"none",strokeWidth:x,strokeLinecap:"round",strokeDasharray:"".concat(.25*ee," ").concat(.75*ee)})]}:{children:[e("circle",{className:n(te[f],"transition-colors",D),cx:_,cy:_,r:Y,fill:"none",strokeWidth:x}),e(i.circle,{className:n(re[f],"transition-colors",S),cx:_,cy:_,r:Y,fill:"none",strokeWidth:x,strokeLinecap:"round",initial:L?{strokeDashoffset:ee}:{strokeDashoffset:ae},animate:{strokeDashoffset:ae},transition:{duration:L?.8:0,ease:"easeOut"},style:{strokeDasharray:ee}})]})}),p&&e("div",{className:"absolute inset-0 flex items-center justify-center",id:T,"aria-hidden":"true",children:e("span",{className:n(Z,"font-medium dark:text-neutral-300 text-neutral-700","min-contrast-[4.5]",j),children:ie})}),"bottom"===y&&se]})};export{l as default};
//# sourceMappingURL=index.esm.js.map