@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/Truncate/Truncate.css

@@ -0,0 +1,62 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Truncate-root-edf12 {
+    --sti-truncate-lines: 1;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+    position: relative;
+    overflow: clip;
+  }
+
+  .sti-Truncate-root-edf12[data-lines="2"] {
+    --sti-truncate-lines: 2;
+  }
+
+  .sti-Truncate-root-edf12[data-lines="3"] {
+    --sti-truncate-lines: 3;
+  }
+
+  .sti-Truncate-root-edf12[data-lines="4"] {
+    --sti-truncate-lines: 4;
+  }
+
+  .sti-Truncate-root-edf12[data-lines="5"] {
+    --sti-truncate-lines: 5;
+  }
+
+  .sti-Truncate-sizer-ef03f {
+    overflow-wrap: anywhere;
+    visibility: hidden;
+    height: 0;
+    display: block;
+    overflow: hidden;
+  }
+
+  .sti-Truncate-visual-d2e95 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 0;
+    min-width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+
+  .sti-Truncate-root-edf12:is([data-lines="2"], [data-lines="3"], [data-lines="4"], [data-lines="5"]) > .sti-Truncate-visual-d2e95 {
+    white-space: normal;
+    overflow-wrap: anywhere;
+    -webkit-line-clamp: var(--sti-truncate-lines);
+    line-clamp: var(--sti-truncate-lines);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+  }
+
+  .sti-Truncate-probe-16e73 {
+    white-space: nowrap;
+    visibility: hidden;
+    pointer-events: none;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+}

package/dist/components/Truncate/Truncate.d.ts

@@ -0,0 +1,33 @@
+interface TruncateBaseProps {
+  /** Kesilecek düz metin (dosya adı, e-posta, başlık). */
+  children: string;
+  /** Kök öğe; varsayılan `span` (blok kutu olarak çizilir: kesme bir genişlik ister). */
+  as?: "span" | "div" | "p";
+  /** Kesilip kesilmediği değişince çağrılır (ör. kesikken ipucu göstermek için). */
+  onTruncatedChange?: (isTruncated: boolean) => void;
+  className?: string;
+  id?: string;
+}
+export interface TruncateEndProps extends TruncateBaseProps {
+  /** Sondan kesme (varsayılan): "Uzun bir başlık met…". */
+  position?: "end";
+  /** Satır sayısı (1–5); varsayılan 1. */
+  lines?: 1 | 2 | 3 | 4 | 5;
+}
+export interface TruncateMiddleProps extends TruncateBaseProps {
+  /**
+   * Ortadan kesme: başı ve sonu görünür kalır ("rapor-2026…final.pdf"); dosya adlarında uzantı
+   * korunur. Yalnız tek satırda.
+   */
+  position: "middle";
+  lines?: 1;
+}
+export type TruncateProps = TruncateEndProps | TruncateMiddleProps;
+/**
+ * Sığmayan metni üç noktayla keser. Kesme yalnız görseldir: ekran okuyucu metnin tamamını okur
+ * (ortadan kesmede tam metin görünmez bir kopyadan okunur, kesik görünüş okunmaz). Kopyalanan
+ * metin her zaman tam metindir. Tam metin `title` ile verilmez (klavye ve dokunmatikte açılmaz,
+ * ekran okuyucuda iki kez okunur); gerekiyorsa `onTruncatedChange` ile ipucu bağlanır.
+ */
+export declare function Truncate(props: TruncateProps): import("react").JSX.Element;
+export {};

package/dist/components/Truncate/Truncate.js

