{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-pill",
  "title": "Status Pill",
  "description": "A square marker and a mono label, in one of four tones.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/status-pill.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TONES = { ok: \"text-ok\", warn: \"text-warn\", bad: \"text-bad\", neutral: \"text-mute\" }\n\ntype StatusPillProps = React.ComponentProps<\"span\"> & {\n  tone?: keyof typeof TONES\n}\n\nexport function StatusPill({ tone = \"neutral\", className, ...props }: StatusPillProps) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1.5 font-(family-name:--f-mono) text-[11px] tracking-[.08em] uppercase before:size-2 before:bg-current before:content-['']\",\n        TONES[tone],\n        // A ledger-table row inverts on hover, so the tone gives way to the row's colour.\n        \"[tr:hover_&]:text-inherit\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "core"
  ],
  "type": "registry:component"
}