Badge

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 BadgeVariant =
7  | 'default'
8  | 'primary'
9  | 'success'
10  | 'warning'
11  | 'destructive'
12  | 'info'
13  | 'outline';
14export type BadgeSize = 'sm' | 'md' | 'lg';
15 
16/**
17 * Inline label for status, tags, or categories.
18 *
19 * Accepts text via either `label` prop or `children` (string). `label` takes
20 * precedence when both are provided. The children pattern (`<Badge>text</Badge>`)
21 * is supported for compatibility with common React idioms, but note that
22 * `@react-pdf/renderer` doesn't support JSX children the way HTML does — only
23 * string children are accepted.
24 *
25 * Props - `label` | `children` | `variant` | `size` | `background` | `color` | `style`
26 * @see {@link BadgeProps}
27 */
28export interface BadgeProps {
29  /** Custom styles to merge with component defaults */
30  style?: Style;
31  /** Text to display. Takes precedence over children when both are provided. */
32  label?: string;
33  /** String children as an alternative to the label prop. */
34  children?: string;
35  /**
36   * @default 'default'
37   */
38  variant?: BadgeVariant;
39  /**
40   * @default 'md'
41   */
42  size?: BadgeSize;
43  background?: string;
44  color?: string;
45}
46 
47const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
48function resolveColor(value: string, colors: Record<string, string>): string {
49  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
50}
51function createBadgeStyles(t: PdfxTheme) {
52  const { spacing, borderRadius, fontWeights } = t.primitives;
53  const c = t.colors;
54  const textBase = {
55    fontFamily: t.typography.body.fontFamily,
56    fontWeight: fontWeights.semibold,
57    letterSpacing: 0.3,
58  };
59  const variantBox = (borderColor: string, bgColor: string = c.muted) => ({
60    backgroundColor: bgColor,
61    borderWidth: spacing[0.5],
62    borderColor,
63    borderStyle: 'solid' as const,
64  });
65  const sheet = StyleSheet.create({
66    containerBase: {
67      borderRadius: borderRadius.full,
68      alignSelf: 'flex-start' as const,
69      flexDirection: 'row' as const,
70      alignItems: 'center' as const,
71    },
72    variantDefault: variantBox(c.border),
73    variantPrimary: variantBox(c.primary, c.primary),
74// … truncated