@@ -0,0 +1,109 @@
+"use client";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { middleCut, splitGraphemes } from "./middleCut.js";
+import Truncate_module_default from "./Truncate.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/components/Truncate/Truncate.tsx
+/**
+* Sığmayan metni üç noktayla keser. Kesme yalnız görseldir: ekran okuyucu metnin tamamını okur
+* (ortadan kesmede tam metin görünmez bir kopyadan okunur, kesik görünüş okunmaz). Kopyalanan
+* metin her zaman tam metindir. Tam metin `title` ile verilmez (klavye ve dokunmatikte açılmaz,
+* ekran okuyucuda iki kez okunur); gerekiyorsa `onTruncatedChange` ile ipucu bağlanır.
+*/
+function Truncate(props) {
+	const { children: text, as: Tag = "span", onTruncatedChange, className, id } = props;
+	const position = props.position ?? "end";
+	const lines = props.lines ?? 1;
+	const visualRef = useRef(null);
+	const probeRef = useRef(null);
+	const [display, setDisplay] = useState(null);
+	const [truncated, setTruncated] = useState(false);
+	const callbackRef = useRef(onTruncatedChange);
+	callbackRef.current = onTruncatedChange;
+	const measure = useCallback(() => {
+		const visual = visualRef.current;
+		if (!visual) return;
+		if (position === "end") {
+			setTruncated(visual.scrollWidth > visual.clientWidth + 1 || visual.scrollHeight > visual.clientHeight + 1);
+			return;
+		}
+		const probe = probeRef.current;
+		if (!probe) return;
+		const available = visual.getBoundingClientRect().width + .5;
+		const width = (s) => {
+			probe.textContent = s;
+			return probe.getBoundingClientRect().width;
+		};
+		if (available <= 0 || width(text) <= available) {
+			setDisplay(null);
+			setTruncated(false);
+			return;
+		}
+		const graphemes = splitGraphemes(text);
+		let lo = 0;
+		let hi = graphemes.length - 1;
+		while (lo < hi) {
+			const mid = Math.ceil((lo + hi) / 2);
+			if (width(middleCut(graphemes, mid)) <= available) lo = mid;
+			else hi = mid - 1;
+		}
+		setDisplay(middleCut(graphemes, lo));
+		setTruncated(true);
+	}, [position, text]);
+	useEffect(() => {
+		measure();
+		const visual = visualRef.current;
+		if (!visual) return;
+		let cancelled = false;
+		const observer = new ResizeObserver(() => measure());
+		observer.observe(visual);
+		document.fonts?.ready.then(() => {
+			if (!cancelled) measure();
+		});
+		return () => {
+			cancelled = true;
+			observer.disconnect();
+		};
+	}, [measure]);
+	const reported = useRef(false);
+	useEffect(() => {
+		if (reported.current === truncated) return;
+		reported.current = truncated;
+		callbackRef.current?.(truncated);
+	}, [truncated]);
+	const middle = position === "middle";
+	const cut = middle && display !== null;
+	return /* @__PURE__ */ jsxs(Tag, {
+		id,
+		className: [Truncate_module_default.root, className].filter(Boolean).join(" "),
+		"data-position": position,
+		"data-lines": middle ? void 0 : lines,
+		"data-truncated": truncated ? "" : void 0,
+		onCopy: (e) => {
+			if (!cut) return;
+			e.preventDefault();
+			e.clipboardData.setData("text/plain", text);
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: Truncate_module_default.sizer,
+				"aria-hidden": "true",
+				children: text
+			}),
+			/* @__PURE__ */ jsx("span", {
+				ref: visualRef,
+				className: Truncate_module_default.visual,
+				"aria-hidden": cut ? true : void 0,
+				children: cut ? display : text
+			}),
+			cut ? /* @__PURE__ */ jsx(VisuallyHidden, { children: text }) : null,
+			middle ? /* @__PURE__ */ jsx("span", {
+				ref: probeRef,
+				className: Truncate_module_default.probe,
+				"aria-hidden": "true"
+			}) : null
+		]
+	});
+}
+export { Truncate };

package/dist/components/Truncate/Truncate.module.js

@@ -0,0 +1,9 @@
+import './Truncate.css';
+// src/components/Truncate/Truncate.module.css
+var Truncate_module_default = {
+	"root": "sti-Truncate-root-edf12",
+	"sizer": "sti-Truncate-sizer-ef03f",
+	"visual": "sti-Truncate-visual-d2e95",
+	"probe": "sti-Truncate-probe-16e73"
+};
+export { Truncate_module_default as default };

package/dist/components/Truncate/middleCut.js

