{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline",
  "type": "registry:component",
  "title": "Vertical timeline",
  "description": "Three-axis state story: solid past, dotted future, donut current; terminal failure is never a green check.",
  "registryDependencies": [
    "@venlyfinance/venly-tokens"
  ],
  "files": [
    {
      "path": "registry/components/timeline.tsx",
      "type": "registry:component",
      "target": "~/components/venly/components/timeline.tsx",
      "content": "import type { CSSProperties, ReactElement, ReactNode } from \"react\";\n\n/**\n * Vertical timeline – status story for one money movement.\n *\n * Design contract encoded by this component:\n * - State is distinguished on three axes at once: node, rail below, label.\n * - Solid rail = past, dotted rail = future; the switch happens at the\n *   current node. Never inverted.\n * - Current node = accent donut + bold label. Future = hollow node, grey\n *   regular label.\n * - Terminal failure/cancellation: the node goes neutral grey or danger,\n *   NEVER a success-green check – a green check on a cancelled step makes\n *   the timeline read \"all good\" at a glance (the most dangerous timeline\n *   error observed in the reference corpus).\n */\nexport type TimelineStepState = \"completed\" | \"current\" | \"future\" | \"failed\" | \"cancelled\";\n\nexport interface TimelineStep {\n  key: string;\n  label: ReactNode;\n  /** Completion word, timestamp, or estimate. */\n  meta?: ReactNode;\n  state: TimelineStepState;\n}\n\nexport interface TimelineProps {\n  steps: TimelineStep[];\n  style?: CSSProperties;\n  className?: string;\n}\n\nconst NODE_SIZE = \"var(--timeline-node)\";\n\nfunction Node({ state }: { state: TimelineStepState }): ReactElement {\n  const base: CSSProperties = {\n    width: NODE_SIZE,\n    height: NODE_SIZE,\n    borderRadius: \"50%\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: \"calc(var(--timeline-node) * 0.625)\",\n    lineHeight: 1,\n    flex: \"none\",\n  };\n  switch (state) {\n    case \"completed\":\n      return (\n        <span aria-hidden=\"true\" style={{ ...base, background: \"var(--state-success-bg)\", color: \"var(--state-success-fg)\", border: \"var(--border-w-hairline) solid var(--state-success-fg)\" }}>\n          ✓\n        </span>\n      );\n    case \"current\":\n      return (\n        <span\n          aria-hidden=\"true\"\n          style={{\n            ...base,\n            border: \"var(--border-w-emphasis) solid var(--accent)\",\n            background: \"var(--surface-raised)\",\n          }}\n        >\n          <span style={{ width: \"calc(var(--timeline-node) * 0.375)\", height: \"calc(var(--timeline-node) * 0.375)\", borderRadius: \"50%\", background: \"var(--accent)\" }} />\n        </span>\n      );\n    case \"failed\":\n      return (\n        <span aria-hidden=\"true\" style={{ ...base, background: \"var(--state-danger-bg)\", color: \"var(--state-danger-fg)\", border: \"var(--border-w-hairline) solid var(--state-danger-fg)\" }}>\n          ✕\n        </span>\n      );\n    case \"cancelled\":\n      return (\n        <span aria-hidden=\"true\" style={{ ...base, background: \"var(--state-neutral-bg)\", color: \"var(--state-neutral-fg)\", border: \"var(--border-w-hairline) solid var(--border-strong)\" }}>\n          ↺\n        </span>\n      );\n    case \"future\":\n      return (\n        <span\n          aria-hidden=\"true\"\n          style={{ ...base, border: \"var(--border-w-strong) solid var(--border-strong)\", background: \"var(--surface-raised)\" }}\n        />\n      );\n  }\n}\n\nexport function Timeline({ steps, style, className }: TimelineProps): ReactElement {\n  return (\n    <ol\n      className={className}\n      style={{\n        listStyle: \"none\",\n        margin: 0,\n        padding: 0,\n        fontFamily: \"var(--font-family)\",\n        fontSize: \"var(--font-size-body)\",\n        ...style,\n      }}\n    >\n      {steps.map((step, i) => {\n        const isLast = i === steps.length - 1;\n        // The rail below a node is solid while we are in the past, dotted\n        // once the story crosses the current node into the future.\n        const railFuture =\n          step.state === \"future\" ||\n          step.state === \"current\" ||\n          step.state === \"failed\" ||\n          step.state === \"cancelled\";\n        const labelColor =\n          step.state === \"future\"\n            ? \"var(--text-tertiary)\"\n            : step.state === \"cancelled\"\n              ? \"var(--text-secondary)\"\n              : \"var(--text-primary)\";\n        return (\n          <li key={step.key} data-state={step.state} style={{ display: \"flex\", gap: \"var(--space-md)\" }}>\n            <span style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\" }}>\n              <Node state={step.state} />\n              {!isLast ? (\n                <span\n                  aria-hidden=\"true\"\n                  style={{\n                    flex: 1,\n                    minHeight: \"var(--space-lg)\",\n                    width: 0,\n                    margin: \"var(--space-2xs) 0\",\n                    borderLeft: railFuture\n                      ? \"var(--border-w-hairline) dotted var(--border-strong)\"\n                      : \"var(--border-w-emphasis) solid var(--state-success-fg)\",\n                    opacity: railFuture ? 1 : 0.5,\n                  }}\n                />\n              ) : null}\n            </span>\n            <span style={{ paddingBottom: isLast ? 0 : \"var(--space-xl)\", minWidth: 0 }}>\n              <span\n                style={{\n                  display: \"block\",\n                  fontWeight: step.state === \"current\" ? 600 : 400,\n                  color: labelColor,\n                }}\n              >\n                {step.label}\n              </span>\n              {step.meta !== undefined ? (\n                <span\n                  style={{\n                    display: \"block\",\n                    fontSize: \"var(--font-size-label)\",\n                    color: \"var(--text-tertiary)\",\n                  }}\n                >\n                  {step.meta}\n                </span>\n              ) : null}\n            </span>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"
    }
  ]
}