6d:I[77724,["/_next/static/immutable/chunks/0d_1k504zwhsx.js","/_next/static/immutable/chunks/320vg2lydnd7n.js","/_next/static/immutable/chunks/0k75gge6phn15.js","/_next/static/immutable/chunks/21l5227s7fb44.js","/_next/static/immutable/chunks/3ikdb36w4ug0m.js","/_next/static/immutable/chunks/0ye-aptjaj9iv.js","/_next/static/immutable/chunks/11j4_1q899b5h.js","/_next/static/immutable/chunks/1_3ntnjpp0s7_.js","/_next/static/immutable/chunks/0lrk53y1ky2s1.js","/_next/static/immutable/chunks/13amb-1dgwvz0.js","/_next/static/immutable/chunks/2o2zstw9ajzwm.js","/_next/static/immutable/chunks/3pr-czpfa_kyo.js","/_next/static/immutable/chunks/3ra453cktnl-_.js"],"GitHubStars"] 69:Tfaee,

import { KeyValue } from "@/components/pdf/key-value/key-value";
import { PageFooter } from "@/components/pdf/page-footer/page-footer";
import { PageHeader } from "@/components/pdf/page-header/page-header";
import { Section } from "@/components/pdf/section/section";
import {
  Table,
  TableBody,
  TableCell,
  TableHeader,
  TableRow,
} from "@/components/pdf/table/table";
import { Text } from "@/components/pdf/text/text";
import {
  PdfcnThemeProvider,
  usePdfcnTheme,
} from "@/components/pdf/theme-provider";
import {
  View,
  StyleSheet,
  Document,
  Page,
} from "@/lib/pdf-primitives";
import type { PdfcnTheme } from "@/types/pdf-themes";

import type { InvoiceModernData } from "./invoice-modern.types";

// Sample data — replace with your own props or data source
const sampleData: InvoiceModernData = {
  billTo: {
    address: "789 Innovation Blvd, Floor 3",
    email: "billing@techstart.com",
    name: "TechStart Solutions",
    phone: "+1 (555) 987-6543",
  },
  companyAddress: "Nagpur, IN",
  companyEmail: "hello@pdfcn.app",
  companyName: "pdfcn",
  dueDate: "March 20, 2026",
  invoiceDate: "February 18, 2026",
  invoiceNumber: "INV-2026-002",
  items: [
    { description: "API Integration", quantity: 1, unitPrice: 15_000 },
    { description: "SEO", quantity: 2, unitPrice: 5500 },
    { description: "Security Audit", quantity: 1, unitPrice: 7200 },
  ],
  notes: "Payment terms: Net 30 days. Thank you for your business!",
  paymentTerms: {
    dueDate: "March 20, 2026",
    gst: "GSTIN 123456789",
    method: "Wire Transfer / Bank Account",
  },
  subtitle: "Innovative PDF Solutions",
  summary: {
    subtotal: 33_200,
    tax: 2324,
    total: 35_524,
  },
};

