@stisocial/ui 0.2.0 → 0.3.0

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

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

package/dist/site/NewsletterForm/NewsletterForm.css

@@ -0,0 +1,76 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-NewsletterForm-root-80b80 {
+    gap: var(--sti-space-4);
+    box-sizing: border-box;
+    inline-size: 100%;
+    max-inline-size: 36rem;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-NewsletterForm-head-553a6 {
+    gap: var(--sti-space-1);
+    display: grid;
+  }
+
+  .sti-NewsletterForm-title-d3b36 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-NewsletterForm-description-e4736 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-md);
+    margin: 0;
+  }
+
+  .sti-NewsletterForm-form-b8d9f, .sti-NewsletterForm-row-d53dc {
+    gap: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-NewsletterForm-field-5b0b3 {
+    min-inline-size: 0;
+  }
+
+  @media (width >= 32rem) {
+    .sti-NewsletterForm-root-80b80[data-layout="inline"] .sti-NewsletterForm-row-d53dc {
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: end;
+    }
+  }
+
+  .sti-NewsletterForm-privacy-772fb {
+    color: var(--sti-fg-link);
+  }
+
+  .sti-NewsletterForm-error-49293 {
+    color: var(--sti-fg-danger);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-NewsletterForm-success-ee22c {
+    align-items: center;
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-4);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-accent-subtle);
+    font-size: var(--sti-font-size-md);
+    display: flex;
+  }
+
+  .sti-NewsletterForm-success-ee22c > svg {
+    inline-size: var(--sti-space-5);
+    block-size: var(--sti-space-5);
+    color: var(--sti-fg-accent-strong);
+    flex: none;
+  }
+
+  .sti-NewsletterForm-success-ee22c:focus {
+    outline: none;
+  }
+}

package/dist/site/NewsletterForm/NewsletterForm.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+export interface NewsletterFormProps {
+  /** Kaydı yapar; hata fırlatırsa genel hata gösterilir. */
+  onSubscribe: (email: string) => Promise<void>;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Açık rıza metni (ör. "Kampanya ve duyuru e-postası almayı kabul ediyorum."). */
+  consentLabel?: ReactNode;
+  /** Aydınlatma metni bağlantısı (KVKK). */
+  privacyHref?: string;
+  /** `inline`: alan ve düğme yan yana; `stacked`: alt alta. */
+  layout?: "inline" | "stacked";
+  submitLabel?: string;
+  /** Başarı metni. Varsayılan: "Kaydınız alındı…". */
+  successMessage?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Bülten kaydı: e-posta, açık rıza onayı (KVKK, zorunlu) ve aydınlatma metni bağlantısı; gönderimde
+ * düğme bekler, başarıda teşekkür notu, hatada yeniden denenebilir uyarı. Bot tuzağı alanı
+ * doluysa gönderim sessizce yok sayılır.
+ */
+export declare function NewsletterForm({ onSubscribe, title, description, consentLabel, privacyHref, layout, submitLabel, successMessage, className, id }: NewsletterFormProps): import("react").JSX.Element;

package/dist/site/NewsletterForm/NewsletterForm.js

@@ -0,0 +1,98 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Button } from "../../components/Button/Button.js";
+import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
+import { Checkbox } from "../../components/Checkbox/Checkbox.js";
+import { EmailField } from "../../components/EmailField/EmailField.js";
+import { Form } from "../../components/Form/Form.js";
+import { Honeypot, isBot } from "../_internal/Honeypot.js";
+import NewsletterForm_module_default from "./NewsletterForm.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/site/NewsletterForm/NewsletterForm.tsx
+/**
+* Bülten kaydı: e-posta, açık rıza onayı (KVKK, zorunlu) ve aydınlatma metni bağlantısı; gönderimde
+* düğme bekler, başarıda teşekkür notu, hatada yeniden denenebilir uyarı. Bot tuzağı alanı
+* doluysa gönderim sessizce yok sayılır.
+*/
+function NewsletterForm({ onSubscribe, title, description, consentLabel, privacyHref, layout = "inline", submitLabel, successMessage, className, id }) {
+	const t = useMessages();
+	const [state, setState] = useState("idle");
+	const [email, setEmail] = useState("");
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [NewsletterForm_module_default.root, className].filter(Boolean).join(" "),
+		"data-layout": layout,
+		children: [title || description ? /* @__PURE__ */ jsxs("div", {
+			className: NewsletterForm_module_default.head,
+			children: [title ? /* @__PURE__ */ jsx("p", {
+				className: NewsletterForm_module_default.title,
+				children: title
+			}) : null, description ? /* @__PURE__ */ jsx("p", {
+				className: NewsletterForm_module_default.description,
+				children: description
+			}) : null]
+		}) : null, state === "done" ? /* @__PURE__ */ jsxs("output", {
+			className: NewsletterForm_module_default.success,
+			tabIndex: -1,
+			ref: (el) => el?.focus(),
+			children: [/* @__PURE__ */ jsx(CheckCircleIcon, { "aria-hidden": "true" }), successMessage ?? t.siteNewsletterDone]
+		}) : /* @__PURE__ */ jsxs(Form, {
+			className: NewsletterForm_module_default.form,
+			errorSummary: "off",
+			isPending: state === "pending",
+			onSubmit: async (event, values) => {
+				event.preventDefault();
+				if (isBot(values)) {
+					setState("done");
+					return;
+				}
+				setState("pending");
+				try {
+					await onSubscribe(email.trim());
+					setState("done");
+				} catch {
+					setState("error");
+				}
+			},
+			children: [
+				/* @__PURE__ */ jsx(Honeypot, {}),
+				/* @__PURE__ */ jsxs("div", {
+					className: NewsletterForm_module_default.row,
+					children: [/* @__PURE__ */ jsx(EmailField, {
+						className: NewsletterForm_module_default.field,
+						label: t.siteNewsletterEmail,
+						name: "email",
+						value: email,
+						onChange: setEmail,
+						isRequired: true,
+						autoComplete: "email",
+						placeholder: "ad@ornek.com"
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						variant: "primary",
+						isPending: state === "pending",
+						className: NewsletterForm_module_default.submit,
+						children: submitLabel ?? t.siteNewsletterSubmit
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Checkbox, {
+					name: "consent",
+					isRequired: true,
+					size: "sm",
+					children: [consentLabel ?? t.siteNewsletterConsent, privacyHref ? /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx("a", {
+						className: NewsletterForm_module_default.privacy,
+						href: privacyHref,
+						children: t.siteNewsletterPrivacy
+					})] }) : null]
+				}),
+				state === "error" ? /* @__PURE__ */ jsx("p", {
+					className: NewsletterForm_module_default.error,
+					role: "alert",
+					children: t.siteFormError
+				}) : null
+			]
+		})]
+	});
+}
+export { NewsletterForm };

