@stisocial/ui 0.1.0 → 0.2.0

package/dist/editor/_shared/FormatIcons.js

@@ -0,0 +1,138 @@
+import { Icon } from "../../icons/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/editor/_shared/FormatIcons.tsx
+function BoldIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7H7z" }), /* @__PURE__ */ jsx("path", { d: "M7 12h7a3.5 3.5 0 0 1 0 7H7z" })]
+	});
+}
+function ItalicIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M10 5h8" }),
+			/* @__PURE__ */ jsx("path", { d: "M6 19h8" }),
+			/* @__PURE__ */ jsx("path", { d: "m15 5-6 14" })
+		]
+	});
+}
+function StrikethroughIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M4 12h16" }),
+			/* @__PURE__ */ jsx("path", { d: "M16.5 7.5C16 6 14.4 5 12 5c-2.6 0-4.2 1.2-4.2 3 0 1.3.8 2.2 2.2 2.8" }),
+			/* @__PURE__ */ jsx("path", { d: "M14 13.2c1.5.5 2.4 1.4 2.4 2.8 0 1.8-1.8 3-4.4 3-2.5 0-4.2-1-4.7-2.8" })
+		]
+	});
+}
+function HeadingTwoIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M4 5v14" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+			/* @__PURE__ */ jsx("path", { d: "M4 12h8" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 10.5a2.5 2 0 0 1 5 0c0 1.5-1.5 2.2-5 5.5h5" })
+		]
+	});
+}
+function HeadingThreeIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M4 5v14" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+			/* @__PURE__ */ jsx("path", { d: "M4 12h8" }),
+			/* @__PURE__ */ jsx("path", { d: "M16 10.5c.5-1 1.4-1.5 2.4-1.5 1.4 0 2.1.8 2.1 1.8s-.8 1.7-2.1 1.7c1.4 0 2.3.7 2.3 1.9 0 1.1-.9 1.9-2.4 1.9-1.1 0-2-.5-2.5-1.5" })
+		]
+	});
+}
+function QuoteIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M5 6v12" }),
+			/* @__PURE__ */ jsx("path", { d: "M10 8h9" }),
+			/* @__PURE__ */ jsx("path", { d: "M10 12h9" }),
+			/* @__PURE__ */ jsx("path", { d: "M10 16h6" })
+		]
+	});
+}
+function BulletListIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M9 6h11" }),
+			/* @__PURE__ */ jsx("path", { d: "M9 12h11" }),
+			/* @__PURE__ */ jsx("path", { d: "M9 18h11" }),
+			/* @__PURE__ */ jsx("path", { d: "M4.5 6h.01" }),
+			/* @__PURE__ */ jsx("path", { d: "M4.5 12h.01" }),
+			/* @__PURE__ */ jsx("path", { d: "M4.5 18h.01" })
+		]
+	});
+}
+function NumberedListIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M11 6h9" }),
+			/* @__PURE__ */ jsx("path", { d: "M11 12h9" }),
+			/* @__PURE__ */ jsx("path", { d: "M11 18h9" }),
+			/* @__PURE__ */ jsx("path", { d: "M4 5.5 5.5 5v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M4 14.5c0-.8.6-1.3 1.4-1.3s1.4.5 1.4 1.2c0 .8-.7 1.2-2.8 3.1h2.9" })
+		]
+	});
+}
+function TaskListIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "3.5",
+				y: "4",
+				width: "5",
+				height: "5",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m4.5 6.5 1 1 1.6-2" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 6.5h8.5" }),
+			/* @__PURE__ */ jsx("rect", {
+				x: "3.5",
+				y: "14",
+				width: "5",
+				height: "5",
+				rx: "1"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16.5h8.5" })
+		]
+	});
+}
+function CodeBlockIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "4",
+				width: "18",
+				height: "16",
+				rx: "2.5"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m10 9.5-2.5 2.5 2.5 2.5" }),
+			/* @__PURE__ */ jsx("path", { d: "m14 9.5 2.5 2.5-2.5 2.5" })
+		]
+	});
+}
+function RuleIcon(props) {
+	return /* @__PURE__ */ jsxs(Icon, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M4 12h16" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 6h8" }),
+			/* @__PURE__ */ jsx("path", { d: "M8 18h8" })
+		]
+	});
+}
+export { BoldIcon, BulletListIcon, CodeBlockIcon, HeadingThreeIcon, HeadingTwoIcon, ItalicIcon, NumberedListIcon, QuoteIcon, RuleIcon, StrikethroughIcon, TaskListIcon };

