@lacspace/email-templates 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lacspace
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,164 @@
+'use strict';
+
+// src/index.ts
+var defaultTheme = {
+  brandColor: "#2563eb",
+  bg: "#f4f5f7",
+  cardBg: "#ffffff",
+  textColor: "#1f2937",
+  mutedColor: "#6b7280",
+  borderColor: "#e5e7eb",
+  fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif",
+  borderRadius: "12px"
+};
+function escapeHtml(input) {
+  return String(input).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function theme(t) {
+  return { ...defaultTheme, ...t };
+}
+function heading(text2, opts = {}) {
+  const t = theme(opts.theme);
+  const size = opts.level === 3 ? 18 : opts.level === 2 ? 22 : 26;
+  return `<h1 style="margin:0 0 12px;font-family:${t.fontFamily};font-size:${size}px;line-height:1.3;font-weight:700;color:${t.textColor};">${escapeHtml(text2)}</h1>`;
+}
+function text(content, opts = {}) {
+  const t = theme(opts.theme);
+  const color = opts.muted ? t.mutedColor : t.textColor;
+  return `<p style="margin:0 0 16px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${color};">${escapeHtml(content)}</p>`;
+}
+function html(raw) {
+  return raw;
+}
+function button(label, href, opts = {}) {
+  const t = theme(opts.theme);
+  const safeHref = escapeHtml(href);
+  return `<table role="presentation" cellpadding="0" cellspacing="0" style="margin:8px 0 20px;"><tr><td align="center" bgcolor="${t.brandColor}" style="border-radius:8px;">
+<a href="${safeHref}" target="_blank" style="display:inline-block;padding:12px 28px;font-family:${t.fontFamily};font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;border-radius:8px;background:${t.brandColor};">${escapeHtml(label)}</a>
+</td></tr></table>`;
+}
+function code(value, opts = {}) {
+  const t = theme(opts.theme);
+  return `<div style="margin:0 0 20px;padding:16px;text-align:center;background:${t.bg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};font-family:'SFMono-Regular',Consolas,Menlo,monospace;font-size:32px;font-weight:700;letter-spacing:8px;color:${t.textColor};">${escapeHtml(value)}</div>`;
+}
+function divider(opts = {}) {
+  const t = theme(opts.theme);
+  return `<hr style="border:none;border-top:1px solid ${t.borderColor};margin:24px 0;" />`;
+}
+function spacer(height = 16) {
+  return `<div style="line-height:${height}px;height:${height}px;">&nbsp;</div>`;
+}
+function image(src, opts = {}) {
+  const w = opts.width ? `width="${opts.width}" style="max-width:100%;height:auto;display:block;margin:0 auto;"` : `style="max-width:100%;height:auto;display:block;margin:0 auto;"`;
+  return `<img src="${escapeHtml(src)}" alt="${escapeHtml(opts.alt ?? "")}" ${w} />`;
+}
+function list(items, opts = {}) {
+  const t = theme(opts.theme);
+  const lis = items.map(
+    (i) => `<li style="margin:0 0 8px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${t.textColor};">${escapeHtml(i)}</li>`
+  ).join("");
+  return `<ul style="margin:0 0 16px;padding-left:20px;">${lis}</ul>`;
+}
+function keyValue(rows, opts = {}) {
+  const t = theme(opts.theme);
+  const body = rows.map(
+    ([k, v]) => `<tr><td style="padding:8px 0;font-family:${t.fontFamily};font-size:14px;color:${t.mutedColor};">${escapeHtml(k)}</td><td align="right" style="padding:8px 0;font-family:${t.fontFamily};font-size:14px;font-weight:600;color:${t.textColor};">${escapeHtml(v)}</td></tr>`
+  ).join("");
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 16px;border-top:1px solid ${t.borderColor};">${body}</table>`;
+}
+function render(opts, blocks) {
+  const t = theme(opts.theme);
+  const width = opts.width ?? 600;
+  const preheader = opts.preheader ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${escapeHtml(opts.preheader)}</div>` : "";
+  const brand = opts.logoUrl ? `<img src="${escapeHtml(opts.logoUrl)}" alt="${escapeHtml(opts.brandName ?? "")}" height="32" style="display:block;height:32px;" />` : opts.brandName ? `<span style="font-family:${t.fontFamily};font-size:18px;font-weight:700;color:${t.brandColor};">${escapeHtml(opts.brandName)}</span>` : "";
+  const header = brand ? `<tr><td style="padding:0 0 20px;">${brand}</td></tr>` : "";
+  const footer = opts.footer ? `<tr><td style="padding:24px 8px 0;font-family:${t.fontFamily};font-size:12px;line-height:1.6;color:${t.mutedColor};text-align:center;">${opts.footer}</td></tr>` : "";
+  return `<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<meta name="x-apple-disable-message-reformatting" />
+<title>${escapeHtml(opts.title ?? "")}</title>
+<style>
+  @media only screen and (max-width:600px){ .container{width:100%!important;} .px{padding-left:20px!important;padding-right:20px!important;} }
+  @media (prefers-color-scheme: dark){ body,.bg{background:#0b0b12!important;} .card{background:#16161f!important;} .t{color:#e5e7eb!important;} }
+</style>
+</head>
+<body class="bg" style="margin:0;padding:0;background:${t.bg};">
+${preheader}
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:${t.bg};padding:32px 0;">
+<tr><td align="center">
+<table role="presentation" width="${width}" class="container" cellpadding="0" cellspacing="0" style="width:${width}px;max-width:${width}px;">
+${header}
+<tr><td class="card px" style="background:${t.cardBg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};padding:32px;">
+${blocks.join("\n")}
+</td></tr>
+${footer}
+</table>
+</td></tr>
+</table>
+</body>
+</html>`;
+}
+function otpEmail(o) {
+  return render(
+    { title: o.heading ?? "Your verification code", preheader: `Your code is ${o.code}`, ...o },
+    [
+      heading(o.heading ?? "Verify your email", { theme: o.theme }),
+      text(o.message ?? "Use the code below to continue. Never share it with anyone.", {
+        theme: o.theme
+      }),
+      code(o.code, { theme: o.theme }),
+      text(
+        `This code expires in ${o.expiresMinutes ?? 10} minutes.`,
+        { muted: true, theme: o.theme }
+      )
+    ]
+  );
+}
+function welcomeEmail(o) {
+  const blocks = [
+    heading(o.name ? `Welcome, ${o.name}!` : "Welcome aboard!", { theme: o.theme }),
+    text(o.message ?? "We're thrilled to have you. Let's get you started.", { theme: o.theme })
+  ];
+  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? "Get started", o.ctaHref, { theme: o.theme }));
+  return render({ title: "Welcome", preheader: o.message, ...o }, blocks);
+}
+function alertEmail(o) {
+  const blocks = [
+    heading(o.title, { theme: o.theme }),
+    text(o.message, { theme: o.theme })
+  ];
+  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? "View details", o.ctaHref, { theme: o.theme }));
+  return render({ preheader: o.message, ...o }, blocks);
+}
+function invoiceEmail(o) {
+  const blocks = [
+    heading(o.heading ?? "Payment receipt", { theme: o.theme }),
+    text(o.intro ?? "Thanks for your payment. Here's your receipt.", { theme: o.theme }),
+    keyValue(o.total ? [...o.rows, o.total] : o.rows, { theme: o.theme })
+  ];
+  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? "View invoice", o.ctaHref, { theme: o.theme }));
+  return render({ title: o.heading ?? "Receipt", ...o }, blocks);
+}
+
+exports.alertEmail = alertEmail;
+exports.button = button;
+exports.code = code;
+exports.defaultTheme = defaultTheme;
+exports.divider = divider;
+exports.escapeHtml = escapeHtml;
+exports.heading = heading;
+exports.html = html;
+exports.image = image;
+exports.invoiceEmail = invoiceEmail;
+exports.keyValue = keyValue;
+exports.list = list;
+exports.otpEmail = otpEmail;
+exports.render = render;
+exports.spacer = spacer;
+exports.text = text;
+exports.welcomeEmail = welcomeEmail;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["text"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * @lacspace/email-templates\n * Compose bulletproof, responsive HTML emails from simple blocks.\n *\n * No more hand-writing <table> soup. Components return email-client-safe HTML\n * with inline styles; `render()` wraps them in a responsive, dark-mode-aware\n * layout. Ships with ready-made OTP / welcome / alert / invoice templates.\n *\n * Zero dependencies · isomorphic · fully typed.\n */\n\nexport interface Theme {\n  brandColor: string;\n  bg: string;\n  cardBg: string;\n  textColor: string;\n  mutedColor: string;\n  borderColor: string;\n  fontFamily: string;\n  borderRadius: string;\n}\n\nexport const defaultTheme: Theme = {\n  brandColor: \"#2563eb\",\n  bg: \"#f4f5f7\",\n  cardBg: \"#ffffff\",\n  textColor: \"#1f2937\",\n  mutedColor: \"#6b7280\",\n  borderColor: \"#e5e7eb\",\n  fontFamily:\n    \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif\",\n  borderRadius: \"12px\",\n};\n\n/** Escape untrusted text before placing it in HTML. */\nexport function escapeHtml(input: string): string {\n  return String(input)\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\");\n}\n\nfunction theme(t?: Partial<Theme>): Theme {\n  return { ...defaultTheme, ...t };\n}\n\n/* ------------------------------------------------------------------ *\n * Blocks — each returns an HTML string. Compose them into render().\n * ------------------------------------------------------------------ */\n\nexport function heading(text: string, opts: { level?: 1 | 2 | 3; theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  const size = opts.level === 3 ? 18 : opts.level === 2 ? 22 : 26;\n  return `<h1 style=\"margin:0 0 12px;font-family:${t.fontFamily};font-size:${size}px;line-height:1.3;font-weight:700;color:${t.textColor};\">${escapeHtml(text)}</h1>`;\n}\n\nexport function text(content: string, opts: { muted?: boolean; theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  const color = opts.muted ? t.mutedColor : t.textColor;\n  return `<p style=\"margin:0 0 16px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${color};\">${escapeHtml(content)}</p>`;\n}\n\n/** Raw HTML passthrough — you are responsible for escaping. */\nexport function html(raw: string): string {\n  return raw;\n}\n\n/** A bulletproof, table-based CTA button that renders in Outlook too. */\nexport function button(\n  label: string,\n  href: string,\n  opts: { theme?: Partial<Theme> } = {},\n): string {\n  const t = theme(opts.theme);\n  const safeHref = escapeHtml(href);\n  return `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:8px 0 20px;\"><tr><td align=\"center\" bgcolor=\"${t.brandColor}\" style=\"border-radius:8px;\">\n<a href=\"${safeHref}\" target=\"_blank\" style=\"display:inline-block;padding:12px 28px;font-family:${t.fontFamily};font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;border-radius:8px;background:${t.brandColor};\">${escapeHtml(label)}</a>\n</td></tr></table>`;\n}\n\n/** A large, letter-spaced code block — perfect for OTPs. */\nexport function code(value: string, opts: { theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  return `<div style=\"margin:0 0 20px;padding:16px;text-align:center;background:${t.bg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};font-family:'SFMono-Regular',Consolas,Menlo,monospace;font-size:32px;font-weight:700;letter-spacing:8px;color:${t.textColor};\">${escapeHtml(value)}</div>`;\n}\n\nexport function divider(opts: { theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  return `<hr style=\"border:none;border-top:1px solid ${t.borderColor};margin:24px 0;\" />`;\n}\n\nexport function spacer(height = 16): string {\n  return `<div style=\"line-height:${height}px;height:${height}px;\">&nbsp;</div>`;\n}\n\nexport function image(src: string, opts: { alt?: string; width?: number } = {}): string {\n  const w = opts.width ? `width=\"${opts.width}\" style=\"max-width:100%;height:auto;display:block;margin:0 auto;\"` : `style=\"max-width:100%;height:auto;display:block;margin:0 auto;\"`;\n  return `<img src=\"${escapeHtml(src)}\" alt=\"${escapeHtml(opts.alt ?? \"\")}\" ${w} />`;\n}\n\nexport function list(items: string[], opts: { theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  const lis = items\n    .map(\n      (i) =>\n        `<li style=\"margin:0 0 8px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${t.textColor};\">${escapeHtml(i)}</li>`,\n    )\n    .join(\"\");\n  return `<ul style=\"margin:0 0 16px;padding-left:20px;\">${lis}</ul>`;\n}\n\n/** A simple two-column key/value table — great for invoices & receipts. */\nexport function keyValue(\n  rows: [string, string][],\n  opts: { theme?: Partial<Theme> } = {},\n): string {\n  const t = theme(opts.theme);\n  const body = rows\n    .map(\n      ([k, v]) =>\n        `<tr><td style=\"padding:8px 0;font-family:${t.fontFamily};font-size:14px;color:${t.mutedColor};\">${escapeHtml(k)}</td><td align=\"right\" style=\"padding:8px 0;font-family:${t.fontFamily};font-size:14px;font-weight:600;color:${t.textColor};\">${escapeHtml(v)}</td></tr>`,\n    )\n    .join(\"\");\n  return `<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:0 0 16px;border-top:1px solid ${t.borderColor};\">${body}</table>`;\n}\n\n/* ------------------------------------------------------------------ *\n * Layout\n * ------------------------------------------------------------------ */\n\nexport interface EmailOptions {\n  title?: string;\n  /** Hidden inbox-preview text. */\n  preheader?: string;\n  theme?: Partial<Theme>;\n  /** Footer HTML/text (already trusted). */\n  footer?: string;\n  brandName?: string;\n  logoUrl?: string;\n  width?: number;\n}\n\n/** Wrap composed blocks in a responsive, email-client-safe document. */\nexport function render(opts: EmailOptions, blocks: string[]): string {\n  const t = theme(opts.theme);\n  const width = opts.width ?? 600;\n  const preheader = opts.preheader\n    ? `<div style=\"display:none;max-height:0;overflow:hidden;opacity:0;\">${escapeHtml(opts.preheader)}</div>`\n    : \"\";\n  const brand = opts.logoUrl\n    ? `<img src=\"${escapeHtml(opts.logoUrl)}\" alt=\"${escapeHtml(opts.brandName ?? \"\")}\" height=\"32\" style=\"display:block;height:32px;\" />`\n    : opts.brandName\n      ? `<span style=\"font-family:${t.fontFamily};font-size:18px;font-weight:700;color:${t.brandColor};\">${escapeHtml(opts.brandName)}</span>`\n      : \"\";\n  const header = brand ? `<tr><td style=\"padding:0 0 20px;\">${brand}</td></tr>` : \"\";\n  const footer = opts.footer\n    ? `<tr><td style=\"padding:24px 8px 0;font-family:${t.fontFamily};font-size:12px;line-height:1.6;color:${t.mutedColor};text-align:center;\">${opts.footer}</td></tr>`\n    : \"\";\n\n  return `<!DOCTYPE html>\n<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<meta name=\"x-apple-disable-message-reformatting\" />\n<title>${escapeHtml(opts.title ?? \"\")}</title>\n<style>\n  @media only screen and (max-width:600px){ .container{width:100%!important;} .px{padding-left:20px!important;padding-right:20px!important;} }\n  @media (prefers-color-scheme: dark){ body,.bg{background:#0b0b12!important;} .card{background:#16161f!important;} .t{color:#e5e7eb!important;} }\n</style>\n</head>\n<body class=\"bg\" style=\"margin:0;padding:0;background:${t.bg};\">\n${preheader}\n<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" class=\"bg\" style=\"background:${t.bg};padding:32px 0;\">\n<tr><td align=\"center\">\n<table role=\"presentation\" width=\"${width}\" class=\"container\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:${width}px;max-width:${width}px;\">\n${header}\n<tr><td class=\"card px\" style=\"background:${t.cardBg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};padding:32px;\">\n${blocks.join(\"\\n\")}\n</td></tr>\n${footer}\n</table>\n</td></tr>\n</table>\n</body>\n</html>`;\n}\n\n/* ------------------------------------------------------------------ *\n * Ready-made templates\n * ------------------------------------------------------------------ */\n\nexport interface BrandInfo {\n  brandName?: string;\n  logoUrl?: string;\n  theme?: Partial<Theme>;\n  footer?: string;\n}\n\n/** One-time-passcode email. */\nexport function otpEmail(\n  o: { code: string; heading?: string; message?: string; expiresMinutes?: number } & BrandInfo,\n): string {\n  return render(\n    { title: o.heading ?? \"Your verification code\", preheader: `Your code is ${o.code}`, ...o },\n    [\n      heading(o.heading ?? \"Verify your email\", { theme: o.theme }),\n      text(o.message ?? \"Use the code below to continue. Never share it with anyone.\", {\n        theme: o.theme,\n      }),\n      code(o.code, { theme: o.theme }),\n      text(\n        `This code expires in ${o.expiresMinutes ?? 10} minutes.`,\n        { muted: true, theme: o.theme },\n      ),\n    ],\n  );\n}\n\n/** Welcome / onboarding email with a CTA. */\nexport function welcomeEmail(\n  o: { name?: string; message?: string; ctaLabel?: string; ctaHref?: string } & BrandInfo,\n): string {\n  const blocks = [\n    heading(o.name ? `Welcome, ${o.name}!` : \"Welcome aboard!\", { theme: o.theme }),\n    text(o.message ?? \"We're thrilled to have you. Let's get you started.\", { theme: o.theme }),\n  ];\n  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? \"Get started\", o.ctaHref, { theme: o.theme }));\n  return render({ title: \"Welcome\", preheader: o.message, ...o }, blocks);\n}\n\n/** Alert / notification email. */\nexport function alertEmail(\n  o: { title: string; message: string; ctaLabel?: string; ctaHref?: string } & BrandInfo,\n): string {\n  const blocks = [\n    heading(o.title, { theme: o.theme }),\n    text(o.message, { theme: o.theme }),\n  ];\n  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? \"View details\", o.ctaHref, { theme: o.theme }));\n  return render({ preheader: o.message, ...o }, blocks);\n}\n\n/** Invoice / receipt email. */\nexport function invoiceEmail(\n  o: {\n    heading?: string;\n    intro?: string;\n    rows: [string, string][];\n    total?: [string, string];\n    ctaLabel?: string;\n    ctaHref?: string;\n  } & BrandInfo,\n): string {\n  const blocks = [\n    heading(o.heading ?? \"Payment receipt\", { theme: o.theme }),\n    text(o.intro ?? \"Thanks for your payment. Here's your receipt.\", { theme: o.theme }),\n    keyValue(o.total ? [...o.rows, o.total] : o.rows, { theme: o.theme }),\n  ];\n  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? \"View invoice\", o.ctaHref, { theme: o.theme }));\n  return render({ title: o.heading ?? \"Receipt\", ...o }, blocks);\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,107 @@
+/**
+ * @lacspace/email-templates
+ * Compose bulletproof, responsive HTML emails from simple blocks.
+ *
+ * No more hand-writing <table> soup. Components return email-client-safe HTML
+ * with inline styles; `render()` wraps them in a responsive, dark-mode-aware
+ * layout. Ships with ready-made OTP / welcome / alert / invoice templates.
+ *
+ * Zero dependencies · isomorphic · fully typed.
+ */
+interface Theme {
+    brandColor: string;
+    bg: string;
+    cardBg: string;
+    textColor: string;
+    mutedColor: string;
+    borderColor: string;
+    fontFamily: string;
+    borderRadius: string;
+}
+declare const defaultTheme: Theme;
+/** Escape untrusted text before placing it in HTML. */
+declare function escapeHtml(input: string): string;
+declare function heading(text: string, opts?: {
+    level?: 1 | 2 | 3;
+    theme?: Partial<Theme>;
+}): string;
+declare function text(content: string, opts?: {
+    muted?: boolean;
+    theme?: Partial<Theme>;
+}): string;
+/** Raw HTML passthrough — you are responsible for escaping. */
+declare function html(raw: string): string;
+/** A bulletproof, table-based CTA button that renders in Outlook too. */
+declare function button(label: string, href: string, opts?: {
+    theme?: Partial<Theme>;
+}): string;
+/** A large, letter-spaced code block — perfect for OTPs. */
+declare function code(value: string, opts?: {
+    theme?: Partial<Theme>;
+}): string;
+declare function divider(opts?: {
+    theme?: Partial<Theme>;
+}): string;
+declare function spacer(height?: number): string;
+declare function image(src: string, opts?: {
+    alt?: string;
+    width?: number;
+}): string;
+declare function list(items: string[], opts?: {
+    theme?: Partial<Theme>;
+}): string;
+/** A simple two-column key/value table — great for invoices & receipts. */
+declare function keyValue(rows: [string, string][], opts?: {
+    theme?: Partial<Theme>;
+}): string;
+interface EmailOptions {
+    title?: string;
+    /** Hidden inbox-preview text. */
+    preheader?: string;
+    theme?: Partial<Theme>;
+    /** Footer HTML/text (already trusted). */
+    footer?: string;
+    brandName?: string;
+    logoUrl?: string;
+    width?: number;
+}
+/** Wrap composed blocks in a responsive, email-client-safe document. */
+declare function render(opts: EmailOptions, blocks: string[]): string;
+interface BrandInfo {
+    brandName?: string;
+    logoUrl?: string;
+    theme?: Partial<Theme>;
+    footer?: string;
+}
+/** One-time-passcode email. */
+declare function otpEmail(o: {
+    code: string;
+    heading?: string;
+    message?: string;
+    expiresMinutes?: number;
+} & BrandInfo): string;
+/** Welcome / onboarding email with a CTA. */
+declare function welcomeEmail(o: {
+    name?: string;
+    message?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+} & BrandInfo): string;
+/** Alert / notification email. */
+declare function alertEmail(o: {
+    title: string;
+    message: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+} & BrandInfo): string;
+/** Invoice / receipt email. */
+declare function invoiceEmail(o: {
+    heading?: string;
+    intro?: string;
+    rows: [string, string][];
+    total?: [string, string];
+    ctaLabel?: string;
+    ctaHref?: string;
+} & BrandInfo): string;
+
+export { type BrandInfo, type EmailOptions, type Theme, alertEmail, button, code, defaultTheme, divider, escapeHtml, heading, html, image, invoiceEmail, keyValue, list, otpEmail, render, spacer, text, welcomeEmail };

package/dist/index.d.ts

@@ -0,0 +1,107 @@
+/**
+ * @lacspace/email-templates
+ * Compose bulletproof, responsive HTML emails from simple blocks.
+ *
+ * No more hand-writing <table> soup. Components return email-client-safe HTML
+ * with inline styles; `render()` wraps them in a responsive, dark-mode-aware
+ * layout. Ships with ready-made OTP / welcome / alert / invoice templates.
+ *
+ * Zero dependencies · isomorphic · fully typed.
+ */
+interface Theme {
+    brandColor: string;
+    bg: string;
+    cardBg: string;
+    textColor: string;
+    mutedColor: string;
+    borderColor: string;
+    fontFamily: string;
+    borderRadius: string;
+}
+declare const defaultTheme: Theme;
+/** Escape untrusted text before placing it in HTML. */
+declare function escapeHtml(input: string): string;
+declare function heading(text: string, opts?: {
+    level?: 1 | 2 | 3;
+    theme?: Partial<Theme>;
+}): string;
+declare function text(content: string, opts?: {
+    muted?: boolean;
+    theme?: Partial<Theme>;
+}): string;
+/** Raw HTML passthrough — you are responsible for escaping. */
+declare function html(raw: string): string;
+/** A bulletproof, table-based CTA button that renders in Outlook too. */
+declare function button(label: string, href: string, opts?: {
+    theme?: Partial<Theme>;
+}): string;
+/** A large, letter-spaced code block — perfect for OTPs. */
+declare function code(value: string, opts?: {
+    theme?: Partial<Theme>;
+}): string;
+declare function divider(opts?: {
+    theme?: Partial<Theme>;
+}): string;
+declare function spacer(height?: number): string;
+declare function image(src: string, opts?: {
+    alt?: string;
+    width?: number;
+}): string;
+declare function list(items: string[], opts?: {
+    theme?: Partial<Theme>;
+}): string;
+/** A simple two-column key/value table — great for invoices & receipts. */
+declare function keyValue(rows: [string, string][], opts?: {
+    theme?: Partial<Theme>;
+}): string;
+interface EmailOptions {
+    title?: string;
+    /** Hidden inbox-preview text. */
+    preheader?: string;
+    theme?: Partial<Theme>;
+    /** Footer HTML/text (already trusted). */
+    footer?: string;
+    brandName?: string;
+    logoUrl?: string;
+    width?: number;
+}
+/** Wrap composed blocks in a responsive, email-client-safe document. */
+declare function render(opts: EmailOptions, blocks: string[]): string;
+interface BrandInfo {
+    brandName?: string;
+    logoUrl?: string;
+    theme?: Partial<Theme>;
+    footer?: string;
+}
+/** One-time-passcode email. */
+declare function otpEmail(o: {
+    code: string;
+    heading?: string;
+    message?: string;
+    expiresMinutes?: number;
+} & BrandInfo): string;
+/** Welcome / onboarding email with a CTA. */
+declare function welcomeEmail(o: {
+    name?: string;
+    message?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+} & BrandInfo): string;
+/** Alert / notification email. */
+declare function alertEmail(o: {
+    title: string;
+    message: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+} & BrandInfo): string;
+/** Invoice / receipt email. */
+declare function invoiceEmail(o: {
+    heading?: string;
+    intro?: string;
+    rows: [string, string][];
+    total?: [string, string];
+    ctaLabel?: string;
+    ctaHref?: string;
+} & BrandInfo): string;
+
+export { type BrandInfo, type EmailOptions, type Theme, alertEmail, button, code, defaultTheme, divider, escapeHtml, heading, html, image, invoiceEmail, keyValue, list, otpEmail, render, spacer, text, welcomeEmail };

package/dist/index.js

@@ -0,0 +1,146 @@
+// src/index.ts
+var defaultTheme = {
+  brandColor: "#2563eb",
+  bg: "#f4f5f7",
+  cardBg: "#ffffff",
+  textColor: "#1f2937",
+  mutedColor: "#6b7280",
+  borderColor: "#e5e7eb",
+  fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif",
+  borderRadius: "12px"
+};
+function escapeHtml(input) {
+  return String(input).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function theme(t) {
+  return { ...defaultTheme, ...t };
+}
+function heading(text2, opts = {}) {
+  const t = theme(opts.theme);
+  const size = opts.level === 3 ? 18 : opts.level === 2 ? 22 : 26;
+  return `<h1 style="margin:0 0 12px;font-family:${t.fontFamily};font-size:${size}px;line-height:1.3;font-weight:700;color:${t.textColor};">${escapeHtml(text2)}</h1>`;
+}
+function text(content, opts = {}) {
+  const t = theme(opts.theme);
+  const color = opts.muted ? t.mutedColor : t.textColor;
+  return `<p style="margin:0 0 16px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${color};">${escapeHtml(content)}</p>`;
+}
+function html(raw) {
+  return raw;
+}
+function button(label, href, opts = {}) {
+  const t = theme(opts.theme);
+  const safeHref = escapeHtml(href);
+  return `<table role="presentation" cellpadding="0" cellspacing="0" style="margin:8px 0 20px;"><tr><td align="center" bgcolor="${t.brandColor}" style="border-radius:8px;">
+<a href="${safeHref}" target="_blank" style="display:inline-block;padding:12px 28px;font-family:${t.fontFamily};font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;border-radius:8px;background:${t.brandColor};">${escapeHtml(label)}</a>
+</td></tr></table>`;
+}
+function code(value, opts = {}) {
+  const t = theme(opts.theme);
+  return `<div style="margin:0 0 20px;padding:16px;text-align:center;background:${t.bg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};font-family:'SFMono-Regular',Consolas,Menlo,monospace;font-size:32px;font-weight:700;letter-spacing:8px;color:${t.textColor};">${escapeHtml(value)}</div>`;
+}
+function divider(opts = {}) {
+  const t = theme(opts.theme);
+  return `<hr style="border:none;border-top:1px solid ${t.borderColor};margin:24px 0;" />`;
+}
+function spacer(height = 16) {
+  return `<div style="line-height:${height}px;height:${height}px;">&nbsp;</div>`;
+}
+function image(src, opts = {}) {
+  const w = opts.width ? `width="${opts.width}" style="max-width:100%;height:auto;display:block;margin:0 auto;"` : `style="max-width:100%;height:auto;display:block;margin:0 auto;"`;
+  return `<img src="${escapeHtml(src)}" alt="${escapeHtml(opts.alt ?? "")}" ${w} />`;
+}
+function list(items, opts = {}) {
+  const t = theme(opts.theme);
+  const lis = items.map(
+    (i) => `<li style="margin:0 0 8px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${t.textColor};">${escapeHtml(i)}</li>`
+  ).join("");
+  return `<ul style="margin:0 0 16px;padding-left:20px;">${lis}</ul>`;
+}
+function keyValue(rows, opts = {}) {
+  const t = theme(opts.theme);
+  const body = rows.map(
+    ([k, v]) => `<tr><td style="padding:8px 0;font-family:${t.fontFamily};font-size:14px;color:${t.mutedColor};">${escapeHtml(k)}</td><td align="right" style="padding:8px 0;font-family:${t.fontFamily};font-size:14px;font-weight:600;color:${t.textColor};">${escapeHtml(v)}</td></tr>`
+  ).join("");
+  return `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 16px;border-top:1px solid ${t.borderColor};">${body}</table>`;
+}
+function render(opts, blocks) {
+  const t = theme(opts.theme);
+  const width = opts.width ?? 600;
+  const preheader = opts.preheader ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${escapeHtml(opts.preheader)}</div>` : "";
+  const brand = opts.logoUrl ? `<img src="${escapeHtml(opts.logoUrl)}" alt="${escapeHtml(opts.brandName ?? "")}" height="32" style="display:block;height:32px;" />` : opts.brandName ? `<span style="font-family:${t.fontFamily};font-size:18px;font-weight:700;color:${t.brandColor};">${escapeHtml(opts.brandName)}</span>` : "";
+  const header = brand ? `<tr><td style="padding:0 0 20px;">${brand}</td></tr>` : "";
+  const footer = opts.footer ? `<tr><td style="padding:24px 8px 0;font-family:${t.fontFamily};font-size:12px;line-height:1.6;color:${t.mutedColor};text-align:center;">${opts.footer}</td></tr>` : "";
+  return `<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<meta name="x-apple-disable-message-reformatting" />
+<title>${escapeHtml(opts.title ?? "")}</title>
+<style>
+  @media only screen and (max-width:600px){ .container{width:100%!important;} .px{padding-left:20px!important;padding-right:20px!important;} }
+  @media (prefers-color-scheme: dark){ body,.bg{background:#0b0b12!important;} .card{background:#16161f!important;} .t{color:#e5e7eb!important;} }
+</style>
+</head>
+<body class="bg" style="margin:0;padding:0;background:${t.bg};">
+${preheader}
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:${t.bg};padding:32px 0;">
+<tr><td align="center">
+<table role="presentation" width="${width}" class="container" cellpadding="0" cellspacing="0" style="width:${width}px;max-width:${width}px;">
+${header}
+<tr><td class="card px" style="background:${t.cardBg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};padding:32px;">
+${blocks.join("\n")}
+</td></tr>
+${footer}
+</table>
+</td></tr>
+</table>
+</body>
+</html>`;
+}
+function otpEmail(o) {
+  return render(
+    { title: o.heading ?? "Your verification code", preheader: `Your code is ${o.code}`, ...o },
+    [
+      heading(o.heading ?? "Verify your email", { theme: o.theme }),
+      text(o.message ?? "Use the code below to continue. Never share it with anyone.", {
+        theme: o.theme
+      }),
+      code(o.code, { theme: o.theme }),
+      text(
+        `This code expires in ${o.expiresMinutes ?? 10} minutes.`,
+        { muted: true, theme: o.theme }
+      )
+    ]
+  );
+}
+function welcomeEmail(o) {
+  const blocks = [
+    heading(o.name ? `Welcome, ${o.name}!` : "Welcome aboard!", { theme: o.theme }),
+    text(o.message ?? "We're thrilled to have you. Let's get you started.", { theme: o.theme })
+  ];
+  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? "Get started", o.ctaHref, { theme: o.theme }));
+  return render({ title: "Welcome", preheader: o.message, ...o }, blocks);
+}
+function alertEmail(o) {
+  const blocks = [
+    heading(o.title, { theme: o.theme }),
+    text(o.message, { theme: o.theme })
+  ];
+  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? "View details", o.ctaHref, { theme: o.theme }));
+  return render({ preheader: o.message, ...o }, blocks);
+}
+function invoiceEmail(o) {
+  const blocks = [
+    heading(o.heading ?? "Payment receipt", { theme: o.theme }),
+    text(o.intro ?? "Thanks for your payment. Here's your receipt.", { theme: o.theme }),
+    keyValue(o.total ? [...o.rows, o.total] : o.rows, { theme: o.theme })
+  ];
+  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? "View invoice", o.ctaHref, { theme: o.theme }));
+  return render({ title: o.heading ?? "Receipt", ...o }, blocks);
+}
+
+export { alertEmail, button, code, defaultTheme, divider, escapeHtml, heading, html, image, invoiceEmail, keyValue, list, otpEmail, render, spacer, text, welcomeEmail };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["text"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * @lacspace/email-templates\n * Compose bulletproof, responsive HTML emails from simple blocks.\n *\n * No more hand-writing <table> soup. Components return email-client-safe HTML\n * with inline styles; `render()` wraps them in a responsive, dark-mode-aware\n * layout. Ships with ready-made OTP / welcome / alert / invoice templates.\n *\n * Zero dependencies · isomorphic · fully typed.\n */\n\nexport interface Theme {\n  brandColor: string;\n  bg: string;\n  cardBg: string;\n  textColor: string;\n  mutedColor: string;\n  borderColor: string;\n  fontFamily: string;\n  borderRadius: string;\n}\n\nexport const defaultTheme: Theme = {\n  brandColor: \"#2563eb\",\n  bg: \"#f4f5f7\",\n  cardBg: \"#ffffff\",\n  textColor: \"#1f2937\",\n  mutedColor: \"#6b7280\",\n  borderColor: \"#e5e7eb\",\n  fontFamily:\n    \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif\",\n  borderRadius: \"12px\",\n};\n\n/** Escape untrusted text before placing it in HTML. */\nexport function escapeHtml(input: string): string {\n  return String(input)\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\")\n    .replace(/'/g, \"&#39;\");\n}\n\nfunction theme(t?: Partial<Theme>): Theme {\n  return { ...defaultTheme, ...t };\n}\n\n/* ------------------------------------------------------------------ *\n * Blocks — each returns an HTML string. Compose them into render().\n * ------------------------------------------------------------------ */\n\nexport function heading(text: string, opts: { level?: 1 | 2 | 3; theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  const size = opts.level === 3 ? 18 : opts.level === 2 ? 22 : 26;\n  return `<h1 style=\"margin:0 0 12px;font-family:${t.fontFamily};font-size:${size}px;line-height:1.3;font-weight:700;color:${t.textColor};\">${escapeHtml(text)}</h1>`;\n}\n\nexport function text(content: string, opts: { muted?: boolean; theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  const color = opts.muted ? t.mutedColor : t.textColor;\n  return `<p style=\"margin:0 0 16px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${color};\">${escapeHtml(content)}</p>`;\n}\n\n/** Raw HTML passthrough — you are responsible for escaping. */\nexport function html(raw: string): string {\n  return raw;\n}\n\n/** A bulletproof, table-based CTA button that renders in Outlook too. */\nexport function button(\n  label: string,\n  href: string,\n  opts: { theme?: Partial<Theme> } = {},\n): string {\n  const t = theme(opts.theme);\n  const safeHref = escapeHtml(href);\n  return `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:8px 0 20px;\"><tr><td align=\"center\" bgcolor=\"${t.brandColor}\" style=\"border-radius:8px;\">\n<a href=\"${safeHref}\" target=\"_blank\" style=\"display:inline-block;padding:12px 28px;font-family:${t.fontFamily};font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;border-radius:8px;background:${t.brandColor};\">${escapeHtml(label)}</a>\n</td></tr></table>`;\n}\n\n/** A large, letter-spaced code block — perfect for OTPs. */\nexport function code(value: string, opts: { theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  return `<div style=\"margin:0 0 20px;padding:16px;text-align:center;background:${t.bg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};font-family:'SFMono-Regular',Consolas,Menlo,monospace;font-size:32px;font-weight:700;letter-spacing:8px;color:${t.textColor};\">${escapeHtml(value)}</div>`;\n}\n\nexport function divider(opts: { theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  return `<hr style=\"border:none;border-top:1px solid ${t.borderColor};margin:24px 0;\" />`;\n}\n\nexport function spacer(height = 16): string {\n  return `<div style=\"line-height:${height}px;height:${height}px;\">&nbsp;</div>`;\n}\n\nexport function image(src: string, opts: { alt?: string; width?: number } = {}): string {\n  const w = opts.width ? `width=\"${opts.width}\" style=\"max-width:100%;height:auto;display:block;margin:0 auto;\"` : `style=\"max-width:100%;height:auto;display:block;margin:0 auto;\"`;\n  return `<img src=\"${escapeHtml(src)}\" alt=\"${escapeHtml(opts.alt ?? \"\")}\" ${w} />`;\n}\n\nexport function list(items: string[], opts: { theme?: Partial<Theme> } = {}): string {\n  const t = theme(opts.theme);\n  const lis = items\n    .map(\n      (i) =>\n        `<li style=\"margin:0 0 8px;font-family:${t.fontFamily};font-size:15px;line-height:1.6;color:${t.textColor};\">${escapeHtml(i)}</li>`,\n    )\n    .join(\"\");\n  return `<ul style=\"margin:0 0 16px;padding-left:20px;\">${lis}</ul>`;\n}\n\n/** A simple two-column key/value table — great for invoices & receipts. */\nexport function keyValue(\n  rows: [string, string][],\n  opts: { theme?: Partial<Theme> } = {},\n): string {\n  const t = theme(opts.theme);\n  const body = rows\n    .map(\n      ([k, v]) =>\n        `<tr><td style=\"padding:8px 0;font-family:${t.fontFamily};font-size:14px;color:${t.mutedColor};\">${escapeHtml(k)}</td><td align=\"right\" style=\"padding:8px 0;font-family:${t.fontFamily};font-size:14px;font-weight:600;color:${t.textColor};\">${escapeHtml(v)}</td></tr>`,\n    )\n    .join(\"\");\n  return `<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"margin:0 0 16px;border-top:1px solid ${t.borderColor};\">${body}</table>`;\n}\n\n/* ------------------------------------------------------------------ *\n * Layout\n * ------------------------------------------------------------------ */\n\nexport interface EmailOptions {\n  title?: string;\n  /** Hidden inbox-preview text. */\n  preheader?: string;\n  theme?: Partial<Theme>;\n  /** Footer HTML/text (already trusted). */\n  footer?: string;\n  brandName?: string;\n  logoUrl?: string;\n  width?: number;\n}\n\n/** Wrap composed blocks in a responsive, email-client-safe document. */\nexport function render(opts: EmailOptions, blocks: string[]): string {\n  const t = theme(opts.theme);\n  const width = opts.width ?? 600;\n  const preheader = opts.preheader\n    ? `<div style=\"display:none;max-height:0;overflow:hidden;opacity:0;\">${escapeHtml(opts.preheader)}</div>`\n    : \"\";\n  const brand = opts.logoUrl\n    ? `<img src=\"${escapeHtml(opts.logoUrl)}\" alt=\"${escapeHtml(opts.brandName ?? \"\")}\" height=\"32\" style=\"display:block;height:32px;\" />`\n    : opts.brandName\n      ? `<span style=\"font-family:${t.fontFamily};font-size:18px;font-weight:700;color:${t.brandColor};\">${escapeHtml(opts.brandName)}</span>`\n      : \"\";\n  const header = brand ? `<tr><td style=\"padding:0 0 20px;\">${brand}</td></tr>` : \"\";\n  const footer = opts.footer\n    ? `<tr><td style=\"padding:24px 8px 0;font-family:${t.fontFamily};font-size:12px;line-height:1.6;color:${t.mutedColor};text-align:center;\">${opts.footer}</td></tr>`\n    : \"\";\n\n  return `<!DOCTYPE html>\n<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n<meta name=\"x-apple-disable-message-reformatting\" />\n<title>${escapeHtml(opts.title ?? \"\")}</title>\n<style>\n  @media only screen and (max-width:600px){ .container{width:100%!important;} .px{padding-left:20px!important;padding-right:20px!important;} }\n  @media (prefers-color-scheme: dark){ body,.bg{background:#0b0b12!important;} .card{background:#16161f!important;} .t{color:#e5e7eb!important;} }\n</style>\n</head>\n<body class=\"bg\" style=\"margin:0;padding:0;background:${t.bg};\">\n${preheader}\n<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" class=\"bg\" style=\"background:${t.bg};padding:32px 0;\">\n<tr><td align=\"center\">\n<table role=\"presentation\" width=\"${width}\" class=\"container\" cellpadding=\"0\" cellspacing=\"0\" style=\"width:${width}px;max-width:${width}px;\">\n${header}\n<tr><td class=\"card px\" style=\"background:${t.cardBg};border:1px solid ${t.borderColor};border-radius:${t.borderRadius};padding:32px;\">\n${blocks.join(\"\\n\")}\n</td></tr>\n${footer}\n</table>\n</td></tr>\n</table>\n</body>\n</html>`;\n}\n\n/* ------------------------------------------------------------------ *\n * Ready-made templates\n * ------------------------------------------------------------------ */\n\nexport interface BrandInfo {\n  brandName?: string;\n  logoUrl?: string;\n  theme?: Partial<Theme>;\n  footer?: string;\n}\n\n/** One-time-passcode email. */\nexport function otpEmail(\n  o: { code: string; heading?: string; message?: string; expiresMinutes?: number } & BrandInfo,\n): string {\n  return render(\n    { title: o.heading ?? \"Your verification code\", preheader: `Your code is ${o.code}`, ...o },\n    [\n      heading(o.heading ?? \"Verify your email\", { theme: o.theme }),\n      text(o.message ?? \"Use the code below to continue. Never share it with anyone.\", {\n        theme: o.theme,\n      }),\n      code(o.code, { theme: o.theme }),\n      text(\n        `This code expires in ${o.expiresMinutes ?? 10} minutes.`,\n        { muted: true, theme: o.theme },\n      ),\n    ],\n  );\n}\n\n/** Welcome / onboarding email with a CTA. */\nexport function welcomeEmail(\n  o: { name?: string; message?: string; ctaLabel?: string; ctaHref?: string } & BrandInfo,\n): string {\n  const blocks = [\n    heading(o.name ? `Welcome, ${o.name}!` : \"Welcome aboard!\", { theme: o.theme }),\n    text(o.message ?? \"We're thrilled to have you. Let's get you started.\", { theme: o.theme }),\n  ];\n  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? \"Get started\", o.ctaHref, { theme: o.theme }));\n  return render({ title: \"Welcome\", preheader: o.message, ...o }, blocks);\n}\n\n/** Alert / notification email. */\nexport function alertEmail(\n  o: { title: string; message: string; ctaLabel?: string; ctaHref?: string } & BrandInfo,\n): string {\n  const blocks = [\n    heading(o.title, { theme: o.theme }),\n    text(o.message, { theme: o.theme }),\n  ];\n  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? \"View details\", o.ctaHref, { theme: o.theme }));\n  return render({ preheader: o.message, ...o }, blocks);\n}\n\n/** Invoice / receipt email. */\nexport function invoiceEmail(\n  o: {\n    heading?: string;\n    intro?: string;\n    rows: [string, string][];\n    total?: [string, string];\n    ctaLabel?: string;\n    ctaHref?: string;\n  } & BrandInfo,\n): string {\n  const blocks = [\n    heading(o.heading ?? \"Payment receipt\", { theme: o.theme }),\n    text(o.intro ?? \"Thanks for your payment. Here's your receipt.\", { theme: o.theme }),\n    keyValue(o.total ? [...o.rows, o.total] : o.rows, { theme: o.theme }),\n  ];\n  if (o.ctaHref) blocks.push(button(o.ctaLabel ?? \"View invoice\", o.ctaHref, { theme: o.theme }));\n  return render({ title: o.heading ?? \"Receipt\", ...o }, blocks);\n}\n"]}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@lacspace/email-templates",
+  "version": "1.0.0",
+  "description": "Compose bulletproof, responsive, dark-mode-aware HTML emails from simple blocks — buttons, OTP codes, invoices — with ready-made OTP/welcome/alert/invoice templates. Zero-dependency, isomorphic.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "email-template",
+    "html-email",
+    "responsive-email",
+    "transactional-email",
+    "email-builder",
+    "otp-email",
+    "invoice-email",
+    "mjml-alternative",
+    "typescript"
+  ],
+  "author": "Lacspace <contact@lacspace.com>",
+  "license": "MIT",
+  "homepage": "https://lacspace.com/packages",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lacspace/npm-packages.git",
+    "directory": "email-templates"
+  },
+  "bugs": {
+    "url": "https://github.com/lacspace/npm-packages/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}