package/dist/site/NewsletterForm/NewsletterForm.module.js

@@ -0,0 +1,15 @@
+import './NewsletterForm.css';
+// src/site/NewsletterForm/NewsletterForm.module.css
+var NewsletterForm_module_default = {
+	"root": "sti-NewsletterForm-root-80b80",
+	"head": "sti-NewsletterForm-head-553a6",
+	"title": "sti-NewsletterForm-title-d3b36",
+	"description": "sti-NewsletterForm-description-e4736",
+	"form": "sti-NewsletterForm-form-b8d9f",
+	"row": "sti-NewsletterForm-row-d53dc",
+	"field": "sti-NewsletterForm-field-5b0b3",
+	"privacy": "sti-NewsletterForm-privacy-772fb",
+	"error": "sti-NewsletterForm-error-49293",
+	"success": "sti-NewsletterForm-success-ee22c"
+};
+export { NewsletterForm_module_default as default };

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

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

package/dist/site/OgImage/OgImage.css

@@ -0,0 +1,78 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-OgImage-frame-6a72b {
+    inline-size: 100%;
+    max-inline-size: 75rem;
+    container: sti-og / inline-size;
+  }
+
+  .sti-OgImage-canvas-dc2d4 {
+    box-sizing: border-box;
+    aspect-ratio: 1200 / 630;
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-canvas);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 6cqi;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sti-OgImage-canvas-dc2d4[data-tone="accent"] {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+  }
+
+  .sti-OgImage-top-0bb00 {
+    justify-content: space-between;
+    align-items: center;
+    gap: 2cqi;
+    display: flex;
+  }
+
+  .sti-OgImage-logo-3b5a2 {
+    block-size: 4cqi;
+    display: flex;
+  }
+
+  .sti-OgImage-logo-3b5a2 > :is(svg, img) {
+    block-size: 100%;
+    inline-size: auto;
+  }
+
+  .sti-OgImage-eyebrow-f7d7c {
+    color: var(--sti-fg-accent-strong);
+    font-size: 2.4cqi;
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-OgImage-canvas-dc2d4[data-tone="accent"] .sti-OgImage-eyebrow-f7d7c {
+    color: inherit;
+  }
+
+  .sti-OgImage-title-f6ec9 {
+    font-family: var(--sti-font-display);
+    font-size: 6cqi;
+    font-weight: var(--sti-font-weight-bold);
+    text-wrap: balance;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    margin: 0;
+    line-height: 1.1;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .sti-OgImage-footer-f4351 {
+    color: var(--sti-fg-muted);
+    margin: 0;
+    font-size: 2.4cqi;
+  }
+
+  .sti-OgImage-canvas-dc2d4[data-tone="accent"] .sti-OgImage-footer-f4351 {
+    color: inherit;
+  }
+}

package/dist/site/OgImage/OgImage.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+export interface OgImageProps {
+  title: string;
+  /** Üst etiket ("Blog", "Vaka çalışması"). */
+  eyebrow?: string;
+  /** Alt satır (yazar, tarih, alan adı). */
+  footer?: string;
+  /** Sol üstte marka işareti (logo). */
+  logo?: ReactNode;
+  /** `light`, `dark` ya da `accent` (turkuaz) zemin. */
+  tone?: "light" | "dark" | "accent";
+  className?: string;
+  id?: string;
+}
+/**
+ * Paylaşım görseli düzeni (1200×630, Open Graph): marka, üst etiket, büyük başlık ve alt satır.
+ * Sayfada önizleme olarak çizilir (kap genişliğine ölçeklenir) ya da ekran görüntüsü alınarak
+ * görsele dönüştürülür. `next/og` için satır içi stilli karşılığı `ogImageElement` ile üretilir.
+ */
+export declare function OgImage({ title, eyebrow, footer, logo, tone, className, id }: OgImageProps): import("react").JSX.Element;
+/**
+ * `next/og` `ImageResponse` için öğe: aynı düzen, Satori'nin desteklediği satır içi stillerle.
+ * Yalnız sunucuda görsel üretiminde kullanılır; sayfa DOM'una konmaz (CSP satır içi stil yasağı
+ * yalnız DOM için geçerlidir). Yazı tipleri `ImageResponse` seçenekleriyle verilir.
+ */
+export declare function ogImageElement({ title, eyebrow, footer, tone }: Omit<OgImageProps, "logo" | "className" | "id">): import("react").JSX.Element;

package/dist/site/OgImage/OgImage.js

@@ -0,0 +1,110 @@
+import OgImage_module_default from "./OgImage.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/site/OgImage/OgImage.tsx
+/**
+* Paylaşım görseli düzeni (1200×630, Open Graph): marka, üst etiket, büyük başlık ve alt satır.
+* Sayfada önizleme olarak çizilir (kap genişliğine ölçeklenir) ya da ekran görüntüsü alınarak
+* görsele dönüştürülür. `next/og` için satır içi stilli karşılığı `ogImageElement` ile üretilir.
+*/
+function OgImage({ title, eyebrow, footer, logo, tone = "dark", className, id }) {
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [OgImage_module_default.frame, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: OgImage_module_default.canvas,
+			"data-tone": tone,
+			...tone === "dark" ? { "data-theme": "dark" } : tone === "light" ? { "data-theme": "light" } : {},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: OgImage_module_default.top,
+					children: [logo ? /* @__PURE__ */ jsx("div", {
+						className: OgImage_module_default.logo,
+						children: logo
+					}) : null, eyebrow ? /* @__PURE__ */ jsx("p", {
+						className: OgImage_module_default.eyebrow,
+						children: eyebrow
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: OgImage_module_default.title,
+					children: title
+				}),
+				footer ? /* @__PURE__ */ jsx("p", {
+					className: OgImage_module_default.footer,
+					children: footer
+				}) : null
+			]
+		})
+	});
+}
+/** `next/og` ImageResponse için renk paleti (satır içi stil kullanılır; DOM'a konmaz). */
+const OG_COLORS = {
+	dark: {
+		bg: "#0b0b0c",
+		fg: "#f2f1ed",
+		muted: "#a1a1aa",
+		accent: "#50c2f6"
+	},
+	light: {
+		bg: "#fcfcfc",
+		fg: "#19191d",
+		muted: "#5f5f66",
+		accent: "#055e7f"
+	},
+	accent: {
+		bg: "#50c2f6",
+		fg: "#0b0b0c",
+		muted: "#0b2a38",
+		accent: "#0b0b0c"
+	}
+};
+/**
+* `next/og` `ImageResponse` için öğe: aynı düzen, Satori'nin desteklediği satır içi stillerle.
+* Yalnız sunucuda görsel üretiminde kullanılır; sayfa DOM'una konmaz (CSP satır içi stil yasağı
+* yalnız DOM için geçerlidir). Yazı tipleri `ImageResponse` seçenekleriyle verilir.
+*/
+function ogImageElement({ title, eyebrow, footer, tone = "dark" }) {
+	const c = OG_COLORS[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "space-between",
+			width: 1200,
+			height: 630,
+			padding: 72,
+			background: c.bg,
+			color: c.fg
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					fontSize: 28,
+					fontWeight: 600,
+					color: c.accent
+				},
+				children: eyebrow ?? ""
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					fontSize: 72,
+					fontWeight: 700,
+					lineHeight: 1.1,
+					letterSpacing: -1.5
+				},
+				children: title
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					fontSize: 28,
+					color: c.muted
+				},
+				children: footer ?? ""
+			})
+		]
+	});
+}
+export { OgImage, ogImageElement };

