@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/components/Footnote/Footnote.css

@@ -0,0 +1,172 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Footnote-ref-a3e38 {
+    --sti-footnote-ref-size: .75em;
+    --sti-footnote-ref-shift: -.5em;
+    --sti-footnote-ref-py: .15em;
+    --sti-footnote-ref-px: .4em;
+    --sti-footnote-ref-gap: .125em;
+    font-size: var(--sti-footnote-ref-size);
+    vertical-align: baseline;
+    line-height: 0;
+    position: relative;
+    inset-block-start: var(--sti-footnote-ref-shift);
+  }
+
+  .sti-Footnote-refLink-15d8c {
+    --sti-footnote-ref-bg: var(--sti-bg-accent-subtle);
+    --sti-footnote-ref-fg: var(--sti-fg-accent);
+    padding: var(--sti-footnote-ref-py) var(--sti-footnote-ref-px);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-xs);
+    background: var(--sti-footnote-ref-bg);
+    color: var(--sti-footnote-ref-fg);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--sti-font-weight-semibold);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      color var(--sti-duration-fast) var(--sti-ease-snap);
+    margin-inline-start: var(--sti-footnote-ref-gap);
+    margin-inline-end: calc(var(--sti-footnote-ref-px) / -2);
+    text-decoration: none;
+    display: inline;
+  }
+
+  @media (hover: hover) {
+    .sti-Footnote-refLink-15d8c:hover {
+      --sti-footnote-ref-fg: var(--sti-fg-accent-strong);
+      text-decoration: underline;
+      text-decoration-thickness: from-font;
+    }
+  }
+
+  .sti-Footnote-refLink-15d8c:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Footnote-refLink-15d8c:target {
+    border-color: var(--sti-border-accent);
+  }
+
+  .sti-Footnote-root-0b29b {
+    --sti-footnotes-gap: var(--sti-space-3);
+    --sti-footnotes-fg: var(--sti-fg-muted);
+    gap: var(--sti-space-3);
+    min-width: 0;
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    color: var(--sti-footnotes-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    padding-block-start: var(--sti-space-5);
+    display: grid;
+  }
+
+  .sti-Footnote-title-e6aca {
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-Footnote-list-0dca0 {
+    gap: var(--sti-footnotes-gap);
+    margin: 0;
+    padding: 0;
+    padding-inline-start: var(--sti-space-6);
+    list-style-type: decimal;
+    display: grid;
+  }
+
+  .sti-Footnote-item-6f432 {
+    min-width: 0;
+    scroll-margin-block-start: var(--sti-space-6);
+  }
+
+  .sti-Footnote-item-6f432::marker {
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-Footnote-item-6f432 > .sti-Footnote-content-5f7de {
+    overflow-wrap: anywhere;
+    display: inline;
+  }
+
+  .sti-Footnote-item-6f432:target {
+    border-radius: var(--sti-radius-xs);
+    background: var(--sti-bg-surface-hover);
+    margin-inline-start: calc(var(--sti-space-2) * -1);
+    padding-inline-start: var(--sti-space-2);
+  }
+
+  .sti-Footnote-back-d3966 {
+    min-width: var(--sti-icon-lg);
+    min-height: var(--sti-icon-lg);
+    border-radius: var(--sti-radius-xs);
+    color: var(--sti-fg-link);
+    vertical-align: middle;
+    font-size: var(--sti-icon-sm);
+    transition: color var(--sti-duration-fast) var(--sti-ease-snap);
+    justify-content: center;
+    align-items: center;
+    margin-inline-start: var(--sti-space-1);
+    display: inline-flex;
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .sti-Footnote-back-d3966:hover {
+      color: var(--sti-fg-link-hover);
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-Footnote-back-d3966:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Footnote-backIcon-93637 {
+    flex: none;
+  }
+
+  @media (pointer: coarse) {
+    .sti-Footnote-root-0b29b {
+      --sti-footnotes-gap: var(--sti-space-5);
+    }
+
+    .sti-Footnote-back-d3966:before {
+      content: "";
+      inset: min(0px, calc((100% - var(--sti-control-h-md)) / 2));
+      position: absolute;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Footnote-refLink-15d8c, .sti-Footnote-back-d3966 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Footnote-refLink-15d8c {
+      color: linktext;
+      border-color: linktext;
+    }
+
+    .sti-Footnote-back-d3966 {
+      color: linktext;
+    }
+
+    .sti-Footnote-item-6f432:target {
+      outline: var(--sti-border-width) solid Highlight;
+    }
+  }
+}

package/dist/components/Footnote/Footnote.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+/** Dipnotun öğe kimliği: `fn-<id>`. */
+export declare const footnoteId: (id: string) => string;
+/** Dipnot başvurusunun (metindeki numaranın) öğe kimliği: `fnref-<id>`. */
+export declare const footnoteRefId: (id: string) => string;
+export interface FootnoteRefProps {
+  /** Dipnotun kimliği: `Footnotes` içindeki `items[].id` ile aynı ("kaynak-1", "kvkk"). */
+  to: string;
+  /** Görünen numara; `Footnotes` listesindeki sırasıyla aynı olmalıdır. */
+  number: number;
+  /**
+   * Bu başvurunun öğe kimliği; varsayılan `fnref-<to>`. Aynı dipnota metinde ikinci kez başvuruluyorsa
+   * ikinci başvuruya farklı bir kimlik verilir (kimlikler sayfada tekildir).
+   */
+  id?: string;
+  className?: string;
+}
+/**
+ * Metindeki dipnot numarası: üst simge bağlantı, dipnota gider. Ekran okuyucu "Dipnot 1, bağlantı"
+ * okur (yalnız "1" anlamsızdır); görünen numara adın içinde kalır (WCAG 2.5.3).
+ */
+export declare function FootnoteRef({ to, number, id, className }: FootnoteRefProps): import("react").JSX.Element;
+export interface FootnoteItem {
+  /** Dipnotun kimliği (`FootnoteRef`in `to` değeri). */
+  id: string;
+  /** Dipnot metni (kaynak, açıklama; bağlantı içerebilir). */
+  content: ReactNode;
+  /** Metne dön bağlantısının hedefi; `FootnoteRef`e özel `id` verildiyse o kimlik. */
+  refId?: string;
+}
+export interface FootnotesProps {
+  /** Dipnotlar, metindeki sırasıyla. Numara sıradan gelir: ilk öğe `start` (varsayılan 1). */
+  items: readonly FootnoteItem[];
+  /** Başlık; varsayılan "Dipnotlar" (`footnotes`). */
+  title?: ReactNode;
+  /** Başlığın belge düzeyi (sayfanın başlık yapısına göre); görünüşü değişmez. */
+  titleLevel?: 2 | 3 | 4 | 5 | 6;
+  /** İlk dipnotun numarası (bölümlere ayrılmış uzun metinde). */
+  start?: number;
+  className?: string;
+  id?: string;
+}
+/**
+ * Dipnot listesi: metnin sonunda, başlıklı bir bölge. Her dipnotun sonunda metindeki numaraya geri
+ * götüren bağlantı vardır ("Metne dön, dipnot 1"); bağlantıyla gelinen dipnot vurgulanır.
+ */
+export declare function Footnotes({ items, title, titleLevel, start, className, id }: FootnotesProps): import("react").JSX.Element | null;

package/dist/components/Footnote/Footnote.js

@@ -0,0 +1,72 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { ArrowUpIcon } from "../../icons/generated/ArrowUpIcon.js";
+import Footnote_module_default from "./Footnote.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/components/Footnote/Footnote.tsx
+/** Dipnotun öğe kimliği: `fn-<id>`. */
+const footnoteId = (id) => `fn-${id}`;
+/** Dipnot başvurusunun (metindeki numaranın) öğe kimliği: `fnref-<id>`. */
+const footnoteRefId = (id) => `fnref-${id}`;
+const hash = (elementId) => `#${encodeURIComponent(elementId)}`;
+/**
+* Metindeki dipnot numarası: üst simge bağlantı, dipnota gider. Ekran okuyucu "Dipnot 1, bağlantı"
+* okur (yalnız "1" anlamsızdır); görünen numara adın içinde kalır (WCAG 2.5.3).
+*/
+function FootnoteRef({ to, number, id, className }) {
+	const t = useMessages();
+	return /* @__PURE__ */ jsx("sup", {
+		className: [Footnote_module_default.ref, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsx("a", {
+			id: id ?? footnoteRefId(to),
+			href: hash(footnoteId(to)),
+			className: Footnote_module_default.refLink,
+			"aria-label": template(t.footnoteRef, { number }),
+			"data-footnote-ref": "",
+			children: number
+		})
+	});
+}
+/**
+* Dipnot listesi: metnin sonunda, başlıklı bir bölge. Her dipnotun sonunda metindeki numaraya geri
+* götüren bağlantı vardır ("Metne dön, dipnot 1"); bağlantıyla gelinen dipnot vurgulanır.
+*/
+function Footnotes({ items, title, titleLevel = 2, start = 1, className, id }) {
+	const t = useMessages();
+	const titleId = useId();
+	const Heading = `h${titleLevel}`;
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [Footnote_module_default.root, className].filter(Boolean).join(" "),
+		"aria-labelledby": titleId,
+		"data-footnotes": "",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			id: titleId,
+			className: Footnote_module_default.title,
+			children: title ?? t.footnotes
+		}), /* @__PURE__ */ jsx("ol", {
+			className: Footnote_module_default.list,
+			start: start === 1 ? void 0 : start,
+			children: items.map((item, i) => {
+				const number = start + i;
+				return /* @__PURE__ */ jsxs("li", {
+					id: footnoteId(item.id),
+					className: Footnote_module_default.item,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: Footnote_module_default.content,
+						children: item.content
+					}), /* @__PURE__ */ jsx("a", {
+						href: hash(item.refId ?? footnoteRefId(item.id)),
+						className: Footnote_module_default.back,
+						"aria-label": template(t.footnoteBack, { number }),
+						children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: Footnote_module_default.backIcon })
+					})]
+				}, item.id);
+			})
+		})]
+	});
+}
+export { FootnoteRef, Footnotes, footnoteId, footnoteRefId };

