dodil/erp-ui

public/r/status-badge.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "status-badge",
  "title": "StatusBadge",
  "description": "A record's state as a coloured badge; brick-specific tones.",
  "dependencies": [
    "@radix-ui/themes"
  ],
  "files": [
    {
      "path": "src/components/status-badge/StatusBadge.tsx",
      "content": "import { Badge } from \"@radix-ui/themes\";\n\n/** The tone a status reads as. Bricks use UPPERCASE or lower-case states; the mapping ignores case. */\nexport type Tone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\nconst COLOR = { neutral: \"gray\", info: \"blue\", success: \"green\", warning: \"amber\", danger: \"red\" } as const;\n\nconst DEFAULT_TONES: Record<string, Tone> = {\n  draft: \"neutral\", open: \"info\", sent: \"info\", active: \"success\", accepted: \"success\", done: \"success\",\n  closed_won: \"success\", won: \"success\", expired: \"warning\", blocked: \"danger\", declined: \"danger\",\n  closed_lost: \"danger\", lost: \"danger\", cancelled: \"neutral\", superseded: \"neutral\", archived: \"neutral\",\n  left: \"neutral\",\n};\n\n/** A state as a coloured badge. Pass `tones` to colour a brick's own states; unknown ones are neutral. */\nexport function StatusBadge({ status, tones }: { status: string; tones?: Record<string, Tone> }) {\n  const key = status.toLowerCase();\n  const tone = tones?.[key] ?? tones?.[status] ?? DEFAULT_TONES[key] ?? \"neutral\";\n  return (\n    // highContrast: a soft green/blue/amber badge's text is under 4.5:1 on its own background (axe, in a real\n    // browser, on the CRM screens — 2026-10-17); the high-contrast text keeps the colour and passes.\n    <Badge color={COLOR[tone]} variant=\"soft\" radius=\"full\" highContrast>\n      {status.replace(/_/g, \" \").toLowerCase()}\n    </Badge>\n  );\n}\n",
      "type": "registry:component",
      "target": "erp-ui/components/status-badge/StatusBadge.tsx"
    }
  ],
  "type": "registry:component"
}