package/dist/editor/_shared/textEdit.js

@@ -0,0 +1,76 @@
+// src/editor/_shared/textEdit.ts
+/** Düzenlemeyi metne uygular (testlerde sonucu doğrulamak için). */
+function applyToString(value, edit) {
+	return value.slice(0, edit.from) + edit.insert + value.slice(edit.to);
+}
+/** İmleç konumunun satır başı ve satır sonu (satır sonu `\n` karakterinin konumudur). */
+function lineBounds(value, pos) {
+	const start = value.lastIndexOf("\n", pos - 1) + 1;
+	const next = value.indexOf("\n", pos);
+	return {
+		start,
+		end: next === -1 ? value.length : next
+	};
+}
+/** Düzenlemeyi gerçek metin alanına uygular. */
+function applyEdit(el, edit) {
+	const before = el.value;
+	if (document.activeElement !== el) el.focus({ preventScroll: true });
+	if (!(edit.from === edit.to && edit.insert === "")) {
+		el.setSelectionRange(edit.from, edit.to);
+		let done = false;
+		try {
+			done = edit.insert === "" ? document.execCommand("delete") : document.execCommand("insertText", false, edit.insert);
+		} catch {
+			done = false;
+		}
+		const expected = applyToString(before, edit);
+		if (!done || el.value !== expected) {
+			el.value = before;
+			el.setRangeText(edit.insert, edit.from, edit.to, "end");
+			el.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				inputType: "insertText",
+				data: edit.insert
+			}));
+		}
+	}
+	el.setSelectionRange(edit.selectStart, edit.selectEnd);
+}
+/**
+* Kod düzenleyicisinde bir konumu görünür kılar: alan kendi içinde kaydırılmaz (yüksekliği içeriğidir),
+* kaydıran ata `overflow: auto` olan gövdedir. Satır yüksekliği ve eşit aralıklı yazının sütun
+* genişliği hesaplanmış stilden okunur.
+*/
+function revealOffset(el, offset) {
+	const scroller = el.parentElement?.parentElement;
+	if (!scroller) return;
+	const cs = getComputedStyle(el);
+	const line = Number.parseFloat(cs.lineHeight);
+	const padTop = Number.parseFloat(cs.paddingTop);
+	const before = el.value.slice(0, offset);
+	const row = before.split("\n").length - 1;
+	const col = offset - (before.lastIndexOf("\n") + 1);
+	const probe = document.createElement("span");
+	probe.textContent = "0".repeat(20);
+	probe.style.setProperty("font", cs.font);
+	probe.style.setProperty("letter-spacing", cs.letterSpacing);
+	probe.setAttribute("aria-hidden", "true");
+	probe.style.setProperty("position", "absolute");
+	probe.style.setProperty("visibility", "hidden");
+	probe.style.setProperty("white-space", "pre");
+	probe.style.setProperty("padding", "0");
+	scroller.append(probe);
+	const ch = probe.getBoundingClientRect().width / 20;
+	probe.remove();
+	const top = padTop + row * line;
+	const left = Number.parseFloat(cs.paddingLeft) + col * ch;
+	const gutter = (el.previousElementSibling?.previousElementSibling)?.offsetWidth ?? 0;
+	const view = scroller.getBoundingClientRect();
+	if (top < scroller.scrollTop) scroller.scrollTop = Math.max(0, top - line);
+	else if (top + line > scroller.scrollTop + view.height) scroller.scrollTop = top + line * 2 - view.height;
+	const x = gutter + left;
+	if (x < scroller.scrollLeft + gutter) scroller.scrollLeft = Math.max(0, x - gutter - 40);
+	else if (x + ch > scroller.scrollLeft + view.width) scroller.scrollLeft = x + ch + 40 - view.width;
+}
+export { applyEdit, applyToString, lineBounds, revealOffset };

package/dist/editor/index.d.ts

@@ -0,0 +1,9 @@
+import { CodeLanguage } from "./CodeEditor/codeEdits.js";
+import { CodeEditor, CodeEditorProps, CodeMarker } from "./CodeEditor/CodeEditor.js";
+import "./CodeEditor/index.js";
+import { JsonError, JsonErrorCode, checkJson, formatJson, parseJson } from "./JsonEditor/json.js";
+import { JsonEditor, JsonEditorProps, JsonInfo } from "./JsonEditor/JsonEditor.js";
+import "./JsonEditor/index.js";
+import { MarkdownEditor, MarkdownEditorProps, MarkdownEditorView } from "./MarkdownEditor/MarkdownEditor.js";
+import "./MarkdownEditor/index.js";
+export { CodeEditor, CodeEditorProps, type CodeLanguage, CodeMarker, JsonEditor, JsonEditorProps, type JsonError, type JsonErrorCode, JsonInfo, MarkdownEditor, MarkdownEditorProps, MarkdownEditorView, checkJson, formatJson, parseJson };