package/dist/components/Footnote/Footnote.module.js

@@ -0,0 +1,14 @@
+import './Footnote.css';
+// src/components/Footnote/Footnote.module.css
+var Footnote_module_default = {
+	"ref": "sti-Footnote-ref-a3e38",
+	"refLink": "sti-Footnote-refLink-15d8c",
+	"root": "sti-Footnote-root-0b29b",
+	"title": "sti-Footnote-title-e6aca",
+	"list": "sti-Footnote-list-0dca0",
+	"item": "sti-Footnote-item-6f432",
+	"content": "sti-Footnote-content-5f7de",
+	"back": "sti-Footnote-back-d3966",
+	"backIcon": "sti-Footnote-backIcon-93637"
+};
+export { Footnote_module_default as default };

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

@@ -0,0 +1,2 @@
+import { FootnoteItem, FootnoteRef, FootnoteRefProps, Footnotes, FootnotesProps, footnoteId, footnoteRefId } from "./Footnote.js";
+export { FootnoteItem, FootnoteRef, FootnoteRefProps, Footnotes, FootnotesProps, footnoteId, footnoteRefId };

package/dist/components/Form/Form.css

@@ -0,0 +1,13 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Form-root-d50b3 {
+    --sti-form-gap: var(--sti-space-5);
+    gap: var(--sti-form-gap);
+    min-width: 0;
+    display: grid;
+  }
+
+  .sti-Form-root-d50b3[data-pending] {
+    cursor: progress;
+  }
+}

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,33 @@
+import { FormEvent, ReactNode, Ref } from "react";
+export type FormValues = Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+export interface FormProps {
+  children: ReactNode;
+  /**
+   * Gönderim: olay ve form değerleri (aynı adlı alanlar dizi olur). Verilmezse ve `action` da
+   * yoksa form tarayıcının olağan gönderimini yapar.
+   */
+  onSubmit?: (event: FormEvent<HTMLFormElement>, values: FormValues) => void;
+  /** React 19 form eylemi ya da adres. */
+  action?: string | ((data: FormData) => void | Promise<void>);
+  method?: "get" | "post";
+  /** Sunucudan gelen alan hataları (`{ alanAdı: "metin" }`); ilgili alanlara bağlanır. */
+  validationErrors?: Record<string, string | string[]>;
+  /**
+   * Hata özeti: gönderim başarısız olunca (ya da sunucu hatası gelince) formun başında hataları
+   * alanlara bağlayan liste. `focus` (varsayılan) odağı özete taşır; `show` yalnız gösterir; `off`.
+   */
+  errorSummary?: "focus" | "show" | "off";
+  /** Gönderim sürüyor: form meşgul olarak bildirilir (`aria-busy`). */
+  isPending?: boolean;
+  /** Tarayıcının otomatik doldurması. */
+  autoComplete?: "on" | "off";
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLFormElement>;
+}
+/**
+ * Form: React Aria Form üzerine. Doğrulama yerel davranıştadır (hata kişi yazarken değil gönderince
+ * ya da alandan çıkınca), sunucu hataları alanlara bağlanır, gönderim başarısız olunca hata özeti
+ * gösterilir ve odak özete taşınır. Değerler `onSubmit`'e FormData'dan nesne olarak verilir.
+ */
+export declare function Form({ children, onSubmit, action, method, validationErrors, errorSummary, isPending, autoComplete, className, id, ref }: FormProps): import("react").JSX.Element;

