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