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