const InvoiceModernContent = ({ data }: { data: InvoiceModernData }) => {
  const theme = usePdfcnTheme();

  const styles = StyleSheet.create({
    dividerCol: {
      backgroundColor: theme.colors.border,
      marginRight: 12,
      width: 1,
    },
    metaCol: {
      flex: 1,
      paddingRight: 12,
    },
    metaLabel: {
      color: theme.colors.mutedForeground,
      fontSize: 8,
      fontWeight: "bold",
      letterSpacing: 0.5,
      marginBottom: 3,
      textTransform: "uppercase",
    },
    metaRow: {
      flexDirection: "row",
      marginBottom: theme.spacing.sectionGap,
    },
    metaValue: {
      color: theme.colors.foreground,
      fontSize: 9,
    },
    page: {
      backgroundColor: theme.colors.background,
      boxSizing: "border-box",
      minHeight: 841,
      padding: theme.spacing.page.marginTop,
      paddingBottom: theme.spacing.page.marginBottom,
      position: "relative",
    },
  });

  return (
    <Document title={`Invoice ${data.invoiceNumber}`}>
      <Page size="A4" style={styles.page}>
        <PageHeader
          variant="branded"
          title={data.companyName}
          subtitle={`${data.subtitle}  ·  ${data.companyAddress}  ·  ${data.companyEmail}`}
        />
        <View style={styles.metaRow}>
          <View style={styles.metaCol}>
            <Text style={styles.metaLabel} noMargin>
              Invoice Number
            </Text>
            <Text
              style={{ ...styles.metaValue, fontSize: 11, fontWeight: "bold" }}
              noMargin
            >
              {data.invoiceNumber}
            </Text>
          </View>
          <View style={styles.metaCol}>
            <Text style={styles.metaLabel} noMargin>
              Invoice Date
            </Text>
            <Text style={styles.metaValue} noMargin>
              {data.invoiceDate}
            </Text>
          </View>
          <View style={styles.metaCol}>
            <Text style={styles.metaLabel} noMargin>
              Due Date
            </Text>
            <Text style={styles.metaValue} noMargin>
              {data.dueDate}
            </Text>
          </View>
          <View style={styles.dividerCol} />
          <View style={{ flex: 2 }}>
            <Text style={styles.metaLabel} noMargin>
              Billed To
            </Text>
            <Text style={{ ...styles.metaValue, fontWeight: "bold" }} noMargin>
              {data.billTo.name}
            </Text>
            <Text
              style={{
                ...styles.metaValue,
                color: theme.colors.mutedForeground,
              }}
              noMargin
            >
              {data.billTo.address}
            </Text>
            <Text
              style={{
                ...styles.metaValue,
                color: theme.colors.mutedForeground,
              }}
              noMargin
            >
              {data.billTo.email}
            </Text>
            <Text
              style={{
                ...styles.metaValue,
                color: theme.colors.mutedForeground,
              }}
              noMargin
            >
              {data.billTo.phone}
            </Text>
          </View>
        </View>
        <Table variant="primary-header">
          <TableHeader>
            <TableRow header>
              <TableCell>Description</TableCell>
              <TableCell align="center">Qty</TableCell>
              <TableCell align="right">Unit Price</TableCell>
              <TableCell align="right">Amount</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="right">{`$${item.unitPrice.toLocaleString()}`}</TableCell>
                <TableCell align="right">{`$${(item.quantity * item.unitPrice).toFixed(2)}`}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <Section noWrap style={{ flexDirection: "row", marginTop: 16 }}>
          <View style={{ flex: 1, paddingRight: 20 }}>
            <Text style={styles.metaLabel} noMargin>
              Payment Method
            </Text>
            <Text variant="xs" noMargin>
              {data.paymentTerms.method}
            </Text>
            <Text variant="xs" noMargin color="mutedForeground">
              {data.paymentTerms.gst}
            </Text>
          </View>
          <View style={{ width: 220 }}>
            <KeyValue
              size="sm"
              dividerThickness={1}
              items={[
                {
                  key: "Subtotal",
                  value: `$${data.summary.subtotal.toFixed(2)}`,
                },
                { key: "Tax (7%)", value: `$${data.summary.tax.toFixed(2)}` },
                {
                  key: "Total Due",
                  keyStyle: { fontSize: 12, fontWeight: "bold" },
                  value: `$${data.summary.total.toFixed(2)}`,
                  valueStyle: { fontSize: 12, fontWeight: "bold" },
                },
              ]}
              divided
            />
          </View>
        </Section>
        <PageFooter
          leftText={data.notes}
          rightText="Page 1 of 1"
          sticky
          pagePadding={25}
        />
      </Page>
    </Document>
  );
};