@@ -0,0 +1,34 @@
+// src/components/Truncate/middleCut.ts
+/**
+* Ortadan kesmenin saf yardımcıları. Metin harf öbeklerine (grapheme) ayrılır: aksanlı harf,
+* bayrak ve birleşik emoji hiçbir zaman ortadan bölünmez.
+*/
+const ELLIPSIS = "…";
+let segmenter;
+/** Metni görünen karakterlere (harf öbeklerine) ayırır. */
+function splitGraphemes(text) {
+	segmenter ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
+	return Array.from(segmenter.segment(text), (s) => s.segment);
+}
+/** Sondaki dosya uzantısının ("." dahil) uzunluğu: en çok 8 karakterlik ve boşluksuz ise. */
+function extensionLength(graphemes) {
+	const dot = graphemes.lastIndexOf(".");
+	if (dot <= 0) return 0;
+	const length = graphemes.length - dot;
+	if (length < 2 || length > 8) return 0;
+	return graphemes.slice(dot).some((g) => /\s/u.test(g)) ? 0 : length;
+}
+/**
+* `keep` karakteri koruyarak ortadan kesilmiş metin: baştan ve sondan yaklaşık yarı yarıya; sonda en
+* az dosya uzantısı kadar ("rapor-2026…final.pdf"). Kesme yerindeki boşluklar atılır.
+*/
+function middleCut(graphemes, keep) {
+	if (keep >= graphemes.length) return graphemes.join("");
+	const k = Math.max(0, keep);
+	const tail = Math.min(k, Math.max(Math.floor(k / 2), extensionLength(graphemes)));
+	const head = k - tail;
+	const start = graphemes.slice(0, head).join("").trimEnd();
+	const end = tail > 0 ? graphemes.slice(graphemes.length - tail).join("").trimStart() : "";
+	return `${start}${ELLIPSIS}${end}`;
+}
+export { middleCut, splitGraphemes };

package/dist/components/TurnstileField/TurnstileField.css

@@ -0,0 +1,15 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TurnstileField-widget-54f76 {
+    max-width: 100%;
+    min-height: 65px;
+  }
+
+  .sti-TurnstileField-root-05732[data-size="compact"] .sti-TurnstileField-widget-54f76 {
+    min-height: 140px;
+  }
+
+  .sti-TurnstileField-live-cee71:empty {
+    margin-block-start: calc(var(--sti-field-gap) * -1);
+  }
+}

