@stisocial/ui 0.1.0 → 0.2.0

package/dist/email/EmailProductRow/EmailProductRow.js

@@ -0,0 +1,112 @@
+import { color, dataAttributes, font, linkStyle, radius, safeHref, safeSrc, size, sizeNumber } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailProductRow/EmailProductRow.tsx
+const THUMB = sizeNumber("space-16");
+/**
+* Sipariş ve sepet e-postalarında ürün satırı: görsel, ad, açıklama, adet ve fiyat. İki hücreli
+* tablo (`role="presentation"`); 320 piksel genişlikte de taşmaz.
+*/
+function EmailProductRow({ name, imageSrc, imageAlt = "", description, meta, price, href, className, id, ...rest }) {
+	const src = safeSrc(imageSrc);
+	const link = safeHref(href);
+	const small = {
+		margin: `${size("space-1")} 0 0`,
+		fontSize: size("font-size-sm"),
+		lineHeight: size("line-height-sm"),
+		color: color("fg-muted")
+	};
+	return /* @__PURE__ */ jsx("table", {
+		...dataAttributes(rest),
+		role: "presentation",
+		className,
+		id,
+		width: "100%",
+		cellPadding: 0,
+		cellSpacing: 0,
+		style: {
+			width: "100%",
+			margin: `0 0 ${size("space-4")}`,
+			borderCollapse: "collapse",
+			fontFamily: font.text
+		},
+		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+			width: THUMB,
+			style: {
+				width: `${THUMB}px`,
+				verticalAlign: "top",
+				padding: 0
+			},
+			children: src ? /* @__PURE__ */ jsx("img", {
+				src,
+				loading: "lazy",
+				alt: imageAlt,
+				width: THUMB,
+				height: THUMB,
+				style: {
+					display: "block",
+					width: `${THUMB}px`,
+					height: `${THUMB}px`,
+					objectFit: "cover",
+					border: `1px solid ${color("border-subtle")}`,
+					borderRadius: radius.sm,
+					backgroundColor: color("bg-subtle")
+				}
+			}) : /* @__PURE__ */ jsx("div", { style: {
+				width: `${THUMB}px`,
+				height: `${THUMB}px`,
+				boxSizing: "border-box",
+				border: `1px solid ${color("border-subtle")}`,
+				borderRadius: radius.sm,
+				backgroundColor: color("bg-subtle")
+			} })
+		}), /* @__PURE__ */ jsxs("td", {
+			style: {
+				verticalAlign: "top",
+				paddingInlineStart: size("space-4")
+			},
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						fontSize: size("font-size-md"),
+						lineHeight: size("line-height-md"),
+						fontWeight: 600,
+						color: color("fg"),
+						overflowWrap: "anywhere"
+					},
+					children: link ? /* @__PURE__ */ jsx("a", {
+						href: link,
+						style: {
+							...linkStyle,
+							color: color("fg")
+						},
+						children: name
+					}) : name
+				}),
+				description ? /* @__PURE__ */ jsx("p", {
+					style: {
+						...small,
+						overflowWrap: "anywhere"
+					},
+					children: description
+				}) : null,
+				meta ? /* @__PURE__ */ jsx("p", {
+					style: small,
+					children: meta
+				}) : null,
+				price ? /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: `${size("space-1")} 0 0`,
+						fontSize: size("font-size-md"),
+						lineHeight: size("line-height-md"),
+						fontWeight: 600,
+						fontVariantNumeric: "tabular-nums",
+						color: color("fg")
+					},
+					children: price
+				}) : null
+			]
+		})] }) })
+	});
+}
+export { EmailProductRow };

package/dist/email/EmailProductRow/index.d.ts

@@ -0,0 +1,2 @@
+import { EmailProductRow, EmailProductRowProps } from "./EmailProductRow.js";
+export { EmailProductRow, EmailProductRowProps };

package/dist/email/EmailSocialLinks/EmailSocialLinks.d.ts

