@formepdf/resend 0.5.0

package/README.md

@@ -0,0 +1,122 @@
+# @formepdf/resend
+
+Render a PDF and email it in one call. Uses [Forme](https://github.com/formepdf/forme) for PDF generation and [Resend](https://resend.com) for delivery.
+
+## Install
+
+```bash
+npm install @formepdf/resend resend @formepdf/react @formepdf/core
+```
+
+## Quick Start
+
+```typescript
+import { sendPdf } from '@formepdf/resend';
+
+await sendPdf({
+  resendApiKey: process.env.RESEND_API_KEY,
+  from: 'Acme Corp <billing@acme.com>',
+  to: 'customer@email.com',
+  subject: 'Invoice #001',
+  template: 'invoice',
+  data: {
+    invoiceNumber: 'INV-001',
+    date: 'February 25, 2026',
+    dueDate: 'March 27, 2026',
+    company: { name: 'Acme Corp', initials: 'AC', address: '123 Main St', cityStateZip: 'San Francisco, CA 94105', email: 'billing@acme.com' },
+    billTo: { name: 'Jane Smith', company: 'Smith Co', address: '456 Oak Ave', cityStateZip: 'Portland, OR 97201', email: 'jane@smith.co' },
+    shipTo: { name: 'Jane Smith', address: '456 Oak Ave', cityStateZip: 'Portland, OR 97201' },
+    items: [
+      { description: 'Consulting', quantity: 10, unitPrice: 150 },
+    ],
+    taxRate: 0.08,
+    paymentTerms: 'Net 30',
+  },
+});
+```
+
+One call. PDF rendered, email sent, invoice attached.
+
+## Custom Templates
+
+```typescript
+import { sendPdf } from '@formepdf/resend';
+import { MyTemplate } from './my-template';
+
+await sendPdf({
+  resendApiKey: process.env.RESEND_API_KEY,
+  from: 'billing@acme.com',
+  to: 'customer@email.com',
+  subject: 'Your document',
+  render: () => MyTemplate({ name: 'Jane' }),
+});
+```
+
+## Add PDF to an Existing Resend Call
+
+```typescript
+import { renderAndAttach } from '@formepdf/resend';
+import { Resend } from 'resend';
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+const pdf = await renderAndAttach({ template: 'invoice', data: invoiceData });
+
+await resend.emails.send({
+  from: 'billing@acme.com',
+  to: 'customer@email.com',
+  subject: 'Your invoice',
+  html: '<p>See attached.</p>',
+  attachments: [pdf],
+});
+```
+
+`renderAndAttach` returns `{ filename, content }` which is exactly what Resend's attachment API expects.
+
+## API
+
+### `sendPdf(options)`
+
+Render a PDF and email it. Returns `Promise<{ id: string }>` (Resend's email ID).
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `resendApiKey` | `string` | Yes | Resend API key |
+| `from` | `string` | Yes | Sender address |
+| `to` | `string \| string[]` | Yes | Recipient(s) |
+| `subject` | `string` | Yes | Email subject |
+| `template` | `string` | One of template/render | Built-in template name |
+| `data` | `object` | With template | Data for the template |
+| `render` | `() => ReactElement` | One of template/render | Custom render function |
+| `filename` | `string` | No | PDF filename (default: `{template}.pdf`) |
+| `html` | `string` | No | Email body HTML |
+| `text` | `string` | No | Email body plain text |
+| `react` | `ReactElement` | No | React Email component for email body |
+| `cc` | `string \| string[]` | No | CC recipients |
+| `bcc` | `string \| string[]` | No | BCC recipients |
+| `replyTo` | `string` | No | Reply-to address |
+
+When `html`, `text`, and `react` are all omitted, a default email body is generated based on the template type.
+
+### `renderAndAttach(options)`
+
+Render a PDF and return a Resend-compatible attachment object. Does not send.
+
+### `listTemplates()`
+
+Returns available built-in templates with descriptions.
+
+## Built-in Templates
+
+| Template | Description |
+|----------|-------------|
+| `invoice` | Line items, tax, totals, company/customer info |
+| `receipt` | Payment confirmation, items, total, payment method |
+| `report` | Multi-section document with title, headings, body text |
+| `letter` | Business letter with letterhead, date, recipient, body |
+| `shipping-label` | From/to addresses, 4x6 label format |
+
+## Links
+
+- [Forme](https://github.com/formepdf/forme) -- PDF generation with JSX
+- [Resend](https://resend.com) -- Email for developers
+- [Docs](https://docs.formepdf.com)

package/dist/default-email.d.ts

@@ -0,0 +1,4 @@
+export declare function buildDefaultEmail(template: string | undefined, data: Record<string, any> | undefined): {
+    html: string;
+    text: string;
+};

package/dist/default-email.js

@@ -0,0 +1,49 @@
+export function buildDefaultEmail(template, data) {
+    const d = data || {};
+    if (template === 'invoice') {
+        const customerName = d.customer || 'there';
+        const invoiceNum = d.invoiceNumber || '';
+        const amount = d.total || '';
+        const date = d.date || '';
+        const company = d.company || '';
+        const lines = [
+            `Hi ${customerName},`,
+            '',
+            'Please find your invoice attached.',
+            '',
+            ...(invoiceNum ? [`Invoice: #${invoiceNum}`] : []),
+            ...(amount ? [`Amount: ${amount}`] : []),
+            ...(date ? [`Date: ${date}`] : []),
+            '',
+            'Best regards,',
+            company,
+        ];
+        const text = lines.join('\n');
+        const html = lines.map(l => l === '' ? '<br>' : `<p>${l}</p>`).join('\n');
+        return { html, text };
+    }
+    if (template === 'receipt') {
+        const customerName = d.customer || 'there';
+        const amount = d.total || '';
+        const date = d.date || '';
+        const company = d.company || '';
+        const lines = [
+            `Hi ${customerName},`,
+            '',
+            'Thank you for your payment. Your receipt is attached.',
+            '',
+            ...(amount ? [`Amount: ${amount}`] : []),
+            ...(date ? [`Date: ${date}`] : []),
+            '',
+            'Best regards,',
+            company,
+        ];
+        const text = lines.join('\n');
+        const html = lines.map(l => l === '' ? '<br>' : `<p>${l}</p>`).join('\n');
+        return { html, text };
+    }
+    return {
+        html: '<p>Your document is attached.</p>',
+        text: 'Your document is attached.',
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { sendPdf } from './send-pdf.js';
+export { renderAndAttach } from './render-attach.js';
+export { listTemplates } from './templates/index.js';
+export type { SendPdfOptions, RenderAttachOptions } from './types.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { sendPdf } from './send-pdf.js';
+export { renderAndAttach } from './render-attach.js';
+export { listTemplates } from './templates/index.js';

package/dist/render-attach.d.ts

@@ -0,0 +1,5 @@
+import type { RenderAttachOptions } from './types.js';
+export declare function renderAndAttach(options: RenderAttachOptions): Promise<{
+    filename: string;
+    content: Buffer<ArrayBuffer>;
+}>;

package/dist/render-attach.js

@@ -0,0 +1,24 @@
+import { renderDocument } from '@formepdf/core';
+import { getTemplate } from './templates/index.js';
+export async function renderAndAttach(options) {
+    const { template, data, render, filename } = options;
+    let element;
+    if (render) {
+        element = render();
+    }
+    else if (template) {
+        const templateFn = getTemplate(template);
+        if (!templateFn) {
+            throw new Error(`Unknown template: "${template}".`);
+        }
+        element = templateFn(data || {});
+    }
+    else {
+        throw new Error('Either "template" or "render" must be provided.');
+    }
+    const pdfBytes = await renderDocument(element);
+    return {
+        filename: filename || `${template || 'document'}.pdf`,
+        content: Buffer.from(pdfBytes),
+    };
+}

package/dist/send-pdf.d.ts

@@ -0,0 +1,4 @@
+import type { SendPdfOptions } from './types.js';
+export declare function sendPdf(options: SendPdfOptions): Promise<{
+    id: string;
+}>;

package/dist/send-pdf.js

@@ -0,0 +1,62 @@
+import { Resend } from 'resend';
+import { renderDocument } from '@formepdf/core';
+import { getTemplate } from './templates/index.js';
+import { buildDefaultEmail } from './default-email.js';
+export async function sendPdf(options) {
+    const { resendApiKey, from, to, subject, template, data, render, filename, html, text, react, cc, bcc, replyTo, tags, headers, } = options;
+    let element;
+    if (render) {
+        element = render();
+    }
+    else if (template) {
+        const templateFn = getTemplate(template);
+        if (!templateFn) {
+            throw new Error(`Unknown template: "${template}". Use listTemplates() to see available templates.`);
+        }
+        element = templateFn(data || {});
+    }
+    else {
+        throw new Error('Either "template" or "render" must be provided.');
+    }
+    const pdfBytes = await renderDocument(element);
+    const pdfFilename = filename || `${template || 'document'}.pdf`;
+    const attachment = {
+        filename: pdfFilename,
+        content: Buffer.from(pdfBytes),
+    };
+    let emailHtml = html;
+    let emailText = text;
+    if (!html && !text && !react) {
+        const defaultEmail = buildDefaultEmail(template, data);
+        emailHtml = defaultEmail.html;
+        emailText = defaultEmail.text;
+    }
+    const resend = new Resend(resendApiKey);
+    const emailPayload = {
+        from,
+        to: Array.isArray(to) ? to : [to],
+        subject,
+        attachments: [attachment],
+    };
+    if (react)
+        emailPayload.react = react;
+    if (emailHtml)
+        emailPayload.html = emailHtml;
+    if (emailText)
+        emailPayload.text = emailText;
+    if (cc)
+        emailPayload.cc = Array.isArray(cc) ? cc : [cc];
+    if (bcc)
+        emailPayload.bcc = Array.isArray(bcc) ? bcc : [bcc];
+    if (replyTo)
+        emailPayload.replyTo = replyTo;
+    if (tags)
+        emailPayload.tags = tags;
+    if (headers)
+        emailPayload.headers = headers;
+    const { data: result, error } = await resend.emails.send(emailPayload);
+    if (error) {
+        throw new Error(`Resend error: ${error.message}`);
+    }
+    return { id: result.id };
+}

package/dist/templates/index.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export declare function getTemplate(name: string): ((data: any) => ReactElement) | null;
+export declare function listTemplates(): {
+    name: string;
+}[];

package/dist/templates/index.js

@@ -0,0 +1,18 @@
+import Invoice from './invoice.js';
+import Receipt from './receipt.js';
+import Report from './report.js';
+import ShippingLabel from './shipping-label.js';
+import Letter from './letter.js';
+const templates = {
+    invoice: Invoice,
+    receipt: Receipt,
+    report: Report,
+    'shipping-label': ShippingLabel,
+    letter: Letter,
+};
+export function getTemplate(name) {
+    return templates[name] || null;
+}
+export function listTemplates() {
+    return Object.keys(templates).map(name => ({ name }));
+}

package/dist/templates/invoice.d.ts

@@ -0,0 +1 @@
+export default function Invoice(data: any): import("react/jsx-runtime").JSX.Element;

package/dist/templates/invoice.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, View, Text, Table, Row, Cell, Fixed } from '@formepdf/react';
+export default function Invoice(data) {
+    const items = data.items || [];
+    const subtotal = items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0);
+    const tax = subtotal * (data.taxRate || 0);
+    const total = subtotal + tax;
+    return (_jsx(Document, { title: `Invoice ${data.invoiceNumber}`, author: data.company.name, children: _jsxs(Page, { size: "Letter", margin: 48, children: [_jsx(Fixed, { position: "footer", children: _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTopWidth: 1, borderColor: '#e2e8f0' }, children: [_jsx(Text, { style: { fontSize: 8, color: '#94a3b8' }, children: data.company.name }), _jsxs(Text, { style: { fontSize: 8, color: '#94a3b8' }, children: ["Page ", '{{pageNumber}}', " of ", '{{totalPages}}'] })] }) }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 32 }, children: [_jsxs(View, { children: [_jsx(View, { style: { width: 48, height: 48, backgroundColor: '#2563eb', borderRadius: 8, marginBottom: 12, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: 18, fontWeight: 700, color: '#ffffff', textAlign: 'center', lineHeight: 1.2 }, children: data.company.initials }) }), _jsx(Text, { style: { fontSize: 16, fontWeight: 700, color: '#1e293b' }, children: data.company.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 4 }, children: data.company.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.company.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.company.email })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [_jsx(Text, { style: { fontSize: 32, fontWeight: 700, color: '#2563eb' }, children: "INVOICE" }), _jsxs(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 8 }, children: ["Invoice No: ", data.invoiceNumber] }), _jsxs(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: ["Date: ", data.date] }), _jsxs(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: ["Due: ", data.dueDate] })] })] }), _jsxs(View, { style: { flexDirection: 'row', gap: 32, marginBottom: 24 }, children: [_jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#2563eb', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "Bill To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#1e293b' }, children: data.billTo.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.company }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.email })] }), _jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#2563eb', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "Ship To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#1e293b' }, children: data.shipTo.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.shipTo.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.shipTo.cityStateZip })] })] }), _jsxs(Table, { columns: [
+                        { width: { fraction: 0.45 } },
+                        { width: { fraction: 0.15 } },
+                        { width: { fraction: 0.2 } },
+                        { width: { fraction: 0.2 } }
+                    ], children: [_jsxs(Row, { header: true, style: { backgroundColor: '#2563eb' }, children: [_jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff' }, children: "Description" }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'center' }, children: "Qty" }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'right' }, children: "Unit Price" }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'right' }, children: "Amount" }) })] }), items.map((item, i) => (_jsxs(Row, { style: { backgroundColor: i % 2 === 0 ? '#ffffff' : '#f8fafc' }, children: [_jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, color: '#1e293b' }, children: item.description }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, color: '#475569', textAlign: 'center' }, children: item.quantity }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsxs(Text, { style: { fontSize: 9, color: '#475569', textAlign: 'right' }, children: ["$", item.unitPrice.toFixed(2)] }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsxs(Text, { style: { fontSize: 9, color: '#1e293b', textAlign: 'right' }, children: ["$", (item.quantity * item.unitPrice).toFixed(2)] }) })] }, i)))] }), _jsx(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 16 }, children: _jsxs(View, { style: { width: 200 }, children: [_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 8 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Subtotal" }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", subtotal.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 8 }, children: [_jsxs(Text, { style: { fontSize: 9, color: '#64748b' }, children: ["Tax (", (data.taxRate * 100).toFixed(0), "%)"] }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", tax.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 12, backgroundColor: '#2563eb', borderRadius: 4, marginTop: 4 }, children: [_jsx(Text, { style: { fontSize: 11, fontWeight: 700, color: '#ffffff' }, children: "Total Due" }), _jsxs(Text, { style: { fontSize: 11, fontWeight: 700, color: '#ffffff' }, children: ["$", total.toFixed(2)] })] })] }) }), _jsxs(View, { style: { marginTop: 32, padding: 16, backgroundColor: '#f8fafc', borderRadius: 4 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#1e293b', marginBottom: 8 }, children: "Payment Terms" }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.paymentTerms })] }), data.notes && (_jsxs(View, { style: { marginTop: 16 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#1e293b', marginBottom: 4 }, children: "Notes" }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.notes })] }))] }) }));
+}

package/dist/templates/letter.d.ts

@@ -0,0 +1 @@
+export default function Letter(data: any): import("react/jsx-runtime").JSX.Element;

package/dist/templates/letter.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, View, Text } from '@formepdf/react';
+export default function Letter(data) {
+    return (_jsx(Document, { title: `Letter to ${data.recipient.name}`, author: data.sender.name, children: _jsxs(Page, { size: "Letter", margin: { top: 72, right: 72, bottom: 72, left: 72 }, children: [_jsxs(View, { style: { marginBottom: 32 }, children: [_jsx(Text, { style: { fontSize: 16, fontWeight: 700, color: '#1e293b' }, children: data.sender.company }), _jsx(View, { style: { borderTopWidth: 2, borderColor: '#2563eb', marginTop: 8, marginBottom: 12 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsxs(View, { children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.sender.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.sender.cityStateZip })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [data.sender.phone && (_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.sender.phone })), data.sender.email && (_jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.sender.email }))] })] })] }), _jsx(Text, { style: { fontSize: 10, color: '#1e293b', marginBottom: 24 }, children: data.date }), _jsxs(View, { style: { marginBottom: 24 }, children: [_jsx(Text, { style: { fontSize: 10, color: '#1e293b' }, children: data.recipient.name }), data.recipient.title && (_jsx(Text, { style: { fontSize: 10, color: '#1e293b', marginTop: 2 }, children: data.recipient.title })), data.recipient.company && (_jsx(Text, { style: { fontSize: 10, color: '#1e293b', marginTop: 2 }, children: data.recipient.company })), _jsx(Text, { style: { fontSize: 10, color: '#1e293b', marginTop: 2 }, children: data.recipient.address }), _jsx(Text, { style: { fontSize: 10, color: '#1e293b', marginTop: 2 }, children: data.recipient.cityStateZip })] }), _jsx(Text, { style: { fontSize: 10, color: '#1e293b', marginBottom: 16 }, children: data.salutation }), data.body.map((paragraph, i) => (_jsx(Text, { style: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 12 }, children: paragraph }, i))), _jsxs(View, { style: { marginTop: 16 }, children: [_jsx(Text, { style: { fontSize: 10, color: '#1e293b' }, children: data.closing }), _jsx(View, { style: { height: 48 } }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#1e293b' }, children: data.signatureName }), data.signatureTitle && (_jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.signatureTitle }))] })] }) }));
+}

package/dist/templates/receipt.d.ts

@@ -0,0 +1 @@
+export default function Receipt(data: any): import("react/jsx-runtime").JSX.Element;

package/dist/templates/receipt.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, View, Text } from '@formepdf/react';
+export default function Receipt(data) {
+    const items = data.items || [];
+    const subtotal = items.reduce((sum, item) => sum + item.price * (item.quantity || 1), 0);
+    const tax = subtotal * (data.taxRate || 0);
+    const total = subtotal + tax;
+    return (_jsx(Document, { title: `Receipt ${data.receiptNumber}`, author: data.store.name, children: _jsxs(Page, { size: "Letter", margin: { top: 72, right: 120, bottom: 72, left: 120 }, children: [_jsxs(View, { style: { alignItems: 'center', marginBottom: 24 }, children: [_jsx(Text, { style: { fontSize: 20, fontWeight: 700, color: '#1e293b' }, children: data.store.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 4 }, children: data.store.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.store.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.store.phone })] }), _jsx(View, { style: { borderTopWidth: 1, borderColor: '#e2e8f0', marginBottom: 16 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 16 }, children: [_jsxs(Text, { style: { fontSize: 9, color: '#64748b' }, children: ["Receipt #", data.receiptNumber] }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.date })] }), items.map((item, i) => (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 6, paddingBottom: 6 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 8, flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#1e293b' }, children: item.name }), (item.quantity || 1) > 1 && (_jsxs(Text, { style: { fontSize: 9, color: '#94a3b8' }, children: ["x", item.quantity] }))] }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", (item.price * (item.quantity || 1)).toFixed(2)] })] }, i))), _jsx(View, { style: { borderTopWidth: 1, borderColor: '#e2e8f0', marginTop: 12, marginBottom: 12 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 4, paddingBottom: 4 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Subtotal" }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", subtotal.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 4, paddingBottom: 4 }, children: [_jsxs(Text, { style: { fontSize: 9, color: '#64748b' }, children: ["Tax (", (data.taxRate * 100).toFixed(1), "%)"] }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", tax.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 12, paddingBottom: 12, borderTopWidth: 2, borderColor: '#1e293b', marginTop: 4 }, children: [_jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b' }, children: "Total" }), _jsxs(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b' }, children: ["$", total.toFixed(2)] })] }), _jsxs(View, { style: { marginTop: 16, paddingTop: 12, paddingBottom: 12, borderTopWidth: 1, borderColor: '#e2e8f0' }, children: [_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Payment Method" }), _jsx(Text, { style: { fontSize: 9, color: '#1e293b' }, children: data.paymentMethod })] }), data.cardLastFour && (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Card" }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["****", data.cardLastFour] })] }))] }), _jsxs(View, { style: { alignItems: 'center', marginTop: 32 }, children: [_jsx(Text, { style: { fontSize: 10, color: '#64748b' }, children: "Thank you for your purchase!" }), _jsx(Text, { style: { fontSize: 8, color: '#94a3b8', marginTop: 8 }, children: data.store.website })] })] }) }));
+}

package/dist/templates/report.d.ts

@@ -0,0 +1 @@
+export default function Report(data: any): import("react/jsx-runtime").JSX.Element;

package/dist/templates/report.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, View, Text, Svg, Table, Row, Cell, Fixed, PageBreak, StyleSheet } from '@formepdf/react';
+const styles = StyleSheet.create({
+    sectionTitle: { fontSize: 20, fontWeight: 700, color: '#0f172a', marginBottom: 12 },
+    bodyText: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 12 },
+    introText: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 16 },
+    headerFooterText: { fontSize: 8, color: '#94a3b8' },
+    headerBar: { flexDirection: 'row', justifyContent: 'space-between', paddingBottom: 8, borderBottomWidth: 1, borderColor: '#e2e8f0', marginBottom: 16 },
+    footerBar: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTopWidth: 1, borderColor: '#e2e8f0' },
+    tableHeaderCell: { padding: 8 },
+    tableHeaderText: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'right' },
+    tableCell: { padding: 8 },
+    tableCellText: { fontSize: 9, color: '#334155', textAlign: 'right' },
+    chartTitle: { fontSize: 10, fontWeight: 700, color: '#334155', marginBottom: 6 },
+    recCard: { flexDirection: 'row', gap: 24, marginBottom: 16, padding: 16, backgroundColor: '#f8fafc', borderRadius: 4, borderLeftWidth: 3, borderColor: '#0f172a' },
+    recBadge: { width: 24, height: 24, backgroundColor: '#0f172a', borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
+    recBadgeText: { fontSize: 10, fontWeight: 700, color: '#ffffff', lineHeight: 1.2 },
+    recTitle: { fontSize: 11, fontWeight: 700, color: '#0f172a', marginBottom: 4 },
+    recBody: { fontSize: 9, color: '#475569', lineHeight: 1.5 },
+    recLabel: { fontSize: 8, fontWeight: 700, color: '#64748b' },
+    recValue: { fontSize: 8, color: '#334155' },
+});
+// ── Chart SVG generators ─────────────────────────────────────────────
+const CHART_COLORS = ['#3b82f6', '#0f172a', '#64748b', '#94a3b8', '#cbd5e1'];
+function renderBarChart(tableData) {
+    const totals = tableData.map((r) => ({
+        label: r.region,
+        value: parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
+            + parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')),
+    }));
+    const maxVal = Math.max(...totals.map(t => t.value));
+    const w = 230, h = 150;
+    const barAreaTop = 8, barAreaBottom = h - 20;
+    const barAreaH = barAreaBottom - barAreaTop;
+    const barW = Math.min(32, (w - 20) / totals.length - 8);
+    const gap = (w - barW * totals.length) / (totals.length + 1);
+    let svg = '';
+    // Grid lines
+    for (let i = 0; i <= 4; i++) {
+        const y = barAreaTop + (barAreaH / 4) * i;
+        svg += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="#e2e8f0" stroke-width="0.5"/>`;
+    }
+    // Bars and labels
+    totals.forEach((t, i) => {
+        const x = gap + i * (barW + gap);
+        const barH = (t.value / maxVal) * barAreaH;
+        const y = barAreaBottom - barH;
+        svg += `<rect x="${x}" y="${y}" width="${barW}" height="${barH}" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="2"/>`;
+        // Region label below bar
+        const labelX = x + barW / 2;
+        svg += `<rect x="${labelX - 2}" y="${barAreaBottom + 4}" width="4" height="4" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="1"/>`;
+    });
+    return svg;
+}
+/** Approximate a circular arc as cubic bezier segments. */
+function arcPath(cx, cy, r, startAngle, endAngle) {
+    let path = '';
+    const step = Math.PI / 2; // max 90 degrees per segment
+    let a1 = startAngle;
+    while (a1 < endAngle - 0.001) {
+        const a2 = Math.min(a1 + step, endAngle);
+        const alpha = a2 - a1;
+        const k = (4 / 3) * Math.tan(alpha / 4);
+        const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
+        const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
+        const cp1x = x1 - k * r * Math.sin(a1), cp1y = y1 + k * r * Math.cos(a1);
+        const cp2x = x2 + k * r * Math.sin(a2), cp2y = y2 - k * r * Math.cos(a2);
+        if (a1 === startAngle) {
+            path += `M ${f(x1)} ${f(y1)} `;
+        }
+        path += `C ${f(cp1x)} ${f(cp1y)} ${f(cp2x)} ${f(cp2y)} ${f(x2)} ${f(y2)} `;
+        a1 = a2;
+    }
+    return path;
+}
+function f(n) { return n.toFixed(2); }
+function renderDonutChart(tableData) {
+    const totals = tableData.map((r) => ({
+        label: r.region,
+        value: parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
+            + parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')),
+    }));
+    const sum = totals.reduce((s, t) => s + t.value, 0);
+    const cx = 55, cy = 75, r = 48, innerR = 28;
+    let svg = '';
+    let angle = -Math.PI / 2; // start at top
+    totals.forEach((t, i) => {
+        const sliceAngle = (t.value / sum) * Math.PI * 2;
+        if (sliceAngle < 0.01) {
+            angle += sliceAngle;
+            return;
+        }
+        const endAngle = angle + sliceAngle;
+        const ix2 = cx + innerR * Math.cos(endAngle), iy2 = cy + innerR * Math.sin(endAngle);
+        const innerPath = arcPathReverse(cx, cy, innerR, angle, endAngle);
+        const fullD = arcPath(cx, cy, r, angle, endAngle) + `L ${f(ix2)} ${f(iy2)} ` + innerPath + 'Z';
+        svg += `<path d="${fullD}" fill="${CHART_COLORS[i % CHART_COLORS.length]}"/>`;
+        angle = endAngle;
+    });
+    return svg;
+}
+/** Reverse arc: draws from endAngle back to startAngle using line-to after the first point. */
+function arcPathReverse(cx, cy, r, startAngle, endAngle) {
+    const step = Math.PI / 2;
+    const segments = [];
+    let a = startAngle;
+    while (a < endAngle - 0.001) {
+        const a2 = Math.min(a + step, endAngle);
+        segments.push({ a1: a, a2 });
+        a = a2;
+    }
+    // Reverse and draw each segment backwards
+    let path = '';
+    for (let i = segments.length - 1; i >= 0; i--) {
+        const { a1, a2 } = segments[i];
+        const alpha = a2 - a1;
+        const k = (4 / 3) * Math.tan(alpha / 4);
+        const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
+        const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
+        const cp1x = x1 - k * r * Math.sin(a1), cp1y = y1 + k * r * Math.cos(a1);
+        const cp2x = x2 + k * r * Math.sin(a2), cp2y = y2 - k * r * Math.cos(a2);
+        // Draw from (x2,y2) to (x1,y1) with swapped control points
+        path += `C ${f(cp2x)} ${f(cp2y)} ${f(cp1x)} ${f(cp1y)} ${f(x1)} ${f(y1)} `;
+    }
+    return path;
+}
+function renderLineChart(tableData) {
+    const quarters = ['q1', 'q2', 'q3', 'q4'];
+    const qTotals = quarters.map(q => tableData.reduce((sum, r) => sum + parseFloat(r[q].replace(/[$,]/g, '')), 0));
+    const minVal = Math.min(...qTotals) * 0.9;
+    const maxVal = Math.max(...qTotals) * 1.05;
+    const w = 484, h = 140;
+    const padL = 16, padR = 16, padT = 12, padB = 24;
+    const plotW = w - padL - padR, plotH = h - padT - padB;
+    let svg = '';
+    // Grid lines
+    for (let i = 0; i <= 4; i++) {
+        const y = padT + (plotH / 4) * i;
+        svg += `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="#e2e8f0" stroke-width="0.5"/>`;
+    }
+    // Plot points
+    const points = qTotals.map((v, i) => ({
+        x: padL + (plotW / (quarters.length - 1)) * i,
+        y: padT + plotH - ((v - minVal) / (maxVal - minVal)) * plotH,
+    }));
+    // Fill area under the line
+    const areaPath = `M ${f(points[0].x)} ${f(padT + plotH)} L ${points.map(p => `${f(p.x)} ${f(p.y)}`).join(' L ')} L ${f(points[points.length - 1].x)} ${f(padT + plotH)} Z`;
+    svg += `<path d="${areaPath}" fill="#3b82f6" fill-opacity="0.08"/>`;
+    // Line
+    const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${f(p.x)} ${f(p.y)}`).join(' ');
+    svg += `<path d="${linePath}" fill="none" stroke="#3b82f6" stroke-width="2"/>`;
+    // Dots
+    points.forEach(p => {
+        svg += `<circle cx="${f(p.x)}" cy="${f(p.y)}" r="3.5" fill="#ffffff" stroke="#3b82f6" stroke-width="2"/>`;
+    });
+    // Quarter markers on x-axis
+    points.forEach((p) => {
+        svg += `<line x1="${f(p.x)}" y1="${f(padT + plotH)}" x2="${f(p.x)}" y2="${f(padT + plotH + 4)}" stroke="#94a3b8" stroke-width="1"/>`;
+    });
+    return svg;
+}
+// ── Template ─────────────────────────────────────────────────────────
+export default function Report(data) {
+    const tableData = data.sections[1].tableData || [];
+    return (_jsxs(Document, { title: data.title, author: data.author, children: [_jsx(Page, { size: "Letter", margin: 72, children: _jsxs(View, { style: { flexGrow: 1, justifyContent: 'center' }, children: [_jsxs(View, { style: { backgroundColor: '#0f172a', padding: 32, borderRadius: 4, marginBottom: 32 }, children: [_jsx(Text, { style: { fontSize: 32, fontWeight: 700, color: '#ffffff' }, children: data.title }), _jsx(Text, { style: { fontSize: 14, color: '#94a3b8', marginTop: 12 }, children: data.subtitle })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 24 }, children: [_jsxs(View, { children: [_jsx(Text, { style: { fontSize: 10, color: '#64748b' }, children: "Prepared by" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b', marginTop: 4 }, children: data.author }), _jsx(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: data.department })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [_jsx(Text, { style: { fontSize: 10, color: '#64748b' }, children: "Date" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b', marginTop: 4 }, children: data.date }), _jsx(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: data.classification })] })] })] }) }), _jsxs(Page, { size: "Letter", margin: 54, children: [_jsx(Fixed, { position: "header", children: _jsxs(View, { style: styles.headerBar, children: [_jsx(Text, { style: styles.headerFooterText, children: data.company }), _jsx(Text, { style: styles.headerFooterText, children: data.title })] }) }), _jsx(Fixed, { position: "footer", children: _jsxs(View, { style: styles.footerBar, children: [_jsx(Text, { style: styles.headerFooterText, children: data.classification }), _jsxs(Text, { style: styles.headerFooterText, children: ["Page ", '{{pageNumber}}', " of ", '{{totalPages}}'] })] }) }), _jsx(Text, { style: styles.sectionTitle, children: "Table of Contents" }), data.sections.map((section, i) => (_jsx(View, { href: `#${section.title}`, style: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 6, borderBottomWidth: 1, borderColor: '#f1f5f9' }, children: _jsxs(Text, { style: { fontSize: 10, color: '#2563eb', textDecoration: 'underline' }, children: [i + 1, ". ", section.title] }) }, i))), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[0].title, style: styles.sectionTitle, children: ["1. ", data.sections[0].title] }), (data.sections[0].paragraphs || []).map((p, i) => (_jsx(Text, { style: styles.bodyText, children: p }, i))), data.keyMetrics && (_jsx(View, { style: { flexDirection: 'row', gap: 12, marginTop: 8, marginBottom: 24 }, children: data.keyMetrics.map((metric, i) => (_jsxs(View, { style: { flexGrow: 1, padding: 16, backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0' }, children: [_jsx(Text, { style: { fontSize: 20, fontWeight: 700, color: '#0f172a' }, children: metric.value }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 4 }, children: metric.label })] }, i))) })), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[1].title, style: styles.sectionTitle, children: ["2. ", data.sections[1].title] }), _jsx(Text, { style: styles.introText, children: data.sections[1].intro }), _jsxs(Table, { columns: [
+                            { width: { fraction: 0.28 } },
+                            { width: { fraction: 0.18 } },
+                            { width: { fraction: 0.18 } },
+                            { width: { fraction: 0.18 } },
+                            { width: { fraction: 0.18 } }
+                        ], children: [_jsxs(Row, { header: true, style: { backgroundColor: '#0f172a' }, children: [_jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff' }, children: "Region" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q1" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q2" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q3" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q4" }) })] }), tableData.map((row, i) => (_jsxs(Row, { style: { backgroundColor: i % 2 === 0 ? '#ffffff' : '#f8fafc' }, children: [_jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: { fontSize: 9, color: '#334155', fontWeight: 700 }, children: row.region }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q1 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q2 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q3 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q4 }) })] }, i)))] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[2].title, style: styles.sectionTitle, children: ["3. ", data.sections[2].title] }), _jsx(Text, { style: styles.introText, children: data.sections[2].intro }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginBottom: 24 }, children: [_jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: styles.chartTitle, children: "Revenue by Region" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', padding: 8 }, children: [_jsx(Svg, { width: 230, height: 150, viewBox: "0 0 230 150", content: renderBarChart(tableData) }), _jsx(View, { style: { gap: 3, marginTop: 8 }, children: tableData.map((row, i) => (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4 }, children: [_jsx(View, { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: CHART_COLORS[i % CHART_COLORS.length] } }), _jsx(Text, { style: { fontSize: 7, color: '#64748b' }, children: row.region })] }, i))) })] })] }), _jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: styles.chartTitle, children: "Market Share" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', padding: 8 }, children: [_jsx(View, { style: { alignItems: 'center' }, children: _jsx(Svg, { width: 110, height: 150, viewBox: "0 0 110 150", content: renderDonutChart(tableData) }) }), _jsx(View, { style: { gap: 3, marginTop: 8 }, children: tableData.map((row, i) => {
+                                                    const total = tableData.reduce((s, r) => s + parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
+                                                        + parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')), 0);
+                                                    const rowTotal = parseFloat(row.q1.replace(/[$,]/g, '')) + parseFloat(row.q2.replace(/[$,]/g, ''))
+                                                        + parseFloat(row.q3.replace(/[$,]/g, '')) + parseFloat(row.q4.replace(/[$,]/g, ''));
+                                                    const pct = ((rowTotal / total) * 100).toFixed(0);
+                                                    return (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: CHART_COLORS[i % CHART_COLORS.length] } }), _jsxs(Text, { style: { fontSize: 7, color: '#64748b' }, children: [row.region, " ", pct, "%"] })] }, i));
+                                                }) })] })] })] }), _jsx(Text, { style: styles.chartTitle, children: "Quarterly Growth Trend" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', paddingVertical: 12, marginBottom: 24 }, children: [_jsx(Svg, { width: 484, height: 140, viewBox: "0 0 484 140", content: renderLineChart(tableData) }), _jsx(View, { style: { position: 'relative', height: 14, marginTop: 4 }, children: ['Q1', 'Q2', 'Q3', 'Q4'].map((q, i) => (_jsx(Text, { style: { position: 'absolute', left: 16 + (452 / 3) * i - 12, width: 24, fontSize: 8, color: '#64748b', textAlign: 'center' }, children: q }, i))) })] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[3].title, style: styles.sectionTitle, children: ["4. ", data.sections[3].title] }), _jsx(Text, { style: styles.introText, children: data.sections[3].intro }), (data.sections[3].items || []).map((item, i) => (_jsxs(View, { style: styles.recCard, children: [_jsx(View, { style: styles.recBadge, children: _jsx(Text, { style: styles.recBadgeText, children: i + 1 }) }), _jsxs(View, { style: { flexGrow: 1, flexShrink: 1 }, children: [_jsx(Text, { style: styles.recTitle, children: item.title }), _jsx(Text, { style: styles.recBody, children: item.description }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginTop: 8 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: styles.recLabel, children: "Priority:" }), _jsx(Text, { style: styles.recValue, children: item.priority })] }), _jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: styles.recLabel, children: "Timeline:" }), _jsx(Text, { style: styles.recValue, children: item.timeline })] })] })] })] }, i)))] })] }));
+}

package/dist/templates/shipping-label.d.ts

@@ -0,0 +1 @@
+export default function ShippingLabel(data: any): import("react/jsx-runtime").JSX.Element;

package/dist/templates/shipping-label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Document, Page, View, Text } from '@formepdf/react';
+export default function ShippingLabel(data) {
+    return (_jsx(Document, { title: `Shipping Label - ${data.tracking}`, children: _jsxs(Page, { size: { width: 288, height: 432 }, margin: 16, children: [_jsxs(View, { style: { marginBottom: 12, padding: 8 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }, children: "From" }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.name }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.address }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.cityStateZip })] }), _jsx(View, { style: { borderTopWidth: 2, borderColor: '#0f172a', marginBottom: 12 } }), _jsxs(View, { style: { padding: 12, marginBottom: 12 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a' }, children: data.to.name }), _jsx(Text, { style: { fontSize: 10, color: '#0f172a', marginTop: 4 }, children: data.to.address }), data.to.address2 && (_jsx(Text, { style: { fontSize: 10, color: '#0f172a' }, children: data.to.address2 })), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.to.cityStateZip })] }), _jsxs(View, { style: { marginBottom: 8, padding: 8 }, children: [_jsx(View, { style: { alignItems: 'center', marginBottom: 8 }, children: _jsxs(View, { style: { flexDirection: 'row', gap: 2 }, children: [_jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } })] }) }), _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: '#0f172a', letterSpacing: 2, textAlign: 'center' }, children: data.tracking })] }), _jsx(View, { style: { borderTopWidth: 1, borderColor: '#cbd5e1', marginBottom: 8 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 8 }, children: [_jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: { fontSize: 7, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Weight" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.weight })] }), _jsxs(View, { style: { flex: 2, justifyContent: 'center', alignItems: 'center' }, children: [_jsx(Text, { style: { width: '100%', textAlign: 'center', fontSize: 7, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Dimensions" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.dimensions })] }), _jsxs(View, { style: { flex: 1, justifyContent: 'center', alignItems: 'flex-end' }, children: [_jsx(Text, { style: { width: '100%', textAlign: 'right', fontSize: 7, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Service" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.service })] })] }), data.stamps && data.stamps.length > 0 && (_jsx(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8, padding: 8 }, children: data.stamps.map((stamp, i) => (_jsx(View, { style: { flex: 1, textAlign: 'center', paddingVertical: 6, paddingHorizontal: 12, borderWidth: 2, borderColor: '#dc2626', borderRadius: 2 }, children: _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#dc2626', textTransform: 'uppercase' }, children: stamp }) }, i))) }))] }) }));
+}

package/dist/types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+interface BaseOptions {
+    resendApiKey: string;
+    from: string;
+    to: string | string[];
+    subject: string;
+    filename?: string;
+    html?: string;
+    text?: string;
+    react?: ReactElement;
+    cc?: string | string[];
+    bcc?: string | string[];
+    replyTo?: string;
+    tags?: {
+        name: string;
+        value: string;
+    }[];
+    headers?: Record<string, string>;
+}
+interface TemplateOptions extends BaseOptions {
+    template: string;
+    data?: Record<string, any>;
+    render?: never;
+}
+interface RenderOptions extends BaseOptions {
+    template?: never;
+    data?: never;
+    render: () => ReactElement;
+}
+export type SendPdfOptions = TemplateOptions | RenderOptions;
+export interface RenderAttachOptions {
+    template?: string;
+    data?: Record<string, any>;
+    render?: () => ReactElement;
+    filename?: string;
+}
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@formepdf/resend",
+  "version": "0.5.0",
+  "description": "Render a PDF and email it in one call — Forme + Resend",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@formepdf/react": "0.5.0",
+    "@formepdf/core": "0.5.0"
+  },
+  "peerDependencies": {
+    "resend": ">=3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "react": "^19.0.0",
+    "resend": "^4.0.0",
+    "typescript": "^5.7.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/formepdf/forme",
+    "directory": "packages/resend"
+  }
+}