@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/components/NotificationCenter/NotificationCenter.js

@@ -0,0 +1,190 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { Button as Button$1 } from "../Button/Button.js";
+import { parseDateValue } from "../DateTime/instant.js";
+import { RelativeTime } from "../RelativeTime/RelativeTime.js";
+import { MailIcon } from "../../icons/generated/MailIcon.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { BellOffIcon } from "../../icons/generated/BellOffIcon.js";
+import { MailOpenIcon } from "../../icons/generated/MailOpenIcon.js";
+import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
+import NotificationCenter_module_default from "./NotificationCenter.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Button, Link } from "react-aria-components";
+// src/components/NotificationCenter/NotificationCenter.tsx
+const dayKey = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+/**
+* Bildirim merkezi (sayfa): başlık ve okunmamış sayısı, "Tümü / Okunmamış" süzgeci, "Tümünü okundu
+* işaretle", güne göre gruplar (Bugün, Dün, Daha önce), her bildirimde okundu/okunmadı düğmesi ve
+* altta "Daha fazla göster". Okunmamış bildirim turkuaz noktalı ve kalındır, "okunmamış" okunur.
+* Zildeki (NotificationBell) "Tüm bildirimler" buraya götürür.
+*/
+function NotificationCenter({ notifications, title, filter, defaultFilter = "all", onFilterChange, onMarkAllRead, onMarkRead, onNotificationOpen, hasMore = false, onLoadMore, isLoadingMore = false, now, level = 1, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const base = useId();
+	const [internal, setInternal] = useState(defaultFilter);
+	const current = filter ?? internal;
+	const unread = notifications.filter((n) => n.unread).length;
+	const shown = current === "unread" ? notifications.filter((n) => n.unread) : notifications;
+	const H = `h${level}`;
+	const Hg = `h${level + 1}`;
+	const today = new Date(now ?? Date.now());
+	const yesterday = new Date(today);
+	yesterday.setDate(today.getDate() - 1);
+	const groups = [
+		{
+			id: "today",
+			label: t.notificationCenterToday,
+			items: []
+		},
+		{
+			id: "yesterday",
+			label: t.notificationCenterYesterday,
+			items: []
+		},
+		{
+			id: "earlier",
+			label: t.notificationCenterEarlier,
+			items: []
+		}
+	];
+	for (const n of shown) {
+		const parsed = parseDateValue(n.time);
+		const date = parsed.kind === "instant" ? parsed.date : /* @__PURE__ */ new Date(`${parsed.day}T12:00:00`);
+		const key = dayKey(date);
+		(key === dayKey(today) ? groups[0] : key === dayKey(yesterday) ? groups[1] : groups[2])?.items.push(n);
+	}
+	const change = (next) => {
+		if (filter === void 0) setInternal(next);
+		onFilterChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-labelledby": `${base}-title`,
+		className: [NotificationCenter_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: NotificationCenter_module_default.head,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: NotificationCenter_module_default.titles,
+					children: [/* @__PURE__ */ jsx(H, {
+						id: `${base}-title`,
+						className: NotificationCenter_module_default.title,
+						children: title ?? t.notificationsLabel
+					}), /* @__PURE__ */ jsx("p", {
+						className: NotificationCenter_module_default.summary,
+						children: unread > 0 ? template(t.notificationsUnread, { count: f.number(unread) }) : ""
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: NotificationCenter_module_default.controls,
+					children: [/* @__PURE__ */ jsxs(SegmentedControl, {
+						label: t.notificationCenterFilter,
+						value: current,
+						onChange: (v) => change(v),
+						size: "sm",
+						children: [/* @__PURE__ */ jsx(SegmentedControlItem, {
+							value: "all",
+							children: t.notificationCenterAll
+						}), /* @__PURE__ */ jsx(SegmentedControlItem, {
+							value: "unread",
+							children: t.notificationCenterUnread
+						})]
+					}), onMarkAllRead ? /* @__PURE__ */ jsx(Button$1, {
+						size: "sm",
+						variant: "ghost",
+						isDisabled: unread === 0,
+						onPress: onMarkAllRead,
+						children: t.notificationsMarkAll
+					}) : null]
+				})]
+			}),
+			shown.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+				icon: /* @__PURE__ */ jsx(BellOffIcon, {}),
+				title: current === "unread" ? t.notificationCenterEmptyUnread : t.notificationsEmpty,
+				titleLevel: Math.min(level + 1, 6)
+			}) : groups.filter((g) => g.items.length > 0).map((g) => /* @__PURE__ */ jsxs("section", {
+				className: NotificationCenter_module_default.group,
+				"aria-labelledby": `${base}-${g.id}`,
+				children: [/* @__PURE__ */ jsx(Hg, {
+					id: `${base}-${g.id}`,
+					className: NotificationCenter_module_default.groupTitle,
+					children: g.label
+				}), /* @__PURE__ */ jsx("ul", {
+					className: NotificationCenter_module_default.list,
+					children: g.items.map((n) => {
+						const content = /* @__PURE__ */ jsxs(Fragment, { children: [n.icon ? /* @__PURE__ */ jsx("span", {
+							className: NotificationCenter_module_default.icon,
+							"aria-hidden": "true",
+							children: n.icon
+						}) : null, /* @__PURE__ */ jsxs("span", {
+							className: NotificationCenter_module_default.texts,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: NotificationCenter_module_default.itemTitle,
+									children: n.title
+								}),
+								n.unread ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${t.notificationUnread}` }) : null,
+								n.description ? /* @__PURE__ */ jsx("span", {
+									className: NotificationCenter_module_default.description,
+									children: n.description
+								}) : null,
+								/* @__PURE__ */ jsx(RelativeTime, {
+									value: n.time,
+									now,
+									className: NotificationCenter_module_default.time
+								})
+							]
+						})] });
+						return /* @__PURE__ */ jsxs("li", {
+							className: NotificationCenter_module_default.row,
+							"data-unread": n.unread || void 0,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: NotificationCenter_module_default.dot,
+									"aria-hidden": "true"
+								}),
+								n.href ? /* @__PURE__ */ jsx(Link, {
+									href: n.href,
+									className: NotificationCenter_module_default.item,
+									onPress: () => onNotificationOpen?.(n.id),
+									children: content
+								}) : onNotificationOpen ? /* @__PURE__ */ jsx(Button, {
+									className: NotificationCenter_module_default.item,
+									onPress: () => onNotificationOpen(n.id),
+									children: content
+								}) : /* @__PURE__ */ jsx("div", {
+									className: NotificationCenter_module_default.item,
+									"data-static": "",
+									children: content
+								}),
+								onMarkRead ? /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									variant: "ghost",
+									className: NotificationCenter_module_default.mark,
+									icon: n.unread ? /* @__PURE__ */ jsx(MailOpenIcon, {}) : /* @__PURE__ */ jsx(MailIcon, {}),
+									label: template(n.unread ? t.notificationCenterMarkRead : t.notificationCenterMarkUnread, { title: n.title }),
+									onPress: () => onMarkRead(n.id, Boolean(n.unread))
+								}) : null
+							]
+						}, n.id);
+					})
+				})]
+			}, g.id)),
+			hasMore && onLoadMore && shown.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: NotificationCenter_module_default.more,
+				children: /* @__PURE__ */ jsx(Button$1, {
+					variant: "secondary",
+					isPending: isLoadingMore,
+					onPress: onLoadMore,
+					children: t.notificationCenterLoadMore
+				})
+			}) : null
+		]
+	});
+}
+export { NotificationCenter };

package/dist/components/NotificationCenter/NotificationCenter.module.js

@@ -0,0 +1,24 @@
+import './NotificationCenter.css';
+// src/components/NotificationCenter/NotificationCenter.module.css
+var NotificationCenter_module_default = {
+	"root": "sti-NotificationCenter-root-42056",
+	"head": "sti-NotificationCenter-head-c8697",
+	"titles": "sti-NotificationCenter-titles-2bd4e",
+	"title": "sti-NotificationCenter-title-b7592",
+	"summary": "sti-NotificationCenter-summary-d53ae",
+	"controls": "sti-NotificationCenter-controls-7fcc4",
+	"group": "sti-NotificationCenter-group-5f2ec",
+	"groupTitle": "sti-NotificationCenter-groupTitle-a8e5f",
+	"list": "sti-NotificationCenter-list-4157e",
+	"row": "sti-NotificationCenter-row-29db8",
+	"dot": "sti-NotificationCenter-dot-acea5",
+	"item": "sti-NotificationCenter-item-6a82d",
+	"icon": "sti-NotificationCenter-icon-d6802",
+	"texts": "sti-NotificationCenter-texts-53f48",
+	"itemTitle": "sti-NotificationCenter-itemTitle-1f26f",
+	"description": "sti-NotificationCenter-description-c21ac",
+	"time": "sti-NotificationCenter-time-7ebd5",
+	"mark": "sti-NotificationCenter-mark-63743",
+	"more": "sti-NotificationCenter-more-78b2e"
+};
+export { NotificationCenter_module_default as default };

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

@@ -0,0 +1,2 @@
+import { NotificationCenter, NotificationCenterProps, NotificationFilter } from "./NotificationCenter.js";
+export { NotificationCenter, NotificationCenterProps, NotificationFilter };

package/dist/components/NumberField/NumberField.css

@@ -0,0 +1,45 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-NumberField-group-ebea4 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    cursor: text;
+    display: flex;
+  }
+
+  .sti-NumberField-group-ebea4[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .sti-NumberField-group-ebea4[data-readonly] {
+    background: var(--sti-bg-subtle);
+    border-style: dashed;
+  }
+
+  .sti-NumberField-input-c64bf {
+    min-width: 0;
+    height: 100%;
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    background: none;
+    border: 0;
+    outline: none;
+    flex: auto;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sti-NumberField-input-c64bf::placeholder {
+    color: var(--sti-fg-muted);
+    opacity: 1;
+  }
+
+  .sti-NumberField-stepper-94ba3 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    margin-inline-end: calc(var(--sti-space-2) * -1);
+    display: inline-flex;
+  }
+}

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,48 @@
+import { ErrorMessage } from "../Field/Field.js";
+import { ReactNode, Ref } from "react";
+export interface NumberFieldProps {
+  label: ReactNode;
+  description?: ReactNode;
+  errorMessage?: ErrorMessage;
+  showOptional?: boolean;
+  size?: "sm" | "md" | "lg";
+  value?: number;
+  defaultValue?: number;
+  /** Değer işlendiğinde (alandan çıkınca, Enter'da ya da düğmeyle); boş alan `NaN` verir. */
+  onChange?: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+  /**
+   * Adım (oklar ve düğmeler). Verilirse değer adıma yuvarlanır ve ondalık basamak buna göre
+   * sınırlanır; verilmezse oklar 1 artırır, ondalık serbesttir.
+   */
+  step?: number;
+  /** Büyük adım (PageUp/PageDown). Varsayılan adımın 10 katı. */
+  pageStep?: number;
+  /**
+   * Biçim (Intl.NumberFormat): para (`{ style: "currency", currency: "TRY" }`), yüzde, birim,
+   * ondalık basamak. Ayraçlar dile göredir (Türkçe: 1.250,50).
+   */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Artır/azalt düğmelerini gizler (oklar yine çalışır). */
+  hideStepper?: boolean;
+  /** Fare tekerleğiyle değiştirme. Varsayılan kapalı: sayfa kaydırılırken değer kazayla değişmez. */
+  isWheelDisabled?: boolean;
+  name?: string;
+  placeholder?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  validate?: (value: number) => string | string[] | true | null | undefined;
+  autoFocus?: boolean;
+  className?: string;
+  id?: string;
+  inputRef?: Ref<HTMLInputElement>;
+}
+/**
+ * Sayı alanı (APG spinbutton): dile göre ayraçlar, para/yüzde/birim biçimi, en az/en çok ve adım.
+ * Yazarken yalnız geçerli karakterler kabul edilir; değer alandan çıkınca sınırlara ve adıma
+ * yuvarlanır. Artır/azalt düğmeleri sekme sırasında değildir (oklar aynı işi yapar).
+ */
+export declare function NumberField({ label, description, errorMessage, showOptional, size, hideStepper, isWheelDisabled, placeholder, className, inputRef, value, defaultValue, onChange, step, pageStep, ...rest }: NumberFieldProps): import("react").JSX.Element;

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,89 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { FieldDescription, FieldErrorText, FieldLabel, fieldStyles } from "../Field/Field.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { MinusIcon } from "../../icons/generated/MinusIcon.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import NumberField_module_default from "./NumberField.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Group, I18nProvider, Input, NumberField } from "react-aria-components";
+// src/components/NumberField/NumberField.tsx
+/**
+* Sayı alanı (APG spinbutton): dile göre ayraçlar, para/yüzde/birim biçimi, en az/en çok ve adım.
+* Yazarken yalnız geçerli karakterler kabul edilir; değer alandan çıkınca sınırlara ve adıma
+* yuvarlanır. Artır/azalt düğmeleri sekme sırasında değildir (oklar aynı işi yapar).
+*/
+function NumberField$1({ label, description, errorMessage, showOptional, size = "md", hideStepper, isWheelDisabled = true, placeholder, className, inputRef, value, defaultValue, onChange, step, pageStep = (step ?? 1) * 10, ...rest }) {
+	const locale = useLocale();
+	const t = useMessages();
+	const [focusWithin, setFocusWithin] = useState(false);
+	const [inner, setInner] = useState(defaultValue ?? NaN);
+	const current = value ?? inner;
+	const change = (next) => {
+		if (value === void 0) setInner(next);
+		onChange?.(next);
+	};
+	const pageBy = (dir) => {
+		const { minValue = -Infinity, maxValue = Infinity } = rest;
+		const base = Number.isNaN(current) ? Number.isFinite(minValue) ? minValue : 0 : current;
+		const decimals = Math.max((String(pageStep).split(".")[1] ?? "").length, (String(base).split(".")[1] ?? "").length);
+		const next = Number((base + dir * pageStep).toFixed(decimals));
+		change(Math.min(maxValue, Math.max(minValue, next)));
+	};
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale,
+		children: /* @__PURE__ */ jsxs(NumberField, {
+			...rest,
+			value: current,
+			onChange: change,
+			step,
+			isWheelDisabled,
+			className: [fieldStyles.root, className].filter(Boolean).join(" "),
+			"data-size": size,
+			children: [
+				/* @__PURE__ */ jsx(FieldLabel, {
+					showOptional: showOptional && !rest.isRequired,
+					children: label
+				}),
+				/* @__PURE__ */ jsxs(Group, {
+					className: [fieldStyles.control, NumberField_module_default.group].join(" "),
+					isReadOnly: rest.isReadOnly,
+					"data-focused": focusWithin || void 0,
+					onFocus: () => setFocusWithin(true),
+					onKeyDownCapture: (e) => {
+						if (e.key !== "PageUp" && e.key !== "PageDown") return;
+						if (rest.isDisabled || rest.isReadOnly) return;
+						e.preventDefault();
+						e.stopPropagation();
+						pageBy(e.key === "PageUp" ? 1 : -1);
+					},
+					onBlur: (e) => {
+						if (!e.currentTarget.contains(e.relatedTarget)) setFocusWithin(false);
+					},
+					children: [/* @__PURE__ */ jsx(Input, {
+						ref: inputRef,
+						className: NumberField_module_default.input,
+						placeholder
+					}), hideStepper ? null : /* @__PURE__ */ jsxs("span", {
+						className: NumberField_module_default.stepper,
+						children: [/* @__PURE__ */ jsx(IconButton, {
+							slot: "decrement",
+							label: t.numberDecrement,
+							icon: /* @__PURE__ */ jsx(MinusIcon, {}),
+							size: "sm"
+						}), /* @__PURE__ */ jsx(IconButton, {
+							slot: "increment",
+							label: t.numberIncrement,
+							icon: /* @__PURE__ */ jsx(PlusIcon, {}),
+							size: "sm"
+						})]
+					})]
+				}),
+				description ? /* @__PURE__ */ jsx(FieldDescription, { children: description }) : null,
+				/* @__PURE__ */ jsx(FieldErrorText, { errorMessage })
+			]
+		})
+	});
+}
+export { NumberField$1 as NumberField };

package/dist/components/NumberField/NumberField.module.js

@@ -0,0 +1,8 @@
+import './NumberField.css';
+// src/components/NumberField/NumberField.module.css
+var NumberField_module_default = {
+	"group": "sti-NumberField-group-ebea4",
+	"input": "sti-NumberField-input-c64bf",
+	"stepper": "sti-NumberField-stepper-94ba3"
+};
+export { NumberField_module_default as default };

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

@@ -0,0 +1,2 @@
+import { NumberField, NumberFieldProps } from "./NumberField.js";
+export { NumberField, NumberFieldProps };

package/dist/components/OfflineIndicator/OfflineIndicator.css

@@ -0,0 +1,64 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-OfflineIndicator-root-8210e {
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    max-inline-size: min(28rem, calc(100% - var(--sti-space-8)));
+    padding: var(--sti-space-2) var(--sti-space-4);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-inverse);
+    box-shadow: var(--sti-shadow-lg);
+    color: var(--sti-fg-inverse);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    display: inline-flex;
+  }
+
+  .sti-OfflineIndicator-root-8210e[data-placement="floating"] {
+    z-index: var(--sti-z-toast);
+    max-inline-size: min(28rem, calc(100vw - var(--sti-space-8)));
+    animation: sti-OfflineIndicator-sti-offline-in-f39c2 var(--sti-duration-base) var(--sti-ease-out);
+    position: fixed;
+    inset-block-end: calc(var(--sti-space-4) + env(safe-area-inset-bottom, 0px));
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .sti-OfflineIndicator-root-8210e[data-placement="floating"]:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    transform: translateX(50%);
+  }
+
+  .sti-OfflineIndicator-icon-42fa9 {
+    block-size: var(--sti-line-height-sm);
+    font-size: var(--sti-icon-sm);
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-OfflineIndicator-text-ca68e {
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+  }
+
+  @keyframes sti-OfflineIndicator-sti-offline-in-f39c2 {
+    from {
+      opacity: 0;
+      translate: 0 var(--sti-space-2);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-OfflineIndicator-root-8210e[data-placement="floating"] {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-OfflineIndicator-root-8210e {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+  }
+}

package/dist/components/OfflineIndicator/OfflineIndicator.d.ts

@@ -0,0 +1,20 @@
+export interface OfflineIndicatorProps {
+  /** Bağlantı yokken metin; varsayılan "İnternet bağlantısı yok. Bağlantınızı denetleyin." */
+  offlineText?: string;
+  /** Bağlantı gelince metin; varsayılan "Bağlantı yeniden kuruldu." */
+  onlineText?: string;
+  /** Bağlantı gelince bildirimin ekranda kaldığı süre (ms). Varsayılan 3000. */
+  onlineDuration?: number;
+  /** `floating`: ekranın altında ortada (varsayılan); `inline`: sayfanın akışında. */
+  placement?: "floating" | "inline";
+  /** Bağlantı durumu değişince. */
+  onChange?: (online: boolean) => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Bağlantı göstergesi: tarayıcı çevrim dışı olunca ekranda kalıcı bir bildirim, bağlantı gelince
+ * kısa süreli "yeniden kuruldu" bildirimi. Durum ekran okuyucuya duyurulur (kopma hemen, geri
+ * gelme sırası gelince). Sunucuda ve bağlantı varken bir şey çizmez.
+ */
+export declare function OfflineIndicator({ offlineText, onlineText, onlineDuration, placement, onChange, className, id }: OfflineIndicatorProps): import("react").JSX.Element | null;

package/dist/components/OfflineIndicator/OfflineIndicator.js

@@ -0,0 +1,75 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { announce } from "../Alert/announcer.js";
+import { WifiIcon } from "../../icons/generated/WifiIcon.js";
+import { WifiOffIcon } from "../../icons/generated/WifiOffIcon.js";
+import OfflineIndicator_module_default from "./OfflineIndicator.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/components/OfflineIndicator/OfflineIndicator.tsx
+/**
+* Bağlantı göstergesi: tarayıcı çevrim dışı olunca ekranda kalıcı bir bildirim, bağlantı gelince
+* kısa süreli "yeniden kuruldu" bildirimi. Durum ekran okuyucuya duyurulur (kopma hemen, geri
+* gelme sırası gelince). Sunucuda ve bağlantı varken bir şey çizmez.
+*/
+function OfflineIndicator({ offlineText, onlineText, onlineDuration = 3e3, placement = "floating", onChange, className, id }) {
+	const t = useMessages();
+	const [state, setState] = useState("online");
+	const offline = offlineText ?? t.offlineMessage;
+	const online = onlineText ?? t.onlineMessage;
+	const latest = useRef({
+		offline,
+		online,
+		onChange
+	});
+	latest.current = {
+		offline,
+		online,
+		onChange
+	};
+	useEffect(() => {
+		let wasOffline = false;
+		const goOffline = () => {
+			wasOffline = true;
+			setState("offline");
+			announce(latest.current.offline, "assertive");
+			latest.current.onChange?.(false);
+		};
+		const goOnline = () => {
+			if (!wasOffline) return;
+			wasOffline = false;
+			setState("restored");
+			announce(latest.current.online, "polite");
+			latest.current.onChange?.(true);
+		};
+		if (!navigator.onLine) goOffline();
+		window.addEventListener("offline", goOffline);
+		window.addEventListener("online", goOnline);
+		return () => {
+			window.removeEventListener("offline", goOffline);
+			window.removeEventListener("online", goOnline);
+		};
+	}, []);
+	useEffect(() => {
+		if (state !== "restored") return;
+		const timer = window.setTimeout(() => setState("online"), onlineDuration);
+		return () => window.clearTimeout(timer);
+	}, [state, onlineDuration]);
+	if (state === "online") return null;
+	const isOffline = state === "offline";
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [OfflineIndicator_module_default.root, className].filter(Boolean).join(" "),
+		"data-placement": placement,
+		"data-state": state,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: OfflineIndicator_module_default.icon,
+			"aria-hidden": "true",
+			children: isOffline ? /* @__PURE__ */ jsx(WifiOffIcon, {}) : /* @__PURE__ */ jsx(WifiIcon, {})
+		}), /* @__PURE__ */ jsx("span", {
+			className: OfflineIndicator_module_default.text,
+			children: isOffline ? offline : online
+		})]
+	});
+}
+export { OfflineIndicator };

package/dist/components/OfflineIndicator/OfflineIndicator.module.js

@@ -0,0 +1,9 @@
+import './OfflineIndicator.css';
+// src/components/OfflineIndicator/OfflineIndicator.module.css
+var OfflineIndicator_module_default = {
+	"root": "sti-OfflineIndicator-root-8210e",
+	"sti-offline-in": "sti-OfflineIndicator-sti-offline-in-f39c2",
+	"icon": "sti-OfflineIndicator-icon-42fa9",
+	"text": "sti-OfflineIndicator-text-ca68e"
+};
+export { OfflineIndicator_module_default as default };