@while-and-for/tremor-react/dist/components/vis-elements/ProgressBar/ProgressBar.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import r from"react";import{sizing as t}from"../../../lib/sizing.js";import{spacing as a}from"../../../lib/spacing.js";import{colorPalette as o}from"../../../lib/theme.js";import{getColorClassNames as l,makeClassName as s}from"../../../lib/utils.js";import{tremorTwMerge as i}from"../../../lib/tremorTwMerge.js";import m,{useTooltip as n}from"../../util-elements/Tooltip/Tooltip.js";const c=s("ProgressBar"),p=r.forwardRef(((s,p)=>{const{value:f,label:d,color:b,tooltip:g,showAnimation:u=!0,className:h}=s,w=e(s,["value","label","color","tooltip","showAnimation","className"]),{tooltipProps:x,getReferenceProps:j}=n();return r.createElement(r.Fragment,null,r.createElement(m,Object.assign({text:g},x)),r.createElement("div",Object.assign({ref:p,className:i(c("root"),"flex items-center w-full",h)},w),r.createElement("div",Object.assign({ref:x.refs.setReference,className:i(c("progressBarWrapper"),"relative flex items-center w-full rounded-tremor-full",b?l(b,o.lightBackground).bgColor:"bg-tremor-brand-faint dark:bg-dark-tremor-brand-faint",t.xs.height)},j),r.createElement("div",{className:i(c("progressBar"),"flex-col h-full rounded-tremor-full",b?l(b,o.background).bgColor:"bg-tremor-brand dark:bg-dark-tremor-brand"),style:{width:`${f}%`,transition:u?"all 1s":""}})),d?r.createElement("div",{className:i(c("labelWrapper"),"w-16 truncate text-right","text-tremor-content-emphasis","dark:text-dark-tremor-content-emphasis",a.sm.marginLeft)},r.createElement("p",{className:i(c("label"),"shrink-0 whitespace-nowrap truncate text-tremor-default")},d)):null))}));p.displayName="ProgressBar";export{p as default};