{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-badge",
  "title": "StatusBadge",
  "description": "A status with a running clock.",
  "registryDependencies": [
    "https://creance.pages.dev/r/badge.json",
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "status-badge/StatusBadge.css",
      "content": ".cr-status-badge__time {\n  font-variant-numeric: tabular-nums;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/status-badge/StatusBadge.css"
    },
    {
      "path": "status-badge/StatusBadge.tsx",
      "content": "'use client';\n\nimport { Badge, statusLabels, type Status } from '@/components/creance/badge/Badge';\nimport { formatDuration } from '@/lib/creance/formatDuration';\nimport { useNow } from '@/lib/creance/useNow';\nimport './StatusBadge.css';\n\nexport interface StatusBadgeProps {\n  status: Status;\n  /** Epoch ms. When set, the badge shows elapsed time: \"Running · 12s\". */\n  startedAt?: number | undefined;\n  /** Epoch ms. Freezes the elapsed time. Without it, the time ticks while status is running or waiting. */\n  endedAt?: number | undefined;\n  /** Overrides the status word, e.g. \"Retrying\". */\n  label?: string;\n  className?: string;\n}\n\n/**\n * The ticking time is deliberately not a live region: announcing every second would drown out everything else.\n * Organisms announce status transitions instead.\n */\nexport function StatusBadge({ status, startedAt, endedAt, label, className }: StatusBadgeProps) {\n  const ticking = startedAt !== undefined && endedAt === undefined && (status === 'running' || status === 'waiting');\n  const now = useNow(1000, ticking);\n  // Until mounted, an open-ended time is unknown, so it is left out rather than shown wrong.\n  const end = endedAt ?? now;\n  const elapsed = startedAt === undefined || end === undefined ? undefined : end - startedAt;\n  return (\n    <Badge status={status} className={className}>\n      {label ?? statusLabels[status]}\n      {elapsed !== undefined && (\n        <span className=\"cr-status-badge__time\">\n          <span aria-hidden=\"true\"> · </span>\n          <span className=\"cr-visually-hidden\">, </span>\n          {formatDuration(elapsed)}\n        </span>\n      )}\n    </Badge>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/status-badge/StatusBadge.tsx"
    }
  ],
  "categories": [
    "molecule",
    "agent"
  ],
  "type": "registry:ui"
}