{"version":3,"file":"TimelineItem.cjs","sources":["../../../src/components/Timeline/TimelineItem.tsx"],"sourcesContent":["import dayjs from 'dayjs'\nimport { type ComponentProps, type PropsWithChildren, type ReactNode, useId, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Cluster, Sidebar, Stack } from '../Layout'\nimport { Section } from '../SectioningContent'\nimport { Text } from '../Text'\n\ntype AbstractProps = PropsWithChildren<{\n  datetime: Date | string\n  /** 日付の代わりに表示するテキスト */\n  dateLabel?: string\n  /** 時刻のフォーマット */\n  timeFormat?: 'HH:mm:ss' | 'HH:mm' | 'none'\n  /** 日付のサフィックス領域 */\n  dateSuffixArea?: ReactNode\n  /** サイドアクション領域 */\n  sideActionArea?: ReactNode\n  /** 現在のアイテムかどうか */\n  current?: boolean\n}>\ntype Props = AbstractProps &\n  Omit<ComponentProps<typeof Stack>, keyof AbstractProps | 'inline' | 'gap' | 'align' | 'as'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-TimelineItem',\n      // mark(1) + 余白(0.75) の分だけ padding\n      'shr-relative shr-pl-[calc(theme(fontSize.sm)+theme(spacing[0.75]))]',\n      'has-[+_&]:shr-pb-2',\n      // 繋ぎ線: 欠けたりはみ出たりしないように bottom で調整\n      'before:shr-absolute before:-shr-bottom-0.75 before:shr-left-[calc((theme(fontSize.sm)/2)-1px)] before:shr-h-full before:shr-w-[2px] before:shr-bg-border',\n      // 最後のアイテムには線を引かない\n      '[&:not(:last-child)]:before:shr-content-[\"\"]',\n      'forced-colors:before:shr-bg-[ButtonBorder]',\n    ],\n    dateArea: 'shr-grow',\n    title: [\n      // 日付と中央寄せにしやすくするために mark は title に生やす\n      'before:shr-absolute before:shr-left-0 before:shr-size-[theme(fontSize.sm)] before:shr-rounded-full before:shr-bg-border before:shr-content-[\"\"]',\n      'forced-colors:before:shr-bg-[ButtonBorder]',\n    ],\n  },\n  variants: {\n    current: {\n      true: {\n        title: [\n          'before:shr-left-[calc(theme(fontSize.sm)-theme(spacing[0.75]))] before:shr-z-1 before:shr-size-0.75 before:shr-bg-main before:shr-shadow-[0_0_0_2px_white,0_0_0_4px_theme(colors.main)]',\n          'forced-colors:before:shr-bg-[Mark]',\n        ],\n      },\n    },\n  },\n})\n\nexport const TimelineItem: React.FC<Props> = ({\n  datetime,\n  dateLabel,\n  timeFormat = 'HH:mm',\n  dateSuffixArea,\n  sideActionArea,\n  children,\n  current,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, dateArea, title } = classNameGenerator({\n      current: !!current,\n    })\n    return {\n      wrapper: wrapper({ className }),\n      dateArea: dateArea(),\n      title: title(),\n    }\n  }, [current, className])\n\n  const { date, time, isoString } = useMemo(() => {\n    const d = dayjs(datetime)\n    return {\n      date: d.format('YYYY/MM/DD'),\n      time: timeFormat !== 'none' && d.format(timeFormat),\n      isoString: d.toISOString(),\n    }\n  }, [datetime, timeFormat])\n\n  const id = useId()\n\n  return (\n    <Stack {...rest} as=\"li\" gap={0.5} aria-current={current} className={classNames.wrapper}>\n      <Cluster align=\"center\" justify=\"space-between\">\n        <Sidebar align=\"center\" gap={0.5} className={classNames.dateArea}>\n          <Cluster\n            align=\"center\"\n            as=\"time\"\n            dateTime={isoString}\n            id={id}\n            className={classNames.title}\n          >\n            <Text styleType=\"blockTitle\" leading=\"NONE\">\n              {dateLabel || date}\n            </Text>\n            {time && <Text leading=\"NONE\">{time}</Text>}\n          </Cluster>\n          {dateSuffixArea && <div>{dateSuffixArea}</div>}\n        </Sidebar>\n        {sideActionArea}\n      </Cluster>\n      {children && (\n        // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content\n        <Section aria-labelledby={id}>{children}</Section>\n      )}\n    </Stack>\n  )\n}\n"],"names":["tv","useMemo","dayjs","useId","_jsxs","Stack","Cluster","Sidebar","_jsx","Text","Section"],"mappings":"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"}