@stisocial/ui 0.1.0 → 0.2.0

package/dist/site/SiteHeader/SiteHeader.d.ts

@@ -0,0 +1,40 @@
+import { MegaMenuFeatured, MegaMenuGroup } from "../MegaMenu/MegaMenu.js";
+import { ReactNode } from "react";
+export interface SiteNavItem {
+  label: string;
+  /** Doğrudan bağlantı; `menu` verilirse yoktur. */
+  href?: string;
+  /** Bulunulan sayfa (`aria-current="page"`). */
+  isCurrent?: boolean;
+  /** Büyük açılır menü grupları. */
+  menu?: readonly MegaMenuGroup[];
+  featured?: MegaMenuFeatured;
+}
+export interface SiteHeaderProps {
+  /** Marka: logo ya da ad (görsel ya da metin). */
+  brand: ReactNode;
+  /** Markanın gittiği adres; varsayılan `/`. */
+  brandHref?: string;
+  /** Marka bağlantısının adı ("stisocial ana sayfa"). Zorunlu: marka görseli tek başına ad vermez. */
+  brandLabel: string;
+  items: readonly SiteNavItem[];
+  /** Sağ taraftaki eylemler (giriş bağlantısı, birincil düğme). Mobil menüde de gösterilir. */
+  actions?: ReactNode;
+  /** Gezinme bölgesinin adı; varsayılan "Ana gezinme". */
+  label?: string;
+  /** Sayfa kaydırılınca üstte kalır. */
+  sticky?: boolean;
+  /** `transparent`: kaydırılana ya da menü açılana kadar zemin saydamdır (hero üstünde). */
+  variant?: "solid" | "transparent";
+  /** Mobil menü ilk çizimde açık (örnekler ve testler için). */
+  defaultMenuOpen?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Site üst bilgisi: marka, ana gezinme (bağlantılar ve MegaMenu), eylemler. Geniş kapsayıcıda tek
+ * satırdır; dar kapsayıcıda gezinme menü düğmesinin açtığı panele taşınır (APG "Disclosure
+ * Navigation Menu": düğme `aria-expanded`; Escape kapatır ve odağı düğmeye verir).
+ * Kapsayıcı sorgusu kullanır: üst bilgi dar bir önizlemede de doğru dizilir.
+ */
+export declare function SiteHeader({ brand, brandHref, brandLabel, items, actions, label, sticky, variant, defaultMenuOpen, className, id }: SiteHeaderProps): import("react").JSX.Element;

package/dist/site/SiteHeader/SiteHeader.js

@@ -0,0 +1,115 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { CloseIcon } from "../../icons/generated/CloseIcon.js";
+import { MenuIcon } from "../../icons/generated/MenuIcon.js";
+import { MegaMenu } from "../MegaMenu/MegaMenu.js";
+import SiteHeader_module_default from "./SiteHeader.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button, Link } from "react-aria-components";
+// src/site/SiteHeader/SiteHeader.tsx
+/**
+* Site üst bilgisi: marka, ana gezinme (bağlantılar ve MegaMenu), eylemler. Geniş kapsayıcıda tek
+* satırdır; dar kapsayıcıda gezinme menü düğmesinin açtığı panele taşınır (APG "Disclosure
+* Navigation Menu": düğme `aria-expanded`; Escape kapatır ve odağı düğmeye verir).
+* Kapsayıcı sorgusu kullanır: üst bilgi dar bir önizlemede de doğru dizilir.
+*/
+function SiteHeader({ brand, brandHref = "/", brandLabel, items, actions, label, sticky = true, variant = "solid", defaultMenuOpen = false, className, id }) {
+	const t = useMessages();
+	const panelId = useId();
+	const [open, setOpen] = useState(defaultMenuOpen);
+	const [scrolled, setScrolled] = useState(false);
+	const buttonRef = useRef(null);
+	useEffect(() => {
+		const onScroll = () => setScrolled(window.scrollY > 8);
+		onScroll();
+		window.addEventListener("scroll", onScroll, { passive: true });
+		return () => window.removeEventListener("scroll", onScroll);
+	}, []);
+	const onKeyDown = (event) => {
+		if (event.key === "Escape" && open) {
+			setOpen(false);
+			buttonRef.current?.focus();
+		}
+	};
+	const navLabel = label ?? t.siteNavigation;
+	const link = (item, onPress) => /* @__PURE__ */ jsx(Link, {
+		href: item.href ?? "#",
+		className: SiteHeader_module_default.link,
+		"aria-current": item.isCurrent ? "page" : void 0,
+		onPress,
+		children: item.label
+	});
+	return /* @__PURE__ */ jsxs("header", {
+		id,
+		className: [SiteHeader_module_default.root, className].filter(Boolean).join(" "),
+		"data-sticky": sticky || void 0,
+		"data-variant": variant,
+		"data-scrolled": scrolled || void 0,
+		"data-open": open || void 0,
+		onKeyDown,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: SiteHeader_module_default.bar,
+			children: [
+				/* @__PURE__ */ jsx(Link, {
+					href: brandHref,
+					className: SiteHeader_module_default.brand,
+					"aria-label": brandLabel,
+					children: brand
+				}),
+				/* @__PURE__ */ jsx("nav", {
+					className: SiteHeader_module_default.nav,
+					"aria-label": navLabel,
+					children: /* @__PURE__ */ jsx("ul", {
+						className: SiteHeader_module_default.list,
+						children: items.map((item) => /* @__PURE__ */ jsx("li", {
+							className: SiteHeader_module_default.listItem,
+							children: item.menu ? /* @__PURE__ */ jsx(MegaMenu, {
+								label: item.label,
+								groups: item.menu,
+								featured: item.featured
+							}) : link(item)
+						}, item.label))
+					})
+				}),
+				actions ? /* @__PURE__ */ jsx("div", {
+					className: SiteHeader_module_default.actions,
+					children: actions
+				}) : null,
+				/* @__PURE__ */ jsx(Button, {
+					ref: buttonRef,
+					className: SiteHeader_module_default.menuButton,
+					"aria-expanded": open,
+					"aria-controls": panelId,
+					"aria-label": open ? t.siteMenuClose : t.siteMenuOpen,
+					onPress: () => setOpen(!open),
+					children: open ? /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MenuIcon, { "aria-hidden": "true" })
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			id: panelId,
+			className: SiteHeader_module_default.panel,
+			hidden: !open,
+			children: [/* @__PURE__ */ jsx("nav", {
+				className: SiteHeader_module_default.mobileNav,
+				"aria-label": navLabel,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: SiteHeader_module_default.mobileList,
+					children: items.map((item) => /* @__PURE__ */ jsx("li", {
+						className: SiteHeader_module_default.mobileItem,
+						children: item.menu ? /* @__PURE__ */ jsx(MegaMenu, {
+							label: item.label,
+							groups: item.menu,
+							featured: item.featured,
+							inline: true
+						}) : link(item, () => setOpen(false))
+					}, item.label))
+				})
+			}), actions ? /* @__PURE__ */ jsx("div", {
+				className: SiteHeader_module_default.mobileActions,
+				children: actions
+			}) : null]
+		})]
+	});
+}
+export { SiteHeader };

