@ctrl-ui/react 0.8.4 → 0.8.6

package/dist/email/email-footer.js

@@ -0,0 +1,98 @@
+import { EmailCaption, EmailDivider, EmailMutedLink } from "./email.js";
+import { Fragment } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Img, Section } from "react-email";
+//#region src/email/email-footer.tsx
+const emailSocialPlatformNames = {
+	x: "X",
+	bluesky: "Bluesky",
+	threads: "Threads",
+	instagram: "Instagram",
+	facebook: "Facebook",
+	linkedin: "LinkedIn",
+	youtube: "YouTube",
+	tiktok: "TikTok",
+	github: "GitHub",
+	discord: "Discord",
+	slack: "Slack",
+	mastodon: "Mastodon"
+};
+function separatedLinks(links) {
+	return links.map((link, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? " · " : null, /* @__PURE__ */ jsx(EmailMutedLink, {
+		href: link.href,
+		children: link.label
+	})] }, link.href));
+}
+function EmailFooter({ children, align = "start", placement = "inside" }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [placement === "inside" ? /* @__PURE__ */ jsx(EmailDivider, {}) : null, /* @__PURE__ */ jsx(Section, {
+		className: `${placement === "inside" ? "" : "pt-6"} ${align === "center" ? "text-center" : "text-left"}`,
+		children
+	})] });
+}
+function EmailFooterLegal({ children, className = "" }) {
+	return /* @__PURE__ */ jsx(Section, {
+		className: `mt-6 ${className}`,
+		children
+	});
+}
+function resolveSocialLink(link, iconBaseUrl) {
+	const label = link.platform ? link.label ?? emailSocialPlatformNames[link.platform] : link.label;
+	const base = iconBaseUrl?.replace(/\/$/, "");
+	return {
+		label,
+		iconUrl: link.iconUrl ?? (link.platform && base ? `${base}/${link.platform}.png` : void 0),
+		alt: link.iconAlt ?? label
+	};
+}
+function EmailSocialLinks({ links, iconBaseUrl, iconSize = 24 }) {
+	if (links.length === 0) return null;
+	return /* @__PURE__ */ jsx(Section, {
+		className: "mb-4",
+		children: links.map((link, index) => {
+			const { label, iconUrl, alt } = resolveSocialLink(link, iconBaseUrl);
+			const spacing = index < links.length - 1 ? "mr-3" : "";
+			return /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? " " : null, /* @__PURE__ */ jsx(EmailMutedLink, {
+				href: link.href,
+				className: `${iconUrl ? "no-underline" : "underline"} ${spacing}`,
+				children: iconUrl ? /* @__PURE__ */ jsx(Img, {
+					src: iconUrl,
+					alt,
+					width: iconSize,
+					height: iconSize,
+					className: "inline-block align-middle"
+				}) : label
+			})] }, link.href);
+		})
+	});
+}
+function EmailFooterLinks({ links }) {
+	if (links.length === 0) return null;
+	return /* @__PURE__ */ jsx(EmailCaption, {
+		className: "mb-2",
+		children: separatedLinks(links)
+	});
+}
+function EmailAddress({ company, lines }) {
+	return /* @__PURE__ */ jsxs(EmailCaption, {
+		className: "mb-2",
+		children: [/* @__PURE__ */ jsx("strong", {
+			className: "font-semibold",
+			children: company
+		}), lines.map((line) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), line] }, line))]
+	});
+}
+function EmailUnsubscribe({ unsubscribeUrl, preferencesUrl, unsubscribeLabel = "Unsubscribe", preferencesLabel = "Manage preferences" }) {
+	const unsubscribe = {
+		label: unsubscribeLabel,
+		href: unsubscribeUrl
+	};
+	return /* @__PURE__ */ jsx(EmailCaption, {
+		className: "mb-2",
+		children: separatedLinks(preferencesUrl ? [unsubscribe, {
+			label: preferencesLabel,
+			href: preferencesUrl
+		}] : [unsubscribe])
+	});
+}
+//#endregion
+export { EmailAddress, EmailFooter, EmailFooterLegal, EmailFooterLinks, EmailSocialLinks, EmailUnsubscribe, emailSocialPlatformNames };

package/dist/email/email.d.ts

@@ -1,27 +1,76 @@
 import { EmailTheme } from "./theme.js";
 import { ReactNode } from "react";
