{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "title": "Timeline",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A composable sequence of milestones with current and complete states, dates, and connectors.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/timeline.tsx",
      "content": "// Ballmac UI: Timeline. https://ui.ballmac.com/components/timeline\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype TimelineProps = React.ComponentProps<\"ol\"> & {\n  /** Use a dense layout for log-like content. */\n  compact?: boolean\n}\ntype TimelineItemProps = React.ComponentProps<\"li\"> & {\n  /** Whether this item is the current step. */\n  current?: boolean\n  /** Whether this item has completed. */\n  complete?: boolean\n}\nfunction Timeline({ className, compact = false, ...props }: TimelineProps) {\n  return (\n    <ol\n      data-slot=\"timeline\"\n      data-compact={compact}\n      className={cn(\"group/timeline flex min-w-0 flex-col\", className)}\n      {...props}\n    />\n  )\n}\nfunction TimelineItem({\n  className,\n  current = false,\n  complete = false,\n  ...props\n}: TimelineItemProps) {\n  return (\n    <li\n      data-slot=\"timeline-item\"\n      data-current={current || undefined}\n      data-complete={complete || undefined}\n      aria-current={current ? \"step\" : undefined}\n      className={cn(\n        \"group/timeline-item relative grid min-w-0 grid-cols-[1.5rem_minmax(0,1fr)] gap-x-3 pb-6 last:pb-0 group-data-[compact=true]/timeline:pb-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nfunction TimelineMarker({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"timeline-marker\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"border-border bg-card text-muted-foreground z-10 flex size-6 items-center justify-center rounded-full border text-xs font-semibold group-data-[complete]/timeline-item:border-primary group-data-[complete]/timeline-item:bg-primary group-data-[complete]/timeline-item:text-primary-foreground group-data-[current]/timeline-item:border-primary group-data-[current]/timeline-item:text-primary\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\nfunction TimelineContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"timeline-content\"\n      className={cn(\"min-w-0 pt-0.5\", className)}\n      {...props}\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 leading-5\", className)}\n      {...props}\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(\n        \"text-muted-foreground mt-1 text-sm leading-relaxed\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nfunction TimelineTime({ className, ...props }: React.ComponentProps<\"time\">) {\n  return (\n    <time\n      data-slot=\"timeline-time\"\n      className={cn(\n        \"text-muted-foreground mt-1 block text-xs tabular-nums\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nfunction TimelineConnector({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"timeline-connector\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"bg-border absolute bottom-0 start-[11px] top-6 w-px group-last/timeline-item:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\nexport {\n  Timeline,\n  TimelineItem,\n  TimelineMarker,\n  TimelineContent,\n  TimelineTitle,\n  TimelineDescription,\n  TimelineTime,\n  TimelineConnector,\n  type TimelineProps,\n  type TimelineItemProps,\n}\n",
      "type": "registry:ui",
      "target": "@components/ballmac/timeline.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "events",
      "steps",
      "history"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A composable sequence of milestones with current and complete states, dates, and connectors.",
      "whenToUse": [
        "Show milestones or a chronological process"
      ],
      "whenNotToUse": [
        "Use Activity Feed for a compact actor log"
      ],
      "composesWith": [
        "activity-feed"
      ],
      "a11y": [
        {
          "keys": "None",
          "action": "Static content is announced with semantic structure"
        }
      ],
      "customization": [
        "Content, layout, and token-based className styling"
      ]
    },
    "examples": [
      "timeline-demo",
      "timeline-states"
    ],
    "url": "https://ui.ballmac.com/components/timeline"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}