@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/RecurrencePicker/RecurrencePicker.d.ts

@@ -0,0 +1,28 @@
+import { UIMessages } from "../../messages/messages.js";
+import { Recurrence } from "./rrule.js";
+import { ReactNode } from "react";
+export interface RecurrencePickerProps {
+  /** Grup başlığı; verilmezse "Yineleme". */
+  legend?: ReactNode;
+  description?: ReactNode;
+  /** Kural (RRULE, "FREQ=WEEKLY;BYDAY=MO"); yinelenmiyorsa `null`. */
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (rule: string | null) => void;
+  /** İlk yinelemenin günü (ISO); haftalık, aylık ve yıllık varsayılanlar buna göre. Varsayılan bugün. */
+  startDate?: string;
+  /** Form alanı adı: kural gönderilir (yinelenmiyorsa boş). */
+  name?: string;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/** Kuralın dile göre okunur özeti ("2 haftada bir, pazartesi ve çarşamba, toplam 10 kez"). */
+export declare function describeRecurrence(rule: Recurrence, startDate: string, locale: string, t: UIMessages): string;
+/**
+ * Yineleme seçici: sıklık (yinelenmez, günlük, haftalık, aylık, yıllık), aralık ("kaç haftada
+ * bir"), haftalık günler, aylık gün ya da haftanın günü, bitiş (bitmez, tarihte, belirli sayıda).
+ * Altında okunur özet canlı olarak güncellenir. Değer takvim uygulamalarıyla aynı RRULE kuralıdır
+ * ("FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE").
+ */
+export declare function RecurrencePicker({ legend, description, value, defaultValue, onChange, startDate, name, isDisabled, className, id }: RecurrencePickerProps): import("react").JSX.Element;

package/dist/components/RecurrencePicker/RecurrencePicker.js

@@ -0,0 +1,293 @@
+"use client";
+import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Fieldset } from "../Fieldset/Fieldset.js";
+import { todayIn } from "../_internal/date/iso.js";
+import { Select } from "../Select/Select.js";
+import { NumberField } from "../NumberField/NumberField.js";
+import { DatePicker } from "../DatePicker/DatePicker.js";
+import { Radio, RadioGroup } from "../RadioGroup/RadioGroup.js";
+import { ToggleGroup, ToggleGroupItem } from "../ToggleGroup/ToggleGroup.js";
+import RecurrencePicker_module_default from "./RecurrencePicker.module.js";
+import { RRULE_DAYS, formatRRule, nthWeekdayOf, parseRRule, weekdayOf } from "./rrule.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+// src/components/RecurrencePicker/RecurrencePicker.tsx
+/** Pazartesi 2024-01-01: gün adları dile göre buradan üretilir. */
+const MONDAY = Date.UTC(2024, 0, 1);
+function dayNames(locale, style) {
+	const fmt = new Intl.DateTimeFormat(locale, {
+		weekday: style,
+		timeZone: "UTC"
+	});
+	return Object.fromEntries(RRULE_DAYS.map((d, i) => [d, fmt.format(new Date(MONDAY + i * 864e5))]));
+}
+const lower = (s, locale) => locale.startsWith("tr") ? s.toLocaleLowerCase(locale) : s;
+const upperFirst = (s, locale) => s.charAt(0).toLocaleUpperCase(locale) + s.slice(1);
+/** Kuralın dile göre okunur özeti ("2 haftada bir, pazartesi ve çarşamba, toplam 10 kez"). */
+function describeRecurrence(rule, startDate, locale, t) {
+	const n = rule.interval;
+	const parts = [{
+		DAILY: n > 1 ? template(t.recurrenceEveryNDays, { n }) : t.recurrenceEveryDay,
+		WEEKLY: n > 1 ? template(t.recurrenceEveryNWeeks, { n }) : t.recurrenceEveryWeek,
+		MONTHLY: n > 1 ? template(t.recurrenceEveryNMonths, { n }) : t.recurrenceEveryMonth,
+		YEARLY: n > 1 ? template(t.recurrenceEveryNYears, { n }) : t.recurrenceEveryYear
+	}[rule.freq]];
+	const names = dayNames(locale, "long");
+	const list = new Intl.ListFormat(locale, { type: "conjunction" });
+	if (rule.freq === "WEEKLY" && rule.byDay?.length) parts.push(list.format(RRULE_DAYS.filter((d) => rule.byDay?.includes(d)).map((d) => lower(names[d], locale))));
+	if (rule.freq === "MONTHLY") {
+		if (rule.bySetPos) {
+			const weekday = lower(names[rule.bySetPos.day], locale);
+			parts.push(rule.bySetPos.n === -1 ? template(t.recurrenceOnLastWeekday, { weekday }) : template(t.recurrenceOnNthWeekday, {
+				n: rule.bySetPos.n,
+				weekday
+			}));
+		} else parts.push(template(t.recurrenceOnMonthDay, { day: rule.byMonthDay ?? Number(startDate.slice(8, 10)) }));
+	}
+	if (rule.freq === "YEARLY") {
+		const month = rule.byMonth ?? Number(startDate.slice(5, 7));
+		const day = rule.byMonthDay ?? Number(startDate.slice(8, 10));
+		parts.push(new Intl.DateTimeFormat(locale, {
+			day: "numeric",
+			month: "long",
+			timeZone: "UTC"
+		}).format(new Date(Date.UTC(2024, month - 1, day))));
+	}
+	if (rule.count) parts.push(template(t.recurrenceCount, { count: rule.count }));
+	else if (rule.until) {
+		const date = new Intl.DateTimeFormat(locale, {
+			dateStyle: "long",
+			timeZone: "UTC"
+		}).format(/* @__PURE__ */ new Date(`${rule.until}T00:00:00Z`));
+		parts.push(template(t.recurrenceUntil, { date }));
+	}
+	return parts.join(", ");
+}
+const endsOf = (r) => r.count ? "after" : r.until ? "on" : "never";
+/**
+* Yineleme seçici: sıklık (yinelenmez, günlük, haftalık, aylık, yıllık), aralık ("kaç haftada
+* bir"), haftalık günler, aylık gün ya da haftanın günü, bitiş (bitmez, tarihte, belirli sayıda).
+* Altında okunur özet canlı olarak güncellenir. Değer takvim uygulamalarıyla aynı RRULE kuralıdır
+* ("FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE").
+*/
+function RecurrencePicker({ legend, description, value, defaultValue, onChange, startDate, name, isDisabled, className, id }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const daysId = `${useId()}-days`;
+	const timeZone = useFormatter().context.timeZone;
+	const start = startDate ?? todayIn(timeZone).toString();
+	const [inner, setInner] = useState(defaultValue ?? null);
+	const ruleText = value === void 0 ? inner : value;
+	const rule = parseRRule(ruleText);
+	const short = useMemo(() => dayNames(locale, "short"), [locale]);
+	const long = useMemo(() => dayNames(locale, "long"), [locale]);
+	const startDay = weekdayOf(start);
+	const nth = nthWeekdayOf(start);
+	const commit = (next) => {
+		const text = next ? formatRRule(next) : null;
+		if (value === void 0) setInner(text);
+		onChange?.(text);
+	};
+	const patch = (p) => rule && commit({
+		...rule,
+		...p
+	});
+	const changeFreq = (freq) => {
+		if (!freq || freq === "NONE") return commit(null);
+		const base = {
+			freq,
+			interval: 1,
+			until: rule?.until,
+			count: rule?.count
+		};
+		if (freq === "WEEKLY") base.byDay = [startDay];
+		if (freq === "MONTHLY") base.byMonthDay = Number(start.slice(8, 10));
+		if (freq === "YEARLY") {
+			base.byMonth = Number(start.slice(5, 7));
+			base.byMonthDay = Number(start.slice(8, 10));
+		}
+		commit(base);
+	};
+	const intervalLabel = {
+		DAILY: t.recurrenceIntervalDaily,
+		WEEKLY: t.recurrenceIntervalWeekly,
+		MONTHLY: t.recurrenceIntervalMonthly,
+		YEARLY: t.recurrenceIntervalYearly
+	};
+	const monthlyByDate = template(t.recurrenceOnMonthDay, { day: Number(start.slice(8, 10)) });
+	const nthKey = nth.isLast && nth.n >= 4 ? "last" : "nth";
+	const monthlyByWeekday = nthKey === "last" ? template(t.recurrenceOnLastWeekday, { weekday: lower(long[startDay], locale) }) : template(t.recurrenceOnNthWeekday, {
+		n: nth.n,
+		weekday: lower(long[startDay], locale)
+	});
+	return /* @__PURE__ */ jsxs(Fieldset, {
+		legend: legend ?? t.recurrenceLabel,
+		description,
+		isDisabled,
+		className: [RecurrencePicker_module_default.root, className].filter(Boolean).join(" "),
+		id,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: RecurrencePicker_module_default.row,
+				children: [/* @__PURE__ */ jsx(Select, {
+					label: t.recurrenceFrequency,
+					value: rule?.freq ?? "NONE",
+					onChange: changeFreq,
+					isDisabled,
+					items: [
+						{
+							id: "NONE",
+							label: t.recurrenceNone
+						},
+						{
+							id: "DAILY",
+							label: t.recurrenceDaily
+						},
+						{
+							id: "WEEKLY",
+							label: t.recurrenceWeekly
+						},
+						{
+							id: "MONTHLY",
+							label: t.recurrenceMonthly
+						},
+						{
+							id: "YEARLY",
+							label: t.recurrenceYearly
+						}
+					]
+				}), rule ? /* @__PURE__ */ jsx(NumberField, {
+					label: intervalLabel[rule.freq],
+					value: rule.interval,
+					minValue: 1,
+					maxValue: 999,
+					step: 1,
+					isDisabled,
+					onChange: (n) => {
+						if (Number.isInteger(n) && n >= 1) patch({ interval: n });
+					}
+				}) : null]
+			}),
+			rule?.freq === "WEEKLY" ? /* @__PURE__ */ jsxs("div", {
+				className: RecurrencePicker_module_default.block,
+				children: [/* @__PURE__ */ jsx("span", {
+					id: daysId,
+					className: RecurrencePicker_module_default.subLabel,
+					children: t.recurrenceDays
+				}), /* @__PURE__ */ jsx(ToggleGroup, {
+					"aria-labelledby": daysId,
+					selectionMode: "multiple",
+					variant: "ghost",
+					size: "sm",
+					isDisabled,
+					value: rule.byDay ?? [],
+					onChange: (days) => patch({ byDay: days.length ? days : [startDay] }),
+					children: RRULE_DAYS.map((d) => /* @__PURE__ */ jsxs(ToggleGroupItem, {
+						value: d,
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: short[d]
+						}), /* @__PURE__ */ jsx("span", {
+							className: RecurrencePicker_module_default.hidden,
+							children: long[d]
+						})]
+					}, d))
+				})]
+			}) : null,
+			rule?.freq === "MONTHLY" ? /* @__PURE__ */ jsxs(RadioGroup, {
+				label: t.recurrenceMonthlyBy,
+				value: rule.bySetPos ? "weekday" : "date",
+				isDisabled,
+				onChange: (v) => v === "weekday" ? patch({
+					byMonthDay: void 0,
+					bySetPos: {
+						n: nthKey === "last" ? -1 : nth.n,
+						day: startDay
+					}
+				}) : patch({
+					bySetPos: void 0,
+					byMonthDay: Number(start.slice(8, 10))
+				}),
+				children: [/* @__PURE__ */ jsx(Radio, {
+					value: "date",
+					children: upperFirst(monthlyByDate, locale)
+				}), /* @__PURE__ */ jsx(Radio, {
+					value: "weekday",
+					children: upperFirst(monthlyByWeekday, locale)
+				})]
+			}) : null,
+			rule ? /* @__PURE__ */ jsxs("div", {
+				className: RecurrencePicker_module_default.block,
+				children: [
+					/* @__PURE__ */ jsxs(RadioGroup, {
+						label: t.recurrenceEnds,
+						value: endsOf(rule),
+						isDisabled,
+						onChange: (v) => {
+							if (v === "never") patch({
+								until: void 0,
+								count: void 0
+							});
+							if (v === "on") patch({
+								count: void 0,
+								until: rule.until ?? `${Number(start.slice(0, 4)) + 1}${start.slice(4)}`
+							});
+							if (v === "after") patch({
+								until: void 0,
+								count: rule.count ?? 10
+							});
+						},
+						children: [
+							/* @__PURE__ */ jsx(Radio, {
+								value: "never",
+								children: t.recurrenceEndNever
+							}),
+							/* @__PURE__ */ jsx(Radio, {
+								value: "on",
+								children: t.recurrenceEndOn
+							}),
+							/* @__PURE__ */ jsx(Radio, {
+								value: "after",
+								children: t.recurrenceEndAfter
+							})
+						]
+					}),
+					endsOf(rule) === "on" ? /* @__PURE__ */ jsx(DatePicker, {
+						label: t.recurrenceEndDate,
+						value: rule.until ?? null,
+						minValue: start,
+						isDisabled,
+						onChange: (d) => {
+							if (d) patch({ until: d });
+						}
+					}) : null,
+					endsOf(rule) === "after" ? /* @__PURE__ */ jsx(NumberField, {
+						label: t.recurrenceEndCount,
+						value: rule.count ?? 10,
+						minValue: 1,
+						maxValue: 9999,
+						isDisabled,
+						onChange: (n) => {
+							if (Number.isInteger(n) && n >= 1) patch({ count: n });
+						}
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ jsxs("p", {
+				className: RecurrencePicker_module_default.summary,
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: RecurrencePicker_module_default.summaryLabel,
+					children: [t.recurrenceSummary, ": "]
+				}), rule ? describeRecurrence(rule, start, locale, t) : t.recurrenceNone]
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: ruleText ?? ""
+			}) : null
+		]
+	});
+}
+export { RecurrencePicker, describeRecurrence };

