@stisocial/ui 0.1.0 → 0.2.0

package/dist/email/EmailFooter/EmailFooter.js

@@ -0,0 +1,64 @@
+import { color, dataAttributes, font, linkStyle, safeHref, size } from "../_shared/theme.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailFooter/EmailFooter.tsx
+/**
+* E-posta alt bilgisi: zeminde, kartın altında ortalanmış ikincil metin. Gönderen unvanı ve adresi,
+* e-postanın neden geldiği, KVKK ve tercih bağlantıları, abonelikten çıkma.
+*/
+function EmailFooter({ company, address, reason, unsubscribe, links = [], children, className, id, ...rest }) {
+	const all = [...links, ...unsubscribe ? [unsubscribe] : []].flatMap((l) => {
+		const href = safeHref(l.href);
+		return href ? [{
+			href,
+			label: l.label
+		}] : [];
+	});
+	const p = {
+		margin: `0 0 ${size("space-2")}`,
+		fontFamily: font.text,
+		fontSize: size("font-size-xs"),
+		lineHeight: size("line-height-sm"),
+		color: color("fg-muted"),
+		overflowWrap: "anywhere"
+	};
+	const link = {
+		...linkStyle,
+		color: color("fg-muted")
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			padding: `0 ${size("space-4")}`,
+			textAlign: "center"
+		},
+		children: [
+			children,
+			reason ? /* @__PURE__ */ jsx("p", {
+				style: p,
+				children: reason
+			}) : null,
+			all.length > 0 ? /* @__PURE__ */ jsx("p", {
+				style: p,
+				children: all.map((l, i) => /* @__PURE__ */ jsxs("span", { children: [i > 0 ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					style: { padding: `0 ${size("space-2")}` },
+					children: "·"
+				}) : null, /* @__PURE__ */ jsx("a", {
+					href: l.href,
+					style: link,
+					children: l.label
+				})] }, l.href))
+			}) : null,
+			/* @__PURE__ */ jsxs("p", {
+				style: {
+					...p,
+					margin: 0
+				},
+				children: [company, address ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), address] }) : null]
+			})
+		]
+	});
+}
+export { EmailFooter };

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

@@ -0,0 +1,2 @@
+import { EmailFooter, EmailFooterLink, EmailFooterProps } from "./EmailFooter.js";
+export { EmailFooter, EmailFooterLink, EmailFooterProps };

package/dist/email/EmailHeader/EmailHeader.d.ts

@@ -0,0 +1,23 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailHeaderLogo {
+  /** Logo görseli (`https:` ya da `cid:`); PNG önerilir (SVG çoğu istemcide görünmez). */
+  src: string;
+  /** Genişlik ve yükseklik (piksel). */
+  width: number;
+  height: number;
+}
+export interface EmailHeaderProps extends EmailBaseProps {
+  /**
+   * Gönderenin adı ("stisocial"). Logo varsa logonun seçenek metnidir (görseller kapalıyken
+   * görünür); logo yoksa yazı olarak çizilir.
+   */
+  brand: string;
+  logo?: EmailHeaderLogo;
+  /** Logo ya da ad bağlantı olur (`https:`). */
+  href?: string;
+  /** Bitiş tarafında kısa bilgi ("Haftalık rapor · 10 Kasım"). */
+  aside?: ReactNode;
+}
+/** E-posta üst bilgisi: zeminde, kartın üstünde gönderenin logosu ya da adı ve isteğe bağlı not. */
+export declare function EmailHeader({ brand, logo, href, aside, className, id, ...rest }: EmailHeaderProps): import("react").JSX.Element;

package/dist/email/EmailHeader/EmailHeader.js

