Link

1'use client'
2 
3import { cva, type VariantProps } from 'class-variance-authority'
4import React, { createContext, useContext } from 'react'
5 
6import { cn } from '@/lib/utils'
7 
8// Shared visual base for all *styled* variants. Pulled out so the `unstyled`
9// variant can omit it entirely (otherwise it wouldn't actually be unstyled).
10const styledBase = [
11  // Typography + transition
12  'font-medium underline decoration-current underline-offset-4 motion-safe:transition-colors',
13  // Text colour derives from --link-color; --link-halo and --link-halo-active
14  // derive from --link-color via color-mix so each variant only sets the one
15  // token and the hover/active halos follow automatically.
16  'text-(--link-color)',
17  '[--link-halo:color-mix(in_oklch,var(--link-color)_10%,transparent)]',
18  '[--link-halo-active:color-mix(in_oklch,var(--link-color)_18%,transparent)]',
19  // Hover / active halos use box-shadow + background-color rather than
20  // padding, so inline links sit flush against surrounding text. The
21  // shadows extend the halo 2px above and 4px below the line box, matching
22  // the GOV.UK Design System focus pattern.
23  'hover:bg-(--link-halo) hover:decoration-2',
24  'hover:shadow-[0_-2px_0_var(--link-halo),0_4px_0_var(--link-halo)]',
25  // Wrapped lines each get their own halo
26  '[box-decoration-break:clone] [-webkit-box-decoration-break:clone]',
27  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--link-color)',
28  // Default sizing for icon children — without this, an unsized SVG inside
29  // a Link collapses to 0×0 in flex layouts. `vertical-align: -0.15em`
30  // aligns the icon's box to the text's x-height for inline-flow usage;
31  // flex contexts ignore vertical-align and should set `items-baseline` (or
32  // similar) on the Link itself. Consumers can override per-icon by passing
33  // a `size-*` or `align-*` class on the icon itself.
34  '*:data-[slot=icon]:inline-block *:data-[slot=icon]:size-[1em] *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:align-[-0.15em]',
35]
36 
37const linkVariants = cva('', {
38  variants: {
39    variant: {
40      primary: [
41        ...styledBase,
42        // Link
43        '[--link-color:var(--color-primary-800)] dark:[--link-color:var(--color-primary-200)]',
44        // Visited — set the text colour directly. `:visited` is restricted by
45        // browsers to a small set of paint-only properties (color, *-color,
46        // fill, stroke) and ignores custom properties, so we can't shift
47// … truncated