@@ -0,0 +1,19 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+export interface EmailSocialLink {
+  /** Hesap adresi (`https:`). */
+  href: string;
+  /** Platformun adı ("Instagram"); görünür metin ve erişilebilir ad. */
+  label: string;
+}
+export interface EmailSocialLinksProps extends EmailBaseProps {
+  links: EmailSocialLink[];
+  /** Listenin adı (ekran okuyucu). Varsayılan yoktur; metin özellikle verilir ("Sosyal medya hesaplarımız"). */
+  label: string;
+  /** Hizalama. Varsayılan: `"center"`. */
+  align?: "start" | "center";
+}
+/**
+ * Sosyal medya bağlantıları: metin bağlantılar (SVG ve dış ikon görseli e-postada güvenilir değil,
+ * görseller çoğu istemcide kapalı). Ayraç süstür, okunmaz. Güvenli olmayan adres atlanır.
+ */
+export declare function EmailSocialLinks({ links, label, align, className, id, ...rest }: EmailSocialLinksProps): import("react").JSX.Element | null;

package/dist/email/EmailSocialLinks/EmailSocialLinks.js

@@ -0,0 +1,53 @@
+import { color, dataAttributes, font, linkStyle, safeHref, size } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailSocialLinks/EmailSocialLinks.tsx
+/**
+* Sosyal medya bağlantıları: metin bağlantılar (SVG ve dış ikon görseli e-postada güvenilir değil,
+* görseller çoğu istemcide kapalı). Ayraç süstür, okunmaz. Güvenli olmayan adres atlanır.
+*/
+function EmailSocialLinks({ links, label, align = "center", className, id, ...rest }) {
+	const safe = links.flatMap((l) => {
+		const href = safeHref(l.href);
+		return href ? [{
+			href,
+			label: l.label
+		}] : [];
+	});
+	if (safe.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		...dataAttributes(rest),
+		className,
+		id,
+		"aria-label": label,
+		style: {
+			margin: `0 0 ${size("space-3")}`,
+			padding: 0,
+			listStyle: "none",
+			textAlign: align === "center" ? "center" : "start",
+			fontFamily: font.text,
+			fontSize: size("font-size-sm"),
+			lineHeight: size("line-height-md"),
+			color: color("fg-muted")
+		},
+		children: safe.map((l, i) => /* @__PURE__ */ jsxs("li", {
+			style: {
+				display: "inline",
+				margin: 0,
+				padding: 0
+			},
+			children: [i > 0 ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				style: { padding: `0 ${size("space-2")}` },
+				children: "·"
+			}) : null, /* @__PURE__ */ jsx("a", {
+				href: l.href,
+				style: {
+					...linkStyle,
+					color: color("fg-muted")
+				},
+				children: l.label
+			})]
+		}, l.href))
+	});
+}
+export { EmailSocialLinks };

package/dist/email/EmailSocialLinks/index.d.ts

@@ -0,0 +1,2 @@
+import { EmailSocialLink, EmailSocialLinks, EmailSocialLinksProps } from "./EmailSocialLinks.js";
+export { EmailSocialLink, EmailSocialLinks, EmailSocialLinksProps };

package/dist/email/EmailStats/EmailStats.d.ts

@@ -0,0 +1,23 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailStatItem {
+  /** Göstergenin adı ("Erişim"). */
+  label: ReactNode;
+  /** Biçimlenmiş değer ("12.480"); biçimi gönderen yapar (`Intl.NumberFormat`). */
+  value: ReactNode;
+  /**
+   * Değişim metni ("%12 artış"). Yön yalnız renkle değil sözle de söylenir; `trend` yalnız rengi
+   * belirler.
+   */
+  change?: ReactNode;
+  trend?: "up" | "down" | "flat";
+}
+export interface EmailStatsProps extends EmailBaseProps {
+  /** 1–4 gösterge; boşsa çizilmez. */
+  items: EmailStatItem[];
+}
+/**
+ * Gösterge özeti (haftalık rapor, kampanya sonucu): her gösterge kendi ad–değer listesidir (`dl`). Kutular yan yana,
+ * dar ekranda alt alta iner (ortam sorgusuz); rakamlar eş genişliklidir.
+ */
+export declare function EmailStats({ items, className, id, ...rest }: EmailStatsProps): import("react").JSX.Element | null;