@@ -0,0 +1,75 @@
+import { color, dataAttributes, font, safeHref, safeSrc, size } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailHeader/EmailHeader.tsx
+/** E-posta üst bilgisi: zeminde, kartın üstünde gönderenin logosu ya da adı ve isteğe bağlı not. */
+function EmailHeader({ brand, logo, href, aside, className, id, ...rest }) {
+	const src = safeSrc(logo?.src);
+	const link = safeHref(href);
+	const mark = src && logo ? /* @__PURE__ */ jsx("img", {
+		src,
+		loading: "lazy",
+		alt: brand,
+		width: logo.width,
+		height: logo.height,
+		style: {
+			display: "block",
+			height: `${logo.height}px`,
+			width: `${logo.width}px`,
+			border: 0,
+			color: color("fg"),
+			fontFamily: font.display,
+			fontSize: size("font-size-lg"),
+			fontWeight: 600
+		}
+	}) : /* @__PURE__ */ jsx("span", {
+		style: {
+			fontFamily: font.display,
+			fontSize: size("font-size-lg"),
+			lineHeight: size("line-height-lg"),
+			fontWeight: 600,
+			letterSpacing: "-0.01em",
+			color: color("fg")
+		},
+		children: brand
+	});
+	return /* @__PURE__ */ jsx("table", {
+		...dataAttributes(rest),
+		role: "presentation",
+		className,
+		id,
+		width: "100%",
+		cellPadding: 0,
+		cellSpacing: 0,
+		style: {
+			width: "100%",
+			borderCollapse: "collapse"
+		},
+		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("td", {
+			style: {
+				padding: `0 ${size("space-2")}`,
+				verticalAlign: "middle"
+			},
+			children: link ? /* @__PURE__ */ jsx("a", {
+				href: link,
+				style: {
+					display: "inline-block",
+					textDecoration: "none",
+					color: color("fg")
+				},
+				children: mark
+			}) : mark
+		}), aside ? /* @__PURE__ */ jsx("td", {
+			style: {
+				padding: `0 ${size("space-2")}`,
+				verticalAlign: "middle",
+				textAlign: "end",
+				fontFamily: font.text,
+				fontSize: size("font-size-sm"),
+				lineHeight: size("line-height-sm"),
+				color: color("fg-muted")
+			},
+			children: aside
+		}) : null] }) })
+	});
+}
+export { EmailHeader };

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

@@ -0,0 +1,2 @@
+import { EmailHeader, EmailHeaderLogo, EmailHeaderProps } from "./EmailHeader.js";
+export { EmailHeader, EmailHeaderLogo, EmailHeaderProps };

package/dist/email/EmailHeading/EmailHeading.d.ts

@@ -0,0 +1,11 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailHeadingProps extends EmailBaseProps {
+  /** Başlık düzeyi; e-postada tek `h1` (ana başlık) olur. Varsayılan: `1`. */
+  level?: 1 | 2 | 3;
+  /** Hizalama. Varsayılan: `"start"`. */
+  align?: "start" | "center";
+  children: ReactNode;
+}
+/** E-posta başlığı (`h1`–`h3`): marka başlık yazı tipi, düzeye göre boy, alt boşluk. */
+export declare function EmailHeading({ level, align, children, className, id, ...rest }: EmailHeadingProps): import("react").JSX.Element;

package/dist/email/EmailHeading/EmailHeading.js

@@ -0,0 +1,43 @@
+import { color, dataAttributes, font, size } from "../_shared/theme.js";
+import { jsx } from "react/jsx-runtime";
+// src/email/EmailHeading/EmailHeading.tsx
+const SIZES = {
+	1: {
+		fontSize: size("font-size-2xl"),
+		lineHeight: size("line-height-2xl"),
+		spacing: "-0.02em"
+	},
+	2: {
+		fontSize: size("font-size-xl"),
+		lineHeight: size("line-height-xl"),
+		spacing: "-0.015em"
+	},
+	3: {
+		fontSize: size("font-size-lg"),
+		lineHeight: size("line-height-lg"),
+		spacing: "-0.005em"
+	}
+};
+/** E-posta başlığı (`h1`–`h3`): marka başlık yazı tipi, düzeye göre boy, alt boşluk. */
+function EmailHeading({ level = 1, align = "start", children, className, id, ...rest }) {
+	const Tag = `h${level}`;
+	const s = SIZES[level];
+	return /* @__PURE__ */ jsx(Tag, {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			margin: `0 0 ${size(level === 1 ? "space-4" : "space-3")}`,
+			fontFamily: font.display,
+			fontSize: s.fontSize,
+			lineHeight: s.lineHeight,
+			letterSpacing: s.spacing,
+			fontWeight: 600,
+			color: color("fg"),
+			textAlign: align === "center" ? "center" : void 0,
+			overflowWrap: "anywhere"
+		},
+		children
+	});
+}
+export { EmailHeading };

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

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

