@stisocial/ui 0.2.1 → 0.3.0

package/dist/site/Hero/Hero.css

@@ -0,0 +1,147 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Hero-root-75ea3 {
+    box-sizing: border-box;
+    background: var(--sti-bg-canvas);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    position: relative;
+    overflow: hidden;
+    container: sti-hero / inline-size;
+  }
+
+  .sti-Hero-inner-ee170 {
+    gap: var(--sti-space-12);
+    box-sizing: border-box;
+    max-inline-size: var(--sti-width-container);
+    padding: var(--sti-space-24) var(--sti-gutter);
+    grid-template-columns: minmax(0, 1fr);
+    margin-inline: auto;
+    display: grid;
+    position: relative;
+  }
+
+  .sti-Hero-text-19bd0 {
+    justify-items: start;
+    gap: var(--sti-space-5);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-Hero-root-75ea3:is([data-variant="centered"], [data-variant="product"], [data-variant="media"]) .sti-Hero-text-19bd0 {
+    text-align: center;
+    justify-items: center;
+    max-inline-size: 52rem;
+    margin-inline: auto;
+  }
+
+  .sti-Hero-eyebrow-86afa {
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-Hero-title-b2ef7 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-display-xl);
+    font-weight: var(--sti-font-weight-bold);
+    letter-spacing: var(--sti-tracking-display-xl);
+    line-height: var(--sti-line-height-display-xl);
+    overflow-wrap: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    text-wrap: balance;
+    margin: 0;
+  }
+
+  .sti-Hero-root-75ea3[data-variant="minimal"] .sti-Hero-title-b2ef7 {
+    max-inline-size: 18ch;
+    font-size: var(--sti-font-size-display-2xl);
+    line-height: var(--sti-line-height-display-2xl);
+  }
+
+  .sti-Hero-lead-68671 {
+    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);
+    text-wrap: pretty;
+    margin: 0;
+  }
+
+  .sti-Hero-actions-1122a {
+    justify-content: inherit;
+    gap: var(--sti-space-3);
+    flex-wrap: wrap;
+    margin-block-start: var(--sti-space-2);
+    display: flex;
+  }
+
+  .sti-Hero-root-75ea3:is([data-variant="centered"], [data-variant="product"], [data-variant="media"]) .sti-Hero-actions-1122a {
+    justify-content: center;
+  }
+
+  .sti-Hero-footnote-5c8f8 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-Hero-media-f18e6 {
+    min-inline-size: 0;
+  }
+
+  .sti-Hero-media-f18e6 > :is(img, video) {
+    border-radius: var(--sti-radius-xl);
+    block-size: auto;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-Hero-background-88cfc {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-Hero-root-75ea3[data-variant="media"]:has(.sti-Hero-background-88cfc):after {
+    background: linear-gradient(to bottom,
+      var(--sti-scrim),
+      color-mix(in srgb, var(--sti-scrim) 60%, var(--sti-bg-canvas)));
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-Hero-root-75ea3[data-variant="media"] .sti-Hero-inner-ee170 {
+    z-index: 1;
+    align-content: center;
+    min-block-size: 32rem;
+  }
+
+  .sti-Hero-root-75ea3[data-variant="media"]:not(:has(.sti-Hero-background-88cfc)) .sti-Hero-inner-ee170 {
+    min-block-size: auto;
+  }
+
+  @container sti-hero (width >= 56rem) {
+    .sti-Hero-root-75ea3[data-variant="split"] .sti-Hero-inner-ee170 {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      align-items: center;
+    }
+  }
+
+  @container sti-hero (width <= 40rem) {
+    .sti-Hero-inner-ee170 {
+      padding-block: var(--sti-space-16);
+    }
+
+    .sti-Hero-root-75ea3 .sti-Hero-title-b2ef7, .sti-Hero-root-75ea3[data-variant="minimal"] .sti-Hero-title-b2ef7 {
+      font-size: var(--sti-font-size-display-lg);
+      letter-spacing: var(--sti-tracking-display-lg);
+      line-height: var(--sti-line-height-display-lg);
+    }
+  }
+}

package/dist/site/Hero/Hero.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export type HeroVariant = "centered" | "split" | "media" | "minimal" | "product";
+export interface HeroAction {
+  label: string;
+  href: string;
+}
+export interface HeroProps {
+  /**
+   * Yerleşim: `centered` ortalı metin; `split` solda metin, sağda görsel; `media` arka plan
+   * görseli üstünde metin; `minimal` büyük başlık ve kısa giriş; `product` ortalı metin ve altında
+   * geniş ürün görseli.
+   */
+  variant?: HeroVariant;
+  /** Başlığın üstünde kısa etiket ya da duyuru hapı. */
+  eyebrow?: ReactNode;
+  /** Sayfa başlığı (`h1`). */
+  title: ReactNode;
+  lead?: ReactNode;
+  primaryAction?: HeroAction;
+  secondaryAction?: HeroAction;
+  /** `split` ve `product` yerleşiminde görsel alanı (img, MockupFrame, video). */
+  media?: ReactNode;
+  /** `media` yerleşiminde arka plan görseli (süs; metin karşılığı boş bırakılabilir). */
+  backgroundImage?: {
+    src: string;
+    alt?: string;
+  };
+  /** Eylemlerin altında güven satırı ("4,9 puan · 120+ marka"). */
+  footnote?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Sayfa açılışı (hero): beş yerleşim; üst etiket, `h1` başlık, giriş, birincil ve ikincil eylem,
+ * güven satırı, isteğe bağlı görsel. Başlık ekran genişliğine göre akışkan boyutludur; arka plan
+ * görselinde metin, okunurluk için koyu bir örtü üstünde ve koyu tema değerleriyle çizilir.
+ */
+export declare function Hero({ variant, eyebrow, title, lead, primaryAction, secondaryAction, media, backgroundImage, footnote, className, id }: HeroProps): import("react").JSX.Element;

package/dist/site/Hero/Hero.js

@@ -0,0 +1,66 @@
+import { Button } from "../../components/Button/Button.js";
+import Hero_module_default from "./Hero.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/Hero/Hero.tsx
+/**
+* Sayfa açılışı (hero): beş yerleşim; üst etiket, `h1` başlık, giriş, birincil ve ikincil eylem,
+* güven satırı, isteğe bağlı görsel. Başlık ekran genişliğine göre akışkan boyutludur; arka plan
+* görselinde metin, okunurluk için koyu bir örtü üstünde ve koyu tema değerleriyle çizilir.
+*/
+function Hero({ variant = "centered", eyebrow, title, lead, primaryAction, secondaryAction, media, backgroundImage, footnote, className, id }) {
+	const onMedia = variant === "media" && backgroundImage;
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [Hero_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"aria-labelledby": id ? `${id}-title` : void 0,
+		...onMedia ? { "data-theme": "dark" } : {},
+		children: [onMedia ? /* @__PURE__ */ jsx("img", {
+			className: Hero_module_default.background,
+			src: backgroundImage.src,
+			alt: backgroundImage.alt ?? ""
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: Hero_module_default.inner,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: Hero_module_default.text,
+				children: [
+					eyebrow ? /* @__PURE__ */ jsx("div", {
+						className: Hero_module_default.eyebrow,
+						children: eyebrow
+					}) : null,
+					/* @__PURE__ */ jsx("h1", {
+						id: id ? `${id}-title` : void 0,
+						className: Hero_module_default.title,
+						children: title
+					}),
+					lead ? /* @__PURE__ */ jsx("p", {
+						className: Hero_module_default.lead,
+						children: lead
+					}) : null,
+					primaryAction || secondaryAction ? /* @__PURE__ */ jsxs("div", {
+						className: Hero_module_default.actions,
+						children: [primaryAction ? /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							size: "lg",
+							href: primaryAction.href,
+							children: primaryAction.label
+						}) : null, secondaryAction ? /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							size: "lg",
+							href: secondaryAction.href,
+							children: secondaryAction.label
+						}) : null]
+					}) : null,
+					footnote ? /* @__PURE__ */ jsx("div", {
+						className: Hero_module_default.footnote,
+						children: footnote
+					}) : null
+				]
+			}), media && (variant === "split" || variant === "product") ? /* @__PURE__ */ jsx("div", {
+				className: Hero_module_default.media,
+				children: media
+			}) : null]
+		})]
+	});
+}
+export { Hero };

