@stisocial/ui 0.2.0 → 0.3.0

package/dist/site/Faq/Faq.js

@@ -0,0 +1,45 @@
+import { Accordion } from "../../components/Accordion/Accordion.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import { JsonLd } from "../JsonLd/JsonLd.js";
+import Faq_module_default from "./Faq.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/Faq/Faq.tsx
+/**
+* Sık sorulan sorular: bölüm başlığı ve akordeon (Enter / Boşluk açar, oklar başlıklar arasında
+* gezer). İsteğe bağlı schema.org `FAQPage` verisi; yanıt metin değilse `answerText` verilir.
+*/
+function Faq({ items, label, layout = "split", structuredData = false, defaultExpanded, className, id, ...head }) {
+	const name = label ?? (typeof head.title === "string" ? head.title : "Sık sorulan sorular");
+	const level = (head.titleLevel ?? 2) + 1;
+	return /* @__PURE__ */ jsxs(SiteSection, {
+		id,
+		className,
+		innerClassName: Faq_module_default.inner,
+		...head,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: Faq_module_default.list,
+			"data-layout": layout,
+			children: /* @__PURE__ */ jsx(Accordion, {
+				label: name,
+				headingLevel: level,
+				defaultExpandedKeys: defaultExpanded ? [defaultExpanded] : void 0,
+				items: items.map((it) => ({
+					id: it.id,
+					title: it.question,
+					content: it.answer
+				}))
+			})
+		}), structuredData ? /* @__PURE__ */ jsx(JsonLd, { data: {
+			"@type": "FAQPage",
+			mainEntity: items.map((it) => ({
+				"@type": "Question",
+				name: it.question,
+				acceptedAnswer: {
+					"@type": "Answer",
+					text: it.answerText ?? (typeof it.answer === "string" ? it.answer : "")
+				}
+			}))
+		} }) : null]
+	});
+}
+export { Faq };

package/dist/site/Faq/Faq.module.js

@@ -0,0 +1,7 @@
+import './Faq.css';
+// src/site/Faq/Faq.module.css
+var Faq_module_default = {
+	"inner": "sti-Faq-inner-42f6f",
+	"list": "sti-Faq-list-aa86a"
+};
+export { Faq_module_default as default };

package/dist/site/Faq/index.d.ts

@@ -0,0 +1,2 @@
+import { Faq, FaqItem, FaqProps } from "./Faq.js";
+export { Faq, FaqItem, FaqProps };

package/dist/site/FeatureGrid/FeatureGrid.css

