{
  "name": "badge",
  "type": "registry:component",
  "files": [
    {
      "name": "badge.component.ts",
      "content": "import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport { badgeVariants, type ZardBadgeTypeVariants } from './badge.variants';\n\n@Component({\n  selector: 'z-badge, a[z-badge]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[attr.data-variant]': 'zType()',\n    'data-slot': 'badge',\n  },\n  exportAs: 'zBadge',\n})\nexport class ZardBadgeComponent {\n  readonly zType = input<ZardBadgeTypeVariants>('default');\n\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(badgeVariants({ zType: this.zType() }), this.class()));\n}\n"
    },
    {
      "name": "badge.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const badgeVariants = cva(\n  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',\n  {\n    variants: {\n      zType: {\n        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',\n        secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',\n        destructive:\n          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',\n        outline: 'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 [a&]:hover:underline',\n      },\n    },\n    defaultVariants: {\n      zType: 'default',\n    },\n  },\n);\n\nexport type ZardBadgeTypeVariants = NonNullable<VariantProps<typeof badgeVariants>['zType']>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './badge.component';\nexport * from './badge.variants';\n"
    }
  ],
  "demos": [
    {
      "name": "custom-colors.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardBadgeComponent } from '../badge.component';\n\n@Component({\n  selector: 'z-demo-badge-custom-colors',\n  imports: [ZardBadgeComponent],\n  template: `\n    <div class=\"flex flex-col items-center gap-2\">\n      <div class=\"flex w-full flex-wrap gap-2\">\n        <z-badge class=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">Blue</z-badge>\n        <z-badge class=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">Green</z-badge>\n        <z-badge class=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">Sky</z-badge>\n        <z-badge class=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">Purple</z-badge>\n        <z-badge class=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">Red</z-badge>\n      </div>\n    </div>\n  `,\n})\nexport class ZardDemoBadgeCustomColorsComponent {}\n"
    },
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardBadgeComponent } from '../badge.component';\n\n@Component({\n  selector: 'z-demo-badge-default',\n  imports: [ZardBadgeComponent],\n  template: `\n    <div class=\"flex flex-col items-center gap-2\">\n      <div class=\"flex w-full flex-wrap gap-2\">\n        <z-badge>Badge</z-badge>\n        <z-badge zType=\"secondary\">Secondary</z-badge>\n        <z-badge zType=\"destructive\">Destructive</z-badge>\n        <z-badge zType=\"outline\">Outline</z-badge>\n        <z-badge zType=\"ghost\">Ghost</z-badge>\n      </div>\n    </div>\n  `,\n})\nexport class ZardDemoBadgeDefaultComponent {}\n"
    },
    {
      "name": "link.ts",
      "content": "import { Component } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowUpRight } from '@ng-icons/lucide';\n\nimport { ZardBadgeComponent } from '../badge.component';\n\n@Component({\n  selector: 'z-demo-badge-link',\n  imports: [ZardBadgeComponent, NgIcon, RouterLink],\n  template: `\n    <div class=\"flex w-full flex-wrap gap-2\">\n      <a z-badge [routerLink]=\"[]\" fragment=\"link\">\n        <span class=\"flex items-center\">\n          Open Link\n          <ng-icon name=\"lucideArrowUpRight\" />\n        </span>\n      </a>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideArrowUpRight })],\n})\nexport class ZardDemoBadgeLinkComponent {}\n"
    },
    {
      "name": "with-icon.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBadgeCheck, lucideBookmark } from '@ng-icons/lucide';\n\nimport { ZardBadgeComponent } from '../badge.component';\n\n@Component({\n  selector: 'z-demo-badge-with-icons',\n  imports: [ZardBadgeComponent, NgIcon],\n  template: `\n    <div class=\"flex w-full flex-wrap gap-2\">\n      <z-badge zType=\"secondary\">\n        <ng-icon name=\"lucideBadgeCheck\" />\n        Verified\n      </z-badge>\n      <z-badge zType=\"outline\">\n        Bookmark\n        <ng-icon name=\"lucideBookmark\" />\n      </z-badge>\n    </div>\n  `,\n  viewProviders: [provideIcons({ lucideBadgeCheck, lucideBookmark })],\n})\nexport class ZardDemoBadgeWithIconsComponent {}\n"
    }
  ]
}