{"version":3,"file":"Timeline.mjs","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  RaikouColor,\n  RaikouRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport { TimelineItem, TimelineItemStylesNames } from './TimelineItem/TimelineItem';\nimport {\n  TimelineItemBodyStyle,\n  TimelineItemBulletStyle,\n  TimelineItemStyle,\n  TimelineItemTitleStyle,\n  TimelineRootStyle,\n} from './Timeline.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,\n    StylesApiProps<TimelineFactory>,\n    ElementProps<'div'> {\n  /** `Timeline.Item` components */\n  children?: React.ReactNode;\n\n  /** Index of active element */\n  active?: number;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors, `theme.primaryColor` by default */\n  color?: RaikouColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `'xl'` by default */\n  radius?: RaikouRadius;\n\n  /** Controls size of the bullet, `20` by default */\n  bulletSize?: number | string;\n\n  /** Controls how the content is positioned relative to the bullet, `'left'` by default */\n  align?: 'right' | 'left';\n\n  /** Control width of the line */\n  lineWidth?: number | string;\n\n  /** Determines whether the active items direction should be reversed without reversing items order, `false` by default */\n  reverseActive?: boolean;\n\n  /** Determines whether icon color should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */\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: Partial<TimelineProps> = {\n  active: -1,\n  align: 'left',\n  reverseActive: false,\n};\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, ref) => {\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    ...others\n  } = props;\n\n  const getStyles = useStyles<TimelineFactory>({\n    name: 'Timeline',\n    classes: {\n      root: TimelineRootStyle,\n      item: TimelineItemStyle,\n      itemTitle: TimelineItemTitleStyle,\n      itemBody: TimelineItemBodyStyle,\n      itemBullet: TimelineItemBulletStyle,\n    },\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\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]} ref={ref} {...others}>\n        {items}\n      </Box>\n    </TimelineProvider>\n  );\n});\n\nTimeline.displayName = '@raikou/core/Timeline';\nTimeline.Item = TimelineItem;\n"],"names":[],"mappings":"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"}