package/dist/site/SiteHeader/SiteHeader.module.js

@@ -0,0 +1,18 @@
+import './SiteHeader.css';
+// src/site/SiteHeader/SiteHeader.module.css
+var SiteHeader_module_default = {
+	"root": "sti-SiteHeader-root-cbb15",
+	"bar": "sti-SiteHeader-bar-22cb7",
+	"brand": "sti-SiteHeader-brand-c45d2",
+	"link": "sti-SiteHeader-link-49b41",
+	"menuButton": "sti-SiteHeader-menuButton-d6e8b",
+	"nav": "sti-SiteHeader-nav-f3ca8",
+	"actions": "sti-SiteHeader-actions-1c0c1",
+	"list": "sti-SiteHeader-list-63da3",
+	"mobileList": "sti-SiteHeader-mobileList-924f6",
+	"listItem": "sti-SiteHeader-listItem-0ce78",
+	"mobileItem": "sti-SiteHeader-mobileItem-a76d6",
+	"panel": "sti-SiteHeader-panel-cefd7",
+	"mobileActions": "sti-SiteHeader-mobileActions-aa606"
+};
+export { SiteHeader_module_default as default };

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

@@ -0,0 +1,2 @@
+import { SiteHeader, SiteHeaderProps, SiteNavItem } from "./SiteHeader.js";
+export { SiteHeader, SiteHeaderProps, SiteNavItem };

