@stisocial/ui 0.1.0 → 0.2.1

package/dist/components/TotalsBlock/totals.js

@@ -0,0 +1,38 @@
+// src/components/TotalsBlock/totals.ts
+/** Kuruşa yuvarlanmış tamsayı: 0,1 + 0,2 gibi kayan nokta sapmaları tutara girmez. */
+const cents = (value) => Math.round(value * 100);
+const major = (value) => value / 100;
+/**
+* Kalemlerden toplamları hesaplar. Her kalemin tutarı kuruşa yuvarlanır, iskonto kalem
+* düzeyindedir, KDV oran başına matrah toplamı üzerinden hesaplanır ve kuruşa yuvarlanır
+* (fatura düzenleme uygulamalarındaki olağan yöntem). Sonlu olmayan sayılar hata verir.
+*/
+function calculateTotals(lines) {
+	let subtotal = 0;
+	let discount = 0;
+	const bases = /* @__PURE__ */ new Map();
+	for (const line of lines) {
+		if (!Number.isFinite(line.quantity) || !Number.isFinite(line.unitPrice)) throw new RangeError("Kalem miktarı ve birim fiyatı sonlu bir sayı olmalıdır");
+		const gross = cents(line.quantity * line.unitPrice);
+		const rate = Math.min(Math.max(line.discountRate ?? 0, 0), 100);
+		const off = Math.round(gross * rate / 100);
+		subtotal += gross;
+		discount += off;
+		const vatRate = line.vatRate ?? 0;
+		bases.set(vatRate, (bases.get(vatRate) ?? 0) + gross - off);
+	}
+	const vat = [...bases.entries()].filter(([rate]) => rate > 0).sort(([a], [b]) => a - b).map(([rate, base]) => ({
+		rate,
+		base: major(base),
+		amount: major(Math.round(base * rate / 100))
+	}));
+	const vatCents = vat.reduce((sum, v) => sum + cents(v.amount), 0);
+	return {
+		subtotal: major(subtotal),
+		discount: major(discount),
+		vat,
+		vatTotal: major(vatCents),
+		total: major(subtotal - discount + vatCents)
+	};
+}
+export { calculateTotals };

package/dist/components/TrashView/TrashView.css

