@flopay/ui 0.6.1 → 0.7.0

package/README.md

@@ -162,6 +162,74 @@ Colour and face come from `--annotation-ink` (brand blue) and
 floating/list switch is a `@media (min-width: 1120px)` rule sized for a ~720px
 content box — apps in a constrained layout should re-declare that one block.
 
+### 6. Transactional email
+
+`@flopay/ui/email` renders a provider-neutral HTML string and matching plain
+text. It does not send messages or configure a delivery provider.
+
+```tsx
+import { renderTransactionalEmail } from "@flopay/ui/email";
+
+const { html, text } = renderTransactionalEmail({
+  preheader: "Your FloPay payment receipt is ready",
+  heading: "Payment received",
+  body: [
+    "Thanks, Alex. Your payment was processed successfully.",
+    "Keep this receipt for your records.",
+  ],
+  action: {
+    label: "View receipt",
+    href: "https://flopay.com/receipts/FP-2048",
+  },
+  detail: {
+    kind: "keyValue",
+    rows: [
+      { label: "Reference", value: "FP-2048" },
+      { label: "Amount", value: "$48.00 USD" },
+    ],
+  },
+  footer: {
+    address: "FloPay LLC, 100 Payments Way, New York, NY",
+  },
+});
+```
+
+The fixed slots are the content contract: one concise preheader, one heading,
+plain-text body paragraphs, an optional action, and either a code or key-value
+detail. Consumers supply content rather than React children or arbitrary HTML,
+so new account and payment messages reuse the same reading order and layout.
+All links are real anchors, and the action URL and labelled details remain
+usable in the generated plain text.
+
+Email clients cannot use the live CSS token preset. The template therefore
+mirrors the approved values as inline literals: brand `#1785e0`, text
+`#0a0a0b`, border `#e5e5e8`, an `8px` radius, and an Inter-first system font
+stack with Roboto/Arial fallbacks. The layout is a 600px table-based card with
+40px desktop padding and 24px narrow-screen padding. Update
+`src/email/theme.ts` whenever the corresponding values in `styles/tokens.css`
+change.
+
+The default `FLOPAY_EMAIL_LOGO_URL` is the hosted approved asset at
+`https://flopay.com/logo.png`. The logo is decorative (`alt=""`) because the
+adjacent text brand name provides the accessible name and remains visible for
+images-off clients. A service may pass an absolute HTTPS `logoUrl` when it
+needs to host the same asset itself; packaged files, `data:` URLs, and
+provider-specific CID references are not portable email sources.
+
+The shared transactional footer defaults to `FloPay LLC`,
+`hello@flopay.com`, Privacy, Terms, and a service-message notice. It does not
+include a marketing unsubscribe. `footer` can override the company, support
+label/URL, legal URLs, notice, and optional mailing address when legal or
+support requirements differ.
+
+The initial compatibility baseline is Apple Mail on macOS/iOS; Gmail web,
+iOS, and Android; Outlook Windows desktop/MSO, Outlook.com, and Microsoft 365
+web; and Yahoo. The markup uses layout tables and inline styles, with responsive
+and dark-mode CSS as progressive enhancements. Before a release changes the
+layout, verify Outlook Windows, dark mode, and images-off behavior in real
+clients or an email rendering service in addition to the automated render
+snapshot.
+
 ## Design tokens
 
 `styles/tokens.css` defines surfaces, borders, text, accent, **brand

package/dist/email/index.cjs