package/dist/email/EmailImage/EmailImage.d.ts

@@ -0,0 +1,25 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+export interface EmailImageProps extends EmailBaseProps {
+  /** Görsel adresi: yalnız `https:` ya da ekli görsel (`cid:`). Güvenli değilse görsel çizilmez. */
+  src: string;
+  /**
+   * Seçenek metni. Görseller çoğu istemcide varsayılan olarak kapalıdır: metin, görselin yerinde
+   * okunur ve görünür. Yalnız süs görselinde boş (`""`) verilir.
+   */
+  alt: string;
+  /** Genişlik (piksel); en çok içerik genişliği (550). Dar ekranda orantılı küçülür. */
+  width: number;
+  /** Yükseklik (piksel); en-boy oranı için gereklidir. */
+  height: number;
+  /** Görsel bağlantıysa hedef adres (`https:`). */
+  href?: string;
+  /** Köşeler yuvarlatılır (`radius-sm`). */
+  rounded?: boolean;
+  /** Hizalama. Varsayılan: `"start"`. */
+  align?: "start" | "center";
+}
+/**
+ * E-posta görseli: genişlik ve yükseklik öznitelikte (Outlook), dar ekranda `max-width: 100%` ile
+ * orantılı küçülür. Görseller kapalıyken seçenek metni gövde yazısıyla görünür.
+ */
+export declare function EmailImage({ src, alt, width, height, href, rounded, align, className, id, ...rest }: EmailImageProps): import("react").JSX.Element | null;

package/dist/email/EmailImage/EmailImage.js

@@ -0,0 +1,53 @@
+import { EMAIL_CONTENT_WIDTH, color, dataAttributes, font, radius, safeHref, safeSrc, size } from "../_shared/theme.js";
+import { jsx } from "react/jsx-runtime";
+// src/email/EmailImage/EmailImage.tsx
+/**
+* E-posta görseli: genişlik ve yükseklik öznitelikte (Outlook), dar ekranda `max-width: 100%` ile
+* orantılı küçülür. Görseller kapalıyken seçenek metni gövde yazısıyla görünür.
+*/
+function EmailImage({ src, alt, width, height, href, rounded = false, align = "start", className, id, ...rest }) {
+	const safe = safeSrc(src);
+	if (!safe) return null;
+	const w = Math.min(Math.max(1, Math.round(width)), EMAIL_CONTENT_WIDTH);
+	const h = Math.max(1, Math.round(height * w / Math.max(1, width)));
+	const img = /* @__PURE__ */ jsx("img", {
+		src: safe,
+		loading: "lazy",
+		alt,
+		width: w,
+		height: h,
+		style: {
+			display: "block",
+			width: "100%",
+			maxWidth: `${w}px`,
+			height: "auto",
+			margin: align === "center" ? "0 auto" : 0,
+			border: 0,
+			outline: "none",
+			borderRadius: rounded ? radius.sm : void 0,
+			color: color("fg-muted"),
+			fontFamily: font.text,
+			fontSize: size("font-size-sm"),
+			lineHeight: size("line-height-sm")
+		}
+	});
+	const link = safeHref(href);
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			margin: `0 0 ${size("space-4")}`,
+			textAlign: align === "center" ? "center" : void 0
+		},
+		children: link ? /* @__PURE__ */ jsx("a", {
+			href: link,
+			style: {
+				display: "block",
+				textDecoration: "none"
+			},
+			children: img
+		}) : img
+	});
+}
+export { EmailImage };

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

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

package/dist/email/EmailLayout/EmailLayout.d.ts

