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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Timeline.cjs","names":["createVarsResolver","rem","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","Children","TimelineProvider","Box","classes","TimelineItem"],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport { TimelineItem, TimelineItemStylesNames } from './TimelineItem/TimelineItem';\nimport classes from './Timeline.module.css';\n\nexport type TimelineStylesNames = 'root' | TimelineItemStylesNames;\nexport type TimelineCssVariables = {\n  root: '--tl-line-width' | '--tl-bullet-size' | '--tl-color' | '--tl-icon-color' | '--tl-radius';\n};\n\nexport interface TimelineProps\n  extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {\n  /** `Timeline.Item` components */\n  children?: React.ReactNode;\n\n  /** Index of the active element */\n  active?: number;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\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  /** Size of the bullet @default 20 */\n  bulletSize?: number | string;\n\n  /** Position of content relative to the bullet @default 'left' */\n  align?: 'right' | 'left';\n\n  /** Control width of the line */\n  lineWidth?: number | string;\n\n  /** If set, the active items direction is reversed without reversing items order @default false */\n  reverseActive?: boolean;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type TimelineFactory = Factory<{\n  props: TimelineProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineStylesNames;\n  vars: TimelineCssVariables;\n  staticComponents: {\n    Item: typeof TimelineItem;\n  };\n}>;\n\nconst defaultProps = {\n  active: -1,\n  align: 'left',\n} satisfies Partial<TimelineProps>;\n\nconst varsResolver = createVarsResolver<TimelineFactory>(\n  (theme, { bulletSize, lineWidth, radius, color, autoContrast }) => ({\n    root: {\n      '--tl-bullet-size': rem(bulletSize),\n      '--tl-line-width': rem(lineWidth),\n      '--tl-radius': radius === undefined ? undefined : getRadius(radius),\n      '--tl-color': color ? getThemeColor(color, theme) : undefined,\n      '--tl-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const Timeline = factory<TimelineFactory>((_props) => {\n  const props = useProps('Timeline', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    active,\n    color,\n    radius,\n    bulletSize,\n    align,\n    lineWidth,\n    reverseActive,\n    mod,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TimelineFactory>({\n    name: 'Timeline',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const items = _children.map((item: any, index) =>\n    cloneElement(item, {\n      unstyled,\n      __align: align,\n      __active:\n        item.props?.active ||\n        (reverseActive ? active >= _children.length - index - 1 : active >= index),\n      __lineActive:\n        item.props?.lineActive ||\n        (reverseActive ? active >= _children.length - index - 1 : active - 1 >= index),\n    })\n  );\n\n  return (\n    <TimelineProvider value={{ getStyles }}>\n      <Box {...getStyles('root')} mod={[{ align }, mod]} {...others}>\n        {items}\n      </Box>\n    </TimelineProvider>\n  );\n});\n\nTimeline.classes = classes;\nTimeline.varsResolver = varsResolver;\nTimeline.displayName = '@mantine/core/Timeline';\nTimeline.Item = TimelineItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAoEA,MAAM,eAAe;CACnB,QAAQ;CACR,OAAO;CACR;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoBC,YAAAA,IAAI,WAAW;CACnC,mBAAmBA,YAAAA,IAAI,UAAU;CACjC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACnE,cAAc,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;CACpD,mBAAmBC,gCAAAA,qBAAqB,cAAc,MAAM,GACxDC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;EAAc,CAAC,GAChD,KAAA;CACL,EACF,EACF;AAED,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,QACA,OACA,QACA,YACA,OACA,WACA,eACA,KACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAYC,MAAAA,SAAS,QAAQ,SAAS;CAC5C,MAAM,QAAQ,UAAU,KAAK,MAAW,WAAA,GAAA,MAAA,cACzB,MAAM;EACjB;EACA,SAAS;EACT,UACE,KAAK,OAAO,WACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,UAAU;EACtE,cACE,KAAK,OAAO,eACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,SAAS,KAAK;EAC3E,CAAC,CACH;AAED,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,WAAW;YACpC,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,OAAO;GAAE,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI;GAAE,GAAI;aACpD;GACG,CAAA;EACW,CAAA;EAErB;AAEF,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA"}