@stisocial/ui 0.2.0 → 0.3.0

package/dist/components/Gantt/Gantt.js

@@ -0,0 +1,324 @@
+"use client";
+import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../Button/Button.js";
+import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
+import Gantt_module_default from "./Gantt.module.js";
+import { DAY_WIDTH, diffDays, ganttRange, ganttTicks } from "./ganttMath.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+// src/components/Gantt/Gantt.tsx
+/**
+* Gantt çizelgesi: solda görev, başlangıç, bitiş ve ilerleme (gerçek tablo; ekran okuyucu bütün
+* veriyi okur), sağda zaman çizelgesi: ay ve gün/hafta başlıkları, ilerlemeli çubuklar, kilometre
+* taşları, bağımlılık okları ve bugün çizgisi. Ölçek gün, hafta ya da ay. Konumlar istemcide
+* CSSOM ve SVG ile çizilir (satır içi stil yok); görev adı sütunu yatay kaydırmada sabit kalır.
+*/
+function Gantt({ label, tasks, scale: scaleProp, defaultScale = "week", onScaleChange, today: todayProp, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const locale = useLocale();
+	const [initialToday] = useState(() => new Intl.DateTimeFormat("en-CA", { timeZone: fmt.context.timeZone }).format(/* @__PURE__ */ new Date()));
+	const today = todayProp ?? initialToday;
+	const [innerScale, setInnerScale] = useState(defaultScale);
+	const scale = scaleProp ?? innerScale;
+	const range = useMemo(() => ganttRange(tasks, scale, today), [
+		tasks,
+		scale,
+		today
+	]);
+	const ticks = useMemo(() => ganttTicks(range.from, range.days, scale), [range, scale]);
+	const dayW = DAY_WIDTH[scale];
+	const canvas = useRef(null);
+	const scroller = useRef(null);
+	const [links, setLinks] = useState([]);
+	const markerId = `${useId().replace(/[^a-zA-Z0-9_-]/g, "")}-gantt-arrow`;
+	const [size, setSize] = useState({
+		w: 0,
+		h: 0
+	});
+	const asDate = (day) => /* @__PURE__ */ new Date(`${day}T12:00:00Z`);
+	const short = (day) => new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "short",
+		timeZone: "UTC"
+	}).format(asDate(day));
+	const monthLabel = (day) => new Intl.DateTimeFormat(locale, {
+		month: "long",
+		year: "numeric",
+		timeZone: "UTC"
+	}).format(asDate(day));
+	const titleOf = new Map(tasks.map((task) => [task.id, task.title]));
+	const place = useCallback((el) => {
+		if (!el) return;
+		for (const k of [
+			"offset",
+			"span",
+			"progress"
+		]) if (el.dataset[k] !== void 0) el.style.setProperty(`--sti-gantt-${k}`, el.dataset[k] ?? "0");
+		el.dataset.placed = "";
+	}, []);
+	useLayoutEffect(() => {
+		canvas.current?.style.setProperty("--sti-gantt-day", `${dayW}px`);
+		canvas.current?.style.setProperty("--sti-gantt-days", String(range.days));
+	}, [dayW, range.days]);
+	const drawLinks = useCallback(() => {
+		const root = canvas.current;
+		if (!root) return;
+		const box = root.getBoundingClientRect();
+		const barOf = (taskId) => root.querySelector(`[data-bar="${CSS.escape(taskId)}"]`)?.getBoundingClientRect();
+		const out = [];
+		for (const task of tasks) for (const dep of task.dependsOn ?? []) {
+			const a = barOf(dep);
+			const b = barOf(task.id);
+			if (!a || !b) continue;
+			const x1 = a.right - box.left;
+			const y1 = a.top + a.height / 2 - box.top;
+			const x2 = b.left - box.left;
+			const y2 = b.top + b.height / 2 - box.top;
+			const mid = Math.max(x1 + 8, Math.min(x2 - 8, x1 + 12));
+			out.push({
+				key: `${dep}>${task.id}`,
+				d: x2 - 8 >= x1 + 8 ? `M${x1} ${y1} H${mid} V${y2} H${x2 - 2}` : `M${x1} ${y1} h8 V${(y1 + y2) / 2} H${x2 - 10} V${y2} H${x2 - 2}`
+			});
+		}
+		setLinks(out);
+		setSize({
+			w: root.scrollWidth,
+			h: root.scrollHeight
+		});
+	}, [tasks]);
+	useEffect(() => {
+		const frame = requestAnimationFrame(drawLinks);
+		const root = canvas.current;
+		const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => drawLinks());
+		if (root) ro?.observe(root);
+		return () => {
+			cancelAnimationFrame(frame);
+			ro?.disconnect();
+		};
+	}, [drawLinks, scale]);
+	/** Bugünü görünüme getirir; `ifHidden` ise yalnız görünmüyorsa (tarih sütunları açık kalır). */
+	const scrollToToday = useCallback((ifHidden = false) => {
+		const el = scroller.current;
+		const track = canvas.current?.querySelector("[data-track]");
+		if (!el || !track) return;
+		const x = track.offsetLeft + diffDays(range.from, today) * dayW;
+		const nameW = canvas.current?.querySelector("th")?.offsetWidth ?? 0;
+		const left = el.scrollLeft + nameW;
+		if (ifHidden && x >= left + 8 && x <= el.scrollLeft + el.clientWidth - 40) return;
+		el.scrollLeft = Math.max(0, x - nameW - (el.clientWidth - nameW) / 3);
+	}, [
+		range.from,
+		today,
+		dayW
+	]);
+	useEffect(() => scrollToToday(true), [scale]);
+	const setScale = (s) => {
+		if (!scaleProp) setInnerScale(s);
+		onScaleChange?.(s);
+	};
+	const todayOffset = diffDays(range.from, today);
+	const showToday = todayOffset >= 0 && todayOffset < range.days;
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label,
+		className: [Gantt_module_default.root, className].filter(Boolean).join(" "),
+		"data-scale": scale,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: Gantt_module_default.toolbar,
+			children: [/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "secondary",
+				onPress: () => scrollToToday(),
+				isDisabled: !showToday,
+				children: t.ganttToday
+			}), /* @__PURE__ */ jsxs(SegmentedControl, {
+				label: t.ganttScale,
+				size: "sm",
+				value: scale,
+				onChange: (v) => setScale(v),
+				children: [
+					/* @__PURE__ */ jsx(SegmentedControlItem, {
+						value: "day",
+						children: t.ganttScaleDay
+					}),
+					/* @__PURE__ */ jsx(SegmentedControlItem, {
+						value: "week",
+						children: t.ganttScaleWeek
+					}),
+					/* @__PURE__ */ jsx(SegmentedControlItem, {
+						value: "month",
+						children: t.ganttScaleMonth
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: scroller,
+			className: Gantt_module_default.scroller,
+			tabIndex: 0,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: canvas,
+				className: Gantt_module_default.canvas,
+				children: [/* @__PURE__ */ jsxs("table", {
+					className: Gantt_module_default.table,
+					children: [/* @__PURE__ */ jsxs("thead", { children: [/* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							rowSpan: 2,
+							className: Gantt_module_default.nameHead,
+							children: t.ganttTask
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							rowSpan: 2,
+							className: Gantt_module_default.dataHead,
+							children: t.ganttStart
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							rowSpan: 2,
+							className: Gantt_module_default.dataHead,
+							children: t.ganttEnd
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							rowSpan: 2,
+							className: Gantt_module_default.dataHead,
+							"data-numeric": "",
+							children: t.ganttProgress
+						}),
+						/* @__PURE__ */ jsxs("th", {
+							scope: "col",
+							className: Gantt_module_default.scaleHead,
+							"data-track": "",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: Gantt_module_default.srOnly,
+								children: t.ganttTimeline
+							}), /* @__PURE__ */ jsx("span", {
+								className: Gantt_module_default.ticks,
+								"aria-hidden": "true",
+								children: ticks.months.map((m) => /* @__PURE__ */ jsx("span", {
+									ref: place,
+									className: Gantt_module_default.monthTick,
+									"data-offset": m.offset,
+									"data-span": m.span,
+									children: m.span * dayW >= 60 ? monthLabel(m.day) : ""
+								}, m.day))
+							})]
+						})
+					] }), /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						className: Gantt_module_default.scaleHead,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx("span", {
+							className: Gantt_module_default.ticks,
+							children: ticks.minor.map((m) => /* @__PURE__ */ jsx("span", {
+								ref: place,
+								className: Gantt_module_default.minorTick,
+								"data-offset": m.offset,
+								"data-span": m.span,
+								"data-weekend": scale === "day" && [0, 6].includes(asDate(m.day).getUTCDay()) ? "" : void 0,
+								"data-today": m.day === today ? "" : void 0,
+								children: scale === "day" ? Number(m.day.slice(8)) : short(m.day)
+							}, m.day))
+						})
+					}) })] }), /* @__PURE__ */ jsx("tbody", { children: tasks.map((task) => {
+						const offset = diffDays(range.from, task.start);
+						const span = Math.max(1, diffDays(task.start, task.end) + 1);
+						const deps = (task.dependsOn ?? []).map((d) => titleOf.get(d)).filter(Boolean);
+						return /* @__PURE__ */ jsxs("tr", {
+							className: Gantt_module_default.row,
+							children: [
+								/* @__PURE__ */ jsxs("th", {
+									scope: "row",
+									className: Gantt_module_default.name,
+									"data-level": task.level ?? 0,
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: Gantt_module_default.nameText,
+											children: task.title
+										}),
+										task.milestone ? /* @__PURE__ */ jsx("span", {
+											className: Gantt_module_default.srOnly,
+											children: `, ${t.ganttMilestone}`
+										}) : null,
+										deps.length ? /* @__PURE__ */ jsx("span", {
+											className: Gantt_module_default.srOnly,
+											children: `, ${template(t.ganttDependsOn, { list: fmt.list(deps) })}`
+										}) : null
+									]
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: Gantt_module_default.data,
+									children: fmt.date(asDate(task.start), "short")
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: Gantt_module_default.data,
+									children: fmt.date(asDate(task.end), "short")
+								}),
+								/* @__PURE__ */ jsx("td", {
+									className: Gantt_module_default.data,
+									"data-numeric": "",
+									children: task.progress === void 0 ? "—" : fmt.percent(task.progress)
+								}),
+								/* @__PURE__ */ jsxs("td", {
+									className: Gantt_module_default.track,
+									"aria-hidden": "true",
+									children: [
+										showToday ? /* @__PURE__ */ jsx("span", {
+											ref: place,
+											className: Gantt_module_default.todayLine,
+											"data-offset": todayOffset
+										}) : null,
+										/* @__PURE__ */ jsx("span", {
+											ref: place,
+											className: task.milestone ? Gantt_module_default.milestone : Gantt_module_default.bar,
+											"data-bar": task.id,
+											"data-offset": offset,
+											"data-span": task.milestone ? 1 : span,
+											"data-progress": Math.max(0, Math.min(1, task.progress ?? 0)),
+											"data-tone": task.tone ?? "accent",
+											title: task.title,
+											children: task.milestone ? null : /* @__PURE__ */ jsx("span", { className: Gantt_module_default.progress })
+										}),
+										task.milestone ? /* @__PURE__ */ jsx("span", {
+											ref: place,
+											className: Gantt_module_default.milestoneLabel,
+											"data-offset": offset + 1,
+											children: task.title
+										}) : null
+									]
+								})
+							]
+						}, task.id);
+					}) })]
+				}), /* @__PURE__ */ jsxs("svg", {
+					className: Gantt_module_default.links,
+					width: size.w,
+					height: size.h,
+					viewBox: `0 0 ${size.w || 1} ${size.h || 1}`,
+					"aria-hidden": "true",
+					focusable: "false",
+					children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+						id: markerId,
+						viewBox: "0 0 8 8",
+						refX: "7",
+						refY: "4",
+						markerWidth: "6",
+						markerHeight: "6",
+						orient: "auto",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M0 0 L8 4 L0 8 z",
+							className: Gantt_module_default.arrowHead
+						})
+					}) }), links.map((l) => /* @__PURE__ */ jsx("path", {
+						d: l.d,
+						className: Gantt_module_default.link,
+						markerEnd: `url(#${markerId})`
+					}, l.key))]
+				})]
+			})
+		})]
+	});
+}
+export { Gantt };