@@ -0,0 +1,30 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailLayoutProps extends EmailBaseProps {
+  /**
+   * E-postanın konusu. Ekran okuyucu e-postayı bu adla bir makale olarak tanıtır; `emailDocument`
+   * ile kullanılıyorsa belge başlığıyla aynı olmalıdır.
+   */
+  title: string;
+  /**
+   * Ekran okuyucunun rol açıklaması. Varsayılan: `"e-posta"`; başka dilde e-postada o dilde verilir
+   * (`"email"`).
+   */
+  roleDescription?: string;
+  /** İçeriğin dili (BCP 47). Varsayılan: `"tr"`. */
+  lang?: string;
+  /** Yazı yönü. Varsayılan: `"ltr"`. */
+  dir?: "ltr" | "rtl";
+  /** Kartın üstünde, zeminde duran parça: `EmailPreheader`, `EmailHeader`. */
+  header?: ReactNode;
+  /** Kartın altında, zeminde duran parça: `EmailFooter`. */
+  footer?: ReactNode;
+  /** Kartın içi: başlık, metin, düğme… */
+  children: ReactNode;
+}
+/**
+ * E-postanın iskeleti: zemin, ortalanmış en çok 600 piksel genişliğinde kart, kartın üstünde ve
+ * altında zemin parçaları. Tablo düzeni (`role="presentation"`) eski istemcilerde de ortalanır.
+ * Sunucu bileşenidir; çıktı `renderToStaticMarkup` ile alınır ve `emailDocument` ile sarılır.
+ */
+export declare function EmailLayout({ title, roleDescription, lang, dir, header, footer, children, className, id, ...rest }: EmailLayoutProps): import("react").JSX.Element;

package/dist/email/EmailLayout/EmailLayout.js

@@ -0,0 +1,79 @@
+import { EMAIL_GUTTER, color, dataAttributes, font, radius, size } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailLayout/EmailLayout.tsx
+/**
+* E-postanın iskeleti: zemin, ortalanmış en çok 600 piksel genişliğinde kart, kartın üstünde ve
+* altında zemin parçaları. Tablo düzeni (`role="presentation"`) eski istemcilerde de ortalanır.
+* Sunucu bileşenidir; çıktı `renderToStaticMarkup` ile alınır ve `emailDocument` ile sarılır.
+*/
+function EmailLayout({ title, roleDescription = "e-posta", lang = "tr", dir = "ltr", header, footer, children, className, id, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttributes(rest),
+		role: "article",
+		"aria-roledescription": roleDescription,
+		"aria-label": title,
+		lang,
+		dir,
+		className,
+		id,
+		style: {
+			boxSizing: "border-box",
+			width: "100%",
+			margin: 0,
+			padding: `${size("space-6")} ${size("space-2")}`,
+			backgroundColor: color("bg-surface"),
+			color: color("fg"),
+			fontFamily: font.text,
+			fontSize: size("font-size-md"),
+			lineHeight: size("line-height-md"),
+			WebkitTextSizeAdjust: "100%"
+		},
+		children: /* @__PURE__ */ jsx("table", {
+			role: "presentation",
+			width: "100%",
+			cellPadding: 0,
+			cellSpacing: 0,
+			style: {
+				borderCollapse: "collapse",
+				width: "100%"
+			},
+			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				align: "center",
+				style: { padding: 0 },
+				children: /* @__PURE__ */ jsx("table", {
+					role: "presentation",
+					width: 600,
+					cellPadding: 0,
+					cellSpacing: 0,
+					style: {
+						borderCollapse: "separate",
+						width: "100%",
+						maxWidth: `600px`
+					},
+					children: /* @__PURE__ */ jsxs("tbody", { children: [
+						header ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+							style: { padding: `0 0 ${size("space-4")}` },
+							children: header
+						}) }) : null,
+						/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+							dir,
+							style: {
+								padding: `${size("space-8")} ${EMAIL_GUTTER}px ${size("space-4")}`,
+								backgroundColor: color("bg-canvas"),
+								border: `1px solid ${color("border-subtle")}`,
+								borderRadius: radius.md,
+								textAlign: dir === "rtl" ? "right" : "left"
+							},
+							children
+						}) }),
+						footer ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+							style: { padding: `${size("space-6")} ${size("space-2")} 0` },
+							children: footer
+						}) }) : null
+					] })
+				})
+			}) }) })
+		})
+	});
+}
+export { EmailLayout };

