@infinityfx/fluid/dist/components/feedback/circular-progress.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{combineClasses as t,classes as s,combineRefs as a}from"../../core/utils.js";import{useRef as o,useLayoutEffect as i}from"react";import{createStyles as n}from"../../core/style.js";const l=n("circular-progress",{".wrapper":{position:"relative",minWidth:"min(100vw, 3.6em)",display:"flex",alignItems:"center",justifyContent:"center"},".track, .progress":{fill:"none",strokeDasharray:1,strokeWidth:"calc(.45em * var(--scale, 1))",strokeLinecap:"round",transformOrigin:"center",transition:"background-color .3s, stroke-dashoffset .3s, rotate .3s"},".track":{stroke:"var(--f-clr-fg-100)"},".progress":{stroke:"var(--color, var(--f-clr-primary-100))"},".label":{position:"absolute",fontSize:"0.7em",fontWeight:600},".s__xsm":{fontSize:"var(--f-font-size-xsm)"},".s__sml":{fontSize:"var(--f-font-size-sml)"},".s__med":{fontSize:"var(--f-font-size-med)"},".s__lrg":{fontSize:"var(--f-font-size-lrg)"}});function c({children:n,cc:c={},size:f="med",slice:m=0,value:p=0,color:d,gap:h=0,fixedStrokeWidth:u=!0,...v}){const g=t(l,c),k=o(null);return i((()=>{if(!u)return;const e=new ResizeObserver((function(){if(!k.current)return;const{width:e,fontSize:r}=getComputedStyle(k.current);k.current.style.setProperty("--scale",3.6*parseFloat(r)/parseFloat(e)+"")}));return k.current&&e.observe(k.current),()=>e.disconnect()}),[]),e("div",{...v,ref:a(v.ref,k),"aria-label":void 0,className:s(g.wrapper,g[`s__${f}`],v.className),children:[r("div",{className:g.label,children:n}),e("svg",{overflow:"visible",viewBox:"0 0 100 100",role:"progressbar","aria-valuenow":100*p,"aria-label":v["aria-label"],style:{rotate:90+180*m+"deg","--color":d},children:[r("circle",{r:45,cx:50,cy:50,pathLength:1,className:g.track,style:{strokeDashoffset:p?Math.min(p*(1-m)+Math.max(m,h/2)+h/2,1):m,rotate:(p?360*Math.min(p*(1-m)+h/2,1-m):0)+"deg"}}),r("circle",{r:45,cx:50,cy:50,pathLength:1,className:g.progress,style:{strokeDashoffset:p<1?Math.min(1-p*(1-m)+Math.max(h/2-m,0)+h/2,1):m,rotate:(p<1?360*Math.max(h/2-m,0):0)+"deg"}})]})]})}export{c as default};
//# sourceMappingURL=circular-progress.js.map