5b:T64e7,

import type { ReactNode } from "react";

import {
  Text as PDFText,
  StyleSheet,
  View,
} from "@/lib/pdfcn-primitives";
import type { Style } from "@/lib/pdfcn-primitives";
import {
  usePdfcnTheme,
  useSafeMemo,
} from "@/lib/theme-provider";
import type { PDFComponentProps, PdfcnTheme } from "@/components/pdf/themes";

export type CardVariant = "default" | "bordered" | "muted";

/**
 * Bordered content card with optional title and padding presets.
 * Props - `title` | `children` | `variant` | `padding` | `wrap` | `style`
 * @see {@link PdfCardProps}
 */
export interface PdfCardProps extends Omit<PDFComponentProps, "children"> {
  title?: string;
  children?: ReactNode;
  /**
   * @default 'default'
   */
  variant?: CardVariant;
  /**
   * @default 'md'
   */
  padding?: "sm" | "md" | "lg";
  /**
   * When false, the card will not split across PDF pages.
   * @default false
   */
  wrap?: boolean;
}

const createCardStyles = (t: PdfcnTheme) => {
  const { spacing, borderRadius, fontWeights } = t.primitives;
  return StyleSheet.create({
    body: {
      color: t.colors.foreground,
      fontFamily: t.typography.body.fontFamily,
      fontSize: t.typography.body.fontSize,
      lineHeight: t.typography.body.lineHeight,
    },
    card: {
      backgroundColor: t.colors.background,
      borderColor: t.colors.border,
      borderRadius: borderRadius.sm,
      borderStyle: "solid",
      borderWidth: 1,
      marginBottom: t.spacing.componentGap,
    },
    cardBordered: { borderWidth: 2 },
    cardMuted: { backgroundColor: t.colors.muted },
    paddingLg: { padding: spacing[4] },
    paddingMd: { padding: spacing[3] },
    paddingSm: { padding: spacing[2] },
    title: {
      borderBottomColor: t.colors.border,
      borderBottomStyle: "solid",
      borderBottomWidth: 1,
      color: t.colors.foreground,
      fontFamily: t.typography.heading.fontFamily,
      fontSize: t.primitives.typography.base,
      fontWeight: fontWeights.semibold,
      lineHeight: t.typography.heading.lineHeight,
      marginBottom: spacing[2],
      paddingBottom: spacing[1] + 2,
    },
  });
};

export const PdfCard = ({
  title,
  children,
  variant = "default",
  padding = "md",
  wrap = false,
  style,
}: PdfCardProps) => {
  const theme = usePdfcnTheme();
  const styles = useSafeMemo(() => createCardStyles(theme), [theme]);
  const paddingMap = {
    lg: styles.paddingLg,
    md: styles.paddingMd,
    sm: styles.paddingSm,
  };
  const cardStyles: Style[] = [styles.card];
  if (variant === "bordered") {
    cardStyles.push(styles.cardBordered);
  }
  if (variant === "muted") {
    cardStyles.push(styles.cardMuted);
  }
  cardStyles.push(paddingMap[padding]);
  if (style) {
    cardStyles.push(style);
  }
  return (
    <View wrap={wrap} style={cardStyles as never}>
      {title ? <PDFText style={styles.title}>{title}</PDFText> : null}
      {typeof children === "string" ? (
        <PDFText style={styles.body}>{children}</PDFText>
      ) : (
        children
      )}
    </View>
  );
};

53:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$5b"}}] 5c:T44a5,

import type { Style } from "@formepdf/react";
import { isValidElement } from "react";
import type { DependencyList, ReactNode } from "react";

import { theme as defaultTheme } from "@/lib/pdfcn-theme";

export type PdfcnTheme = typeof defaultTheme;

let serializedTheme = defaultTheme;

export interface PdfcnThemeProviderProps {
  theme?: PdfcnTheme;
  children: ReactNode;
}

type PdfStyleInput = Style | PdfStyleInput[] | false | null | undefined;

const mergeStyleInput = (target: Style, input: PdfStyleInput): void => {
  if (Array.isArray(input)) {
    for (const item of input) {
      mergeStyleInput(target, item);
    }
  } else if (input) {
    Object.assign(target, input);
  }
};

export const mergePdfStyles = (...inputs: PdfStyleInput[]): Style => {
  const merged: Style = {};
  for (const input of inputs) {
    mergeStyleInput(merged, input);
  }
  return merged;
};

const renderForSerializer = (
  children: ReactNode,
  theme: PdfcnTheme
): ReactNode => {
  serializedTheme = theme;

  if (!isValidElement(children) || typeof children.type !== "function") {
    return children;
  }
  if ((children.type as { __formeType?: string }).__formeType === "Document") {
    return children;
  }

  return (children.type as (props: unknown) => ReactNode)(children.props);
};

export const PdfcnThemeProvider = ({
  theme,
  children,
}: PdfcnThemeProviderProps) =>
  renderForSerializer(children, theme ?? defaultTheme);

export const usePdfcnTheme = (): PdfcnTheme => serializedTheme;

export const useSafeMemo = <T,>(factory: () => T, _deps: DependencyList): T =>
  factory();

56:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$5c"}}]

Prop	Type	Default
`title`	`string`	-
`children`	`ReactNode`	-
`variant`	`'default' \| 'bordered' \| 'muted'`	`'default'`
`padding`	`'sm' \| 'md' \| 'lg'`	`'md'`
`wrap`	`boolean`	`false`

Card

Installation

Usage

API Reference

PdfCard