package/dist/components/Gantt/Gantt.module.js

@@ -0,0 +1,30 @@
+import './Gantt.css';
+// src/components/Gantt/Gantt.module.css
+var Gantt_module_default = {
+	"root": "sti-Gantt-root-b4f18",
+	"toolbar": "sti-Gantt-toolbar-b6c91",
+	"scroller": "sti-Gantt-scroller-d2a40",
+	"canvas": "sti-Gantt-canvas-58fd1",
+	"table": "sti-Gantt-table-ea530",
+	"nameHead": "sti-Gantt-nameHead-ceae6",
+	"dataHead": "sti-Gantt-dataHead-9fceb",
+	"scaleHead": "sti-Gantt-scaleHead-46d32",
+	"data": "sti-Gantt-data-0925c",
+	"name": "sti-Gantt-name-c6495",
+	"nameText": "sti-Gantt-nameText-c9ae6",
+	"row": "sti-Gantt-row-46e5a",
+	"track": "sti-Gantt-track-b89e1",
+	"ticks": "sti-Gantt-ticks-483e6",
+	"monthTick": "sti-Gantt-monthTick-1b166",
+	"minorTick": "sti-Gantt-minorTick-b2cc1",
+	"bar": "sti-Gantt-bar-5d10a",
+	"milestone": "sti-Gantt-milestone-0c0e0",
+	"milestoneLabel": "sti-Gantt-milestoneLabel-d020c",
+	"todayLine": "sti-Gantt-todayLine-b1ff4",
+	"progress": "sti-Gantt-progress-94971",
+	"links": "sti-Gantt-links-de76a",
+	"link": "sti-Gantt-link-84067",
+	"arrowHead": "sti-Gantt-arrowHead-975b1",
+	"srOnly": "sti-Gantt-srOnly-f0f0a"
+};
+export { Gantt_module_default as default };