@@ -0,0 +1,425 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/email/index.tsx
+var email_exports = {};
+__export(email_exports, {
+  FLOPAY_EMAIL_LOGO_URL: () => FLOPAY_EMAIL_LOGO_URL,
+  TransactionalEmail: () => TransactionalEmail,
+  renderTransactionalEmail: () => renderTransactionalEmail
+});
+module.exports = __toCommonJS(email_exports);
+var import_components = require("@react-email/components");
+var import_render = require("@react-email/render");
+var import_server = require("react-dom/server");
+
+// src/email/theme.ts
+var emailTheme = {
+  colors: {
+    background: "#f7f7f8",
+    surface: "#ffffff",
+    muted: "#f0f0f2",
+    border: "#e5e5e8",
+    text: "#0a0a0b",
+    textSecondary: "#52525b",
+    brand: "#1785e0",
+    brandLight: "#4ba6ec",
+    accessibleLink: "#0969b3",
+    darkBackground: "#0a0a0b",
+    darkSurface: "#141416",
+    darkMuted: "#1c1c1f",
+    darkBorder: "#27272a",
+    darkText: "#fafafa",
+    darkTextSecondary: "#a1a1aa"
+  },
+  radius: "8px",
+  font: "Inter, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif",
+  fontMono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  width: "600px"
+};
+
+// src/email/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FLOPAY_EMAIL_LOGO_URL = "https://flopay.com/logo.png";
+var DEFAULT_TRANSACTIONAL_FOOTER = {
+  companyName: "FloPay LLC",
+  supportLabel: "hello@flopay.com",
+  supportUrl: "mailto:hello@flopay.com",
+  privacyUrl: "https://flopay.com/legal/privacy",
+  termsUrl: "https://flopay.com/legal/terms",
+  notice: "This is a service message about your FloPay account.",
+  address: ""
+};
+var FOOTER_TEXT_STYLE = {
+  color: emailTheme.colors.textSecondary,
+  fontSize: "13px",
+  lineHeight: "20px",
+  margin: "0 0 12px"
+};
+function Detail({ detail }) {
+  if (detail.kind === "keyValue") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "table",
+      {
+        cellPadding: "0",
+        cellSpacing: "0",
+        className: "email-detail",
+        "data-key-value": "true",
+        style: {
+          backgroundColor: emailTheme.colors.background,
+          border: `1px solid ${emailTheme.colors.border}`,
+          borderRadius: emailTheme.radius,
+          margin: "24px 0",
+          width: "100%"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: detail.rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { "data-key-value-row": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "th",
+            {
+              className: "email-muted",
+              scope: "row",
+              style: {
+                borderBottom: index < detail.rows.length - 1 ? `1px solid ${emailTheme.colors.border}` : void 0,
+                color: emailTheme.colors.textSecondary,
+                fontSize: "14px",
+                fontWeight: 600,
+                padding: "12px 16px",
+                verticalAlign: "top",
+                width: "36%"
+              },
+              children: [
+                row.label,
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "td",
+            {
+              className: "email-text",
+              style: {
+                borderBottom: index < detail.rows.length - 1 ? `1px solid ${emailTheme.colors.border}` : void 0,
+                color: emailTheme.colors.text,
+                fontSize: "14px",
+                padding: "12px 16px",
+                verticalAlign: "top",
+                wordBreak: "break-word"
+              },
+              children: [
+                " ",
+                row.value
+              ]
+            }
+          )
+        ] }, `${index}-${row.label}`)) })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.Section,
+    {
+      className: "email-detail",
+      style: {
+        backgroundColor: emailTheme.colors.muted,
+        border: `1px solid ${emailTheme.colors.border}`,
+        borderRadius: emailTheme.radius,
+        margin: "24px 0",
+        padding: "20px"
+      },
+      children: [
+        detail.caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Text,
+          {
+            className: "email-muted",
+            style: {
+              color: emailTheme.colors.textSecondary,
+              fontSize: "13px",
+              fontWeight: 600,
+              lineHeight: "20px",
+              margin: "0 0 8px"
+            },
+            children: detail.caption
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Text,
+          {
+            className: "email-text",
+            style: {
+              color: emailTheme.colors.text,
+              fontFamily: emailTheme.fontMono,
+              fontSize: "24px",
+              fontWeight: 700,
+              letterSpacing: "0.12em",
+              lineHeight: "32px",
+              margin: 0,
+              overflowWrap: "anywhere"
+            },
+            children: detail.value
+          }
+        )
+      ]
+    }
+  );
+}
+function EmailFooter({ overrides }) {
+  const footer = { ...DEFAULT_TRANSACTIONAL_FOOTER, ...overrides };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Section, { style: { marginTop: "32px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Hr,
+      {
+        className: "email-divider",
+        style: { borderColor: emailTheme.colors.border, margin: "0 0 24px" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Text, { className: "email-muted", style: FOOTER_TEXT_STYLE, children: footer.notice }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Text, { className: "email-muted", style: FOOTER_TEXT_STYLE, children: [
+      "Need help?",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Link,
+        {
+          className: "email-link",
+          href: footer.supportUrl,
+          style: { color: emailTheme.colors.accessibleLink, textDecoration: "underline" },
+          children: footer.supportLabel
+        }
+      )
+    ] }),
+    footer.address ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Text, { className: "email-muted", style: FOOTER_TEXT_STYLE, children: footer.address }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Text, { className: "email-muted", style: { ...FOOTER_TEXT_STYLE, margin: 0 }, children: [
+      "\xA9 ",
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      " ",
+      footer.companyName,
+      ".",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Link,
+        {
+          className: "email-link",
+          href: footer.privacyUrl,
+          style: { color: emailTheme.colors.accessibleLink, textDecoration: "underline" },
+          children: "Privacy"
+        }
+      ),
+      " ",
+      "\xB7",
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Link,
+        {
+          className: "email-link",
+          href: footer.termsUrl,
+          style: { color: emailTheme.colors.accessibleLink, textDecoration: "underline" },
+          children: "Terms"
+        }
+      )
+    ] })
+  ] });
+}
+function Brand({ logoUrl }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { cellPadding: "0", cellSpacing: "0", role: "presentation", style: { marginBottom: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { verticalAlign: "middle", width: "40px" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Img,
+      {
+        alt: "",
+        height: "40",
+        src: logoUrl,
+        style: { borderRadius: emailTheme.radius },
+        width: "40"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: { paddingLeft: "12px", verticalAlign: "middle" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Text,
+      {
+        className: "email-text",
+        style: {
+          color: emailTheme.colors.text,
+          fontSize: "18px",
+          fontWeight: 700,
+          lineHeight: "24px",
+          margin: 0
+        },
+        children: "FloPay"
+      }
+    ) })
+  ] }) }) });
+}
+function TransactionalEmail({
+  preheader,
+  heading,
+  body,
+  action,
+  detail,
+  logoUrl = FLOPAY_EMAIL_LOGO_URL,
+  footer
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Html, { lang: "en", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Head, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("meta", { content: "width=device-width, initial-scale=1.0", name: "viewport" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+          :root {
+            color-scheme: light dark;
+            supported-color-schemes: light dark;
+          }
+
+          @media only screen and (max-width: 620px) {
+            .email-shell { padding: 0 !important; }
+            .email-card { border-left: 0 !important; border-radius: 0 !important; border-right: 0 !important; margin: 0 !important; width: 100% !important; }
+            .email-content { padding: 24px !important; }
+          }
+
+          @media (prefers-color-scheme: dark) {
+            .email-body { background-color: ${emailTheme.colors.darkBackground} !important; }
+            .email-shell { background-color: ${emailTheme.colors.darkBackground} !important; }
+            .email-card { background-color: ${emailTheme.colors.darkSurface} !important; border-color: ${emailTheme.colors.darkBorder} !important; }
+            .email-text { color: ${emailTheme.colors.darkText} !important; }
+            .email-muted { color: ${emailTheme.colors.darkTextSecondary} !important; }
+            .email-detail { background-color: ${emailTheme.colors.darkMuted} !important; border-color: ${emailTheme.colors.darkBorder} !important; }
+            .email-link { color: ${emailTheme.colors.brandLight} !important; }
+            .email-action { background-color: ${emailTheme.colors.darkText} !important; color: ${emailTheme.colors.darkBackground} !important; }
+            .email-divider { border-color: ${emailTheme.colors.darkBorder} !important; }
+          }
+        ` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Preview, { children: preheader }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Body,
+      {
+        className: "email-body",
+        style: {
+          backgroundColor: emailTheme.colors.background,
+          margin: 0,
+          padding: 0
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.Section,
+          {
+            className: "email-shell",
+            style: {
+              backgroundColor: emailTheme.colors.background,
+              color: emailTheme.colors.text,
+              fontFamily: emailTheme.font,
+              padding: "32px 12px",
+              width: "100%"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.Container,
+              {
+                className: "email-card",
+                style: {
+                  backgroundColor: emailTheme.colors.surface,
+                  border: `1px solid ${emailTheme.colors.border}`,
+                  borderRadius: emailTheme.radius,
+                  borderTop: `4px solid ${emailTheme.colors.brand}`,
+                  margin: "0 auto",
+                  maxWidth: emailTheme.width,
+                  overflow: "hidden",
+                  width: "100%"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Section, { className: "email-content", style: { padding: "40px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Brand, { logoUrl }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_components.Heading,
+                    {
+                      as: "h1",
+                      className: "email-text",
+                      style: {
+                        color: emailTheme.colors.text,
+                        fontSize: "28px",
+                        fontWeight: 700,
+                        letterSpacing: "-0.02em",
+                        lineHeight: "36px",
+                        margin: "0 0 16px"
+                      },
+                      children: heading
+                    }
+                  ),
+                  body.map((paragraph, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_components.Text,
+                    {
+                      className: "email-text",
+                      style: {
+                        color: emailTheme.colors.text,
+                        fontSize: "16px",
+                        lineHeight: "25px",
+                        margin: "0 0 16px"
+                      },
+                      children: paragraph
+                    },
+                    `${index}-${paragraph}`
+                  )),
+                  detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Detail, { detail }) : null,
+                  action ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_components.Button,
+                    {
+                      className: "email-action",
+                      href: action.href,
+                      style: {
+                        backgroundColor: emailTheme.colors.text,
+                        borderRadius: emailTheme.radius,
+                        color: emailTheme.colors.surface,
+                        fontSize: "16px",
+                        fontWeight: 700,
+                        lineHeight: "20px",
+                        marginTop: "8px",
+                        padding: "14px 24px",
+                        textDecoration: "none"
+                      },
+                      children: action.label
+                    }
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailFooter, { overrides: footer })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+function renderTransactionalEmail(props) {
+  const markup = (0, import_server.renderToStaticMarkup)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TransactionalEmail, { ...props }));
+  const html = `<!doctype html>${markup.replace(
+    /<link\b(?=[^>]*\brel="preload")(?=[^>]*\bas="image")[^>]*\/?>/gi,
+    ""
+  )}`;
+  return {
+    html,
+    text: (0, import_render.toPlainText)(html, {
+      selectors: [
+        { selector: "h1", options: { uppercase: false } },
+        {
+          selector: 'tr[data-key-value-row="true"]',
+          format: "block",
+          options: { leadingLineBreaks: 1, trailingLineBreaks: 1 }
+        }
+      ]
+    })
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FLOPAY_EMAIL_LOGO_URL,
+  TransactionalEmail,
+  renderTransactionalEmail
+});
+//# sourceMappingURL=index.cjs.map

package/dist/email/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/email/index.tsx","../../src/email/theme.ts"],"sourcesContent":["import {\n  Body,\n  Button,\n  Container,\n  Head,\n  Heading,\n  Hr,\n  Html,\n  Img,\n  Link,\n  Preview,\n  Section,\n  Text,\n} from '@react-email/components';\nimport { toPlainText } from '@react-email/render';\nimport { renderToStaticMarkup } from 'react-dom/server';\nimport { emailTheme } from './theme';\n\nexport const FLOPAY_EMAIL_LOGO_URL = 'https://flopay.com/logo.png';\n\nexport interface TransactionalEmailAction {\n  label: string;\n  href: string;\n}\n\nexport interface TransactionalCodeDetail {\n  kind: 'code';\n  value: string;\n  caption?: string;\n}\n\nexport interface TransactionalKeyValueDetail {\n  kind: 'keyValue';\n  rows: { label: string; value: string }[];\n}\n\nexport type TransactionalEmailDetail = TransactionalCodeDetail | TransactionalKeyValueDetail;\n\nexport interface TransactionalFooter {\n  companyName: string;\n  supportLabel: string;\n  supportUrl: string;\n  privacyUrl: string;\n  termsUrl: string;\n  notice: string;\n  address: string;\n}\n\nexport interface TransactionalEmailProps {\n  preheader: string;\n  heading: string;\n  body: string[];\n  action?: TransactionalEmailAction;\n  detail?: TransactionalEmailDetail;\n  logoUrl?: string;\n  footer?: Partial<TransactionalFooter>;\n}\n\nexport interface RenderedTransactionalEmail {\n  html: string;\n  text: string;\n}\n\nconst DEFAULT_TRANSACTIONAL_FOOTER: TransactionalFooter = {\n  companyName: 'FloPay LLC',\n  supportLabel: 'hello@flopay.com',\n  supportUrl: 'mailto:hello@flopay.com',\n  privacyUrl: 'https://flopay.com/legal/privacy',\n  termsUrl: 'https://flopay.com/legal/terms',\n  notice: 'This is a service message about your FloPay account.',\n  address: '',\n};\n\nconst FOOTER_TEXT_STYLE = {\n  color: emailTheme.colors.textSecondary,\n  fontSize: '13px',\n  lineHeight: '20px',\n  margin: '0 0 12px',\n} as const;\n\nfunction Detail({ detail }: { detail: TransactionalEmailDetail }) {\n  if (detail.kind === 'keyValue') {\n    return (\n      <table\n        cellPadding=\"0\"\n        cellSpacing=\"0\"\n        className=\"email-detail\"\n        data-key-value=\"true\"\n        style={{\n          backgroundColor: emailTheme.colors.background,\n          border: `1px solid ${emailTheme.colors.border}`,\n          borderRadius: emailTheme.radius,\n          margin: '24px 0',\n          width: '100%',\n        }}\n      >\n        <tbody>\n          {detail.rows.map((row, index) => (\n            <tr data-key-value-row=\"true\" key={`${index}-${row.label}`}>\n              <th\n                className=\"email-muted\"\n                scope=\"row\"\n                style={{\n                  borderBottom:\n                    index < detail.rows.length - 1\n                      ? `1px solid ${emailTheme.colors.border}`\n                      : undefined,\n                  color: emailTheme.colors.textSecondary,\n                  fontSize: '14px',\n                  fontWeight: 600,\n                  padding: '12px 16px',\n                  verticalAlign: 'top',\n                  width: '36%',\n                }}\n              >\n                {row.label}:\n              </th>\n              <td\n                className=\"email-text\"\n                style={{\n                  borderBottom:\n                    index < detail.rows.length - 1\n                      ? `1px solid ${emailTheme.colors.border}`\n                      : undefined,\n                  color: emailTheme.colors.text,\n                  fontSize: '14px',\n                  padding: '12px 16px',\n                  verticalAlign: 'top',\n                  wordBreak: 'break-word',\n                }}\n              >\n                {' '}\n                {row.value}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    );\n  }\n\n  return (\n    <Section\n      className=\"email-detail\"\n      style={{\n        backgroundColor: emailTheme.colors.muted,\n        border: `1px solid ${emailTheme.colors.border}`,\n        borderRadius: emailTheme.radius,\n        margin: '24px 0',\n        padding: '20px',\n      }}\n    >\n      {detail.caption ? (\n        <Text\n          className=\"email-muted\"\n          style={{\n            color: emailTheme.colors.textSecondary,\n            fontSize: '13px',\n            fontWeight: 600,\n            lineHeight: '20px',\n            margin: '0 0 8px',\n          }}\n        >\n          {detail.caption}\n        </Text>\n      ) : null}\n      <Text\n        className=\"email-text\"\n        style={{\n          color: emailTheme.colors.text,\n          fontFamily: emailTheme.fontMono,\n          fontSize: '24px',\n          fontWeight: 700,\n          letterSpacing: '0.12em',\n          lineHeight: '32px',\n          margin: 0,\n          overflowWrap: 'anywhere',\n        }}\n      >\n        {detail.value}\n      </Text>\n    </Section>\n  );\n}\n\nfunction EmailFooter({ overrides }: { overrides?: Partial<TransactionalFooter> }) {\n  const footer = { ...DEFAULT_TRANSACTIONAL_FOOTER, ...overrides };\n\n  return (\n    <Section style={{ marginTop: '32px' }}>\n      <Hr\n        className=\"email-divider\"\n        style={{ borderColor: emailTheme.colors.border, margin: '0 0 24px' }}\n      />\n      <Text className=\"email-muted\" style={FOOTER_TEXT_STYLE}>\n        {footer.notice}\n      </Text>\n      <Text className=\"email-muted\" style={FOOTER_TEXT_STYLE}>\n        Need help?{' '}\n        <Link\n          className=\"email-link\"\n          href={footer.supportUrl}\n          style={{ color: emailTheme.colors.accessibleLink, textDecoration: 'underline' }}\n        >\n          {footer.supportLabel}\n        </Link>\n      </Text>\n      {footer.address ? (\n        <Text className=\"email-muted\" style={FOOTER_TEXT_STYLE}>\n          {footer.address}\n        </Text>\n      ) : null}\n      <Text className=\"email-muted\" style={{ ...FOOTER_TEXT_STYLE, margin: 0 }}>\n        © {new Date().getFullYear()} {footer.companyName}.{' '}\n        <Link\n          className=\"email-link\"\n          href={footer.privacyUrl}\n          style={{ color: emailTheme.colors.accessibleLink, textDecoration: 'underline' }}\n        >\n          Privacy\n        </Link>{' '}\n        ·{' '}\n        <Link\n          className=\"email-link\"\n          href={footer.termsUrl}\n          style={{ color: emailTheme.colors.accessibleLink, textDecoration: 'underline' }}\n        >\n          Terms\n        </Link>\n      </Text>\n    </Section>\n  );\n}\n\nfunction Brand({ logoUrl }: { logoUrl: string }) {\n  return (\n    <table cellPadding=\"0\" cellSpacing=\"0\" role=\"presentation\" style={{ marginBottom: '32px' }}>\n      <tbody>\n        <tr>\n          <td style={{ verticalAlign: 'middle', width: '40px' }}>\n            <Img\n              alt=\"\"\n              height=\"40\"\n              src={logoUrl}\n              style={{ borderRadius: emailTheme.radius }}\n              width=\"40\"\n            />\n          </td>\n          <td style={{ paddingLeft: '12px', verticalAlign: 'middle' }}>\n            <Text\n              className=\"email-text\"\n              style={{\n                color: emailTheme.colors.text,\n                fontSize: '18px',\n                fontWeight: 700,\n                lineHeight: '24px',\n                margin: 0,\n              }}\n            >\n              FloPay\n            </Text>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  );\n}\n\nexport function TransactionalEmail({\n  preheader,\n  heading,\n  body,\n  action,\n  detail,\n  logoUrl = FLOPAY_EMAIL_LOGO_URL,\n  footer,\n}: TransactionalEmailProps) {\n  return (\n    <Html lang=\"en\">\n      <Head>\n        <meta content=\"width=device-width, initial-scale=1.0\" name=\"viewport\" />\n        <style>{`\n          :root {\n            color-scheme: light dark;\n            supported-color-schemes: light dark;\n          }\n\n          @media only screen and (max-width: 620px) {\n            .email-shell { padding: 0 !important; }\n            .email-card { border-left: 0 !important; border-radius: 0 !important; border-right: 0 !important; margin: 0 !important; width: 100% !important; }\n            .email-content { padding: 24px !important; }\n          }\n\n          @media (prefers-color-scheme: dark) {\n            .email-body { background-color: ${emailTheme.colors.darkBackground} !important; }\n            .email-shell { background-color: ${emailTheme.colors.darkBackground} !important; }\n            .email-card { background-color: ${emailTheme.colors.darkSurface} !important; border-color: ${emailTheme.colors.darkBorder} !important; }\n            .email-text { color: ${emailTheme.colors.darkText} !important; }\n            .email-muted { color: ${emailTheme.colors.darkTextSecondary} !important; }\n            .email-detail { background-color: ${emailTheme.colors.darkMuted} !important; border-color: ${emailTheme.colors.darkBorder} !important; }\n            .email-link { color: ${emailTheme.colors.brandLight} !important; }\n            .email-action { background-color: ${emailTheme.colors.darkText} !important; color: ${emailTheme.colors.darkBackground} !important; }\n            .email-divider { border-color: ${emailTheme.colors.darkBorder} !important; }\n          }\n        `}</style>\n      </Head>\n      <Preview>{preheader}</Preview>\n      <Body\n        className=\"email-body\"\n        style={{\n          backgroundColor: emailTheme.colors.background,\n          margin: 0,\n          padding: 0,\n        }}\n      >\n        <Section\n          className=\"email-shell\"\n          style={{\n            backgroundColor: emailTheme.colors.background,\n            color: emailTheme.colors.text,\n            fontFamily: emailTheme.font,\n            padding: '32px 12px',\n            width: '100%',\n          }}\n        >\n          <Container\n            className=\"email-card\"\n            style={{\n              backgroundColor: emailTheme.colors.surface,\n              border: `1px solid ${emailTheme.colors.border}`,\n              borderRadius: emailTheme.radius,\n              borderTop: `4px solid ${emailTheme.colors.brand}`,\n              margin: '0 auto',\n              maxWidth: emailTheme.width,\n              overflow: 'hidden',\n              width: '100%',\n            }}\n          >\n            <Section className=\"email-content\" style={{ padding: '40px' }}>\n              <Brand logoUrl={logoUrl} />\n              <Heading\n                as=\"h1\"\n                className=\"email-text\"\n                style={{\n                  color: emailTheme.colors.text,\n                  fontSize: '28px',\n                  fontWeight: 700,\n                  letterSpacing: '-0.02em',\n                  lineHeight: '36px',\n                  margin: '0 0 16px',\n                }}\n              >\n                {heading}\n              </Heading>\n              {body.map((paragraph, index) => (\n                <Text\n                  className=\"email-text\"\n                  key={`${index}-${paragraph}`}\n                  style={{\n                    color: emailTheme.colors.text,\n                    fontSize: '16px',\n                    lineHeight: '25px',\n                    margin: '0 0 16px',\n                  }}\n                >\n                  {paragraph}\n                </Text>\n              ))}\n              {detail ? <Detail detail={detail} /> : null}\n              {action ? (\n                <Button\n                  className=\"email-action\"\n                  href={action.href}\n                  style={{\n                    backgroundColor: emailTheme.colors.text,\n                    borderRadius: emailTheme.radius,\n                    color: emailTheme.colors.surface,\n                    fontSize: '16px',\n                    fontWeight: 700,\n                    lineHeight: '20px',\n                    marginTop: '8px',\n                    padding: '14px 24px',\n                    textDecoration: 'none',\n                  }}\n                >\n                  {action.label}\n                </Button>\n              ) : null}\n              <EmailFooter overrides={footer} />\n            </Section>\n          </Container>\n        </Section>\n      </Body>\n    </Html>\n  );\n}\n\nexport function renderTransactionalEmail(\n  props: TransactionalEmailProps,\n): RenderedTransactionalEmail {\n  const markup = renderToStaticMarkup(<TransactionalEmail {...props} />);\n  const html = `<!doctype html>${markup.replace(\n    /<link\\b(?=[^>]*\\brel=\"preload\")(?=[^>]*\\bas=\"image\")[^>]*\\/?>/gi,\n    '',\n  )}`;\n\n  return {\n    html,\n    text: toPlainText(html, {\n      selectors: [\n        { selector: 'h1', options: { uppercase: false } },\n        {\n          selector: 'tr[data-key-value-row=\"true\"]',\n          format: 'block',\n          options: { leadingLineBreaks: 1, trailingLineBreaks: 1 },\n        },\n      ],\n    }),\n  };\n}\n","/**\n * Email clients cannot resolve the package's CSS custom properties. Keep this\n * literal palette aligned with styles/tokens.css and cover changes in the\n * rendered-output snapshot.\n */\nexport const emailTheme = {\n  colors: {\n    background: '#f7f7f8',\n    surface: '#ffffff',\n    muted: '#f0f0f2',\n    border: '#e5e5e8',\n    text: '#0a0a0b',\n    textSecondary: '#52525b',\n    brand: '#1785e0',\n    brandLight: '#4ba6ec',\n    accessibleLink: '#0969b3',\n    darkBackground: '#0a0a0b',\n    darkSurface: '#141416',\n    darkMuted: '#1c1c1f',\n    darkBorder: '#27272a',\n    darkText: '#fafafa',\n    darkTextSecondary: '#a1a1aa',\n  },\n  radius: '8px',\n  font: 'Inter, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif',\n  fontMono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',\n  width: '600px',\n} as const;\n"],"mappings":"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","names":[]}

package/dist/email/index.d.cts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+
+declare const FLOPAY_EMAIL_LOGO_URL = "https://flopay.com/logo.png";
+interface TransactionalEmailAction {
+    label: string;
+    href: string;
+}
+interface TransactionalCodeDetail {
+    kind: 'code';
+    value: string;
+    caption?: string;
+}
+interface TransactionalKeyValueDetail {
+    kind: 'keyValue';
+    rows: {
+        label: string;
+        value: string;
+    }[];
+}
+type TransactionalEmailDetail = TransactionalCodeDetail | TransactionalKeyValueDetail;
+interface TransactionalFooter {
+    companyName: string;
+    supportLabel: string;
+    supportUrl: string;
+    privacyUrl: string;
+    termsUrl: string;
+    notice: string;
+    address: string;
+}
+interface TransactionalEmailProps {
+    preheader: string;
+    heading: string;
+    body: string[];
+    action?: TransactionalEmailAction;
+    detail?: TransactionalEmailDetail;
+    logoUrl?: string;
+    footer?: Partial<TransactionalFooter>;
+}
+interface RenderedTransactionalEmail {
+    html: string;
+    text: string;
+}
+declare function TransactionalEmail({ preheader, heading, body, action, detail, logoUrl, footer, }: TransactionalEmailProps): react.JSX.Element;
+declare function renderTransactionalEmail(props: TransactionalEmailProps): RenderedTransactionalEmail;
+
+export { FLOPAY_EMAIL_LOGO_URL, type RenderedTransactionalEmail, type TransactionalCodeDetail, TransactionalEmail, type TransactionalEmailAction, type TransactionalEmailDetail, type TransactionalEmailProps, type TransactionalFooter, type TransactionalKeyValueDetail, renderTransactionalEmail };

package/dist/email/index.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+
+declare const FLOPAY_EMAIL_LOGO_URL = "https://flopay.com/logo.png";
+interface TransactionalEmailAction {
+    label: string;
+    href: string;
+}
+interface TransactionalCodeDetail {
+    kind: 'code';
+    value: string;
+    caption?: string;
+}
+interface TransactionalKeyValueDetail {
+    kind: 'keyValue';
+    rows: {
+        label: string;
+        value: string;
+    }[];
+}
+type TransactionalEmailDetail = TransactionalCodeDetail | TransactionalKeyValueDetail;
+interface TransactionalFooter {
+    companyName: string;
+    supportLabel: string;
+    supportUrl: string;
+    privacyUrl: string;
+    termsUrl: string;
+    notice: string;
+    address: string;
+}
+interface TransactionalEmailProps {
+    preheader: string;
+    heading: string;
+    body: string[];
+    action?: TransactionalEmailAction;
+    detail?: TransactionalEmailDetail;
+    logoUrl?: string;
+    footer?: Partial<TransactionalFooter>;
+}
+interface RenderedTransactionalEmail {
+    html: string;
+    text: string;
+}
+declare function TransactionalEmail({ preheader, heading, body, action, detail, logoUrl, footer, }: TransactionalEmailProps): react.JSX.Element;
+declare function renderTransactionalEmail(props: TransactionalEmailProps): RenderedTransactionalEmail;
+
+export { FLOPAY_EMAIL_LOGO_URL, type RenderedTransactionalEmail, type TransactionalCodeDetail, TransactionalEmail, type TransactionalEmailAction, type TransactionalEmailDetail, type TransactionalEmailProps, type TransactionalFooter, type TransactionalKeyValueDetail, renderTransactionalEmail };