export const InvoiceModernDocument = ({
  theme,
  data = sampleData,
}: {
  theme?: PdfcnTheme;
  data?: InvoiceModernData;
}) => (
  <PdfcnThemeProvider theme={theme}>
    <InvoiceModernContent data={data} />
  </PdfcnThemeProvider>
);

53:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$69"}}] 6a:T123c5,

import type { ReactNode, ImgHTMLAttributes, AnchorHTMLAttributes } from "react";

export type Style = Record<string, unknown>;

export const StyleSheet = {
  create<T extends Record<string, Style>>(styles: T): T {
    return styles;
  },
};

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

/**
 * pdfcn's shared component tokens follow the PDF convention of using points.
 * Takumi follows browser CSS instead, where numeric lengths are pixels at
 * 96 DPI. Converting at the primitive boundary keeps the public component API
 * and the generated document's physical measurements aligned with Forme.
 */
export const PDF_POINT_TO_CSS_PIXEL = 96 / 72;

export const pointToCssPixel = (value: number): number =>
  value * PDF_POINT_TO_CSS_PIXEL;

const POINT_LENGTH_PROPERTIES = new Set([
  "blockSize",
  "borderBlockEndWidth",
  "borderBlockStartWidth",
  "borderBlockWidth",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomWidth",
  "borderEndEndRadius",
  "borderEndStartRadius",
  "borderInlineEndWidth",
  "borderInlineStartWidth",
  "borderInlineWidth",
  "borderLeftWidth",
  "borderRadius",
  "borderRightWidth",
  "borderStartEndRadius",
  "borderStartStartRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopWidth",
  "borderWidth",
  "bottom",
  "columnGap",
  "flexBasis",
  "fontSize",
  "gap",
  "height",
  "inlineSize",
  "inset",
  "insetBlock",
  "insetBlockEnd",
  "insetBlockStart",
  "insetInline",
  "insetInlineEnd",
  "insetInlineStart",
  "left",
  "letterSpacing",
  "margin",
  "marginBlock",
  "marginBlockEnd",
  "marginBlockStart",
  "marginBottom",
  "marginInline",
  "marginInlineEnd",
  "marginInlineStart",
  "marginLeft",
  "marginRight",
  "marginTop",
  "maxBlockSize",
  "maxHeight",
  "maxInlineSize",
  "maxWidth",
  "minBlockSize",
  "minHeight",
  "minInlineSize",
  "minWidth",
  "outlineOffset",
  "outlineWidth",
  "padding",
  "paddingBlock",
  "paddingBlockEnd",
  "paddingBlockStart",
  "paddingBottom",
  "paddingInline",
  "paddingInlineEnd",
  "paddingInlineStart",
  "paddingLeft",
  "paddingRight",
  "paddingTop",
  "right",
  "rowGap",
  "textDecorationThickness",
  "textIndent",
  "top",
  "width",
]);

interface ViewProps {
  children?: ReactNode;
  style?: StyleInput;
  className?: string;
  wrap?: boolean;
  fixed?: boolean;
  break?: boolean;
  minPresenceAhead?: number;
}

export const normalizeTakumiStyle = (style: Style): Style => {
  const {
    marginHorizontal,
    marginVertical,
    paddingHorizontal,
    paddingVertical,
    ...normalized
  } = style;

  if (marginHorizontal !== undefined) {
    normalized.marginLeft ??= marginHorizontal;
    normalized.marginRight ??= marginHorizontal;
  }
  if (marginVertical !== undefined) {
    normalized.marginBottom ??= marginVertical;
    normalized.marginTop ??= marginVertical;
  }
  if (paddingHorizontal !== undefined) {
    normalized.paddingLeft ??= paddingHorizontal;
    normalized.paddingRight ??= paddingHorizontal;
  }
  if (paddingVertical !== undefined) {
    normalized.paddingBottom ??= paddingVertical;
    normalized.paddingTop ??= paddingVertical;
  }

  const borderSides = ["Top", "Right", "Bottom", "Left"] as const;
  if (normalized.borderWidth !== undefined) {
    normalized.borderStyle ??= "solid";
  }
  for (const side of borderSides) {
    if (normalized[`border${side}Width`] !== undefined) {
      normalized[`border${side}Style`] ??= "solid";
    }
  }

  return Object.fromEntries(
    Object.entries(normalized).map(([property, value]) => [
      property,
      typeof value === "number" && POINT_LENGTH_PROPERTIES.has(property)
        ? pointToCssPixel(value)
        : value,
    ])
  );
};

