KeyValue

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 KeyValueDirection = 'horizontal' | 'vertical';
7export type KeyValueSize = 'sm' | 'md' | 'lg';
8 
9/**
10 * A single key-value row with optional per-item color and style overrides.
11 * Props - `key` | `value` | `valueColor` | `valueStyle` | `keyStyle`
12 * @see {@link KeyValueEntry}
13 */
14export interface KeyValueEntry {
15  key: string;
16  value: string;
17  valueColor?: string;
18  valueStyle?: Style;
19  keyStyle?: Style;
20}
21 
22/**
23 * List of key-value pairs with layout and style options.
24 * Props - `items` | `direction` | `divided` | `size` | `labelFlex` | `labelColor` | `valueColor` | `boldValue` | `noWrap` | `dividerColor` | `dividerThickness` | `dividerMargin` | `style`
25 * @see {@link KeyValueProps}
26 */
27export interface KeyValueProps {
28  /** Custom styles to merge with component defaults */
29  style?: Style;
30  items: KeyValueEntry[];
31  /**
32   * @default 'horizontal'
33   */
34  direction?: KeyValueDirection;
35  /**
36   * @default false
37   */
38  divided?: boolean;
39  /**
40   * @default 'md'
41   */
42  size?: KeyValueSize;
43  /**
44   * @default 1
45   */
46  labelFlex?: number;
47  labelColor?: string;
48  valueColor?: string;
49  /**
50   * @default false
51   */
52  boldValue?: boolean;
53  /**
54   * @default false
55   */
56  noWrap?: boolean;
57  dividerColor?: string;
58  dividerThickness?: number;
59  dividerMargin?: number;
60}
61 
62const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
63function resolveColor(value: string, colors: Record<string, string>): string {
64  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
65}
66function createKeyValueStyles(t: PdfxTheme) {
67  const { spacing, fontWeights } = t.primitives;
68  const c = t.colors;
69  const { body } = t.typography;
70  const keyBase = {
71    fontFamily: body.fontFamily,
72    color: c.mutedForeground,
73    fontWeight: fontWeights.medium,
74  };
75  const valueBase = {
76    fontFamily: body.fontFamily,
77    color: c.foreground,
78    fontWeight: fontWeights.regular,
79  };
80  return StyleSheet.create({
81    container: { flexDirection: 'column' },
82    rowHorizontal: { flexDirection: 'row', alignItems: 'flex-start', paddingVertical: spacing[1] },
83// … truncated