{"$schema":"https://ui.logic2b.com/schema/registry-item.json","name":"timeline","type":"registry:ui","description":"A vertical timeline for activity feeds, changelogs and process histories. Composable: each TimelineItem holds a TimelineIndicator (dot + connector line, hidden on the last item) and a TimelineContent. Parts: Timeline (root ol), TimelineItem, TimelineIndicator, TimelineContent, TimelineTime, TimelineTitle, TimelineDescription.","registryDependencies":["utils"],"files":[{"path":"ui/timeline.tsx","type":"registry:ui","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A vertical timeline for activity feeds, changelogs and process histories.\n * Composable: each `TimelineItem` holds a `TimelineIndicator` (the dot + the\n * connector line to the next item) and a `TimelineContent`. The connector is\n * hidden on the last item automatically.\n */\nfunction Timeline({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"timeline\"\n      className={cn(\"flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"timeline-item\"\n      className={cn(\"relative flex gap-4 pb-8 last:pb-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineIndicator({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-indicator\"\n      className={cn(\"relative flex flex-col items-center\", className)}\n      {...props}\n    >\n      {children ?? (\n        <span className=\"border-primary bg-background z-10 mt-1 size-3 shrink-0 rounded-full border-2\" />\n      )}\n      {/* Connector: fills the gap down to the next item; hidden on the last. */}\n      <span className=\"bg-border mt-1 w-px flex-1 [li:last-child_&]:hidden\" />\n    </div>\n  )\n}\n\nfunction TimelineContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-content\"\n      className={cn(\"flex-1 pt-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineTime({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"timeline-time\"\n      className={cn(\n        \"text-muted-foreground text-xs font-medium tabular-nums\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineTitle({ className, ...props }: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"timeline-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"timeline-description\"\n      className={cn(\"text-muted-foreground mt-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Timeline,\n  TimelineItem,\n  TimelineIndicator,\n  TimelineContent,\n  TimelineTime,\n  TimelineTitle,\n  TimelineDescription,\n}\n"}],"categories":["data-display"],"accessibility":{"support":"consumer","pattern":"chronological list","primitive":"HTML div","keyboard":[],"aria":["Does not impose list semantics, allowing each entry to retain its native content structure."],"consumer":["Compose the root and entries as an ordered list when order is meaningful, and expose dates as machine-readable time elements."]},"api":{"source":"src/ui/timeline.tsx","exports":[{"name":"Timeline","kind":"component","description":"A vertical timeline for activity feeds, changelogs and process histories. Composable: each `TimelineItem` holds a `TimelineIndicator` (the dot + the connector line to the next item) and a `TimelineContent`. The connector is hidden on the last item automatically.","propsType":"React.ComponentProps<\"ol\">"},{"name":"TimelineItem","kind":"component","propsType":"React.ComponentProps<\"li\">"},{"name":"TimelineIndicator","kind":"component","propsType":"React.ComponentProps<\"div\">"},{"name":"TimelineContent","kind":"component","propsType":"React.ComponentProps<\"div\">"},{"name":"TimelineTime","kind":"component","propsType":"React.ComponentProps<\"span\">"},{"name":"TimelineTitle","kind":"component","propsType":"React.ComponentProps<\"h3\">"},{"name":"TimelineDescription","kind":"component","propsType":"React.ComponentProps<\"p\">"}]}}