package/dist/email/EmailLayout/emailDocument.d.ts

@@ -0,0 +1,16 @@
+export interface EmailDocumentOptions {
+  /** `renderToStaticMarkup(<EmailLayout …/>)` çıktısı. */
+  body: string;
+  /** Belge başlığı: e-postanın konusu (`EmailLayout` `title` ile aynı). */
+  title: string;
+  /** Belgenin dili. Varsayılan: `"tr"`. */
+  lang?: string;
+  /** Yazı yönü. Varsayılan: `"ltr"`. */
+  dir?: "ltr" | "rtl";
+}
+/**
+ * Bileşen çıktısını gönderilecek tam HTML belgesine sarar: belge türü, UTF-8, mobil görünüm alanı,
+ * yalnız açık renk şeması bildirimi, kaçışlı başlık. Betik ve dış kaynak eklemez. Başlık ve dil
+ * özniteliği kaçışlanır; `body` güvenilen bileşen çıktısı olmalıdır (kullanıcı girdisi değil).
+ */
+export declare function emailDocument({ body, title, lang, dir }: EmailDocumentOptions): string;

package/dist/email/EmailLayout/emailDocument.js

@@ -0,0 +1,36 @@
+import { color } from "../_shared/theme.js";
+// src/email/EmailLayout/emailDocument.ts
+const ESCAPES = {
+	"&": "&",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+};
+function escapeHtml(value) {
+	return value.replace(/[&<>"']/g, (ch) => ESCAPES[ch]);
+}
+/**
+* Bileşen çıktısını gönderilecek tam HTML belgesine sarar: belge türü, UTF-8, mobil görünüm alanı,
+* yalnız açık renk şeması bildirimi, kaçışlı başlık. Betik ve dış kaynak eklemez. Başlık ve dil
+* özniteliği kaçışlanır; `body` güvenilen bileşen çıktısı olmalıdır (kullanıcı girdisi değil).
+*/
+function emailDocument({ body, title, lang = "tr", dir = "ltr" }) {
+	return [
+		"<!doctype html>",
+		`<html lang="${/^[A-Za-z]{2,3}(-[A-Za-z0-9]{2,8})*$/.test(lang) ? lang : "tr"}" dir="${dir === "rtl" ? "rtl" : "ltr"}">`,
+		"<head>",
+		"<meta charset=\"utf-8\">",
+		"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
+		"<meta name=\"x-apple-disable-message-reformatting\">",
+		"<meta name=\"color-scheme\" content=\"light\">",
+		"<meta name=\"supported-color-schemes\" content=\"light\">",
+		`<title>${escapeHtml(title)}</title>`,
+		"</head>",
+		`<body style="margin:0;padding:0;background-color:${color("bg-surface")}">`,
+		body,
+		"</body>",
+		"</html>"
+	].join("\n");
+}
+export { emailDocument };

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

@@ -0,0 +1,3 @@
+import { EmailLayout, EmailLayoutProps } from "./EmailLayout.js";
+import { EmailDocumentOptions, emailDocument } from "./emailDocument.js";
+export { EmailDocumentOptions, EmailLayout, EmailLayoutProps, emailDocument };

package/dist/email/EmailList/EmailList.d.ts

@@ -0,0 +1,10 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailListProps extends EmailBaseProps {
+  /** Maddeler; boşsa liste çizilmez. */
+  items: ReactNode[];
+  /** Sıralı liste (`ol`, adımlar). Varsayılan: `false` (`ul`). */
+  ordered?: boolean;
+}
+/** Madde ya da sıra listesi; istemcilerin farklı girintisi sıfırlanıp tasarım değeriyle yazılır. */
+export declare function EmailList({ items, ordered, className, id, ...rest }: EmailListProps): import("react").JSX.Element | null;

package/dist/email/EmailList/EmailList.js

@@ -0,0 +1,28 @@
+import { color, dataAttributes, font, size } from "../_shared/theme.js";
+import { jsx } from "react/jsx-runtime";
+// src/email/EmailList/EmailList.tsx
+/** Madde ya da sıra listesi; istemcilerin farklı girintisi sıfırlanıp tasarım değeriyle yazılır. */
+function EmailList({ items, ordered = false, className, id, ...rest }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(ordered ? "ol" : "ul", {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			margin: `0 0 ${size("space-4")}`,
+			paddingInlineStart: size("space-6"),
+			fontFamily: font.text,
+			fontSize: size("font-size-md"),
+			lineHeight: size("line-height-md"),
+			color: color("fg")
+		},
+		children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
+			style: {
+				margin: `0 0 ${size("space-2")}`,
+				overflowWrap: "anywhere"
+			},
+			children: item
+		}, i))
+	});
+}
+export { EmailList };

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

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

