{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "type": "registry:ui",
  "title": "Timeline",
  "description": "Tailwind vertical timeline with a hairline rail, a dot per event, titles, optional descriptions and right-aligned timestamps for activity feeds and changelogs.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/timeline.tsx",
      "type": "registry:ui",
      "target": "components/ui/timeline.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** A vertical list of dated events on a hairline, for activity feeds and audit logs. */\ntype TimelineItem = { title: React.ReactNode; description?: React.ReactNode; time?: React.ReactNode }\n\ntype TimelineProps = {\n  /** Events, newest first. Defaults to a day of Lumen workspace activity. */\n  items?: TimelineItem[]\n  className?: string\n}\n\nconst SAMPLE_ITEMS: TimelineItem[] = [\n  { title: \"Invoice INV-2041 paid\", description: \"$12,400 from Northwind Traders via bank transfer\", time: \"09:41\" },\n  { title: \"Deploy #412 is live\", description: \"lumen-web · production · by Theo Okafor\", time: \"08:15\" },\n  { title: \"Maya Chen joined Finance\", description: \"Invited by Priya Raman as an Admin\", time: \"Yesterday\" },\n  { title: \"Reminder sent for INV-2038\", description: \"Fabrikam · $3,180 · 3 days overdue\", time: \"Mar 10\" },\n  { title: \"Plan upgraded to Scale\", description: \"Billing changed by Sam Lowe\", time: \"Mar 8\" },\n]\n\nfunction Timeline({ items = SAMPLE_ITEMS, className }: TimelineProps) {\n  return (\n    <ol data-slot=\"timeline\" className={cn(\"relative w-full max-w-md space-y-4 border-l border-border pl-6\", className)}>\n      {items.map((item, i) => (\n        <li key={i} className=\"relative\">\n          <span className=\"absolute top-1.5 -left-[1.625rem] size-2.5 rounded-full border border-border bg-surface\" />\n          <div className=\"flex items-baseline justify-between gap-3\">\n            <p className=\"text-sm font-medium text-fg\">{item.title}</p>\n            {item.time ? <time className=\"text-xs tabular-nums text-fg-muted\">{item.time}</time> : null}\n          </div>\n          {item.description ? <p className=\"mt-1 text-xs text-fg-muted\">{item.description}</p> : null}\n        </li>\n      ))}\n    </ol>\n  )\n}\nexport { Timeline }\nexport type { TimelineProps, TimelineItem }\n"
    }
  ]
}