@@ -0,0 +1,166 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TrashView-root-d4316 {
+    gap: var(--sti-space-5);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+    container-type: inline-size;
+  }
+
+  .sti-TrashView-head-6f77e {
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: var(--sti-space-3);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TrashView-titles-1c1c3 {
+    gap: var(--sti-space-0-5);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-TrashView-title-8ed33 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-2xl);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-2xl);
+    letter-spacing: var(--sti-tracking-2xl);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-TrashView-note-2ea05 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-TrashView-panel-274b5 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    overflow: hidden;
+  }
+
+  .sti-TrashView-toolbar-5de7e {
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    min-block-size: calc(var(--sti-control-h-sm) + var(--sti-space-4));
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-space-4);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-subtle);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TrashView-count-dbca0 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-sm);
+    flex: auto;
+    margin: 0;
+  }
+
+  .sti-TrashView-bulk-0a736 {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TrashView-list-eebee {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .sti-TrashView-row-5e699 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    padding-block: var(--sti-space-3);
+    padding-inline: var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TrashView-row-5e699 + .sti-TrashView-row-5e699 {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-TrashView-row-5e699[data-selected] {
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-TrashView-main-2e085 {
+    flex: 14rem;
+    min-inline-size: 0;
+  }
+
+  .sti-TrashView-static-c4293 {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-TrashView-name-e1c39 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    font-weight: var(--sti-font-weight-medium);
+    overflow-wrap: anywhere;
+    display: inline-flex;
+  }
+
+  .sti-TrashView-icon-470b1 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-TrashView-meta-860c1 {
+    gap: 0 var(--sti-space-3);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TrashView-side-623db {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex: none;
+    max-inline-size: 100%;
+    display: flex;
+  }
+
+  @container (width <= 30rem) {
+    .sti-TrashView-row-5e699, .sti-TrashView-toolbar-5de7e {
+      padding-inline: var(--sti-space-3);
+    }
+
+    .sti-TrashView-side-623db {
+      inline-size: 100%;
+      justify-content: space-between;
+      padding-inline-start: calc(var(--sti-icon-sm) + var(--sti-space-2));
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-TrashView-row-5e699[data-selected] {
+      outline: var(--sti-border-width-strong) solid Highlight;
+      outline-offset: calc(var(--sti-border-width-strong) * -1);
+    }
+  }
+}

package/dist/components/TrashView/TrashView.d.ts

@@ -0,0 +1,49 @@
+import { DateValue } from "../DateTime/instant.js";
+import { ReactNode } from "react";
+export interface TrashItem {
+  id: string;
+  /** Öğenin adı ("Mart kampanyası raporu"); onay kutusunun görünür etiketidir. */
+  name: string;
+  /** Türü ("Rapor", "Proje", "Gönderi"); adın altında yazılır. */
+  kind?: string;
+  /** Adın önündeki süs ikonu. */
+  icon?: ReactNode;
+  /** Silinme anı (saat dilimi farkıyla ISO 8601, `Date` ya da Unix milisaniyesi). */
+  deletedAt: DateValue;
+  /** Silen kişinin adı. */
+  deletedBy?: string;
+  /**
+   * Kalıcı silinme anı. Verilmezse `retentionDays` varsa silinme anına eklenerek bulunur; ikisi
+   * de yoksa kalan gün yazılmaz.
+   */
+  expiresAt?: DateValue;
+}
+export interface TrashViewProps {
+  items: readonly TrashItem[];
+  /** Başlık; varsayılan "Çöp kutusu". */
+  title?: ReactNode;
+  /** Saklama süresi (gün): açıklama notunu ve kalan günü verir. */
+  retentionDays?: number;
+  /**
+   * Seçili ya da tek öğeyi geri yükler. Söz döndürürse düğmeler bekler; reddedilirse hata
+   * bildirilir ve seçim korunur. Başarıdan sonra öğeleri listeden çıkarmak uygulamanın işidir.
+   */
+  onRestore?: (ids: string[]) => void | Promise<void>;
+  /** Seçili öğeleri kalıcı siler (onay penceresinden sonra). */
+  onDeleteForever?: (ids: string[]) => void | Promise<void>;
+  /** Çöp kutusunu boşaltır (onay penceresinden sonra); verilirse "Çöp kutusunu boşalt" çizilir. */
+  onEmpty?: () => void | Promise<void>;
+  /** Kalan günün hesabı için şimdiki an (sunucu ve tarayıcıda aynı metin için). */
+  now?: Date | number;
+  /** Başlık düzeyi; varsayılan 1 (sayfa). */
+  level?: 1 | 2 | 3;
+  className?: string;
+  id?: string;
+}
+/**
+ * Çöp kutusu: geri alınabilir silmenin görünümü. Silinen öğeler adı, türü, silinme zamanı ve silen
+ * kişiyle listelenir; kalıcı silinmeye kalan gün yazılır (son üç günde uyarı tonunda). Öğeler tek
+ * tek ya da toplu seçilir; Geri yükle hemen çalışır, Kalıcı olarak sil ve Çöp kutusunu boşalt onay
+ * penceresi ister (geri alınamaz). Sonuçlar ekran okuyucuya duyurulur; hata olursa seçim korunur.
+ */
+export declare function TrashView({ items, title, retentionDays, onRestore, onDeleteForever, onEmpty, now, level, className, id }: TrashViewProps): import("react").JSX.Element;

package/dist/components/TrashView/TrashView.js

@@ -0,0 +1,244 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { announce } from "../Alert/announcer.js";
+import { Alert } from "../Alert/Alert.js";
+import { Button } from "../Button/Button.js";
+import { AlertDialog } from "../AlertDialog/AlertDialog.js";
+import { Badge } from "../Badge/Badge.js";
+import { parseInstant } from "../DateTime/instant.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { TrashIcon } from "../../icons/generated/TrashIcon.js";
+import { UndoIcon } from "../../icons/generated/UndoIcon.js";
+import TrashView_module_default from "./TrashView.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/components/TrashView/TrashView.tsx
+const DAY = 864e5;
+/**
+* Çöp kutusu: geri alınabilir silmenin görünümü. Silinen öğeler adı, türü, silinme zamanı ve silen
+* kişiyle listelenir; kalıcı silinmeye kalan gün yazılır (son üç günde uyarı tonunda). Öğeler tek
+* tek ya da toplu seçilir; Geri yükle hemen çalışır, Kalıcı olarak sil ve Çöp kutusunu boşalt onay
+* penceresi ister (geri alınamaz). Sonuçlar ekran okuyucuya duyurulur; hata olursa seçim korunur.
+*/
+function TrashView({ items, title, retentionDays, onRestore, onDeleteForever, onEmpty, now, level = 1, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const base = useId();
+	const [picked, setPicked] = useState(/* @__PURE__ */ new Set());
+	const [busy, setBusy] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const [confirm, setConfirm] = useState(null);
+	const H = `h${level}`;
+	const known = new Set(items.map((i) => i.id));
+	const selected = items.filter((i) => picked.has(i.id)).map((i) => i.id);
+	const allSelected = items.length > 0 && selected.length === items.length;
+	const current = now === void 0 ? Date.now() : now instanceof Date ? now.getTime() : now;
+	const toggle = (itemId, on) => setPicked((prev) => {
+		const next = new Set([...prev].filter((k) => known.has(k)));
+		if (on) next.add(itemId);
+		else next.delete(itemId);
+		return next;
+	});
+	const run = async (mode, work, notice) => {
+		setBusy(mode);
+		setFailed(false);
+		try {
+			await work();
+			setPicked(/* @__PURE__ */ new Set());
+			announce(notice, "polite");
+		} catch {
+			setFailed(true);
+		} finally {
+			setBusy(null);
+		}
+	};
+	const restore = (ids) => onRestore && run("restore", () => onRestore(ids), template(t.trashRestoredNotice, { count: ids.length }));
+	const daysLeft = (item) => {
+		const end = item.expiresAt ? parseInstant(item.expiresAt).getTime() : retentionDays !== void 0 ? parseInstant(item.deletedAt).getTime() + retentionDays * DAY : null;
+		return end === null ? null : Math.max(0, Math.floor((end - current) / DAY));
+	};
+	const deletedTime = (item) => {
+		const date = parseInstant(item.deletedAt);
+		return /* @__PURE__ */ jsx("time", {
+			dateTime: date.toISOString(),
+			children: f.relative(date, current)
+		});
+	};
+	const hasActions = Boolean(onRestore || onDeleteForever);
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-labelledby": `${base}-title`,
+		className: [TrashView_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: TrashView_module_default.head,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: TrashView_module_default.titles,
+					children: [/* @__PURE__ */ jsx(H, {
+						id: `${base}-title`,
+						className: TrashView_module_default.title,
+						children: title ?? t.trashTitle
+					}), retentionDays !== void 0 ? /* @__PURE__ */ jsx("p", {
+						className: TrashView_module_default.note,
+						children: template(t.trashRetention, { days: retentionDays })
+					}) : null]
+				}), onEmpty && items.length > 0 ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					iconStart: /* @__PURE__ */ jsx(TrashIcon, {}),
+					isPending: busy === "empty",
+					isDisabled: busy !== null && busy !== "empty",
+					onPress: () => setConfirm({ kind: "empty" }),
+					children: t.trashEmpty
+				}) : null]
+			}),
+			failed ? /* @__PURE__ */ jsx(Alert, {
+				tone: "danger",
+				live: true,
+				onDismiss: () => setFailed(false),
+				children: t.trashFailed
+			}) : null,
+			items.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+				icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+				title: t.trashEmptyTitle,
+				description: t.trashEmptyDescription,
+				titleLevel: Math.min(level + 1, 6)
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: TrashView_module_default.panel,
+				children: [hasActions ? /* @__PURE__ */ jsxs("div", {
+					className: TrashView_module_default.toolbar,
+					children: [
+						/* @__PURE__ */ jsx(Checkbox, {
+							size: "sm",
+							isSelected: allSelected,
+							isIndeterminate: selected.length > 0 && !allSelected,
+							isDisabled: busy !== null,
+							onChange: (on) => setPicked(on ? new Set(items.map((i) => i.id)) : /* @__PURE__ */ new Set()),
+							children: t.trashSelectAll
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: TrashView_module_default.count,
+							"aria-live": "polite",
+							children: selected.length > 0 ? template(t.trashSelected, { count: selected.length }) : ""
+						}),
+						selected.length > 0 ? /* @__PURE__ */ jsxs("div", {
+							className: TrashView_module_default.bulk,
+							children: [onRestore ? /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "secondary",
+								iconStart: /* @__PURE__ */ jsx(UndoIcon, {}),
+								isPending: busy === "restore",
+								isDisabled: busy !== null && busy !== "restore",
+								onPress: () => restore(selected),
+								children: t.trashRestore
+							}) : null, onDeleteForever ? /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "danger",
+								iconStart: /* @__PURE__ */ jsx(TrashIcon, {}),
+								isPending: busy === "delete",
+								isDisabled: busy !== null && busy !== "delete",
+								onPress: () => setConfirm({
+									kind: "delete",
+									ids: selected
+								}),
+								children: t.trashDeleteForever
+							}) : null]
+						}) : null
+					]
+				}) : null, /* @__PURE__ */ jsx("ul", {
+					className: TrashView_module_default.list,
+					"aria-label": t.trashListLabel,
+					children: items.map((item) => {
+						const left = daysLeft(item);
+						return /* @__PURE__ */ jsxs("li", {
+							className: TrashView_module_default.row,
+							"data-selected": picked.has(item.id) || void 0,
+							children: [/* @__PURE__ */ jsx("div", {
+								className: TrashView_module_default.main,
+								children: hasActions ? /* @__PURE__ */ jsx(Checkbox, {
+									isSelected: picked.has(item.id),
+									isDisabled: busy !== null,
+									onChange: (on) => toggle(item.id, on),
+									description: /* @__PURE__ */ jsxs("span", {
+										className: TrashView_module_default.meta,
+										children: [
+											item.kind ? /* @__PURE__ */ jsx("span", { children: item.kind }) : null,
+											/* @__PURE__ */ jsxs("span", { children: [
+												t.trashDeleted,
+												" ",
+												deletedTime(item)
+											] }),
+											item.deletedBy ? /* @__PURE__ */ jsx("span", { children: template(t.trashDeletedBy, { name: item.deletedBy }) }) : null
+										]
+									}),
+									children: /* @__PURE__ */ jsxs("span", {
+										className: TrashView_module_default.name,
+										children: [item.icon ? /* @__PURE__ */ jsx("span", {
+											className: TrashView_module_default.icon,
+											"aria-hidden": "true",
+											children: item.icon
+										}) : null, item.name]
+									})
+								}) : /* @__PURE__ */ jsxs("div", {
+									className: TrashView_module_default.static,
+									children: [/* @__PURE__ */ jsxs("span", {
+										className: TrashView_module_default.name,
+										children: [item.icon ? /* @__PURE__ */ jsx("span", {
+											className: TrashView_module_default.icon,
+											"aria-hidden": "true",
+											children: item.icon
+										}) : null, item.name]
+									}), /* @__PURE__ */ jsxs("span", {
+										className: TrashView_module_default.meta,
+										children: [
+											item.kind ? /* @__PURE__ */ jsx("span", { children: item.kind }) : null,
+											/* @__PURE__ */ jsxs("span", { children: [
+												t.trashDeleted,
+												" ",
+												deletedTime(item)
+											] }),
+											item.deletedBy ? /* @__PURE__ */ jsx("span", { children: template(t.trashDeletedBy, { name: item.deletedBy }) }) : null
+										]
+									})]
+								})
+							}), /* @__PURE__ */ jsxs("div", {
+								className: TrashView_module_default.side,
+								children: [left !== null ? /* @__PURE__ */ jsx(Badge, {
+									tone: left <= 3 ? "warning" : "neutral",
+									size: "sm",
+									children: left === 0 ? t.trashLastDay : template(t.trashDaysLeft, { count: left })
+								}) : null, onRestore ? /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									variant: "ghost",
+									icon: /* @__PURE__ */ jsx(UndoIcon, {}),
+									label: template(t.trashRestoreItem, { name: item.name }),
+									isDisabled: busy !== null,
+									onPress: () => restore([item.id])
+								}) : null]
+							})]
+						}, item.id);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(AlertDialog, {
+				isOpen: confirm !== null,
+				onOpenChange: (open) => {
+					if (!open) setConfirm(null);
+				},
+				title: confirm?.kind === "delete" ? template(t.trashConfirmDeleteTitle, { count: confirm.ids.length }) : t.trashConfirmEmptyTitle,
+				description: t.trashConfirmDescription,
+				confirmLabel: confirm?.kind === "delete" ? t.trashDeleteForever : t.trashEmpty,
+				onConfirm: async () => {
+					const c = confirm;
+					if (!c) return;
+					if (c.kind === "delete" && onDeleteForever) await run("delete", () => onDeleteForever(c.ids), template(t.trashDeletedNotice, { count: c.ids.length }));
+					else if (c.kind === "empty" && onEmpty) await run("empty", onEmpty, template(t.trashDeletedNotice, { count: items.length }));
+				}
+			})
+		]
+	});
+}
+export { TrashView };

