@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/email/email-brand.d.ts

@@ -0,0 +1,60 @@
+import { EmailColorScheme } from "./theme.js";
+import { EmailFooterPlacement } from "./email.js";
+import { EmailFooterAlign, EmailNavLink, EmailSocialLink } from "./email-footer.js";
+import { ReactNode } from "react";
+//#region src/email/email-brand.d.ts
+export type EmailBrand = {
+  name: string;
+  homeUrl: string;
+  logoUrl?: string;
+  logoDarkUrl?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+};
+export type EmailFooterContent = {
+  tagline: string;
+  socialLinks: EmailSocialLink[];
+  socialIconBaseUrl?: string;
+  helpLinks: EmailNavLink[];
+  sender: {
+    company: string;
+    addressLines: string[];
+  };
+  reason: string;
+  legal: string;
+  align?: EmailFooterAlign;
+  placement?: EmailFooterPlacement;
+} & ({
+  mailing: "transactional";
+} | {
+  mailing: "marketing";
+  unsubscribeUrl: string;
+  preferencesUrl?: string;
+});
+export declare function EmailLogo({ name, src, width, height, href }: {
+  name: string;
+  src?: string;
+  width?: number;
+  height?: number;
+  href?: string;
+}): import("react").JSX.Element;
+export declare function EmailBrowserLink({ href, children }: {
+  href: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+export type EmailHeaderAlign = "split" | "center";
+export declare function EmailHeader({ children, aside, align }: {
+  children: ReactNode;
+  aside?: ReactNode;
+  align?: EmailHeaderAlign;
+}): import("react").JSX.Element;
+export declare function EmailBrandHeader({ brand, browserUrl, colorScheme, align }: {
+  brand: EmailBrand;
+  browserUrl?: string;
+  colorScheme?: EmailColorScheme;
+  align?: EmailHeaderAlign;
+}): import("react").JSX.Element;
+export declare function EmailBrandFooter({ footer }: {
+  footer: EmailFooterContent;
+}): import("react").JSX.Element;
+//#endregion

package/dist/email/email-brand.js

@@ -0,0 +1,101 @@
+import { EmailCaption, EmailMutedLink, EmailSection } from "./email.js";
+import { EmailAddress, EmailFooter, EmailFooterLegal, EmailFooterLinks, EmailSocialLinks, EmailUnsubscribe } from "./email-footer.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Column, Img, Link, Row } from "react-email";
+//#region src/email/email-brand.tsx
+function EmailLogo({ name, src, width = 120, height = 32, href }) {
+	const mark = src ? /* @__PURE__ */ jsx(Img, {
+		src,
+		alt: name,
+		width,
+		height,
+		className: "inline-block"
+	}) : /* @__PURE__ */ jsx("span", {
+		className: "font-display text-heading-4 font-semibold text-card-foreground",
+		children: name
+	});
+	return href ? /* @__PURE__ */ jsx(Link, {
+		href,
+		className: "text-card-foreground no-underline",
+		children: mark
+	}) : mark;
+}
+function EmailBrowserLink({ href, children = "View in browser" }) {
+	return /* @__PURE__ */ jsx(EmailMutedLink, {
+		href,
+		children
+	});
+}
+function EmailHeader({ children, aside, align = "split" }) {
+	if (align === "center") return /* @__PURE__ */ jsxs(EmailSection, {
+		align: "center",
+		className: "mb-8",
+		children: [children, aside ? /* @__PURE__ */ jsx(EmailSection, {
+			align: "center",
+			className: "mt-3",
+			children: aside
+		}) : null]
+	});
+	return /* @__PURE__ */ jsxs(Row, {
+		className: "mb-8",
+		children: [/* @__PURE__ */ jsx(Column, {
+			className: "align-middle",
+			children
+		}), aside ? /* @__PURE__ */ jsx(Column, {
+			align: "right",
+			className: "align-middle",
+			children: aside
+		}) : null]
+	});
+}
+function EmailBrandHeader({ brand, browserUrl, colorScheme = "light", align = "split" }) {
+	const logoUrl = colorScheme === "dark" ? brand.logoDarkUrl ?? brand.logoUrl : brand.logoUrl;
+	return /* @__PURE__ */ jsx(EmailHeader, {
+		align,
+		aside: browserUrl ? /* @__PURE__ */ jsx(EmailBrowserLink, { href: browserUrl }) : null,
+		children: /* @__PURE__ */ jsx(EmailLogo, {
+			name: brand.name,
+			src: logoUrl,
+			width: brand.logoWidth,
+			height: brand.logoHeight,
+			href: brand.homeUrl
+		})
+	});
+}
+function EmailBrandFooter({ footer }) {
+	return /* @__PURE__ */ jsxs(EmailFooter, {
+		align: footer.align,
+		placement: footer.placement,
+		children: [
+			/* @__PURE__ */ jsx(EmailSocialLinks, {
+				links: footer.socialLinks,
+				iconBaseUrl: footer.socialIconBaseUrl
+			}),
+			/* @__PURE__ */ jsx(EmailFooterLinks, { links: footer.helpLinks }),
+			/* @__PURE__ */ jsx(EmailCaption, {
+				className: "mb-0",
+				children: footer.tagline
+			}),
+			/* @__PURE__ */ jsxs(EmailFooterLegal, { children: [
+				/* @__PURE__ */ jsx(EmailAddress, {
+					company: footer.sender.company,
+					lines: footer.sender.addressLines
+				}),
+				/* @__PURE__ */ jsx(EmailCaption, {
+					className: "mb-2",
+					children: footer.reason
+				}),
+				footer.mailing === "marketing" ? /* @__PURE__ */ jsx(EmailUnsubscribe, {
+					unsubscribeUrl: footer.unsubscribeUrl,
+					preferencesUrl: footer.preferencesUrl
+				}) : null,
+				/* @__PURE__ */ jsx(EmailCaption, {
+					className: "mb-0",
+					children: footer.legal
+				})
+			] })
+		]
+	});
+}
+//#endregion
+export { EmailBrandFooter, EmailBrandHeader, EmailBrowserLink, EmailHeader, EmailLogo };

package/dist/email/email-code.d.ts

@@ -0,0 +1,18 @@
+import { EmailTheme } from "./theme.js";
+import { EmailVariant } from "./email.js";
+import { CodeInlineProps, PrismLanguage } from "react-email";
+//#region src/email/email-code.d.ts
+export declare function EmailInlineCode({ className, ...props }: CodeInlineProps): import("react").JSX.Element;
+export declare function EmailCodeBlock({ theme, code, language, lineNumbers, className }: {
+  theme: EmailTheme;
+  code: string;
+  language: PrismLanguage;
+  lineNumbers?: boolean;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function EmailMarkdown({ theme, variant, children }: {
+  theme: EmailTheme;
+  variant?: EmailVariant;
+  children: string;
+}): import("react").JSX.Element;
+//#endregion

package/dist/email/email-code.js

@@ -0,0 +1,172 @@
+import { surfaceColors } from "./email.js";
+import { jsx } from "react/jsx-runtime";
+import { CodeBlock, CodeInline, Markdown, Section } from "react-email";
+//#region src/email/email-code.tsx
+function EmailInlineCode({ className = "", ...props }) {
+	return /* @__PURE__ */ jsx(CodeInline, {
+		...props,
+		className: `rounded-control bg-muted px-1 font-mono text-card-foreground ${className}`
+	});
+}
+function prismTheme(theme) {
+	const { code } = theme;
+	return {
+		base: {
+			margin: "0",
+			padding: "16px",
+			background: theme.colors.muted,
+			color: code.foreground,
+			borderRadius: theme.radii.panel,
+			fontFamily: theme.fonts.mono,
+			fontSize: theme.text.caption.fontSize,
+			lineHeight: "1.6",
+			whiteSpace: "pre-wrap",
+			wordBreak: "break-word"
+		},
+		comment: { color: code.comment },
+		prolog: { color: code.comment },
+		doctype: { color: code.comment },
+		cdata: { color: code.comment },
+		punctuation: { color: code.punctuation },
+		operator: { color: code.punctuation },
+		keyword: { color: code.keyword },
+		atrule: { color: code.keyword },
+		"attr-value": { color: code.string },
+		string: { color: code.string },
+		char: { color: code.string },
+		inserted: { color: code.string },
+		regex: { color: code.string },
+		"attr-name": { color: code.parameter },
+		property: { color: code.parameter },
+		variable: { color: code.parameter },
+		function: { color: code.function },
+		"class-name": { color: code.function },
+		tag: { color: code.function },
+		boolean: { color: code.constant },
+		number: { color: code.constant },
+		constant: { color: code.constant },
+		symbol: { color: code.constant },
+		deleted: { color: code.constant },
+		builtin: { color: code.constant }
+	};
+}
+function EmailCodeBlock({ theme, code, language, lineNumbers = false, className = "" }) {
+	return /* @__PURE__ */ jsx(Section, {
+		className: `mb-6 ${className}`,
+		children: /* @__PURE__ */ jsx(CodeBlock, {
+			code,
+			language,
+			lineNumbers,
+			fontFamily: theme.fonts.mono,
+			theme: prismTheme(theme)
+		})
+	});
+}
+function markdownStyles(theme, variant) {
+	const colors = surfaceColors(theme, variant);
+	const body = {
+		margin: "0 0 16px",
+		fontFamily: theme.fonts.body,
+		fontSize: theme.text.body.fontSize,
+		lineHeight: theme.text.body.lineHeight,
+		color: colors["card-foreground"]
+	};
+	function headingStyle(size) {
+		const style = theme.text[size];
+		return {
+			margin: "0 0 16px",
+			fontFamily: theme.fonts.display,
+			fontSize: style.fontSize,
+			lineHeight: style.lineHeight,
+			fontWeight: style.fontWeight,
+			letterSpacing: style.letterSpacing,
+			color: colors["card-foreground"]
+		};
+	}
+	const monospace = {
+		fontFamily: theme.fonts.mono,
+		fontSize: theme.text.caption.fontSize,
+		background: theme.colors.muted,
+		color: theme.code.foreground,
+		borderRadius: theme.radii.control
+	};
+	return {
+		p: body,
+		li: {
+			...body,
+			margin: "0 0 4px"
+		},
+		ul: {
+			...body,
+			paddingLeft: "20px"
+		},
+		ol: {
+			...body,
+			paddingLeft: "20px"
+		},
+		h1: headingStyle("heading-1"),
+		h2: headingStyle("heading-2"),
+		h3: headingStyle("heading-3"),
+		h4: headingStyle("heading-4"),
+		h5: headingStyle("heading-4"),
+		h6: headingStyle("heading-4"),
+		bold: { fontWeight: 600 },
+		italic: { fontStyle: "italic" },
+		link: {
+			color: colors["primary-text"],
+			textDecoration: "underline"
+		},
+		codeInline: {
+			...monospace,
+			padding: "2px 4px"
+		},
+		codeBlock: {
+			...monospace,
+			display: "block",
+			padding: "16px",
+			borderRadius: theme.radii.panel,
+			whiteSpace: "pre-wrap"
+		},
+		blockQuote: {
+			...body,
+			borderLeft: `3px solid ${theme.colors.border}`,
+			paddingLeft: "16px",
+			color: colors["muted-foreground"]
+		},
+		hr: {
+			border: "none",
+			borderTop: `1px solid ${theme.colors.border}`,
+			margin: "24px 0"
+		},
+		image: {
+			maxWidth: "100%",
+			borderRadius: theme.radii.scene
+		},
+		table: {
+			width: "100%",
+			borderCollapse: "collapse",
+			marginBottom: "16px"
+		},
+		th: {
+			...body,
+			margin: "0",
+			textAlign: "left",
+			padding: "8px 0",
+			borderBottom: `1px solid ${theme.colors.border}`
+		},
+		td: {
+			...body,
+			margin: "0",
+			padding: "8px 0",
+			borderBottom: `1px solid ${theme.colors.border}`
+		}
+	};
+}
+function EmailMarkdown({ theme, variant = "contained", children }) {
+	return /* @__PURE__ */ jsx(Markdown, {
+		markdownCustomStyles: markdownStyles(theme, variant),
+		children
+	});
+}
+//#endregion
+export { EmailCodeBlock, EmailInlineCode, EmailMarkdown };

package/dist/email/email-footer.d.ts

@@ -0,0 +1,63 @@
+import { EmailFooterPlacement } from "./email.js";
+import { ReactNode } from "react";
+//#region src/email/email-footer.d.ts
+export type EmailNavLink = {
+  label: string;
+  href: string;
+};
+export declare const emailSocialPlatformNames: {
+  readonly x: "X";
+  readonly bluesky: "Bluesky";
+  readonly threads: "Threads";
+  readonly instagram: "Instagram";
+  readonly facebook: "Facebook";
+  readonly linkedin: "LinkedIn";
+  readonly youtube: "YouTube";
+  readonly tiktok: "TikTok";
+  readonly github: "GitHub";
+  readonly discord: "Discord";
+  readonly slack: "Slack";
+  readonly mastodon: "Mastodon";
+};
+export type EmailSocialPlatform = keyof typeof emailSocialPlatformNames;
+export type EmailSocialLink = {
+  href: string;
+  iconAlt?: string;
+} & ({
+  platform: EmailSocialPlatform;
+  label?: string;
+  iconUrl?: string;
+} | {
+  platform?: undefined;
+  label: string;
+  iconUrl?: string;
+});
+export type EmailFooterAlign = "start" | "center";
+export declare function EmailFooter({ children, align, placement }: {
+  children: ReactNode;
+  align?: EmailFooterAlign;
+  placement?: EmailFooterPlacement;
+}): import("react").JSX.Element;
+export declare function EmailFooterLegal({ children, className }: {
+  children: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function EmailSocialLinks({ links, iconBaseUrl, iconSize }: {
+  links: EmailSocialLink[];
+  iconBaseUrl?: string;
+  iconSize?: number;
+}): import("react").JSX.Element | null;
+export declare function EmailFooterLinks({ links }: {
+  links: EmailNavLink[];
+}): import("react").JSX.Element | null;
+export declare function EmailAddress({ company, lines }: {
+  company: string;
+  lines: string[];
+}): import("react").JSX.Element;
+export declare function EmailUnsubscribe({ unsubscribeUrl, preferencesUrl, unsubscribeLabel, preferencesLabel }: {
+  unsubscribeUrl: string;
+  preferencesUrl?: string;
+  unsubscribeLabel?: string;
+  preferencesLabel?: string;
+}): import("react").JSX.Element;
+//#endregion

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,28 +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
-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;
 };
-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;
-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 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;
-declare function EmailButton({ className, ...props }: ButtonProps): import("react").JSX.Element;
-declare function EmailLink({ className, ...props }: LinkProps): import("react").JSX.Element;
-//#endregion
-export { EmailButton, EmailHeading, EmailLayout, EmailLink, EmailText };
+//#endregion