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

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

"use client";
import{jsx as r}from"react/jsx-runtime";import{combineClasses as o,classes as e}from"../../core/utils.js";import{Animatable as i}from"@infinityfx/lively";import{useLink as s}from"@infinityfx/lively/hooks";import{useEffect as t}from"react";import{createStyles as a}from"../../core/style.js";const l=a("progress-bar",{".track":{height:".4em",minWidth:"min(100vw, 12em)",borderRadius:"999px",overflow:"hidden",backgroundColor:"var(--f-clr-fg-100)"},".progress":{height:"100%",backgroundColor:"var(--color, var(--f-clr-primary-100))",transformOrigin:"left",transition:"background-color .3s",borderRadius:"999px"},".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 n({cc:a={},size:n="med",value:f,defaultValue:m=0,color:c,...d}){const v=o(l,a),u=void 0!==f?f:m,p=s(u);return t((()=>p.set(u,{duration:.3})),[u]),r("div",{...d,role:"progressbar","aria-valuenow":100*u,className:e(v.track,v[`s__${n}`],d.className),children:r(i,{animate:{scale:p((r=>`${r} 1`))},initial:{scale:`${p()} 1`},deform:!1,children:r("div",{className:v.progress,style:{"--color":c}})})})}export{n as default};
//# sourceMappingURL=progress-bar.js.map