@stisocial/ui 0.2.1 → 0.3.0

package/dist/site/PortfolioGrid/PortfolioGrid.module.js

@@ -0,0 +1,15 @@
+import './PortfolioGrid.css';
+// src/site/PortfolioGrid/PortfolioGrid.module.css
+var PortfolioGrid_module_default = {
+	"filter": "sti-PortfolioGrid-filter-19a29",
+	"count": "sti-PortfolioGrid-count-1082b",
+	"grid": "sti-PortfolioGrid-grid-cf3b3",
+	"card": "sti-PortfolioGrid-card-2fa01",
+	"link": "sti-PortfolioGrid-link-31400",
+	"media": "sti-PortfolioGrid-media-6823e",
+	"image": "sti-PortfolioGrid-image-99697",
+	"body": "sti-PortfolioGrid-body-0f371",
+	"meta": "sti-PortfolioGrid-meta-b72be",
+	"title": "sti-PortfolioGrid-title-9e139"
+};
+export { PortfolioGrid_module_default as default };

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

@@ -0,0 +1,2 @@
+import { PortfolioGrid, PortfolioGridProps, PortfolioItem } from "./PortfolioGrid.js";
+export { PortfolioGrid, PortfolioGridProps, PortfolioItem };

package/dist/site/PressMentions/PressMentions.css

@@ -0,0 +1,115 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PressMentions-list-228a6 {
+    gap: var(--sti-space-4);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-PressMentions-card-cdd75 {
+    min-inline-size: 0;
+    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);
+    display: flex;
+  }
+
+  .sti-PressMentions-figure-20937 {
+    gap: var(--sti-space-4);
+    flex-direction: column;
+    flex: 1;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-PressMentions-outlet-55f6b {
+    min-block-size: var(--sti-space-8);
+    align-items: center;
+    display: flex;
+  }
+
+  .sti-PressMentions-logo-81731 {
+    max-inline-size: 10rem;
+    max-block-size: var(--sti-space-8);
+  }
+
+  .sti-PressMentions-outletName-85478 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-bold);
+  }
+
+  .sti-PressMentions-quote-96178 {
+    font-size: var(--sti-font-size-lg);
+    line-height: var(--sti-line-height-lg);
+    flex: 1;
+    margin: 0;
+  }
+
+  .sti-PressMentions-quote-96178 > p {
+    margin: 0;
+  }
+
+  .sti-PressMentions-quote-96178 > p:before {
+    content: open-quote;
+  }
+
+  .sti-PressMentions-quote-96178 > p:after {
+    content: close-quote;
+  }
+
+  .sti-PressMentions-caption-88bec {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2) var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-PressMentions-link-cbfc3 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    border-radius: var(--sti-radius-xs);
+    color: var(--sti-fg-accent-strong);
+    font-weight: var(--sti-font-weight-semibold);
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .sti-PressMentions-link-cbfc3:hover {
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  .sti-PressMentions-link-cbfc3:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-PressMentions-link-cbfc3 > svg {
+    inline-size: var(--sti-space-4);
+    block-size: var(--sti-space-4);
+  }
+
+  .sti-PressMentions-srOnly-face1 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (forced-colors: active) {
+    .sti-PressMentions-card-cdd75 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/site/PressMentions/PressMentions.d.ts

@@ -0,0 +1,25 @@
+import { SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface PressMention {
+  /** Yayın adı ("Marketing Türkiye"). */
+  outlet: string;
+  /** Yayının logosu (varsa ad yerine çizilir; metin karşılığı yayın adıdır). */
+  logo?: string;
+  /** Haberden kısa alıntı ya da başlık. */
+  quote: ReactNode;
+  /** Haberin adresi (yeni sekmede açılır). */
+  href?: string;
+  /** Yayın tarihi (ISO). */
+  date?: string;
+}
+export interface PressMentionsProps extends SiteSectionHeadProps {
+  mentions: readonly PressMention[];
+  label?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Basında biz: yayın logosu ya da adı, alıntı (`blockquote`), tarih ve habere bağlantı. Dış
+ * bağlantılar yeni sekmede, `noopener noreferrer` ile açılır ve bu ekran okuyucuya söylenir.
+ */
+export declare function PressMentions({ mentions, label, className, id, ...head }: PressMentionsProps): import("react").JSX.Element;

package/dist/site/PressMentions/PressMentions.js

@@ -0,0 +1,67 @@
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { ExternalLinkIcon } from "../../icons/generated/ExternalLinkIcon.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import PressMentions_module_default from "./PressMentions.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/PressMentions/PressMentions.tsx
+/**
+* Basında biz: yayın logosu ya da adı, alıntı (`blockquote`), tarih ve habere bağlantı. Dış
+* bağlantılar yeni sekmede, `noopener noreferrer` ile açılır ve bu ekran okuyucuya söylenir.
+*/
+function PressMentions({ mentions, label, className, id, ...head }) {
+	const t = useMessages();
+	const f = useFormatter();
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		label,
+		className,
+		...head,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: PressMentions_module_default.list,
+			children: mentions.map((m, i) => /* @__PURE__ */ jsx("li", {
+				className: PressMentions_module_default.card,
+				children: /* @__PURE__ */ jsxs("figure", {
+					className: PressMentions_module_default.figure,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: PressMentions_module_default.outlet,
+							children: m.logo ? /* @__PURE__ */ jsx("img", {
+								className: PressMentions_module_default.logo,
+								src: m.logo,
+								alt: m.outlet
+							}) : /* @__PURE__ */ jsx("span", {
+								className: PressMentions_module_default.outletName,
+								children: m.outlet
+							})
+						}),
+						/* @__PURE__ */ jsx("blockquote", {
+							className: PressMentions_module_default.quote,
+							children: /* @__PURE__ */ jsx("p", { children: m.quote })
+						}),
+						/* @__PURE__ */ jsxs("figcaption", {
+							className: PressMentions_module_default.caption,
+							children: [m.date ? /* @__PURE__ */ jsx("time", {
+								dateTime: m.date,
+								children: f.date(new Date(m.date), "long")
+							}) : null, m.href ? /* @__PURE__ */ jsxs("a", {
+								className: PressMentions_module_default.link,
+								href: m.href,
+								target: "_blank",
+								rel: "noopener noreferrer",
+								children: [
+									t.sitePressRead,
+									/* @__PURE__ */ jsx("span", {
+										className: PressMentions_module_default.srOnly,
+										children: ` (${m.outlet}, ${t.opensInNewTab})`
+									}),
+									/* @__PURE__ */ jsx(ExternalLinkIcon, { "aria-hidden": "true" })
+								]
+							}) : null]
+						})
+					]
+				})
+			}, i))
+		})
+	});
+}
+export { PressMentions };