package/dist/email/EmailStats/EmailStats.js

@@ -0,0 +1,86 @@
+import { EMAIL_CONTENT_WIDTH, color, dataAttributes, font, radius, size, sizeNumber } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailStats/EmailStats.tsx
+const TREND = {
+	up: color("fg-success"),
+	down: color("fg-danger"),
+	flat: color("fg-muted")
+};
+/**
+* Gösterge özeti (haftalık rapor, kampanya sonucu): her gösterge kendi ad–değer listesidir (`dl`). Kutular yan yana,
+* dar ekranda alt alta iner (ortam sorgusuz); rakamlar eş genişliklidir.
+*/
+function EmailStats({ items, className, id, ...rest }) {
+	if (items.length === 0) return null;
+	const n = Math.min(items.length, 4);
+	const g = sizeNumber("space-3");
+	const w = Math.floor((EMAIL_CONTENT_WIDTH - g * (n - 1)) / n);
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			margin: `0 0 ${size("space-1")}`,
+			padding: 0,
+			fontFamily: font.text
+		},
+		children: items.map((item, i) => {
+			const last = i % n === n - 1 || i === items.length - 1;
+			return /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "inline-block",
+					boxSizing: "border-box",
+					width: "100%",
+					maxWidth: `${w + (last ? 0 : g)}px`,
+					paddingInlineEnd: last ? 0 : `${g}px`,
+					paddingBottom: `${g}px`,
+					verticalAlign: "top"
+				},
+				children: /* @__PURE__ */ jsxs("dl", {
+					style: {
+						margin: 0,
+						padding: `${size("space-4")} ${size("space-4")}`,
+						backgroundColor: color("bg-subtle"),
+						border: `1px solid ${color("border-subtle")}`,
+						borderRadius: radius.sm
+					},
+					children: [
+						/* @__PURE__ */ jsx("dt", {
+							style: {
+								margin: 0,
+								fontSize: size("font-size-sm"),
+								lineHeight: size("line-height-sm"),
+								color: color("fg-muted"),
+								overflowWrap: "anywhere"
+							},
+							children: item.label
+						}),
+						/* @__PURE__ */ jsx("dd", {
+							style: {
+								margin: `${size("space-1")} 0 0`,
+								fontSize: size("font-size-xl"),
+								lineHeight: size("line-height-xl"),
+								fontWeight: 600,
+								fontVariantNumeric: "tabular-nums",
+								color: color("fg"),
+								overflowWrap: "anywhere"
+							},
+							children: item.value
+						}),
+						item.change ? /* @__PURE__ */ jsx("dd", {
+							style: {
+								margin: `${size("space-1")} 0 0`,
+								fontSize: size("font-size-sm"),
+								lineHeight: size("line-height-sm"),
+								fontVariantNumeric: "tabular-nums",
+								color: TREND[item.trend ?? "flat"]
+							},
+							children: item.change
+						}) : null
+					]
+				})
+			}, i);
+		})
+	});
+}
+export { EmailStats };

package/dist/email/EmailStats/index.d.ts

@@ -0,0 +1,2 @@
+import { EmailStatItem, EmailStats, EmailStatsProps } from "./EmailStats.js";
+export { EmailStatItem, EmailStats, EmailStatsProps };

package/dist/email/EmailTable/EmailTable.d.ts

@@ -0,0 +1,24 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailTableColumn {
+  /** Satır nesnesindeki anahtar. */
+  key: string;
+  /** Sütun başlığı. */
+  header: ReactNode;
+  /** Hizalama; tutarlar `"end"`. Varsayılan: `"start"`. */
+  align?: "start" | "end";
+}
+export interface EmailTableProps extends EmailBaseProps {
+  /** Tablonun adı (`caption`); ekran okuyucu tabloyu bu adla tanıtır. */
+  caption: ReactNode;
+  /** Başlığı görünür kılar. Varsayılan: `false` (yalnız ekran okuyucu). */
+  showCaption?: boolean;
+  columns: EmailTableColumn[];
+  rows: Record<string, ReactNode>[];
+  /** Alt satır (toplam); kalın yazılır. */
+  footer?: Record<string, ReactNode>;
+  /** Satır yokken görünen metin ("Bu dönemde işlem yok."). */
+  emptyText: ReactNode;
+}
+/** Veri tablosu (sipariş kalemleri, fatura dökümü): sütun başlıkları `th scope="col"`. */
+export declare function EmailTable({ caption, showCaption, columns, rows, footer, emptyText, className, id, ...rest }: EmailTableProps): import("react").JSX.Element;

