{"version":3,"file":"timeline.mjs","names":[],"sources":["../../../../package/common/timeline/timeline.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport InteractableDiv from '../interactableDiv';\nimport styles from './timeline.module.pcss';\nimport { TimelineAlignment, type TimelineProps, type TimelineItem } from './timeline.types';\nimport { renderIcon } from '../utils/renderIcon';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nexport default function Timeline({\n  items = [],\n  alignment = TimelineAlignment.Left,\n  className,\n  style,\n  classNames,\n  styles: slotStyles,\n  ...rest\n}: TimelineProps) {\n  // An icon dot is bigger than a plain one, and the marker is only as wide as the dot\n  // inside it — so mixing the two put every row's spine and content column at a different\n  // x. Widening the marker for the whole timeline fixes the alignment; doing it only when\n  // an icon is actually present leaves an icon-less timeline exactly where it was.\n  const hasIcons = items.some((item: TimelineItem) => !!item.icon);\n  useToneCheck(\n    'Timeline',\n    items.map((item) => item.color),\n  );\n\n  return (\n    <div\n      {...rest}\n      className={cx(\n        styles.timeline,\n        {\n          [styles.timelineRight]: alignment === TimelineAlignment.Right,\n          [styles.timelineAlternate]: alignment === TimelineAlignment.Alternate,\n          [styles.timelineWithIcons]: hasIcons,\n        },\n        classNames?.root,\n        className,\n      )}\n      style={{ ...slotStyles?.root, ...style }}\n    >\n      {items.map((item: TimelineItem, index: number) => {\n        const key = item.id ?? index;\n        const isLast = index === items.length - 1;\n        const isAlternateRight = alignment === TimelineAlignment.Alternate && index % 2 === 1;\n        const isClickable = !!item.onClick && !item.disabled;\n        const tone = item.color ? toneProps(item.color) : undefined;\n\n        const itemContent = (\n          <>\n            <div className={cx(styles.timelineMarker, classNames?.marker)} style={slotStyles?.marker}>\n              <div\n                className={cx(\n                  styles.timelineDot,\n                  { [styles.timelineDotWithIcon]: !!item.icon },\n                  tone && [tone.className, styles.timelineDotToned],\n                  classNames?.dot,\n                )}\n                style={{ ...tone?.style, ...slotStyles?.dot }}\n              >\n                {item.icon ? renderIcon(item.icon) : null}\n              </div>\n              {!isLast && (\n                <div className={cx(styles.timelineConnector, classNames?.connector)} style={slotStyles?.connector} />\n              )}\n            </div>\n            <div className={cx(styles.timelineContent, classNames?.content)} style={slotStyles?.content}>\n              <div className={styles.timelineHeader}>\n                <div className={cx(styles.timelineTitle, classNames?.title)} style={slotStyles?.title}>\n                  {item.title}\n                </div>\n                {item.timestamp != null && (\n                  <div className={cx(styles.timelineTimestamp, classNames?.timestamp)} style={slotStyles?.timestamp}>\n                    {item.timestamp}\n                  </div>\n                )}\n              </div>\n              {item.description != null && (\n                <div\n                  className={cx(styles.timelineDescription, classNames?.description)}\n                  style={slotStyles?.description}\n                >\n                  {item.description}\n                </div>\n              )}\n              {item.content}\n            </div>\n          </>\n        );\n\n        const itemClassName = cx(\n          styles.timelineItem,\n          { [styles.timelineItemRight]: isAlternateRight },\n          { [styles.timelineItemClickable]: isClickable },\n          { [styles.timelineItemDisabled]: item.disabled },\n          classNames?.item,\n        );\n\n        if (isClickable) {\n          return (\n            <InteractableDiv key={key} className={itemClassName} style={slotStyles?.item} onClick={item.onClick}>\n              {itemContent}\n            </InteractableDiv>\n          );\n        }\n\n        return (\n          <div key={key} className={itemClassName} style={slotStyles?.item} aria-disabled={item.disabled || undefined}>\n            {itemContent}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"qXAQA,SAAwB,EAAS,CAC/B,QAAQ,CAAC,EACT,YAAY,EAAkB,KAC9B,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACa,CAKhB,IAAM,EAAW,EAAM,KAAM,GAAuB,CAAC,CAAC,EAAK,IAAI,EAM/D,OALA,EACE,WACA,EAAM,IAAK,GAAS,EAAK,KAAK,CAChC,EAGE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,eAAgB,IAAc,EAAkB,OACvD,EAAO,mBAAoB,IAAc,EAAkB,WAC3D,EAAO,mBAAoB,CAC9B,EACA,GAAY,KACZ,CACF,EACA,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,EAEtC,SAAA,EAAM,KAAK,EAAoB,IAAkB,CAChD,IAAM,EAAM,EAAK,IAAM,EACjB,EAAS,IAAU,EAAM,OAAS,EAClC,EAAmB,IAAc,EAAkB,WAAa,EAAQ,GAAM,EAC9E,EAAc,CAAC,CAAC,EAAK,SAAW,CAAC,EAAK,SACtC,EAAO,EAAK,MAAQ,EAAU,EAAK,KAAK,EAAI,IAAA,GAE5C,EACJ,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,MAAM,EAAG,MAAO,GAAY,OAAlF,SAAA,CACE,EAAC,MAAD,CACE,UAAW,EACT,EAAO,YACP,EAAG,EAAO,qBAAsB,CAAC,CAAC,EAAK,IAAK,EAC5C,GAAQ,CAAC,EAAK,UAAW,EAAO,gBAAgB,EAChD,GAAY,GACd,EACA,MAAO,CAAE,GAAG,GAAM,MAAO,GAAG,GAAY,GAAI,EAE3C,SAAA,EAAK,KAAO,EAAW,EAAK,IAAI,EAAI,IAClC,CAAA,EACJ,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,SAAS,EAAG,MAAO,GAAY,SAAY,CAAA,CAEnG,CACL,CAAA,EAAA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,gBAAiB,GAAY,OAAO,EAAG,MAAO,GAAY,QAApF,SAAA,CACE,EAAC,MAAD,CAAK,UAAW,EAAO,eAAvB,SAAA,CACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,cAAe,GAAY,KAAK,EAAG,MAAO,GAAY,MAC7E,SAAA,EAAK,KACH,CAAA,EACJ,EAAK,WAAa,MACjB,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,SAAS,EAAG,MAAO,GAAY,UACrF,SAAA,EAAK,SACH,CAAA,CAEJ,IACJ,EAAK,aAAe,MACnB,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,GAAY,WAAW,EACjE,MAAO,GAAY,YAElB,SAAA,EAAK,WACH,CAAA,EAEN,EAAK,OACH,CACL,CAAA,CAAA,CAAA,CAAA,EAGE,EAAgB,EACpB,EAAO,aACP,EAAG,EAAO,mBAAoB,CAAiB,EAC/C,EAAG,EAAO,uBAAwB,CAAY,EAC9C,EAAG,EAAO,sBAAuB,EAAK,QAAS,EAC/C,GAAY,IACd,EAUA,OARI,EAEA,EAAC,EAAD,CAA2B,UAAW,EAAe,MAAO,GAAY,KAAM,QAAS,EAAK,QACzF,SAAA,CACc,EAFK,CAEL,EAKnB,EAAC,MAAD,CAAe,UAAW,EAAe,MAAO,GAAY,KAAM,gBAAe,EAAK,UAAY,IAAA,GAC/F,SAAA,CACE,EAFK,CAEL,CAET,CAAC,CACE,CAAA,CAET"}