-import { ButtonProps, HeadingProps, LinkProps, TextProps } from "react-email";
+import { ButtonProps, HeadingProps, HrProps, LinkProps, SectionProps, TextProps } from "react-email";
 //#region src/email/email.d.ts
-export declare function EmailLayout({ theme, preview, children, head, lang, dir }: {
+export type EmailVariant = "contained" | "plain";
+export type EmailFooterPlacement = "inside" | "outside";
+export declare function surfaceColors(theme: EmailTheme, variant: EmailVariant): Record<"background" | "border" | "card" | "card-foreground" | "foreground" | "muted" | "muted-foreground" | "primary" | "primary-foreground" | "primary-text", string>;
+export declare function EmailLayout({ theme, preview, children, footer, footerPlacement, head, lang, dir, variant }: {
   theme: EmailTheme;
   preview: string;
   children: ReactNode;
+  footer?: ReactNode;
+  footerPlacement?: EmailFooterPlacement;
   head?: ReactNode;
   lang?: string;
   dir?: "ltr" | "rtl";
+  variant?: EmailVariant;
 }): import("react").JSX.Element;
-declare const headingClasses: {
-  h1: string;
-  h2: string;
-  h3: string;
-  h4: string;
+export type EmailAlign = "left" | "center" | "right";
+declare const headingSizeClasses: {
+  display: string;
+  "heading-1": string;
+  "heading-2": string;
+  "heading-3": string;
+  "heading-4": string;
 };
-export declare function EmailHeading({ as, className, ...props }: Omit<HeadingProps, "as"> & {
-  as?: keyof typeof headingClasses;
+type EmailHeadingSize = keyof typeof headingSizeClasses;
+declare const headingSizeForTag: {
+  readonly h1: "heading-1";
+  readonly h2: "heading-2";
+  readonly h3: "heading-3";
+  readonly h4: "heading-4";
+};
+export declare function EmailHeading({ as, size, align, className, ...props }: Omit<HeadingProps, "as"> & {
+  as?: keyof typeof headingSizeForTag;
+  size?: EmailHeadingSize;
+  align?: EmailAlign;
+}): import("react").JSX.Element;
+export declare function EmailSection({ align, className, ...props }: SectionProps & {
+  align?: EmailAlign;
 }): import("react").JSX.Element;
-export declare function EmailText({ tone, className, style, ...props }: TextProps & {
+export declare function EmailText({ tone, align, className, style, ...props }: TextProps & {
   tone?: "default" | "muted";
+  align?: EmailAlign;
+}): import("react").JSX.Element;
+export declare function EmailButton({ width, className, ...props }: ButtonProps & {
+  width?: "auto" | "full";
 }): import("react").JSX.Element;
-export declare function EmailButton({ className, ...props }: ButtonProps): import("react").JSX.Element;
 export declare function EmailLink({ className, ...props }: LinkProps): import("react").JSX.Element;
+export declare function EmailCaption({ className, ...props }: TextProps & {
+  align?: EmailAlign;
+}): import("react").JSX.Element;
+export declare function EmailMutedLink({ className, ...props }: LinkProps): import("react").JSX.Element;
+export declare function EmailDivider({ className, ...props }: HrProps): import("react").JSX.Element;
+export declare function EmailPanel({ className, ...props }: SectionProps): import("react").JSX.Element;
+export declare function EmailOneTimeCode({ children, className }: {
+  children: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function EmailBulletList({ items, className }: {
+  items: ReactNode[];
+  className?: string;
+}): import("react").JSX.Element | null;
+export declare function EmailColumns({ children, widths, gap, verticalAlign, className }: {
+  children: ReactNode[];
+  widths?: string[];
+  gap?: number;
+  verticalAlign?: "top" | "middle" | "bottom";
+  className?: string;
+}): import("react").JSX.Element | null;
+export declare function EmailDetailRow({ label, value, emphasis }: {
+  label: ReactNode;
+  value: ReactNode;
+  emphasis?: boolean;
+}): import("react").JSX.Element;
 //#endregion

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/templates.d.ts

@@ -1,23 +1,37 @@
 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;
 };
-export 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;
-export 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;
-export 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;
@@ -31,11 +45,10 @@ export type EmailArticle = {
   imageUrl: string;
   imageAlt: string;
 };
-export 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;
-export 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,4 +60,36 @@ export declare function SummaryEmail({ theme, brand, footer, period, metrics, de
   }[];
   dashboardUrl: string;
 }): import("react").JSX.Element;
+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