package/dist/site/PressMentions/PressMentions.module.js

@@ -0,0 +1,15 @@
+import './PressMentions.css';
+// src/site/PressMentions/PressMentions.module.css
+var PressMentions_module_default = {
+	"list": "sti-PressMentions-list-228a6",
+	"card": "sti-PressMentions-card-cdd75",
+	"figure": "sti-PressMentions-figure-20937",
+	"outlet": "sti-PressMentions-outlet-55f6b",
+	"logo": "sti-PressMentions-logo-81731",
+	"outletName": "sti-PressMentions-outletName-85478",
+	"quote": "sti-PressMentions-quote-96178",
+	"caption": "sti-PressMentions-caption-88bec",
+	"link": "sti-PressMentions-link-cbfc3",
+	"srOnly": "sti-PressMentions-srOnly-face1"
+};
+export { PressMentions_module_default as default };

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

@@ -0,0 +1,2 @@
+import { PressMention, PressMentions, PressMentionsProps } from "./PressMentions.js";
+export { PressMention, PressMentions, PressMentionsProps };

package/dist/site/PricingSection/PricingSection.css

@@ -0,0 +1,64 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PricingSection-assurances-4c23d {
+    justify-content: center;
+    gap: var(--sti-space-2) var(--sti-space-6);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-PricingSection-assurances-4c23d > li {
+    align-items: center;
+    gap: var(--sti-space-2);
+    display: inline-flex;
+  }
+
+  .sti-PricingSection-assurances-4c23d > li:before {
+    inline-size: var(--sti-space-1);
+    block-size: var(--sti-space-1);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-fill-accent);
+    content: "";
+  }
+
+  .sti-PricingSection-custom-2b6e3 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-4) var(--sti-space-8);
+    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-subtle);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-PricingSection-customText-02ab5 {
+    gap: var(--sti-space-1);
+    flex: 18rem;
+    display: grid;
+  }
+
+  .sti-PricingSection-customTitle-bce36 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-PricingSection-customDescription-312ea {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-PricingSection-custom-2b6e3 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/site/PricingSection/PricingSection.d.ts

@@ -0,0 +1,24 @@
+import { PricingTableProps } from "../../components/PricingTable/PricingTable.js";
+import { SectionTone, SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface PricingSectionProps extends SiteSectionHeadProps, Omit<PricingTableProps, "className" | "id" | "level"> {
+  /** Paketlerin altında kurumsal ya da özel teklif satırı. */
+  custom?: {
+    title: ReactNode;
+    description?: ReactNode;
+    action: {
+      label: string;
+      href: string;
+    };
+  };
+  /** Güven notları ("Sözleşme aylık yenilenir", "İlk ay iade güvencesi"). */
+  assurances?: readonly ReactNode[];
+  tone?: SectionTone;
+  className?: string;
+  id?: string;
+}
+/**
+ * Fiyat bölümü: başlık bloğu, `PricingTable` (aylık / yıllık geçişi, önerilen paket, KDV notu),
+ * güven notları ve kurumsal teklif satırı. Paket başlıkları bölüm başlığının bir altındadır.
+ */
+export declare function PricingSection({ custom, assurances, tone, className, id, eyebrow, title, titleLevel, lead, align, actions, ...table }: PricingSectionProps): import("react").JSX.Element;

package/dist/site/PricingSection/PricingSection.js

@@ -0,0 +1,51 @@
+import { Button } from "../../components/Button/Button.js";
+import { PricingTable } from "../../components/PricingTable/PricingTable.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import PricingSection_module_default from "./PricingSection.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/PricingSection/PricingSection.tsx
+/**
+* Fiyat bölümü: başlık bloğu, `PricingTable` (aylık / yıllık geçişi, önerilen paket, KDV notu),
+* güven notları ve kurumsal teklif satırı. Paket başlıkları bölüm başlığının bir altındadır.
+*/
+function PricingSection({ custom, assurances, tone, className, id, eyebrow, title, titleLevel = 2, lead, align = "center", actions, ...table }) {
+	return /* @__PURE__ */ jsxs(SiteSection, {
+		id,
+		tone,
+		className,
+		eyebrow,
+		title,
+		titleLevel,
+		lead,
+		align,
+		actions,
+		children: [
+			/* @__PURE__ */ jsx(PricingTable, {
+				...table,
+				level: Math.min(titleLevel + 1, 4)
+			}),
+			assurances?.length ? /* @__PURE__ */ jsx("ul", {
+				className: PricingSection_module_default.assurances,
+				children: assurances.map((a, i) => /* @__PURE__ */ jsx("li", { children: a }, i))
+			}) : null,
+			custom ? /* @__PURE__ */ jsxs("div", {
+				className: PricingSection_module_default.custom,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: PricingSection_module_default.customText,
+					children: [/* @__PURE__ */ jsx("p", {
+						className: PricingSection_module_default.customTitle,
+						children: custom.title
+					}), custom.description ? /* @__PURE__ */ jsx("p", {
+						className: PricingSection_module_default.customDescription,
+						children: custom.description
+					}) : null]
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					href: custom.action.href,
+					children: custom.action.label
+				})]
+			}) : null
+		]
+	});
+}
+export { PricingSection };