package/dist/editor/index.js

@@ -0,0 +1,5 @@
+import { CodeEditor } from "./CodeEditor/CodeEditor.js";
+import { checkJson, formatJson, parseJson } from "./JsonEditor/json.js";
+import { JsonEditor } from "./JsonEditor/JsonEditor.js";
+import { MarkdownEditor } from "./MarkdownEditor/MarkdownEditor.js";
+export { CodeEditor, JsonEditor, MarkdownEditor, checkJson, formatJson, parseJson };

package/dist/email/EmailButton/EmailButton.d.ts

@@ -0,0 +1,22 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailButtonProps extends EmailBaseProps {
+  /** Hedef adres: yalnız `https:`, `mailto:` ya da `tel:`. Güvenli değilse bağlantı kurulmaz. */
+  href: string;
+  /** Görünür ve erişilebilir ad: eylemi söyleyen fiil ("E-posta adresimi doğrula"). */
+  children: ReactNode;
+  /** Tür: `primary` (ana eylem, e-postada bir tane), `secondary`, `danger`. Varsayılan: `"primary"`. */
+  variant?: "primary" | "secondary" | "danger";
+  /** Boy. Varsayılan: `"md"` (44 piksel). */
+  size?: "sm" | "md" | "lg";
+  /** Kart genişliğini doldurur (dar ekranda dokunması kolay). */
+  fullWidth?: boolean;
+  /** Hizalama (tam genişlik değilse). Varsayılan: `"start"`. */
+  align?: "start" | "center";
+}
+/**
+ * E-posta düğmesi: tablo hücresine oturan bağlantı ("kurşun geçirmez" düğme). Zemin hücrede ve
+ * bağlantıda birlikte durur; görseller kapalıyken ve Outlook'ta da düğme görünür. Yükseklik
+ * `control-h-*` (rahat yoğunluk) değeridir: iç boşluk = (yükseklik − satır yüksekliği − kenar) / 2.
+ */
+export declare function EmailButton({ href, children, variant, size: boy, fullWidth, align, className, id, ...rest }: EmailButtonProps): import("react").JSX.Element;

package/dist/email/EmailButton/EmailButton.js

