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