package/dist/site/OgImage/OgImage.module.js

@@ -0,0 +1,12 @@
+import './OgImage.css';
+// src/site/OgImage/OgImage.module.css
+var OgImage_module_default = {
+	"frame": "sti-OgImage-frame-6a72b",
+	"canvas": "sti-OgImage-canvas-dc2d4",
+	"top": "sti-OgImage-top-0bb00",
+	"logo": "sti-OgImage-logo-3b5a2",
+	"eyebrow": "sti-OgImage-eyebrow-f7d7c",
+	"title": "sti-OgImage-title-f6ec9",
+	"footer": "sti-OgImage-footer-f4351"
+};
+export { OgImage_module_default as default };

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

@@ -0,0 +1,2 @@
+import { OgImage, OgImageProps, ogImageElement } from "./OgImage.js";
+export { OgImage, OgImageProps, ogImageElement };

package/dist/site/PortfolioGrid/PortfolioGrid.css

@@ -0,0 +1,117 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PortfolioGrid-filter-19a29 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-3) var(--sti-space-6);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-PortfolioGrid-count-1082b {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-PortfolioGrid-grid-cf3b3 {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+    grid-auto-flow: dense;
+    gap: var(--sti-space-8) var(--sti-space-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-PortfolioGrid-card-2fa01 {
+    gap: var(--sti-space-3);
+    border-radius: var(--sti-radius-lg);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-PortfolioGrid-card-2fa01:has(.sti-PortfolioGrid-link-31400:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-PortfolioGrid-media-6823e {
+    aspect-ratio: 4 / 3;
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    overflow: hidden;
+  }
+
+  .sti-PortfolioGrid-image-99697 {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    transition: scale var(--sti-duration-slow) var(--sti-ease-standard);
+    display: block;
+  }
+
+  .sti-PortfolioGrid-card-2fa01:hover .sti-PortfolioGrid-image-99697 {
+    scale: 1.04;
+  }
+
+  .sti-PortfolioGrid-body-0f371 {
+    gap: var(--sti-space-1);
+    display: grid;
+  }
+
+  .sti-PortfolioGrid-meta-b72be {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-PortfolioGrid-title-9e139 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    margin: 0;
+  }
+
+  .sti-PortfolioGrid-link-31400 {
+    color: inherit;
+    outline: none;
+    text-decoration: none;
+  }
+
+  .sti-PortfolioGrid-link-31400:after {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-PortfolioGrid-card-2fa01:hover .sti-PortfolioGrid-link-31400 {
+    text-underline-offset: .2em;
+    text-decoration: underline;
+  }
+
+  @media (width >= 48rem) {
+    .sti-PortfolioGrid-card-2fa01[data-featured] {
+      grid-area: span 2 / span 2;
+    }
+
+    .sti-PortfolioGrid-card-2fa01[data-featured] .sti-PortfolioGrid-media-6823e {
+      aspect-ratio: auto;
+      flex: 1;
+      min-block-size: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-PortfolioGrid-image-99697 {
+      transition: none;
+    }
+
+    .sti-PortfolioGrid-card-2fa01:hover .sti-PortfolioGrid-image-99697 {
+      scale: none;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+import { SiteSectionHeadProps } from "../_internal/SiteSection.js";
+import { ReactNode } from "react";
+export interface PortfolioItem {
+  id: string;
+  title: ReactNode;
+  client: string;
+  /** Süzgeç kategorisi ("Sosyal medya"). */
+  category: string;
+  image: string;
+  href: string;
+  /** Geniş kapta iki sütun kaplar. */
+  featured?: boolean;
+}
+export interface PortfolioGridProps extends SiteSectionHeadProps {
+  items: readonly PortfolioItem[];
+  /** Kategori süzgeci. Varsayılan `true` (iki ve daha fazla kategori varsa). */
+  filterable?: boolean;
+  label?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Portföy ızgarası: görsel ağırlıklı çalışma kartları ve kategori süzgeci. Kartın üstünde görsel,
+ * altında müşteri ve başlık; bütün kart çalışma sayfasına gider. Süzgeç değişince gösterilen
+ * çalışma sayısı ekran okuyucuya bildirilir.
+ */
+export declare function PortfolioGrid({ items, filterable, label, className, id, ...head }: PortfolioGridProps): import("react").JSX.Element;

package/dist/site/PortfolioGrid/PortfolioGrid.js

@@ -0,0 +1,90 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { ToggleGroup, ToggleGroupItem } from "../../components/ToggleGroup/ToggleGroup.js";
+import { SiteSection } from "../_internal/SiteSection.js";
+import PortfolioGrid_module_default from "./PortfolioGrid.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from "react";
+// src/site/PortfolioGrid/PortfolioGrid.tsx
+/**
+* Portföy ızgarası: görsel ağırlıklı çalışma kartları ve kategori süzgeci. Kartın üstünde görsel,
+* altında müşteri ve başlık; bütün kart çalışma sayfasına gider. Süzgeç değişince gösterilen
+* çalışma sayısı ekran okuyucuya bildirilir.
+*/
+function PortfolioGrid({ items, filterable = true, label, className, id, ...head }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const ALL = "__all";
+	const [category, setCategory] = useState(ALL);
+	const categories = useMemo(() => [...new Set(items.map((i) => i.category))], [items]);
+	const shown = category === ALL ? items : items.filter((i) => i.category === category);
+	const showFilter = filterable && categories.length > 1;
+	const statusId = useId();
+	return /* @__PURE__ */ jsxs(SiteSection, {
+		id,
+		label,
+		className,
+		...head,
+		children: [showFilter ? /* @__PURE__ */ jsxs("div", {
+			className: PortfolioGrid_module_default.filter,
+			children: [/* @__PURE__ */ jsxs(ToggleGroup, {
+				label: t.sitePortfolioFilter,
+				value: category,
+				onChange: (v) => setCategory(v ?? ALL),
+				disallowEmptySelection: true,
+				size: "sm",
+				children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+					value: ALL,
+					children: t.sitePortfolioAll
+				}), categories.map((c) => /* @__PURE__ */ jsx(ToggleGroupItem, {
+					value: c,
+					children: c
+				}, c))]
+			}), /* @__PURE__ */ jsx("output", {
+				id: statusId,
+				className: PortfolioGrid_module_default.count,
+				"aria-live": "polite",
+				children: template(t.sitePortfolioCount, { count: f.number(shown.length) })
+			})]
+		}) : null, /* @__PURE__ */ jsx("ul", {
+			className: PortfolioGrid_module_default.grid,
+			children: shown.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: PortfolioGrid_module_default.card,
+				"data-featured": item.featured ? "" : void 0,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: PortfolioGrid_module_default.media,
+					children: /* @__PURE__ */ jsx("img", {
+						className: PortfolioGrid_module_default.image,
+						src: item.image,
+						alt: "",
+						loading: "lazy"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: PortfolioGrid_module_default.body,
+					children: [/* @__PURE__ */ jsxs("p", {
+						className: PortfolioGrid_module_default.meta,
+						children: [
+							item.client,
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: "·"
+							}),
+							" ",
+							item.category
+						]
+					}), /* @__PURE__ */ jsx("h3", {
+						className: PortfolioGrid_module_default.title,
+						children: /* @__PURE__ */ jsx("a", {
+							className: PortfolioGrid_module_default.link,
+							href: item.href,
+							children: item.title
+						})
+					})]
+				})]
+			}, item.id))
+		})]
+	});
+}
+export { PortfolioGrid };