Text

1import { Text as PDFText, 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 TextVariant = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
8export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
9export type TextDecoration = 'underline' | 'line-through' | 'none';
10 
11/**
12 * Body text with typography scale, alignment, and decoration options.
13 * Props - `variant` | `align` | `color` | `weight` | `italic` | `decoration` | `transform` | `noMargin` | `children` | `style`
14 * @see {@link TextProps}
15 */
16export interface TextProps {
17  /** Custom styles to merge with component defaults */
18  style?: Style;
19  /** Content to render */
20  children: React.ReactNode;
21  /**
22   * @default 'base'
23   */
24  variant?: TextVariant;
25  /**
26   * @default 'left'
27   */
28  align?: 'left' | 'center' | 'right' | 'justify';
29  color?: string;
30  /**
31   * @default 'normal'
32   */
33  weight?: TextWeight;
34  /**
35   * @default false
36   */
37  italic?: boolean;
38  /**
39   * @default 'none'
40   */
41  decoration?: TextDecoration;
42  transform?: 'uppercase' | 'lowercase' | 'capitalize';
43  /**
44   * @default false
45   */
46  noMargin?: 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 createTextStyles(t: PdfxTheme) {
54  const { fontWeights, letterSpacing } = t.primitives;
55  const base = {
56    fontFamily: t.typography.body.fontFamily,
57    lineHeight: t.typography.body.lineHeight,
58    color: t.colors.foreground,
59    marginBottom: t.spacing.paragraphGap,
60    marginTop: 0,
61  };
62  return StyleSheet.create({
63    text: { ...base, fontSize: t.typography.body.fontSize },
64    xs: { ...base, fontSize: t.primitives.typography.xs },
65    sm: { ...base, fontSize: t.primitives.typography.sm },
66    base: { ...base, fontSize: t.primitives.typography.base },
67    lg: { ...base, fontSize: t.primitives.typography.lg },
68    xl: { ...base, fontSize: t.primitives.typography.xl },
69    '2xl': { ...base, fontSize: t.primitives.typography['2xl'] },
70    '3xl': { ...base, fontSize: t.primitives.typography['3xl'] },
71// … truncated