{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "credit-badge",
  "type": "registry:component",
  "title": "Credit Badge",
  "description": "Balance status pill for credits, wallet states, and billing health.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/credit-badge/credit-badge.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { badgeVariants } from \"@vllnt/ui\";\n\nexport type CreditBadgeStatus = \"depleted\" | \"healthy\" | \"low\" | \"overdue\";\n\nexport type CreditBadgeProps = Omit<\n  React.ComponentPropsWithoutRef<\"span\">,\n  \"children\"\n> & {\n  amount?: string;\n  label?: string;\n  status: CreditBadgeStatus;\n};\n\nfunction getStatusLabel(status: CreditBadgeStatus): string {\n  switch (status) {\n    case \"depleted\":\n      return \"No credits left\";\n    case \"healthy\":\n      return \"Credits available\";\n    case \"low\":\n      return \"Credits running low\";\n    case \"overdue\":\n      return \"Balance overdue\";\n  }\n}\n\nfunction getStatusClasses(status: CreditBadgeStatus): string {\n  switch (status) {\n    case \"depleted\":\n      return \"border-slate-500/30 bg-slate-500/10 text-slate-700 dark:text-slate-300\";\n    case \"healthy\":\n      return \"border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300\";\n    case \"low\":\n      return \"border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300\";\n    case \"overdue\":\n      return \"border-destructive/30 bg-destructive/10 text-destructive\";\n  }\n}\n\nexport const CreditBadge = React.forwardRef<HTMLSpanElement, CreditBadgeProps>(\n  ({ amount, className, label, status, ...props }, reference) => {\n    return (\n      <span\n        className={cn(\n          badgeVariants({ variant: \"outline\" }),\n          \"gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium shadow-none\",\n          getStatusClasses(status),\n          className,\n        )}\n        ref={reference}\n        {...props}\n      >\n        <span aria-hidden=\"true\" className=\"size-1.5 rounded-full bg-current\" />\n        <span>\n          {amount\n            ? `${amount} • ${label ?? getStatusLabel(status)}`\n            : (label ?? getStatusLabel(status))}\n        </span>\n      </span>\n    );\n  },\n);\n\nCreditBadge.displayName = \"CreditBadge\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}