{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-timeline",
  "type": "registry:component",
  "title": "Timeline",
  "description": "Events on a time axis, with what already happened and what is still coming.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json",
    "https://r.assistant-ui.com/elements-range.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/timeline.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/timeline.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { mono, paper } from \"./surfaces\";\nimport { take } from \"../utils/range\";\n\nexport type TimelineWhen = \"past\" | \"now\" | \"future\";\n\nexport interface TimelineEvent {\n  id: string;\n  when: TimelineWhen;\n  time: string;\n  title: string;\n  detail?: string;\n}\n\nexport function Timeline({\n  events,\n  visibleCount,\n  className,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\" | \"events\" | \"visibleCount\"> & {\n  events: readonly TimelineEvent[];\n  visibleCount: number;\n}) {\n  return (\n    <div\n      data-slot=\"timeline\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-sm flex-col rounded-2xl p-4\",\n        className,\n      )}\n\n      {...props}\n    >\n      {take(events, visibleCount).map((event, i, shown) => (\n        <div\n          key={event.id}\n          className=\"fade-in slide-in-from-left-1 animate-in fill-mode-both grid grid-cols-[3.5rem_1rem_minmax(0,1fr)] gap-x-2 duration-300\"\n        >\n          <span\n            className={cn(\n              mono,\n              \"pt-[3px] text-end tabular-nums\",\n              event.when === \"future\"\n                ? \"text-foreground/25\"\n                : \"text-foreground/40\",\n            )}\n          >\n            {event.time}\n          </span>\n\n          <span className=\"flex flex-col items-center\">\n            <span\n              className={cn(\n                \"mt-1 size-2 shrink-0 rounded-full\",\n                event.when === \"now\" &&\n                  \"bg-blue-500 ring-4 ring-blue-500/15 dark:bg-blue-400\",\n                event.when === \"past\" && \"bg-foreground/30\",\n                event.when === \"future\" &&\n                  \"border-foreground/20 border bg-transparent\",\n              )}\n            />\n            {i < shown.length - 1 && (\n              <span\n                className={cn(\n                  \"w-px flex-1\",\n                  event.when === \"future\"\n                    ? \"bg-foreground/[0.08]\"\n                    : \"bg-foreground/15\",\n                )}\n              />\n            )}\n          </span>\n\n          <div\n            className={cn(\n              \"flex flex-col gap-0.5\",\n              i < shown.length - 1 && \"pb-3\",\n            )}\n          >\n            <span\n              className={cn(\n                \"text-[13px] break-words\",\n                event.when === \"future\"\n                  ? \"text-foreground/40\"\n                  : \"text-foreground/90\",\n                event.when === \"now\" && \"font-medium\",\n              )}\n            >\n              {event.title}\n            </span>\n            {event.detail && (\n              <span className=\"text-foreground/45 text-xs leading-relaxed break-words\">\n                {event.detail}\n              </span>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}