{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "description": "The nx-ui Timeline component.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/timeline.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Timeline — a vertical list of events joined by a connector line, each with a\n * node on the rail (an icon, avatar or dot) and content beside it. The building\n * block for activity feeds, audit logs and status histories.\n *\n * The connector is drawn automatically between items; the last item's connector\n * is suppressed via `[&:last-child]` so the line stops at the final node.\n *\n * @example\n * <Timeline>\n *   <TimelineItem>\n *     <TimelineNode><Check className=\"size-4\" /></TimelineNode>\n *     <TimelineContent>\n *       <TimelineTitle>Batch approved</TimelineTitle>\n *       <TimelineMeta>Ada Okonkwo · 2h ago</TimelineMeta>\n *     </TimelineContent>\n *   </TimelineItem>\n * </Timeline>\n */\n\nfunction Timeline({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\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(\n        \"relative flex gap-4 pb-6 last:pb-0\",\n        // Connector: runs from below the node down to the next item; hidden on the last.\n        \"before:absolute before:top-8 before:bottom-0 before:left-4 before:w-px before:-translate-x-1/2 before:bg-border-secondary last:before:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The rail node — an 8×8 circle holding an icon or dot. Give it a colour class\n * (e.g. from `featured-icon`) or pass a whole FeaturedIcon/Avatar as children. */\nfunction TimelineNode({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-node\"\n      className={cn(\n        \"relative z-[1] flex size-8 shrink-0 items-center justify-center rounded-full bg-bg-tertiary text-text-tertiary ring-4 ring-bg-primary [&_svg]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-content\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-1 pt-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-title\"\n      className={cn(\"text-sm font-semibold text-text-secondary\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineMeta({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-meta\"\n      className={cn(\"text-xs text-text-tertiary\", className)}\n      {...props}\n    />\n  )\n}\n\n/** An optional card attached under an event's title (e.g. a comment body). */\nfunction TimelineCard({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-card\"\n      className={cn(\n        \"mt-2 rounded-lg bg-bg-primary p-3 text-sm text-text-secondary ring-1 ring-border-secondary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Timeline,\n  TimelineItem,\n  TimelineNode,\n  TimelineContent,\n  TimelineTitle,\n  TimelineMeta,\n  TimelineCard,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}