@stisocial/ui 0.2.1 → 0.3.0

package/dist/site/ShareBar/ShareBar.js

@@ -0,0 +1,111 @@
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { MailIcon } from "../../icons/generated/MailIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { BriefcaseIcon } from "../../icons/generated/BriefcaseIcon.js";
+import { PhoneIcon } from "../../icons/generated/PhoneIcon.js";
+import { UsersIcon } from "../../icons/generated/UsersIcon.js";
+import { ShareButton } from "../../components/ShareButton/ShareButton.js";
+import ShareBar_module_default from "./ShareBar.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/ShareBar/ShareBar.tsx
+const ALL = [
+	"x",
+	"linkedin",
+	"facebook",
+	"whatsapp",
+	"email"
+];
+/** Yalnız http(s) adresler paylaşılır. */
+function safeUrl(url) {
+	try {
+		const u = new URL(url);
+		return u.protocol === "https:" || u.protocol === "http:" ? u.href : null;
+	} catch {
+		return null;
+	}
+}
+/** Ağın paylaşım adresi (adres ve başlık kodlanır). */
+function shareHref(network, url, title) {
+	const u = encodeURIComponent(url);
+	const t = encodeURIComponent(title);
+	switch (network) {
+		case "x": return `https://x.com/intent/post?url=${u}&text=${t}`;
+		case "linkedin": return `https://www.linkedin.com/sharing/share-offsite/?url=${u}`;
+		case "facebook": return `https://www.facebook.com/sharer/sharer.php?u=${u}`;
+		case "whatsapp": return `https://wa.me/?text=${encodeURIComponent(`${title} ${url}`)}`;
+		case "email": return `mailto:?subject=${t}&body=${u}`;
+	}
+}
+const NAMES = {
+	x: "X",
+	linkedin: "LinkedIn",
+	facebook: "Facebook",
+	whatsapp: "WhatsApp",
+	email: ""
+};
+const ICONS = {
+	x: () => /* @__PURE__ */ jsx(MessageIcon, {}),
+	linkedin: () => /* @__PURE__ */ jsx(BriefcaseIcon, {}),
+	facebook: () => /* @__PURE__ */ jsx(UsersIcon, {}),
+	whatsapp: () => /* @__PURE__ */ jsx(PhoneIcon, {}),
+	email: () => /* @__PURE__ */ jsx(MailIcon, {})
+};
+/**
+* Paylaşma şeridi: cihazın paylaşım penceresi ya da bağlantı kopyalama (`ShareButton`) ve ağ
+* paylaşım bağlantıları (X, LinkedIn, Facebook, WhatsApp, e-posta). Ağ bağlantıları yeni sekmede,
+* `noopener noreferrer` ile açılır; adres ve başlık kodlanır; yalnız http(s) adres paylaşılır.
+* Paylaşım için betik yüklenmez, izleme yapılmaz.
+*/
+function ShareBar({ url, title, networks = ALL, showShareButton = true, label, orientation = "horizontal", className, id }) {
+	const t = useMessages();
+	const href = safeUrl(url);
+	if (!href) return null;
+	const name = label ?? t.siteShareLabel;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ShareBar_module_default.root, className].filter(Boolean).join(" "),
+		"data-orientation": orientation,
+		children: [/* @__PURE__ */ jsx("p", {
+			className: ShareBar_module_default.label,
+			"aria-hidden": "true",
+			children: name
+		}), /* @__PURE__ */ jsxs("ul", {
+			className: ShareBar_module_default.list,
+			"aria-label": name,
+			children: [showShareButton ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ShareButton, {
+				url: href,
+				title,
+				variant: "secondary",
+				size: "sm"
+			}) }) : null, networks.map((n) => {
+				const external = n !== "email";
+				const netName = n === "email" ? t.siteShareEmail : template(t.siteShareOn, { network: NAMES[n] });
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+					className: ShareBar_module_default.link,
+					href: shareHref(n, href, title),
+					...external ? {
+						target: "_blank",
+						rel: "noopener noreferrer"
+					} : {},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: ShareBar_module_default.icon,
+							children: ICONS[n]()
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: ShareBar_module_default.name,
+							children: n === "email" ? t.siteSocialEmail : NAMES[n]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: ShareBar_module_default.srOnly,
+							children: [`, ${netName}`, external ? ` (${t.opensInNewTab})` : ""]
+						})
+					]
+				}) }, n);
+			})]
+		})]
+	});
+}
+export { ShareBar, shareHref };

