@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 i,classes as o}from"../../core/utils.js";import{Animatable as t}from"@infinityfx/lively";import{useLink as s}from"@infinityfx/lively/hooks";import{useEffect as a}from"react";import{createStyles as l}from"../../core/style.js";const n=l("circular-progress",{".wrapper":{position:"relative",width:"3.2em",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},".track":{stroke:"var(--f-clr-fg-100)",strokeWidth:"var(--width)",strokeLinecap:"round",strokeDasharray:1},".progress":{stroke:"var(--color, var(--f-clr-primary-100))",strokeWidth:"var(--width)",strokeLinecap:"round",transition:"background-color .3s"},".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:l,cc:c={},size:f="med",slice:m=0,value:d,defaultValue:p=0,color:v,...h}){const u=i(n,c),k=void 0!==d?d:p,g=s(k*(1-m));return a((()=>g.set(k*(1-m),{duration:.3})),[k,m]),e("div",{...h,"aria-label":void 0,className:o(u.wrapper,u[`s__${f}`],h.className),children:[r("div",{className:u.label,children:l}),e("svg",{overflow:"visible",viewBox:"0 0 100 100",role:"progressbar","aria-valuenow":100*k,"aria-label":h["aria-label"],style:{rotate:90+180*m+"deg",width:"100%","--color":v,"--width":"10px"},children:[r("circle",{r:45,cx:50,cy:50,fill:"none",className:u.track,pathLength:1,style:{strokeDashoffset:m}}),r(t,{animate:{strokeLength:g},initial:{strokeDashoffset:1-g()},children:r("circle",{r:45,cx:50,cy:50,fill:"none",className:u.progress})})]})]})}export{c as default};
//# sourceMappingURL=circular-progress.js.map