{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "payments",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Submitted → sent → settled, with real timestamps.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatTimestamp } from \"@/lib/ledger/fiscal-period\";\nimport { CheckIcon, ClockIcon, ExclamationTriangleIcon } from \"@/components/ledger/icons\";\n\nexport type TimelineStep = {\n  label: string;\n  at: Date | null;\n  state: \"done\" | \"pending\" | \"failed\";\n  /** On failure: what happened and what to do about it. */\n  reason?: string;\n  remedy?: string;\n};\n\nexport interface PaymentStatusTimelineProps extends React.ComponentPropsWithoutRef<\"ol\"> {\n  steps: TimelineStep[];\n  timeZone?: string;\n}\n\n/**\n * Submitted → Sent → In transit → Settled, each with a real timestamp and a\n * stated timezone. Pending is a state, not a load — a clock icon, never a\n * spinner.\n */\nexport const PaymentStatusTimeline = React.forwardRef<HTMLOListElement, PaymentStatusTimelineProps>(\n  ({ className, steps, timeZone = \"UTC\", ...props }, ref) => (\n    <ol className={cn(\"flex flex-col\", className)} ref={ref} {...props}>\n      {steps.map((step, i) => {\n        const last = i === steps.length - 1;\n        return (\n          <li className=\"flex gap-3\" key={step.label}>\n            <div className=\"flex flex-col items-center\">\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  \"grid size-6 shrink-0 place-items-center rounded-full border\",\n                  step.state === \"done\" && \"border-positive bg-positive-subtle text-positive\",\n                  step.state === \"pending\" && \"border-border-strong text-text-tertiary\",\n                  step.state === \"failed\" && \"border-negative bg-negative-subtle text-negative\",\n                )}\n              >\n                {step.state === \"done\" ? (\n                  <CheckIcon className=\"size-3\" />\n                ) : step.state === \"failed\" ? (\n                  <ExclamationTriangleIcon className=\"size-3\" />\n                ) : (\n                  <ClockIcon className=\"size-3\" />\n                )}\n              </span>\n              {!last ? (\n                <span\n                  aria-hidden=\"true\"\n                  className={cn(\"w-px flex-1\", step.state === \"done\" ? \"bg-positive\" : \"bg-border\")}\n                />\n              ) : null}\n            </div>\n            <div className={cn(\"pb-6\", last && \"pb-0\")}>\n              <p\n                className={cn(\n                  \"text-body font-medium\",\n                  step.state === \"pending\" && \"text-text-secondary\",\n                  step.state === \"failed\" && \"text-negative\",\n                )}\n              >\n                {step.label}\n              </p>\n              {step.at ? (\n                <p className=\"numeric text-caption text-text-tertiary\">\n                  {formatTimestamp(step.at, timeZone)}\n                </p>\n              ) : (\n                <p className=\"text-caption text-text-tertiary\">Not yet</p>\n              )}\n              {step.reason ? <p className=\"mt-1 text-caption text-text-secondary\">{step.reason}</p> : null}\n              {step.remedy ? (\n                <p className=\"mt-1 text-caption font-medium text-text-primary\">{step.remedy}</p>\n              ) : null}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  ),\n);\nPaymentStatusTimeline.displayName = \"PaymentStatusTimeline\";\n",
      "path": "components/ledger/payment-status-timeline.tsx",
      "target": "components/ledger/payment-status-timeline.tsx",
      "type": "registry:component"
    }
  ],
  "name": "payment-status-timeline",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/fiscal-period",
    "@lopifi/icons"
  ],
  "title": "PaymentStatusTimeline",
  "type": "registry:component"
}