package/dist/components/TurnstileField/TurnstileField.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+/** Cloudflare Turnstile'ın kullanılan arayüzü. */
+export interface TurnstileApi {
+  render: (el: HTMLElement, options: Record<string, unknown>) => string | undefined;
+  remove: (widgetId: string) => void;
+  reset: (widgetId: string) => void;
+}
+declare global {
+  interface Window {
+    turnstile?: TurnstileApi;
+  }
+}
+/** Turnstile betiğinin tek resmî adresi (açık çizim kipi). Başka kaynaktan yüklenmez. */
+export declare const TURNSTILE_SCRIPT_URL = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+export interface TurnstileFieldProps {
+  /** Cloudflare'in site anahtarı (gizli anahtar değil; gizli anahtar yalnız sunucudadır). */
+  siteKey: string;
+  /** Görünür ya da gizli ad; varsayılan "Güvenlik doğrulaması". */
+  label?: ReactNode;
+  /** Etiketi görsel olarak gizler (ekran okuyucu okur). Varsayılan açık. */
+  hideLabel?: boolean;
+  /** Analiz için eylem adı (ör. "giris", "kayit"); sunucu doğrularken karşılaştırır. */
+  action?: string;
+  /** Sunucuya dönen müşteri verisi (ör. oturum kimliğinin özeti). */
+  cData?: string;
+  /** Gizli belirteç alanının adı. Varsayılan "cf-turnstile-response". */
+  name?: string;
+  /** Pencere boyu: normal (300 piksel), sıkı (150 piksel) ya da kaba göre esnek. */
+  size?: "normal" | "compact" | "flexible";
+  /** Belirteç alınınca. */
+  onVerify?: (token: string) => void;
+  /** Belirtecin süresi dolunca (alan kendiliğinden yeniler). */
+  onExpire?: () => void;
+  /** Doğrulama yapılamayınca. */
+  onError?: (code?: string) => void;
+  /** Sayfanın CSP nonce'u (betik etiketine yazılır). */
+  nonce?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Robot doğrulaması (Cloudflare Turnstile). Betik bir kez ve yalnız Cloudflare'in adresinden
+ * yüklenir; pencere temanın (açık/koyu) ve arayüzün dilinde çizilir. Belirteç formla gizli alanda
+ * gönderilir; doğrulama sunucuda, gizli anahtarla yapılmalıdır (istemcideki belirteç tek başına
+ * güvence değildir).
+ */
+export declare function TurnstileField({ siteKey, label, hideLabel, action, cData, name, size, onVerify, onExpire, onError, nonce, className, id }: TurnstileFieldProps): import("react").JSX.Element;

package/dist/components/TurnstileField/TurnstileField.js

@@ -0,0 +1,147 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { readContext } from "../_internal/themeContext.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import { fieldStyles } from "../Field/Field.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import TurnstileField_module_default from "./TurnstileField.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// src/components/TurnstileField/TurnstileField.tsx
+/** Turnstile betiğinin tek resmî adresi (açık çizim kipi). Başka kaynaktan yüklenmez. */
+const TURNSTILE_SCRIPT_URL = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+let loading = null;
+/** Betiği bir kez yükler (sayfadaki bütün alanlar paylaşır); CSP nonce'u verilebilir. */
+function loadTurnstile(nonce) {
+	if (window.turnstile) return Promise.resolve(window.turnstile);
+	if (loading) return loading;
+	loading = new Promise((resolve, reject) => {
+		const script = document.createElement("script");
+		script.src = TURNSTILE_SCRIPT_URL;
+		script.async = true;
+		script.defer = true;
+		if (nonce) script.nonce = nonce;
+		script.onload = () => window.turnstile ? resolve(window.turnstile) : reject(/* @__PURE__ */ new Error("turnstile"));
+		script.onerror = () => {
+			loading = null;
+			reject(/* @__PURE__ */ new Error("turnstile"));
+		};
+		document.head.append(script);
+	});
+	return loading;
+}
+/**
+* Robot doğrulaması (Cloudflare Turnstile). Betik bir kez ve yalnız Cloudflare'in adresinden
+* yüklenir; pencere temanın (açık/koyu) ve arayüzün dilinde çizilir. Belirteç formla gizli alanda
+* gönderilir; doğrulama sunucuda, gizli anahtarla yapılmalıdır (istemcideki belirteç tek başına
+* güvence değildir).
+*/
+function TurnstileField({ siteKey, label, hideLabel = true, action, cData, name = "cf-turnstile-response", size = "flexible", onVerify, onExpire, onError, nonce, className, id }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const box = useRef(null);
+	const [problem, setProblem] = useState(null);
+	const [notice, setNotice] = useState(null);
+	const labelId = useId();
+	const handlers = useRef({
+		onVerify,
+		onExpire,
+		onError
+	});
+	handlers.current = {
+		onVerify,
+		onExpire,
+		onError
+	};
+	useEffect(() => {
+		const el = box.current;
+		if (!el) return;
+		let widgetId;
+		let cancelled = false;
+		const ctx = readContext(el);
+		const theme = ctx["data-theme"] === "light" || ctx["data-theme"] === "dark" ? ctx["data-theme"] : "auto";
+		loadTurnstile(nonce).then((api) => {
+			if (cancelled) return;
+			widgetId = api.render(el, {
+				sitekey: siteKey,
+				action,
+				cData,
+				theme,
+				size,
+				language: locale.split("-")[0],
+				"response-field-name": name,
+				"refresh-expired": "auto",
+				callback: (token) => {
+					setProblem(null);
+					setNotice(null);
+					handlers.current.onVerify?.(token);
+				},
+				"expired-callback": () => {
+					setNotice(t.turnstileExpired);
+					handlers.current.onExpire?.();
+				},
+				"error-callback": (code) => {
+					setProblem(t.turnstileError);
+					handlers.current.onError?.(code);
+				}
+			});
+		}).catch(() => {
+			if (!cancelled) {
+				setProblem(t.turnstileError);
+				handlers.current.onError?.("script");
+			}
+		});
+		return () => {
+			cancelled = true;
+			if (widgetId && window.turnstile) window.turnstile.remove(widgetId);
+		};
+	}, [
+		siteKey,
+		action,
+		cData,
+		size,
+		name,
+		nonce,
+		locale,
+		t.turnstileError,
+		t.turnstileExpired
+	]);
+	const labelText = label ?? t.turnstileLabel;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "group",
+		"aria-labelledby": labelId,
+		className: [
+			fieldStyles.root,
+			TurnstileField_module_default.root,
+			className
+		].filter(Boolean).join(" "),
+		"data-size": size,
+		children: [
+			hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, {
+				id: labelId,
+				children: labelText
+			}) : /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: fieldStyles.label,
+				children: labelText
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: box,
+				className: TurnstileField_module_default.widget
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-live": "polite",
+				className: TurnstileField_module_default.live,
+				children: problem ? /* @__PURE__ */ jsxs("span", {
+					className: fieldStyles.error,
+					children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: fieldStyles.errorIcon }), /* @__PURE__ */ jsx("span", { children: problem })]
+				}) : notice ? /* @__PURE__ */ jsx("span", {
+					className: fieldStyles.description,
+					children: notice
+				}) : null
+			})
+		]
+	});
+}
+export { TURNSTILE_SCRIPT_URL, TurnstileField };