package/dist/components/Form/Form.js

@@ -0,0 +1,136 @@
+"use client";
+import { FormErrorSummary } from "../FormErrorSummary/FormErrorSummary.js";
+import Form_module_default from "./Form.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Form } from "react-aria-components";
+// src/components/Form/Form.tsx
+/** Bir denetimin görünür adı: etiketi ya da aria-labelledby metinleri. */
+function labelOf(el) {
+	const ids = el.getAttribute("aria-labelledby");
+	if (ids) {
+		const text = ids.split(/\s+/).map((i) => document.getElementById(i)?.textContent?.trim() ?? "").filter(Boolean).join(" ");
+		if (text) return text;
+	}
+	const labels = el.labels;
+	if (labels?.[0]?.textContent) return labels[0].textContent.trim();
+	return el.getAttribute("aria-label") ?? el.name ?? "";
+}
+/** Hata metni: denetime bağlı hata öğesi (React Aria `slot="errorMessage"`). */
+function messageOf(el) {
+	const ids = el.getAttribute("aria-describedby") ?? "";
+	for (const i of ids.split(/\s+/)) {
+		const node = i ? document.getElementById(i) : null;
+		if (node?.getAttribute("slot") === "errorMessage" && node.textContent) return node.textContent.trim();
+	}
+	return "";
+}
+/** Formdaki geçersiz denetimler (sırasıyla), adları ve hata metinleriyle. */
+function collect(form) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const el of form.querySelectorAll("[aria-invalid=\"true\"]")) {
+		const group = el.closest("[role=\"radiogroup\"], [role=\"group\"]");
+		const key = group?.id || el.id;
+		if (!key || seen.has(key)) continue;
+		seen.add(key);
+		const label = group ? labelOf(group) || labelOf(el) : labelOf(el);
+		const message = messageOf(el) || (group ? messageOf(group) : "");
+		if (!el.id) continue;
+		out.push({
+			fieldId: el.id,
+			label,
+			message
+		});
+	}
+	return out;
+}
+/**
+* Form: React Aria Form üzerine. Doğrulama yerel davranıştadır (hata kişi yazarken değil gönderince
+* ya da alandan çıkınca), sunucu hataları alanlara bağlanır, gönderim başarısız olunca hata özeti
+* gösterilir ve odak özete taşınır. Değerler `onSubmit`'e FormData'dan nesne olarak verilir.
+*/
+function Form$1({ children, onSubmit, action, method, validationErrors, errorSummary = "focus", isPending, autoComplete, className, id, ref }) {
+	const formRef = useRef(null);
+	const summaryRef = useRef(null);
+	const summaryId = useId();
+	const [errors, setErrors] = useState([]);
+	const pending = useRef(0);
+	const setRefs = useCallback((el) => {
+		formRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	}, [ref]);
+	const refresh = useCallback((focus) => {
+		if (errorSummary === "off") return;
+		cancelAnimationFrame(pending.current);
+		let last = null;
+		let total = 0;
+		let stable = 0;
+		let focused = false;
+		const read = () => {
+			const form = formRef.current;
+			if (!form) return;
+			const next = collect(form);
+			const key = JSON.stringify(next);
+			if (key !== last) {
+				setErrors(next);
+				if (!focused && focus && errorSummary === "focus" && next.length) {
+					focused = true;
+					requestAnimationFrame(() => summaryRef.current?.focus());
+				}
+				last = key;
+				stable = 0;
+			} else stable++;
+			total++;
+			if (stable < 2 && total < 10) pending.current = requestAnimationFrame(read);
+		};
+		pending.current = requestAnimationFrame(() => {
+			pending.current = requestAnimationFrame(read);
+		});
+	}, [errorSummary]);
+	useEffect(() => {
+		if (validationErrors && Object.keys(validationErrors).length) refresh(true);
+	}, [validationErrors, refresh]);
+	useEffect(() => {
+		const form = formRef.current;
+		if (!form) return;
+		const onInvalid = () => refresh(true);
+		form.addEventListener("invalid", onInvalid, true);
+		return () => {
+			form.removeEventListener("invalid", onInvalid, true);
+			cancelAnimationFrame(pending.current);
+		};
+	}, [refresh]);
+	return /* @__PURE__ */ jsxs(Form, {
+		ref: setRefs,
+		id,
+		action,
+		method,
+		autoComplete,
+		validationErrors,
+		validationBehavior: "native",
+		className: [Form_module_default.root, className].filter(Boolean).join(" "),
+		"aria-busy": isPending || void 0,
+		"data-pending": isPending ? "" : void 0,
+		onSubmit: (e) => {
+			setErrors([]);
+			if (!onSubmit) return;
+			e.preventDefault();
+			const data = new FormData(e.currentTarget);
+			const values = {};
+			for (const key of new Set(data.keys())) {
+				const all = data.getAll(key);
+				values[key] = all.length > 1 ? all : all[0];
+			}
+			onSubmit(e, values);
+		},
+		onReset: () => setErrors([]),
+		children: [errors.length ? /* @__PURE__ */ jsx(FormErrorSummary, {
+			ref: summaryRef,
+			id: summaryId,
+			errors
+		}) : null, children]
+	});
+}
+export { Form$1 as Form };