package/dist/components/RecurrencePicker/RecurrencePicker.module.js

@@ -0,0 +1,12 @@
+import './RecurrencePicker.css';
+// src/components/RecurrencePicker/RecurrencePicker.module.css
+var RecurrencePicker_module_default = {
+	"root": "sti-RecurrencePicker-root-d91aa",
+	"row": "sti-RecurrencePicker-row-31362",
+	"block": "sti-RecurrencePicker-block-315d4",
+	"subLabel": "sti-RecurrencePicker-subLabel-d810b",
+	"hidden": "sti-RecurrencePicker-hidden-aaa15",
+	"summary": "sti-RecurrencePicker-summary-cfc60",
+	"summaryLabel": "sti-RecurrencePicker-summaryLabel-64193"
+};
+export { RecurrencePicker_module_default as default };

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

@@ -0,0 +1,3 @@
+import { Frequency, RRULE_DAYS, RRuleDay, Recurrence, formatRRule, nthWeekdayOf, parseRRule, weekdayOf } from "./rrule.js";
+import { RecurrencePicker, RecurrencePickerProps, describeRecurrence } from "./RecurrencePicker.js";
+export { Frequency, RRULE_DAYS, RRuleDay, Recurrence, RecurrencePicker, RecurrencePickerProps, describeRecurrence, formatRRule, nthWeekdayOf, parseRRule, weekdayOf };

