@while-and-for/tremor-react
Version:
The React library to build dashboards faster.
3 lines (2 loc) • 1.47 kB
JavaScript
'use client';
import{__rest as e}from"tslib";import t from"react";import{Sizes as r}from"../../../lib/constants.js";import{spacing as o}from"../../../lib/spacing.js";import{colorPalette as s}from"../../../lib/theme.js";import{mergeRefs as i,getColorClassNames as a,makeClassName as m}from"../../../lib/utils.js";import{tremorTwMerge as l}from"../../../lib/tremorTwMerge.js";import{badgeProportions as n,iconSizes as c}from"./styles.js";import d,{useTooltip as p}from"../../util-elements/Tooltip/Tooltip.js";const f=m("Badge"),g=t.forwardRef(((m,g)=>{const{color:b,icon:u,size:h=r.SM,tooltip:x,className:j,children:k}=m,w=e(m,["color","icon","size","tooltip","className","children"]),N=u||null,{tooltipProps:E,getReferenceProps:R}=p();return t.createElement("span",Object.assign({ref:i([g,E.refs.setReference]),className:l(f("root"),"w-max flex-shrink-0 inline-flex justify-center items-center cursor-default rounded-tremor-full",b?l(a(b,s.lightBackground).bgColor,a(b,s.darkText).textColor):l("bg-tremor-brand-muted text-tremor-brand-emphasis","dark:bg-dark-tremor-brand-muted dark:text-dark-tremor-brand-emphasis"),n[h].paddingX,n[h].paddingY,n[h].fontSize,j)},R,w),t.createElement(d,Object.assign({text:x},E)),N?t.createElement(N,{className:l(f("icon"),"shrink-0",o.twoXs.negativeMarginLeft,o.xs.marginRight,c[h].height,c[h].width)}):null,t.createElement("p",{className:l(f("text"),"text-sm whitespace-nowrap")},k))}));g.displayName="Badge";export{g as default};