package/dist/site/Hero/Hero.module.js

@@ -0,0 +1,15 @@
+import './Hero.css';
+// src/site/Hero/Hero.module.css
+var Hero_module_default = {
+	"root": "sti-Hero-root-75ea3",
+	"inner": "sti-Hero-inner-ee170",
+	"text": "sti-Hero-text-19bd0",
+	"eyebrow": "sti-Hero-eyebrow-86afa",
+	"title": "sti-Hero-title-b2ef7",
+	"lead": "sti-Hero-lead-68671",
+	"actions": "sti-Hero-actions-1122a",
+	"footnote": "sti-Hero-footnote-5c8f8",
+	"media": "sti-Hero-media-f18e6",
+	"background": "sti-Hero-background-88cfc"
+};
+export { Hero_module_default as default };

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

@@ -0,0 +1,2 @@
+import { Hero, HeroAction, HeroProps, HeroVariant } from "./Hero.js";
+export { Hero, HeroAction, HeroProps, HeroVariant };

package/dist/site/JsonLd/JsonLd.d.ts

@@ -0,0 +1,24 @@
+/** JSON-LD için izin verilen değer (işlev, sembol, tanımsız taşımaz). */
+export type JsonLdValue = string | number | boolean | null | readonly JsonLdValue[] | {
+  readonly [key: string]: JsonLdValue | undefined;
+};
+export interface JsonLdProps {
+  /** schema.org verisi (`@context` verilmezse `https://schema.org` eklenir). */
+  data: {
+    readonly [key: string]: JsonLdValue | undefined;
+  } | readonly {
+    readonly [key: string]: JsonLdValue | undefined;
+  }[];
+  id?: string;
+}
+/**
+ * JSON'u `<script>` içine güvenle gömülecek biçime çevirir: `<`, `>`, `&` ve satır ayırıcıları
+ * kaçışlanır; böylece veri içindeki "</script>" etiketi kapatamaz ve HTML yorumu açılamaz.
+ */
+export declare function serializeJsonLd(data: JsonLdProps["data"]): string;
+/**
+ * Yapılandırılmış veri (schema.org JSON-LD): arama motorları için kurum, makale, SSS, etkinlik,
+ * iş ilanı bilgisi. Veri kaçışlanarak gömülür (betik enjeksiyonu yok). Bu bir veri bloğudur,
+ * çalıştırılmaz; CSP'de betik izni gerektirmez.
+ */
+export declare function JsonLd({ data, id }: JsonLdProps): import("react").JSX.Element;

