{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notification-badge",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "notification-badge.tsx",
      "target": "components/ui/notification-badge.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type NotificationTone = \"accent\" | \"accent-alt\" | \"danger\" | \"warning\";\n\nexport interface NotificationBadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement> {\n  /** The count to show. Hidden at 0 unless `showZero`. */\n  count?: number;\n  /** Cap before showing \"N+\". Defaults to 9. */\n  max?: number;\n  tone?: NotificationTone;\n  /** Show a bare dot instead of a number. */\n  dot?: boolean;\n  showZero?: boolean;\n}\n\nconst toneClass: Record<NotificationTone, string> = {\n  accent: \"bg-accent text-on-accent\",\n  \"accent-alt\": \"bg-accent-alt text-on-accent\",\n  danger: \"bg-danger text-on-accent\",\n  warning: \"bg-warning text-on-accent\",\n};\n\nexport const NotificationBadge = React.forwardRef<\n  HTMLSpanElement,\n  NotificationBadgeProps\n>(\n  (\n    {\n      className,\n      count = 0,\n      max = 9,\n      tone = \"danger\",\n      dot = false,\n      showZero = false,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const visible = dot || count > 0 || showZero;\n    return (\n      <span\n        ref={ref}\n        className={cn(\"relative inline-flex\", className)}\n        {...props}\n      >\n        {children}\n        {visible &&\n          (dot ? (\n            <span\n              aria-hidden=\"true\"\n              className={cn(\n                \"absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full ring-2 ring-surface\",\n                toneClass[tone],\n              )}\n            />\n          ) : (\n            <span\n              className={cn(\n                \"absolute -top-1.5 -right-1.5 inline-flex h-[1.15rem] min-w-[1.15rem] items-center justify-center rounded-full px-1 font-mono text-[0.625rem] font-semibold leading-none tabular-nums ring-2 ring-surface\",\n                toneClass[tone],\n              )}\n            >\n              {count > max ? `${max}+` : count}\n            </span>\n          ))}\n      </span>\n    );\n  },\n);\nNotificationBadge.displayName = \"NotificationBadge\";\n"
    }
  ]
}