@stisocial/ui 0.1.0 → 0.2.0

package/dist/components/ErrorPage/ErrorPage.js

@@ -0,0 +1,145 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { Button } from "../Button/Button.js";
+import { ArrowLeftIcon } from "../../icons/generated/ArrowLeftIcon.js";
+import { ClockIcon } from "../../icons/generated/ClockIcon.js";
+import { parseInstant } from "../DateTime/instant.js";
+import { SearchIcon } from "../../icons/generated/SearchIcon.js";
+import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
+import { HomeIcon } from "../../icons/generated/HomeIcon.js";
+import { LockIcon } from "../../icons/generated/LockIcon.js";
+import { SettingsIcon } from "../../icons/generated/SettingsIcon.js";
+import ErrorPage_module_default from "./ErrorPage.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/ErrorPage/ErrorPage.tsx
+const KINDS = {
+	notFound: {
+		code: "404",
+		tone: "accent",
+		icon: /* @__PURE__ */ jsx(SearchIcon, {})
+	},
+	forbidden: {
+		code: "403",
+		tone: "warning",
+		icon: /* @__PURE__ */ jsx(LockIcon, {})
+	},
+	serverError: {
+		code: "500",
+		tone: "danger",
+		icon: /* @__PURE__ */ jsx(AlertCircleIcon, {})
+	},
+	maintenance: {
+		code: "503",
+		tone: "info",
+		icon: /* @__PURE__ */ jsx(SettingsIcon, {})
+	}
+};
+/**
+* Hata sayfası: 404 (bulunamadı), 403 (yetki yok), 500 (beklenmeyen sorun) ve bakım (503).
+* Durum kodu, başlık (sayfanın `h1`'i), ne olduğu ve sonraki adım; ana sayfa, yeniden deneme ve
+* önceki sayfa eylemleri. Teknik ayrıntı (yığın izi, sorgu, sunucu adı) hiçbir türde gösterilmez;
+* yalnız destek için başvuru kodu yazılır. Uygulama bunu sayfa içeriği olarak (`main` içinde) çizer.
+*/
+function ErrorPage({ kind, title, description, homeHref, onRetry, isRetrying, showBack = false, until, statusHref, reference, primaryAction, secondaryAction, children, isFullPage = true, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const meta = KINDS[kind];
+	const texts = {
+		notFound: [t.pageNotFoundTitle, t.pageNotFoundDescription],
+		forbidden: [t.pageForbiddenTitle, t.pageForbiddenDescription],
+		serverError: [t.pageServerTitle, t.pageServerDescription],
+		maintenance: [t.pageMaintenanceTitle, t.pageMaintenanceDescription]
+	}[kind];
+	const untilText = kind === "maintenance" && until !== void 0 ? template(t.pageMaintenanceUntil, { time: f.dateTime(parseInstant(until)) }) : null;
+	const retry = onRetry ? /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		onPress: onRetry,
+		isPending: isRetrying,
+		iconStart: /* @__PURE__ */ jsx(RefreshIcon, {}),
+		children: t.pageRetry
+	}) : null;
+	const home = homeHref ? /* @__PURE__ */ jsx(Button, {
+		href: homeHref,
+		variant: retry ? "secondary" : "primary",
+		iconStart: /* @__PURE__ */ jsx(HomeIcon, {}),
+		children: t.pageHome
+	}) : null;
+	const back = showBack ? /* @__PURE__ */ jsx(Button, {
+		variant: retry || home ? "ghost" : "secondary",
+		iconStart: /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+		onPress: () => window.history.back(),
+		children: t.pageBack
+	}) : null;
+	const status = statusHref ? /* @__PURE__ */ jsx(Button, {
+		href: statusHref,
+		variant: "ghost",
+		children: t.pageStatus
+	}) : null;
+	const hasActions = primaryAction || secondaryAction || retry || home || back || status;
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: [ErrorPage_module_default.root, className].filter(Boolean).join(" "),
+		"data-kind": kind,
+		"data-tone": meta.tone,
+		"data-full-page": isFullPage ? "" : void 0,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: ErrorPage_module_default.inner,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: ErrorPage_module_default.icon,
+					"aria-hidden": "true",
+					children: meta.icon
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: ErrorPage_module_default.code,
+					children: [/* @__PURE__ */ jsx(VisuallyHidden, { children: template(t.pageCode, { code: meta.code }) }), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: meta.code
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: ErrorPage_module_default.text,
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: ErrorPage_module_default.title,
+						children: title ?? texts[0]
+					}), /* @__PURE__ */ jsx("p", {
+						className: ErrorPage_module_default.description,
+						children: description ?? texts[1]
+					})]
+				}),
+				untilText ? /* @__PURE__ */ jsxs("p", {
+					className: ErrorPage_module_default.until,
+					children: [/* @__PURE__ */ jsx(ClockIcon, {}), untilText]
+				}) : null,
+				hasActions ? /* @__PURE__ */ jsxs("div", {
+					className: ErrorPage_module_default.actions,
+					children: [
+						primaryAction ?? retry ?? home,
+						secondaryAction ?? (retry ? home : null),
+						back,
+						status
+					]
+				}) : null,
+				reference ? /* @__PURE__ */ jsxs("p", {
+					className: ErrorPage_module_default.reference,
+					children: [
+						t.pageReference,
+						": ",
+						/* @__PURE__ */ jsx("code", {
+							className: ErrorPage_module_default.referenceCode,
+							children: reference
+						})
+					]
+				}) : null,
+				children ? /* @__PURE__ */ jsx("div", {
+					className: ErrorPage_module_default.extra,
+					children
+				}) : null
+			]
+		})
+	});
+}
+export { ErrorPage };