package/dist/email/EmailTable/EmailTable.js

@@ -0,0 +1,90 @@
+import { color, dataAttributes, font, size } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailTable/EmailTable.tsx
+/**
+* Hücre: ilk sütun kartın başlangıç kenarıyla hizalıdır (başlangıç boşluğu yok), sütunlar arası
+* boşluk bitiş tarafındadır. Sağa hizalı sütunlar (tutar, adet) bölünmez; metin sütunu kırılır.
+*/
+const cell = (align = "start", last = false) => ({
+	padding: `${size("space-2")} ${last ? "0" : size("space-3")} ${size("space-2")} 0`,
+	paddingInlineStart: 0,
+	paddingInlineEnd: last ? 0 : size("space-3"),
+	textAlign: align === "end" ? "end" : "start",
+	verticalAlign: "top",
+	borderBottom: `1px solid ${color("border-subtle")}`,
+	...align === "end" ? { whiteSpace: "nowrap" } : { overflowWrap: "break-word" }
+});
+const hidden = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap"
+};
+/** Veri tablosu (sipariş kalemleri, fatura dökümü): sütun başlıkları `th scope="col"`. */
+function EmailTable({ caption, showCaption = false, columns, rows, footer, emptyText, className, id, ...rest }) {
+	return /* @__PURE__ */ jsxs("table", {
+		...dataAttributes(rest),
+		className,
+		id,
+		cellPadding: 0,
+		cellSpacing: 0,
+		width: "100%",
+		"data-empty": rows.length === 0 ? "" : void 0,
+		style: {
+			width: "100%",
+			margin: `0 0 ${size("space-4")}`,
+			borderCollapse: "collapse",
+			fontFamily: font.text,
+			fontSize: size("font-size-sm"),
+			lineHeight: size("line-height-sm"),
+			fontVariantNumeric: "tabular-nums",
+			color: color("fg")
+		},
+		children: [
+			/* @__PURE__ */ jsx("caption", {
+				style: showCaption ? {
+					margin: 0,
+					padding: `0 0 ${size("space-2")}`,
+					textAlign: "start",
+					fontWeight: 600,
+					fontSize: size("font-size-md"),
+					lineHeight: size("line-height-md"),
+					color: color("fg")
+				} : hidden,
+				children: caption
+			}),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c, i) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				style: {
+					...cell(c.align, i === columns.length - 1),
+					fontWeight: 600,
+					color: color("fg-muted"),
+					borderBottom: `1px solid ${color("border")}`
+				},
+				children: c.header
+			}, c.key)) }) }),
+			/* @__PURE__ */ jsx("tbody", { children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				colSpan: columns.length,
+				style: {
+					...cell("start", true),
+					color: color("fg-muted")
+				},
+				children: emptyText
+			}) }) : rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: columns.map((c, j) => /* @__PURE__ */ jsx("td", {
+				style: cell(c.align, j === columns.length - 1),
+				children: row[c.key]
+			}, c.key)) }, i)) }),
+			footer && rows.length > 0 ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c, i) => /* @__PURE__ */ jsx("td", {
+				style: {
+					...cell(c.align, i === columns.length - 1),
+					fontWeight: 600,
+					borderBottom: 0
+				},
+				children: footer[c.key]
+			}, c.key)) }) }) : null
+		]
+	});
+}
+export { EmailTable };

package/dist/email/EmailTable/index.d.ts

@@ -0,0 +1,2 @@
+import { EmailTable, EmailTableColumn, EmailTableProps } from "./EmailTable.js";
+export { EmailTable, EmailTableColumn, EmailTableProps };

package/dist/email/EmailText/EmailText.d.ts