package/dist/site/StickyCta/StickyCta.css

@@ -0,0 +1,112 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-StickyCta-root-e7a73 {
+    z-index: var(--sti-z-sticky);
+    box-sizing: border-box;
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-lg);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--sti-duration-base) var(--sti-ease-out),
+      transform var(--sti-duration-base) var(--sti-ease-out),
+      visibility 0s linear var(--sti-duration-base);
+    padding-block-end: env(safe-area-inset-bottom, 0);
+    display: none;
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline: 0;
+    transform: translateY(100%);
+  }
+
+  .sti-StickyCta-root-e7a73[data-visible] {
+    opacity: 1;
+    visibility: visible;
+    transition-delay: 0s;
+    transform: none;
+  }
+
+  @media (width <= 47.9375rem) {
+    .sti-StickyCta-root-e7a73 {
+      display: block;
+    }
+  }
+
+  .sti-StickyCta-root-e7a73[data-desktop] {
+    display: block;
+  }
+
+  .sti-StickyCta-inner-439e3 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    max-inline-size: var(--sti-width-container);
+    padding: var(--sti-space-3) var(--sti-gutter);
+    flex-wrap: wrap;
+    margin-inline: auto;
+    display: flex;
+  }
+
+  .sti-StickyCta-description-25535 {
+    min-inline-size: 0;
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    flex: 10rem;
+    margin: 0;
+  }
+
+  .sti-StickyCta-action-db65c {
+    flex: 8rem;
+    min-inline-size: 0;
+  }
+
+  .sti-StickyCta-close-2847b {
+    inline-size: var(--sti-control-h-md);
+    block-size: var(--sti-control-h-md);
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .sti-StickyCta-close-2847b[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  @media (hover: hover) {
+    .sti-StickyCta-close-2847b[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+      color: var(--sti-fg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-StickyCta-root-e7a73 {
+      transition: none;
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-StickyCta-root-e7a73 {
+      border-block-start-color: canvastext;
+    }
+
+    .sti-StickyCta-close-2847b[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/site/StickyCta/StickyCta.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+export interface StickyCtaProps {
+  /** Eylem düğmesinin metni ("Teklif alın"). */
+  label: string;
+  /** Verilirse düğme bağlantı olur. */
+  href?: string;
+  onPress?: () => void;
+  /** Düğmenin yanında kısa metin ("Ücretsiz keşif görüşmesi"). */
+  description?: ReactNode;
+  /** Kaydırma bu değeri (piksel) aşınca görünür. Varsayılan 240. */
+  showAfter?: number;
+  /** Görünürlüğü uygulama belirler (kaydırma yok sayılır). */
+  isVisible?: boolean;
+  /** Geniş ekranda da görünür; varsayılan yalnız dar ekranda (mobil). */
+  showOnDesktop?: boolean;
+  /** Kapatma düğmesi çizilir; kapatılınca bu sayfa görünümünde yeniden çıkmaz. */
+  isDismissible?: boolean;
+  onDismiss?: () => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Mobilde ekranın altına yapışan eylem çubuğu: kısa metin ve tek birincil düğme. Sayfa
+ * `showAfter` piksel kaydırılınca beliren çubuk, görünmezken odak sırasından çıkar. Güvenli alan
+ * (çentik, ana ekran çubuğu) boşluğu eklenir. Geniş ekranda gizlidir (`showOnDesktop` ile açılır).
+ */
+export declare function StickyCta({ label, href, onPress, description, showAfter, isVisible, showOnDesktop, isDismissible, onDismiss, className, id }: StickyCtaProps): import("react").JSX.Element | null;

package/dist/site/StickyCta/StickyCta.js

@@ -0,0 +1,69 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { CloseIcon } from "../../icons/generated/CloseIcon.js";
+import { Button as Button$1 } from "../../components/Button/Button.js";
+import StickyCta_module_default from "./StickyCta.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button } from "react-aria-components";
+// src/site/StickyCta/StickyCta.tsx
+/**
+* Mobilde ekranın altına yapışan eylem çubuğu: kısa metin ve tek birincil düğme. Sayfa
+* `showAfter` piksel kaydırılınca beliren çubuk, görünmezken odak sırasından çıkar. Güvenli alan
+* (çentik, ana ekran çubuğu) boşluğu eklenir. Geniş ekranda gizlidir (`showOnDesktop` ile açılır).
+*/
+function StickyCta({ label, href, onPress, description, showAfter = 240, isVisible, showOnDesktop = false, isDismissible = false, onDismiss, className, id }) {
+	const t = useMessages();
+	const [scrolled, setScrolled] = useState(false);
+	const [dismissed, setDismissed] = useState(false);
+	useEffect(() => {
+		if (isVisible !== void 0) return;
+		const onScroll = () => setScrolled(window.scrollY > showAfter);
+		onScroll();
+		window.addEventListener("scroll", onScroll, { passive: true });
+		return () => window.removeEventListener("scroll", onScroll);
+	}, [showAfter, isVisible]);
+	if (dismissed) return null;
+	const visible = isVisible ?? scrolled;
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [StickyCta_module_default.root, className].filter(Boolean).join(" "),
+		"data-visible": visible || void 0,
+		"data-desktop": showOnDesktop || void 0,
+		"aria-hidden": visible ? void 0 : true,
+		inert: visible ? void 0 : true,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: StickyCta_module_default.inner,
+			children: [
+				description ? /* @__PURE__ */ jsx("p", {
+					className: StickyCta_module_default.description,
+					children: description
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: StickyCta_module_default.action,
+					children: href ? /* @__PURE__ */ jsx(Button$1, {
+						variant: "primary",
+						href,
+						fullWidth: true,
+						children: label
+					}) : /* @__PURE__ */ jsx(Button$1, {
+						variant: "primary",
+						onPress,
+						fullWidth: true,
+						children: label
+					})
+				}),
+				isDismissible ? /* @__PURE__ */ jsx(Button, {
+					className: StickyCta_module_default.close,
+					"aria-label": t.stickyCtaDismiss,
+					onPress: () => {
+						setDismissed(true);
+						onDismiss?.();
+					},
+					children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" })
+				}) : null
+			]
+		})
+	});
+}
+export { StickyCta };

package/dist/site/StickyCta/StickyCta.module.js

@@ -0,0 +1,10 @@
+import './StickyCta.css';
+// src/site/StickyCta/StickyCta.module.css
+var StickyCta_module_default = {
+	"root": "sti-StickyCta-root-e7a73",
+	"inner": "sti-StickyCta-inner-439e3",
+	"description": "sti-StickyCta-description-25535",
+	"action": "sti-StickyCta-action-db65c",
+	"close": "sti-StickyCta-close-2847b"
+};
+export { StickyCta_module_default as default };

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

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

package/dist/site/index.d.ts

@@ -0,0 +1,11 @@
+import { AnnouncementBar, AnnouncementBarProps, AnnouncementTone } from "./AnnouncementBar/AnnouncementBar.js";
+import "./AnnouncementBar/index.js";
+import { MegaMenu, MegaMenuFeatured, MegaMenuGroup, MegaMenuItem, MegaMenuProps } from "./MegaMenu/MegaMenu.js";
+import "./MegaMenu/index.js";
+import { SiteFooter, SiteFooterColumn, SiteFooterLink, SiteFooterProps } from "./SiteFooter/SiteFooter.js";
+import "./SiteFooter/index.js";
+import { SiteHeader, SiteHeaderProps, SiteNavItem } from "./SiteHeader/SiteHeader.js";
+import "./SiteHeader/index.js";
+import { StickyCta, StickyCtaProps } from "./StickyCta/StickyCta.js";
+import "./StickyCta/index.js";
+export { AnnouncementBar, AnnouncementBarProps, AnnouncementTone, MegaMenu, MegaMenuFeatured, MegaMenuGroup, MegaMenuItem, MegaMenuProps, SiteFooter, SiteFooterColumn, SiteFooterLink, SiteFooterProps, SiteHeader, SiteHeaderProps, SiteNavItem, StickyCta, StickyCtaProps };

package/dist/site/index.js

@@ -0,0 +1,6 @@
+import { AnnouncementBar } from "./AnnouncementBar/AnnouncementBar.js";
+import { MegaMenu } from "./MegaMenu/MegaMenu.js";
+import { SiteFooter } from "./SiteFooter/SiteFooter.js";
+import { SiteHeader } from "./SiteHeader/SiteHeader.js";
+import { StickyCta } from "./StickyCta/StickyCta.js";
+export { AnnouncementBar, MegaMenu, SiteFooter, SiteHeader, StickyCta };