56:Te4b3,

import { Document, Page, StyleSheet, View } from "@formepdf/react";

import {
  KeyValue,
  PageFooter,
  PageHeader,
  PdfImage,
  PdfcnThemeProvider,
  Section,
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableRow,
  Text,
  usePdfcnTheme,
} from "@/registry/bases/forme/components";
import type { PdfcnTheme } from "@/components/pdf/themes";

import type { InvoiceClassicData } from "./invoice-classic.types";

// Sample data — replace with your own props or data source
const sampleData: InvoiceClassicData = {
  billTo: {
    address: "456 Client Ave, Suite 2",
    email: "contact@clientcorp.com",
    name: "Client Corp.",
    phone: "+1 (555) 123-4567",
  },
  companyAddress: "Nagpur, IN",
  companyEmail: "hello@pdfcn.app",
  companyName: "pdfcn",
  dueDate: "March 17, 2026",
  invoiceDate: "February 17, 2026",
  invoiceNumber: "INV-2026-001",
  items: [
    { description: "Web Development", quantity: 1, unitPrice: 12_500 },
    { description: "UI/UX Design", quantity: 1, unitPrice: 8750 },
    { description: "Consulting", quantity: 10, unitPrice: 1500 },
  ],
  logo: "/favicon.png",
  notes: "Thank you for your business!",
  paymentTerms: {
    dueDate: "March 17, 2026",
    gst: "GSTIN 123456789",
    method: "UPI / Card / Bank Transfer",
  },
  subtitle: "Innovative PDF Solutions",
  summary: {
    subtotal: 36_250,
    tax: 2537.5,
    total: 38_787.5,
  },
};

const InvoiceClassicContent = ({ data }: { data: InvoiceClassicData }) => {
  const theme = usePdfcnTheme();

  const styles = StyleSheet.create({
    page: {
      backgroundColor: theme.colors.background,
    },
  });

  return (
    <Document title={`Invoice ${data.invoiceNumber}`}>
      <Page size="A4" margin={{ bottom: 25, left: 56, right: 56, top: 56 }}>
        <PageFooter
          leftText={data.notes}
          rightText="Page 1 of 1"
          sticky
          pagePadding={25}
        />
        <View style={styles.page as never}>
          <PageHeader
            variant="logo-left"
            logo={
              <PdfImage
                src={data.logo ?? "/favicon.png"}
                style={{ margin: 0 }}
              />
            }
            title={data.companyName}
            subtitle={data.subtitle}
            rightText={data.invoiceNumber}
            rightSubText={`Due: ${data.dueDate}`}
            style={{ marginBottom: 0 }}
          />
          <Section noWrap style={{ flexDirection: "row" }}>
            <View style={{ flex: 1, paddingRight: 15 }}>
              <Text
                style={{ fontSize: 9, fontWeight: "bold", marginBottom: 2 }}
                color="mutedForeground"
                transform="uppercase"
                noMargin
              >
                From
              </Text>
              <Text noMargin variant="xs">
                {data.companyName}
              </Text>
              <Text noMargin variant="xs">
                {data.companyAddress}
              </Text>
              <Text noMargin variant="xs">
                {data.companyEmail}
              </Text>
            </View>
            <View style={{ flex: 1, paddingRight: 15 }}>
              <Text
                style={{ fontSize: 9, fontWeight: "bold", marginBottom: 2 }}
                color="mutedForeground"
                transform="uppercase"
                noMargin
              >
                Bill To
              </Text>
              <Text noMargin variant="xs">
                {data.billTo.name}
              </Text>
              <Text noMargin variant="xs">
                {data.billTo.address}
              </Text>
              <Text noMargin variant="xs">
                {data.billTo.email}
              </Text>
            </View>
            <View style={{ flex: 1, paddingRight: 15 }}>
              <Text
                style={{ fontSize: 9, fontWeight: "bold", marginBottom: 2 }}
                color="mutedForeground"
                transform="uppercase"
                noMargin
              >
                Payment Terms
              </Text>
              <Text noMargin variant="xs">
                {data.paymentTerms.method}
              </Text>
              <Text noMargin variant="xs">
                {data.paymentTerms.gst}
              </Text>
              <Text noMargin variant="xs">
                {data.paymentTerms.dueDate}
              </Text>
            </View>
          </Section>
          <Table variant="grid" zebraStripe>
            <TableHeader>
              <TableRow header>
                <TableCell>Description</TableCell>
                <TableCell align="center">QTY</TableCell>
                <TableCell align="center">Rate</TableCell>
                <TableCell align="right">Total</TableCell>
              </TableRow>
            </TableHeader>
            <TableBody>
              {data.items.map((item, index) => (
                // biome-ignore lint/suspicious/noArrayIndexKey: invoice items have no stable id
                <TableRow key={index}>
                  <TableCell>{item.description}</TableCell>
                  <TableCell align="center">{`${item.quantity}`}</TableCell>
                  <TableCell align="center">{`$${item.unitPrice}`}</TableCell>
                  <TableCell align="right">{`$${(item.quantity * item.unitPrice).toFixed(2)}`}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <Section
            noWrap
            style={{
              flexDirection: "row",
              justifyContent: "flex-end",
              marginTop: 16,
            }}
          >
            <View style={{ width: 220 }}>
              <KeyValue
                size="sm"
                dividerThickness={1}
                items={[
                  {
                    key: "Subtotal",
                    value: `$${data.summary.subtotal.toFixed(2)}`,
                  },
                  { key: "Tax", value: `$${data.summary.tax.toFixed(2)}` },
                  {
                    key: "Total",
                    keyStyle: { fontSize: 12, fontWeight: "bold" },
                    value: `$${data.summary.total.toFixed(2)}`,
                    valueStyle: { fontSize: 12, fontWeight: "bold" },
                  },
                ]}
                divided
              />
            </View>
          </Section>
        </View>
      </Page>
    </Document>
  );
};

export const InvoiceClassicDocument = ({
  theme,
  data = sampleData,
}: {
  theme?: PdfcnTheme;
  data?: InvoiceClassicData;
}) => (
  <PdfcnThemeProvider theme={theme}>
    <InvoiceClassicContent data={data} />
  </PdfcnThemeProvider>
);

4e:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$56"}}] 57: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();

51:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$57"}}]

Invoice Classic

Installation

Usage