@@ -0,0 +1,102 @@
+import { density } from "../../tokens/generated/values.js";
+import { color, dataAttributes, font, radius, safeHref, size, sizeNumber } from "../_shared/theme.js";
+import { jsx } from "react/jsx-runtime";
+// src/email/EmailButton/EmailButton.tsx
+const H = density.comfortable;
+const SIZES = {
+	sm: {
+		height: Number.parseFloat(H["control-h-sm"]),
+		fontSize: size("font-size-sm"),
+		lineHeight: size("line-height-sm"),
+		inline: size("space-4")
+	},
+	md: {
+		height: Number.parseFloat(H["control-h-md"]),
+		fontSize: size("font-size-md"),
+		lineHeight: size("line-height-md"),
+		inline: size("space-5")
+	},
+	lg: {
+		height: Number.parseFloat(H["control-h-lg"]),
+		fontSize: size("font-size-md"),
+		lineHeight: size("line-height-md"),
+		inline: size("space-6")
+	}
+};
+const VARIANTS = {
+	primary: {
+		bg: color("fill-accent"),
+		fg: color("fg-on-accent"),
+		border: color("fill-accent")
+	},
+	secondary: {
+		bg: color("bg-canvas"),
+		fg: color("fg"),
+		border: color("border-strong")
+	},
+	danger: {
+		bg: color("fill-danger"),
+		fg: color("fg-on-danger"),
+		border: color("fill-danger")
+	}
+};
+/**
+* E-posta düğmesi: tablo hücresine oturan bağlantı ("kurşun geçirmez" düğme). Zemin hücrede ve
+* bağlantıda birlikte durur; görseller kapalıyken ve Outlook'ta da düğme görünür. Yükseklik
+* `control-h-*` (rahat yoğunluk) değeridir: iç boşluk = (yükseklik − satır yüksekliği − kenar) / 2.
+*/
+function EmailButton({ href, children, variant = "primary", size: boy = "md", fullWidth = false, align = "start", className, id, ...rest }) {
+	const s = SIZES[boy];
+	const v = VARIANTS[variant];
+	const block = (s.height - Number.parseFloat(s.lineHeight) - 2) / 2;
+	const safe = safeHref(href);
+	const label = {
+		display: "block",
+		padding: `${block}px ${s.inline}`,
+		border: `1px solid ${v.border}`,
+		borderRadius: radius.pill,
+		backgroundColor: v.bg,
+		color: v.fg,
+		fontFamily: font.text,
+		fontSize: s.fontSize,
+		lineHeight: s.lineHeight,
+		fontWeight: 600,
+		textAlign: "center",
+		textDecoration: "none",
+		overflowWrap: "anywhere"
+	};
+	return /* @__PURE__ */ jsx("table", {
+		...dataAttributes(rest),
+		role: "presentation",
+		cellPadding: 0,
+		cellSpacing: 0,
+		className,
+		id,
+		"data-variant": variant,
+		"data-size": boy,
+		"data-invalid": safe ? void 0 : "",
+		align: fullWidth || align === "start" ? void 0 : "center",
+		width: fullWidth ? "100%" : void 0,
+		style: {
+			borderCollapse: "separate",
+			margin: `0 ${align === "center" && !fullWidth ? "auto" : "0"} ${size("space-4")}`,
+			width: fullWidth ? "100%" : void 0
+		},
+		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+			style: {
+				borderRadius: radius.pill,
+				backgroundColor: v.bg,
+				minWidth: `${sizeNumber("space-24")}px`
+			},
+			children: safe ? /* @__PURE__ */ jsx("a", {
+				href: safe,
+				style: label,
+				children
+			}) : /* @__PURE__ */ jsx("span", {
+				style: label,
+				children
+			})
+		}) }) })
+	});
+}
+export { EmailButton };

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

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

package/dist/email/EmailCallout/EmailCallout.d.ts

@@ -0,0 +1,14 @@
+import { EmailBaseProps, EmailTone } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailCalloutProps extends EmailBaseProps {
+  /** Anlam rengi. Varsayılan: `"neutral"`. */
+  tone?: EmailTone;
+  /**
+   * Kısa başlık ("Bu işlemi siz yapmadıysanız"). Renk anlamı tek başına taşımaz: uyarı ve tehlikede
+   * başlık ya da metin durumu sözle söylemelidir.
+   */
+  title?: ReactNode;
+  children: ReactNode;
+}
+/** Dikkat çekilecek bilgi kutusu: ton zemini, ton kenarı, isteğe bağlı başlık. */
+export declare function EmailCallout({ tone, title, children, className, id, ...rest }: EmailCalloutProps): import("react").JSX.Element;

package/dist/email/EmailCallout/EmailCallout.js

@@ -0,0 +1,42 @@
+import { dataAttributes, font, radius, size, toneColors } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailCallout/EmailCallout.tsx
+/** Dikkat çekilecek bilgi kutusu: ton zemini, ton kenarı, isteğe bağlı başlık. */
+function EmailCallout({ tone = "neutral", title, children, className, id, ...rest }) {
+	const t = toneColors(tone);
+	return /* @__PURE__ */ jsxs("div", {
+		...dataAttributes(rest),
+		className,
+		id,
+		"data-tone": tone,
+		style: {
+			margin: `0 0 ${size("space-4")}`,
+			padding: `${size("space-4")} ${size("space-5")}`,
+			backgroundColor: t.bg,
+			border: `1px solid ${t.border}`,
+			borderRadius: radius.sm,
+			color: t.fg,
+			fontFamily: font.text,
+			fontSize: size("font-size-sm"),
+			lineHeight: size("line-height-sm"),
+			overflowWrap: "anywhere"
+		},
+		children: [title ? /* @__PURE__ */ jsx("p", {
+			style: {
+				margin: `0 0 ${size("space-1")}`,
+				fontWeight: 600,
+				fontSize: size("font-size-md"),
+				lineHeight: size("line-height-md"),
+				color: t.fg
+			},
+			children: title
+		}) : null, /* @__PURE__ */ jsx("div", {
+			style: {
+				margin: 0,
+				color: t.fg
+			},
+			children
+		})]
+	});
+}
+export { EmailCallout };

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

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

package/dist/email/EmailCode/EmailCode.d.ts