package/dist/components/TurnstileField/TurnstileField.module.js

@@ -0,0 +1,8 @@
+import './TurnstileField.css';
+// src/components/TurnstileField/TurnstileField.module.css
+var TurnstileField_module_default = {
+	"widget": "sti-TurnstileField-widget-54f76",
+	"root": "sti-TurnstileField-root-05732",
+	"live": "sti-TurnstileField-live-cee71"
+};
+export { TurnstileField_module_default as default };

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

@@ -0,0 +1,2 @@
+import { TURNSTILE_SCRIPT_URL, TurnstileApi, TurnstileField, TurnstileFieldProps } from "./TurnstileField.js";
+export { TURNSTILE_SCRIPT_URL, TurnstileApi, TurnstileField, TurnstileFieldProps };

package/dist/components/UnsavedChangesPrompt/UnsavedChangesPrompt.d.ts

@@ -0,0 +1,36 @@
+export interface NavigationAttempt {
+  /** Gidilmek istenen adres. */
+  href: string;
+  /** Değişiklikleri bırakıp gider (kişi onaylayınca çağrılır). */
+  proceed: () => void;
+}
+export interface UseUnsavedChangesOptions {
+  /** Kaydedilmemiş değişiklik var mı. */
+  isDirty: boolean;
+  /**
+   * Uygulama içi bir bağlantıya tıklanınca (kaydedilmemiş değişiklik varken) çağrılır: uygulama
+   * kendi onay penceresini gösterir ve onaylanırsa `proceed()` çağırır. Verilmezse uygulama içi
+   * bağlantılar engellenmez, yalnız sayfadan çıkış (yenileme, kapatma) uyarılır.
+   */
+  onNavigationAttempt?: (attempt: NavigationAttempt) => void;
+  /** Onaydan sonra gezinme; verilmezse `location.assign` (Next.js'te yönlendiricinin `push`'u verilir). */
+  navigate?: (href: string) => void;
+}
+export interface UnsavedChangesState {
+  /** Engellenmiş ve onay bekleyen gezinme (yoksa `null`). */
+  pending: NavigationAttempt | null;
+  /** Bekleyen gezinmeyi iptal eder (kişi sayfada kalır). */
+  cancel: () => void;
+}
+/**
+ * Kaydedilmemiş değişiklik koruması: sayfadan çıkışta tarayıcının kendi uyarısı (`beforeunload`)
+ * ve isteğe bağlı olarak uygulama içi bağlantıların yakalanması. Engelleyici `confirm()`
+ * kullanılmaz: onayı uygulama kendi penceresiyle (AlertDialog) sorar.
+ */
+export declare function useUnsavedChanges({ isDirty, onNavigationAttempt, navigate }: UseUnsavedChangesOptions): UnsavedChangesState;
+export interface UnsavedChangesPromptProps extends UseUnsavedChangesOptions {}
+/**
+ * Bileşen biçimi: formun içine konur, görünür bir şey çizmez. Onay penceresi gerekiyorsa kanca
+ * (`useUnsavedChanges`) kullanılır.
+ */
+export declare function UnsavedChangesPrompt(props: UnsavedChangesPromptProps): null;

package/dist/components/UnsavedChangesPrompt/UnsavedChangesPrompt.js

