Divider

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 DividerVariant = 'solid' | 'dashed' | 'dotted';
7export type DividerThickness = 'thin' | 'medium' | 'thick';
8export type DividerSpacing = 'none' | 'sm' | 'md' | 'lg';
9 
10/**
11 * Horizontal rule with optional label, style variants, and spacing presets.
12 * Props - `spacing` | `variant` | `color` | `thickness` | `label` | `width` | `style`
13 * @see {@link DividerProps}
14 */
15export interface DividerProps {
16  /** Custom styles to merge with component defaults */
17  style?: Style;
18  /**
19   * @default 'md'
20   */
21  spacing?: DividerSpacing;
22  /**
23   * @default 'solid'
24   */
25  variant?: DividerVariant;
26  color?: string;
27  /**
28   * @default 'thin'
29   */
30  thickness?: DividerThickness;
31  label?: string;
32  width?: string | number;
33}
34 
35const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
36function resolveColor(value: string, colors: Record<string, string>): string {
37  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
38}
39function createDividerStyles(t: PdfxTheme) {
40  const { spacing, fontWeights } = t.primitives;
41  return StyleSheet.create({
42    base: { borderBottomColor: t.colors.border, borderBottomStyle: 'solid' },
43    spacingNone: { marginVertical: spacing[0] },
44    spacingSm: { marginVertical: t.spacing.paragraphGap },
45    spacingMd: { marginVertical: t.spacing.componentGap },
46    spacingLg: { marginVertical: t.spacing.sectionGap },
47    solid: { borderBottomStyle: 'solid' },
48    dashed: { borderBottomStyle: 'dashed' },
49    dotted: { borderBottomStyle: 'dotted' },
50    thin: { borderBottomWidth: spacing[0.5] },
51    medium: { borderBottomWidth: spacing[1] },
52    thick: { borderBottomWidth: spacing[2] },
53    labelContainer: { flexDirection: 'row', alignItems: 'center' },
54    labelLine: { flex: 1, borderBottomColor: t.colors.border, borderBottomStyle: 'solid' },
55    labelText: {
56      fontFamily: t.typography.body.fontFamily,
57      fontSize: t.primitives.typography.xs,
58      color: t.colors.mutedForeground,
59      fontWeight: fontWeights.medium,
60      paddingHorizontal: spacing[3],
61      textTransform: 'uppercase',
62      letterSpacing: t.primitives.letterSpacing.wider * 10,
63// … truncated