package/dist/site/PricingSection/PricingSection.module.js

@@ -0,0 +1,10 @@
+import './PricingSection.css';
+// src/site/PricingSection/PricingSection.module.css
+var PricingSection_module_default = {
+	"assurances": "sti-PricingSection-assurances-4c23d",
+	"custom": "sti-PricingSection-custom-2b6e3",
+	"customText": "sti-PricingSection-customText-02ab5",
+	"customTitle": "sti-PricingSection-customTitle-bce36",
+	"customDescription": "sti-PricingSection-customDescription-312ea"
+};
+export { PricingSection_module_default as default };

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

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

package/dist/site/ProcessSteps/ProcessSteps.css

@@ -0,0 +1,102 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ProcessSteps-frame-2ebb8 {
+    min-inline-size: 0;
+    container: sti-process / inline-size;
+  }
+
+  .sti-ProcessSteps-list-69cf9 {
+    --sti-step-dot: var(--sti-space-10);
+    gap: var(--sti-space-8);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-ProcessSteps-step-861d0 {
+    grid-template-columns: var(--sti-step-dot) minmax(0, 1fr);
+    align-content: start;
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    display: grid;
+    position: relative;
+  }
+
+  .sti-ProcessSteps-step-861d0:not(:last-child):after {
+    inset-block: calc(var(--sti-step-dot) + var(--sti-space-2)) calc(var(--sti-space-2) * -3);
+    border-inline-start: var(--sti-border-width) solid var(--sti-border);
+    content: "";
+    position: absolute;
+    inset-inline-start: calc(var(--sti-step-dot) / 2);
+  }
+
+  .sti-ProcessSteps-number-e9fef {
+    inline-size: var(--sti-step-dot);
+    block-size: var(--sti-step-dot);
+    box-sizing: border-box;
+    border: var(--sti-border-width-strong) solid var(--sti-border-accent);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-canvas);
+    color: var(--sti-fg-accent-strong);
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-ProcessSteps-text-cbd42 {
+    gap: var(--sti-space-1);
+    padding-block-start: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-ProcessSteps-meta-299d1 {
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-ProcessSteps-title-d5840 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    margin: 0;
+  }
+
+  .sti-ProcessSteps-description-1d803 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  @container sti-process (width >= 52rem) {
+    .sti-ProcessSteps-list-69cf9[data-orientation="horizontal"] {
+      gap: var(--sti-space-6);
+      grid-auto-columns: minmax(0, 1fr);
+      grid-auto-flow: column;
+    }
+
+    .sti-ProcessSteps-list-69cf9[data-orientation="horizontal"] .sti-ProcessSteps-step-861d0 {
+      gap: var(--sti-space-3);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .sti-ProcessSteps-list-69cf9[data-orientation="horizontal"] .sti-ProcessSteps-step-861d0:not(:last-child):after {
+      inset-block: calc(var(--sti-step-dot) / 2) auto;
+      inset-inline: calc(var(--sti-step-dot) + var(--sti-space-2)) calc(var(--sti-space-4) * -1);
+      border-block-start: var(--sti-border-width) solid var(--sti-border);
+      border-inline-start: 0;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ProcessSteps-number-e9fef {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/site/ProcessSteps/ProcessSteps.d.ts

@@ -0,0 +1,22 @@
+import { SectionTone, SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface ProcessStep {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Süre ya da teslim ("1. hafta"). */
+  meta?: ReactNode;
+}
+export interface ProcessStepsProps extends SiteSectionHeadProps {
+  steps: readonly ProcessStep[];
+  /** `horizontal`: geniş kapta yan yana (dar kapta dikey); `vertical`: hep dikey. */
+  orientation?: "horizontal" | "vertical";
+  tone?: SectionTone;
+  label?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Süreç adımları (çalışma biçimi): numaralı sıralı liste; adımlar ince çizgiyle bağlanır. Geniş
+ * kapta yatay, dar kapta dikey. Numara ekran okuyucuda liste sırasıyla okunur.
+ */
+export declare function ProcessSteps({ steps, orientation, tone, label, className, id, ...head }: ProcessStepsProps): import("react").JSX.Element;

package/dist/site/ProcessSteps/ProcessSteps.js

@@ -0,0 +1,49 @@
+import { SiteSection } from "../_internal/SiteSection.js";
+import ProcessSteps_module_default from "./ProcessSteps.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/ProcessSteps/ProcessSteps.tsx
+/**
+* Süreç adımları (çalışma biçimi): numaralı sıralı liste; adımlar ince çizgiyle bağlanır. Geniş
+* kapta yatay, dar kapta dikey. Numara ekran okuyucuda liste sırasıyla okunur.
+*/
+function ProcessSteps({ steps, orientation = "horizontal", tone, label, className, id, ...head }) {
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		tone,
+		label,
+		className,
+		...head,
+		children: /* @__PURE__ */ jsx("div", {
+			className: ProcessSteps_module_default.frame,
+			children: /* @__PURE__ */ jsx("ol", {
+				className: ProcessSteps_module_default.list,
+				"data-orientation": orientation,
+				children: steps.map((s, i) => /* @__PURE__ */ jsxs("li", {
+					className: ProcessSteps_module_default.step,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: ProcessSteps_module_default.number,
+						"aria-hidden": "true",
+						children: i + 1
+					}), /* @__PURE__ */ jsxs("div", {
+						className: ProcessSteps_module_default.text,
+						children: [
+							s.meta ? /* @__PURE__ */ jsx("p", {
+								className: ProcessSteps_module_default.meta,
+								children: s.meta
+							}) : null,
+							/* @__PURE__ */ jsx("h3", {
+								className: ProcessSteps_module_default.title,
+								children: s.title
+							}),
+							s.description ? /* @__PURE__ */ jsx("p", {
+								className: ProcessSteps_module_default.description,
+								children: s.description
+							}) : null
+						]
+					})]
+				}, i))
+			})
+		})
+	});
+}
+export { ProcessSteps };

package/dist/site/ProcessSteps/ProcessSteps.module.js

@@ -0,0 +1,13 @@
+import './ProcessSteps.css';
+// src/site/ProcessSteps/ProcessSteps.module.css
+var ProcessSteps_module_default = {
+	"frame": "sti-ProcessSteps-frame-2ebb8",
+	"list": "sti-ProcessSteps-list-69cf9",
+	"step": "sti-ProcessSteps-step-861d0",
+	"number": "sti-ProcessSteps-number-e9fef",
+	"text": "sti-ProcessSteps-text-cbd42",
+	"meta": "sti-ProcessSteps-meta-299d1",
+	"title": "sti-ProcessSteps-title-d5840",
+	"description": "sti-ProcessSteps-description-1d803"
+};
+export { ProcessSteps_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ProcessStep, ProcessSteps, ProcessStepsProps } from "./ProcessSteps.js";
+export { ProcessStep, ProcessSteps, ProcessStepsProps };

package/dist/site/RelatedPosts/RelatedPosts.css

@@ -0,0 +1,15 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-RelatedPosts-grid-1a8c5 {
+    gap: var(--sti-space-10) var(--sti-space-6);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-RelatedPosts-item-8dccb {
+    min-inline-size: 0;
+  }
+}

package/dist/site/RelatedPosts/RelatedPosts.d.ts

@@ -0,0 +1,14 @@
+import { SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { BlogCardProps } from "../BlogCard/BlogCard.js";
+export interface RelatedPostsProps extends SiteSectionHeadProps {
+  posts: readonly (Omit<BlogCardProps, "variant" | "titleLevel" | "className"> & {
+    id: string;
+  })[];
+  className?: string;
+  id?: string;
+}
+/**
+ * İlgili yazılar: yazı sonunda en çok üç önerilen blog kartı. Başlık verilmezse "İlgili yazılar".
+ * Kart başlıkları bölüm başlığının bir altıdır.
+ */
+export declare function RelatedPosts({ posts, className, id, title, titleLevel, ...head }: RelatedPostsProps): import("react").JSX.Element;

package/dist/site/RelatedPosts/RelatedPosts.js

@@ -0,0 +1,32 @@
+import { useMessages } from "../../provider/UIProvider.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import { BlogCard } from "../BlogCard/BlogCard.js";
+import RelatedPosts_module_default from "./RelatedPosts.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/site/RelatedPosts/RelatedPosts.tsx
+/**
+* İlgili yazılar: yazı sonunda en çok üç önerilen blog kartı. Başlık verilmezse "İlgili yazılar".
+* Kart başlıkları bölüm başlığının bir altıdır.
+*/
+function RelatedPosts({ posts, className, id, title, titleLevel = 2, ...head }) {
+	const t = useMessages();
+	const level = Math.min(titleLevel + 1, 4);
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		className,
+		title: title ?? t.siteRelatedPosts,
+		titleLevel,
+		...head,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: RelatedPosts_module_default.grid,
+			children: posts.map(({ id: postId, ...post }) => /* @__PURE__ */ jsx("li", {
+				className: RelatedPosts_module_default.item,
+				children: /* @__PURE__ */ jsx(BlogCard, {
+					...post,
+					titleLevel: level
+				})
+			}, postId))
+		})
+	});
+}
+export { RelatedPosts };

package/dist/site/RelatedPosts/RelatedPosts.module.js

@@ -0,0 +1,7 @@
+import './RelatedPosts.css';
+// src/site/RelatedPosts/RelatedPosts.module.css
+var RelatedPosts_module_default = {
+	"grid": "sti-RelatedPosts-grid-1a8c5",
+	"item": "sti-RelatedPosts-item-8dccb"
+};
+export { RelatedPosts_module_default as default };