package/dist/components/RecurrencePicker/rrule.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Yineleme kuralı (RFC 5545 RRULE alt kümesi): FREQ (DAILY, WEEKLY, MONTHLY, YEARLY), INTERVAL,
+ * BYDAY (haftalık günler; aylıkta "2TU", "-1FR"), BYMONTHDAY, BYMONTH, COUNT, UNTIL (gün). Takvim
+ * uygulamalarıyla (iCalendar) aynı yazımdır; sunucu aynı kuralı yorumlar. Saf işlevler.
+ */
+export type Frequency = "DAILY" | "WEEKLY" | "MONTHLY" | "YEARLY";
+export declare const RRULE_DAYS: readonly ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
+export type RRuleDay = (typeof RRULE_DAYS)[number];
+export interface Recurrence {
+  freq: Frequency;
+  interval: number;
+  /** Haftalık günler. */
+  byDay?: RRuleDay[];
+  /** Aylık: ayın günü (1–31). */
+  byMonthDay?: number;
+  /** Aylık: ayın n. haftanın günü (1–4, son için -1). */
+  bySetPos?: {
+    n: number;
+    day: RRuleDay;
+  };
+  /** Yıllık: ay (1–12) ve gün. */
+  byMonth?: number;
+  /** Bitiş: tarih (ISO gün) ya da tekrar sayısı; ikisi birden olmaz. */
+  until?: string;
+  count?: number;
+}
+/** Kuralı yazar: "FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE;UNTIL=20261231". */
+export declare function formatRRule(r: Recurrence): string;
+/** Kuralı okur ("RRULE:" öneki kabul edilir); desteklenmeyen ya da bozuk kural `null`. */
+export declare function parseRRule(text: string | null | undefined): Recurrence | null;
+/** ISO günün RRULE günü ("2026-11-10" → "TU"). */
+export declare function weekdayOf(iso: string): RRuleDay;
+/** Günün ayın kaçıncı haftanın günü olduğu (1–5) ve ayın son o günü olup olmadığı. */
+export declare function nthWeekdayOf(iso: string): {
+  n: number;
+  isLast: boolean;
+};

