Signature

1import { Text as PDFText, StyleSheet, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
4type PdfxTheme = ReturnType<typeof usePdfxTheme>;
5 
6export type SignatureVariant = 'single' | 'double' | 'inline';
7 
8/**
9 * Signature signer properties.
10 * Props - `label` | `name` | `title` | `date`
11 * @see {@link SignatureSigner}
12 */
13export interface SignatureSigner {
14  label?: string;
15  name?: string;
16  title?: string;
17  date?: string;
18}
19 
20/**
21 * Signature block properties.
22 * Props - `variant` | `label` | `name` | `title` | `date` | `signers` | `style`
23 * @see {@link PdfSignatureBlockProps}
24 */
25export interface PdfSignatureBlockProps {
26  /**
27   * Layout variant: [single, double, inline]
28   * @default 'single'
29   */
30  variant?: SignatureVariant;
31  label?: string;
32  name?: string;
33  title?: string;
34  date?: string;
35  signers?: [SignatureSigner, SignatureSigner];
36  style?: Style;
37}
38 
39function createSignatureStyles(t: PdfxTheme) {
40  const { spacing, fontWeights, typography } = t.primitives;
41  return StyleSheet.create({
42    container: { marginTop: t.spacing.sectionGap, marginBottom: t.spacing.componentGap },
43    block: { flex: 1, minWidth: 140 },
44    label: {
45      fontFamily: t.typography.body.fontFamily,
46      fontSize: typography.sm,
47      color: t.colors.mutedForeground,
48      marginBottom: spacing[1],
49    },
50    line: {
51      borderBottomWidth: 1,
52      borderBottomColor: t.colors.foreground,
53      borderBottomStyle: 'solid',
54      minHeight: spacing[6],
55      marginBottom: spacing[1],
56    },
57    name: {
58      fontFamily: t.typography.body.fontFamily,
59      fontSize: t.typography.body.fontSize,
60      color: t.colors.foreground,
61      fontWeight: fontWeights.semibold,
62    },
63    titleText: {
64      fontFamily: t.typography.body.fontFamily,
65      fontSize: typography.sm,
66      color: t.colors.mutedForeground,
67    },
68    dateText: {
69      fontFamily: t.typography.body.fontFamily,
70      fontSize: typography.xs,
71      color: t.colors.mutedForeground,
72      marginTop: 1,
73    },
74    doubleRow: { flexDirection: 'row', justifyContent: 'space-between', gap: spacing[8] },
75    inlineRow: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], flexWrap: 'wrap' },
76    inlineLabel: {
77      fontFamily: t.typography.body.fontFamily,
78      fontSize: typography.sm,
79      color: t.colors.mutedForeground,
80    },
81    inlineLine: {
82      borderBottomWidth: 1,
83// … truncated