@@ -0,0 +1,13 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailTextProps extends EmailBaseProps {
+  /** Boy: `sm` (dipnot), `md` (gövde), `lg` (giriş paragrafı). Varsayılan: `"md"`. */
+  size?: "sm" | "md" | "lg";
+  /** Renk: `default` (`fg`) ya da `muted` (`fg-muted`, ikincil bilgi). Varsayılan: `"default"`. */
+  tone?: "default" | "muted";
+  /** Hizalama. Varsayılan: `"start"`. */
+  align?: "start" | "center";
+  children: ReactNode;
+}
+/** E-posta paragrafı: gövde yazı tipi, boy ve tonla; ardından paragraf boşluğu. */
+export declare function EmailText({ size: boy, tone, align, children, className, id, ...rest }: EmailTextProps): import("react").JSX.Element;

package/dist/email/EmailText/EmailText.js

@@ -0,0 +1,35 @@
+import { color, dataAttributes, font, size } from "../_shared/theme.js";
+import { jsx } from "react/jsx-runtime";
+// src/email/EmailText/EmailText.tsx
+const SIZES = {
+	sm: {
+		fontSize: size("font-size-sm"),
+		lineHeight: size("line-height-sm")
+	},
+	md: {
+		fontSize: size("font-size-md"),
+		lineHeight: size("line-height-md")
+	},
+	lg: {
+		fontSize: size("font-size-lg"),
+		lineHeight: size("line-height-lg")
+	}
+};
+/** E-posta paragrafı: gövde yazı tipi, boy ve tonla; ardından paragraf boşluğu. */
+function EmailText({ size: boy = "md", tone = "default", align = "start", children, className, id, ...rest }) {
+	return /* @__PURE__ */ jsx("p", {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			margin: `0 0 ${size("space-4")}`,
+			fontFamily: font.text,
+			...SIZES[boy],
+			color: color(tone === "muted" ? "fg-muted" : "fg"),
+			textAlign: align === "center" ? "center" : void 0,
+			overflowWrap: "anywhere"
+		},
+		children
+	});
+}
+export { EmailText };

package/dist/email/EmailText/index.d.ts

@@ -0,0 +1,2 @@
+import { EmailText, EmailTextProps } from "./EmailText.js";
+export { EmailText, EmailTextProps };

package/dist/email/_shared/theme.d.ts

@@ -0,0 +1,8 @@
+import "react";
+export type EmailTone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
+/** Kök öğeye geçen ortak özellikler. */
+export interface EmailBaseProps {
+  className?: string;
+  id?: string;
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}

package/dist/email/_shared/theme.js

