Card

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 CardVariant = 'default' | 'bordered' | 'muted';
8 
9/**
10 * Bordered content card with optional title and padding presets.
11 * Props - `title` | `children` | `variant` | `padding` | `wrap` | `style`
12 * @see {@link PdfCardProps}
13 */
14export interface PdfCardProps {
15  /** Custom styles to merge with component defaults */
16  style?: Style;
17  title?: string;
18  children?: ReactNode;
19  /**
20   * @default 'default'
21   */
22  variant?: CardVariant;
23  /**
24   * @default 'md'
25   */
26  padding?: 'sm' | 'md' | 'lg';
27  /**
28   * When false, the card will not split across PDF pages.
29   * @default false
30   */
31  wrap?: boolean;
32}
33 
34function createCardStyles(t: PdfxTheme) {
35  const { spacing, borderRadius, fontWeights } = t.primitives;
36  return StyleSheet.create({
37    card: {
38      borderWidth: 1,
39      borderColor: t.colors.border,
40      borderStyle: 'solid',
41      borderRadius: borderRadius.sm,
42      backgroundColor: t.colors.background,
43      marginBottom: t.spacing.componentGap,
44    },
45    cardBordered: { borderWidth: 2 },
46    cardMuted: { backgroundColor: t.colors.muted },
47    paddingSm: { padding: spacing[2] },
48    paddingMd: { padding: spacing[3] },
49    paddingLg: { padding: spacing[4] },
50    title: {
51      fontFamily: t.typography.heading.fontFamily,
52      fontSize: t.primitives.typography.base,
53      lineHeight: t.typography.heading.lineHeight,
54      color: t.colors.foreground,
55      fontWeight: fontWeights.semibold,
56      marginBottom: spacing[2],
57      paddingBottom: spacing[1] + 2,
58      borderBottomWidth: 1,
59      borderBottomColor: t.colors.border,
60      borderBottomStyle: 'solid',
61    },
62    body: {
63      fontFamily: t.typography.body.fontFamily,
64      fontSize: t.typography.body.fontSize,
65      lineHeight: t.typography.body.lineHeight,
66      color: t.colors.foreground,
67    },
68  });
69}
70 
71export function PdfCard({
72  title,
73  children,
74  variant = 'default',
75  padding = 'md',
76  wrap = false,
77  style,
78}: PdfCardProps) {
79  const theme = usePdfxTheme();
80  const styles = useSafeMemo(() => createCardStyles(theme), [theme]);
81  const paddingMap = { sm: styles.paddingSm, md: styles.paddingMd, lg: styles.paddingLg };
82  const cardStyles: Style[] = [styles.card];
83// … truncated