@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
3 lines (2 loc) • 1.82 kB
JavaScript
'use client';
import{__rest as e}from"tslib";import r from"react";import{sizing as t}from"../../../lib/sizing.js";import{colorPalette as a}from"../../../lib/theme.js";import{getColorClassNames as o,makeClassName as l}from"../../../lib/utils.js";import{tremorTwMerge as s}from"../../../lib/tremorTwMerge.js";import i,{useTooltip as n}from"../../util-elements/Tooltip/Tooltip.js";const m=l("MarkerBar"),d=r.forwardRef(((l,d)=>{const{value:c,minValue:b,maxValue:g,markerTooltip:u,rangeTooltip:f,showAnimation:p=!0,color:k,className:h}=l,j=e(l,["value","minValue","maxValue","markerTooltip","rangeTooltip","showAnimation","color","className"]),{tooltipProps:v,getReferenceProps:w}=n(),{tooltipProps:x,getReferenceProps:E}=n();return r.createElement("div",Object.assign({ref:d,className:s(m("root"),"relative flex items-center w-full rounded-tremor-full","bg-tremor-background-subtle","dark:bg-dark-tremor-background-subtle",t.xs.height,h)},j),b&&g&&r.createElement(r.Fragment,null,r.createElement(i,Object.assign({text:f},x)),r.createElement("div",Object.assign({ref:x.refs.setReference,className:s(m("rangeBar"),"absolute h-full rounded-tremor-full","bg-tremor-content-subtle","dark:bg-dark-tremor-content-subtle"),style:{left:`${b}%`,width:g-b+"%",transition:p?"all 1s":""}},E))),r.createElement(i,Object.assign({text:u},v)),r.createElement("div",Object.assign({ref:v.refs.setReference,className:s(m("markerWrapper"),"absolute right-1/2 -translate-x-1/2",t.lg.width),style:{left:`${c}%`,transition:p?"all 1s":""}},w),r.createElement("div",{className:s(m("marker"),"ring-2 mx-auto rounded-tremor-full","ring-tremor-brand-inverted","dark:ring-dark-tremor-brand-inverted",k?o(k,a.background).bgColor:"dark:bg-dark-tremor-brand bg-tremor-brand",t.md.height,t.twoXs.width)})))}));d.displayName="MarkerBar";export{d as default};