Stack

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 StackGap = 'none' | 'sm' | 'md' | 'lg' | 'xl';
8export type StackDirection = 'vertical' | 'horizontal';
9export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
10export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
11 
12/**
13 * Flex layout container with gap and direction control.
14 * Props - `gap` | `direction` | `align` | `justify` | `wrap` | `noWrap` | `children` | `style`
15 * @see {@link StackProps}
16 */
17export interface StackProps {
18  /** Custom styles to merge with component defaults */
19  style?: Style;
20  /** Content to render */
21  children: React.ReactNode;
22  /**
23   * @default 'md'
24   */
25  gap?: StackGap;
26  /**
27   * @default 'vertical'
28   */
29  direction?: StackDirection;
30  /**
31   * @default 'start'
32   */
33  align?: StackAlign;
34  /**
35   * @default 'start'
36   */
37  justify?: StackJustify;
38  /**
39   * @default false
40   */
41  wrap?: boolean;
42  /**
43   * @default false
44   */
45  noWrap?: boolean;
46}
47 
48function createStackStyles(t: PdfxTheme) {
49  const { spacing } = t.primitives;
50  return StyleSheet.create({
51    vertical: { flexDirection: 'column' },
52    horizontal: { flexDirection: 'row' },
53    gapNone: { gap: spacing[0] },
54    gapSm: { gap: spacing[2] },
55    gapMd: { gap: spacing[4] },
56    gapLg: { gap: spacing[6] },
57    gapXl: { gap: spacing[8] },
58    alignStart: { alignItems: 'flex-start' },
59    alignCenter: { alignItems: 'center' },
60    alignEnd: { alignItems: 'flex-end' },
61    alignStretch: { alignItems: 'stretch' },
62    justifyStart: { justifyContent: 'flex-start' },
63    justifyCenter: { justifyContent: 'center' },
64    justifyEnd: { justifyContent: 'flex-end' },
65    justifyBetween: { justifyContent: 'space-between' },
66    justifyAround: { justifyContent: 'space-around' },
67    wrap: { flexWrap: 'wrap' },
68  });
69}
70 
71export function Stack({
72  gap = 'md',
73  direction = 'vertical',
74  align,
75  justify,
76  wrap,
77  noWrap,
78  children,
79  style,
80}: StackProps) {
81  const theme = usePdfxTheme();
82  const styles = useSafeMemo(() => createStackStyles(theme), [theme]);
83  const gapMap = {
84    none: styles.gapNone,
85    sm: styles.gapSm,
86    md: styles.gapMd,
87    lg: styles.gapLg,
88    xl: styles.gapXl,
89  };
90  const alignMap = {
91    start: styles.alignStart,
92    center: styles.alignCenter,
93// … truncated