/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' // Timeline Context interface TimelineContextValue { orientation: 'vertical' | 'horizontal' } const TimelineContext = React.createContext({ orientation: 'vertical', }) function useTimeline() { return React.useContext(TimelineContext) } // Timeline Root export interface TimelineProps extends React.HTMLAttributes { orientation?: 'vertical' | 'horizontal' } const Timeline = React.forwardRef( ({ orientation = 'vertical', className, children, ...props }, ref) => { return (

{children}

) } ) Timeline.displayName = 'Timeline' // Timeline Item const timelineItemVariants = cva('relative flex') export interface TimelineItemProps extends React.HTMLAttributes { status?: 'completed' | 'current' | 'upcoming' } const TimelineItem = React.forwardRef( ({ status, className, children, ...props }, ref) => { const { orientation } = useTimeline() return (

{children}

) } ) TimelineItem.displayName = 'TimelineItem' // Timeline Dot const timelineDotVariants = cva( 'relative z-10 flex items-center justify-center border-3 border-foreground transition duration-200', { variants: { status: { completed: 'bg-success shadow-[4px_4px_0px_hsl(var(--shadow-color))]', current: 'bg-primary shadow-[4px_4px_0px_hsl(var(--shadow-color))] scale-110', upcoming: 'bg-muted', }, size: { sm: 'h-6 w-6', md: 'h-8 w-8', lg: 'h-10 w-10', }, }, defaultVariants: { status: 'upcoming', size: 'md', }, } ) export interface TimelineDotProps extends React.HTMLAttributes, VariantProps {} const TimelineDot = React.forwardRef( ({ status, size, className, children, ...props }, ref) => { return (

{children}

) } ) TimelineDot.displayName = 'TimelineDot' // Timeline Connector const timelineConnectorVariants = cva('transition duration-200', { variants: { status: { completed: 'bg-foreground', current: 'bg-foreground', upcoming: 'border-dashed border-2 border-foreground/50 bg-transparent', }, orientation: { vertical: 'w-[3px] min-h-8 ml-[14px]', horizontal: 'h-[3px] min-w-8 mt-[14px]', }, }, defaultVariants: { status: 'upcoming', orientation: 'vertical', }, }) export interface TimelineConnectorProps extends React.HTMLAttributes, Omit, 'orientation'> {} const TimelineConnector = React.forwardRef( ({ status, className, ...props }, ref) => { const { orientation } = useTimeline() return (

) } ) TimelineConnector.displayName = 'TimelineConnector' // Timeline Content const TimelineContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { orientation } = useTimeline() return (

) }) TimelineContent.displayName = 'TimelineContent' // Timeline Header const TimelineHeader = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { return (

) }) TimelineHeader.displayName = 'TimelineHeader' // Timeline Title const TimelineTitle = React.forwardRef< HTMLHeadingElement, React.HTMLAttributes >(({ className, ...props }, ref) => { return (

) }) TimelineTitle.displayName = 'TimelineTitle' // Timeline Description const TimelineDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes >(({ className, ...props }, ref) => { return (
) }) TimelineDescription.displayName = 'TimelineDescription' // Timeline Time const TimelineTime = React.forwardRef< HTMLTimeElement, React.TimeHTMLAttributes >(({ className, ...props }, ref) => { return ( ) }) TimelineTime.displayName = 'TimelineTime' // Timeline Card - convenience wrapper const TimelineCard = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { return (
) }) TimelineCard.displayName = 'TimelineCard' export { Timeline, TimelineItem, TimelineDot, TimelineConnector, TimelineContent, TimelineHeader, TimelineTitle, TimelineDescription, TimelineTime, TimelineCard, timelineItemVariants, timelineDotVariants, timelineConnectorVariants, }