{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "severity-badge",
  "type": "registry:component",
  "title": "Severity Badge",
  "description": "Operational severity label with tone variants and optional pulse for critical incidents.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/severity-badge/severity-badge.tsx",
      "content": "import * as React from \"react\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@vllnt/ui\";\n\nexport type SeverityBadgeLevel =\n  | \"critical\"\n  | \"high\"\n  | \"info\"\n  | \"low\"\n  | \"medium\";\n\nconst severityBadgeVariants = cva(\n  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    compoundVariants: [\n      {\n        className:\n          \"border-transparent bg-destructive text-destructive-foreground\",\n        level: \"critical\",\n        tone: \"solid\",\n      },\n      {\n        className: \"border-destructive/30 bg-destructive/10 text-destructive\",\n        level: \"critical\",\n        tone: \"soft\",\n      },\n      {\n        className: \"border-destructive/40 text-destructive\",\n        level: \"critical\",\n        tone: \"outline\",\n      },\n      {\n        className: \"border-transparent bg-orange-500 text-white\",\n        level: \"high\",\n        tone: \"solid\",\n      },\n      {\n        className: \"border-orange-500/30 bg-orange-500/10 text-orange-600\",\n        level: \"high\",\n        tone: \"soft\",\n      },\n      {\n        className: \"border-orange-500/40 text-orange-600\",\n        level: \"high\",\n        tone: \"outline\",\n      },\n      {\n        className: \"border-transparent bg-amber-500 text-white\",\n        level: \"medium\",\n        tone: \"solid\",\n      },\n      {\n        className: \"border-amber-500/30 bg-amber-500/10 text-amber-600\",\n        level: \"medium\",\n        tone: \"soft\",\n      },\n      {\n        className: \"border-amber-500/40 text-amber-600\",\n        level: \"medium\",\n        tone: \"outline\",\n      },\n      {\n        className: \"border-transparent bg-sky-500 text-white\",\n        level: \"low\",\n        tone: \"solid\",\n      },\n      {\n        className: \"border-sky-500/30 bg-sky-500/10 text-sky-600\",\n        level: \"low\",\n        tone: \"soft\",\n      },\n      {\n        className: \"border-sky-500/40 text-sky-600\",\n        level: \"low\",\n        tone: \"outline\",\n      },\n      {\n        className: \"border-transparent bg-muted text-muted-foreground\",\n        level: \"info\",\n        tone: \"solid\",\n      },\n      {\n        className: \"border-border bg-muted/50 text-muted-foreground\",\n        level: \"info\",\n        tone: \"soft\",\n      },\n      {\n        className: \"border-border text-muted-foreground\",\n        level: \"info\",\n        tone: \"outline\",\n      },\n    ],\n    defaultVariants: {\n      level: \"info\",\n      tone: \"soft\",\n    },\n    variants: {\n      level: {\n        critical: \"\",\n        high: \"\",\n        info: \"\",\n        low: \"\",\n        medium: \"\",\n      },\n      tone: {\n        outline: \"\",\n        soft: \"\",\n        solid: \"\",\n      },\n    },\n  },\n);\n\nconst DOT_COLOR: Record<SeverityBadgeLevel, string> = {\n  critical: \"bg-destructive\",\n  high: \"bg-orange-500\",\n  info: \"bg-muted-foreground\",\n  low: \"bg-sky-500\",\n  medium: \"bg-amber-500\",\n};\n\nconst DEFAULT_LABEL: Record<SeverityBadgeLevel, string> = {\n  critical: \"Critical\",\n  high: \"High\",\n  info: \"Info\",\n  low: \"Low\",\n  medium: \"Medium\",\n};\n\nexport type SeverityBadgeProps = Omit<\n  React.HTMLAttributes<HTMLSpanElement>,\n  \"children\"\n> &\n  VariantProps<typeof severityBadgeVariants> & {\n    children?: React.ReactNode;\n    level: SeverityBadgeLevel;\n    pulse?: boolean;\n    showDot?: boolean;\n  };\n\nfunction SeverityBadge({\n  children,\n  className,\n  level,\n  pulse = false,\n  showDot = true,\n  tone,\n  ...props\n}: SeverityBadgeProps) {\n  const label = children ?? DEFAULT_LABEL[level];\n\n  return (\n    <span\n      className={cn(severityBadgeVariants({ level, tone }), className)}\n      data-level={level}\n      {...props}\n    >\n      {showDot ? (\n        <span aria-hidden=\"true\" className=\"relative flex size-2\">\n          {pulse ? (\n            <span\n              className={cn(\n                \"absolute inline-flex h-full w-full animate-ping rounded-full opacity-60\",\n                DOT_COLOR[level],\n              )}\n            />\n          ) : null}\n          <span\n            className={cn(\n              \"relative inline-flex size-2 rounded-full\",\n              DOT_COLOR[level],\n            )}\n          />\n        </span>\n      ) : null}\n      <span>{label}</span>\n    </span>\n  );\n}\n\nexport { SeverityBadge, severityBadgeVariants };\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}