@@ -0,0 +1,125 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FeatureGrid-grid-ac081 {
+    --sti-feature-gap: var(--sti-space-8);
+    grid-template-columns: repeat(auto-fit,
+        minmax(min(100%, max(15rem, calc((100% - 2 * var(--sti-feature-gap)) / 3))), 1fr));
+    gap: var(--sti-space-10) var(--sti-feature-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-FeatureGrid-grid-ac081[data-columns="2"] {
+    grid-template-columns: repeat(auto-fit,
+        minmax(min(100%, max(15rem, calc((100% - var(--sti-feature-gap)) / 2))), 1fr));
+  }
+
+  .sti-FeatureGrid-grid-ac081[data-columns="4"] {
+    --sti-feature-gap: var(--sti-space-6);
+    grid-template-columns: repeat(auto-fit,
+        minmax(min(100%, max(13rem, calc((100% - 3 * var(--sti-feature-gap)) / 4))), 1fr));
+  }
+
+  .sti-FeatureGrid-grid-ac081[data-variant="card"] {
+    gap: var(--sti-space-4);
+  }
+
+  .sti-FeatureGrid-item-3470b {
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-FeatureGrid-grid-ac081[data-variant="card"] .sti-FeatureGrid-item-3470b {
+    padding: var(--sti-space-6);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-surface);
+  }
+
+  .sti-FeatureGrid-icon-cfe23 {
+    inline-size: var(--sti-space-10);
+    block-size: var(--sti-space-10);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    place-items: center;
+    margin-block-end: var(--sti-space-2);
+    display: inline-grid;
+  }
+
+  .sti-FeatureGrid-icon-cfe23 > svg {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+  }
+
+  .sti-FeatureGrid-title-a8cce {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    margin: 0;
+  }
+
+  .sti-FeatureGrid-titleLink-0e276 {
+    color: inherit;
+    text-underline-offset: .2em;
+    transition: text-decoration-color var(--sti-duration-fast) var(--sti-ease-standard);
+    -webkit-text-decoration: underline #0000;
+    text-decoration: underline #0000;
+  }
+
+  .sti-FeatureGrid-titleLink-0e276:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .sti-FeatureGrid-description-47bd4 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-FeatureGrid-more-00c66 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    margin-block-start: auto;
+    padding-block-start: var(--sti-space-2);
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .sti-FeatureGrid-more-00c66:hover {
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  .sti-FeatureGrid-more-00c66 > svg {
+    inline-size: var(--sti-space-4);
+    block-size: var(--sti-space-4);
+  }
+
+  .sti-FeatureGrid-titleLink-0e276:focus-visible, .sti-FeatureGrid-more-00c66:focus-visible {
+    border-radius: var(--sti-radius-xs);
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-FeatureGrid-titleLink-0e276 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-FeatureGrid-grid-ac081[data-variant="card"] .sti-FeatureGrid-item-3470b {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/site/FeatureGrid/FeatureGrid.d.ts

@@ -0,0 +1,28 @@
+import { SectionTone, SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface FeatureItem {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** "Ayrıntılar" bağlantısı. */
+  href?: string;
+  /** Bağlantı metni. Varsayılan: bağlantı yalnız başlıkta. */
+  linkLabel?: string;
+}
+export interface FeatureGridProps extends SiteSectionHeadProps {
+  features: readonly FeatureItem[];
+  /** Geniş kapta sütun sayısı. Varsayılan 3. */
+  columns?: 2 | 3 | 4;
+  /** `plain`: çerçevesiz; `card`: kart içinde. */
+  variant?: "plain" | "card";
+  tone?: SectionTone;
+  itemTitleLevel?: 3 | 4;
+  className?: string;
+  id?: string;
+}
+/**
+ * Özellik ızgarası: simge, başlık, kısa açıklama ve isteğe bağlı bağlantı. Kap daraldıkça sütun
+ * sayısı azalır (her sütun en az 15 rem). Bağlantı verilirse başlık bağlantıdır; `linkLabel`
+ * verilirse ayrıca görünür "ayrıntılar" bağlantısı yazılır.
+ */
+export declare function FeatureGrid({ features, columns, variant, tone, itemTitleLevel, className, id, ...head }: FeatureGridProps): import("react").JSX.Element;

package/dist/site/FeatureGrid/FeatureGrid.js

@@ -0,0 +1,52 @@
+import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import FeatureGrid_module_default from "./FeatureGrid.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/FeatureGrid/FeatureGrid.tsx
+/**
+* Özellik ızgarası: simge, başlık, kısa açıklama ve isteğe bağlı bağlantı. Kap daraldıkça sütun
+* sayısı azalır (her sütun en az 15 rem). Bağlantı verilirse başlık bağlantıdır; `linkLabel`
+* verilirse ayrıca görünür "ayrıntılar" bağlantısı yazılır.
+*/
+function FeatureGrid({ features, columns = 3, variant = "plain", tone, itemTitleLevel = 3, className, id, ...head }) {
+	const Heading = `h${itemTitleLevel}`;
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		tone,
+		className,
+		...head,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: FeatureGrid_module_default.grid,
+			"data-columns": columns,
+			"data-variant": variant,
+			children: features.map((f, i) => /* @__PURE__ */ jsxs("li", {
+				className: FeatureGrid_module_default.item,
+				children: [
+					f.icon ? /* @__PURE__ */ jsx("span", {
+						className: FeatureGrid_module_default.icon,
+						"aria-hidden": "true",
+						children: f.icon
+					}) : null,
+					/* @__PURE__ */ jsx(Heading, {
+						className: FeatureGrid_module_default.title,
+						children: f.href && !f.linkLabel ? /* @__PURE__ */ jsx("a", {
+							className: FeatureGrid_module_default.titleLink,
+							href: f.href,
+							children: f.title
+						}) : f.title
+					}),
+					f.description ? /* @__PURE__ */ jsx("p", {
+						className: FeatureGrid_module_default.description,
+						children: f.description
+					}) : null,
+					f.href && f.linkLabel ? /* @__PURE__ */ jsxs("a", {
+						className: FeatureGrid_module_default.more,
+						href: f.href,
+						children: [f.linkLabel, /* @__PURE__ */ jsx(ArrowRightIcon, { "aria-hidden": "true" })]
+					}) : null
+				]
+			}, i))
+		})
+	});
+}
+export { FeatureGrid };

package/dist/site/FeatureGrid/FeatureGrid.module.js

@@ -0,0 +1,12 @@
+import './FeatureGrid.css';
+// src/site/FeatureGrid/FeatureGrid.module.css
+var FeatureGrid_module_default = {
+	"grid": "sti-FeatureGrid-grid-ac081",
+	"item": "sti-FeatureGrid-item-3470b",
+	"icon": "sti-FeatureGrid-icon-cfe23",
+	"title": "sti-FeatureGrid-title-a8cce",
+	"titleLink": "sti-FeatureGrid-titleLink-0e276",
+	"description": "sti-FeatureGrid-description-47bd4",
+	"more": "sti-FeatureGrid-more-00c66"
+};
+export { FeatureGrid_module_default as default };

package/dist/site/FeatureGrid/index.d.ts

@@ -0,0 +1,2 @@
+import { FeatureGrid, FeatureGridProps, FeatureItem } from "./FeatureGrid.js";
+export { FeatureGrid, FeatureGridProps, FeatureItem };

package/dist/site/FeatureSplit/FeatureSplit.css

@@ -0,0 +1,95 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-FeatureSplit-frame-458da {
+    min-inline-size: 0;
+    container: sti-feature-split / inline-size;
+  }
+
+  .sti-FeatureSplit-split-db54f {
+    align-items: center;
+    gap: var(--sti-space-10) var(--sti-space-16);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-FeatureSplit-text-22f4d {
+    justify-items: start;
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-FeatureSplit-eyebrow-4d9fe {
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-FeatureSplit-title-3c479 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-heading-xl);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-heading-xl);
+    overflow-wrap: break-word;
+    text-wrap: balance;
+    margin: 0;
+  }
+
+  .sti-FeatureSplit-lead-a8922 {
+    max-inline-size: var(--sti-width-measure);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-lead);
+    line-height: var(--sti-line-height-lead);
+    margin: 0;
+  }
+
+  .sti-FeatureSplit-points-1e0bb {
+    gap: var(--sti-space-3);
+    margin: var(--sti-space-2) 0 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-FeatureSplit-point-3e72f {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    display: flex;
+  }
+
+  .sti-FeatureSplit-check-9805a {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+    color: var(--sti-fg-accent-strong);
+    flex: none;
+    margin-block-start: calc(var(--sti-space-1) / 2);
+  }
+
+  .sti-FeatureSplit-action-5e3fa {
+    margin-block-start: var(--sti-space-4);
+  }
+
+  .sti-FeatureSplit-media-396cc {
+    min-inline-size: 0;
+  }
+
+  .sti-FeatureSplit-media-396cc > :is(img, video) {
+    border-radius: var(--sti-radius-xl);
+    block-size: auto;
+    inline-size: 100%;
+    display: block;
+  }
+
+  @container sti-feature-split (width >= 44rem) {
+    .sti-FeatureSplit-split-db54f {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .sti-FeatureSplit-split-db54f[data-media="start"] .sti-FeatureSplit-media-396cc {
+      order: -1;
+    }
+  }
+}

package/dist/site/FeatureSplit/FeatureSplit.d.ts

@@ -0,0 +1,27 @@
+import { SectionTone } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface FeatureSplitProps {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  titleLevel?: 2 | 3;
+  lead?: ReactNode;
+  /** Onay işaretli kısa maddeler. */
+  points?: readonly ReactNode[];
+  action?: {
+    label: string;
+    href: string;
+  };
+  /** Görsel (img, MockupFrame, video). */
+  media: ReactNode;
+  /** Görselin yeri (geniş kapta). Varsayılan `end`. Dar kapta görsel metnin altındadır. */
+  mediaPosition?: "start" | "end";
+  tone?: SectionTone;
+  className?: string;
+  id?: string;
+}
+/**
+ * Görsel ve metin yan yana özellik bölümü: üst etiket, başlık, giriş, onay işaretli maddeler ve
+ * eylem; görsel solda ya da sağda. Arka arkaya kullanılınca `mediaPosition` değişerek zikzak
+ * düzen kurulur. Dar kapta tek sütun, metin önce.
+ */
+export declare function FeatureSplit({ eyebrow, title, titleLevel, lead, points, action, media, mediaPosition, tone, className, id }: FeatureSplitProps): import("react").JSX.Element;

package/dist/site/FeatureSplit/FeatureSplit.js

@@ -0,0 +1,67 @@
+import { Button } from "../../components/Button/Button.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import FeatureSplit_module_default from "./FeatureSplit.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/FeatureSplit/FeatureSplit.tsx
+/**
+* Görsel ve metin yan yana özellik bölümü: üst etiket, başlık, giriş, onay işaretli maddeler ve
+* eylem; görsel solda ya da sağda. Arka arkaya kullanılınca `mediaPosition` değişerek zikzak
+* düzen kurulur. Dar kapta tek sütun, metin önce.
+*/
+function FeatureSplit({ eyebrow, title, titleLevel = 2, lead, points, action, media, mediaPosition = "end", tone, className, id }) {
+	const Heading = `h${titleLevel}`;
+	const titleId = id ? `${id}-title` : void 0;
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		tone,
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: FeatureSplit_module_default.frame,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: FeatureSplit_module_default.split,
+				"data-media": mediaPosition,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: FeatureSplit_module_default.text,
+					children: [
+						eyebrow ? /* @__PURE__ */ jsx("p", {
+							className: FeatureSplit_module_default.eyebrow,
+							children: eyebrow
+						}) : null,
+						/* @__PURE__ */ jsx(Heading, {
+							id: titleId,
+							className: FeatureSplit_module_default.title,
+							children: title
+						}),
+						lead ? /* @__PURE__ */ jsx("p", {
+							className: FeatureSplit_module_default.lead,
+							children: lead
+						}) : null,
+						points?.length ? /* @__PURE__ */ jsx("ul", {
+							className: FeatureSplit_module_default.points,
+							children: points.map((p, i) => /* @__PURE__ */ jsxs("li", {
+								className: FeatureSplit_module_default.point,
+								children: [/* @__PURE__ */ jsx(CheckIcon, {
+									"aria-hidden": "true",
+									className: FeatureSplit_module_default.check
+								}), /* @__PURE__ */ jsx("span", { children: p })]
+							}, i))
+						}) : null,
+						action ? /* @__PURE__ */ jsx("div", {
+							className: FeatureSplit_module_default.action,
+							children: /* @__PURE__ */ jsx(Button, {
+								variant: "secondary",
+								href: action.href,
+								children: action.label
+							})
+						}) : null
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: FeatureSplit_module_default.media,
+					children: media
+				})]
+			})
+		})
+	});
+}
+export { FeatureSplit };

