timeline

1"use client"
2 
3import { createContext, useCallback, useContext, useState } from "react"
4import { mergeProps } from "@base-ui/react/merge-props"
5import { useRender } from "@base-ui/react/use-render"
6import { cva, type VariantProps } from "class-variance-authority"
7 
8import { cn } from "@/lib/utils"
9 
10const timelineVariants = cva(
11  "group/timeline flex [--timeline-rail:1rem] data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
12  {
13    variants: {
14      size: {
15        sm: "[--timeline-icon:0.5rem] [--timeline-indicator:0.75rem]",
16        default: "[--timeline-icon:0.625rem] [--timeline-indicator:1rem]",
17        lg: "[--timeline-icon:0.875rem] [--timeline-indicator:1.5rem]",
18      },
19    },
20    defaultVariants: {
21      size: "default",
22    },
23  }
24)
25 
26type TimelineContextValue = {
27  activeStep: number
28  setActiveStep: (step: number) => void
29}
30 
31const TimelineContext = createContext<TimelineContextValue | undefined>(
32  undefined
33)
34 
35const useTimeline = () => {
36  const context = useContext(TimelineContext)
37  if (!context) {
38    throw new Error("useTimeline must be used within a Timeline")
39  }
40  return context
41}
42 
43interface TimelineProps
44  extends
45    useRender.ComponentProps<"div">,
46    VariantProps<typeof timelineVariants> {
47  defaultValue?: number
48  value?: number
49  onValueChange?: (value: number) => void
50  orientation?: "horizontal" | "vertical"
51}
52 
53function Timeline({
54  defaultValue = 1,
55  value,
56  onValueChange,
57  orientation = "vertical",
58  size = "default",
59  className,
60  render,
61  children,
62  ...props
63}: TimelineProps) {
64  const [activeStep, setInternalStep] = useState(defaultValue)
65 
66  const setActiveStep = useCallback(
67    (step: number) => {
68      if (value === undefined) {
69        setInternalStep(step)
70      }
71      onValueChange?.(step)
72    },
73    [value, onValueChange]
74  )
75 
76  const currentStep = value ?? activeStep
77 
78  const defaultProps = {
79    className: cn(timelineVariants({ size }), className),
80    "data-orientation": orientation,
81    "data-size": size,
82    "data-slot": "timeline",
83    children,
84  }
85 
86  return (
87    <TimelineContext.Provider
88      value={{ activeStep: currentStep, setActiveStep }}
89    >
90      {useRender({
91        defaultTagName: "div",
92        render,
93        props: mergeProps<"div">(defaultProps, props),
94      })}
95    </TimelineContext.Provider>
96  )
97}
98 
99function TimelineContent({
100  className,
101  render,
102  children,
103  ...props
104}: useRender.ComponentProps<"div">) {
105// … truncated