{"version":3,"file":"index.mjs","names":[],"sources":["../../src/Tracker/index.tsx"],"sourcesContent":["'use client';\n\nimport { Flexbox, FlexboxProps, TooltipGroup, cx } from '@lobehub/ui';\nimport { ReactNode, forwardRef } from 'react';\n\nimport TrackerBlock, { TrackerBlockProps } from './TrackerBlock';\nimport { styles } from './styles';\n\ninterface DataItem extends TrackerBlockProps {\n  [key: string]: any;\n}\n\nexport interface TrackerProps extends FlexboxProps {\n  blockGap?: number | string;\n  blockHeight?: number | string;\n  blockWidth?: number | string;\n  customTooltip?: (payload: DataItem) => ReactNode;\n  data: DataItem[];\n  leftLabel?: ReactNode;\n  onValueChange?: (payload: DataItem) => void;\n  rightLabel?: ReactNode;\n}\n\nconst Tracker = forwardRef<HTMLDivElement, TrackerProps>((props, ref) => {\n  const {\n    data = [],\n    className,\n    height,\n    width = 'fit-content',\n    blockWidth = 12,\n    blockHeight = 40,\n    blockGap = 4,\n    customTooltip,\n    onValueChange,\n    leftLabel,\n    rightLabel,\n    style,\n    ...rest\n  } = props;\n\n  const content = (\n    <TooltipGroup>\n      {data.map((item, idx) => (\n        <TrackerBlock\n          color={item.color}\n          height={blockHeight}\n          key={item.key ?? idx}\n          onClick={() => onValueChange?.(item)}\n          style={{\n            cursor: onValueChange ? 'pointer' : 'default',\n          }}\n          tooltip={customTooltip ? customTooltip(item) : item.tooltip}\n          width={blockWidth}\n        />\n      ))}\n    </TooltipGroup>\n  );\n\n  if (leftLabel || rightLabel) {\n    return (\n      <Flexbox\n        className={className}\n        gap={8}\n        height={height}\n        ref={ref}\n        style={{ position: 'relative', ...style }}\n        width={width}\n        {...rest}\n      >\n        <Flexbox align={'center'} horizontal justify={'space-between'} width={'100%'}>\n          <div className={cx(styles.strongLabel, styles.emphasis)}>{leftLabel}</div>\n          <div className={cx(styles.label, styles.emphasis)} style={{ textAlign: 'right' }}>\n            {rightLabel}\n          </div>\n        </Flexbox>\n        <Flexbox align={'center'} gap={blockGap} height={blockHeight} horizontal width={'100%'}>\n          {content}\n        </Flexbox>\n      </Flexbox>\n    );\n  }\n\n  return (\n    <Flexbox\n      align={'center'}\n      className={className}\n      gap={blockGap}\n      height={height || blockHeight}\n      horizontal\n      ref={ref}\n      width={width}\n      {...rest}\n    >\n      {content}\n    </Flexbox>\n  );\n});\n\nTracker.displayName = 'Tracker';\n\nexport default Tracker;\n"],"mappings":";;;;;;;AAuBA,MAAM,UAAU,YAA0C,OAAO,QAAQ;CACvE,MAAM,EACJ,OAAO,CAAC,GACR,WACA,QACA,QAAQ,eACR,aAAa,IACb,cAAc,IACd,WAAW,GACX,eACA,eACA,WACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UACJ,oBAAC,cAAD,EAAA,UACG,KAAK,KAAK,MAAM,QACf,oBAAC,cAAD;EACE,OAAO,KAAK;EACZ,QAAQ;EAER,eAAe,gBAAgB,IAAI;EACnC,OAAO,EACL,QAAQ,gBAAgB,YAAY,UACtC;EACA,SAAS,gBAAgB,cAAc,IAAI,IAAI,KAAK;EACpD,OAAO;CACR,GAPM,KAAK,OAAO,GAOlB,CACF,EACW,CAAA;CAGhB,IAAI,aAAa,YACf,OACE,qBAAC,SAAD;EACa;EACX,KAAK;EACG;EACH;EACL,OAAO;GAAE,UAAU;GAAY,GAAG;EAAM;EACjC;EACP,GAAI;EAPN,UAAA,CASE,qBAAC,SAAD;GAAS,OAAO;GAAU,YAAA;GAAW,SAAS;GAAiB,OAAO;GAAtE,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,aAAa,OAAO,QAAQ;IAAI,UAAA;GAAe,CAAA,GACzE,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,OAAO,OAAO,QAAQ;IAAG,OAAO,EAAE,WAAW,QAAQ;IAC5E,UAAA;GACE,CAAA,CACE;EACT,CAAA,GAAA,oBAAC,SAAD;GAAS,OAAO;GAAU,KAAK;GAAU,QAAQ;GAAa,YAAA;GAAW,OAAO;GAC7E,UAAA;EACM,CAAA,CACF;;CAIb,OACE,oBAAC,SAAD;EACE,OAAO;EACI;EACX,KAAK;EACL,QAAQ,UAAU;EAClB,YAAA;EACK;EACE;EACP,GAAI;EAEH,UAAA;CACM,CAAA;AAEb,CAAC;AAED,QAAQ,cAAc"}