package/dist/site/JsonLd/JsonLd.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+// src/site/JsonLd/JsonLd.tsx
+/**
+* JSON'u `<script>` içine güvenle gömülecek biçime çevirir: `<`, `>`, `&` ve satır ayırıcıları
+* kaçışlanır; böylece veri içindeki "<\/script>" etiketi kapatamaz ve HTML yorumu açılamaz.
+*/
+function serializeJsonLd(data) {
+	const withContext = Array.isArray(data) ? data.map((d) => ({
+		"@context": "https://schema.org",
+		...d
+	})) : {
+		"@context": "https://schema.org",
+		...data
+	};
+	return JSON.stringify(withContext).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+/**
+* Yapılandırılmış veri (schema.org JSON-LD): arama motorları için kurum, makale, SSS, etkinlik,
+* iş ilanı bilgisi. Veri kaçışlanarak gömülür (betik enjeksiyonu yok). Bu bir veri bloğudur,
+* çalıştırılmaz; CSP'de betik izni gerektirmez.
+*/
+function JsonLd({ data, id }) {
+	return /* @__PURE__ */ jsx("script", {
+		id,
+		type: "application/ld+json",
+		dangerouslySetInnerHTML: { __html: serializeJsonLd(data) }
+	});
+}
+export { JsonLd, serializeJsonLd };

package/dist/site/LogoCloud/LogoCloud.css

@@ -0,0 +1,74 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-LogoCloud-list-68cb8 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-8) var(--sti-space-6);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-LogoCloud-item-8615f {
+    min-inline-size: 0;
+    min-block-size: var(--sti-space-12);
+    flex: 0 11rem;
+    place-items: center;
+    display: grid;
+  }
+
+  .sti-LogoCloud-link-175e4 {
+    padding: var(--sti-space-2);
+    border-radius: var(--sti-radius-md);
+    color: inherit;
+    place-items: center;
+    text-decoration: none;
+    display: grid;
+  }
+
+  .sti-LogoCloud-link-175e4:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-LogoCloud-image-7c029 {
+    max-inline-size: 100%;
+    max-block-size: var(--sti-space-10);
+    block-size: auto;
+    inline-size: auto;
+    transition: filter var(--sti-duration-normal) var(--sti-ease-standard),
+      opacity var(--sti-duration-normal) var(--sti-ease-standard);
+    display: block;
+  }
+
+  .sti-LogoCloud-wordmark-0385a {
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-bold);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  .sti-LogoCloud-list-68cb8[data-monochrome] .sti-LogoCloud-image-7c029 {
+    filter: grayscale();
+    opacity: .7;
+  }
+
+  [data-theme="dark"] .sti-LogoCloud-list-68cb8[data-monochrome] .sti-LogoCloud-image-7c029 {
+    filter: grayscale() invert() brightness(1.4);
+  }
+
+  .sti-LogoCloud-list-68cb8[data-monochrome] .sti-LogoCloud-link-175e4:is(:hover, :focus-visible) .sti-LogoCloud-image-7c029 {
+    filter: none;
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-LogoCloud-image-7c029 {
+      transition: none;
+    }
+  }
+}