package/dist/components/RecurrencePicker/rrule.js

@@ -0,0 +1,104 @@
+// src/components/RecurrencePicker/rrule.ts
+const RRULE_DAYS = [
+	"MO",
+	"TU",
+	"WE",
+	"TH",
+	"FR",
+	"SA",
+	"SU"
+];
+const FREQS = [
+	"DAILY",
+	"WEEKLY",
+	"MONTHLY",
+	"YEARLY"
+];
+/** Kuralı yazar: "FREQ=WEEKLY;INTERVAL=2;BYDAY=MO,WE;UNTIL=20261231". */
+function formatRRule(r) {
+	const parts = [`FREQ=${r.freq}`];
+	if (r.interval > 1) parts.push(`INTERVAL=${r.interval}`);
+	if (r.freq === "WEEKLY" && r.byDay?.length) {
+		const days = RRULE_DAYS.filter((d) => r.byDay?.includes(d));
+		parts.push(`BYDAY=${days.join(",")}`);
+	}
+	if (r.freq === "MONTHLY" && r.bySetPos) parts.push(`BYDAY=${r.bySetPos.n}${r.bySetPos.day}`);
+	else if ((r.freq === "MONTHLY" || r.freq === "YEARLY") && r.byMonthDay) parts.push(`BYMONTHDAY=${r.byMonthDay}`);
+	if (r.freq === "YEARLY" && r.byMonth) parts.push(`BYMONTH=${r.byMonth}`);
+	if (r.count) parts.push(`COUNT=${r.count}`);
+	else if (r.until) parts.push(`UNTIL=${r.until.replaceAll("-", "")}`);
+	return parts.join(";");
+}
+/** Kuralı okur ("RRULE:" öneki kabul edilir); desteklenmeyen ya da bozuk kural `null`. */
+function parseRRule(text) {
+	if (!text) return null;
+	const body = text.trim().replace(/^RRULE:/i, "");
+	const map = /* @__PURE__ */ new Map();
+	for (const part of body.split(";")) {
+		const [k, v] = part.split("=");
+		if (!k || v === void 0) return null;
+		map.set(k.toUpperCase(), v.toUpperCase());
+	}
+	const freq = map.get("FREQ");
+	if (!freq || !FREQS.includes(freq)) return null;
+	const interval = Number(map.get("INTERVAL") ?? 1);
+	if (!Number.isInteger(interval) || interval < 1 || interval > 999) return null;
+	const r = {
+		freq,
+		interval
+	};
+	const byDay = map.get("BYDAY");
+	if (byDay) {
+		const nth = /^(-1|[1-4])(MO|TU|WE|TH|FR|SA|SU)$/.exec(byDay);
+		if (freq === "MONTHLY" && nth) r.bySetPos = {
+			n: Number(nth[1]),
+			day: nth[2]
+		};
+		else {
+			const days = byDay.split(",");
+			if (!days.every((d) => RRULE_DAYS.includes(d))) return null;
+			r.byDay = days;
+		}
+	}
+	const md = map.get("BYMONTHDAY");
+	if (md) {
+		const n = Number(md);
+		if (!Number.isInteger(n) || n < 1 || n > 31) return null;
+		r.byMonthDay = n;
+	}
+	const month = map.get("BYMONTH");
+	if (month) {
+		const n = Number(month);
+		if (!Number.isInteger(n) || n < 1 || n > 12) return null;
+		r.byMonth = n;
+	}
+	const count = map.get("COUNT");
+	if (count) {
+		const n = Number(count);
+		if (!Number.isInteger(n) || n < 1 || n > 9999) return null;
+		r.count = n;
+	}
+	const until = map.get("UNTIL");
+	if (until) {
+		const m = /^(\d{4})(\d{2})(\d{2})/.exec(until);
+		if (!m) return null;
+		r.until = `${m[1]}-${m[2]}-${m[3]}`;
+	}
+	return r;
+}
+/** ISO günün RRULE günü ("2026-11-10" → "TU"). */
+function weekdayOf(iso) {
+	const d = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
+	return RRULE_DAYS[(d.getUTCDay() + 6) % 7];
+}
+/** Günün ayın kaçıncı haftanın günü olduğu (1–5) ve ayın son o günü olup olmadığı. */
+function nthWeekdayOf(iso) {
+	const d = /* @__PURE__ */ new Date(`${iso}T00:00:00Z`);
+	const day = d.getUTCDate();
+	const daysInMonth = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 0)).getUTCDate();
+	return {
+		n: Math.ceil(day / 7),
+		isLast: day + 7 > daysInMonth
+	};
+}
+export { RRULE_DAYS, formatRRule, nthWeekdayOf, parseRRule, weekdayOf };

