{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "link",
  "title": "Link",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/link/link.component.ts",
      "content": "import { Component, ElementRef, Input, booleanAttribute, inject, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { linkVariants, type LinkVariants } from './link.variants'\n\nexport type LinkUnderline = NonNullable<LinkVariants['underline']>\nexport type LinkColor = NonNullable<LinkVariants['color']>\nexport type LinkSize = NonNullable<LinkVariants['size']>\n\n/**\n * Angular port of UIPKGE Link (React `Link`, an `<a>` by default). Put it on the element you\n * want: `<a ui-link href=\"...\">` is the React default; any other element (`<button ui-link>`)\n * is the Radix `asChild` form and still gets the link styling. http(s) hrefs open in a new tab\n * with rel=noopener unless `external` says otherwise; disabled links drop href, get\n * aria-disabled + tabindex -1 and swallow clicks (and are never external). `left` / `right`\n * icon slots project via `[slot=left]` / `[slot=right]`. The `<ui-link>` custom element gets\n * link semantics (role=\"link\", focusable, Enter / click navigate to the href).\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-link, [ui-link]',\n  standalone: true,\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"link\"',\n    '[attr.data-underline]': 'underline ?? null',\n    '[attr.data-color]': 'color ?? null',\n    '[attr.data-size]': 'size ?? null',\n    '[attr.data-disabled]': 'disabled ? \"\" : null',\n    '[attr.href]': 'resolvedHref',\n    '[attr.aria-disabled]': 'disabled ? \"true\" : null',\n    '[attr.tabindex]': 'disabled ? -1 : isCustom ? 0 : null',\n    '[attr.role]': 'isCustom ? \"link\" : null',\n    '[attr.target]': 'isExternal ? \"_blank\" : null',\n    '[attr.rel]': 'isExternal ? \"noopener noreferrer\" : null',\n    '[class]': 'hostClass',\n    '(click)': 'onClick($event)',\n    '(keydown.enter)': 'onEnter($event)',\n  },\n  template: `<ng-content select=\"[slot=left]\" /><ng-content /><ng-content select=\"[slot=right]\" />`,\n})\nexport class UiLinkComponent {\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement\n  /** `<ui-link>` custom element: not an anchor, so it needs role / focus / navigation. */\n  readonly isCustom = this.el.tagName === 'UI-LINK'\n\n  /** External URL — renders an anchor with target/rel handling. */\n  @Input() href?: string\n  /** Router destination (string); wins over `href`, like React. */\n  @Input() to?: string | object\n  @Input() underline?: LinkUnderline\n  @Input() color?: LinkColor\n  @Input() size?: LinkSize\n  /** Disabled links render without href/navigation and get aria-disabled. */\n  @Input({ transform: booleanAttribute }) disabled = false\n  /** Open external href in a new tab. Defaults to true for http(s) hrefs. */\n  @Input({ transform: booleanAttribute }) external?: boolean\n  @Input('class') className?: string\n\n  get isExternal(): boolean {\n    if (this.disabled) return false\n    if (this.external !== undefined) return this.external\n    return typeof this.href === 'string' && /^https?:\\/\\//.test(this.href)\n  }\n\n  get resolvedHref(): string | null {\n    if (this.disabled) return null\n    if (typeof this.to === 'string') return this.to\n    return this.href ?? null\n  }\n\n  get hostClass(): string {\n    return cn(\n      linkVariants({ underline: this.underline, color: this.color, size: this.size }),\n      this.disabled && 'pointer-events-none opacity-50',\n      this.className,\n    )\n  }\n\n  onClick(event: MouseEvent): void {\n    if (this.disabled) {\n      event.preventDefault()\n      event.stopPropagation()\n      return\n    }\n    if (this.isCustom && this.resolvedHref) this.navigate()\n  }\n\n  onEnter(event: Event): void {\n    if (!this.isCustom || this.disabled) return\n    event.preventDefault()\n    this.el.click()\n  }\n\n  private navigate(): void {\n    const href = this.resolvedHref!\n    if (this.isExternal) window.open(href, '_blank', 'noopener,noreferrer')\n    else window.location.assign(href)\n  }\n}\n\nexport { linkVariants, type LinkVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/link/link.component.ts"
    },
    {
      "path": "packages/registry-angular/components/link/link.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\nexport const linkVariants = cva(\n  \"inline-flex items-center gap-1.5 font-medium transition-colors duration-200 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      underline: {\n        none: 'no-underline',\n        always: 'underline underline-offset-4',\n        hover: 'no-underline hover:underline hover:underline-offset-4',\n      },\n      color: {\n        default: 'text-foreground hover:text-foreground/80',\n        primary: 'text-primary hover:text-primary/80',\n        muted: 'text-muted-foreground hover:text-foreground',\n      },\n      size: {\n        sm: 'text-xs gap-1',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      underline: 'hover',\n      color: 'primary',\n      size: 'default',\n    },\n  },\n)\n\nexport type LinkVariants = VariantProps<typeof linkVariants>\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/link/link.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/link/index.ts",
      "content": "export {\n  UiLinkComponent,\n  linkVariants,\n  type LinkVariants,\n  type LinkUnderline,\n  type LinkColor,\n  type LinkSize,\n} from './link.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/link/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Styled anchor with router integration. Renders an <a> for href, a router-link for to, and handles external links with target/rel. Supports underline variants (always/hover/none), color variants (default/primary/muted), disabled state, left/right icon slots, size variants, and asChild composition.",
  "categories": [
    "navigation"
  ]
}