package/dist/site/LogoCloud/LogoCloud.d.ts

@@ -0,0 +1,24 @@
+import { SiteSectionHeadProps } from "../_internal/SiteSection.js";
+export interface CloudLogo {
+  /** Markanın adı (görselin metin karşılığı; görsel yoksa yazı olarak çizilir). */
+  name: string;
+  /** Logo görseli (SVG ya da saydam PNG). */
+  src?: string;
+  /** Müşteri hikâyesi bağlantısı. */
+  href?: string;
+}
+export interface LogoCloudProps extends SiteSectionHeadProps {
+  logos: readonly CloudLogo[];
+  /** Başlık yoksa bölgenin adı ("Çalıştığımız markalar"). */
+  label?: string;
+  /** Logolar tek renkte (soluk) çizilir, üzerine gelince renklenir. Varsayılan `true`. */
+  monochrome?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Logo bulutu: müşteri ve iş ortağı logoları eşit hücrelerde. Logolar varsayılan olarak soluk ve
+ * tek renktir, üzerine gelince ya da odakta asıl rengine döner. Görseli olmayan marka adıyla
+ * yazılır. Bağlantılı logo müşteri hikâyesine gider.
+ */
+export declare function LogoCloud({ logos, label, monochrome, className, id, ...head }: LogoCloudProps): import("react").JSX.Element;

package/dist/site/LogoCloud/LogoCloud.js

@@ -0,0 +1,42 @@
+import { SiteSection } from "../_internal/SiteSection.js";
+import LogoCloud_module_default from "./LogoCloud.module.js";
+import { jsx } from "react/jsx-runtime";
+// src/site/LogoCloud/LogoCloud.tsx
+/**
+* Logo bulutu: müşteri ve iş ortağı logoları eşit hücrelerde. Logolar varsayılan olarak soluk ve
+* tek renktir, üzerine gelince ya da odakta asıl rengine döner. Görseli olmayan marka adıyla
+* yazılır. Bağlantılı logo müşteri hikâyesine gider.
+*/
+function LogoCloud({ logos, label, monochrome = true, className, id, ...head }) {
+	return /* @__PURE__ */ jsx(SiteSection, {
+		id,
+		label,
+		className,
+		spacing: "sm",
+		...head,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: LogoCloud_module_default.list,
+			"data-monochrome": monochrome ? "" : void 0,
+			children: logos.map((logo) => {
+				const mark = logo.src ? /* @__PURE__ */ jsx("img", {
+					className: LogoCloud_module_default.image,
+					src: logo.src,
+					alt: logo.name,
+					loading: "lazy"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: LogoCloud_module_default.wordmark,
+					children: logo.name
+				});
+				return /* @__PURE__ */ jsx("li", {
+					className: LogoCloud_module_default.item,
+					children: logo.href ? /* @__PURE__ */ jsx("a", {
+						className: LogoCloud_module_default.link,
+						href: logo.href,
+						children: mark
+					}) : mark
+				}, logo.name);
+			})
+		})
+	});
+}
+export { LogoCloud };

