PageHeader

1import { Text as PDFText, StyleSheet, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import type { ReactNode } from 'react';
4import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
5type PdfxTheme = ReturnType<typeof usePdfxTheme>;
6 
7export type PageHeaderVariant =
8  | 'simple'
9  | 'centered'
10  | 'minimal'
11  | 'branded'
12  | 'logo-left'
13  | 'logo-right'
14  | 'two-column';
15 
16/**
17 * Header row with layout variants, logo support, and optional fixed positioning.
18 * Props - `title` | `subtitle` | `rightText` | `rightSubText` | `variant` | `background` | `titleColor` | `marginBottom` | `address` | `phone` | `email` | `logo` | `fixed` | `noWrap` | `style`
19 * @see {@link PageHeaderProps}
20 */
21export interface PageHeaderProps {
22  /** Custom styles to merge with component defaults */
23  style?: Style;
24  title: string;
25  subtitle?: string;
26  rightText?: string;
27  rightSubText?: string;
28  /**
29   * @default 'simple'
30   */
31  variant?: PageHeaderVariant;
32  background?: string;
33  titleColor?: string;
34  marginBottom?: number;
35  address?: string;
36  phone?: string;
37  email?: string;
38  logo?: ReactNode;
39  /**
40   * @default false
41   */
42  fixed?: boolean;
43  /**
44   * @default true
45   */
46  noWrap?: boolean;
47}
48 
49const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
50function resolveColor(value: string, colors: Record<string, string>): string {
51  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
52}
53function createPageHeaderStyles(t: PdfxTheme) {
54  const { spacing, borderRadius, fontWeights } = t.primitives;
55  const c = t.colors;
56  const { heading, body } = t.typography;
57 
58  return StyleSheet.create({
59    simpleContainer: {
60      display: 'flex',
61      flexDirection: 'row',
62      alignItems: 'flex-start',
63      justifyContent: 'space-between',
64      paddingBottom: spacing[4],
65      borderBottomWidth: spacing[0.5],
66      borderBottomColor: c.border,
67      borderBottomStyle: 'solid',
68    },
69    simpleLeft: {
70      display: 'flex',
71      flexDirection: 'column',
72      flex: 1,
73    },
74    simpleRight: {
75      display: 'flex',
76      flexDirection: 'column',
77      alignItems: 'flex-end',
78    },
79 
80    centeredContainer: {
81      display: 'flex',
82      flexDirection: 'column',
83      alignItems: 'center',
84      paddingBottom: spacing[4],
85      borderBottomWidth: spacing[0.5],
86// … truncated