package/dist/components/RelativeTime/RelativeTime.css

@@ -0,0 +1,8 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-RelativeTime-root-3b0eb {
+    --sti-relative-time-font: var(--sti-font-numeric);
+    font-family: var(--sti-relative-time-font);
+    font-variant-numeric: tabular-nums;
+  }
+}

package/dist/components/RelativeTime/RelativeTime.d.ts

@@ -0,0 +1,24 @@
+import { Locale } from "../../provider/locale.js";
+import { DateValue } from "../DateTime/instant.js";
+export interface RelativeTimeProps {
+  /** An: `Date`, Unix milisaniyesi ya da saat dilimi farkıyla ISO 8601 metni. */
+  value: DateValue;
+  /**
+   * Sunucunun isteği işlediği an. Sunucuda çizilen sayfada verilmelidir: sunucu ve tarayıcı ilk
+   * çizimde aynı metni üretir (hydration uyumu). Sayfa açıldıktan sonra bileşen tarayıcının
+   * saatiyle kendini günceller.
+   */
+  now?: Date | number;
+  /** Dil; verilmezse sağlayıcının dili (`UIProvider`). */
+  locale?: Locale;
+  className?: string;
+  id?: string;
+}
+/**
+ * Göreli zaman: "şimdi", "3 dakika önce", "dün", "2 gün sonra". `<time dateTime="…">` içinde
+ * yazılır; makine değeri tam andır. İstemci bileşenidir: metin, uygun aralıkla kendini günceller
+ * (bkz. `refreshDelay`); sekme arka plandan öne gelince hemen tazelenir. Güncellemeler ekran
+ * okuyucuya duyurulmaz (her dakika okunan metin dikkat dağıtır); okuyucu metne geldiğinde güncel
+ * hâlini okur.
+ */
+export declare function RelativeTime({ value, now, locale, className, id }: RelativeTimeProps): import("react").JSX.Element;

