Timeline Steps

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6/* -----------------------------------------------------------------------------
7 * Timeline (root container)
8 * -------------------------------------------------------------------------- */
9 
10const timelineStepsVariants = cva("flex", {
11  variants: {
12    orientation: {
13      vertical: "flex-col",
14      horizontal: "flex-row overflow-x-auto",
15    },
16    position: {
17      left: "",
18      right: "",
19      alternate: "",
20    },
21  },
22  defaultVariants: {
23    orientation: "vertical",
24    position: "left",
25  },
26})
27 
28interface TimelineStepsProps extends React.ComponentProps<"div">, VariantProps<typeof timelineStepsVariants> {}
29 
30function TimelineSteps({ className, orientation, position, ...props }: TimelineStepsProps) {
31  return (
32    <div
33      data-slot="timeline-steps"
34      data-orientation={orientation}
35      data-position={position}
36      className={cn(timelineStepsVariants({ orientation, position }), className)}
37      {...props}
38    />
39  )
40}
41 
42/* -----------------------------------------------------------------------------
43 * TimelineItem
44 * -------------------------------------------------------------------------- */
45 
46const timelineStepsItemVariants = cva("relative flex flex-col", {
47  variants: {
48    orientation: {
49      vertical: "pb-8 last:pb-0",
50      horizontal: "flex-1 items-center",
51    },
52    status: {
53      default: "",
54      completed: "",
55      current: "",
56      upcoming: "opacity-60",
57    },
58  },
59  defaultVariants: {
60    orientation: "vertical",
61    status: "default",
62  },
63})
64 
65interface TimelineStepsItemProps extends React.ComponentProps<"div">, VariantProps<typeof timelineStepsItemVariants> {}
66 
67function TimelineStepsItem({ className, orientation, status, ...props }: TimelineStepsItemProps) {
68  return (
69    <div
70      data-slot="timeline-steps-item"
71      data-status={status}
72      className={cn(timelineStepsItemVariants({ orientation, status }), className)}
73      {...props}
74    />
75  )
76}
77 
78/* -----------------------------------------------------------------------------
79 * TimelineConnector (the line connecting items)
80 * -------------------------------------------------------------------------- */
81 
82const timelineStepsConnectorVariants = cva("", {
83  variants: {
84    orientation: {
85      vertical:
86// … truncated