@@ -0,0 +1,71 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/components/UnsavedChangesPrompt/UnsavedChangesPrompt.tsx
+/** Aynı köken, aynı sekme, değiştirici tuşsuz, sol tıklama: uygulama içi gezinme mi. */
+function internalHref(e) {
+	if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return null;
+	const a = e.target?.closest("a[href]");
+	if (!a || a.target && a.target !== "_self" || a.hasAttribute("download")) return null;
+	const url = new URL(a.href, location.href);
+	if (url.origin !== location.origin) return null;
+	if (url.pathname === location.pathname && url.search === location.search && url.hash) return null;
+	return url.pathname + url.search + url.hash;
+}
+/**
+* Kaydedilmemiş değişiklik koruması: sayfadan çıkışta tarayıcının kendi uyarısı (`beforeunload`)
+* ve isteğe bağlı olarak uygulama içi bağlantıların yakalanması. Engelleyici `confirm()`
+* kullanılmaz: onayı uygulama kendi penceresiyle (AlertDialog) sorar.
+*/
+function useUnsavedChanges({ isDirty, onNavigationAttempt, navigate }) {
+	const [pending, setPending] = useState(null);
+	const handler = useRef(onNavigationAttempt);
+	handler.current = onNavigationAttempt;
+	const nav = useRef(navigate);
+	nav.current = navigate;
+	const dirty = useRef(isDirty);
+	dirty.current = isDirty;
+	useEffect(() => {
+		if (!isDirty) return;
+		const onBeforeUnload = (e) => {
+			e.preventDefault();
+			e.returnValue = "";
+		};
+		window.addEventListener("beforeunload", onBeforeUnload);
+		return () => window.removeEventListener("beforeunload", onBeforeUnload);
+	}, [isDirty]);
+	const intercept = Boolean(onNavigationAttempt);
+	useEffect(() => {
+		if (!isDirty || !intercept) return;
+		const onClick = (e) => {
+			const href = internalHref(e);
+			if (!href || !dirty.current) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const attempt = {
+				href,
+				proceed: () => {
+					dirty.current = false;
+					setPending(null);
+					(nav.current ?? ((h) => location.assign(h)))(href);
+				}
+			};
+			setPending(attempt);
+			handler.current?.(attempt);
+		};
+		document.addEventListener("click", onClick, true);
+		return () => document.removeEventListener("click", onClick, true);
+	}, [isDirty, intercept]);
+	return {
+		pending,
+		cancel: useCallback(() => setPending(null), [])
+	};
+}
+/**
+* Bileşen biçimi: formun içine konur, görünür bir şey çizmez. Onay penceresi gerekiyorsa kanca
+* (`useUnsavedChanges`) kullanılır.
+*/
+function UnsavedChangesPrompt(props) {
+	useUnsavedChanges(props);
+	return null;
+}
+export { UnsavedChangesPrompt, useUnsavedChanges };

package/dist/components/UpdatePrompt/UpdatePrompt.css

@@ -0,0 +1,92 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-UpdatePrompt-root-7b376 {
+    z-index: var(--sti-z-toast);
+    gap: var(--sti-space-3);
+    inline-size: min(24rem, calc(100vw - var(--sti-space-8)));
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-lg);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    animation: sti-UpdatePrompt-sti-update-in-fd443 var(--sti-duration-base) var(--sti-ease-out);
+    grid-template-columns: auto minmax(0, 1fr);
+    display: grid;
+    position: fixed;
+    inset-block-end: calc(var(--sti-space-4) + env(safe-area-inset-bottom, 0px));
+    inset-inline-end: calc(var(--sti-space-4) + env(safe-area-inset-right, 0px));
+  }
+
+  .sti-UpdatePrompt-icon-9f19f {
+    inline-size: var(--sti-control-h-sm);
+    block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent);
+    font-size: var(--sti-icon-sm);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-UpdatePrompt-body-35149 {
+    gap: var(--sti-space-0-5);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-UpdatePrompt-title-f0af4 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-UpdatePrompt-description-fdd87 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-UpdatePrompt-actions-5f2fd {
+    justify-content: flex-end;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    grid-column: 2;
+    display: flex;
+  }
+
+  @media (width <= 30rem) {
+    .sti-UpdatePrompt-root-7b376 {
+      inset-inline: var(--sti-space-4);
+      inline-size: auto;
+    }
+
+    .sti-UpdatePrompt-actions-5f2fd {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @keyframes sti-UpdatePrompt-sti-update-in-fd443 {
+    from {
+      opacity: 0;
+      translate: 0 var(--sti-space-2);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-UpdatePrompt-root-7b376 {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-UpdatePrompt-root-7b376 {
+      border-color: canvastext;
+    }
+  }
+}