Section

1import { StyleSheet, View } 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 SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl';
8export type SectionPadding = 'none' | 'sm' | 'md' | 'lg';
9export type SectionVariant = 'default' | 'callout' | 'highlight' | 'card';
10 
11/**
12 * Layout container with spacing, padding, and visual style variants.
13 * Props - `spacing` | `padding` | `background` | `border` | `variant` | `accentColor` | `noWrap` | `children` | `style`
14 * @see {@link SectionProps}
15 */
16export interface SectionProps {
17  /** Custom styles to merge with component defaults */
18  style?: Style;
19  /** Content to render */
20  children: React.ReactNode;
21  /**
22   * @default 'md'
23   */
24  spacing?: SectionSpacing;
25  padding?: SectionPadding;
26  background?: string;
27  /**
28   * @default false
29   */
30  border?: boolean;
31  /**
32   * @default 'default'
33   */
34  variant?: SectionVariant;
35  accentColor?: string;
36  /**
37   * @default false
38   */
39  noWrap?: boolean;
40}
41 
42const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
43function resolveColor(value: string, colors: Record<string, string>): string {
44  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
45}
46function createSectionStyles(t: PdfxTheme) {
47  const { spacing, borderRadius } = t.primitives;
48  return StyleSheet.create({
49    base: { flexDirection: 'column' },
50    spacingNone: { marginVertical: spacing[0] },
51    spacingSm: { marginVertical: spacing[4] },
52    spacingMd: { marginVertical: t.spacing.sectionGap },
53    spacingLg: { marginVertical: spacing[8] },
54    spacingXl: { marginVertical: spacing[12] },
55    paddingNone: { padding: spacing[0] },
56    paddingSm: { padding: spacing[3] },
57    paddingMd: { padding: spacing[4] },
58    paddingLg: { padding: spacing[6] },
59    border: {
60      borderWidth: spacing[0.5],
61      borderColor: t.colors.border,
62      borderStyle: 'solid',
63      borderRadius: borderRadius.md,
64    },
65    callout: {
66      borderLeftWidth: spacing[1],
67      borderLeftColor: t.colors.primary,
68      borderLeftStyle: 'solid',
69      paddingLeft: spacing[4],
70      paddingVertical: spacing[2],
71    },
72    highlight: {
73      backgroundColor: t.colors.muted,
74// … truncated