package/dist/components/TrashView/TrashView.module.js

@@ -0,0 +1,22 @@
+import './TrashView.css';
+// src/components/TrashView/TrashView.module.css
+var TrashView_module_default = {
+	"root": "sti-TrashView-root-d4316",
+	"head": "sti-TrashView-head-6f77e",
+	"titles": "sti-TrashView-titles-1c1c3",
+	"title": "sti-TrashView-title-8ed33",
+	"note": "sti-TrashView-note-2ea05",
+	"panel": "sti-TrashView-panel-274b5",
+	"toolbar": "sti-TrashView-toolbar-5de7e",
+	"count": "sti-TrashView-count-dbca0",
+	"bulk": "sti-TrashView-bulk-0a736",
+	"list": "sti-TrashView-list-eebee",
+	"row": "sti-TrashView-row-5e699",
+	"main": "sti-TrashView-main-2e085",
+	"static": "sti-TrashView-static-c4293",
+	"name": "sti-TrashView-name-e1c39",
+	"icon": "sti-TrashView-icon-470b1",
+	"meta": "sti-TrashView-meta-860c1",
+	"side": "sti-TrashView-side-623db"
+};
+export { TrashView_module_default as default };

package/dist/components/TrashView/index.d.ts

@@ -0,0 +1,2 @@
+import { TrashItem, TrashView, TrashViewProps } from "./TrashView.js";
+export { TrashItem, TrashView, TrashViewProps };

