{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "type": "registry:ui",
  "description": "Composable timeline for activity feeds, order tracking, and version history",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/timeline.tsx",
      "content": "import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Timeline Context\ninterface TimelineContextValue {\n  orientation: 'vertical' | 'horizontal'\n}\n\nconst TimelineContext = React.createContext<TimelineContextValue>({\n  orientation: 'vertical',\n})\n\nfunction useTimeline() {\n  return React.useContext(TimelineContext)\n}\n\n// Timeline Root\nexport interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'vertical' | 'horizontal'\n}\n\nconst Timeline = React.forwardRef<HTMLDivElement, TimelineProps>(\n  ({ orientation = 'vertical', className, children, ...props }, ref) => {\n    return (\n      <TimelineContext.Provider value={{ orientation }}>\n        <div\n          ref={ref}\n          className={cn(\n            'relative',\n            orientation === 'vertical' ? 'flex flex-col' : 'flex flex-row',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TimelineContext.Provider>\n    )\n  }\n)\nTimeline.displayName = 'Timeline'\n\n// Timeline Item\nconst timelineItemVariants = cva('relative flex', {\n  variants: {\n    status: {\n      completed: '',\n      current: '',\n      upcoming: '',\n    },\n  },\n  defaultVariants: {\n    status: 'upcoming',\n  },\n})\n\nexport interface TimelineItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof timelineItemVariants> {}\n\nconst TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(\n  ({ status, className, children, ...props }, ref) => {\n    const { orientation } = useTimeline()\n\n    return (\n      <div\n        ref={ref}\n        data-status={status}\n        className={cn(\n          timelineItemVariants({ status }),\n          orientation === 'vertical' ? 'flex-row gap-4' : 'flex-col gap-4 items-center',\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\nTimelineItem.displayName = 'TimelineItem'\n\n// Timeline Dot\nconst timelineDotVariants = cva(\n  'relative z-10 flex items-center justify-center border-3 border-foreground transition-all duration-200',\n  {\n    variants: {\n      status: {\n        completed:\n          'bg-success shadow-[4px_4px_0px_hsl(var(--shadow-color))]',\n        current:\n          'bg-primary shadow-[4px_4px_0px_hsl(var(--shadow-color))] scale-110',\n        upcoming: 'bg-muted',\n      },\n      size: {\n        sm: 'h-6 w-6',\n        md: 'h-8 w-8',\n        lg: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      status: 'upcoming',\n      size: 'md',\n    },\n  }\n)\n\nexport interface TimelineDotProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof timelineDotVariants> {}\n\nconst TimelineDot = React.forwardRef<HTMLDivElement, TimelineDotProps>(\n  ({ status, size, className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(timelineDotVariants({ status, size }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\nTimelineDot.displayName = 'TimelineDot'\n\n// Timeline Connector\nconst timelineConnectorVariants = cva('transition-all duration-200', {\n  variants: {\n    status: {\n      completed: 'bg-foreground',\n      current: 'bg-foreground',\n      upcoming: 'border-dashed border-2 border-foreground/50 bg-transparent',\n    },\n    orientation: {\n      vertical: 'w-[3px] min-h-8 ml-[14px]',\n      horizontal: 'h-[3px] min-w-8 mt-[14px]',\n    },\n  },\n  defaultVariants: {\n    status: 'upcoming',\n    orientation: 'vertical',\n  },\n})\n\nexport interface TimelineConnectorProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<VariantProps<typeof timelineConnectorVariants>, 'orientation'> {}\n\nconst TimelineConnector = React.forwardRef<HTMLDivElement, TimelineConnectorProps>(\n  ({ status, className, ...props }, ref) => {\n    const { orientation } = useTimeline()\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          timelineConnectorVariants({ status, orientation }),\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTimelineConnector.displayName = 'TimelineConnector'\n\n// Timeline Content\nconst TimelineContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { orientation } = useTimeline()\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex-1',\n        orientation === 'vertical' ? 'pb-8' : 'pr-8',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTimelineContent.displayName = 'TimelineContent'\n\n// Timeline Header\nconst TimelineHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn('flex items-center gap-2', className)}\n      {...props}\n    />\n  )\n})\nTimelineHeader.displayName = 'TimelineHeader'\n\n// Timeline Title\nconst TimelineTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <h3\n      ref={ref}\n      className={cn(\n        'text-base font-bold uppercase tracking-wide',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTimelineTitle.displayName = 'TimelineTitle'\n\n// Timeline Description\nconst TimelineDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <p\n      ref={ref}\n      className={cn('text-sm text-muted-foreground mt-1', className)}\n      {...props}\n    />\n  )\n})\nTimelineDescription.displayName = 'TimelineDescription'\n\n// Timeline Time\nconst TimelineTime = React.forwardRef<\n  HTMLTimeElement,\n  React.TimeHTMLAttributes<HTMLTimeElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <time\n      ref={ref}\n      className={cn(\n        'text-xs font-medium text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTimelineTime.displayName = 'TimelineTime'\n\n// Timeline Card - convenience wrapper\nconst TimelineCard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'border-3 border-foreground bg-card p-4',\n        'shadow-[4px_4px_0px_hsl(var(--shadow-color))]',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTimelineCard.displayName = 'TimelineCard'\n\nexport {\n  Timeline,\n  TimelineItem,\n  TimelineDot,\n  TimelineConnector,\n  TimelineContent,\n  TimelineHeader,\n  TimelineTitle,\n  TimelineDescription,\n  TimelineTime,\n  TimelineCard,\n  timelineItemVariants,\n  timelineDotVariants,\n  timelineConnectorVariants,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/timeline.tsx"
    }
  ]
}