@stisocial/ui 0.2.1 → 0.3.0

package/dist/site/AwardsStrip/AwardsStrip.css

@@ -0,0 +1,114 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AwardsStrip-list-616b5 {
+    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-AwardsStrip-card-8f3a5 {
+    align-items: flex-start;
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    padding: var(--sti-space-5);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-standard);
+    display: flex;
+    position: relative;
+  }
+
+  .sti-AwardsStrip-card-8f3a5[data-link]:hover {
+    border-color: var(--sti-border-strong);
+  }
+
+  .sti-AwardsStrip-card-8f3a5:has(.sti-AwardsStrip-link-081b7:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-AwardsStrip-badge-2d6d4 {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    flex: none;
+    place-items: center;
+    display: grid;
+    overflow: hidden;
+  }
+
+  .sti-AwardsStrip-badge-2d6d4 > svg {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+  }
+
+  .sti-AwardsStrip-logo-6961a {
+    object-fit: contain;
+    block-size: 70%;
+    inline-size: 70%;
+  }
+
+  .sti-AwardsStrip-text-2fdb2 {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-AwardsStrip-organization-cabb7 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-AwardsStrip-year-8b3c8 {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-AwardsStrip-title-cefff {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-AwardsStrip-link-081b7 {
+    color: inherit;
+    outline: none;
+    text-decoration: none;
+  }
+
+  .sti-AwardsStrip-link-081b7:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-AwardsStrip-result-9aa94 {
+    margin: var(--sti-space-1) 0 0;
+    padding: calc(var(--sti-space-1) / 2) var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    justify-self: start;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-AwardsStrip-card-8f3a5 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-AwardsStrip-card-8f3a5, .sti-AwardsStrip-result-9aa94 {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+  }
+}

package/dist/site/AwardsStrip/AwardsStrip.d.ts

@@ -0,0 +1,27 @@
+import { SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface Award {
+  /** Ödül ya da kategori ("Yılın Sosyal Medya Kampanyası"). */
+  title: ReactNode;
+  /** Veren kurum ("Felis Ödülleri"). */
+  organization: string;
+  year: number | string;
+  /** Derece ("Altın", "Finalist"). */
+  result?: string;
+  /** Kurum logosu. */
+  logo?: string;
+  /** Ödül sayfası. */
+  href?: string;
+}
+export interface AwardsStripProps extends SiteSectionHeadProps {
+  awards: readonly Award[];
+  /** Başlık yoksa bölgenin adı. */
+  label?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ödül şeridi: kurum, ödül, derece ve yıl ile kısa kartlar. Kap genişliğine göre sarılır; derece
+ * turkuaz hapla vurgulanır. Bağlantılı ödülde bütün kart tıklanır.
+ */
+export declare function AwardsStrip({ awards, label, className, id, ...head }: AwardsStripProps): import("react").JSX.Element;

package/dist/site/AwardsStrip/AwardsStrip.js

@@ -0,0 +1,62 @@
+import { StarIcon } from "../../icons/generated/StarIcon.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import AwardsStrip_module_default from "./AwardsStrip.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/AwardsStrip/AwardsStrip.tsx
+/**
+* Ödül şeridi: kurum, ödül, derece ve yıl ile kısa kartlar. Kap genişliğine göre sarılır; derece
+* turkuaz hapla vurgulanır. Bağlantılı ödülde bütün kart tıklanır.
+*/
+function AwardsStrip({ awards, label, className, id, ...head }) {
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		label,
+		className,
+		spacing: "sm",
+		...head,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: AwardsStrip_module_default.list,
+			children: awards.map((a, i) => /* @__PURE__ */ jsxs("li", {
+				className: AwardsStrip_module_default.card,
+				"data-link": a.href ? "" : void 0,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: AwardsStrip_module_default.badge,
+					"aria-hidden": "true",
+					children: a.logo ? /* @__PURE__ */ jsx("img", {
+						src: a.logo,
+						alt: "",
+						className: AwardsStrip_module_default.logo
+					}) : /* @__PURE__ */ jsx(StarIcon, {})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: AwardsStrip_module_default.text,
+					children: [
+						/* @__PURE__ */ jsxs("p", {
+							className: AwardsStrip_module_default.organization,
+							children: [
+								a.organization,
+								" ",
+								/* @__PURE__ */ jsxs("span", {
+									className: AwardsStrip_module_default.year,
+									children: ["· ", a.year]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: AwardsStrip_module_default.title,
+							children: a.href ? /* @__PURE__ */ jsx("a", {
+								className: AwardsStrip_module_default.link,
+								href: a.href,
+								children: a.title
+							}) : a.title
+						}),
+						a.result ? /* @__PURE__ */ jsx("p", {
+							className: AwardsStrip_module_default.result,
+							children: a.result
+						}) : null
+					]
+				})]
+			}, i))
+		})
+	});
+}
+export { AwardsStrip };

package/dist/site/AwardsStrip/AwardsStrip.module.js

@@ -0,0 +1,15 @@
+import './AwardsStrip.css';
+// src/site/AwardsStrip/AwardsStrip.module.css
+var AwardsStrip_module_default = {
+	"list": "sti-AwardsStrip-list-616b5",
+	"card": "sti-AwardsStrip-card-8f3a5",
+	"link": "sti-AwardsStrip-link-081b7",
+	"badge": "sti-AwardsStrip-badge-2d6d4",
+	"logo": "sti-AwardsStrip-logo-6961a",
+	"text": "sti-AwardsStrip-text-2fdb2",
+	"organization": "sti-AwardsStrip-organization-cabb7",
+	"year": "sti-AwardsStrip-year-8b3c8",
+	"title": "sti-AwardsStrip-title-cefff",
+	"result": "sti-AwardsStrip-result-9aa94"
+};
+export { AwardsStrip_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Award, AwardsStrip, AwardsStripProps } from "./AwardsStrip.js";
+export { Award, AwardsStrip, AwardsStripProps };

package/dist/site/BentoGrid/BentoGrid.css

@@ -0,0 +1,187 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-BentoGrid-frame-622a0 {
+    min-inline-size: 0;
+    container: sti-bento / inline-size;
+  }
+
+  .sti-BentoGrid-grid-05500 {
+    grid-template-columns: minmax(0, 1fr);
+    grid-auto-flow: dense;
+    gap: var(--sti-space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-BentoGrid-card-64383 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-surface);
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-standard),
+      box-shadow var(--sti-duration-fast) var(--sti-ease-standard);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-BentoGrid-card-64383[data-accent] {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+    border-color: #0000;
+  }
+
+  .sti-BentoGrid-card-64383[data-link]:hover {
+    border-color: var(--sti-border-strong);
+    box-shadow: var(--sti-shadow-md);
+  }
+
+  .sti-BentoGrid-card-64383:has(.sti-BentoGrid-link-7b4db:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-BentoGrid-media-c3b9a {
+    background: var(--sti-bg-subtle);
+    flex: auto;
+    min-block-size: 10rem;
+    overflow: hidden;
+  }
+
+  .sti-BentoGrid-media-c3b9a > :is(img, video) {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-BentoGrid-body-11376 {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-6);
+    display: grid;
+  }
+
+  .sti-BentoGrid-icon-93ef8 {
+    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-BentoGrid-card-64383[data-accent] .sti-BentoGrid-icon-93ef8 {
+    background: color-mix(in srgb, var(--sti-fg-on-accent) 12%, transparent);
+    color: inherit;
+  }
+
+  .sti-BentoGrid-icon-93ef8 > svg {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+  }
+
+  .sti-BentoGrid-title-e23f9 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-heading-md);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-heading-md);
+    text-wrap: balance;
+    margin: 0;
+  }
+
+  .sti-BentoGrid-card-64383[data-size="lg"] .sti-BentoGrid-title-e23f9 {
+    font-size: var(--sti-font-size-heading-lg);
+    line-height: var(--sti-line-height-heading-lg);
+  }
+
+  .sti-BentoGrid-link-7b4db {
+    color: inherit;
+    outline: none;
+    text-decoration: none;
+  }
+
+  .sti-BentoGrid-link-7b4db:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-BentoGrid-description-d822d {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-BentoGrid-card-64383[data-accent] .sti-BentoGrid-description-d822d {
+    color: inherit;
+  }
+
+  .sti-BentoGrid-arrow-95316 {
+    color: var(--sti-fg-accent-strong);
+    transition: translate var(--sti-duration-fast) var(--sti-ease-standard);
+    margin-block-start: var(--sti-space-2);
+    display: inline-flex;
+  }
+
+  .sti-BentoGrid-card-64383[data-accent] .sti-BentoGrid-arrow-95316 {
+    color: inherit;
+  }
+
+  .sti-BentoGrid-arrow-95316 > svg {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+  }
+
+  .sti-BentoGrid-card-64383[data-link]:hover .sti-BentoGrid-arrow-95316 {
+    translate: var(--sti-space-1) 0;
+  }
+
+  @container sti-bento (width >= 32rem) {
+    .sti-BentoGrid-grid-05500 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .sti-BentoGrid-card-64383:is([data-size="wide"], [data-size="lg"]) {
+      grid-column: span 2;
+    }
+  }
+
+  @container sti-bento (width >= 48rem) {
+    .sti-BentoGrid-grid-05500 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      grid-auto-rows: minmax(14rem, auto);
+    }
+
+    .sti-BentoGrid-card-64383:is([data-size="tall"], [data-size="lg"]) {
+      grid-row: span 2;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-BentoGrid-card-64383, .sti-BentoGrid-arrow-95316 {
+      transition: none;
+    }
+
+    .sti-BentoGrid-card-64383[data-link]:hover .sti-BentoGrid-arrow-95316 {
+      translate: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-BentoGrid-card-64383 {
+      border-color: canvastext;
+    }
+
+    .sti-BentoGrid-card-64383[data-accent] {
+      color: canvastext;
+      background: canvas;
+    }
+  }
+}

package/dist/site/BentoGrid/BentoGrid.d.ts

@@ -0,0 +1,34 @@
+import { SectionTone, SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface BentoItem {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Kartın üstünde ya da arkasında görsel (img, grafik, ürün ekranı). */
+  media?: ReactNode;
+  /** Başlığın üstünde küçük simge. */
+  icon?: ReactNode;
+  /** Kartın tamamı bu adrese gider. */
+  href?: string;
+  /**
+   * Kartın ızgaradaki boyu: `sm` 1×1, `wide` 2×1, `tall` 1×2, `lg` 2×2 (geniş kapta 4 sütun).
+   * Dar kapta her kart tam genişliktir.
+   */
+  size?: "sm" | "wide" | "tall" | "lg";
+  /** Turkuaz vurgulu kart. */
+  accent?: boolean;
+}
+export interface BentoGridProps extends SiteSectionHeadProps {
+  items: readonly BentoItem[];
+  tone?: SectionTone;
+  /** Kart başlıklarının düzeyi. Varsayılan 3. */
+  itemTitleLevel?: 3 | 4;
+  className?: string;
+  id?: string;
+}
+/**
+ * Bento ızgarası: farklı boyda kartlarla hizmet ya da özellik vitrini. Geniş kapta 4 sütun, orta
+ * kapta 2 sütun, dar kapta tek sütun; kart boyları (`wide`, `tall`, `lg`) geniş kapta uygulanır.
+ * Bağlantılı kartta başlık bağlantıdır ve bütün kart tıklanır; odak halkası kartın çevresinde
+ * çizilir.
+ */
+export declare function BentoGrid({ items, tone, itemTitleLevel, className, id, ...head }: BentoGridProps): import("react").JSX.Element;

package/dist/site/BentoGrid/BentoGrid.js

@@ -0,0 +1,63 @@
+import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import BentoGrid_module_default from "./BentoGrid.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/BentoGrid/BentoGrid.tsx
+/**
+* Bento ızgarası: farklı boyda kartlarla hizmet ya da özellik vitrini. Geniş kapta 4 sütun, orta
+* kapta 2 sütun, dar kapta tek sütun; kart boyları (`wide`, `tall`, `lg`) geniş kapta uygulanır.
+* Bağlantılı kartta başlık bağlantıdır ve bütün kart tıklanır; odak halkası kartın çevresinde
+* çizilir.
+*/
+function BentoGrid({ items, tone, itemTitleLevel = 3, className, id, ...head }) {
+	const Heading = `h${itemTitleLevel}`;
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		tone,
+		className,
+		...head,
+		children: /* @__PURE__ */ jsx("div", {
+			className: BentoGrid_module_default.frame,
+			children: /* @__PURE__ */ jsx("ul", {
+				className: BentoGrid_module_default.grid,
+				children: items.map((item, i) => /* @__PURE__ */ jsxs("li", {
+					className: BentoGrid_module_default.card,
+					"data-size": item.size ?? "sm",
+					"data-accent": item.accent ? "" : void 0,
+					"data-link": item.href ? "" : void 0,
+					children: [item.media ? /* @__PURE__ */ jsx("div", {
+						className: BentoGrid_module_default.media,
+						children: item.media
+					}) : null, /* @__PURE__ */ jsxs("div", {
+						className: BentoGrid_module_default.body,
+						children: [
+							item.icon ? /* @__PURE__ */ jsx("span", {
+								className: BentoGrid_module_default.icon,
+								"aria-hidden": "true",
+								children: item.icon
+							}) : null,
+							/* @__PURE__ */ jsx(Heading, {
+								className: BentoGrid_module_default.title,
+								children: item.href ? /* @__PURE__ */ jsx("a", {
+									className: BentoGrid_module_default.link,
+									href: item.href,
+									children: item.title
+								}) : item.title
+							}),
+							item.description ? /* @__PURE__ */ jsx("p", {
+								className: BentoGrid_module_default.description,
+								children: item.description
+							}) : null,
+							item.href ? /* @__PURE__ */ jsx("span", {
+								className: BentoGrid_module_default.arrow,
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+							}) : null
+						]
+					})]
+				}, i))
+			})
+		})
+	});
+}
+export { BentoGrid };

package/dist/site/BentoGrid/BentoGrid.module.js

@@ -0,0 +1,15 @@
+import './BentoGrid.css';
+// src/site/BentoGrid/BentoGrid.module.css
+var BentoGrid_module_default = {
+	"frame": "sti-BentoGrid-frame-622a0",
+	"grid": "sti-BentoGrid-grid-05500",
+	"card": "sti-BentoGrid-card-64383",
+	"link": "sti-BentoGrid-link-7b4db",
+	"media": "sti-BentoGrid-media-c3b9a",
+	"body": "sti-BentoGrid-body-11376",
+	"icon": "sti-BentoGrid-icon-93ef8",
+	"title": "sti-BentoGrid-title-e23f9",
+	"description": "sti-BentoGrid-description-d822d",
+	"arrow": "sti-BentoGrid-arrow-95316"
+};
+export { BentoGrid_module_default as default };

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

@@ -0,0 +1,2 @@
+import { BentoGrid, BentoGridProps, BentoItem } from "./BentoGrid.js";
+export { BentoGrid, BentoGridProps, BentoItem };

package/dist/site/BlogCard/BlogCard.css

@@ -0,0 +1,136 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-BlogCard-root-36df1 {
+    gap: var(--sti-space-4);
+    box-sizing: border-box;
+    border-radius: var(--sti-radius-lg);
+    block-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-BlogCard-root-36df1:has(.sti-BlogCard-link-f3309:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-BlogCard-media-26119 {
+    aspect-ratio: 16 / 9;
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    overflow: hidden;
+  }
+
+  .sti-BlogCard-image-32245 {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    transition: scale var(--sti-duration-slow) var(--sti-ease-standard);
+    display: block;
+  }
+
+  .sti-BlogCard-root-36df1:hover .sti-BlogCard-image-32245 {
+    scale: 1.03;
+  }
+
+  .sti-BlogCard-body-6ac98 {
+    gap: var(--sti-space-2);
+    flex-direction: column;
+    flex: 1;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-BlogCard-category-50dcb {
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-BlogCard-title-7230d {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    text-wrap: balance;
+    margin: 0;
+  }
+
+  .sti-BlogCard-root-36df1[data-variant="featured"] .sti-BlogCard-title-7230d {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-heading-lg);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-heading-lg);
+  }
+
+  .sti-BlogCard-link-f3309 {
+    color: inherit;
+    text-underline-offset: .2em;
+    transition: text-decoration-color var(--sti-duration-fast) var(--sti-ease-standard);
+    outline: none;
+    -webkit-text-decoration: underline #0000;
+    text-decoration: underline #0000;
+  }
+
+  .sti-BlogCard-link-f3309:after {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-BlogCard-root-36df1:hover .sti-BlogCard-link-f3309 {
+    text-decoration-color: currentColor;
+  }
+
+  .sti-BlogCard-excerpt-0b299 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    line-height: var(--sti-line-height-md);
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    margin: 0;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .sti-BlogCard-meta-36899 {
+    margin-block-start: auto;
+    padding-block-start: var(--sti-space-2);
+  }
+
+  @media (width >= 48rem) {
+    .sti-BlogCard-root-36df1[data-variant="horizontal"], .sti-BlogCard-root-36df1[data-variant="featured"] {
+      align-items: center;
+      gap: var(--sti-space-8);
+      flex-direction: row;
+    }
+
+    .sti-BlogCard-root-36df1[data-variant="horizontal"] .sti-BlogCard-media-26119 {
+      flex: 0 0 38%;
+    }
+
+    .sti-BlogCard-root-36df1[data-variant="featured"] .sti-BlogCard-media-26119 {
+      aspect-ratio: 4 / 3;
+      flex: 0 0 55%;
+    }
+
+    .sti-BlogCard-root-36df1:is([data-variant="horizontal"], [data-variant="featured"]) .sti-BlogCard-meta-36899 {
+      margin-block-start: var(--sti-space-2);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-BlogCard-image-32245, .sti-BlogCard-link-f3309 {
+      transition: none;
+    }
+
+    .sti-BlogCard-root-36df1:hover .sti-BlogCard-image-32245 {
+      scale: none;
+    }
+  }
+}

package/dist/site/BlogCard/BlogCard.d.ts

@@ -0,0 +1,24 @@
+import { PostAuthor } from "../_internal/PostMeta.js";
+import { ReactNode } from "react";
+export interface BlogCardProps {
+  title: ReactNode;
+  href: string;
+  excerpt?: ReactNode;
+  /** Kapak görseli (süs). */
+  image?: string;
+  category?: string;
+  author?: PostAuthor;
+  /** Yayın tarihi (ISO). */
+  date?: string;
+  readingMinutes?: number;
+  /** `vertical`: kapak üstte; `horizontal`: kapak solda; `featured`: geniş, büyük başlık. */
+  variant?: "vertical" | "horizontal" | "featured";
+  titleLevel?: 2 | 3 | 4;
+  className?: string;
+  id?: string;
+}
+/**
+ * Blog yazısı kartı: kapak, kategori, başlık, özet, yazar, tarih ve okuma süresi. Bütün kart
+ * yazıya gider; yazar bağlantısı ayrıca tıklanabilir. Üç yerleşim: dikey, yatay, öne çıkan.
+ */
+export declare function BlogCard({ title, href, excerpt, image, category, author, date, readingMinutes, variant, titleLevel, className, id }: BlogCardProps): import("react").JSX.Element;