package/dist/components/Form/Form.module.js

@@ -0,0 +1,4 @@
+import './Form.css';
+// src/components/Form/Form.module.css
+var Form_module_default = { "root": "sti-Form-root-d50b3" };
+export { Form_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Form, FormProps, FormValues } from "./Form.js";
+export { Form, FormProps, FormValues };

package/dist/components/FormErrorSummary/FormErrorSummary.css

@@ -0,0 +1,69 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FormErrorSummary-root-70bcd {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-danger);
+    border-inline-start-width: var(--sti-border-width-strong);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-danger-subtle);
+    color: var(--sti-fg);
+    outline: none;
+    display: grid;
+  }
+
+  .sti-FormErrorSummary-root-70bcd:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-FormErrorSummary-title-ef443 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-danger-strong);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-FormErrorSummary-icon-16cc0 {
+    font-size: var(--sti-icon-md);
+    flex: none;
+  }
+
+  .sti-FormErrorSummary-list-e6f5f {
+    gap: var(--sti-space-1);
+    margin: 0;
+    padding-inline-start: calc(var(--sti-icon-md) + var(--sti-space-2));
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-FormErrorSummary-link-bf14a {
+    color: var(--sti-fg-danger-strong);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    text-underline-offset: .18em;
+    overflow-wrap: anywhere;
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+  }
+
+  .sti-FormErrorSummary-link-bf14a:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  .sti-FormErrorSummary-label-e414f {
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  @media (forced-colors: active) {
+    .sti-FormErrorSummary-root-70bcd {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/FormErrorSummary/FormErrorSummary.d.ts

@@ -0,0 +1,23 @@
+import { Ref } from "react";
+export interface FormErrorItem {
+  /** Hatalı alanın denetim öğesinin kimliği (bağlantı oraya odaklanır). */
+  fieldId: string;
+  /** Alanın adı (etiketi). */
+  label: string;
+  /** Hata metni. */
+  message: string;
+}
+export interface FormErrorSummaryProps {
+  errors: FormErrorItem[];
+  /** Başlık; verilmezse "Formda N hata var". */
+  title?: string;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Hata özeti (`section`, adıyla bölge): gönderim başarısız olunca formun başında, her hatayı ilgili alana bağlayan liste.
+ * Başlığa odaklanılabilir (`tabIndex=-1`): Form, özeti gösterince odağı buraya taşır; ekran
+ * okuyucu önce özeti, sonra bağlantıları okur. Hata yokken hiçbir şey çizmez.
+ */
+export declare function FormErrorSummary({ errors, title, className, id, ref }: FormErrorSummaryProps): import("react").JSX.Element | null;

package/dist/components/FormErrorSummary/FormErrorSummary.js

@@ -0,0 +1,58 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import FormErrorSummary_module_default from "./FormErrorSummary.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/FormErrorSummary/FormErrorSummary.tsx
+/** Bağlantıyla alana git: alan odaklanır ve ekranın ortasına kaydırılır (hareket azaltmada anında). */
+function focusField(e, fieldId) {
+	const el = document.getElementById(fieldId);
+	if (!el) return;
+	e.preventDefault();
+	el.focus({ preventScroll: true });
+	const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	el.scrollIntoView({
+		block: "center",
+		behavior: reduce ? "auto" : "smooth"
+	});
+}
+/**
+* Hata özeti (`section`, adıyla bölge): gönderim başarısız olunca formun başında, her hatayı ilgili alana bağlayan liste.
+* Başlığa odaklanılabilir (`tabIndex=-1`): Form, özeti gösterince odağı buraya taşır; ekran
+* okuyucu önce özeti, sonra bağlantıları okur. Hata yokken hiçbir şey çizmez.
+*/
+function FormErrorSummary({ errors, title, className, id, ref }) {
+	const t = useMessages();
+	if (errors.length === 0) return null;
+	const heading = title ?? template(t.formErrors, { count: errors.length });
+	return /* @__PURE__ */ jsxs("section", {
+		ref,
+		id,
+		className: [FormErrorSummary_module_default.root, className].filter(Boolean).join(" "),
+		"aria-labelledby": id ? `${id}-title` : void 0,
+		"aria-label": id ? void 0 : heading,
+		tabIndex: -1,
+		children: [/* @__PURE__ */ jsxs("p", {
+			id: id ? `${id}-title` : void 0,
+			className: FormErrorSummary_module_default.title,
+			children: [/* @__PURE__ */ jsx(AlertCircleIcon, { className: FormErrorSummary_module_default.icon }), heading]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: FormErrorSummary_module_default.list,
+			children: errors.map((err) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+				href: `#${err.fieldId}`,
+				className: FormErrorSummary_module_default.link,
+				onClick: (e) => focusField(e, err.fieldId),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: FormErrorSummary_module_default.label,
+						children: err.label
+					}),
+					": ",
+					err.message
+				]
+			}) }, err.fieldId))
+		})]
+	});
+}
+export { FormErrorSummary };

package/dist/components/FormErrorSummary/FormErrorSummary.module.js

@@ -0,0 +1,11 @@
+import './FormErrorSummary.css';
+// src/components/FormErrorSummary/FormErrorSummary.module.css
+var FormErrorSummary_module_default = {
+	"root": "sti-FormErrorSummary-root-70bcd",
+	"title": "sti-FormErrorSummary-title-ef443",
+	"icon": "sti-FormErrorSummary-icon-16cc0",
+	"list": "sti-FormErrorSummary-list-e6f5f",
+	"link": "sti-FormErrorSummary-link-bf14a",
+	"label": "sti-FormErrorSummary-label-e414f"
+};
+export { FormErrorSummary_module_default as default };

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

@@ -0,0 +1,2 @@
+import { FormErrorItem, FormErrorSummary, FormErrorSummaryProps } from "./FormErrorSummary.js";
+export { FormErrorItem, FormErrorSummary, FormErrorSummaryProps };