@stisocial/ui 0.1.0 → 0.2.1

package/dist/site/AnnouncementBar/AnnouncementBar.css

@@ -0,0 +1,132 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AnnouncementBar-root-05c61 {
+    --sti-announcement-bg: var(--sti-fill-accent);
+    --sti-announcement-fg: var(--sti-fg-on-accent);
+    --sti-announcement-border: transparent;
+    --sti-announcement-ring: var(--sti-fg-on-accent);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--sti-control-h-md);
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-space-4);
+    border-block-end: var(--sti-border-width) solid var(--sti-announcement-border);
+    background: var(--sti-announcement-bg);
+    color: var(--sti-announcement-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    text-align: center;
+    position: relative;
+  }
+
+  .sti-AnnouncementBar-root-05c61[data-tone="inverse"] {
+    --sti-announcement-bg: var(--sti-bg-inverse);
+    --sti-announcement-fg: var(--sti-fg-inverse);
+    --sti-announcement-ring: var(--sti-fg-inverse);
+  }
+
+  .sti-AnnouncementBar-root-05c61[data-tone="neutral"] {
+    --sti-announcement-bg: var(--sti-bg-subtle);
+    --sti-announcement-fg: var(--sti-fg);
+    --sti-announcement-border: var(--sti-border-subtle);
+    --sti-announcement-ring: var(--sti-focus-ring);
+  }
+
+  .sti-AnnouncementBar-root-05c61[data-dismissible] {
+    padding-inline: calc(var(--sti-control-h-md) + var(--sti-space-2));
+  }
+
+  .sti-AnnouncementBar-text-d2b83 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-1) var(--sti-space-3);
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-AnnouncementBar-message-4bbf3 {
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-AnnouncementBar-link-8de73 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    border-radius: var(--sti-radius-xs);
+    color: inherit;
+    font-weight: var(--sti-font-weight-semibold);
+    text-underline-offset: var(--sti-link-underline-offset);
+    cursor: pointer;
+    outline: none;
+    text-decoration: underline;
+    display: inline-flex;
+  }
+
+  .sti-AnnouncementBar-arrow-28fa6 {
+    font-size: var(--sti-icon-sm);
+    transition: transform var(--sti-duration-fast) var(--sti-ease-out);
+    flex: none;
+  }
+
+  .sti-AnnouncementBar-link-8de73[data-focus-visible], .sti-AnnouncementBar-close-ad9bf[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-announcement-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-AnnouncementBar-close-ad9bf {
+    inline-size: var(--sti-control-h-md);
+    block-size: var(--sti-control-h-md);
+    border-radius: var(--sti-radius-md);
+    color: inherit;
+    font-size: var(--sti-icon-md);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    margin-block: auto;
+    padding: 0;
+    display: inline-flex;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--sti-space-1);
+  }
+
+  @media (hover: hover) {
+    .sti-AnnouncementBar-close-ad9bf[data-hovered] {
+      background: color-mix(in srgb, currentcolor 14%, transparent);
+    }
+
+    .sti-AnnouncementBar-link-8de73[data-hovered] .sti-AnnouncementBar-arrow-28fa6 {
+      transform: translateX(var(--sti-space-0-5));
+    }
+  }
+
+  .sti-AnnouncementBar-close-ad9bf[data-pressed] {
+    background: color-mix(in srgb, currentcolor 22%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-AnnouncementBar-arrow-28fa6 {
+      transition: none;
+    }
+
+    .sti-AnnouncementBar-link-8de73[data-hovered] .sti-AnnouncementBar-arrow-28fa6 {
+      transform: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-AnnouncementBar-root-05c61 {
+      border-block-end-color: canvastext;
+    }
+
+    .sti-AnnouncementBar-link-8de73[data-focus-visible], .sti-AnnouncementBar-close-ad9bf[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/site/AnnouncementBar/AnnouncementBar.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+export type AnnouncementTone = "accent" | "inverse" | "neutral";
+export interface AnnouncementBarProps {
+  /** Duyuru metni (bir cümle). */
+  children: ReactNode;
+  /** Duyurunun gittiği adres; verilirse `linkLabel` ile bağlantı çizilir. */
+  href?: string;
+  /** Bağlantı metni ("Kampanyayı inceleyin"); gidilen yeri anlatır. */
+  linkLabel?: string;
+  /** Zemin: `accent` turkuaz dolgu, `inverse` ters renk, `neutral` sakin yüzey. Varsayılan `accent`. */
+  tone?: AnnouncementTone;
+  /** Bölgenin adı; varsayılan "Duyuru". */
+  label?: string;
+  /** Kapatma düğmesi çizilir. Varsayılan `true`. */
+  isDismissible?: boolean;
+  /** Kapatıldığında. */
+  onDismiss?: () => void;
+  /** Kapatma bu cihazda hatırlanır (yerel depolama); duyuru değişince anahtar da değişir. */
+  dismissKey?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Sayfanın en üstünde kampanya ve haber duyurusu şeridi: ortalı kısa metin, isteğe bağlı bağlantı,
+ * kapatma düğmesi. Adlı bölgedir; kapatma `dismissKey` ile bu cihazda hatırlanır. Dar ekranda metin
+ * satıra sarılır, şerit yüksekliği içeriğe göre büyür.
+ */
+export declare function AnnouncementBar({ children, href, linkLabel, tone, label, isDismissible, onDismiss, dismissKey, className, id }: AnnouncementBarProps): import("react").JSX.Element | null;

package/dist/site/AnnouncementBar/AnnouncementBar.js

@@ -0,0 +1,64 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { CloseIcon } from "../../icons/generated/CloseIcon.js";
+import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
+import AnnouncementBar_module_default from "./AnnouncementBar.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Button, Link } from "react-aria-components";
+// src/site/AnnouncementBar/AnnouncementBar.tsx
+const PREFIX = "sti-announcement:";
+function wasDismissed(key) {
+	try {
+		return window.localStorage.getItem(PREFIX + key) === "1";
+	} catch {
+		return false;
+	}
+}
+/**
+* Sayfanın en üstünde kampanya ve haber duyurusu şeridi: ortalı kısa metin, isteğe bağlı bağlantı,
+* kapatma düğmesi. Adlı bölgedir; kapatma `dismissKey` ile bu cihazda hatırlanır. Dar ekranda metin
+* satıra sarılır, şerit yüksekliği içeriğe göre büyür.
+*/
+function AnnouncementBar({ children, href, linkLabel, tone = "accent", label, isDismissible = true, onDismiss, dismissKey, className, id }) {
+	const t = useMessages();
+	const [dismissed, setDismissed] = useState(false);
+	useEffect(() => {
+		if (dismissKey && wasDismissed(dismissKey)) setDismissed(true);
+	}, [dismissKey]);
+	if (dismissed) return null;
+	const dismiss = () => {
+		setDismissed(true);
+		if (dismissKey) try {
+			window.localStorage.setItem(PREFIX + dismissKey, "1");
+		} catch {}
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"aria-label": label ?? t.announcementRegion,
+		className: [AnnouncementBar_module_default.root, className].filter(Boolean).join(" "),
+		"data-tone": tone,
+		"data-dismissible": isDismissible || void 0,
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: AnnouncementBar_module_default.text,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: AnnouncementBar_module_default.message,
+				children
+			}), href && linkLabel ? /* @__PURE__ */ jsxs(Link, {
+				href,
+				className: AnnouncementBar_module_default.link,
+				children: [linkLabel, /* @__PURE__ */ jsx(ArrowRightIcon, {
+					className: AnnouncementBar_module_default.arrow,
+					"aria-hidden": "true"
+				})]
+			}) : null]
+		}), isDismissible ? /* @__PURE__ */ jsx(Button, {
+			className: AnnouncementBar_module_default.close,
+			"aria-label": t.announcementDismiss,
+			onPress: dismiss,
+			children: /* @__PURE__ */ jsx(CloseIcon, { "aria-hidden": "true" })
+		}) : null]
+	});
+}
+export { AnnouncementBar };