package/dist/site/FeatureSplit/FeatureSplit.module.js

@@ -0,0 +1,16 @@
+import './FeatureSplit.css';
+// src/site/FeatureSplit/FeatureSplit.module.css
+var FeatureSplit_module_default = {
+	"frame": "sti-FeatureSplit-frame-458da",
+	"split": "sti-FeatureSplit-split-db54f",
+	"text": "sti-FeatureSplit-text-22f4d",
+	"eyebrow": "sti-FeatureSplit-eyebrow-4d9fe",
+	"title": "sti-FeatureSplit-title-3c479",
+	"lead": "sti-FeatureSplit-lead-a8922",
+	"points": "sti-FeatureSplit-points-1e0bb",
+	"point": "sti-FeatureSplit-point-3e72f",
+	"check": "sti-FeatureSplit-check-9805a",
+	"action": "sti-FeatureSplit-action-5e3fa",
+	"media": "sti-FeatureSplit-media-396cc"
+};
+export { FeatureSplit_module_default as default };

package/dist/site/FeatureSplit/index.d.ts

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

package/dist/site/Gallery/Gallery.css

@@ -0,0 +1,80 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Gallery-grid-062de {
+    gap: var(--sti-space-3);
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-Gallery-grid-062de[data-layout="masonry"] {
+    columns: 16rem;
+    column-gap: var(--sti-space-3);
+    display: block;
+  }
+
+  .sti-Gallery-grid-062de[data-layout="masonry"] .sti-Gallery-item-9e485 {
+    break-inside: avoid;
+    margin-block-end: var(--sti-space-3);
+  }
+
+  .sti-Gallery-item-9e485 {
+    min-inline-size: 0;
+  }
+
+  .sti-Gallery-button-f00a1 {
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    cursor: zoom-in;
+    border: 0;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-Gallery-button-f00a1:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Gallery-image-06aa5 {
+    block-size: auto;
+    inline-size: 100%;
+    transition: scale var(--sti-duration-slow) var(--sti-ease-standard);
+    display: block;
+  }
+
+  .sti-Gallery-grid-062de[data-layout="grid"] .sti-Gallery-image-06aa5 {
+    aspect-ratio: 1;
+    object-fit: cover;
+  }
+
+  .sti-Gallery-button-f00a1:hover .sti-Gallery-image-06aa5 {
+    scale: 1.04;
+  }
+
+  .sti-Gallery-srOnly-419bf {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Gallery-image-06aa5 {
+      transition: none;
+    }
+
+    .sti-Gallery-button-f00a1:hover .sti-Gallery-image-06aa5 {
+      scale: none;
+    }
+  }
+}

package/dist/site/Gallery/Gallery.d.ts

@@ -0,0 +1,16 @@
+import { LightboxImage } from "../../components/Lightbox/Lightbox.js";
+import { SiteSectionHeadProps } from "../_internal/SiteSection.js";
+export interface GalleryProps extends SiteSectionHeadProps {
+  images: readonly LightboxImage[];
+  /** `grid`: eşit kare hücreler; `masonry`: özgün oranlarla sütunlar. */
+  layout?: "grid" | "masonry";
+  /** Galerinin adı (görüntüleyicinin de adı). */
+  label: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Görsel galeri: kare ızgara ya da özgün oranlı sütun düzeni; görsele tıklayınca ya da Enter ile
+ * tam ekran görüntüleyici (`Lightbox`) o görselde açılır, oklarla gezilir.
+ */
+export declare function Gallery({ images, layout, label, className, id, ...head }: GalleryProps): import("react").JSX.Element;

package/dist/site/Gallery/Gallery.js

@@ -0,0 +1,55 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Lightbox } from "../../components/Lightbox/Lightbox.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import Gallery_module_default from "./Gallery.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/site/Gallery/Gallery.tsx
+/**
+* Görsel galeri: kare ızgara ya da özgün oranlı sütun düzeni; görsele tıklayınca ya da Enter ile
+* tam ekran görüntüleyici (`Lightbox`) o görselde açılır, oklarla gezilir.
+*/
+function Gallery({ images, layout = "grid", label, className, id, ...head }) {
+	const t = useMessages();
+	const [open, setOpen] = useState(false);
+	const [index, setIndex] = useState(0);
+	return /* @__PURE__ */ jsxs(SiteSection, {
+		id,
+		label: head.title ? void 0 : label,
+		className,
+		...head,
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: Gallery_module_default.grid,
+			"data-layout": layout,
+			children: images.map((img, i) => /* @__PURE__ */ jsx("li", {
+				className: Gallery_module_default.item,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: Gallery_module_default.button,
+					onClick: () => {
+						setIndex(i);
+						setOpen(true);
+					},
+					children: [/* @__PURE__ */ jsx("img", {
+						className: Gallery_module_default.image,
+						src: img.thumbnailSrc ?? img.src,
+						alt: img.alt,
+						loading: "lazy"
+					}), /* @__PURE__ */ jsx("span", {
+						className: Gallery_module_default.srOnly,
+						children: `, ${t.siteGalleryOpen}`
+					})]
+				})
+			}, img.src))
+		}), /* @__PURE__ */ jsx(Lightbox, {
+			images: [...images],
+			isOpen: open,
+			onOpenChange: setOpen,
+			index,
+			onIndexChange: setIndex,
+			label
+		})]
+	});
+}
+export { Gallery };

package/dist/site/Gallery/Gallery.module.js

@@ -0,0 +1,10 @@
+import './Gallery.css';
+// src/site/Gallery/Gallery.module.css
+var Gallery_module_default = {
+	"grid": "sti-Gallery-grid-062de",
+	"item": "sti-Gallery-item-9e485",
+	"button": "sti-Gallery-button-f00a1",
+	"image": "sti-Gallery-image-06aa5",
+	"srOnly": "sti-Gallery-srOnly-419bf"
+};
+export { Gallery_module_default as default };

package/dist/site/Gallery/index.d.ts

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