package/dist/components/Gantt/ganttMath.d.ts

@@ -0,0 +1,29 @@
+export declare const ganttAddDays: (day: string, n: number) => string;
+/** `b - a` gün. */
+export declare const diffDays: (a: string, b: string) => number;
+export type GanttScale = "day" | "week" | "month";
+/** Ölçeğe göre bir günün genişliği (piksel). */
+export declare const DAY_WIDTH: Record<GanttScale, number>;
+/**
+ * Görünen aralık: işlerin en erkeninden en geç bitişine, iki yana pay eklenerek; haftada
+ * pazartesiden, ayda ayın ilk gününden başlar.
+ */
+export declare function ganttRange(tasks: readonly {
+  start: string;
+  end: string;
+}[], scale: GanttScale, today?: string): {
+  from: string;
+  days: number;
+};
+export interface GanttTick {
+  /** Aralığın başından gün. */
+  offset: number;
+  /** Kapladığı gün. */
+  span: number;
+  day: string;
+}
+/** Üst başlık (ay) ve alt başlık (gün / hafta başı) bölmeleri. */
+export declare function ganttTicks(from: string, days: number, scale: GanttScale): {
+  months: GanttTick[];
+  minor: GanttTick[];
+};

package/dist/components/Gantt/ganttMath.js