package/dist/components/ErrorPage/ErrorPage.module.js

@@ -0,0 +1,17 @@
+import './ErrorPage.css';
+// src/components/ErrorPage/ErrorPage.module.css
+var ErrorPage_module_default = {
+	"root": "sti-ErrorPage-root-ae1e9",
+	"inner": "sti-ErrorPage-inner-c7c13",
+	"icon": "sti-ErrorPage-icon-06390",
+	"code": "sti-ErrorPage-code-0a77d",
+	"text": "sti-ErrorPage-text-2658f",
+	"title": "sti-ErrorPage-title-f8d39",
+	"description": "sti-ErrorPage-description-896db",
+	"until": "sti-ErrorPage-until-c800b",
+	"actions": "sti-ErrorPage-actions-61022",
+	"reference": "sti-ErrorPage-reference-397f7",
+	"referenceCode": "sti-ErrorPage-referenceCode-ddf60",
+	"extra": "sti-ErrorPage-extra-aac29"
+};
+export { ErrorPage_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ErrorPage, ErrorPageKind, ErrorPageProps } from "./ErrorPage.js";
+export { ErrorPage, ErrorPageKind, ErrorPageProps };

package/dist/components/FeedbackWidget/FeedbackWidget.css

@@ -0,0 +1,59 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FeedbackWidget-form-1ad48 {
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-FeedbackWidget-intro-072bf {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-FeedbackWidget-thanks-8e3a2 {
+    justify-items: center;
+    gap: var(--sti-space-2);
+    padding-block: var(--sti-space-4);
+    text-align: center;
+    display: grid;
+  }
+
+  .sti-FeedbackWidget-thanksIcon-c40a4 {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-success-subtle);
+    box-shadow: 0 0 0 var(--sti-space-2)
+      color-mix(in oklab, var(--sti-bg-success-subtle) 50%, transparent);
+    color: var(--sti-fg-success);
+    font-size: var(--sti-icon-lg);
+    place-items: center;
+    margin-block-end: var(--sti-space-1);
+    display: inline-grid;
+  }
+
+  .sti-FeedbackWidget-thanksTitle-8c25b {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-FeedbackWidget-thanksText-58fa5 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-FeedbackWidget-thanksIcon-c40a4 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/FeedbackWidget/FeedbackWidget.d.ts

@@ -0,0 +1,47 @@
+import { Placement } from "../_internal/overlay/FloatingCard.js";
+import "../Popover/Popover.js";
+import { ReactElement, ReactNode } from "react";
+export type FeedbackCategory = "issue" | "idea" | "praise";
+/** Gönderilen geri bildirim. Sayfa adresi ya da kullanıcı bilgisi eklemek uygulamanın işidir. */
+export interface FeedbackSubmission {
+  category: FeedbackCategory;
+  /** Kırpılmış mesaj (boş olamaz). */
+  message: string;
+  /** 1–5; yalnız `showRating` açıkken ve kullanıcı puan verdiyse. */
+  rating?: number;
+}
+export interface FeedbackWidgetProps {
+  /**
+   * Gönderim. Söz döndürürse düğme bekler; söz reddedilirse hata gösterilir ve yazılanlar korunur
+   * (yeniden denenebilir). Çözülürse teşekkür görünümüne geçilir.
+   */
+  onSubmit: (feedback: FeedbackSubmission) => void | Promise<void>;
+  /** Açan düğme (React Aria tabanlı); verilmezse "Geri bildirim" düğmesi. */
+  trigger?: ReactElement;
+  /** Başlık; varsayılan "Geri bildirim gönderin". */
+  title?: ReactNode;
+  /** Başlığın altındaki açıklama. */
+  description?: ReactNode;
+  /** Sunulan konular (sırasıyla); en az iki. Varsayılan üçü de. */
+  categories?: readonly FeedbackCategory[];
+  /** Başlangıçta seçili konu; varsayılan listenin ilki. */
+  defaultCategory?: FeedbackCategory;
+  /** İsteğe bağlı yıldızlı genel memnuniyet puanı. */
+  showRating?: boolean;
+  /** Mesajın en çok karakteri (yumuşak sınır: yazılabilir, aşılınca gönderilmez). Varsayılan 2000. */
+  maxLength?: number;
+  /** Kartın düğmeye göre yönü. Varsayılan `top end`. */
+  placement?: Placement;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+/**
+ * Geri bildirim: düğmeye bağlı kart. Konu (sorun, öneri, memnuniyet), mesaj ve isteğe bağlı puan;
+ * Gönder (ya da Ctrl/⌘+Enter) iletir, teşekkür görünümü ekran okuyucuya duyurulur. Gönderim
+ * başarısız olursa yazılanlar korunur ve hata bildirilir. Kart kapanınca (gönderilmediyse) taslak
+ * saklanır; gönderilip kapanınca sıfırlanır. Yazı alanında şifre ve kişisel veri yazılmaması istenir;
+ * sayfa adresi gibi bağlamı uygulama kendi ekler.
+ */
+export declare function FeedbackWidget({ onSubmit, trigger, title, description, categories, defaultCategory, showRating, maxLength, placement, isOpen, defaultOpen, onOpenChange, className }: FeedbackWidgetProps): import("react").JSX.Element;

package/dist/components/FeedbackWidget/FeedbackWidget.js

@@ -0,0 +1,198 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { characterCount } from "../CharacterCounter/CharacterCounter.js";
+import { TextArea } from "../TextArea/TextArea.js";
+import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
+import { announce } from "../Alert/announcer.js";
+import { Alert } from "../Alert/Alert.js";
+import { Button } from "../Button/Button.js";
+import { Popover } from "../Popover/Popover.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { Rating } from "../Rating/Rating.js";
+import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
+import FeedbackWidget_module_default from "./FeedbackWidget.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/components/FeedbackWidget/FeedbackWidget.tsx
+const ALL = [
+	"issue",
+	"idea",
+	"praise"
+];
+/**
+* Geri bildirim: düğmeye bağlı kart. Konu (sorun, öneri, memnuniyet), mesaj ve isteğe bağlı puan;
+* Gönder (ya da Ctrl/⌘+Enter) iletir, teşekkür görünümü ekran okuyucuya duyurulur. Gönderim
+* başarısız olursa yazılanlar korunur ve hata bildirilir. Kart kapanınca (gönderilmediyse) taslak
+* saklanır; gönderilip kapanınca sıfırlanır. Yazı alanında şifre ve kişisel veri yazılmaması istenir;
+* sayfa adresi gibi bağlamı uygulama kendi ekler.
+*/
+function FeedbackWidget({ onSubmit, trigger, title, description, categories = ALL, defaultCategory, showRating = false, maxLength = 2e3, placement = "top end", isOpen, defaultOpen, onOpenChange, className }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const formId = useId();
+	const first = defaultCategory ?? categories[0] ?? "issue";
+	const [category, setCategory] = useState(first);
+	const [message, setMessage] = useState("");
+	const [rating, setRating] = useState(null);
+	const [status, setStatus] = useState("idle");
+	const [failed, setFailed] = useState(false);
+	const [fieldError, setFieldError] = useState(null);
+	const sending = status === "sending";
+	const labels = {
+		issue: t.feedbackIssue,
+		idea: t.feedbackIdea,
+		praise: t.feedbackPraise
+	};
+	const reset = () => {
+		setCategory(first);
+		setMessage("");
+		setRating(null);
+		setStatus("idle");
+		setFailed(false);
+		setFieldError(null);
+	};
+	const change = (open) => {
+		if (!open && status === "sent") reset();
+		onOpenChange?.(open);
+	};
+	const submit = async () => {
+		if (sending) return;
+		const text = message.trim();
+		if (!text) {
+			setFieldError(t.errorRequired);
+			return;
+		}
+		if (characterCount(text, locale) > maxLength) {
+			setFieldError(template(t.errorTooLong, { max: maxLength }));
+			return;
+		}
+		setFailed(false);
+		setFieldError(null);
+		setStatus("sending");
+		try {
+			await onSubmit({
+				category,
+				message: text,
+				...showRating && rating ? { rating } : {}
+			});
+			setStatus("sent");
+			announce(`${t.feedbackThanksTitle}. ${t.feedbackThanksText}`, "polite");
+		} catch {
+			setStatus("idle");
+			setFailed(true);
+		}
+	};
+	const sent = status === "sent";
+	return /* @__PURE__ */ jsx(Popover, {
+		trigger: trigger ?? /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			iconStart: /* @__PURE__ */ jsx(MessageIcon, {}),
+			children: t.feedbackTrigger
+		}),
+		title: title ?? t.feedbackTitle,
+		placement,
+		size: "lg",
+		isOpen,
+		defaultOpen,
+		onOpenChange: change,
+		className,
+		footer: (close) => sent ? /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			onPress: close,
+			children: t.close
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			isDisabled: sending,
+			onPress: close,
+			children: t.feedbackCancel
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			type: "submit",
+			form: formId,
+			isPending: sending,
+			children: t.feedbackSend
+		})] }),
+		children: sent ? /* @__PURE__ */ jsxs("div", {
+			className: FeedbackWidget_module_default.thanks,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: FeedbackWidget_module_default.thanksIcon,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(CheckCircleIcon, {})
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: FeedbackWidget_module_default.thanksTitle,
+					children: t.feedbackThanksTitle
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: FeedbackWidget_module_default.thanksText,
+					children: t.feedbackThanksText
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("form", {
+			id: formId,
+			noValidate: true,
+			className: FeedbackWidget_module_default.form,
+			onSubmit: (e) => {
+				e.preventDefault();
+				submit();
+			},
+			onKeyDown: (e) => {
+				if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+					e.preventDefault();
+					submit();
+				}
+			},
+			children: [
+				/* @__PURE__ */ jsx("p", {
+					className: FeedbackWidget_module_default.intro,
+					children: description ?? t.feedbackIntro
+				}),
+				categories.length > 1 ? /* @__PURE__ */ jsx(SegmentedControl, {
+					label: t.feedbackTopic,
+					value: category,
+					onChange: (v) => setCategory(v),
+					size: "sm",
+					fullWidth: true,
+					isDisabled: sending,
+					children: categories.map((c) => /* @__PURE__ */ jsx(SegmentedControlItem, {
+						value: c,
+						children: labels[c]
+					}, c))
+				}) : null,
+				/* @__PURE__ */ jsx(TextArea, {
+					label: t.feedbackMessage,
+					description: t.feedbackMessageHint,
+					value: message,
+					onChange: (v) => {
+						setMessage(v);
+						setFieldError(null);
+					},
+					minRows: 4,
+					maxRows: 8,
+					maxLength,
+					isRequired: true,
+					isReadOnly: sending,
+					isInvalid: fieldError !== null,
+					errorMessage: fieldError ?? void 0
+				}),
+				showRating ? /* @__PURE__ */ jsx(Rating, {
+					label: t.feedbackRating,
+					showOptional: true,
+					value: rating,
+					onChange: setRating,
+					isDisabled: sending,
+					size: "md"
+				}) : null,
+				failed ? /* @__PURE__ */ jsx(Alert, {
+					tone: "danger",
+					live: true,
+					children: t.feedbackFailed
+				}) : null
+			]
+		})
+	});
+}
+export { FeedbackWidget };

