@mantine/core/cjs/components/Timeline/TimelineItem/TimelineItem.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n  | 'itemBody'\n  | 'itemContent'\n  | 'itemBullet'\n  | 'item'\n  | 'itemTitle'\n  | 'itemOpposite';\n\nexport interface TimelineItemProps\n  extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n  __active?: boolean;\n  __lineActive?: boolean;\n  __align?: 'right' | 'left';\n\n  /** Item title, displayed next to the bullet */\n  title?: React.ReactNode;\n\n  /** Content displayed below the title */\n  children?: React.ReactNode;\n\n  /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n  bullet?: React.ReactNode;\n\n  /** Content displayed on the opposite side of the timeline item */\n  opposite?: React.ReactNode;\n\n  /** If set, switches the position of content and opposite @default false */\n  alternate?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls line border style @default 'solid' */\n  lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n  props: TimelineItemProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineItemStylesNames;\n  compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n  const props = useProps('TimelineItem', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    __active,\n    __align,\n    __lineActive,\n    __vars,\n    bullet,\n    opposite,\n    alternate,\n    radius,\n    color,\n    lineVariant,\n    children,\n    title,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useTimelineContext();\n  const theme = useMantineTheme();\n\n  const stylesApiProps = { classNames, styles };\n  const bodyFirst = (__align === 'left' && !!alternate) || (__align === 'right' && !alternate);\n\n  const oppositeNode = opposite != null && (\n    <div {...ctx.getStyles('itemOpposite', stylesApiProps)}>{opposite}</div>\n  );\n\n  const bodyNode = (\n    <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n      {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n      <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n    </div>\n  );\n\n  return (\n    <Box\n      {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n      mod={[{ 'line-active': __lineActive, active: __active, alternate }, mod]}\n      __vars={{\n        '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--tli-color': color ? getThemeColor(color, theme) : undefined,\n        '--tli-border-style': lineVariant || undefined,\n      }}\n      {...others}\n    >\n      {bodyFirst ? bodyNode : oppositeNode}\n\n      <Box\n        {...ctx.getStyles('itemBullet', stylesApiProps)}\n        mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n      >\n        {bullet}\n      </Box>\n\n      {bodyFirst ? oppositeNode : bodyNode}\n    </Box>\n  );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;AA+DA,MAAa,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,UACA,WACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WApBSC,kBAAAA,SAAS,gBAAgB,MAAM,MAqBrC;CAER,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAC5C,MAAM,YAAa,YAAY,UAAU,CAAC,CAAC,aAAe,YAAY,WAAW,CAAC;CAElF,MAAM,eAAe,YAAY,QAC/B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI,IAAI,UAAU,gBAAgB,cAAc;YAAI;CAAc,CAAA;CAGzE,MAAM,WACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,GAAI,IAAI,UAAU,YAAY,cAAc;YAAjD,CACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,IAAI,UAAU,aAAa,cAAc;aAAI;EAAW,CAAA,GAC3E,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,IAAI,UAAU,eAAe,cAAc;GAAI;EAAc,CAAA,CACnE;;CAGP,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU;EAAU,GAAG,GAAG;EACvE,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAYC,iBAAAA,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;YARN;GAUG,YAAY,WAAW;GAExB,iBAAA,GAAA,kBAAA,IAAA,CAACF,YAAAA,KAAD;IACE,GAAI,IAAI,UAAU,cAAc,cAAc;IAC9C,KAAK;KAAE,cAAc,CAAC,CAAC;KAAQ,OAAO;KAAS,QAAQ;IAAS;cAE/D;GACE,CAAA;GAEJ,YAAY,eAAe;EACzB;;AAET,CAAC;AAED,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}