package/dist/site/LogoCloud/LogoCloud.module.js

@@ -0,0 +1,10 @@
+import './LogoCloud.css';
+// src/site/LogoCloud/LogoCloud.module.css
+var LogoCloud_module_default = {
+	"list": "sti-LogoCloud-list-68cb8",
+	"item": "sti-LogoCloud-item-8615f",
+	"link": "sti-LogoCloud-link-175e4",
+	"image": "sti-LogoCloud-image-7c029",
+	"wordmark": "sti-LogoCloud-wordmark-0385a"
+};
+export { LogoCloud_module_default as default };

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

@@ -0,0 +1,2 @@
+import { CloudLogo, LogoCloud, LogoCloudProps } from "./LogoCloud.js";
+export { CloudLogo, LogoCloud, LogoCloudProps };

package/dist/site/Marquee/Marquee.css

@@ -0,0 +1,101 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Marquee-root-77bbd {
+    align-items: center;
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-text);
+    display: flex;
+    position: relative;
+  }
+
+  .sti-Marquee-viewport-f3e42 {
+    flex: auto;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .sti-Marquee-root-77bbd[data-fade] .sti-Marquee-viewport-f3e42 {
+    -webkit-mask-image: linear-gradient(to right, #0000, #000 8% 92%, #0000);
+    mask-image: linear-gradient(to right, #0000, #000 8% 92%, #0000);
+  }
+
+  .sti-Marquee-track-aa823 {
+    --sti-marquee-duration: 40s;
+    inline-size: max-content;
+    animation: sti-Marquee-sti-marquee-0899b var(--sti-marquee-duration) linear infinite;
+    display: flex;
+  }
+
+  .sti-Marquee-root-77bbd[data-reverse] .sti-Marquee-track-aa823 {
+    animation-direction: reverse;
+  }
+
+  .sti-Marquee-root-77bbd[data-paused] .sti-Marquee-track-aa823, .sti-Marquee-root-77bbd:hover .sti-Marquee-track-aa823, .sti-Marquee-root-77bbd:focus-within .sti-Marquee-track-aa823 {
+    animation-play-state: paused;
+  }
+
+  .sti-Marquee-group-b33a2 {
+    align-items: center;
+    gap: var(--sti-space-12);
+    padding: 0 var(--sti-space-6);
+    flex: none;
+    margin: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-Marquee-item-fb284 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    white-space: nowrap;
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-Marquee-item-fb284 :is(img, svg) {
+    block-size: var(--sti-space-8);
+    inline-size: auto;
+    display: block;
+  }
+
+  .sti-Marquee-toggle-12463 {
+    flex: none;
+  }
+
+  @keyframes sti-Marquee-sti-marquee-0899b {
+    from {
+      transform: translateX(0);
+    }
+
+    to {
+      transform: translateX(-50%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Marquee-track-aa823 {
+      inline-size: auto;
+      animation: none;
+    }
+
+    .sti-Marquee-group-b33a2 {
+      justify-content: center;
+      gap: var(--sti-space-4) var(--sti-space-10);
+      flex-wrap: wrap;
+    }
+
+    .sti-Marquee-group-b33a2[data-copy], .sti-Marquee-toggle-12463 {
+      display: none;
+    }
+
+    .sti-Marquee-root-77bbd[data-fade] .sti-Marquee-viewport-f3e42 {
+      -webkit-mask-image: none;
+      mask-image: none;
+    }
+  }
+}

package/dist/site/Marquee/Marquee.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+export interface MarqueeProps {
+  /** Kayan öğeler (logo, metin, etiket). */
+  items: readonly ReactNode[];
+  /** Bölgenin adı ("Çalıştığımız markalar"). */
+  label: string;
+  /** Bir turun süresi (saniye). Varsayılan 40. */
+  duration?: number;
+  /** Ters yön (sağdan sola yerine soldan sağa). */
+  reverse?: boolean;
+  /** Kenarlarda soluklaşma. Varsayılan `true`. */
+  fade?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kayan şerit (logo ya da slogan bandı): öğeler kesintisiz döner. Hareket 5 saniyeden uzun sürdüğü
+ * için duraklat/oynat düğmesi vardır (WCAG 2.2.2); üzerine gelme ve odakta durur; hareketi
+ * azaltmada şerit hareketsiz, sarılan bir liste olur. Döngü için kopyalanan ikinci tur ekran
+ * okuyucudan gizlidir; öğeler bir kez okunur.
+ */
+export declare function Marquee({ items, label, duration, reverse, fade, className, id }: MarqueeProps): import("react").JSX.Element;

package/dist/site/Marquee/Marquee.js

@@ -0,0 +1,60 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { PauseIcon } from "../../icons/generated/PauseIcon.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import Marquee_module_default from "./Marquee.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+// src/site/Marquee/Marquee.tsx
+/**
+* Kayan şerit (logo ya da slogan bandı): öğeler kesintisiz döner. Hareket 5 saniyeden uzun sürdüğü
+* için duraklat/oynat düğmesi vardır (WCAG 2.2.2); üzerine gelme ve odakta durur; hareketi
+* azaltmada şerit hareketsiz, sarılan bir liste olur. Döngü için kopyalanan ikinci tur ekran
+* okuyucudan gizlidir; öğeler bir kez okunur.
+*/
+function Marquee({ items, label, duration = 40, reverse = false, fade = true, className, id }) {
+	const t = useMessages();
+	const [paused, setPaused] = useState(false);
+	const speed = useCallback((el) => {
+		el?.style.setProperty("--sti-marquee-duration", `${Math.max(5, duration)}s`);
+	}, [duration]);
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [Marquee_module_default.root, className].filter(Boolean).join(" "),
+		"aria-label": label,
+		"data-paused": paused ? "" : void 0,
+		"data-reverse": reverse ? "" : void 0,
+		"data-fade": fade ? "" : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: Marquee_module_default.viewport,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: speed,
+				className: Marquee_module_default.track,
+				children: [/* @__PURE__ */ jsx("ul", {
+					className: Marquee_module_default.group,
+					children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
+						className: Marquee_module_default.item,
+						children: item
+					}, i))
+				}), /* @__PURE__ */ jsx("ul", {
+					className: Marquee_module_default.group,
+					"aria-hidden": "true",
+					"data-copy": "",
+					children: items.map((item, i) => /* @__PURE__ */ jsx("li", {
+						className: Marquee_module_default.item,
+						children: item
+					}, i))
+				})]
+			})
+		}), /* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			variant: "ghost",
+			label: paused ? t.siteMarqueePlay : t.siteMarqueePause,
+			icon: paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}),
+			onPress: () => setPaused((p) => !p),
+			className: Marquee_module_default.toggle
+		})]
+	});
+}
+export { Marquee };

package/dist/site/Marquee/Marquee.module.js

@@ -0,0 +1,12 @@
+import './Marquee.css';
+// src/site/Marquee/Marquee.module.css
+var Marquee_module_default = {
+	"root": "sti-Marquee-root-77bbd",
+	"viewport": "sti-Marquee-viewport-f3e42",
+	"track": "sti-Marquee-track-aa823",
+	"sti-marquee": "sti-Marquee-sti-marquee-0899b",
+	"group": "sti-Marquee-group-b33a2",
+	"item": "sti-Marquee-item-fb284",
+	"toggle": "sti-Marquee-toggle-12463"
+};
+export { Marquee_module_default as default };