import * as React from 'react' import type { VariantProps } from 'class-variance-authority' import { cva } from 'class-variance-authority' import { Check, Circle, X } from 'lucide-react' import { cn } from '@/lib/utils' const timelineVariants = cva('grid', { variants: { positions: { left: '[&>li]:grid-cols-[0_min-content_1fr]', right: '[&>li]:grid-cols-[1fr_min-content]', center: '[&>li]:grid-cols-[1fr_min-content_1fr]', }, }, defaultVariants: { positions: 'left', }, }) interface TimelineProps extends React.HTMLAttributes, VariantProps {} const Timeline = React.forwardRef( ({ children, className, positions, ...props }, ref) => { return (

{children} ) }, ) Timeline.displayName = 'Timeline' const timelineItemVariants = cva('grid items-center gap-x-2', { variants: { status: { done: 'text-primary', default: 'text-muted-foreground', }, }, defaultVariants: { status: 'default', }, }) interface TimelineItemProps extends React.HTMLAttributes, VariantProps {} const TimelineItem = React.forwardRef( ({ className, status, ...props }, ref) => (

), ) TimelineItem.displayName = 'TimelineItem' const timelineDotVariants = cva( 'col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current', { variants: { status: { default: '[&>*]:hidden', current: '[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current', done: 'bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background', error: 'border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background', custom: '[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block', }, }, defaultVariants: { status: 'default', }, }, ) interface TimelineDotProps extends React.HTMLAttributes, VariantProps { customIcon?: React.ReactNode } const TimelineDot = React.forwardRef( ({ className, status, customIcon, ...props }, ref) => (

{customIcon}

), ) TimelineDot.displayName = 'TimelineDot' const timelineContentVariants = cva( 'row-start-2 row-end-2 pb-8 text-muted-foreground', { variants: { side: { right: 'col-start-3 col-end-4 mr-auto text-left', left: 'col-start-1 col-end-2 ml-auto text-right', }, }, defaultVariants: { side: 'right', }, }, ) interface TimelineContentProps extends React.HTMLAttributes, VariantProps {} const TimelineContent = React.forwardRef( ({ className, side, ...props }, ref) => (

), ) TimelineContent.displayName = 'TimelineContent' const timelineHeadingVariants = cva( 'row-start-1 row-end-1 line-clamp-1 max-w-full truncate', { variants: { side: { right: 'col-start-3 col-end-4 mr-auto text-left', left: 'col-start-1 col-end-2 ml-auto text-right', }, variant: { primary: 'text-base font-medium text-primary', secondary: 'text-sm font-light text-muted-foreground', }, }, defaultVariants: { side: 'right', variant: 'primary', }, }, ) interface TimelineHeadingProps extends React.HTMLAttributes, VariantProps {} const TimelineHeading = React.forwardRef< HTMLParagraphElement, TimelineHeadingProps >(({ className, side, variant, ...props }, ref) => (

)) TimelineHeading.displayName = 'TimelineHeading' interface TimelineLineProps extends React.HTMLAttributes { done?: boolean } const TimelineLine = React.forwardRef( ({ className, done = false, ...props }, ref) => { return (

) }, ) TimelineLine.displayName = 'TimelineLine' export { Timeline, TimelineDot, TimelineItem, TimelineContent, TimelineHeading, TimelineLine, }