export const flatten = (
  style?: StyleInput
): Record<string, unknown> | undefined => {
  if (!style) {
    return undefined;
  }
  if (Array.isArray(style)) {
    return normalizeTakumiStyle(Object.assign({}, ...style.filter(Boolean)));
  }
  return normalizeTakumiStyle(style);
};

export const View = ({ children, style, className, ...rest }: ViewProps) => {
  const {
    wrap,
    fixed,
    break: br,
    minPresenceAhead: _m,
    ...dom
  } = rest as ViewProps & Record<string, unknown>;
  const merged = {
    display: "flex",
    flexDirection: "column",
    ...flatten(style),
  };
  if (br) {
    Object.assign(merged, { breakBefore: "page" });
  }
  if (wrap === false) {
    Object.assign(merged, { breakInside: "avoid" });
  }
  if (fixed) {
    Object.assign(merged, { position: "fixed" });
  }
  return (
    <div
      className={className}
      style={merged as React.CSSProperties}
      {...(dom as object)}
    >
      {children}
    </div>
  );
};

interface TextProps {
  children?: ReactNode;
  style?: StyleInput;
  className?: string;
  render?: (info: { pageNumber: number; totalPages: number }) => ReactNode;
  fixed?: boolean;
  href?: string;
  src?: string;
}

export const Text = ({
  children,
  style,
  className,
  render: _render,
  href,
  src,
  ...rest
}: TextProps) => {
  const merged = flatten(style) as React.CSSProperties | undefined;
  const link = href ?? src;
  if (link) {
    return (
      <a href={link} className={className} style={merged} {...(rest as object)}>
        {children}
      </a>
    );
  }
  return (
    <span className={className} style={merged} {...(rest as object)}>
      {children}
    </span>
  );
};

export const Image = ({
  src,
  style,
  ...rest
}: {
  src: string | { uri: string };
  style?: StyleInput;
} & Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "style">) => {
  const resolved = typeof src === "string" ? src : src.uri;
  return (
    // eslint-disable-next-line eslint(nextjs/no-img-element) -- PDF primitive, not Next.js page
    <img
      src={resolved}
      style={flatten(style) as React.CSSProperties}
      alt=""
      {...rest}
    />
  );
};

export const Link = ({
  src,
  children,
  style,
  ...rest
}: {
  src: string;
  children?: ReactNode;
  style?: StyleInput;
} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "style">) => (
  <a href={src} style={flatten(style) as React.CSSProperties} {...rest}>
    {children}
  </a>
);

export const Document = ({
  children,
  title,
  style,
}: {
  children?: ReactNode;
  title?: string;
  style?: StyleInput;
}) => (
  <div
    data-pdf-document={title}
    style={
      {
        display: "flex",
        flexDirection: "column",
        ...flatten(style),
      } as React.CSSProperties
    }
  >
    {children}
  </div>
);

export const Page = ({
  children,
  size: _size,
  style,
}: {
  children?: ReactNode;
  size?: string | { width: number; height: number };
  style?: StyleInput;
}) => (
  <div
    data-pdf-page
    style={
      {
        display: "flex",
        flexDirection: "column",
        ...flatten(style),
      } as React.CSSProperties
    }
  >
    {children}
  </div>
);

5a:["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$6a"}}] 6b:T583b,

Invoice Modern

Installation

Usage