'use client';
import{__rest as e}from"tslib";import t from"react";import{twMerge as l}from"tailwind-merge";import{DeltaTypes as s}from"../../../lib/constants.js";import{borderRadius as r}from"../../../lib/shape.js";import{sizing as a}from"../../../lib/sizing.js";import{colorPalette as i,DEFAULT_COLOR as o}from"../../../lib/theme.js";import{getColorClassNames as n,makeClassName as m,mapInputsToDeltaType as c}from"../../../lib/utils.js";import{colors as f}from"./styles.js";import p,{useTooltip as g}from"../../util-elements/Tooltip/Tooltip.js";const h=m("DeltaBar"),u=t.forwardRef(((m,u)=>{const{percentageValue:b,isIncreasePositive:d=!0,showAnimation:j=!0,className:v,tooltip:w}=m,N=e(m,["percentageValue","isIncreasePositive","showAnimation","className","tooltip"]),E=c(b>=0?s.Increase:s.Decrease,d);const{tooltipProps:x,getReferenceProps:y}=g();return t.createElement(t.Fragment,null,t.createElement(p,Object.assign({text:w},x)),t.createElement("div",Object.assign({ref:u,className:l(h("root"),"relative flex items-center w-full",n(o,i.lightBackground).bgColor,a.xs.height,r.lg.all,v)},N),t.createElement("div",{className:"flex justify-end h-full w-1/2"},b<0?t.createElement("div",Object.assign({ref:x.refs.setReference,className:l(h("negativeDeltaBar"),f[E].bgColor,r.full.left),style:{width:`${Math.abs(b)}%`,transition:j?"all 2s":""}},y)):null),t.createElement("div",{className:l(h("separator"),"ring-2 z-10",n(o,i.background).bgColor,n("white").ringColor,a.md.height,a.twoXs.width,r.lg.all)}),t.createElement("div",{className:l(h("positiveDeltaBarWrapper"),"flex justify-start h-full w-1/2")},b>=0?t.createElement("div",Object.assign({ref:x.refs.setReference,className:l(h("positiveDeltaBar"),f[E].bgColor,r.full.right),style:{width:`${Math.abs(b)}%`,transition:j?"all 2s":""}},y)):null)))}));u.displayName="DeltaBar";export{u as default};
