@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/email/email.js

@@ -1,11 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Body, Button, Container, Head, Heading, Html, Link, Preview, Tailwind, Text, pixelBasedPreset } from "react-email";
+import { Body, Button, Column, Container, Head, Heading, Hr, Html, Link, Preview, Row, Section, Tailwind, Text, pixelBasedPreset } from "react-email";
 //#region src/email/email.tsx
-function tailwindTheme(theme) {
+function surfaceColors(theme, variant) {
+	if (variant === "contained") return theme.colors;
+	return {
+		...theme.colors,
+		card: theme.colors.background,
+		"card-foreground": theme.colors.foreground
+	};
+}
+function tailwindTheme(theme, variant) {
 	return {
 		presets: [pixelBasedPreset],
 		theme: { extend: {
-			colors: theme.colors,
+			colors: surfaceColors(theme, variant),
 			borderRadius: theme.radii,
 			minHeight: { control: theme.button.height },
 			padding: {
@@ -14,7 +22,8 @@ function tailwindTheme(theme) {
 			},
 			fontFamily: {
 				body: theme.fonts.body,
-				display: theme.fonts.display
+				display: theme.fonts.display,
+				mono: theme.fonts.mono
 			},
 			fontSize: {
 				...Object.fromEntries(Object.entries(theme.text).map(([name, { fontSize, ...options }]) => [name, [fontSize, options]])),
@@ -23,36 +32,78 @@ function tailwindTheme(theme) {
 		} }
 	};
 }
-function EmailLayout({ theme, preview, children, head, lang = "en", dir = "ltr" }) {
+function EmailLayout({ theme, preview, children, footer, footerPlacement = "inside", head, lang = "en", dir = "ltr", variant = "contained" }) {
+	const contained = variant === "contained";
+	const outside = contained && footerPlacement === "outside";
+	const backdrop = theme.colorScheme === "light" ? "bg-muted" : "bg-background";
 	return /* @__PURE__ */ jsx(Html, {
 		lang,
 		dir,
 		children: /* @__PURE__ */ jsxs(Tailwind, {
-			config: tailwindTheme(theme),
-			children: [/* @__PURE__ */ jsx(Head, { children: head }), /* @__PURE__ */ jsxs(Body, {
-				className: "m-0 bg-background p-4 font-body text-body text-foreground",
-				children: [/* @__PURE__ */ jsx(Preview, { children: preview }), /* @__PURE__ */ jsx(Container, {
-					className: "mx-auto w-full max-w-[600px] rounded-panel bg-card p-6 text-card-foreground",
-					children
-				})]
+			config: tailwindTheme(theme, variant),
+			children: [/* @__PURE__ */ jsxs(Head, { children: [
+				/* @__PURE__ */ jsx("meta", {
+					name: "color-scheme",
+					content: theme.colorScheme
+				}),
+				/* @__PURE__ */ jsx("meta", {
+					name: "supported-color-schemes",
+					content: theme.colorScheme
+				}),
+				head
+			] }), /* @__PURE__ */ jsxs(Body, {
+				className: `m-0 font-body text-body text-foreground ${contained ? `${backdrop} px-4 py-8` : "bg-background p-0"}`,
+				children: [
+					/* @__PURE__ */ jsx(Preview, { children: preview }),
+					/* @__PURE__ */ jsxs(Container, {
+						className: `mx-auto w-full max-w-[600px] bg-card text-card-foreground ${contained ? "rounded-panel border border-border border-solid p-6" : "px-6 py-8"}`,
+						children: [children, outside ? null : footer]
+					}),
+					outside ? /* @__PURE__ */ jsx(Container, {
+						className: "mx-auto w-full max-w-[600px] px-6",
+						children: footer
+					}) : null
+				]
 			})]
 		})
 	});
 }
-const headingClasses = {
-	h1: "text-heading-1",
-	h2: "text-heading-2",
-	h3: "text-heading-3",
-	h4: "text-heading-4"
+const alignClasses = {
+	left: "text-left",
+	center: "text-center",
+	right: "text-right"
+};
+function alignClass(align) {
+	return align ? alignClasses[align] : "";
+}
+const headingSizeClasses = {
+	display: "text-display",
+	"heading-1": "text-heading-1",
+	"heading-2": "text-heading-2",
+	"heading-3": "text-heading-3",
+	"heading-4": "text-heading-4"
+};
+const headingSizeForTag = {
+	h1: "heading-1",
+	h2: "heading-2",
+	h3: "heading-3",
+	h4: "heading-4"
 };
-function EmailHeading({ as = "h1", className = "", ...props }) {
+function EmailHeading({ as = "h1", size, align, className = "", ...props }) {
+	const sizeClass = headingSizeClasses[size ?? headingSizeForTag[as]];
 	return /* @__PURE__ */ jsx(Heading, {
 		...props,
 		as,
-		className: `mb-4 mt-0 font-display text-card-foreground ${headingClasses[as]} ${className}`
+		className: `mb-4 mt-0 font-display text-card-foreground ${sizeClass} ${alignClass(align)} ${className}`
+	});
+}
+function EmailSection({ align, className = "", ...props }) {
+	return /* @__PURE__ */ jsx(Section, {
+		...props,
+		className: `${alignClass(align)} ${className}`
 	});
 }
-function EmailText({ tone = "default", className = "", style, ...props }) {
+function EmailText({ tone = "default", align, className = "", style, ...props }) {
 	const textColor = tone === "muted" ? "text-muted-foreground" : "text-card-foreground";
 	return /* @__PURE__ */ jsx(Text, {
 		...props,
@@ -60,13 +111,14 @@ function EmailText({ tone = "default", className = "", style, ...props }) {
 			overflowWrap: "break-word",
 			...style
 		},
-		className: `mb-4 mt-0 font-body text-body ${textColor} ${className}`
+		className: `mb-4 mt-0 font-body text-body ${textColor} ${alignClass(align)} ${className}`
 	});
 }
-function EmailButton({ className = "", ...props }) {
+function EmailButton({ width = "auto", className = "", ...props }) {
+	const widthClass = width === "full" ? "block w-full" : "inline-block";
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
-		className: `box-border min-h-control rounded-control bg-primary px-control-x py-control-y text-center font-body text-control font-medium text-primary-foreground no-underline ${className}`
+		className: `box-border min-h-control rounded-control bg-primary px-control-x py-control-y text-center font-body text-control font-medium text-primary-foreground no-underline ${widthClass} ${className}`
 	});
 }
 function EmailLink({ className = "", ...props }) {
@@ -75,5 +127,84 @@ function EmailLink({ className = "", ...props }) {
 		className: `font-body text-primary-text underline ${className}`
 	});
 }
+function EmailCaption({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(EmailText, {
+		tone: "muted",
+		...props,
+		className: `text-caption ${className}`
+	});
+}
+function EmailMutedLink({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(EmailLink, {
+		...props,
+		className: `text-caption text-muted-foreground ${className}`
+	});
+}
+function EmailDivider({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(Hr, {
+		...props,
+		className: `my-6 border-0 border-t border-solid border-t-border ${className}`
+	});
+}
+function EmailPanel({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(Section, {
+		...props,
+		className: `my-6 rounded-panel bg-muted p-5 ${className}`
+	});
+}
+function EmailOneTimeCode({ children, className = "" }) {
+	return /* @__PURE__ */ jsx(EmailPanel, {
+		className: `text-center ${className}`,
+		children: /* @__PURE__ */ jsx(EmailText, {
+			className: "mb-0 text-center font-mono text-heading-2 font-semibold tracking-[0.25em]",
+			children
+		})
+	});
+}
+function EmailBulletList({ items, className = "" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: `mb-4 mt-0 list-disc pl-5 font-body text-body text-card-foreground ${className}`,
+		children: items.map((item, index) => /* @__PURE__ */ jsx("li", {
+			className: "mb-1 font-body text-body text-card-foreground",
+			children: item
+		}, index))
+	});
+}
+function EmailColumns({ children, widths, gap = 20, verticalAlign = "top", className = "" }) {
+	if (children.length === 0) return null;
+	const evenWidth = `${(100 / children.length).toFixed(4)}%`;
+	return /* @__PURE__ */ jsx(Row, {
+		className: `mb-6 table-fixed ${className}`,
+		children: children.map((child, index) => /* @__PURE__ */ jsx(Column, {
+			width: widths?.[index] ?? evenWidth,
+			className: `max-[480px]:block max-[480px]:w-full max-[480px]:pl-0 ${index === 0 ? "" : `max-[480px]:pt-[${gap}px]`}`,
+			style: {
+				verticalAlign,
+				paddingLeft: index === 0 ? 0 : gap
+			},
+			children: child
+		}, index))
+	});
+}
+function EmailDetailRow({ label, value, emphasis = false }) {
+	return /* @__PURE__ */ jsxs(Row, {
+		className: "table-fixed",
+		children: [/* @__PURE__ */ jsx(Column, {
+			className: "align-top",
+			children: /* @__PURE__ */ jsx(EmailText, {
+				className: "mb-2",
+				children: label
+			})
+		}), /* @__PURE__ */ jsx(Column, {
+			align: "right",
+			className: "align-top",
+			children: /* @__PURE__ */ jsx(EmailText, {
+				className: `mb-2 ${emphasis ? "font-semibold" : ""}`,
+				children: value
+			})
+		})]
+	});
+}
 //#endregion
-export { EmailButton, EmailHeading, EmailLayout, EmailLink, EmailText };
+export { EmailBulletList, EmailButton, EmailCaption, EmailColumns, EmailDetailRow, EmailDivider, EmailHeading, EmailLayout, EmailLink, EmailMutedLink, EmailOneTimeCode, EmailPanel, EmailSection, EmailText, surfaceColors };

package/dist/email/length.d.ts

@@ -1,4 +1,3 @@
 //#region src/email/length.d.ts
-declare function emailLengthPixels(name: string, value: string, rootFontSize: number, allowZero?: boolean): number;
-//#endregion
-export { emailLengthPixels };
+export declare function emailLengthPixels(name: string, value: string, rootFontSize: number, allowZero?: boolean): number;
+//#endregion

package/dist/email/templates.d.ts

@@ -1,41 +1,54 @@
 import { EmailTheme } from "./theme.js";
+import { EmailVariant } from "./email.js";
+import { EmailBrand, EmailFooterContent } from "./email-brand.js";
+import { ReactNode } from "react";
+import { PrismLanguage } from "react-email";
 //#region src/email/templates.d.ts
-type EmailBrandProps = {
+type EmailMessageProps = {
   theme: EmailTheme;
-  brand: string;
-  footer: string;
+  brand: EmailBrand;
+  footer: EmailFooterContent;
+  variant?: EmailVariant;
+  head?: ReactNode;
 };
-declare function InvitationEmail({ theme, brand, footer, inviter, workspace, inviteUrl }: EmailBrandProps & {
+type EmailBrandProps = EmailMessageProps & {
+  browserUrl?: string;
+};
+export type EmailHighlight = {
+  title: string;
+  description: string;
+};
+export declare function InvitationEmail({ theme, variant, head, brand, browserUrl, footer, inviter, workspace, inviteUrl }: EmailBrandProps & {
   inviter: string;
   workspace: string;
   inviteUrl: string;
 }): import("react").JSX.Element;
-declare function ProductEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, actionUrl }: EmailBrandProps & {
+export declare function ProductEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, highlights, actionUrl }: EmailBrandProps & {
   title: string;
   description: string;
   imageUrl: string;
   imageAlt: string;
+  highlights?: EmailHighlight[];
   actionUrl: string;
 }): import("react").JSX.Element;
-declare function EditorialEmail({ theme, brand, footer, title, description, imageUrl, imageAlt, articleUrl }: EmailBrandProps & {
+export declare function EditorialEmail({ theme, variant, head, brand, browserUrl, footer, title, description, imageUrl, imageAlt, articleUrl }: EmailBrandProps & {
   title: string;
   description: string;
   imageUrl: string;
   imageAlt: string;
   articleUrl: string;
 }): import("react").JSX.Element;
-type EmailArticle = {
+export type EmailArticle = {
   title: string;
   description: string;
   href: string;
   imageUrl: string;
   imageAlt: string;
 };
-declare function NewsletterEmail({ theme, brand, footer, articles, unsubscribeUrl }: EmailBrandProps & {
+export declare function NewsletterEmail({ theme, variant, head, brand, browserUrl, footer, articles }: EmailBrandProps & {
   articles: EmailArticle[];
-  unsubscribeUrl: string;
 }): import("react").JSX.Element;
-declare function SummaryEmail({ theme, brand, footer, period, metrics, details, dashboardUrl }: EmailBrandProps & {
+export declare function SummaryEmail({ theme, variant, head, brand, browserUrl, footer, period, metrics, details, dashboardUrl }: EmailBrandProps & {
   period: string;
   metrics: {
     label: string;
@@ -47,5 +60,36 @@ declare function SummaryEmail({ theme, brand, footer, period, metrics, details,
   }[];
   dashboardUrl: string;
 }): import("react").JSX.Element;
-//#endregion
-export { EditorialEmail, EmailArticle, InvitationEmail, NewsletterEmail, ProductEmail, SummaryEmail };
+export declare function VerificationEmail({ theme, variant, head, brand, footer, code, expiresInMinutes, supportUrl }: EmailMessageProps & {
+  code: string;
+  expiresInMinutes: number;
+  supportUrl: string;
+}): import("react").JSX.Element;
+export type EmailReceiptLine = {
+  label: string;
+  value: string;
+};
+export declare function ReceiptEmail({ theme, variant, head, brand, footer, orderNumber, orderDate, lines, total, paymentMethod, invoiceUrl }: EmailMessageProps & {
+  orderNumber: string;
+  orderDate: string;
+  lines: EmailReceiptLine[];
+  total: string;
+  paymentMethod: string;
+  invoiceUrl: string;
+}): import("react").JSX.Element;
+export type EmailReleaseSection = {
+  title: string;
+  changes: string[];
+};
+export declare function ReleaseNotesEmail({ theme, variant, head, brand, browserUrl, footer, version, summary, sections, migration, changelogUrl }: EmailBrandProps & {
+  version: string;
+  summary: string;
+  sections: EmailReleaseSection[];
+  migration?: {
+    notes: string;
+    language: PrismLanguage;
+    code: string;
+  };
+  changelogUrl: string;
+}): import("react").JSX.Element;
+//#endregion