'use client';
"use strict";var e=require("tslib"),t=require("react"),r=require("tailwind-merge"),a=require("../../../lib/constants.cjs"),l=require("../../../lib/shape.cjs"),s=require("../../../lib/sizing.cjs"),o=require("../../../lib/theme.cjs"),i=require("../../../lib/utils.cjs"),n=require("../../util-elements/Tooltip/Tooltip.cjs");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=c(t);const u=i.makeClassName("RangeBar"),m=g.default.forwardRef(((t,c)=>{const{percentageValue:m,minPercentageValue:d,maxPercentageValue:f,markerTooltip:b,rangeTooltip:p,showAnimation:C=!0,color:h=a.BaseColors.Blue,className:w}=t,j=e.__rest(t,["percentageValue","minPercentageValue","maxPercentageValue","markerTooltip","rangeTooltip","showAnimation","color","className"]),{tooltipProps:N,getReferenceProps:R}=n.useTooltip(),{tooltipProps:P,getReferenceProps:T}=n.useTooltip();return g.default.createElement("div",Object.assign({ref:c,className:r.twMerge(u("root"),"relative flex items-center w-full",i.getColorClassNames(o.DEFAULT_COLOR,o.colorPalette.lightBackground).bgColor,s.sizing.xs.height,l.borderRadius.lg.all,w)},j),g.default.createElement(n.default,Object.assign({text:p},P)),g.default.createElement("div",Object.assign({ref:P.refs.setReference,className:r.twMerge(u("rangeBar"),"absolute h-full",i.getColorClassNames(o.DEFAULT_COLOR,o.colorPalette.background).bgColor,l.borderRadius.lg.all),style:{left:`${d}%`,width:f-d+"%",transition:C?"all 2s":""}},T)),g.default.createElement(n.default,Object.assign({text:b},N)),g.default.createElement("div",Object.assign({ref:N.refs.setReference,className:r.twMerge(u("markerWrapper"),"absolute right-1/2 -translate-x-1/2",s.sizing.lg.width),style:{left:`${m}%`,transition:C?"all 2s":""}},R),g.default.createElement("div",{className:r.twMerge(u("marker"),"ring-2 mx-auto",i.getColorClassNames(h,o.colorPalette.background).bgColor,i.getColorClassNames("white").ringColor,s.sizing.md.height,s.sizing.twoXs.width,l.borderRadius.lg.all)})))}));m.displayName="RangeBar",module.exports=m;
