@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 n=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 l({cc:a={},size:l="med",value:f=0,color:m,...c}){const d=o(n,a),v=s(f);return t((()=>v.set(f,{duration:.3})),[f]),r("div",{...c,role:"progressbar","aria-valuenow":100*f,className:e(d.track,d[`s__${l}`],c.className),children:r(i,{animate:{scale:v((r=>`${r} 1`))},initial:{scale:`${v()} 1`},deform:!1,children:r("div",{className:d.progress,style:{"--color":m}})})})}export{l as default};
//# sourceMappingURL=progress-bar.js.map