@@ -0,0 +1,15 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailCodeProps extends EmailBaseProps {
+  /** Kod (tek kullanımlık doğrulama kodu, kupon). Boşluklar korunur. */
+  code: string;
+  /** Kodun ne olduğu ("Doğrulama kodu"); kodun üstünde görünür. */
+  label: ReactNode;
+  /** Kodun altında ek bilgi ("Kod 10 dakika geçerlidir."). */
+  hint?: ReactNode;
+}
+/**
+ * Kopyalanacak kod: ortalanmış, eş aralıklı, geniş harf aralıklı kutu. Kod seçilip kopyalanabilir;
+ * harf aralığı kopyalanan metne girmez. Gizli bilgi (parola) için kullanılmaz.
+ */
+export declare function EmailCode({ code, label, hint, className, id, ...rest }: EmailCodeProps): import("react").JSX.Element;

package/dist/email/EmailCode/EmailCode.js

@@ -0,0 +1,58 @@
+import { color, dataAttributes, font, radius, size } from "../_shared/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/email/EmailCode/EmailCode.tsx
+/**
+* Kopyalanacak kod: ortalanmış, eş aralıklı, geniş harf aralıklı kutu. Kod seçilip kopyalanabilir;
+* harf aralığı kopyalanan metne girmez. Gizli bilgi (parola) için kullanılmaz.
+*/
+function EmailCode({ code, label, hint, className, id, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			margin: `0 0 ${size("space-4")}`,
+			padding: `${size("space-5")} ${size("space-4")}`,
+			backgroundColor: color("bg-subtle"),
+			border: `1px solid ${color("border-subtle")}`,
+			borderRadius: radius.sm,
+			textAlign: "center",
+			fontFamily: font.text
+		},
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					margin: `0 0 ${size("space-2")}`,
+					fontSize: size("font-size-sm"),
+					lineHeight: size("line-height-sm"),
+					color: color("fg-muted")
+				},
+				children: label
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					margin: 0,
+					fontFamily: font.mono,
+					fontSize: size("font-size-2xl"),
+					lineHeight: size("line-height-2xl"),
+					fontWeight: 600,
+					letterSpacing: "0.2em",
+					fontVariantNumeric: "tabular-nums",
+					color: color("fg"),
+					overflowWrap: "anywhere"
+				},
+				children: code.trim()
+			}),
+			hint ? /* @__PURE__ */ jsx("p", {
+				style: {
+					margin: `${size("space-2")} 0 0`,
+					fontSize: size("font-size-sm"),
+					lineHeight: size("line-height-sm"),
+					color: color("fg-muted")
+				},
+				children: hint
+			}) : null
+		]
+	});
+}
+export { EmailCode };

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

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

package/dist/email/EmailColumns/EmailColumns.d.ts

@@ -0,0 +1,18 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailColumnsProps extends EmailBaseProps {
+  /** Her çocuk bir sütundur (2–4 sütun). */
+  children: ReactNode;
+  /** Sütun arası boşluk. Varsayılan: `"md"` (`space-6`). */
+  gap?: "sm" | "md";
+  /** Sütunların dikey hizası. Varsayılan: `"top"`. */
+  verticalAlign?: "top" | "middle";
+}
+/**
+ * Yan yana sütunlar; ortam sorgusu (`@media`) olmadan dar ekranda alt alta iner ("akışkan melez"
+ * düzen): her sütun satır içi bloktur, genişliği %100, en çok payına düşen piksel kadardır. Sütun
+ * arası boşluk son sütun dışındakilerin bitiş tarafındadır; alt alta indiğinde başlangıç kenarları
+ * hizalı kalır, dikey boşluğu sütun içeriğinin kendi alt boşluğu (e-posta bloklarında `space-4`)
+ * verir.
+ */
+export declare function EmailColumns({ children, gap, verticalAlign, className, id, ...rest }: EmailColumnsProps): import("react").JSX.Element | null;

package/dist/email/EmailColumns/EmailColumns.js

