Alert

1import { Circle, Line, Text as PDFText, Path, StyleSheet, Svg, 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 AlertVariant = 'info' | 'success' | 'warning' | 'error';
8 
9/**
10 * Alert box with severity variants for info, success, warning, and error states.
11 * Props - `variant` | `title` | `children` | `showIcon` | `showBorder` | `style`
12 * @see {@link PdfAlertProps}
13 */
14export interface PdfAlertProps {
15  /** Custom styles to merge with component defaults */
16  style?: Style;
17  /**
18   * @default 'info'
19   */
20  variant?: AlertVariant;
21  title?: string;
22  children?: ReactNode;
23  /**
24   * @default true
25   */
26  showIcon?: boolean;
27  /**
28   * @default true
29   */
30  showBorder?: boolean;
31}
32 
33/** Stroke width for all alert SVG icons (SVG user units). */
34const ICON_STROKE_WIDTH = 1.5;
35 
36const SvgWrap = ({ children }: { children: ReactNode }) => (
37  <Svg width={16} height={16} viewBox="0 0 16 16">
38    {children}
39  </Svg>
40);
41 
42const ICON_MAP = {
43  info: ({ color }: { color: string }) => (
44    <SvgWrap>
45      <Circle cx={8} cy={8} r={7} fill="none" stroke={color} strokeWidth={ICON_STROKE_WIDTH} />
46      <Circle cx={8} cy={4.5} r={1} fill={color} />
47      <Line
48        x1={8}
49        y1={7}
50        x2={8}
51        y2={11.5}
52        stroke={color}
53        strokeWidth={ICON_STROKE_WIDTH}
54        strokeLinecap="round"
55      />
56    </SvgWrap>
57  ),
58  success: ({ color }: { color: string }) => (
59    <SvgWrap>
60      <Circle cx={8} cy={8} r={7} fill="none" stroke={color} strokeWidth={ICON_STROKE_WIDTH} />
61      <Path
62        d="M5 8 L7 10 L11 6"
63        fill="none"
64        stroke={color}
65        strokeWidth={ICON_STROKE_WIDTH}
66        strokeLinecap="round"
67        strokeLinejoin="round"
68      />
69    </SvgWrap>
70  ),
71  warning: ({ color }: { color: string }) => (
72    <SvgWrap>
73      <Path
74        d="M8 1.5 L15 14.5 L1 14.5 Z"
75        fill="none"
76        stroke={color}
77        strokeWidth={ICON_STROKE_WIDTH}
78        strokeLinejoin="round"
79      />
80      <Line
81        x1={8}
82        y1={6}
83        x2={8}
84        y2={10}
85        stroke={color}
86        strokeWidth={ICON_STROKE_WIDTH}
87        strokeLinecap="round"
88      />
89      <Circle cx={8} cy={12.5} r={0.75} fill={color} />
90    </SvgWrap>
91  ),
92  error: ({ color }: { color: string }) => (
93    <SvgWrap>
94// … truncated