Heading

1import { StyleSheet, Text } 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 HeadingWeight = 'normal' | 'medium' | 'semibold' | 'bold';
8export type HeadingTracking = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider';
9 
10/**
11 * PDF heading mapped to h1–h6 font sizes from the theme.
12 * Props - `level` | `align` | `color` | `transform` | `weight` | `tracking` | `noMargin` | `keepWithNext` | `children` | `style`
13 * @see {@link HeadingProps}
14 */
15export interface HeadingProps {
16  /** Custom styles to merge with component defaults */
17  style?: Style;
18  /** Content to render */
19  children: React.ReactNode;
20  /**
21   * @default 1
22   */
23  level?: 1 | 2 | 3 | 4 | 5 | 6;
24  /**
25   * @default 'left'
26   */
27  align?: 'left' | 'center' | 'right';
28  color?: string;
29  transform?: 'uppercase' | 'lowercase' | 'capitalize';
30  /**
31   * @default 'bold'
32   */
33  weight?: HeadingWeight;
34  /**
35   * @default 'normal'
36   */
37  tracking?: HeadingTracking;
38  /**
39   * @default false
40   */
41  noMargin?: boolean;
42  keepWithNext?: boolean;
43}
44 
45const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
46function resolveColor(value: string, colors: Record<string, string>): string {
47  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
48}
49function createHeadingStyles(t: PdfxTheme) {
50  const { heading } = t.typography;
51  const { spacing, fontWeights, letterSpacing } = t.primitives;
52  const { sectionGap, componentGap, paragraphGap } = t.spacing;
53  const base = {
54    fontFamily: heading.fontFamily,
55    fontWeight: fontWeights.bold,
56    lineHeight: heading.lineHeight,
57    color: t.colors.foreground,
58  };
59  return StyleSheet.create({
60    h1: {
61      ...base,
62      fontSize: heading.fontSize.h1,
63      marginTop: spacing[0],
64      marginBottom: paragraphGap,
65    },
66    h2: {
67      ...base,
68      fontSize: heading.fontSize.h2,
69      marginTop: sectionGap,
70      marginBottom: paragraphGap,
71    },
72    h3: {
73      ...base,
74      fontSize: heading.fontSize.h3,
75      marginTop: componentGap,
76      marginBottom: paragraphGap,
77    },
78    h4: {
79      ...base,
80      fontSize: heading.fontSize.h4,
81      marginTop: paragraphGap,
82      marginBottom: paragraphGap,
83    },
84    h5: {
85// … truncated