Link

1import { Link as PDFLink, StyleSheet } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
4import type React from 'react';
5type PdfxTheme = ReturnType<typeof usePdfxTheme>;
6 
7export type LinkVariant = 'default' | 'muted' | 'primary';
8export type LinkUnderline = 'always' | 'none';
9 
10/**
11 * Clickable hyperlink for PDF documents.
12 * Props - `href` | `children` | `align` | `color` | `variant` | `underline` | `style`
13 * @see {@link LinkProps}
14 */
15export interface LinkProps {
16  /** Custom styles to merge with component defaults */
17  style?: Style;
18  /** Content to render */
19  children: React.ReactNode;
20  href: string;
21  /**
22   * @default 'left'
23   */
24  align?: 'left' | 'center' | 'right';
25  color?: string;
26  /**
27   * @default 'default'
28   */
29  variant?: LinkVariant;
30  /**
31   * @default 'always'
32   */
33  underline?: LinkUnderline;
34}
35 
36const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
37function resolveColor(value: string, colors: Record<string, string>): string {
38  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
39}
40function createLinkStyles(t: PdfxTheme) {
41  const { fontWeights } = t.primitives;
42  const base = {
43    fontFamily: t.typography.body.fontFamily,
44    fontSize: t.typography.body.fontSize,
45    lineHeight: t.typography.body.lineHeight,
46    marginBottom: t.spacing.paragraphGap,
47  };
48  return StyleSheet.create({
49    default: {
50      ...base,
51      color: t.colors.accent,
52      fontWeight: fontWeights.medium,
53      textDecoration: 'underline',
54    },
55    muted: {
56      ...base,
57      color: t.colors.mutedForeground,
58      fontWeight: fontWeights.regular,
59      textDecoration: 'underline',
60    },
61    primary: {
62      ...base,
63      color: t.colors.primary,
64      fontWeight: fontWeights.semibold,
65      textDecoration: 'underline',
66    },
67    underlineAlways: { textDecoration: 'underline' },
68    underlineNone: { textDecoration: 'none' },
69  });
70}
71 
72export function Link({
73  href,
74  align,
75  color,
76  variant = 'default',
77  underline,
78  children,
79  style,
80}: LinkProps) {
81  const theme = usePdfxTheme();
82  const styles = useSafeMemo(() => createLinkStyles(theme), [theme]);
83  const variantMap = { default: styles.default, muted: styles.muted, primary: styles.primary };
84// … truncated