@@ -0,0 +1,90 @@
+import { brandDimensions, colors, dimensions } from "../../tokens/generated/values.js";
+// src/email/_shared/theme.ts
+const palette = colors.stisocial.light.normal;
+/** Açık paletteki anlamlı rengin sRGB değeri. */
+function color(name) {
+	return palette[name];
+}
+const ROOT_PX = 16;
+/** Ölçü değerini piksele çevirir (e-posta istemcileri `rem`'i tutarsız yorumlar). */
+function size(name) {
+	const value = dimensions[name];
+	if (value === void 0) throw new Error(`Tanımsız ölçü değeri: ${name}`);
+	const rem = value.match(/^([\d.]+)rem$/);
+	return rem ? `${Math.round(Number(rem[1]) * ROOT_PX)}px` : value;
+}
+/** Ölçü değerinin sayı karşılığı (genişlik hesapları için). */
+function sizeNumber(name) {
+	return Number.parseFloat(size(name));
+}
+/** `var(--font-x, "Ad")` biçimini yalın yazı tipi adına indirir; e-postada değişken yoktur. */
+function plainFontStack(stack) {
+	return stack.replace(/var\(--[\w-]+,\s*([^)]+)\)/g, "$1").replace(/var\(--[\w-]+\)\s*,?\s*/g, "");
+}
+const brand = brandDimensions.stisocial;
+const font = {
+	text: plainFontStack(brand["font-text"]),
+	display: plainFontStack(brand["font-display"]),
+	mono: dimensions["font-mono"]
+};
+const radius = {
+	xs: brand["radius-xs"],
+	sm: brand["radius-sm"],
+	md: brand["radius-md"],
+	pill: dimensions["radius-pill"]
+};
+/** Kartın iç boşluğu (yan); sütun hesapları bunu düşer. */
+const EMAIL_GUTTER = sizeNumber("space-6");
+/** İçerik genişliği: kart genişliğinden iki yan boşluk ve iki 1 piksellik kenar düşülür. */
+const EMAIL_CONTENT_WIDTH = 600 - 2 * EMAIL_GUTTER - 2;
+font.text, color("fg");
+const linkStyle = {
+	color: color("fg-link"),
+	textDecoration: "underline",
+	textUnderlineOffset: dimensions["link-underline-offset"]
+};
+/** Tonun açık zemin, kenar ve yazı rengi (izinli çiftler: `bg-*-subtle` + `fg-*-strong`). */
+function toneColors(tone) {
+	if (tone === "neutral") return {
+		bg: color("bg-subtle"),
+		border: color("border"),
+		fg: color("fg")
+	};
+	return {
+		bg: color(`bg-${tone}-subtle`),
+		border: color(`border-${tone}`),
+		fg: color(`fg-${tone}-strong`)
+	};
+}
+const SAFE_HREF = /^(https:\/\/|mailto:|tel:)/i;
+const SAFE_SRC = /^(https:\/\/|cid:)/i;
+/** Boşluk ya da denetim karakteri: adres satır sonuyla bölünmüş ya da gizlenmiş olabilir. */
+function hasControlOrSpace(value) {
+	if (/\s/.test(value)) return true;
+	for (const ch of value) {
+		const code = ch.codePointAt(0) ?? 0;
+		if (code < 32 || code === 127) return true;
+	}
+	return false;
+}
+/**
+* Bağlantı adresinin güvenli olup olmadığını denetler: yalnız `https:`, `mailto:` ve `tel:`.
+* `javascript:`, `data:`, düz `http:` ve göreli adres e-postada çalışmaz ya da tehlikelidir;
+* güvenli değilse `undefined` döner ve bileşen bağlantı kurmaz.
+*/
+function safeHref(href) {
+	const value = href?.trim();
+	if (!value || hasControlOrSpace(value)) return void 0;
+	return SAFE_HREF.test(value) ? value : void 0;
+}
+/** Görsel adresi: yalnız `https:` ve ekli görsel (`cid:`); başkası çizilmez. */
+function safeSrc(src) {
+	const value = src?.trim();
+	if (!value || hasControlOrSpace(value)) return void 0;
+	return SAFE_SRC.test(value) ? value : void 0;
+}
+/** `data-*` özniteliklerini ayıklar. */
+function dataAttributes(props) {
+	return Object.fromEntries(Object.entries(props).filter(([k]) => k.startsWith("data-")));
+}
+export { EMAIL_CONTENT_WIDTH, EMAIL_GUTTER, color, dataAttributes, font, linkStyle, radius, safeHref, safeSrc, size, sizeNumber, toneColors };

package/dist/email/index.d.ts

