{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "badge",
  "title": "Badge",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/badge/badge.component.ts",
      "content": "import { Component, Input, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { badgeVariants, type BadgeVariants } from './badge.variants'\n\nexport type BadgeVariant = NonNullable<BadgeVariants['variant']>\n\n/**\n * Angular port of UIPKGE Badge (React `Badge`, a <span>). Use the attribute form on the\n * element you want (`<span ui-badge>`, `<a ui-badge>` for the Radix `asChild` link case, which\n * picks up the `[a&]:hover` styles); `<ui-badge>` works too since the variants start with\n * `inline-flex`. Class strings identical to React via shared variants.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-badge, [ui-badge]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"badge\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiBadgeComponent {\n  @Input() variant: BadgeVariant = 'default'\n  @Input({ transform: booleanAttribute }) wrap = false\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn(badgeVariants({ variant: this.variant, wrap: this.wrap ? true : undefined }), this.className)\n  }\n}\n\nexport { badgeVariants, type BadgeVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/badge/badge.component.ts"
    },
    {
      "path": "packages/registry-angular/components/badge/badge.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const badgeVariants = cva(\n  // text-overflow/ellipsis cannot apply to a flex container's anonymous text,\n  // so truncation is opt-in via a child span (`<Badge><span class=\"truncate\">\n  // …</span></Badge>`); min-w-0 lets that span shrink inside the flex root.\n  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit max-w-full whitespace-nowrap shrink-0 [&>svg]:size-3 [&>svg]:shrink-0 [&>span]:min-w-0 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors duration-200 overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',\n        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        success: 'border-transparent bg-success/10 text-success dark:text-success [a&]:hover:bg-success/20',\n        warning: 'border-transparent bg-warning/10 text-warning dark:text-warning [a&]:hover:bg-warning/20',\n        info: 'border-transparent bg-info/10 text-info dark:text-info [a&]:hover:bg-info/20',\n      },\n      // Allow multi-line labels. rounded-lg + extra leading keeps a wrapped\n      // badge readable instead of a cramped two-line stadium pill.\n      wrap: {\n        true: 'whitespace-normal rounded-lg py-1 leading-snug',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/badge/badge.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/badge/index.ts",
      "content": "export { UiBadgeComponent, badgeVariants, type BadgeVariants, type BadgeVariant } from './badge.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/badge/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Small inline label for status, counts, or tags. Seven variants: default, secondary, destructive, outline, success, warning, info.",
  "categories": [
    "data-display"
  ]
}