{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-badge",
  "description": "A self-anchoring count badge for avatars and icons with animated counts and 99+ overflow.",
  "dependencies": [
    "@number-flow/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@ondo-ui/utils",
    "@ondo-ui/badge",
    "@ondo-ui/number-count"
  ],
  "files": [
    {
      "path": "components/compositions/number-badge.tsx",
      "content": "\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { NumberCount } from \"@/components/ui/number-count\"\nimport { cn } from \"@/lib/utils\"\n\nconst numberBadgeVariants = cva(\n  \"absolute z-10 min-w-5 justify-center rounded-full px-1 tabular-nums ring-1 ring-background backdrop-blur-sm transition-all duration-200 ease-out select-none\",\n  {\n    variants: {\n      placement: {\n        \"top-right\": \"top-0 right-0 translate-x-1/2 -translate-y-1/2\",\n        \"top-left\": \"top-0 left-0 -translate-x-1/2 -translate-y-1/2\",\n        \"bottom-right\": \"bottom-0 right-0 translate-x-1/2 translate-y-1/2\",\n        \"bottom-left\": \"bottom-0 left-0 -translate-x-1/2 translate-y-1/2\",\n      },\n      hidden: {\n        true: \"scale-0 opacity-0 pointer-events-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      placement: \"top-right\",\n      hidden: false,\n    },\n  }\n)\n\ninterface NumberBadgeProps\n  extends Omit<React.ComponentProps<typeof Badge>, \"children\"> {\n  value: number\n  max?: number\n  showZero?: boolean\n  placement?: NonNullable<VariantProps<typeof numberBadgeVariants>[\"placement\"]>\n  children?: React.ReactNode\n}\n\nfunction NumberBadge({\n  value,\n  max = 99,\n  showZero = false,\n  placement = \"top-right\",\n  variant = \"default\",\n  className,\n  children,\n  ...props\n}: NumberBadgeProps) {\n  const capped = value > max\n  const hidden = value <= 0 && !showZero\n\n  return (\n    <span\n      className=\"relative inline-flex w-fit shrink-0\"\n      data-slot=\"number-badge\"\n      data-variant={variant}\n      data-placement={placement}\n      data-hidden={String(hidden)}\n    >\n      {children}\n      <Badge\n        variant={variant}\n        aria-hidden={hidden || undefined}\n        className={cn(numberBadgeVariants({ placement, hidden }), className)}\n        {...props}\n      >\n        <NumberCount\n          value={capped ? max : value}\n          suffix={capped ? \"+\" : undefined}\n        />\n      </Badge>\n    </span>\n  )\n}\n\nexport { NumberBadge, numberBadgeVariants, type NumberBadgeProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}