{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "health-card",
  "title": "HealthCard",
  "description": "Project health rollup on the MetricCard shell: an overall status pill and tint over a mono grid of supporting signals (latency, errors, uptime).",
  "dependencies": [
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.neon.com/r/skeleton.json",
    "https://ui.neon.com/r/neon-loader.json",
    "https://ui.neon.com/r/neon-tokens.json"
  ],
  "files": [
    {
      "path": "src/components/health-card/health-card.tsx",
      "content": "\"use client\";\n\nimport { Alert02Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ComponentProps } from \"react\";\n\nimport { NeonLoader } from \"@/components/neon-loader/neon-loader\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\n\n/** Operational health of a surface, worst-first: down > degraded > maintenance > healthy. */\nexport type HealthStatus = \"healthy\" | \"degraded\" | \"maintenance\" | \"down\";\n\nexport interface HealthSignal {\n  /** Short mono caption, e.g. \"Latency p99\". */\n  label: string;\n  /** Preformatted figure, e.g. \"128 ms\" or \"99.98%\". */\n  value: string;\n  /** Optional tint for this signal's dot; omit for no color. */\n  status?: HealthStatus;\n}\n\n/* ─────────────────────────────────────────────────────────\n * HEALTH ROLLUP, on the MetricCard shell\n *\n *  The overall status is the light: a faint status-tinted\n *  grain wash rises from the bottom edge and a mono pill\n *  names it,\n *  both drawn from the house status vocabulary — active\n *  green, scaling amber, sleeping gray, destructive red.\n *  Beneath, the supporting signals (latency, errors, uptime)\n *  read as a quiet mono grid; a signal only takes color when\n *  it is the reason the rollup is not green. Text stays\n *  muted so a wall of cards reads calm. No motion.\n * ───────────────────────────────────────────────────────── */\nconst STATUS_DOT: Record<HealthStatus, string> = {\n  degraded: \"bg-[var(--status-scaling)]\",\n  down: \"bg-destructive\",\n  healthy: \"bg-[var(--status-active)]\",\n  maintenance: \"bg-[var(--status-sleeping)]\",\n};\n\n/** Wash tint: set as text color so neon-card-wash reads `currentColor`. */\nconst STATUS_TINT: Record<HealthStatus, string> = {\n  degraded: \"text-[var(--status-scaling)]\",\n  down: \"text-destructive\",\n  healthy: \"text-[var(--status-active)]\",\n  maintenance: \"text-[var(--status-sleeping)]\",\n};\n\nconst STATUS_LABEL: Record<HealthStatus, string> = {\n  degraded: \"degraded\",\n  down: \"down\",\n  healthy: \"healthy\",\n  maintenance: \"maintenance\",\n};\n\nconst HealthBadge = ({\n  status,\n  label,\n}: {\n  status: HealthStatus;\n  label?: string;\n}) => (\n  <span\n    className=\"inline-flex shrink-0 items-center gap-1.5 rounded-sm border border-border/60 bg-card px-2 py-0.5 font-mono text-muted-foreground text-xs\"\n    data-slot=\"health-card-badge\"\n    data-status={status}\n  >\n    <span\n      aria-hidden=\"true\"\n      className={cn(\"size-1.5 shrink-0\", STATUS_DOT[status])}\n    />\n    {label ?? STATUS_LABEL[status]}\n  </span>\n);\n\nexport type HealthCardProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  /** Rollup title, e.g. \"Production\" or a project name. */\n  label: string;\n  /** Overall status, driving the pill and the top wash. */\n  status: HealthStatus;\n  /** One-line human summary, e.g. \"All systems operational\". */\n  summary?: string;\n  /** Supporting figures (latency, error rate, uptime). */\n  signals?: HealthSignal[];\n  /** Last check, already formatted, e.g. \"checked 30s ago\". */\n  updatedAt?: string;\n  isLoading?: boolean;\n  error?: Error | string | null;\n};\n\nconst healthCardClassName =\n  \"relative isolate flex min-h-[168px] flex-col overflow-hidden rounded-lg border border-border/60 bg-card shadow-none ring-0 transition-colors hover:border-border\";\n\nconst labelClassName =\n  \"truncate font-mono font-medium text-muted-foreground text-xs\";\n\nexport const HealthCard = ({\n  label,\n  status,\n  summary,\n  signals,\n  updatedAt,\n  isLoading = false,\n  error = null,\n  className,\n  ...props\n}: HealthCardProps) => {\n  if (isLoading) {\n    return (\n      <div\n        aria-busy=\"true\"\n        aria-label={`Loading ${label}`}\n        className={cn(healthCardClassName, className)}\n        data-slot=\"health-card\"\n        {...props}\n      >\n        <div className=\"flex items-center justify-between gap-3 px-4 pt-4\">\n          <p className={labelClassName} title={label}>\n            {label}\n          </p>\n          <NeonLoader className=\"shrink-0\" label=\"Loading health\" size={16} />\n        </div>\n        <div className=\"mt-auto grid grid-cols-2 gap-x-4 gap-y-3 px-4 pt-4 pb-4\">\n          <Skeleton aria-hidden=\"true\" className=\"h-8 w-20\" />\n          <Skeleton aria-hidden=\"true\" className=\"h-8 w-20\" />\n        </div>\n      </div>\n    );\n  }\n\n  if (error) {\n    const message = typeof error === \"string\" ? error : error.message;\n\n    return (\n      <div\n        className={cn(healthCardClassName, className)}\n        data-slot=\"health-card\"\n        role=\"alert\"\n        {...props}\n      >\n        <div className=\"px-4 pt-4\">\n          <p className={labelClassName} title={label}>\n            {label}\n          </p>\n        </div>\n        <div className=\"mt-auto px-4 pt-3 pb-4\">\n          <div className=\"rounded-md border border-destructive/20 bg-destructive/[0.045] p-3\">\n            <div className=\"flex items-center gap-2 text-destructive\">\n              <HugeiconsIcon\n                aria-hidden=\"true\"\n                className=\"size-3.5\"\n                icon={Alert02Icon}\n                strokeWidth={2}\n              />\n              <p className=\"font-medium text-xs\">Health unavailable</p>\n            </div>\n            <p className=\"mt-2 text-pretty text-muted-foreground text-xs leading-relaxed\">\n              {message}\n            </p>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cn(healthCardClassName, className)}\n      data-slot=\"health-card\"\n      data-status={status}\n      {...props}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          \"neon-card-wash -z-10 pointer-events-none absolute inset-x-0 bottom-0 h-24 opacity-[0.12]\",\n          STATUS_TINT[status]\n        )}\n      />\n\n      <div className=\"flex items-start justify-between gap-3 px-4 pt-4\">\n        <div className=\"min-w-0\">\n          <p className={labelClassName} title={label}>\n            {label}\n          </p>\n          {summary ? (\n            <p className=\"mt-1 line-clamp-2 text-pretty text-foreground/90 text-sm leading-snug\">\n              {summary}\n            </p>\n          ) : null}\n        </div>\n        <HealthBadge status={status} />\n      </div>\n\n      {signals && signals.length > 0 ? (\n        <div className=\"mt-auto grid grid-cols-2 gap-x-4 gap-y-3 px-4 pt-4 pb-3\">\n          {signals.map((signal) => (\n            <div className=\"min-w-0\" key={signal.label}>\n              <div className=\"flex items-center gap-1.5\">\n                {signal.status ? (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      \"size-1.5 shrink-0\",\n                      STATUS_DOT[signal.status]\n                    )}\n                  />\n                ) : null}\n                <span\n                  className=\"truncate font-mono text-[10px] text-muted-foreground/70\"\n                  title={signal.label}\n                >\n                  {signal.label}\n                </span>\n              </div>\n              <p className=\"mt-0.5 font-semibold text-foreground text-lg tabular-nums tracking-tight\">\n                {signal.value}\n              </p>\n            </div>\n          ))}\n        </div>\n      ) : (\n        <div className=\"mt-auto\" />\n      )}\n\n      {updatedAt ? (\n        <p className=\"px-4 pb-3 font-mono text-[10px] text-muted-foreground/70 tabular-nums\">\n          {updatedAt}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}