{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "link",
  "title": "Link",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/link/Link.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAnchorAttributes } from 'svelte/elements'\n  import type { LinkVariants } from './link.variants'\n\n  export interface LinkProps extends HTMLAnchorAttributes {\n    underline?: LinkVariants['underline']\n    color?: LinkVariants['color']\n    size?: LinkVariants['size']\n    disabled?: boolean\n    /** Router destination (React `to` parity). Alias for `href` — wins when both are set. */\n    to?: string\n    /** Open external href in a new tab. Defaults to true for http(s) hrefs. */\n    external?: boolean\n    left?: Snippet\n    right?: Snippet\n    children?: Snippet\n    /** Render your own element with the link's props and styles instead of\n     *  emitting an <a> — the Svelte counterpart of React's `asChild` (and the\n     *  idiomatic cover for React's polymorphic `as`). */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    /** The rendered <a>, via `bind:ref`. Stays null in `child` mode. */\n    ref?: HTMLAnchorElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { linkVariants } from './link.variants'\n\n  let {\n    class: className,\n    underline = 'hover',\n    color = 'primary',\n    size = 'default',\n    disabled = false,\n    to,\n    external,\n    href,\n    child,\n    children,\n    left,\n    right,\n    ref = $bindable(null),\n    onclick,\n    ...restProps\n  }: LinkProps = $props()\n\n  const resolvedHref = $derived(to ?? href)\n  const isExternal = $derived(external ?? (typeof resolvedHref === 'string' && /^https?:\\/\\//.test(resolvedHref)))\n\n  type AnchorClick = Parameters<Exclude<LinkProps['onclick'], null | undefined>>[0]\n\n  function handleClick(e: AnchorClick) {\n    if (disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n    onclick?.(e)\n  }\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'link',\n    'data-underline': underline,\n    'data-color': color,\n    'data-size': size,\n    'data-disabled': disabled ? '' : undefined,\n    href: disabled ? undefined : resolvedHref,\n    'aria-disabled': disabled ? ('true' as const) : undefined,\n    tabindex: disabled ? -1 : undefined,\n    ...(isExternal && !disabled ? { target: '_blank', rel: 'noopener noreferrer' } : {}),\n    class: cn(linkVariants({ underline, color, size }), disabled && 'pointer-events-none opacity-50', className),\n    onclick: handleClick,\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <a bind:this={ref} {...mergedProps}>\n    {@render left?.()}\n    {@render children?.()}\n    {@render right?.()}\n  </a>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/link/Link.svelte"
    },
    {
      "path": "packages/registry-svelte/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/lib/components/ui/link/link.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/link/index.ts",
      "content": "export { default as Link, type LinkProps } from './Link.svelte'\nexport { linkVariants, type LinkVariants } from './link.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/link/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Styled anchor with external-link handling (target/rel auto-applied for http(s) hrefs). Supports underline variants (always/hover/none), color variants (default/primary/muted), disabled state, left/right icon snippets, size variants, and child-snippet composition.",
  "categories": [
    "navigation"
  ]
}