@@ -0,0 +1,71 @@
+// src/components/Gantt/ganttMath.ts
+const toUtc = (day) => {
+	const [y, m, d] = day.split("-").map(Number);
+	return Date.UTC(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+};
+const fromUtc = (ms) => new Date(ms).toISOString().slice(0, 10);
+const ganttAddDays = (day, n) => fromUtc(toUtc(day) + n * 864e5);
+/** `b - a` gün. */
+const diffDays = (a, b) => Math.round((toUtc(b) - toUtc(a)) / 864e5);
+/** Ölçeğe göre bir günün genişliği (piksel). */
+const DAY_WIDTH = {
+	day: 36,
+	week: 14,
+	month: 5
+};
+/**
+* Görünen aralık: işlerin en erkeninden en geç bitişine, iki yana pay eklenerek; haftada
+* pazartesiden, ayda ayın ilk gününden başlar.
+*/
+function ganttRange(tasks, scale, today) {
+	const days = tasks.flatMap((t) => [t.start, t.end]);
+	if (today) days.push(today);
+	if (days.length === 0) return {
+		from: today ?? "2026-01-01",
+		days: 30
+	};
+	let from = days.reduce((a, b) => a < b ? a : b);
+	let to = days.reduce((a, b) => a > b ? a : b);
+	const pad = scale === "day" ? 2 : scale === "week" ? 7 : 14;
+	from = ganttAddDays(from, -pad);
+	to = ganttAddDays(to, pad);
+	if (scale === "week") {
+		const wd = new Date(toUtc(from)).getUTCDay();
+		from = ganttAddDays(from, -((wd + 6) % 7));
+	}
+	if (scale === "month") from = `${from.slice(0, 7)}-01`;
+	return {
+		from,
+		days: diffDays(from, to) + 1
+	};
+}
+/** Üst başlık (ay) ve alt başlık (gün / hafta başı) bölmeleri. */
+function ganttTicks(from, days, scale) {
+	const months = [];
+	const minor = [];
+	for (let i = 0; i < days; i++) {
+		const day = ganttAddDays(from, i);
+		const last = months.at(-1);
+		if (!last || last.day.slice(0, 7) !== day.slice(0, 7)) months.push({
+			offset: i,
+			span: 1,
+			day
+		});
+		else last.span++;
+		if (scale === "day") minor.push({
+			offset: i,
+			span: 1,
+			day
+		});
+		else if (scale === "week" && new Date(toUtc(day)).getUTCDay() === 1) minor.push({
+			offset: i,
+			span: Math.min(7, days - i),
+			day
+		});
+	}
+	return {
+		months,
+		minor
+	};
+}
+export { DAY_WIDTH, diffDays, ganttAddDays, ganttRange, ganttTicks };

package/dist/components/Image/Image.css

@@ -0,0 +1,141 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Image-root-9cd60 {
+    --sti-image-radius: var(--sti-radius-md);
+    --sti-image-ratio: auto;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    aspect-ratio: var(--sti-image-ratio);
+    border-radius: var(--sti-image-radius);
+    vertical-align: top;
+    isolation: isolate;
+    display: inline-grid;
+    overflow: hidden;
+  }
+
+  .sti-Image-root-9cd60[data-radius="none"] {
+    --sti-image-radius: 0;
+  }
+
+  .sti-Image-root-9cd60[data-radius="sm"] {
+    --sti-image-radius: var(--sti-radius-sm);
+  }
+
+  .sti-Image-root-9cd60[data-radius="lg"] {
+    --sti-image-radius: var(--sti-radius-lg);
+  }
+
+  .sti-Image-root-9cd60[data-ratio="1/1"] {
+    --sti-image-ratio: 1 / 1;
+  }
+
+  .sti-Image-root-9cd60[data-ratio="4/3"] {
+    --sti-image-ratio: 4 / 3;
+  }
+
+  .sti-Image-root-9cd60[data-ratio="3/2"] {
+    --sti-image-ratio: 3 / 2;
+  }
+
+  .sti-Image-root-9cd60[data-ratio="16/9"] {
+    --sti-image-ratio: 16 / 9;
+  }
+
+  .sti-Image-root-9cd60[data-ratio="9/16"] {
+    --sti-image-ratio: 9 / 16;
+  }
+
+  .sti-Image-root-9cd60[data-ratio="4/5"] {
+    --sti-image-ratio: 4 / 5;
+  }
+
+  .sti-Image-root-9cd60[data-ratio="21/9"] {
+    --sti-image-ratio: 21 / 9;
+  }
+
+  .sti-Image-root-9cd60[data-placeholder]:not([data-placeholder="none"])[data-status="loading"] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-Image-img-fd3c0, .sti-Image-blur-ad9ba, .sti-Image-error-90a4f {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .sti-Image-img-fd3c0 {
+    block-size: auto;
+    max-inline-size: 100%;
+    transition: opacity var(--sti-duration-slow) var(--sti-ease-out);
+  }
+
+  .sti-Image-root-9cd60[data-status="loading"] .sti-Image-img-fd3c0 {
+    opacity: 0;
+  }
+
+  .sti-Image-root-9cd60[data-ratio] .sti-Image-img-fd3c0, .sti-Image-root-9cd60[data-ratio] .sti-Image-blur-ad9ba {
+    object-fit: cover;
+    block-size: 100%;
+  }
+
+  .sti-Image-root-9cd60[data-ratio][data-fit="contain"] .sti-Image-img-fd3c0 {
+    object-fit: contain;
+  }
+
+  .sti-Image-blur-ad9ba {
+    z-index: -1;
+    object-fit: cover;
+    block-size: 100%;
+    filter: blur(var(--sti-space-4));
+    scale: 1.1;
+  }
+
+  .sti-Image-root-9cd60:not([data-status="loading"]) .sti-Image-blur-ad9ba {
+    visibility: hidden;
+  }
+
+  .sti-Image-img-fd3c0[hidden] {
+    display: none;
+  }
+
+  .sti-Image-error-90a4f {
+    place-content: center;
+    justify-items: center;
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    min-block-size: 8rem;
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-image-radius);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    text-align: center;
+    display: grid;
+  }
+
+  .sti-Image-root-9cd60[data-ratio] .sti-Image-error-90a4f {
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .sti-Image-errorIcon-18921 {
+    font-size: var(--sti-icon-lg);
+  }
+
+  .sti-Image-errorText-833fc {
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Image-img-fd3c0 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Image-error-90a4f {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,32 @@
+export type ImageRatio = "1/1" | "4/3" | "3/2" | "16/9" | "9/16" | "4/5" | "21/9";
+export interface ImageProps {
+  src: string;
+  /** Zorunlu alternatif metin; süs görselinde "". */
+  alt: string;
+  /** Doğal boyutlar: yer ayırır ve oranı belirler (sayfa kaymaz). */
+  width?: number;
+  height?: number;
+  /** Sabit oran; verilirse görsel kutuya `fit` ile yerleşir. */
+  ratio?: ImageRatio;
+  /** Oranlı kutuda yerleşim: `cover` (kırpar, varsayılan) ya da `contain` (sığdırır). */
+  fit?: "cover" | "contain";
+  /** Yüklenirken: `blur` (bulanık küçük görsel), `color` (sakin zemin, varsayılan), `none`. */
+  placeholder?: "blur" | "color" | "none";
+  /** `blur` için küçük görsel (ör. 16 piksellik `data:` adresi). */
+  blurSrc?: string;
+  /** Köşe yuvarlaklığı; varsayılan `md`. */
+  radius?: "none" | "sm" | "md" | "lg";
+  /** Sayfanın ilk görseli: hemen ve yüksek öncelikle yüklenir. */
+  priority?: boolean;
+  srcSet?: string;
+  sizes?: string;
+  onLoad?: () => void;
+  onError?: () => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Görsel: tembel yükleme, önceden ayrılan yer, bulanık ön izleme ya da sakin zemin, yüklenince
+ * yumuşak belirme ve yüklenemezse açıklayıcı kutu. Satır içi stil kullanmaz (CSP).
+ */
+export declare function Image({ src, alt, width, height, ratio, fit, placeholder, blurSrc, radius, priority, srcSet, sizes, onLoad, onError, className, id }: ImageProps): import("react").JSX.Element;