package/dist/components/FeedbackWidget/FeedbackWidget.module.js

@@ -0,0 +1,11 @@
+import './FeedbackWidget.css';
+// src/components/FeedbackWidget/FeedbackWidget.module.css
+var FeedbackWidget_module_default = {
+	"form": "sti-FeedbackWidget-form-1ad48",
+	"intro": "sti-FeedbackWidget-intro-072bf",
+	"thanks": "sti-FeedbackWidget-thanks-8e3a2",
+	"thanksIcon": "sti-FeedbackWidget-thanksIcon-c40a4",
+	"thanksTitle": "sti-FeedbackWidget-thanksTitle-8c25b",
+	"thanksText": "sti-FeedbackWidget-thanksText-58fa5"
+};
+export { FeedbackWidget_module_default as default };

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

@@ -0,0 +1,2 @@
+import { FeedbackCategory, FeedbackSubmission, FeedbackWidget, FeedbackWidgetProps } from "./FeedbackWidget.js";
+export { FeedbackCategory, FeedbackSubmission, FeedbackWidget, FeedbackWidgetProps };

package/dist/components/Figure/Figure.css

@@ -0,0 +1,64 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Figure-root-a64e8 {
+    --sti-figure-gap: var(--sti-space-3);
+    --sti-figure-radius: var(--sti-radius-md);
+    gap: var(--sti-figure-gap);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-Figure-media-b8434 {
+    overflow-wrap: anywhere;
+    justify-items: start;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    display: grid;
+  }
+
+  .sti-Figure-root-a64e8[data-align="center"] .sti-Figure-media-b8434 {
+    justify-self: center;
+    justify-items: center;
+  }
+
+  .sti-Figure-root-a64e8[data-bordered] .sti-Figure-media-b8434 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-figure-radius);
+    overflow: hidden;
+  }
+
+  .sti-Figure-caption-aca76 {
+    align-items: baseline;
+    column-gap: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    text-align: start;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-Figure-caption-aca76[data-align="center"] {
+    text-align: center;
+    justify-content: center;
+  }
+
+  .sti-Figure-text-8016e {
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+  }
+
+  .sti-Figure-credit-e8eca {
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  @media (forced-colors: active) {
+    .sti-Figure-root-a64e8[data-bordered] .sti-Figure-media-b8434 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/components/Figure/Figure.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode, Ref } from "react";
+export interface FigureProps {
+  /** Görsel, grafik, tablo ya da alıntı: ortadaki içerik. */
+  children: ReactNode;
+  /** Açıklama (`figcaption`): görselin ne gösterdiğini söyler. */
+  caption?: ReactNode;
+  /** Kaynak ya da fotoğrafçı ("Fotoğraf: …"); açıklamanın yanında sessiz renkte. */
+  credit?: ReactNode;
+  /** Açıklamanın yeri: `bottom` (varsayılan) ya da `top` (tablolar). */
+  captionPosition?: "bottom" | "top";
+  /** Açıklama hizası. */
+  align?: "start" | "center";
+  /** İçeriğin çevresine ince kenar ve yuvarlak köşe. */
+  isBordered?: boolean;
+  className?: string;
+  id?: string;
+  ref?: Ref<HTMLElement>;
+}
+/**
+ * Şekil: içerik ve açıklaması `figure` / `figcaption` ile bağlanır; ekran okuyucu açıklamayı
+ * içeriğin adı olarak okur. Sunucu bileşenidir. Görselin kendi alt metni (`alt`) görselde durur;
+ * açıklama onu tekrarlamaz, bağlamı ekler.
+ */
+export declare function Figure({ children, caption, credit, captionPosition, align, isBordered, className, id, ref }: FigureProps): import("react").JSX.Element;

package/dist/components/Figure/Figure.js

@@ -0,0 +1,38 @@
+import Figure_module_default from "./Figure.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/Figure/Figure.tsx
+/**
+* Şekil: içerik ve açıklaması `figure` / `figcaption` ile bağlanır; ekran okuyucu açıklamayı
+* içeriğin adı olarak okur. Sunucu bileşenidir. Görselin kendi alt metni (`alt`) görselde durur;
+* açıklama onu tekrarlamaz, bağlamı ekler.
+*/
+function Figure({ children, caption, credit, captionPosition = "bottom", align = "start", isBordered, className, id, ref }) {
+	const text = caption || credit ? /* @__PURE__ */ jsxs("figcaption", {
+		className: Figure_module_default.caption,
+		"data-align": align,
+		children: [caption ? /* @__PURE__ */ jsx("span", {
+			className: Figure_module_default.text,
+			children: caption
+		}) : null, credit ? /* @__PURE__ */ jsx("span", {
+			className: Figure_module_default.credit,
+			children: credit
+		}) : null]
+	}) : null;
+	return /* @__PURE__ */ jsxs("figure", {
+		id,
+		ref,
+		className: [Figure_module_default.root, className].filter(Boolean).join(" "),
+		"data-bordered": isBordered ? "" : void 0,
+		"data-caption": captionPosition,
+		"data-align": align,
+		children: [
+			captionPosition === "top" ? text : null,
+			/* @__PURE__ */ jsx("div", {
+				className: Figure_module_default.media,
+				children
+			}),
+			captionPosition === "bottom" ? text : null
+		]
+	});
+}
+export { Figure };

package/dist/components/Figure/Figure.module.js

@@ -0,0 +1,10 @@
+import './Figure.css';
+// src/components/Figure/Figure.module.css
+var Figure_module_default = {
+	"root": "sti-Figure-root-a64e8",
+	"media": "sti-Figure-media-b8434",
+	"caption": "sti-Figure-caption-aca76",
+	"text": "sti-Figure-text-8016e",
+	"credit": "sti-Figure-credit-e8eca"
+};
+export { Figure_module_default as default };

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

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