{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "link",
  "title": "Link",
  "description": "A link primitive with a provider for app router link components.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://ui.digital.nsw.gov.au/registry/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/link.tsx",
      "content": "'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React, { createContext, useContext } from 'react'\n\nimport { cn } from '@/lib/utils'\n\n// Shared visual base for all *styled* variants. Pulled out so the `unstyled`\n// variant can omit it entirely (otherwise it wouldn't actually be unstyled).\nconst styledBase = [\n  // Typography + transition\n  'font-medium underline decoration-current underline-offset-4 motion-safe:transition-colors',\n  // Text colour derives from --link-color; --link-halo and --link-halo-active\n  // derive from --link-color via color-mix so each variant only sets the one\n  // token and the hover/active halos follow automatically.\n  'text-(--link-color)',\n  '[--link-halo:color-mix(in_oklch,var(--link-color)_10%,transparent)]',\n  '[--link-halo-active:color-mix(in_oklch,var(--link-color)_18%,transparent)]',\n  // Hover / active halos use box-shadow + background-color rather than\n  // padding, so inline links sit flush against surrounding text. The\n  // shadows extend the halo 2px above and 4px below the line box, matching\n  // the GOV.UK Design System focus pattern.\n  'hover:bg-(--link-halo) hover:decoration-2',\n  'hover:shadow-[0_-2px_0_var(--link-halo),0_4px_0_var(--link-halo)]',\n  // Wrapped lines each get their own halo\n  '[box-decoration-break:clone] [-webkit-box-decoration-break:clone]',\n  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--link-color)',\n  // Default sizing for icon children — without this, an unsized SVG inside\n  // a Link collapses to 0×0 in flex layouts. `vertical-align: -0.15em`\n  // aligns the icon's box to the text's x-height for inline-flow usage;\n  // flex contexts ignore vertical-align and should set `items-baseline` (or\n  // similar) on the Link itself. Consumers can override per-icon by passing\n  // a `size-*` or `align-*` class on the icon itself.\n  '*:data-[slot=icon]:inline-block *:data-[slot=icon]:size-[1em] *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:align-[-0.15em]',\n]\n\nconst linkVariants = cva('', {\n  variants: {\n    variant: {\n      primary: [\n        ...styledBase,\n        // Link\n        '[--link-color:var(--color-primary-800)] dark:[--link-color:var(--color-primary-200)]',\n        // Visited — set the text colour directly. `:visited` is restricted by\n        // browsers to a small set of paint-only properties (color, *-color,\n        // fill, stroke) and ignores custom properties, so we can't shift\n        // --link-color here. Setting `text-*` works, and the underline follows\n        // because the base uses `decoration-current` (currentColor).\n        'visited:text-primary-600 dark:visited:text-primary-300',\n        // Active — deeper halo via --link-halo-active\n        'active:bg-(--link-halo-active) active:decoration-2',\n        'active:shadow-[0_-2px_0_var(--link-halo-active),0_4px_0_var(--link-halo-active)]',\n      ],\n      secondary: [\n        ...styledBase,\n        '[--link-color:var(--color-primary-200)] dark:[--link-color:var(--color-primary-800)]',\n      ],\n      white: [\n        ...styledBase,\n        '[--link-color:var(--color-white)] dark:[--link-color:var(--color-grey-800)]',\n      ],\n      // Zero classes — the consumer (typically Button / BadgeButton) is\n      // supplying its own complete visual treatment and doesn't want any\n      // Link styling to compose on top. Intentionally omits the icon defaults\n      // too, so the wrapping component has full control of icon sizing.\n      unstyled: [],\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n})\n\ntype LinkComponent = React.ElementType\n\n/**\n * Object form of a link target, mirroring the `UrlObject` accepted by framework\n * link components such as next/link. Used for `Link`'s `href` when a custom\n * element/component is supplied via `as` / `LinkProvider`; a plain anchor still\n * takes a string.\n *\n * Fields are optional, matching next/link. Typing the *shape* — rather than the\n * previous bare `object` — rejects unrelated values like arrays and functions\n * (both carry a numeric `length`, which is incompatible with `length?: never`).\n */\ntype LinkUrlObject = {\n  pathname?: string | null\n  query?: string | Record<string, unknown> | null\n  hash?: string | null\n  search?: string | null\n  host?: string | null\n  hostname?: string | null\n  port?: string | number | null\n  protocol?: string | null\n  /** Brand that excludes arrays/functions (which have a numeric `length`). */\n  length?: never\n}\n\ntype LinkProps = Omit<React.ComponentPropsWithoutRef<'a'>, 'href'> &\n  VariantProps<typeof linkVariants> & {\n    as?: LinkComponent\n    href: React.ComponentPropsWithoutRef<'a'>['href'] | LinkUrlObject\n    ref?: React.Ref<HTMLAnchorElement>\n  }\n\nconst LinkComponentContext = createContext<LinkComponent | null>(null)\n\nfunction LinkProvider({\n  children,\n  component,\n}: {\n  children: React.ReactNode\n  component: LinkComponent\n}) {\n  return <LinkComponentContext.Provider value={component}>{children}</LinkComponentContext.Provider>\n}\n\n/**\n * Polymorphic anchor wrapper. Renders an `<a>` by default, or any element\n * provided via the `as` prop, or via a `<LinkProvider component={…}>` context\n * (use the context to inject a framework Link like Next.js `next/link`).\n *\n * Hover / active / focus styling on consumers should use the native CSS\n * pseudo-class utilities (`hover:`, `active:`, `focus-visible:`, and their\n * `group-…` variants) — Tailwind v4 maps them to real CSS, no JS state\n * tracking required.\n */\n/**\n * Anchor-only HTML attributes. When `Link` is rendered as a non-anchor\n * intrinsic element (e.g. `as=\"button\"`), forwarding these produces invalid\n * markup like `<button href=\"…\">` and React DOM warnings, so they are\n * stripped. Custom components passed via `as` / `LinkProvider` are assumed to\n * be anchor-like (e.g. `next/link`) and receive the full prop set.\n */\nconst ANCHOR_ONLY_PROPS = [\n  'href',\n  'target',\n  'rel',\n  'download',\n  'ping',\n  'referrerPolicy',\n  'hrefLang',\n] as const\n\nfunction Link({ as, variant, className, ref, ...props }: LinkProps) {\n  const ContextLink = useContext(LinkComponentContext)\n  const component = as ?? ContextLink ?? 'a'\n\n  // Drop anchor-only props when the resolved element is a non-anchor\n  // intrinsic tag (e.g. `as=\"button\"`). String components other than 'a'\n  // are real DOM tags that can't accept `href`/`target`/etc; non-string\n  // components (framework links) keep the full set.\n  const isNonAnchorIntrinsic = typeof component === 'string' && component !== 'a'\n\n  const elementProps = { ...props } as Record<string, unknown>\n  if (isNonAnchorIntrinsic) {\n    for (const prop of ANCHOR_ONLY_PROPS) {\n      delete elementProps[prop]\n    }\n  }\n\n  return React.createElement(component, {\n    ...elementProps,\n    className: cn(linkVariants({ variant }), className),\n    ref,\n  })\n}\n\n/**\n * Open-in-new-tab glyph used by `ExternalLink`. Defined inline (rather than\n * imported from `Icons`) so that consumers of `Link` / `ExternalLink` don't\n * tree-pull the full icon set. Sized and aligned through the `[data-slot=icon]`\n * rules in `linkVariants`.\n */\nfunction OpenInNewIcon(props: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      data-slot='icon'\n      fill='currentColor'\n      viewBox='0 -960 960 960'\n      aria-hidden='true'\n      {...props}\n    >\n      <path d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h560v-240q0-17 11.5-28.5T800-480q17 0 28.5 11.5T840-440v240q0 33-23.5 56.5T760-120H200Zm560-584L416-360q-11 11-28 11t-28-11q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560-800q0-17 11.5-28.5T600-840h200q17 0 28.5 11.5T840-800v200q0 17-11.5 28.5T800-560q-17 0-28.5-11.5T760-600v-104Z' />\n    </svg>\n  )\n}\n\ntype ExternalLinkProps = LinkProps & {\n  /**\n   * Screen-reader suffix announced after the link text. Defaults to\n   * `\"(opens in a new tab)\"`. Pass an empty string to suppress.\n   */\n  newTabLabel?: string\n  /**\n   * Custom trailing icon. Pass `null` to hide the icon entirely. If omitted,\n   * the default open-in-new glyph is rendered.\n   */\n  icon?: React.ReactNode | null\n}\n\n/**\n * Anchor preconfigured for cross-origin / new-tab navigation. Sets\n * `target=\"_blank\"` and `rel=\"noopener noreferrer\"` by default, renders a\n * trailing open-in-new icon, and appends a visually-hidden suffix so screen\n * readers announce that the link opens a new tab.\n *\n * All `Link` props are forwarded — `variant`, `as`, `className`, etc. —\n * and any of `target`, `rel`, `icon`, or `newTabLabel` can be overridden.\n */\nfunction ExternalLink({\n  children,\n  icon,\n  newTabLabel = '(opens in a new tab)',\n  target = '_blank',\n  rel = 'noopener noreferrer',\n  ref,\n  ...props\n}: ExternalLinkProps) {\n  const trailingIcon = icon === null ? null : (icon ?? <OpenInNewIcon className='ml-0.5' />)\n\n  return (\n    <Link {...props} target={target} rel={rel} ref={ref}>\n      {children}\n      {trailingIcon}\n      {newTabLabel ? <span className='sr-only'> {newTabLabel}</span> : null}\n    </Link>\n  )\n}\n\nexport { ExternalLink, Link, LinkProvider, linkVariants }\nexport type { ExternalLinkProps, LinkComponent, LinkProps, LinkUrlObject }\n",
      "type": "registry:ui",
      "target": "components/link.tsx"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "lib/utils.ts"
    }
  ],
  "type": "registry:ui",
  "meta": {
    "nswdsVersion": "5.1.0"
  }
}