@@ -0,0 +1,49 @@
+import { EMAIL_CONTENT_WIDTH, dataAttributes, sizeNumber } from "../_shared/theme.js";
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+// src/email/EmailColumns/EmailColumns.tsx
+const GAP = {
+	sm: sizeNumber("space-4"),
+	md: sizeNumber("space-6")
+};
+/**
+* Yan yana sütunlar; ortam sorgusu (`@media`) olmadan dar ekranda alt alta iner ("akışkan melez"
+* düzen): her sütun satır içi bloktur, genişliği %100, en çok payına düşen piksel kadardır. Sütun
+* arası boşluk son sütun dışındakilerin bitiş tarafındadır; alt alta indiğinde başlangıç kenarları
+* hizalı kalır, dikey boşluğu sütun içeriğinin kendi alt boşluğu (e-posta bloklarında `space-4`)
+* verir.
+*/
+function EmailColumns({ children, gap = "md", verticalAlign = "top", className, id, ...rest }) {
+	const cols = Children.toArray(children).filter(Boolean);
+	if (cols.length === 0) return null;
+	const g = GAP[gap];
+	const colWidth = Math.floor((EMAIL_CONTENT_WIDTH - g * (cols.length - 1)) / cols.length);
+	return /* @__PURE__ */ jsx("div", {
+		...dataAttributes(rest),
+		className,
+		id,
+		"data-columns": cols.length,
+		style: {
+			margin: 0,
+			padding: 0,
+			width: "100%",
+			textAlign: "start"
+		},
+		children: cols.map((col, i) => {
+			const last = i === cols.length - 1;
+			return /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "inline-block",
+					boxSizing: "border-box",
+					width: "100%",
+					maxWidth: `${colWidth + (last ? 0 : g)}px`,
+					paddingInlineEnd: last ? 0 : `${g}px`,
+					verticalAlign,
+					textAlign: "start"
+				},
+				children: col
+			}, i);
+		})
+	});
+}
+export { EmailColumns };

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

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

package/dist/email/EmailDivider/EmailDivider.d.ts

@@ -0,0 +1,7 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+export interface EmailDividerProps extends EmailBaseProps {
+  /** Üstte ve altta bırakılan boşluk. Varsayılan: `"md"`. */
+  spacing?: "sm" | "md" | "lg";
+}
+/** Bölümleri ayıran ince çizgi (`hr`, `border-subtle`). */
+export declare function EmailDivider({ spacing, className, id, ...rest }: EmailDividerProps): import("react").JSX.Element;

package/dist/email/EmailDivider/EmailDivider.js

@@ -0,0 +1,24 @@
+import { color, dataAttributes, size } from "../_shared/theme.js";
+import { jsx } from "react/jsx-runtime";
+// src/email/EmailDivider/EmailDivider.tsx
+const SPACING = {
+	sm: size("space-4"),
+	md: size("space-6"),
+	lg: size("space-8")
+};
+/** Bölümleri ayıran ince çizgi (`hr`, `border-subtle`). */
+function EmailDivider({ spacing = "md", className, id, ...rest }) {
+	return /* @__PURE__ */ jsx("hr", {
+		...dataAttributes(rest),
+		className,
+		id,
+		style: {
+			margin: `${SPACING[spacing]} 0`,
+			border: 0,
+			borderTop: `1px solid ${color("border-subtle")}`,
+			height: 0,
+			width: "100%"
+		}
+	});
+}
+export { EmailDivider };

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

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

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

@@ -0,0 +1,30 @@
+import { EmailBaseProps } from "../_shared/theme.js";
+import { ReactNode } from "react";
+export interface EmailFooterLink {
+  /** Hedef (`https:` ya da `mailto:`). */
+  href: string;
+  /** Bağlantı metni ("Gizlilik ve KVKK aydınlatma metni"). */
+  label: string;
+}
+export interface EmailFooterProps extends EmailBaseProps {
+  /** Gönderenin unvanı ("STI Sosyal Medya Ajansı Ltd. Şti."). */
+  company: ReactNode;
+  /** Açık adres (ticari ileti için zorunlu bilgi). */
+  address?: ReactNode;
+  /** E-postanın neden geldiği ("Bu e-postayı stisocial hesabınız olduğu için aldınız."). */
+  reason?: ReactNode;
+  /**
+   * Abonelikten çıkma bağlantısı: ticari elektronik iletide (6563 sayılı Kanun) zorunludur; işlem
+   * e-postasında (doğrulama kodu, fatura) verilmez. Metin özellikle verilir ("Abonelikten çık").
+   */
+  unsubscribe?: EmailFooterLink;
+  /** Ek bağlantılar: KVKK aydınlatma metni, bildirim tercihleri, yardım. */
+  links?: EmailFooterLink[];
+  /** En üstte ek içerik (`EmailSocialLinks`). */
+  children?: ReactNode;
+}
+/**
+ * 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.
+ */
+export declare function EmailFooter({ company, address, reason, unsubscribe, links, children, className, id, ...rest }: EmailFooterProps): import("react").JSX.Element;