@visa/nova-react/progress-circular/index.mjs

Visa Product Design System Nova React library

import{jsxs as r,jsx as a}from"react/jsx-runtime";import e from"clsx";import{forwardRefTyped as s}from"../types/index.mjs";const l="v-progress",c={large:72,small:48},i=({className:s,children:i,indeterminate:t=!1,paused:o=!1,progressSize:m="large",style:n,value:u,...d},p)=>{const g="string"==typeof m?c[m]:m,y=2*Math.PI*(g/2-2);return r("div",{className:e(l,`${l}-circular`,"small"===m&&`${l}-circular-small`,t&&`${l}-indeterminate`,s),ref:p,role:t?void 0:"progressbar",style:{animationPlayState:o?"paused":"running","--v-progress-circular-size":`${g}px`,...n},...d,children:[r("svg",{className:`${l}-circular-track`,children:[a("circle",{className:`${l}-circular-background`,style:t?{strokeDasharray:""+(y-y/5)}:void 0}),a("circle",{className:`${l}-circular-bar`,style:{strokeDasharray:t?""+(y-y/5):`${y*(u||0)/100}, ${y}`,strokeDashoffset:t?null:"0"}})]}),i]})};var t=s(i);i.displayName="ProgressCircular";export{t as default};