@@ -0,0 +1,36 @@
+import { EmailButton, EmailButtonProps } from "./EmailButton/EmailButton.js";
+import "./EmailButton/index.js";
+import { EmailCallout, EmailCalloutProps } from "./EmailCallout/EmailCallout.js";
+import "./EmailCallout/index.js";
+import { EmailCode, EmailCodeProps } from "./EmailCode/EmailCode.js";
+import "./EmailCode/index.js";
+import { EmailColumns, EmailColumnsProps } from "./EmailColumns/EmailColumns.js";
+import "./EmailColumns/index.js";
+import { EmailDivider, EmailDividerProps } from "./EmailDivider/EmailDivider.js";
+import "./EmailDivider/index.js";
+import { EmailFooter, EmailFooterLink, EmailFooterProps } from "./EmailFooter/EmailFooter.js";
+import "./EmailFooter/index.js";
+import { EmailHeader, EmailHeaderLogo, EmailHeaderProps } from "./EmailHeader/EmailHeader.js";
+import "./EmailHeader/index.js";
+import { EmailHeading, EmailHeadingProps } from "./EmailHeading/EmailHeading.js";
+import "./EmailHeading/index.js";
+import { EmailImage, EmailImageProps } from "./EmailImage/EmailImage.js";
+import "./EmailImage/index.js";
+import { EmailLayout, EmailLayoutProps } from "./EmailLayout/EmailLayout.js";
+import { EmailDocumentOptions, emailDocument } from "./EmailLayout/emailDocument.js";
+import "./EmailLayout/index.js";
+import { EmailList, EmailListProps } from "./EmailList/EmailList.js";
+import "./EmailList/index.js";
+import { EmailPreheader, EmailPreheaderProps } from "./EmailPreheader/EmailPreheader.js";
+import "./EmailPreheader/index.js";
+import { EmailProductRow, EmailProductRowProps } from "./EmailProductRow/EmailProductRow.js";
+import "./EmailProductRow/index.js";
+import { EmailSocialLink, EmailSocialLinks, EmailSocialLinksProps } from "./EmailSocialLinks/EmailSocialLinks.js";
+import "./EmailSocialLinks/index.js";
+import { EmailStatItem, EmailStats, EmailStatsProps } from "./EmailStats/EmailStats.js";
+import "./EmailStats/index.js";
+import { EmailTable, EmailTableColumn, EmailTableProps } from "./EmailTable/EmailTable.js";
+import "./EmailTable/index.js";
+import { EmailText, EmailTextProps } from "./EmailText/EmailText.js";
+import "./EmailText/index.js";
+export { EmailButton, EmailButtonProps, EmailCallout, EmailCalloutProps, EmailCode, EmailCodeProps, EmailColumns, EmailColumnsProps, EmailDivider, EmailDividerProps, EmailDocumentOptions, EmailFooter, EmailFooterLink, EmailFooterProps, EmailHeader, EmailHeaderLogo, EmailHeaderProps, EmailHeading, EmailHeadingProps, EmailImage, EmailImageProps, EmailLayout, EmailLayoutProps, EmailList, EmailListProps, EmailPreheader, EmailPreheaderProps, EmailProductRow, EmailProductRowProps, EmailSocialLink, EmailSocialLinks, EmailSocialLinksProps, EmailStatItem, EmailStats, EmailStatsProps, EmailTable, EmailTableColumn, EmailTableProps, EmailText, EmailTextProps, emailDocument };

package/dist/email/index.js

@@ -0,0 +1,19 @@
+import { EmailButton } from "./EmailButton/EmailButton.js";
+import { EmailCallout } from "./EmailCallout/EmailCallout.js";
+import { EmailCode } from "./EmailCode/EmailCode.js";
+import { EmailColumns } from "./EmailColumns/EmailColumns.js";
+import { EmailDivider } from "./EmailDivider/EmailDivider.js";
+import { EmailFooter } from "./EmailFooter/EmailFooter.js";
+import { EmailHeader } from "./EmailHeader/EmailHeader.js";
+import { EmailHeading } from "./EmailHeading/EmailHeading.js";
+import { EmailImage } from "./EmailImage/EmailImage.js";
+import { EmailLayout } from "./EmailLayout/EmailLayout.js";
+import { emailDocument } from "./EmailLayout/emailDocument.js";
+import { EmailList } from "./EmailList/EmailList.js";
+import { EmailPreheader } from "./EmailPreheader/EmailPreheader.js";
+import { EmailProductRow } from "./EmailProductRow/EmailProductRow.js";
+import { EmailSocialLinks } from "./EmailSocialLinks/EmailSocialLinks.js";
+import { EmailStats } from "./EmailStats/EmailStats.js";
+import { EmailTable } from "./EmailTable/EmailTable.js";
+import { EmailText } from "./EmailText/EmailText.js";
+export { EmailButton, EmailCallout, EmailCode, EmailColumns, EmailDivider, EmailFooter, EmailHeader, EmailHeading, EmailImage, EmailLayout, EmailList, EmailPreheader, EmailProductRow, EmailSocialLinks, EmailStats, EmailTable, EmailText, emailDocument };