package/dist/components/RelativeTime/RelativeTime.js

@@ -0,0 +1,69 @@
+"use client";
+import { formatRelativeTime } from "../../format/dates.js";
+import { useFormatter } from "../../provider/UIProvider.js";
+import { parseInstant } from "../DateTime/instant.js";
+import RelativeTime_module_default from "./RelativeTime.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useEffect, useState } from "react";
+// src/components/RelativeTime/RelativeTime.tsx
+const SECOND = 1e3;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+/**
+* Bir sonraki güncellemeye kalan süre (milisaniye): metnin değişebileceği en kısa aralığa göre.
+* - 1 dakikanın altı ("şimdi", "50 saniye önce"): 10 saniyede bir;
+* - 1 saatin altı ("3 dakika önce"): dakikada bir;
+* - 1 günün altı ("2 saat önce"): 5 dakikada bir (saat yarım saatte yuvarlanır, gecikme en çok 5 dk);
+* - daha uzun ("dün", "3 gün önce"): saatte bir.
+*/
+function refreshDelay(differenceMs) {
+	const d = Math.abs(differenceMs);
+	if (d < MINUTE) return 10 * SECOND;
+	if (d < HOUR) return MINUTE;
+	if (d < DAY) return 5 * MINUTE;
+	return HOUR;
+}
+const toMs = (v) => v instanceof Date ? v.getTime() : v;
+/**
+* Göreli zaman: "şimdi", "3 dakika önce", "dün", "2 gün sonra". `<time dateTime="…">` içinde
+* yazılır; makine değeri tam andır. İstemci bileşenidir: metin, uygun aralıkla kendini günceller
+* (bkz. `refreshDelay`); sekme arka plandan öne gelince hemen tazelenir. Güncellemeler ekran
+* okuyucuya duyurulmaz (her dakika okunan metin dikkat dağıtır); okuyucu metne geldiğinde güncel
+* hâlini okur.
+*/
+function RelativeTime({ value, now, locale, className, id }) {
+	const formatter = useFormatter();
+	const date = parseInstant(value);
+	const time = date.getTime();
+	const [clock, setClock] = useState(() => now === void 0 ? Date.now() : toMs(now));
+	const [live, setLive] = useState(false);
+	useEffect(() => {
+		let timer;
+		const tick = () => {
+			const current = Date.now();
+			setClock(current);
+			setLive(true);
+			clearTimeout(timer);
+			timer = setTimeout(tick, refreshDelay(time - current));
+		};
+		tick();
+		const onVisible = () => {
+			if (document.visibilityState === "visible") tick();
+		};
+		document.addEventListener("visibilitychange", onVisible);
+		return () => {
+			clearTimeout(timer);
+			document.removeEventListener("visibilitychange", onVisible);
+		};
+	}, [time]);
+	const text = locale ? formatRelativeTime(date, clock, { locale }) : formatter.relative(date, clock);
+	return /* @__PURE__ */ jsx("time", {
+		id,
+		className: [RelativeTime_module_default.root, className].filter(Boolean).join(" "),
+		dateTime: date.toISOString(),
+		suppressHydrationWarning: now === void 0,
+		children: /* @__PURE__ */ jsx(Fragment$1, { children: text }, live ? "live" : "initial")
+	});
+}
+export { RelativeTime, refreshDelay };

package/dist/components/RelativeTime/RelativeTime.module.js

@@ -0,0 +1,4 @@
+import './RelativeTime.css';
+// src/components/RelativeTime/RelativeTime.module.css
+var RelativeTime_module_default = { "root": "sti-RelativeTime-root-3b0eb" };
+export { RelativeTime_module_default as default };