package/dist/site/ShareBar/ShareBar.module.js

@@ -0,0 +1,11 @@
+import './ShareBar.css';
+// src/site/ShareBar/ShareBar.module.css
+var ShareBar_module_default = {
+	"root": "sti-ShareBar-root-ddf14",
+	"label": "sti-ShareBar-label-cac4b",
+	"list": "sti-ShareBar-list-2af9d",
+	"link": "sti-ShareBar-link-bc9f2",
+	"icon": "sti-ShareBar-icon-f5fd0",
+	"srOnly": "sti-ShareBar-srOnly-eba6e"
+};
+export { ShareBar_module_default as default };

package/dist/site/Showreel/Showreel.css

@@ -0,0 +1,107 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Showreel-root-39ae8 {
+    box-sizing: border-box;
+    background: var(--sti-bg-canvas);
+    min-block-size: min(80vh, 44rem);
+    inline-size: 100%;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-Showreel-video-29e82 {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-Showreel-root-39ae8:after {
+    background: linear-gradient(to top,
+      var(--sti-bg-canvas) 0%,
+      color-mix(in srgb, var(--sti-scrim) 70%, transparent) 55%,
+      transparent 100%);
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-Showreel-inner-d7b49 {
+    z-index: 1;
+    align-content: end;
+    justify-items: start;
+    gap: var(--sti-space-4);
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: var(--sti-width-container);
+    padding: var(--sti-space-24) var(--sti-gutter) var(--sti-space-16);
+    margin-inline: auto;
+    display: grid;
+    position: relative;
+  }
+
+  .sti-Showreel-eyebrow-f627d {
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-Showreel-title-65c9b {
+    max-inline-size: 20ch;
+    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;
+  }
+
+  @media (width <= 40rem) {
+    .sti-Showreel-title-65c9b {
+      font-size: var(--sti-font-size-display-lg);
+      letter-spacing: var(--sti-tracking-display-lg);
+      line-height: var(--sti-line-height-display-lg);
+    }
+  }
+
+  .sti-Showreel-lead-f7095 {
+    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-Showreel-actions-e8970 {
+    gap: var(--sti-space-3);
+    flex-wrap: wrap;
+    margin-block-start: var(--sti-space-2);
+    display: flex;
+  }
+
+  .sti-Showreel-toggle-d808a {
+    z-index: 1;
+    position: absolute;
+    inset-block-end: var(--sti-space-6);
+    inset-inline-end: var(--sti-gutter);
+  }
+
+  .sti-Showreel-srOnly-95c9b {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+}

package/dist/site/Showreel/Showreel.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+export interface ShowreelProps {
+  /** Arka planda sessiz, döngülü oynayan kısa video (MP4/WebM, en çok ~15 sn önerilir). */
+  src: string;
+  /** Kapak (video yüklenene dek ve hareketi azaltmada gösterilir). */
+  poster: string;
+  /** Videonun içeriğini anlatan kısa metin (ekran okuyucu için; video süstür). */
+  description: string;
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  lead?: ReactNode;
+  /** "Filmi izleyin" gibi tam film eylemi (bağlantı). */
+  action?: {
+    label: string;
+    href: string;
+  };
+  /** Ek eylem alanı. */
+  children?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Video hero (showreel): tam genişlik sessiz, döngülü arka plan videosu, üstünde okunurluk örtüsü
+ * ve başlık. Hareket 5 saniyeden uzun sürdüğü için duraklat/oynat düğmesi hep vardır (WCAG 2.2.2);
+ * hareketi azaltma tercihinde video oynamaz, yalnız kapak gösterilir. Video sesi yoktur ve
+ * ekran okuyucudan gizlidir; içeriği `description` ile anlatılır.
+ */
+export declare function Showreel({ src, poster, description, eyebrow, title, lead, action, children, className, id }: ShowreelProps): import("react").JSX.Element;

package/dist/site/Showreel/Showreel.js

@@ -0,0 +1,108 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Button } from "../../components/Button/Button.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { PauseIcon } from "../../icons/generated/PauseIcon.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import Showreel_module_default from "./Showreel.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/site/Showreel/Showreel.tsx
+/**
+* Video hero (showreel): tam genişlik sessiz, döngülü arka plan videosu, üstünde okunurluk örtüsü
+* ve başlık. Hareket 5 saniyeden uzun sürdüğü için duraklat/oynat düğmesi hep vardır (WCAG 2.2.2);
+* hareketi azaltma tercihinde video oynamaz, yalnız kapak gösterilir. Video sesi yoktur ve
+* ekran okuyucudan gizlidir; içeriği `description` ile anlatılır.
+*/
+function Showreel({ src, poster, description, eyebrow, title, lead, action, children, className, id }) {
+	const t = useMessages();
+	const video = useRef(null);
+	const [playing, setPlaying] = useState(false);
+	const [reduced, setReduced] = useState(false);
+	useEffect(() => {
+		const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		const apply = () => {
+			const r = Boolean(mq?.matches);
+			setReduced(r);
+			const v = video.current;
+			if (!v) return;
+			if (r) {
+				v.pause();
+				setPlaying(false);
+			} else v.play().then(() => setPlaying(true)).catch(() => setPlaying(false));
+		};
+		apply();
+		mq?.addEventListener?.("change", apply);
+		return () => mq?.removeEventListener?.("change", apply);
+	}, []);
+	const toggle = () => {
+		const v = video.current;
+		if (!v) return;
+		if (v.paused) v.play().then(() => setPlaying(true)).catch(() => setPlaying(false));
+		else {
+			v.pause();
+			setPlaying(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [Showreel_module_default.root, className].filter(Boolean).join(" "),
+		"data-theme": "dark",
+		"aria-labelledby": id ? `${id}-title` : void 0,
+		children: [
+			/* @__PURE__ */ jsx("video", {
+				ref: video,
+				className: Showreel_module_default.video,
+				src,
+				poster,
+				muted: true,
+				loop: true,
+				playsInline: true,
+				preload: "metadata",
+				"aria-hidden": "true",
+				tabIndex: -1
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: Showreel_module_default.srOnly,
+				children: description
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Showreel_module_default.inner,
+				children: [
+					eyebrow ? /* @__PURE__ */ jsx("div", {
+						className: Showreel_module_default.eyebrow,
+						children: eyebrow
+					}) : null,
+					/* @__PURE__ */ jsx("h1", {
+						id: id ? `${id}-title` : void 0,
+						className: Showreel_module_default.title,
+						children: title
+					}),
+					lead ? /* @__PURE__ */ jsx("p", {
+						className: Showreel_module_default.lead,
+						children: lead
+					}) : null,
+					action || children ? /* @__PURE__ */ jsxs("div", {
+						className: Showreel_module_default.actions,
+						children: [action ? /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							size: "lg",
+							href: action.href,
+							iconStart: /* @__PURE__ */ jsx(PlayIcon, {}),
+							children: action.label
+						}) : null, children]
+					}) : null
+				]
+			}),
+			reduced ? null : /* @__PURE__ */ jsx(IconButton, {
+				variant: "secondary",
+				size: "sm",
+				label: playing ? t.siteShowreelPause : t.siteShowreelPlay,
+				icon: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {}),
+				onPress: toggle,
+				className: Showreel_module_default.toggle
+			})
+		]
+	});
+}
+export { Showreel };

package/dist/site/Showreel/Showreel.module.js

@@ -0,0 +1,14 @@
+import './Showreel.css';
+// src/site/Showreel/Showreel.module.css
+var Showreel_module_default = {
+	"root": "sti-Showreel-root-39ae8",
+	"video": "sti-Showreel-video-29e82",
+	"inner": "sti-Showreel-inner-d7b49",
+	"eyebrow": "sti-Showreel-eyebrow-f627d",
+	"title": "sti-Showreel-title-65c9b",
+	"lead": "sti-Showreel-lead-f7095",
+	"actions": "sti-Showreel-actions-e8970",
+	"toggle": "sti-Showreel-toggle-d808a",
+	"srOnly": "sti-Showreel-srOnly-95c9b"
+};
+export { Showreel_module_default as default };

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

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

package/dist/site/SocialLinks/SocialLinks.css

@@ -0,0 +1,95 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SocialLinks-root-085a0 {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-SocialLinks-root-085a0[data-variant="text"] {
+    gap: var(--sti-space-1);
+    flex-direction: column;
+  }
+
+  .sti-SocialLinks-link-1ab47 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    color: var(--sti-fg);
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-standard),
+      border-color var(--sti-duration-fast) var(--sti-ease-standard);
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  .sti-SocialLinks-root-085a0[data-variant="icon"] .sti-SocialLinks-link-1ab47 {
+    inline-size: var(--sti-control-h-lg);
+    block-size: var(--sti-control-h-lg);
+    border: var(--sti-border-width) solid var(--sti-border);
+    justify-content: center;
+  }
+
+  .sti-SocialLinks-root-085a0[data-variant="icon"][data-size="sm"] .sti-SocialLinks-link-1ab47 {
+    inline-size: var(--sti-control-h-md);
+    block-size: var(--sti-control-h-md);
+  }
+
+  .sti-SocialLinks-root-085a0[data-variant="icon"] .sti-SocialLinks-link-1ab47:hover {
+    border-color: var(--sti-border-strong);
+    background: var(--sti-bg-surface-hover);
+  }
+
+  .sti-SocialLinks-root-085a0[data-variant="text"] .sti-SocialLinks-link-1ab47 {
+    min-block-size: var(--sti-control-h-sm);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+  }
+
+  .sti-SocialLinks-root-085a0[data-variant="text"] .sti-SocialLinks-link-1ab47:hover {
+    color: var(--sti-fg);
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  .sti-SocialLinks-link-1ab47:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-SocialLinks-glyph-65148 {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-SocialLinks-glyph-65148 > svg {
+    block-size: 100%;
+    inline-size: 100%;
+  }
+
+  .sti-SocialLinks-srOnly-1f385 {
+    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-SocialLinks-link-1ab47 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-SocialLinks-root-085a0[data-variant="icon"] .sti-SocialLinks-link-1ab47 {
+      border-color: linktext;
+    }
+  }
+}

package/dist/site/SocialLinks/SocialLinks.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export type SocialNetwork = "instagram" | "linkedin" | "x" | "facebook" | "youtube" | "tiktok" | "behance" | "dribbble" | "website" | "email" | "phone";
+export interface SocialLink {
+  network: SocialNetwork;
+  href: string;
+  /** Görünür ad (verilmezse ağın adı). */
+  label?: string;
+  /**
+   * Ağın kendi logosu (uygulamanın lisanslı SVG'si). Verilmezse genel bir simge çizilir; paket
+   * marka logosu taşımaz.
+   */
+  icon?: ReactNode;
+}
+export interface SocialLinksProps {
+  links: readonly SocialLink[];
+  /** Listenin adı ("Sosyal medya hesaplarımız"). */
+  label?: string;
+  /** Bağlantı adlarına eklenecek sahip ("Ayşe Yılmaz, LinkedIn"). */
+  owner?: string;
+  /** `icon`: yalnız simge (yuvarlak düğme); `text`: simge ve ad. */
+  variant?: "icon" | "text";
+  size?: "sm" | "md";
+  className?: string;
+  id?: string;
+}
+/** Yalnız güvenli şemalar: http(s), mailto, tel. Diğerleri bağlantı olarak çizilmez. */
+export declare function safeSocialHref(href: string): string | null;
+/**
+ * Sosyal medya ve iletişim bağlantıları: yuvarlak simge düğmeleri ya da simge ve ad. Dış ağlar
+ * yeni sekmede `noopener noreferrer` ile açılır ve bu okunur; e-posta ve telefon aynı sekmede.
+ * Yalnız http(s), mailto ve tel adresleri kabul edilir.
+ */
+export declare function SocialLinks({ links, label, owner, variant, size, className, id }: SocialLinksProps): import("react").JSX.Element;

package/dist/site/SocialLinks/SocialLinks.js

@@ -0,0 +1,97 @@
+import { useMessages } from "../../provider/UIProvider.js";
+import { PlayIcon } from "../../icons/generated/PlayIcon.js";
+import { MailIcon } from "../../icons/generated/MailIcon.js";
+import { MessageIcon } from "../../icons/generated/MessageIcon.js";
+import { VideoIcon } from "../../icons/generated/VideoIcon.js";
+import { BriefcaseIcon } from "../../icons/generated/BriefcaseIcon.js";
+import { CameraIcon } from "../../icons/generated/CameraIcon.js";
+import { GlobeIcon } from "../../icons/generated/GlobeIcon.js";
+import { PaletteIcon } from "../../icons/generated/PaletteIcon.js";
+import { PhoneIcon } from "../../icons/generated/PhoneIcon.js";
+import { UsersIcon } from "../../icons/generated/UsersIcon.js";
+import SocialLinks_module_default from "./SocialLinks.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/SocialLinks/SocialLinks.tsx
+const NAMES = {
+	instagram: "Instagram",
+	linkedin: "LinkedIn",
+	x: "X",
+	facebook: "Facebook",
+	youtube: "YouTube",
+	tiktok: "TikTok",
+	behance: "Behance",
+	dribbble: "Dribbble",
+	website: "",
+	email: "",
+	phone: ""
+};
+/** Ağın genel simgesi (paket marka logosu taşımaz; logo `icon` ile verilir). */
+const GLYPHS = {
+	instagram: () => /* @__PURE__ */ jsx(CameraIcon, {}),
+	linkedin: () => /* @__PURE__ */ jsx(BriefcaseIcon, {}),
+	x: () => /* @__PURE__ */ jsx(MessageIcon, {}),
+	facebook: () => /* @__PURE__ */ jsx(UsersIcon, {}),
+	youtube: () => /* @__PURE__ */ jsx(PlayIcon, {}),
+	tiktok: () => /* @__PURE__ */ jsx(VideoIcon, {}),
+	behance: () => /* @__PURE__ */ jsx(PaletteIcon, {}),
+	dribbble: () => /* @__PURE__ */ jsx(PaletteIcon, {}),
+	website: () => /* @__PURE__ */ jsx(GlobeIcon, {}),
+	email: () => /* @__PURE__ */ jsx(MailIcon, {}),
+	phone: () => /* @__PURE__ */ jsx(PhoneIcon, {})
+};
+/** Yalnız güvenli şemalar: http(s), mailto, tel. Diğerleri bağlantı olarak çizilmez. */
+function safeSocialHref(href) {
+	try {
+		const url = new URL(href);
+		return [
+			"https:",
+			"http:",
+			"mailto:",
+			"tel:"
+		].includes(url.protocol) ? url.href : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* Sosyal medya ve iletişim bağlantıları: yuvarlak simge düğmeleri ya da simge ve ad. Dış ağlar
+* yeni sekmede `noopener noreferrer` ile açılır ve bu okunur; e-posta ve telefon aynı sekmede.
+* Yalnız http(s), mailto ve tel adresleri kabul edilir.
+*/
+function SocialLinks({ links, label, owner, variant = "icon", size = "md", className, id }) {
+	const t = useMessages();
+	const nameOf = (l) => l.label ?? (l.network === "website" ? t.siteSocialWebsite : l.network === "email" ? t.siteSocialEmail : l.network === "phone" ? t.siteSocialPhone : NAMES[l.network]);
+	return /* @__PURE__ */ jsx("ul", {
+		id,
+		className: [SocialLinks_module_default.root, className].filter(Boolean).join(" "),
+		"aria-label": label,
+		"data-variant": variant,
+		"data-size": size,
+		children: links.map((l) => {
+			const href = safeSocialHref(l.href);
+			if (!href) return null;
+			const external = href.startsWith("http");
+			const name = nameOf(l);
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
+				className: SocialLinks_module_default.link,
+				href,
+				...external ? {
+					target: "_blank",
+					rel: "noopener noreferrer"
+				} : {},
+				children: [/* @__PURE__ */ jsx("span", {
+					className: SocialLinks_module_default.glyph,
+					"aria-hidden": "true",
+					children: l.icon ?? GLYPHS[l.network]()
+				}), /* @__PURE__ */ jsxs("span", {
+					className: variant === "icon" ? SocialLinks_module_default.srOnly : SocialLinks_module_default.name,
+					children: [owner && variant === "icon" ? `${owner}, ${name}` : name, external ? /* @__PURE__ */ jsx("span", {
+						className: SocialLinks_module_default.srOnly,
+						children: ` (${t.opensInNewTab})`
+					}) : null]
+				})]
+			}) }, `${l.network}-${href}`);
+		})
+	});
+}
+export { SocialLinks, safeSocialHref };

package/dist/site/SocialLinks/SocialLinks.module.js

@@ -0,0 +1,9 @@
+import './SocialLinks.css';
+// src/site/SocialLinks/SocialLinks.module.css
+var SocialLinks_module_default = {
+	"root": "sti-SocialLinks-root-085a0",
+	"link": "sti-SocialLinks-link-1ab47",
+	"glyph": "sti-SocialLinks-glyph-65148",
+	"srOnly": "sti-SocialLinks-srOnly-1f385"
+};
+export { SocialLinks_module_default as default };

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

@@ -0,0 +1,2 @@
+import { SocialLink, SocialLinks, SocialLinksProps, SocialNetwork, safeSocialHref } from "./SocialLinks.js";
+export { SocialLink, SocialLinks, SocialLinksProps, SocialNetwork, safeSocialHref };

package/dist/site/StatsBand/StatsBand.css

@@ -0,0 +1,58 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-StatsBand-list-1eeab {
+    gap: var(--sti-space-8) var(--sti-space-6);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-StatsBand-list-1eeab[data-count="2"] {
+    grid-template-columns: repeat(auto-fit,
+        minmax(min(100%, max(10rem, calc((100% - 1 * var(--sti-space-6)) / 2))), 1fr));
+  }
+
+  .sti-StatsBand-list-1eeab[data-count="3"] {
+    grid-template-columns: repeat(auto-fit,
+        minmax(min(100%, max(10rem, calc((100% - 2 * var(--sti-space-6)) / 3))), 1fr));
+  }
+
+  .sti-StatsBand-list-1eeab[data-count="4"] {
+    grid-template-columns: repeat(auto-fit,
+        minmax(min(100%, max(10rem, calc((100% - 3 * var(--sti-space-6)) / 4))), 1fr));
+  }
+
+  .sti-StatsBand-item-3be2c {
+    gap: var(--sti-space-2);
+    border-inline-start: var(--sti-border-width-strong) solid var(--sti-fill-accent);
+    flex-direction: column;
+    padding-inline-start: var(--sti-space-5);
+    display: flex;
+  }
+
+  .sti-StatsBand-label-fbc18 {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    order: 2;
+  }
+
+  .sti-StatsBand-value-ee227 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-4xl);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-4xl);
+    letter-spacing: var(--sti-tracking-4xl);
+    font-variant-numeric: tabular-nums;
+    order: 1;
+    margin: 0;
+  }
+
+  .sti-StatsBand-description-b03cf {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    order: 3;
+    margin: 0;
+  }
+}