package/dist/components/TreeSelect/TreeSelect.js

@@ -1,7 +1,7 @@
 "use client";
+import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
 import { useLocale, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { ChevronDownIcon } from "../../icons/generated/ChevronDownIcon.js";
 import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import listbox_module_default from "../_internal/listbox/listbox.module.js";
 import { useThemeContext } from "../_internal/themeContext.js";

package/dist/components/UploadQueue/UploadQueue.js

@@ -9,8 +9,8 @@ import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
 import { announce } from "../Alert/announcer.js";
 import { Button } from "../Button/Button.js";
 import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
-import { FileSize } from "../FileSize/FileSize.js";
 import { FileIcon } from "../../icons/generated/FileIcon.js";
+import { FileSize } from "../FileSize/FileSize.js";
 import { ProgressBar } from "../ProgressBar/ProgressBar.js";
 import { TrashIcon } from "../../icons/generated/TrashIcon.js";
 import UploadQueue_module_default from "./UploadQueue.module.js";

package/dist/components/Watermark/Watermark.css

@@ -0,0 +1,51 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Watermark-root-9590a {
+    --sti-watermark-color: var(--sti-fg-muted);
+    --sti-watermark-opacity: .16;
+    --sti-watermark-size: calc(var(--sti-space-32) * 4);
+    z-index: var(--sti-z-raised);
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+    place-items: center;
+    display: grid;
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .sti-Watermark-root-9590a[data-variant="confidential"] {
+    --sti-watermark-color: var(--sti-fg-danger);
+  }
+
+  .sti-Watermark-svg-7ee24 {
+    block-size: 100%;
+    inline-size: auto;
+    max-inline-size: min(100%, var(--sti-watermark-size));
+    max-block-size: var(--sti-watermark-size);
+    aspect-ratio: 1;
+    overflow: visible;
+  }
+
+  .sti-Watermark-text-fd30b {
+    fill: var(--sti-watermark-color);
+    fill-opacity: var(--sti-watermark-opacity);
+    font-family: var(--sti-font-display);
+    font-weight: var(--sti-font-weight-bold);
+    letter-spacing: var(--sti-tracking-eyebrow);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Watermark-text-fd30b {
+      fill: graytext;
+      fill-opacity: .4;
+    }
+  }
+
+  @media print {
+    .sti-Watermark-text-fd30b {
+      fill-opacity: .12;
+    }
+  }
+}

package/dist/components/Watermark/Watermark.d.ts

@@ -0,0 +1,23 @@
+import { Locale } from "../../provider/locale.js";
+export type WatermarkVariant = "draft" | "confidential" | "copy" | "custom";
+export interface WatermarkProps {
+  /**
+   * Damga türü: `draft` "TASLAK", `confidential` "GİZLİ", `copy` "SURET" (dile göre);
+   * `custom` için `text` zorunludur.
+   */
+  variant?: WatermarkVariant;
+  /** Damga metni: `custom`'da zorunlu, diğerlerinde yerleşik metni ezer. */
+  text?: string;
+  /** `custom` ya da ezilen metin için ekran okuyucuya okunacak açıklama; verilmezse metnin kendisi. */
+  description?: string;
+  locale?: Locale;
+  className?: string;
+  id?: string;
+}
+/**
+ * Belgenin üzerine bindirilen çapraz damga (taslak, gizli, suret). Konumlu en yakın kabı
+ * (`DocumentLayout`) kaplar, tıklamayı ve seçimi engellemez. Görsel metin SVG'dir ve ekran
+ * okuyucudan gizlenir; durum, görünmez bir metinle bir kez bildirilir. Yazdırınca basılır.
+ * Sunucu bileşenidir.
+ */
+export declare function Watermark({ variant, text, description, locale, className, id }: WatermarkProps): import("react").JSX.Element;

package/dist/components/Watermark/Watermark.js

@@ -0,0 +1,54 @@
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { documentText } from "../_document/text.js";
+import Watermark_module_default from "./Watermark.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Watermark/Watermark.tsx
+/** Damganın çizim kutusu (SVG kullanıcı birimi) ve metnin sığacağı genişlik. */
+const BOX = 400;
+const FIT = 300;
+const MAX_FONT = 88;
+/** Büyük harfli, kalın yazının ortalama harf genişliği / yazı boyu. */
+const GLYPH = .75;
+/**
+* Belgenin üzerine bindirilen çapraz damga (taslak, gizli, suret). Konumlu en yakın kabı
+* (`DocumentLayout`) kaplar, tıklamayı ve seçimi engellemez. Görsel metin SVG'dir ve ekran
+* okuyucudan gizlenir; durum, görünmez bir metinle bir kez bildirilir. Yazdırınca basılır.
+* Sunucu bileşenidir.
+*/
+function Watermark({ variant = "draft", text, description, locale, className, id }) {
+	const t = documentText(locale);
+	const builtIn = {
+		draft: [t.documentDraft, t.documentDraftNotice],
+		confidential: [t.documentConfidential, t.documentConfidentialNotice],
+		copy: [t.documentCopy, t.documentCopyNotice],
+		custom: [text ?? "", text ?? ""]
+	}[variant];
+	const label = text ?? builtIn[0];
+	if (!label) throw new Error("Watermark: variant=\"custom\" için text zorunludur");
+	const notice = description ?? (text ? text : builtIn[1]);
+	const fontSize = Math.round(Math.min(MAX_FONT, FIT / (Array.from(label).length * GLYPH)));
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [Watermark_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-sti-document-watermark": "",
+		children: [/* @__PURE__ */ jsx("svg", {
+			className: Watermark_module_default.svg,
+			viewBox: `0 0 ${BOX} ${BOX}`,
+			"aria-hidden": "true",
+			focusable: "false",
+			preserveAspectRatio: "xMidYMid meet",
+			children: /* @__PURE__ */ jsx("text", {
+				className: Watermark_module_default.text,
+				x: BOX / 2,
+				y: BOX / 2,
+				fontSize,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				transform: `rotate(-30 ${BOX / 2} ${BOX / 2})`,
+				children: label
+			})
+		}), /* @__PURE__ */ jsx(VisuallyHidden, { children: notice })]
+	});
+}
+export { Watermark };