package/dist/site/AnnouncementBar/AnnouncementBar.module.js

@@ -0,0 +1,11 @@
+import './AnnouncementBar.css';
+// src/site/AnnouncementBar/AnnouncementBar.module.css
+var AnnouncementBar_module_default = {
+	"root": "sti-AnnouncementBar-root-05c61",
+	"text": "sti-AnnouncementBar-text-d2b83",
+	"message": "sti-AnnouncementBar-message-4bbf3",
+	"link": "sti-AnnouncementBar-link-8de73",
+	"arrow": "sti-AnnouncementBar-arrow-28fa6",
+	"close": "sti-AnnouncementBar-close-ad9bf"
+};
+export { AnnouncementBar_module_default as default };

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

@@ -0,0 +1,2 @@
+import { AnnouncementBar, AnnouncementBarProps, AnnouncementTone } from "./AnnouncementBar.js";
+export { AnnouncementBar, AnnouncementBarProps, AnnouncementTone };

package/dist/site/MegaMenu/MegaMenu.css

@@ -0,0 +1,324 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MegaMenu-root-3a7a0 {
+    --sti-mega-radius: var(--sti-radius-md);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    color: var(--sti-fg);
+  }
+
+  .sti-MegaMenu-trigger-2b51a {
+    align-items: center;
+    gap: var(--sti-space-1);
+    box-sizing: border-box;
+    min-block-size: var(--sti-control-h-md);
+    padding-inline: var(--sti-space-3);
+    border-radius: var(--sti-mega-radius);
+    color: inherit;
+    font: inherit;
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-medium);
+    cursor: pointer;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-out);
+    background: none;
+    border: 0;
+    outline: none;
+    display: inline-flex;
+  }
+
+  .sti-MegaMenu-root-3a7a0[data-inline] .sti-MegaMenu-trigger-2b51a {
+    justify-content: space-between;
+    inline-size: 100%;
+  }
+
+  .sti-MegaMenu-triggerLabel-b66a7 {
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+  }
+
+  .sti-MegaMenu-chevron-2dbe1 {
+    font-size: var(--sti-icon-sm);
+    color: var(--sti-fg-muted);
+    transition: transform var(--sti-duration-base) var(--sti-ease-out);
+    flex: none;
+  }
+
+  .sti-MegaMenu-root-3a7a0[data-open] .sti-MegaMenu-chevron-2dbe1 {
+    transform: rotate(180deg);
+  }
+
+  .sti-MegaMenu-root-3a7a0[data-open] .sti-MegaMenu-trigger-2b51a {
+    background: var(--sti-bg-surface-hover);
+  }
+
+  @media (hover: hover) {
+    .sti-MegaMenu-trigger-2b51a[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-MegaMenu-trigger-2b51a[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-MegaMenu-trigger-2b51a[data-focus-visible], .sti-MegaMenu-item-50448[data-focus-visible], .sti-MegaMenu-featuredLink-5ed80[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-MegaMenu-panel-9c6ac {
+    z-index: var(--sti-z-dropdown);
+    box-sizing: border-box;
+    border-block: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-lg);
+    animation: sti-MegaMenu-sti-mega-in-7a06f var(--sti-duration-base) var(--sti-ease-out);
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline: 0;
+  }
+
+  .sti-MegaMenu-panel-9c6ac[hidden] {
+    display: none;
+  }
+
+  .sti-MegaMenu-panel-9c6ac[data-inline] {
+    box-shadow: none;
+    background: none;
+    border: 0;
+    animation: none;
+    position: static;
+  }
+
+  .sti-MegaMenu-inner-ea545 {
+    gap: var(--sti-space-6);
+    box-sizing: border-box;
+    max-inline-size: var(--sti-width-container);
+    padding: var(--sti-space-6) var(--sti-gutter);
+    margin-inline: auto;
+    display: grid;
+  }
+
+  .sti-MegaMenu-panel-9c6ac[data-inline] .sti-MegaMenu-inner-ea545 {
+    gap: var(--sti-space-4);
+    padding: var(--sti-space-1) var(--sti-space-2) var(--sti-space-3);
+  }
+
+  @media (width >= 48rem) {
+    .sti-MegaMenu-inner-ea545 {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
+    }
+
+    .sti-MegaMenu-inner-ea545:not(:has(.sti-MegaMenu-featured-e43c7)), .sti-MegaMenu-panel-9c6ac[data-inline] .sti-MegaMenu-inner-ea545 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .sti-MegaMenu-groups-d45a9 {
+    gap: var(--sti-space-6) var(--sti-space-8);
+    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-MegaMenu-group-f3de8 {
+    align-content: start;
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-MegaMenu-groupTitle-4651d {
+    padding-inline: var(--sti-space-3);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-eyebrow);
+    line-height: var(--sti-line-height-xs);
+    text-transform: uppercase;
+    margin: 0;
+  }
+
+  .sti-MegaMenu-list-1a2b7 {
+    gap: var(--sti-space-0-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-MegaMenu-listItem-6724d {
+    min-inline-size: 0;
+  }
+
+  .sti-MegaMenu-item-50448 {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    min-block-size: var(--sti-control-h-md);
+    padding: var(--sti-space-2) var(--sti-space-3);
+    border-radius: var(--sti-mega-radius);
+    color: inherit;
+    cursor: pointer;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-out);
+    outline: none;
+    text-decoration: none;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .sti-MegaMenu-item-50448[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-MegaMenu-item-50448[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-MegaMenu-item-50448[data-current] .sti-MegaMenu-itemLabel-53fb8 {
+    color: var(--sti-fg-accent);
+  }
+
+  .sti-MegaMenu-itemIcon-813eb {
+    inline-size: var(--sti-control-h-sm);
+    block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-MegaMenu-itemText-ce636 {
+    gap: var(--sti-space-0-5);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-MegaMenu-itemLabel-53fb8 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-MegaMenu-itemDescription-fb772 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-MegaMenu-badge-ef8e3 {
+    padding-inline: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-MegaMenu-featured-e43c7 {
+    align-content: start;
+    align-self: start;
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    display: grid;
+  }
+
+  .sti-MegaMenu-featuredMedia-95afb {
+    border-radius: var(--sti-radius-md);
+    overflow: hidden;
+  }
+
+  .sti-MegaMenu-featuredTitle-bfd9b {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-lg);
+    margin: 0;
+  }
+
+  .sti-MegaMenu-featuredDescription-0c192 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-MegaMenu-featuredLink-5ed80 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    min-block-size: var(--sti-control-h-sm);
+    border-radius: var(--sti-radius-xs);
+    color: var(--sti-fg-link);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    cursor: pointer;
+    outline: none;
+    justify-self: start;
+    text-decoration: none;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .sti-MegaMenu-featuredLink-5ed80[data-hovered] {
+      color: var(--sti-fg-link-hover);
+      text-decoration: underline;
+    }
+  }
+
+  @media (pointer: coarse) {
+    .sti-MegaMenu-trigger-2b51a, .sti-MegaMenu-item-50448, .sti-MegaMenu-featuredLink-5ed80 {
+      min-block-size: var(--sti-control-h-md);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-MegaMenu-panel-9c6ac {
+      animation: none;
+    }
+
+    .sti-MegaMenu-chevron-2dbe1, .sti-MegaMenu-trigger-2b51a, .sti-MegaMenu-item-50448 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-MegaMenu-panel-9c6ac, .sti-MegaMenu-featured-e43c7 {
+      border-color: canvastext;
+    }
+
+    .sti-MegaMenu-root-3a7a0[data-open] .sti-MegaMenu-trigger-2b51a {
+      outline: var(--sti-border-width) solid Highlight;
+    }
+
+    .sti-MegaMenu-trigger-2b51a[data-focus-visible], .sti-MegaMenu-item-50448[data-focus-visible], .sti-MegaMenu-featuredLink-5ed80[data-focus-visible] {
+      outline-color: highlight;
+    }
+
+    .sti-MegaMenu-item-50448[data-current] .sti-MegaMenu-itemLabel-53fb8 {
+      color: highlight;
+    }
+  }
+
+  @keyframes sti-MegaMenu-sti-mega-in-7a06f {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--sti-space-2) * -1));
+    }
+  }
+}

package/dist/site/MegaMenu/MegaMenu.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from "react";
+export interface MegaMenuItem {
+  label: string;
+  href: string;
+  /** Bağlantının altında tek cümlelik açıklama. */
+  description?: string;
+  /** Etiketten önceki ikon (süs). */
+  icon?: ReactNode;
+  /** Yanında kısa rozet metni ("Yeni"). */
+  badge?: string;
+  /** Bulunulan sayfa. */
+  isCurrent?: boolean;
+}
+export interface MegaMenuGroup {
+  /** Grup başlığı ("Hizmetler"); verilirse liste bu adla adlandırılır. */
+  title?: string;
+  items: readonly MegaMenuItem[];
+}
+export interface MegaMenuFeatured {
+  title: string;
+  description?: string;
+  href: string;
+  /** Bağlantı metni ("Tüm projeleri görün"). */
+  linkLabel: string;
+  /** Üstte görsel ya da ikon. */
+  media?: ReactNode;
+}
+export interface MegaMenuProps {
+  /** Tetikleyici düğmenin metni; erişilebilir ad budur. */
+  label: string;
+  groups: readonly MegaMenuGroup[];
+  /** Panelin sonunda öne çıkan bağlantı kartı. */
+  featured?: MegaMenuFeatured;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Fare üzerine gelince açılır (yalnız fare; dokunmatik ve klavye düğmeyle açar). Varsayılan `true`. */
+  openOnHover?: boolean;
+  /** Panel akış içinde açılır (mobil menü); dışarı tıklama ve odak çıkışı kapatmaz. */
+  inline?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Büyük açılır menü: APG "Disclosure Navigation Menu" kalıbı. Düğme paneli açar ve kapatır
+ * (`aria-expanded`); panel bağlantı gruplarını, her bağlantının açıklamasıyla, ve isteğe bağlı bir
+ * öne çıkan kartı gösterir. Panel en yakın konumlu atasına (SiteHeader'da üst bilgi) göre tam
+ * genişlikte açılır. Escape kapatır ve odağı düğmeye verir; odak panelden çıkınca ya da dışarı
+ * tıklanınca kapanır.
+ */
+export declare function MegaMenu({ label, groups, featured, isOpen, defaultOpen, onOpenChange, openOnHover, inline, className, id }: MegaMenuProps): import("react").JSX.Element;