package/dist/email/EmailPreheader/EmailPreheader.d.ts

@@ -0,0 +1,14 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+export interface EmailPreheaderProps extends EmailBaseProps {
+  /**
+   * Gelen kutusunda konunun yanında görünen özet (en çok 120 karakter önerilir). Gövdede görünmez;
+   * ekran okuyucu da okumaz (aynı bilgi gövdede yazılıdır).
+   */
+  children: string;
+}
+/**
+ * Gelen kutusu özet metni. Gövdede gizlidir; ardından gelen görünmez dolgu, istemcinin özeti
+ * gövdenin ilk satırlarıyla tamamlamasını önler. `EmailLayout`'un `header` parçasında, en başta
+ * kullanılır.
+ */
+export declare function EmailPreheader({ children, className, id, ...rest }: EmailPreheaderProps): import("react").JSX.Element;

package/dist/email/EmailPreheader/EmailPreheader.js

@@ -0,0 +1,30 @@
+import { dataAttributes } from "../_shared/theme.js";
+import { jsxs } from "react/jsx-runtime";
+// src/email/EmailPreheader/EmailPreheader.tsx
+/** İstemcinin özet satırına gövde metninin sızmasını önleyen görünmez dolgu. */
+const FILLER = "‌\xA0".repeat(90);
+/**
+* Gelen kutusu özet metni. Gövdede gizlidir; ardından gelen görünmez dolgu, istemcinin özeti
+* gövdenin ilk satırlarıyla tamamlamasını önler. `EmailLayout`'un `header` parçasında, en başta
+* kullanılır.
+*/
+function EmailPreheader({ children, className, id, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...dataAttributes(rest),
+		className,
+		id,
+		"aria-hidden": "true",
+		style: {
+			display: "none",
+			maxHeight: 0,
+			maxWidth: 0,
+			overflow: "hidden",
+			opacity: 0,
+			fontSize: "1px",
+			lineHeight: "1px",
+			msoHide: "all"
+		},
+		children: [children.trim(), FILLER]
+	});
+}
+export { EmailPreheader };

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

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

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

@@ -0,0 +1,23 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailProductRowProps extends EmailBaseProps {
+  /** Ürün adı. */
+  name: ReactNode;
+  /** Ürün görseli (`https:`); yoksa yerinde nötr kutu durur. */
+  imageSrc?: string;
+  /** Görselin seçenek metni; ad zaten yazılı olduğundan varsayılan boştur (süs). */
+  imageAlt?: string;
+  /** Kısa açıklama ("Mavi, M beden"). */
+  description?: ReactNode;
+  /** Adet ya da ek bilgi ("Adet: 2"). */
+  meta?: ReactNode;
+  /** Biçimlenmiş fiyat ("1.250,00 TL"); biçimi gönderen yapar. */
+  price?: ReactNode;
+  /** Ürün sayfası (`https:`); ad bağlantı olur. */
+  href?: string;
+}
+/**
+ * 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.
+ */
+export declare function EmailProductRow({ name, imageSrc, imageAlt, description, meta, price, href, className, id, ...rest }: EmailProductRowProps): import("react").JSX.Element;