@mari-ui/components 0.0.0-stage → 0.1.1

package/dist/menu.js

@@ -0,0 +1,1682 @@
+"use client";
+
+import {
+  useModalBehavior,
+  usePresence
+} from "./chunk-JNZODUXP.js";
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownTrigger,
+  NewTabHint,
+  bypassesRouter,
+  getFocusable,
+  getLinkAttrs,
+  getRovingTarget,
+  isPlainLeftClick,
+  useDropdown
+} from "./chunk-FNJHS5KQ.js";
+import {
+  SkeletonSlot
+} from "./chunk-DKENCYHA.js";
+import "./chunk-S66GKX2W.js";
+import "./chunk-3ABWBQCS.js";
+import "./chunk-NS7FKOFI.js";
+import "./chunk-TCYDVNSU.js";
+import {
+  touchTargetClass,
+  touchTargetSquareClass
+} from "./chunk-FFXRFQSU.js";
+import {
+  bgSolidClass,
+  bgSubtleClass,
+  textClass,
+  textHoverClass,
+  textSolidContrastClass
+} from "./chunk-IP2J3BWY.js";
+import {
+  skeletonFill
+} from "./chunk-54HHEXXD.js";
+
+// src/menu/basic-menu/BasicMenu.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/menu/utils.ts
+import { cn } from "@mari-ui/core";
+function getMenuItemJustify(justify) {
+  return { left: "justify-start", right: "justify-end", center: "justify-center" }[justify];
+}
+function getMenuPosition(position) {
+  return { default: "", sticky: "sticky top-0", fixed: "fixed top-0 w-full" }[position];
+}
+function isMenuItemActive(item, activeKey) {
+  if (!activeKey) return false;
+  if (item.key === activeKey) return true;
+  if (item.children) return item.children.some((child) => isMenuItemActive(child, activeKey));
+  return false;
+}
+var INDICATOR_COLOR_CLASS = {
+  primary: "after:bg-mari-primary",
+  accent: "after:bg-mari-accent",
+  success: "after:bg-mari-success",
+  error: "after:bg-mari-error",
+  warning: "after:bg-mari-warning",
+  info: "after:bg-mari-info",
+  neutral: "after:bg-mari-neutral"
+};
+var EXPANDED_TEXT_CLASS = {
+  primary: "aria-expanded:text-mari-primary",
+  accent: "aria-expanded:text-mari-accent",
+  success: "aria-expanded:text-mari-success",
+  error: "aria-expanded:text-mari-error",
+  warning: "aria-expanded:text-mari-warning",
+  info: "aria-expanded:text-mari-info",
+  neutral: "aria-expanded:text-mari-neutral"
+};
+function getItemClass(item, activeKey, color) {
+  const isActive = isMenuItemActive(item, activeKey);
+  return cn(
+    // `whitespace-nowrap`: dar genişlikte "Ana Sayfa" gibi başlıklar iki satıra kırılıyordu.
+    "relative whitespace-nowrap font-medium transition-colors duration-150",
+    "after:pointer-events-none after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:origin-center after:transition-transform after:duration-200 after:ease-out after:content-['']",
+    INDICATOR_COLOR_CLASS[color],
+    isActive ? cn(textClass[color], "after:scale-x-100") : cn("text-mari-foreground/80", textHoverClass[color], "after:scale-x-0 hover:after:scale-x-100 aria-expanded:after:scale-x-100", EXPANDED_TEXT_CLASS[color])
+  );
+}
+function getSidebarWidthClass(variant, expanded, onlyIcon = false) {
+  if (onlyIcon) return "w-16";
+  if (variant === "hover") return expanded ? "w-64 shadow-mari-lg" : "w-16";
+  return expanded ? "w-64" : "w-0 border-0";
+}
+function findActiveKeyByRoute(items, route) {
+  if (!route) return null;
+  for (const item of items) {
+    if (item.route === route) return item.key;
+    if (item.children) {
+      const found = findActiveKeyByRoute(item.children, route);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+// src/menu/_shared/NavBar.tsx
+import { cn as cn6 } from "@mari-ui/core";
+
+// src/menu/_shared/MobileNav.tsx
+import { useEffect as useEffect2, useId as useId2, useState as useState2 } from "react";
+import { MenuIcon } from "lucide-react";
+import { cn as cn5 } from "@mari-ui/core";
+
+// src/menu/_shared/NavDrawer.tsx
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { XIcon } from "lucide-react";
+import { cn as cn4 } from "@mari-ui/core";
+
+// src/menu/_shared/_components/MegaPanelPromoGrid.tsx
+import { cn as cn2 } from "@mari-ui/core";
+
+// src/menu/_shared/MenuLink.tsx
+import { jsx } from "react/jsx-runtime";
+function MenuLink({ route, onNavigate, onSelect, disabled, current, target, reloadDocument, className, children, ...rest }) {
+  if (!route || disabled) {
+    return /* @__PURE__ */ jsx("button", { type: "button", ...rest, disabled, onClick: onSelect, className, children });
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      href: route,
+      ...getLinkAttrs(target),
+      "aria-current": current ? "page" : void 0,
+      className,
+      onClick: (event) => {
+        onSelect?.();
+        if (!onNavigate || !isPlainLeftClick(event) || bypassesRouter(route, { target, reloadDocument })) return;
+        event.preventDefault();
+        onNavigate(route);
+      },
+      children
+    }
+  );
+}
+
+// src/menu/_shared/_components/MegaPanelPromoGrid.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SPAN_CLASS = {
+  sm: "col-span-1 aspect-square",
+  wide: "col-span-2 aspect-[21/9]",
+  full: "col-span-2 aspect-[16/9]"
+};
+function MegaPanelPromoGrid({ tiles, onNavigate, onTileClick, className }) {
+  return /* @__PURE__ */ jsx2("div", { className: cn2("grid w-64 shrink-0 grid-cols-2 gap-3 self-start", className), children: tiles.map((tile) => /* @__PURE__ */ jsxs(
+    MenuLink,
+    {
+      route: tile.href,
+      target: tile.target,
+      reloadDocument: tile.reloadDocument,
+      onNavigate,
+      onSelect: () => onTileClick?.(tile),
+      className: cn2(
+        "group relative block cursor-pointer overflow-hidden rounded-lg border border-mari-border transition-shadow hover:shadow-mari-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+        SPAN_CLASS[tile.span ?? "sm"]
+      ),
+      children: [
+        /* @__PURE__ */ jsx2("img", { src: tile.image, alt: "", className: "absolute inset-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" }),
+        /* @__PURE__ */ jsxs("span", { className: "absolute inset-x-0 bottom-0 flex items-center gap-1 bg-gradient-to-t from-black/70 to-transparent px-2 py-1.5 text-start text-xs font-semibold text-white", children: [
+          tile.title,
+          /* @__PURE__ */ jsx2(NewTabHint, { target: tile.target })
+        ] })
+      ]
+    },
+    tile.title
+  )) });
+}
+
+// src/menu/_shared/_components/MobileNavLevel.tsx
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn as cn3 } from "@mari-ui/core";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ROW_CLASS = "flex min-h-12 w-full items-center gap-3 px-4 py-2.5 text-start text-sm transition-colors duration-150 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring";
+function MobileNavLevel({ items, trail, activeKey, color, onDrill, onBack, onSelect, onNavigate, backRef }) {
+  const parent = trail[trail.length - 1];
+  const backLabel = trail[trail.length - 2]?.title ?? "Ana Men\xFC";
+  const reserveIconSlot = items.some((item) => item.icon && !item.heading);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col pb-4 transition-[opacity,translate] duration-200 ease-out starting:translate-x-3 starting:opacity-0", children: [
+    parent && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          ref: backRef,
+          type: "button",
+          onClick: onBack,
+          className: cn3(ROW_CLASS, "cursor-pointer gap-2 border-b border-mari-border font-medium text-mari-muted hover:bg-mari-surface-alt hover:text-mari-foreground"),
+          children: [
+            /* @__PURE__ */ jsx3(ChevronLeftIcon, { "aria-hidden": "true", size: 18, className: "shrink-0" }),
+            backLabel
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 px-4 pt-4 pb-2", children: [
+        /* @__PURE__ */ jsx3("span", { className: "text-base font-semibold text-mari-foreground", children: parent.title }),
+        parent.route && /* @__PURE__ */ jsx3(MenuLink, { route: parent.route, target: parent.target, reloadDocument: parent.reloadDocument, onNavigate, onSelect: () => onSelect(parent), className: cn3("shrink-0 cursor-pointer text-sm font-medium hover:underline", textClass[color]), children: "T\xFCm\xFCn\xFC g\xF6r" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("ul", { className: "flex flex-col", children: items.map((item) => {
+      if (item.heading) {
+        return (
+          // Amazon çekmecesinin yapısı: her bölüm bir ayraçla ayrılır, başlığı kalın ve okunur (soluk küçük etiket değil).
+          /* @__PURE__ */ jsx3("li", { className: "mt-2 border-t border-mari-border px-4 pt-4 pb-1 text-base font-semibold text-mari-foreground first:mt-0 first:border-t-0 first:pt-3", children: item.title }, item.key)
+        );
+      }
+      const hasChildren = !!item.children?.length;
+      const active = isMenuItemActive(item, activeKey);
+      const rowClass = cn3(
+        ROW_CLASS,
+        item.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        active ? cn3(textClass[color], bgSubtleClass[color], "font-medium") : cn3("text-mari-foreground", !item.disabled && "hover:bg-mari-surface-alt")
+      );
+      const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
+        item.icon ? /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: cn3("flex size-5 shrink-0 items-center justify-center [&_svg]:size-5", !active && "text-mari-muted"), children: item.icon }) : reserveIconSlot && /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: "size-5 shrink-0" }),
+        /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "truncate", children: item.title }),
+            /* @__PURE__ */ jsx3(NewTabHint, { target: item.target })
+          ] }),
+          item.description && /* @__PURE__ */ jsx3("span", { className: "line-clamp-1 text-xs text-mari-muted", children: item.description })
+        ] }),
+        hasChildren && /* @__PURE__ */ jsx3(ChevronRightIcon, { "aria-hidden": "true", size: 18, className: "shrink-0 text-mari-muted" })
+      ] });
+      const row = hasChildren ? /* @__PURE__ */ jsx3("button", { type: "button", "data-menu-key": item.key, disabled: item.disabled, onClick: () => onDrill(item), className: rowClass, children: content }) : /* @__PURE__ */ jsx3(MenuLink, { route: item.route, target: item.target, reloadDocument: item.reloadDocument, onNavigate, onSelect: () => onSelect(item), disabled: item.disabled, current: active, className: rowClass, children: content });
+      return /* @__PURE__ */ jsx3("li", { children: row }, item.key);
+    }) })
+  ] });
+}
+
+// src/menu/_shared/NavDrawer.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CLOSE_ANIMATION_MS = 250;
+function NavDrawer({
+  id,
+  open,
+  onClose,
+  data,
+  color,
+  header,
+  emphasizedHeader = false,
+  side = "left",
+  activeKey,
+  onItemSelect,
+  onNavigate,
+  currentPath,
+  label = "Ana men\xFC",
+  className
+}) {
+  const [trail, setTrail] = useState([]);
+  const panelRef = useRef(null);
+  const backRef = useRef(null);
+  const mounted = usePresence(open, CLOSE_ANIMATION_MS);
+  useModalBehavior(open, panelRef, onClose);
+  const returnKeyRef = useRef(null);
+  const generatedId = useId();
+  const panelId = id ?? generatedId;
+  const resolvedActiveKey = activeKey !== void 0 ? activeKey : findActiveKeyByRoute(data, currentPath);
+  useEffect(() => {
+    if (!mounted) setTrail([]);
+  }, [mounted]);
+  useEffect(() => {
+    if (!open) return;
+    const returnKey = returnKeyRef.current;
+    if (returnKey) {
+      returnKeyRef.current = null;
+      const rows = panelRef.current?.querySelectorAll("[data-menu-key]") ?? [];
+      Array.from(rows).find((row) => row.dataset.menuKey === returnKey)?.focus();
+    } else if (trail.length > 0) {
+      backRef.current?.focus();
+    }
+    panelRef.current?.querySelector("[data-nav-drawer-body]")?.scrollTo?.({ top: 0 });
+  }, [trail, open]);
+  const handleSelect = (item) => {
+    onItemSelect?.(item);
+    onClose();
+  };
+  const handleBack = () => {
+    returnKeyRef.current = trail[trail.length - 1]?.key ?? null;
+    setTrail((prev) => prev.slice(0, -1));
+  };
+  if (!mounted || typeof document === "undefined") return null;
+  const parent = trail[trail.length - 1];
+  const items = parent ? parent.children ?? [] : data;
+  const isLeft = side === "left";
+  const hiddenTranslate = isLeft ? "-translate-x-full" : "translate-x-full";
+  return createPortal(
+    /* @__PURE__ */ jsxs3("div", { className: cn4("fixed inset-0 z-mari-drawer", className, !open && "pointer-events-none"), children: [
+      /* @__PURE__ */ jsx4("div", { "aria-hidden": "true", onClick: onClose, className: cn4("absolute inset-0 bg-mari-scrim transition-opacity duration-250 starting:opacity-0", open ? "opacity-100" : "opacity-0") }),
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: panelRef,
+          id: panelId,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": label,
+          className: cn4(
+            "absolute inset-y-0 flex w-[min(22rem,85vw)] flex-col border-mari-border bg-mari-surface text-mari-foreground shadow-mari-lg transition-transform duration-250 ease-out",
+            isLeft ? "left-0 border-r starting:-translate-x-full" : "right-0 border-l starting:translate-x-full",
+            open ? "translate-x-0" : hiddenTranslate
+          ),
+          children: [
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: cn4(
+                  "flex min-h-14 shrink-0 items-center justify-between gap-3 px-4",
+                  emphasizedHeader ? cn4(bgSolidClass[color], textSolidContrastClass[color]) : "border-b border-mari-border"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx4("div", { className: "min-w-0 flex-1 truncate", children: header }),
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Men\xFCy\xFC kapat",
+                      onClick: onClose,
+                      className: cn4(
+                        "-mr-2 inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+                        emphasizedHeader ? "hover:bg-current/15" : "text-mari-muted hover:bg-mari-surface-alt hover:text-mari-foreground"
+                      ),
+                      children: /* @__PURE__ */ jsx4(XIcon, { "aria-hidden": "true", size: 20 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs3("div", { "data-nav-drawer-body": true, className: "flex-1 overflow-y-auto overscroll-contain", children: [
+              /* @__PURE__ */ jsx4(
+                MobileNavLevel,
+                {
+                  items,
+                  trail,
+                  activeKey: resolvedActiveKey,
+                  color,
+                  backRef,
+                  onDrill: (item) => setTrail((prev) => [...prev, item]),
+                  onBack: handleBack,
+                  onSelect: handleSelect,
+                  onNavigate
+                },
+                parent?.key ?? "root"
+              ),
+              parent?.promoTiles && parent.promoTiles.length > 0 && /* @__PURE__ */ jsx4(MegaPanelPromoGrid, { tiles: parent.promoTiles, onNavigate, onTileClick: onClose, className: "w-full px-4 pb-6" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+
+// src/menu/_shared/responsive.ts
+var MOBILE_BREAKPOINT_PX = {
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+var DESKTOP_ONLY_CLASS = {
+  md: "hidden md:flex",
+  lg: "hidden lg:flex",
+  xl: "hidden xl:flex"
+};
+var MOBILE_ONLY_CLASS = {
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden"
+};
+
+// src/menu/_shared/MobileNav.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function MobileNav({ data, color, breakpoint, logo, activeKey, onItemSelect, onNavigate, currentPath, label }) {
+  const [open, setOpen] = useState2(false);
+  const panelId = useId2();
+  useEffect2(() => {
+    if (!open || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(`(min-width: ${MOBILE_BREAKPOINT_PX[breakpoint]}px)`);
+    const handleChange = (event) => {
+      if (event.matches) setOpen(false);
+    };
+    query.addEventListener("change", handleChange);
+    return () => query.removeEventListener("change", handleChange);
+  }, [open, breakpoint]);
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "aria-label": open ? "Men\xFCy\xFC kapat" : "Men\xFCy\xFC a\xE7",
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        onClick: () => setOpen((prev) => !prev),
+        className: cn5(
+          "-ml-2 inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-md text-mari-foreground transition-colors hover:bg-mari-surface-alt focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+          MOBILE_ONLY_CLASS[breakpoint]
+        ),
+        children: /* @__PURE__ */ jsx5(MenuIcon, { "aria-hidden": "true", size: 22 })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      NavDrawer,
+      {
+        id: panelId,
+        open,
+        onClose: () => setOpen(false),
+        data,
+        color,
+        header: logo,
+        activeKey,
+        onItemSelect,
+        onNavigate,
+        currentPath,
+        label,
+        className: MOBILE_ONLY_CLASS[breakpoint]
+      }
+    )
+  ] });
+}
+
+// src/menu/_shared/NavBar.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var placeholder = /* @__PURE__ */ jsx6("span", { className: cn6("block size-full min-h-[1lh] rounded-md", skeletonFill(true)) });
+function NavBar({
+  data,
+  logo,
+  logoHref,
+  onLogoClick,
+  logoLabel = "Ana sayfa",
+  menuItemJustify = "left",
+  menuPosition = "default",
+  color,
+  onNavigate,
+  currentPath,
+  actions,
+  mobileBreakpoint = "lg",
+  skeleton = false,
+  "aria-label": ariaLabel = "Ana men\xFC",
+  activeKey,
+  onItemSelect,
+  renderItem,
+  barRef,
+  children
+}) {
+  let logoNode = null;
+  if (logo && logoHref) {
+    logoNode = /* @__PURE__ */ jsxs5(MenuLink, { route: logoHref, onNavigate, className: "shrink-0 rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring", children: [
+      /* @__PURE__ */ jsx6("span", { className: "sr-only", children: logoLabel }),
+      /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", children: logo })
+    ] });
+  } else if (logo && onLogoClick) {
+    logoNode = /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": logoLabel, className: "shrink-0 cursor-pointer rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring", onClick: onLogoClick, children: logo });
+  } else if (logo) {
+    logoNode = /* @__PURE__ */ jsx6("div", { className: "shrink-0", children: logo });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: cn6(getMenuPosition(menuPosition), menuPosition !== "default" && "z-mari-sticky"), children: [
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: barRef,
+        "aria-busy": skeleton || void 0,
+        className: "flex flex-row items-center justify-between gap-4 border-b border-mari-border bg-mari-surface px-4 py-3 shadow-mari-sm",
+        children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx6(SkeletonSlot, { on: skeleton, placeholder, className: MOBILE_ONLY_CLASS[mobileBreakpoint], children: /* @__PURE__ */ jsx6(
+              MobileNav,
+              {
+                data,
+                color,
+                breakpoint: mobileBreakpoint,
+                logo,
+                activeKey,
+                onItemSelect,
+                onNavigate,
+                currentPath
+              }
+            ) }),
+            logoNode && /* @__PURE__ */ jsx6(SkeletonSlot, { on: skeleton, placeholder, className: "shrink-0", children: logoNode })
+          ] }),
+          /* @__PURE__ */ jsx6("nav", { "aria-label": ariaLabel, className: cn6("min-w-0 flex-1", DESKTOP_ONLY_CLASS[mobileBreakpoint]), children: /* @__PURE__ */ jsx6("ul", { className: cn6("flex w-full flex-row items-center gap-1 xl:gap-4", getMenuItemJustify(menuItemJustify)), children: data.map((item) => /* @__PURE__ */ jsx6("li", { className: "flex", children: /* @__PURE__ */ jsx6(SkeletonSlot, { on: skeleton, placeholder, children: renderItem(item) }) }, item.key)) }) }),
+          actions && /* @__PURE__ */ jsx6(SkeletonSlot, { on: skeleton, placeholder, flow: "flex", className: "shrink-0", children: /* @__PURE__ */ jsx6("div", { className: "flex shrink-0 flex-row items-center gap-3", children: actions }) })
+        ]
+      }
+    ),
+    children
+  ] });
+}
+
+// src/menu/basic-menu/_components/BasicMenuItem.tsx
+import { cn as cn7 } from "@mari-ui/core";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function BasicMenuItem({ item, activeKey, setActiveKey, color, onNavigate, className }) {
+  return /* @__PURE__ */ jsxs6(
+    MenuLink,
+    {
+      route: item.route,
+      onNavigate,
+      disabled: item.disabled,
+      target: item.target,
+      reloadDocument: item.reloadDocument,
+      current: item.key === activeKey,
+      onSelect: () => setActiveKey(item.key),
+      className: cn7(
+        "relative inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+        touchTargetClass.md,
+        item.disabled ? "cursor-not-allowed opacity-50" : cn7("cursor-pointer", getItemClass(item, activeKey, color)),
+        className
+      ),
+      children: [
+        item.icon,
+        item.title,
+        /* @__PURE__ */ jsx7(NewTabHint, { target: item.target })
+      ]
+    }
+  );
+}
+
+// src/menu/basic-menu/_components/DropdownSubMenu.tsx
+import { ChevronDownIcon, ChevronRightIcon as ChevronRightIcon2 } from "lucide-react";
+import { cn as cn9 } from "@mari-ui/core";
+
+// src/menu/basic-menu/_components/SubMenuRow.tsx
+import { cn as cn8 } from "@mari-ui/core";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var TILE_HOVER_CLASS = {
+  primary: "group-hover/row:bg-mari-primary-subtle group-hover/row:text-mari-primary",
+  accent: "group-hover/row:bg-mari-accent-subtle group-hover/row:text-mari-accent",
+  success: "group-hover/row:bg-mari-success-subtle group-hover/row:text-mari-success",
+  error: "group-hover/row:bg-mari-error-subtle group-hover/row:text-mari-error",
+  warning: "group-hover/row:bg-mari-warning-subtle group-hover/row:text-mari-warning",
+  info: "group-hover/row:bg-mari-info-subtle group-hover/row:text-mari-info",
+  neutral: "group-hover/row:bg-mari-neutral-subtle group-hover/row:text-mari-neutral"
+};
+var TILE_ACTIVE_CLASS = {
+  primary: "bg-mari-primary-subtle text-mari-primary",
+  accent: "bg-mari-accent-subtle text-mari-accent",
+  success: "bg-mari-success-subtle text-mari-success",
+  error: "bg-mari-error-subtle text-mari-error",
+  warning: "bg-mari-warning-subtle text-mari-warning",
+  info: "bg-mari-info-subtle text-mari-info",
+  neutral: "bg-mari-neutral-subtle text-mari-neutral"
+};
+var TITLE_HOVER_CLASS = {
+  primary: "group-hover/row:text-mari-primary",
+  accent: "group-hover/row:text-mari-accent",
+  success: "group-hover/row:text-mari-success",
+  error: "group-hover/row:text-mari-error",
+  warning: "group-hover/row:text-mari-warning",
+  info: "group-hover/row:text-mari-info",
+  neutral: "group-hover/row:text-mari-neutral"
+};
+var TITLE_ACTIVE_CLASS = {
+  primary: "text-mari-primary",
+  accent: "text-mari-accent",
+  success: "text-mari-success",
+  error: "text-mari-error",
+  warning: "text-mari-warning",
+  info: "text-mari-info",
+  neutral: "text-mari-neutral"
+};
+function getSubMenuRowClass(item) {
+  return cn8(
+    "group/row flex w-full gap-3 rounded-lg p-2.5 text-start transition-colors duration-150",
+    "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring",
+    item.description ? "items-start" : "items-center",
+    item.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-mari-surface-alt"
+  );
+}
+function SubMenuRowContent({ item, active, color, trailing }) {
+  const interactive = !item.disabled;
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    item.icon && /* @__PURE__ */ jsx8(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn8(
+          "flex size-9 shrink-0 items-center justify-center rounded-lg transition-colors duration-150 [&_svg]:size-[1.125rem]",
+          active ? TILE_ACTIVE_CLASS[color] : cn8("bg-mari-surface-alt text-mari-muted", interactive && TILE_HOVER_CLASS[color])
+        ),
+        children: item.icon
+      }
+    ),
+    /* @__PURE__ */ jsxs7("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs7("span", { className: cn8("inline-flex items-center gap-1 text-sm font-medium transition-colors duration-150", active ? TITLE_ACTIVE_CLASS[color] : cn8("text-mari-foreground", interactive && TITLE_HOVER_CLASS[color])), children: [
+        item.title,
+        /* @__PURE__ */ jsx8(NewTabHint, { target: item.target })
+      ] }),
+      item.description && /* @__PURE__ */ jsx8("span", { className: "line-clamp-2 text-xs leading-snug text-mari-muted", children: item.description })
+    ] }),
+    trailing
+  ] });
+}
+
+// src/menu/basic-menu/_components/DropdownSubMenu.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var NAVBAR_OFFSET_PX = 12;
+var TWO_COLUMN_THRESHOLD = 4;
+function LeafRow({ item, activeKey, setActiveKey, color, onNavigate, onAfterSelect }) {
+  return /* @__PURE__ */ jsx9(
+    MenuLink,
+    {
+      route: item.route,
+      onNavigate,
+      disabled: item.disabled,
+      target: item.target,
+      reloadDocument: item.reloadDocument,
+      current: item.key === activeKey,
+      className: getSubMenuRowClass(item),
+      onSelect: () => {
+        setActiveKey(item.key);
+        onAfterSelect?.();
+      },
+      children: /* @__PURE__ */ jsx9(SubMenuRowContent, { item, active: isMenuItemActive(item, activeKey), color })
+    }
+  );
+}
+function FlyoutRow(props) {
+  const { item, activeKey, color } = props;
+  return /* @__PURE__ */ jsxs8(Dropdown, { hover: true, className: "block self-auto", children: [
+    /* @__PURE__ */ jsx9(DropdownTrigger, { className: getSubMenuRowClass(item), children: /* @__PURE__ */ jsx9(SubMenuRowContent, { item, active: isMenuItemActive(item, activeKey), color, trailing: /* @__PURE__ */ jsx9(ChevronRightIcon2, { "aria-hidden": "true", size: 16, className: "mt-0.5 shrink-0 self-center text-mari-muted" }) }) }),
+    /* @__PURE__ */ jsx9(DropdownContent, { placement: "right-start", offset: 6, className: "w-72 rounded-xl p-2", children: /* @__PURE__ */ jsx9(RowList, { ...props, items: item.children ?? [] }) })
+  ] });
+}
+function RowList({ items, ...rest }) {
+  return /* @__PURE__ */ jsx9(Fragment4, { children: items.map((child) => child.children?.length ? /* @__PURE__ */ jsx9(FlyoutRow, { ...rest, item: child }, child.key) : /* @__PURE__ */ jsx9(LeafRow, { ...rest, item: child }, child.key)) });
+}
+function isGrouped(items) {
+  return items.length > 0 && items.every((child) => child.children && child.children.length > 0);
+}
+function getSubMenuPanelWidthClass(items) {
+  if (isGrouped(items)) return "w-max";
+  return items.length > TWO_COLUMN_THRESHOLD ? "w-[36rem]" : "w-80";
+}
+function SubMenuPanelBody({ items, ...rowProps }) {
+  if (isGrouped(items)) {
+    return (
+      // `flex-wrap`: grup sayısı viewport'a sığmıyorsa (panel `max-w`ye takılır) gruplar alt satıra iner.
+      /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-2", children: items.map((group) => /* @__PURE__ */ jsxs8("div", { className: "flex w-64 flex-col", children: [
+        /* @__PURE__ */ jsx9("div", { className: "px-2.5 pt-1.5 pb-1 text-xs font-semibold uppercase tracking-wide text-mari-muted", children: group.title }),
+        /* @__PURE__ */ jsx9(RowList, { ...rowProps, items: group.children?.length ? group.children : [group] })
+      ] }, group.key)) })
+    );
+  }
+  return /* @__PURE__ */ jsx9("div", { className: cn9(items.length > TWO_COLUMN_THRESHOLD && "grid grid-cols-2"), children: /* @__PURE__ */ jsx9(RowList, { ...rowProps, items }) });
+}
+function DropdownPanelBody(props) {
+  const { setVisible } = useDropdown();
+  return /* @__PURE__ */ jsx9(SubMenuPanelBody, { ...props, onAfterSelect: () => setVisible(false) });
+}
+function DropdownSubMenu({ item, activeKey, setActiveKey, color, onNavigate, currentPath }) {
+  if (!item.children) {
+    return /* @__PURE__ */ jsx9(BasicMenuItem, { item, activeKey, setActiveKey, color, onNavigate });
+  }
+  const children = item.children;
+  const rowProps = { activeKey, setActiveKey, color, onNavigate, currentPath };
+  return /* @__PURE__ */ jsxs8(Dropdown, { hover: true, children: [
+    /* @__PURE__ */ jsxs8(
+      DropdownTrigger,
+      {
+        className: cn9(
+          "group inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+          touchTargetClass.md,
+          getItemClass(item, activeKey, color)
+        ),
+        children: [
+          item.icon,
+          item.title,
+          /* @__PURE__ */ jsx9(ChevronDownIcon, { "aria-hidden": "true", size: 14, className: "opacity-60 transition-transform duration-200 group-aria-expanded:rotate-180" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(DropdownContent, { placement: "bottom-start", offset: NAVBAR_OFFSET_PX, className: cn9("max-w-[calc(100vw-2rem)] rounded-xl p-2", getSubMenuPanelWidthClass(children)), children: /* @__PURE__ */ jsx9(DropdownPanelBody, { ...rowProps, items: children }) })
+  ] });
+}
+
+// src/menu/basic-menu/BasicMenu.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function BasicMenu({ data, color = "primary", currentPath, onNavigate, ...barProps }) {
+  const [activeKey, setActiveKey] = useState3(null);
+  useEffect3(() => {
+    setActiveKey(findActiveKeyByRoute(data, currentPath));
+  }, [data, currentPath]);
+  return /* @__PURE__ */ jsx10(
+    NavBar,
+    {
+      ...barProps,
+      data,
+      color,
+      currentPath,
+      onNavigate,
+      activeKey,
+      onItemSelect: (item) => setActiveKey(item.key),
+      renderItem: (item) => item.children ? /* @__PURE__ */ jsx10(DropdownSubMenu, { item, activeKey, setActiveKey, color, onNavigate, currentPath }) : /* @__PURE__ */ jsx10(BasicMenuItem, { item, activeKey, setActiveKey, color, onNavigate })
+    }
+  );
+}
+
+// src/menu/mega-menu/MegaMenu.tsx
+import { useCallback, useEffect as useEffect4, useId as useId3, useRef as useRef3, useState as useState6 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { cn as cn14 } from "@mari-ui/core";
+
+// src/menu/_shared/MegaPanel.tsx
+import { useState as useState5 } from "react";
+import { cn as cn12 } from "@mari-ui/core";
+
+// src/menu/_shared/_components/MegaPanelColumn.tsx
+import { useState as useState4 } from "react";
+import { ChevronDownIcon as ChevronDownIcon2, ChevronRightIcon as ChevronRightIcon3 } from "lucide-react";
+import { cn as cn10 } from "@mari-ui/core";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var VISIBLE_LEAF_COUNT = 6;
+function MegaPanelColumn({ group, color, onNavigate, onItemClick, activeKey = null }) {
+  const leaves = group.children ?? [];
+  const [expanded, setExpanded] = useState4(() => leaves.slice(VISIBLE_LEAF_COUNT).some((leaf) => leaf.key === activeKey));
+  const visibleLeaves = expanded ? leaves : leaves.slice(0, VISIBLE_LEAF_COUNT);
+  const hasMore = leaves.length > VISIBLE_LEAF_COUNT;
+  return /* @__PURE__ */ jsxs9("div", { className: "mb-6 flex break-inside-avoid flex-col items-start gap-1.5", children: [
+    group.route ? /* @__PURE__ */ jsxs9(
+      MenuLink,
+      {
+        route: group.route,
+        target: group.target,
+        reloadDocument: group.reloadDocument,
+        onNavigate,
+        current: group.key === activeKey,
+        onSelect: () => onItemClick?.(group),
+        className: cn10("group/head flex cursor-pointer items-center gap-1 rounded-sm text-start text-sm font-semibold transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring", textClass[color]),
+        children: [
+          group.title,
+          /* @__PURE__ */ jsx11(NewTabHint, { target: group.target }),
+          /* @__PURE__ */ jsx11(ChevronRightIcon3, { "aria-hidden": "true", size: 14, className: "transition-transform duration-150 group-hover/head:translate-x-0.5" })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx11("div", { className: cn10("text-sm font-semibold", textClass[color]), children: group.title }),
+    visibleLeaves.map((leaf) => /* @__PURE__ */ jsxs9(
+      MenuLink,
+      {
+        route: leaf.route,
+        target: leaf.target,
+        reloadDocument: leaf.reloadDocument,
+        onNavigate,
+        disabled: leaf.disabled,
+        current: leaf.key === activeKey,
+        onSelect: () => onItemClick?.(leaf),
+        className: cn10(
+          "inline-flex items-center gap-1 rounded-sm text-start text-sm leading-6 transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+          leaf.disabled && "cursor-not-allowed text-mari-muted opacity-50",
+          !leaf.disabled && leaf.key === activeKey && cn10("cursor-pointer font-medium", textClass[color]),
+          !leaf.disabled && leaf.key !== activeKey && cn10("cursor-pointer text-mari-foreground/75", textHoverClass[color])
+        ),
+        children: [
+          leaf.title,
+          /* @__PURE__ */ jsx11(NewTabHint, { target: leaf.target })
+        ]
+      },
+      leaf.key
+    )),
+    hasMore && /* @__PURE__ */ jsxs9("button", { type: "button", "aria-expanded": expanded, onClick: () => setExpanded((prev) => !prev), className: "mt-0.5 flex cursor-pointer items-center gap-1 whitespace-nowrap text-sm font-medium text-mari-foreground underline underline-offset-4 transition-colors hover:text-mari-muted", children: [
+      expanded ? "Daha Az G\xF6ster" : "Daha Fazla G\xF6r",
+      /* @__PURE__ */ jsx11(ChevronDownIcon2, { "aria-hidden": "true", size: 14, className: cn10("transition-transform duration-200", expanded && "rotate-180") })
+    ] })
+  ] });
+}
+
+// src/menu/_shared/_components/MegaPanelRail.tsx
+import { ChevronRightIcon as ChevronRightIcon4 } from "lucide-react";
+import { cn as cn11 } from "@mari-ui/core";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var INDICATOR_COLOR_CLASS2 = {
+  primary: "before:bg-mari-primary",
+  accent: "before:bg-mari-accent",
+  success: "before:bg-mari-success",
+  error: "before:bg-mari-error",
+  warning: "before:bg-mari-warning",
+  info: "before:bg-mari-info",
+  neutral: "before:bg-mari-neutral"
+};
+function MegaPanelRail({ items, selectedKey, onSelect, color, orientation, onNavigate, onItemClick, activeKey = null }) {
+  if (items.length === 0) return null;
+  const horizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx12("ul", { className: cn11("flex shrink-0", horizontal ? "w-52 flex-col xl:w-60 gap-0.5 border-r border-mari-border pr-3" : "flex-row flex-wrap gap-1 border-b border-mari-border pb-2"), children: items.map((item) => {
+    const selected = item.key === selectedKey;
+    const indicatorClass = selected ? INDICATOR_COLOR_CLASS2[color] : "before:bg-transparent";
+    return /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs10(
+      MenuLink,
+      {
+        route: item.route,
+        target: item.target,
+        reloadDocument: item.reloadDocument,
+        onNavigate,
+        disabled: item.disabled,
+        current: item.key === activeKey,
+        "data-selected": selected || void 0,
+        onMouseEnter: () => !item.disabled && onSelect(item.key),
+        onFocus: () => !item.disabled && onSelect(item.key),
+        onSelect: () => {
+          if (item.disabled) return;
+          onSelect(item.key);
+          if (item.route) onItemClick?.(item);
+        },
+        className: cn11(
+          "relative flex w-full items-center gap-2 rounded-md py-2 text-start text-sm transition-colors duration-150",
+          horizontal ? cn11(
+            "pr-2 pl-3",
+            // Düz (yuvarlatılmamış) sol şerit — sadece seçiliyken görünür.
+            "before:absolute before:inset-y-0 before:left-0 before:w-0.5 before:content-['']",
+            indicatorClass
+          ) : "px-3",
+          item.disabled && "cursor-not-allowed opacity-50",
+          !item.disabled && "cursor-pointer",
+          selected || isMenuItemActive(item, activeKey) ? cn11(textClass[color], "font-medium") : "font-normal text-mari-foreground/80",
+          selected ? "bg-mari-surface-alt" : "hover:bg-mari-surface-alt"
+        ),
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsx12("span", { className: "flex-1 truncate", children: item.title }),
+          /* @__PURE__ */ jsx12(NewTabHint, { target: item.target }),
+          horizontal && item.children && item.children.length > 0 && /* @__PURE__ */ jsx12(ChevronRightIcon4, { "aria-hidden": "true", size: 16, className: cn11("shrink-0 transition-colors", selected ? textClass[color] : "text-mari-muted") })
+        ]
+      }
+    ) }, item.key);
+  }) });
+}
+
+// src/menu/_shared/MegaPanel.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function MegaPanel({ items, color, layout, orientation = "horizontal", onNavigate, onItemClick, activeKey = null, className }) {
+  const [selectedKey, setSelectedKey] = useState5(() => items.find((item) => isMenuItemActive(item, activeKey))?.key ?? items[0]?.key ?? null);
+  const selected = items.find((item) => item.key === selectedKey) ?? items[0];
+  if (!selected) return null;
+  const columns = selected.children ?? [];
+  const visibleColumns = columns;
+  const promoTiles = layout === "full" ? selected.promoTiles : void 0;
+  const hasContent = visibleColumns.length > 0 || !!promoTiles?.length;
+  let columnsClass = "columns-2 gap-8 xl:columns-3";
+  if (orientation === "vertical") columnsClass = "columns-1";
+  else if (layout === "compact") columnsClass = "columns-2 gap-8";
+  return /* @__PURE__ */ jsxs11("div", { className: cn12("flex gap-6", orientation === "vertical" ? "flex-col" : "flex-row", className), children: [
+    /* @__PURE__ */ jsx13(MegaPanelRail, { items, selectedKey: selected.key, onSelect: setSelectedKey, color, orientation, onNavigate, onItemClick, activeKey }),
+    hasContent && /* @__PURE__ */ jsxs11("div", { className: cn12("flex min-w-0 flex-1", orientation === "vertical" ? "flex-col gap-4" : "gap-8"), children: [
+      visibleColumns.length > 0 && // Gruplar TEK TEK kolon değil, çok kolonlu bir metin akışına giriyor:
+      // referans menülerdeki gibi kısa gruplar aynı kolonda alt alta
+      // dizilir, kolonlar eşit dolar (`break-inside-avoid` bir grubu
+      // ikiye bölmeyi engeller). Sabit `grid-cols-N` bunu yapamaz.
+      /* @__PURE__ */ jsx13("div", { className: cn12("min-w-0 flex-1", columnsClass), children: visibleColumns.map((group) => /* @__PURE__ */ jsx13(MegaPanelColumn, { group, color, onNavigate, onItemClick, activeKey }, group.key)) }),
+      promoTiles && promoTiles.length > 0 && /* @__PURE__ */ jsx13(MegaPanelPromoGrid, { tiles: promoTiles, onNavigate, onTileClick: () => onItemClick?.(selected), className: "hidden xl:grid" })
+    ] })
+  ] });
+}
+
+// src/menu/mega-menu/_components/MegaMenuItem.tsx
+import { useRef as useRef2 } from "react";
+import { ChevronDownIcon as ChevronDownIcon3 } from "lucide-react";
+import { cn as cn13 } from "@mari-ui/core";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function MegaMenuItem({ item, open, activeKey, panelId, onHover, onLeave, onToggle, color, onNavigate, className }) {
+  const hasChildren = !!item.children?.length;
+  const pointerTypeRef = useRef2("mouse");
+  const highlightKey = open || isMenuItemActive(item, activeKey) ? item.key : null;
+  const baseClass = cn13(
+    "relative inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+    touchTargetClass.md,
+    item.disabled ? "cursor-not-allowed opacity-50" : cn13("cursor-pointer", getItemClass(item, highlightKey, color)),
+    className
+  );
+  return /* @__PURE__ */ jsx14("div", { className: "flex h-full items-center", onMouseEnter: item.disabled ? void 0 : onHover, onMouseLeave: onLeave, children: hasChildren ? /* @__PURE__ */ jsxs12(
+    "button",
+    {
+      type: "button",
+      "data-mega-key": item.key,
+      disabled: item.disabled,
+      "aria-expanded": open,
+      "aria-controls": open ? panelId : void 0,
+      onPointerDown: (event) => {
+        pointerTypeRef.current = event.pointerType;
+      },
+      onClick: (event) => {
+        if (event.detail === 0) onToggle("key");
+        else onToggle(pointerTypeRef.current === "mouse" ? "mouse" : "touch");
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "ArrowDown") return;
+        event.preventDefault();
+        onToggle("arrow");
+      },
+      className: cn13("group", baseClass),
+      children: [
+        item.icon,
+        item.title,
+        /* @__PURE__ */ jsx14(ChevronDownIcon3, { "aria-hidden": "true", size: 14, className: "opacity-60 transition-transform duration-200 group-aria-expanded:rotate-180" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs12(
+    MenuLink,
+    {
+      route: item.route,
+      target: item.target,
+      reloadDocument: item.reloadDocument,
+      onNavigate,
+      disabled: item.disabled,
+      current: item.key === activeKey,
+      className: baseClass,
+      children: [
+        item.icon,
+        item.title,
+        /* @__PURE__ */ jsx14(NewTabHint, { target: item.target })
+      ]
+    }
+  ) });
+}
+
+// src/menu/mega-menu/MegaMenu.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var HOVER_CLOSE_DELAY_MS = 200;
+var VIEWPORT_EDGE_PX = 8;
+function handlePanelKey(event, panel, bar, trigger, close) {
+  const active = document.activeElement;
+  const typing = active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement;
+  const focusable = getFocusable(panel);
+  if (!typing && !event.metaKey && !event.ctrlKey && !event.altKey) {
+    const target = getRovingTarget(focusable, active, event.key);
+    if (target) {
+      event.preventDefault();
+      target.focus();
+      return;
+    }
+  }
+  if (event.key !== "Tab") return;
+  const leavingForward = !event.shiftKey && active === (focusable.at(-1) ?? null);
+  const leavingBackward = event.shiftKey && active === (focusable[0] ?? null);
+  if (!leavingForward && !leavingBackward) return;
+  event.preventDefault();
+  close();
+  if (leavingBackward || !trigger) {
+    trigger?.focus();
+    return;
+  }
+  const barFocusable = getFocusable(bar);
+  (barFocusable[barFocusable.indexOf(trigger) + 1] ?? trigger).focus();
+}
+function MegaMenu({ data, color = "primary", currentPath, onNavigate, menuItemJustify = "center", ...barProps }) {
+  const [openKey, setOpenKey] = useState6(null);
+  const [shownKey, setShownKey] = useState6(null);
+  const [activeKey, setActiveKey] = useState6(null);
+  const [panelBox, setPanelBox] = useState6(null);
+  const closeTimerRef = useRef3(null);
+  const barRef = useRef3(null);
+  const panelRef = useRef3(null);
+  const focusPanelOnOpenRef = useRef3(false);
+  const panelId = useId3();
+  const visible = openKey !== null;
+  const shownItem = data.find((item) => item.key === shownKey);
+  useEffect4(() => {
+    setActiveKey(findActiveKeyByRoute(data, currentPath));
+  }, [data, currentPath]);
+  const cancelClose = useCallback(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  }, []);
+  const close = useCallback(() => {
+    cancelClose();
+    setOpenKey(null);
+  }, [cancelClose]);
+  const scheduleClose = useCallback(() => {
+    cancelClose();
+    closeTimerRef.current = setTimeout(() => {
+      if (panelRef.current?.contains(document.activeElement)) return;
+      setOpenKey(null);
+    }, HOVER_CLOSE_DELAY_MS);
+  }, [cancelClose]);
+  const open = useCallback(
+    (key) => {
+      cancelClose();
+      setOpenKey(key);
+      setShownKey(key);
+    },
+    [cancelClose]
+  );
+  const triggerFor = (key) => key ? barRef.current?.querySelector(`[data-mega-key="${CSS.escape(key)}"]`) : null;
+  useEffect4(() => cancelClose, [cancelClose]);
+  useEffect4(() => {
+    if (!visible) return;
+    let frameId;
+    const update = () => {
+      const bar = barRef.current;
+      if (bar) {
+        const rect = bar.getBoundingClientRect();
+        setPanelBox(
+          (prev) => prev && prev.top === rect.bottom && prev.left === rect.left && prev.width === rect.width ? prev : { top: rect.bottom, left: rect.left, width: rect.width }
+        );
+      }
+      frameId = requestAnimationFrame(update);
+    };
+    frameId = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(frameId);
+  }, [visible]);
+  useEffect4(() => {
+    if (!visible || !panelBox || !focusPanelOnOpenRef.current) return;
+    focusPanelOnOpenRef.current = false;
+    const panel = panelRef.current;
+    (panel?.querySelector("[data-selected]") ?? getFocusable(panel)[0])?.focus();
+  }, [visible, panelBox, openKey]);
+  useEffect4(() => {
+    if (!visible) return;
+    const inMenu = (node) => !!node && (!!barRef.current?.contains(node) || !!panelRef.current?.contains(node));
+    const handleKeyDown = (event) => {
+      const panel = panelRef.current;
+      const trigger = triggerFor(openKey);
+      const focusInPanel = !!panel && panel.contains(document.activeElement);
+      if (event.key === "Escape") {
+        close();
+        if (focusInPanel || document.activeElement === (trigger ?? null)) trigger?.focus();
+        return;
+      }
+      if (!focusInPanel || !panel) return;
+      handlePanelKey(event, panel, barRef.current, trigger ?? null, close);
+    };
+    const handlePointerDown = (event) => {
+      if (!inMenu(event.target)) close();
+    };
+    const handleFocusIn = (event) => {
+      const target = event.target;
+      if (panelRef.current?.contains(target) || triggerFor(openKey)?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("focusin", handleFocusIn);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("focusin", handleFocusIn);
+    };
+  }, [visible, openKey, close]);
+  return /* @__PURE__ */ jsx15(
+    NavBar,
+    {
+      ...barProps,
+      data,
+      color,
+      currentPath,
+      onNavigate,
+      menuItemJustify,
+      activeKey,
+      onItemSelect: (item) => setActiveKey(item.key),
+      barRef,
+      renderItem: (item) => /* @__PURE__ */ jsx15(
+        MegaMenuItem,
+        {
+          item,
+          open: openKey === item.key,
+          activeKey,
+          panelId,
+          color,
+          onNavigate,
+          onHover: () => item.children?.length ? open(item.key) : close(),
+          onLeave: scheduleClose,
+          onToggle: (source) => {
+            const isOpen = openKey === item.key;
+            if (isOpen && (source === "key" || source === "touch")) {
+              close();
+              return;
+            }
+            focusPanelOnOpenRef.current = source === "key" || source === "arrow";
+            open(item.key);
+          }
+        }
+      ),
+      children: shownItem?.children && panelBox && typeof document !== "undefined" && createPortal2(
+        /* @__PURE__ */ jsx15(
+          "div",
+          {
+            ref: panelRef,
+            id: panelId,
+            "aria-label": shownItem.title,
+            role: "region",
+            onMouseEnter: cancelClose,
+            onMouseLeave: scheduleClose,
+            style: {
+              top: panelBox.top,
+              left: panelBox.left,
+              width: panelBox.width,
+              maxHeight: `calc(100vh - ${panelBox.top + VIEWPORT_EDGE_PX}px)`
+            },
+            className: cn14(
+              // `overscroll-contain`: panel kendi içinde sonuna geldiğinde kaydırma arkadaki sayfaya ZİNCİRLENMEZ.
+              // Kapalıyken `invisible` (geçişin sonunda): linkler Tab sırasına ve ekran okuyucuya girmez.
+              "fixed z-mari-dropdown origin-top overflow-y-auto overscroll-contain border-b border-mari-border bg-mari-surface shadow-mari-lg transition-[opacity,translate,visibility] duration-200",
+              visible ? "visible translate-y-0 opacity-100" : "pointer-events-none invisible -translate-y-1 opacity-0"
+            ),
+            children: /* @__PURE__ */ jsx15("div", { className: "mx-auto w-full max-w-7xl px-4 py-6", children: /* @__PURE__ */ jsx15(
+              MegaPanel,
+              {
+                items: shownItem.children,
+                layout: "full",
+                orientation: "horizontal",
+                color,
+                onNavigate,
+                activeKey,
+                onItemClick: (item) => {
+                  setActiveKey(item.key);
+                  close();
+                }
+              },
+              shownItem.key
+            ) })
+          }
+        ),
+        document.body
+      )
+    }
+  );
+}
+
+// src/menu/sidebar/Sidebar.tsx
+import { useCallback as useCallback3, useEffect as useEffect7, useId as useId4, useRef as useRef5, useState as useState8 } from "react";
+import { cn as cn19 } from "@mari-ui/core";
+
+// src/menu/_shared/useHoverIntent.ts
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef4 } from "react";
+function useHoverIntent() {
+  const timerRef = useRef4(null);
+  const cancel = useCallback2(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const schedule = useCallback2(
+    (action, delayMs) => {
+      cancel();
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        action();
+      }, delayMs);
+    },
+    [cancel]
+  );
+  useEffect5(() => cancel, [cancel]);
+  return { schedule, cancel };
+}
+
+// src/menu/sidebar/_components/SidebarButton.tsx
+import { PanelLeftCloseIcon, PanelLeftOpenIcon, PanelRightCloseIcon, PanelRightOpenIcon } from "lucide-react";
+import { cn as cn15 } from "@mari-ui/core";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function SidebarButton({ position, setVisible, visible, controlsId }) {
+  const isLeft = position === "left";
+  let Icon = isLeft ? PanelLeftOpenIcon : PanelRightOpenIcon;
+  if (visible) Icon = isLeft ? PanelLeftCloseIcon : PanelRightCloseIcon;
+  return /* @__PURE__ */ jsx16(
+    "button",
+    {
+      type: "button",
+      "aria-label": visible ? "Kenar \xE7ubu\u011Funu kapat" : "Kenar \xE7ubu\u011Funu a\xE7",
+      "aria-expanded": visible,
+      "aria-controls": controlsId,
+      onClick: () => setVisible(!visible),
+      className: cn15(
+        "relative mt-3 inline-flex size-9 shrink-0",
+        touchTargetSquareClass.md,
+        " cursor-pointer items-center justify-center self-start border border-mari-border bg-mari-surface text-mari-muted shadow-mari-sm transition-colors hover:bg-mari-surface-alt hover:text-mari-foreground",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring",
+        isLeft ? "rounded-r-lg border-l-0" : "rounded-l-lg border-r-0"
+      ),
+      children: /* @__PURE__ */ jsx16(Icon, { "aria-hidden": "true", size: 18 })
+    }
+  );
+}
+
+// src/menu/sidebar/_components/SidebarMegaPanel.tsx
+import React8 from "react";
+import { cn as cn16 } from "@mari-ui/core";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function getMegaShape(children) {
+  if (children.some((child) => child.children?.some((grandchild) => grandchild.children?.length))) return "rail";
+  if (children.some((child) => child.children?.length)) return "columns";
+  return "rows";
+}
+function getWidthClass(shape, count) {
+  if (shape === "rail") return "w-[44rem]";
+  if (shape === "columns") return count > 4 ? "w-[44rem]" : "w-[32rem]";
+  return count > 4 ? "w-[38rem]" : "w-[24rem]";
+}
+var SidebarMegaPanel = React8.forwardRef(function SidebarMegaPanel2({ item, activeKey, setActiveKey, color, position, onClose, onMouseEnter, onMouseLeave, onNavigate, currentPath }, ref) {
+  const children = item.children ?? [];
+  const shape = getMegaShape(children);
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-label": item.title,
+      onMouseEnter,
+      onMouseLeave,
+      className: cn16(
+        "h-full max-w-[calc(100vw-5rem)] shrink overflow-y-auto overscroll-contain border-mari-border bg-mari-surface p-6 shadow-mari-lg transition-[opacity,translate] duration-200 ease-out starting:opacity-0",
+        position === "right" ? "border-l starting:translate-x-2" : "border-r starting:-translate-x-2",
+        getWidthClass(shape, children.length)
+      ),
+      children: [
+        /* @__PURE__ */ jsx17("div", { className: "mb-4 text-base font-semibold text-mari-foreground", children: item.title }),
+        shape === "rail" && /* @__PURE__ */ jsx17(
+          MegaPanel,
+          {
+            items: children,
+            layout: "compact",
+            orientation: "horizontal",
+            color,
+            onNavigate,
+            activeKey,
+            onItemClick: (picked) => {
+              setActiveKey(picked.key);
+              onClose();
+            }
+          }
+        ),
+        shape === "columns" && /* @__PURE__ */ jsx17("div", { className: cn16("gap-8", children.length > 4 ? "columns-3" : "columns-2"), children: children.map((group) => /* @__PURE__ */ jsx17(
+          MegaPanelColumn,
+          {
+            group,
+            color,
+            onNavigate,
+            activeKey,
+            onItemClick: (picked) => {
+              setActiveKey(picked.key);
+              onClose();
+            }
+          },
+          group.key
+        )) }),
+        shape === "rows" && /* @__PURE__ */ jsx17(SubMenuPanelBody, { items: children, activeKey, setActiveKey, color, onNavigate, currentPath, onAfterSelect: onClose })
+      ]
+    }
+  );
+});
+
+// src/menu/sidebar/_components/SidebarMenu.tsx
+import { cn as cn18 } from "@mari-ui/core";
+
+// src/menu/sidebar/_components/SidebarItem.tsx
+import { useEffect as useEffect6, useState as useState7 } from "react";
+import { ChevronDownIcon as ChevronDownIcon4, ChevronLeftIcon as ChevronLeftIcon2, ChevronRightIcon as ChevronRightIcon5 } from "lucide-react";
+import { cn as cn17 } from "@mari-ui/core";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var NESTED_INDENT_CLASS = {
+  left: { root: "ml-6", deep: "ml-3" },
+  right: { root: "mr-6", deep: "mr-3" }
+};
+var FOCUS_RING = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-mari-ring";
+function ItemIcon({ item, showMonogram, reserveIconSlot }) {
+  if (item.icon) {
+    return /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center [&_svg]:size-[1.125rem]", children: item.icon });
+  }
+  if (showMonogram) {
+    return /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: "flex size-5 shrink-0 items-center justify-center rounded-sm bg-mari-surface-alt text-[0.6875rem] font-semibold uppercase", children: item.title.charAt(0) });
+  }
+  return reserveIconSlot ? /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", className: "size-5 shrink-0" }) : null;
+}
+function getRowStateClass({ disabled, highlighted, containsActive, color }) {
+  if (disabled) return "cursor-not-allowed opacity-50";
+  if (highlighted) return cn17("cursor-pointer font-medium", bgSubtleClass[color], textClass[color]);
+  if (containsActive) return cn17("cursor-pointer font-medium hover:bg-mari-surface-alt", textClass[color]);
+  return "cursor-pointer text-mari-foreground/80 hover:bg-mari-surface-alt hover:text-mari-foreground";
+}
+function getRowClass(options) {
+  return cn17(
+    "relative flex w-full items-center rounded-lg text-start text-sm transition-colors duration-150",
+    // Daraltılmış rayda satır tam ikon genişliğinde: boşluk + chevron kalsaydı içerik satırı
+    // taşırıyor, `nav` yatayda kayıyor ve ikonlar sola kaçıyordu.
+    options.collapsed ? "gap-0" : "gap-3",
+    options.level === 0 ? "h-10 px-3.5" : "h-9 px-3",
+    FOCUS_RING,
+    getRowStateClass(options)
+  );
+}
+function RowContent({ item, collapsed, reserveIconSlot, position, showMonogram, chevron, open }) {
+  const FlyoutChevron = position === "left" ? ChevronRightIcon5 : ChevronLeftIcon2;
+  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx18(ItemIcon, { item, showMonogram, reserveIconSlot }),
+    /* @__PURE__ */ jsx18("span", { className: cn17("min-w-0 flex-1 truncate transition-opacity duration-150", collapsed ? "opacity-0" : "opacity-100"), children: item.title }),
+    !collapsed && /* @__PURE__ */ jsx18(NewTabHint, { target: item.target }),
+    chevron === "accordion" && /* @__PURE__ */ jsx18(ChevronDownIcon4, { "aria-hidden": "true", size: 16, className: cn17("shrink-0 text-mari-muted transition-transform duration-200", open && "rotate-180", collapsed && "hidden") }),
+    chevron === "flyout" && /* @__PURE__ */ jsx18(FlyoutChevron, { "aria-hidden": "true", size: 16, className: cn17("shrink-0 text-mari-muted", collapsed && "hidden") })
+  ] });
+}
+function RowPlaceholder({ level, collapsed, hasIcon }) {
+  return /* @__PURE__ */ jsxs14("span", { className: cn17("flex h-full items-center gap-3", level === 0 ? "px-3.5" : "px-3"), children: [
+    hasIcon && /* @__PURE__ */ jsx18("span", { className: cn17("size-5 shrink-0 rounded-sm", skeletonFill(true)) }),
+    !collapsed && /* @__PURE__ */ jsx18("span", { className: cn17("h-3 flex-1 rounded-sm", skeletonFill(true)) })
+  ] });
+}
+function RowSlot({ props, level, children }) {
+  const { skeleton, collapsed, item, showMonogram, reserveIconSlot } = props;
+  const hasIcon = !!item.icon || showMonogram && level === 0 || reserveIconSlot || collapsed;
+  return /* @__PURE__ */ jsx18(SkeletonSlot, { on: skeleton, placeholder: /* @__PURE__ */ jsx18(RowPlaceholder, { level, collapsed, hasIcon }), children });
+}
+function SidebarDropdownItem(props) {
+  const { item, activeKey, setActiveKey, color, collapsed, showMonogram, position, onNavigate, currentPath } = props;
+  const children = item.children ?? [];
+  const containsActive = isMenuItemActive(item, activeKey);
+  const rowClass = getRowClass({ level: 0, collapsed, highlighted: collapsed && containsActive, containsActive, color });
+  return /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(RowSlot, { props, level: 0, children: /* @__PURE__ */ jsxs14(Dropdown, { hover: true, className: "block self-auto", children: [
+    /* @__PURE__ */ jsx18(DropdownTrigger, { className: cn17(rowClass, "aria-expanded:bg-mari-surface-alt"), children: /* @__PURE__ */ jsx18(RowContent, { ...props, showMonogram, chevron: "flyout" }) }),
+    /* @__PURE__ */ jsx18(
+      DropdownContent,
+      {
+        placement: position === "left" ? "right-start" : "left-start",
+        offset: 10,
+        className: cn17("max-w-[calc(100vw-2rem)] rounded-xl p-2", getSubMenuPanelWidthClass(children)),
+        children: /* @__PURE__ */ jsx18(SubMenuPanelBody, { items: children, activeKey, setActiveKey, color, onNavigate, currentPath })
+      }
+    )
+  ] }) }) });
+}
+function SidebarItem(props) {
+  const hasChildren = !!props.item.children?.length;
+  const mode = props.level === 0 ? props.subMode : "accordion";
+  if (hasChildren && mode === "dropdown" && !props.item.disabled) return /* @__PURE__ */ jsx18(SidebarDropdownItem, { ...props });
+  return mode === "mega" ? /* @__PURE__ */ jsx18(SidebarMegaItem, { ...props }) : /* @__PURE__ */ jsx18(SidebarAccordionItem, { ...props });
+}
+function SidebarMegaItem(props) {
+  const { item, activeKey, color, collapsed, showMonogram, megaKey, onMegaOpen, onMegaClose, onSelect, onNavigate, position } = props;
+  const hasChildren = !!item.children?.length;
+  const containsActive = isMenuItemActive(item, activeKey);
+  const isActiveLeaf = !hasChildren && item.key === activeKey;
+  const isOpen = megaKey === item.key;
+  const rowClass = getRowClass({ level: 0, collapsed, disabled: item.disabled, highlighted: isActiveLeaf || isOpen || collapsed && containsActive, containsActive, color });
+  const openKey = position === "left" ? "ArrowRight" : "ArrowLeft";
+  return /* @__PURE__ */ jsx18("li", { children: /* @__PURE__ */ jsx18(RowSlot, { props, level: 0, children: hasChildren ? /* @__PURE__ */ jsx18(
+    "button",
+    {
+      type: "button",
+      "data-sidebar-key": item.key,
+      disabled: item.disabled,
+      "aria-expanded": isOpen,
+      title: collapsed ? item.title : void 0,
+      onMouseEnter: item.disabled ? void 0 : () => onMegaOpen(item),
+      onClick: (event) => {
+        if (!item.disabled) onMegaOpen(item, event.detail === 0);
+      },
+      onKeyDown: (event) => {
+        if (event.key !== openKey || item.disabled) return;
+        event.preventDefault();
+        onMegaOpen(item, true);
+      },
+      className: rowClass,
+      children: /* @__PURE__ */ jsx18(RowContent, { ...props, showMonogram, chevron: "flyout" })
+    }
+  ) : /* @__PURE__ */ jsx18(
+    MenuLink,
+    {
+      route: item.route,
+      target: item.target,
+      reloadDocument: item.reloadDocument,
+      onNavigate,
+      disabled: item.disabled,
+      current: isActiveLeaf,
+      "data-sidebar-key": item.key,
+      title: collapsed ? item.title : void 0,
+      onMouseEnter: item.disabled ? void 0 : onMegaClose,
+      onSelect: () => onSelect(item),
+      className: rowClass,
+      children: /* @__PURE__ */ jsx18(RowContent, { ...props, showMonogram })
+    }
+  ) }) });
+}
+function SidebarAccordionItem(props) {
+  const { item, level, activeKey, onSelect, color, collapsed, showMonogram, tabbable, position, skeleton, ...shared } = props;
+  const { onNavigate } = props;
+  const hasChildren = !!item.children?.length;
+  const containsActive = isMenuItemActive(item, activeKey);
+  const isActiveLeaf = !hasChildren && item.key === activeKey;
+  const [open, setOpen] = useState7(containsActive);
+  useEffect6(() => {
+    if (hasChildren && containsActive) setOpen(true);
+  }, [hasChildren, containsActive]);
+  const expandedBody = open && !collapsed;
+  const rowClass = getRowClass({ level, collapsed, disabled: item.disabled, highlighted: isActiveLeaf || collapsed && containsActive, containsActive, color });
+  return /* @__PURE__ */ jsxs14("li", { children: [
+    /* @__PURE__ */ jsx18(RowSlot, { props, level, children: hasChildren ? /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        "data-sidebar-key": item.key,
+        disabled: item.disabled,
+        tabIndex: tabbable ? void 0 : -1,
+        "aria-expanded": open,
+        title: collapsed ? item.title : void 0,
+        onClick: () => !item.disabled && setOpen((prev) => !prev),
+        className: rowClass,
+        children: /* @__PURE__ */ jsx18(RowContent, { ...props, showMonogram: showMonogram && level === 0, chevron: "accordion", open })
+      }
+    ) : /* @__PURE__ */ jsx18(
+      MenuLink,
+      {
+        route: item.route,
+        target: item.target,
+        reloadDocument: item.reloadDocument,
+        onNavigate,
+        disabled: item.disabled,
+        current: isActiveLeaf,
+        "data-sidebar-key": item.key,
+        tabIndex: tabbable ? void 0 : -1,
+        title: collapsed ? item.title : void 0,
+        onSelect: () => onSelect(item),
+        className: rowClass,
+        children: /* @__PURE__ */ jsx18(RowContent, { ...props, showMonogram: showMonogram && level === 0 })
+      }
+    ) }),
+    hasChildren && // Yükseklik `grid-template-rows` 0fr→1fr ile animasyonlu: içerik ne kadar
+    // uzun olursa olsun doğru açılır (eskiden sabit `max-h-96` sınırı vardı).
+    /* @__PURE__ */ jsx18("div", { className: cn17("grid transition-[grid-template-rows,opacity] duration-200 ease-out", expandedBody ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"), children: /* @__PURE__ */ jsx18("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx18(
+      SidebarMenu,
+      {
+        ...shared,
+        activeKey,
+        onSelect,
+        color,
+        collapsed,
+        showMonogram,
+        position,
+        skeleton,
+        data: item.children ?? [],
+        level: level + 1,
+        tabbable: tabbable && expandedBody,
+        className: cn17("mt-0.5 border-mari-border", position === "left" ? "border-l pl-2" : "border-r pr-2", NESTED_INDENT_CLASS[position][level === 0 ? "root" : "deep"])
+      }
+    ) }) })
+  ] });
+}
+
+// src/menu/sidebar/_components/SidebarMenu.tsx
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function SidebarMenu({ data, className, ...itemProps }) {
+  const reserveIconSlot = data.some((item) => item.icon && !item.heading);
+  return /* @__PURE__ */ jsx19("ul", { className: cn18("flex flex-col gap-0.5", className), children: data.map(
+    (item) => item.heading ? /* @__PURE__ */ jsxs15("li", { className: "px-3.5 pt-4 pb-1 first:pt-1", children: [
+      itemProps.collapsed && /* @__PURE__ */ jsx19("span", { "aria-hidden": "true", className: "block h-px w-full bg-mari-border" }),
+      /* @__PURE__ */ jsx19("span", { className: cn18("block truncate text-xs font-semibold tracking-wide text-mari-muted uppercase", itemProps.collapsed && "sr-only"), children: item.title })
+    ] }, item.key) : /* @__PURE__ */ jsx19(SidebarItem, { ...itemProps, item, reserveIconSlot }, item.key)
+  ) });
+}
+
+// src/menu/sidebar/Sidebar.tsx
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var RAIL_OPEN_DELAY_MS = 80;
+var RAIL_CLOSE_DELAY_MS = 250;
+var MEGA_CLOSE_DELAY_MS = 200;
+function Sidebar({
+  data,
+  variant = "hover",
+  position = "left",
+  onlyIcon = false,
+  dropdown = false,
+  mega = false,
+  logo,
+  logoHref,
+  onLogoClick,
+  logoLabel = "Ana sayfa",
+  header,
+  open = false,
+  onOpenChange,
+  label = "Ana men\xFC",
+  color = "primary",
+  onNavigate,
+  currentPath,
+  skeleton = false
+}) {
+  const [expanded, setExpanded] = useState8(false);
+  const [activeKey, setActiveKey] = useState8(null);
+  const [megaKey, setMegaKey] = useState8(null);
+  const megaPanelRef = useRef5(null);
+  const wrapperRef = useRef5(null);
+  const railIntent = useHoverIntent();
+  const megaIntent = useHoverIntent();
+  const asideId = useId4();
+  useEffect7(() => {
+    setActiveKey(findActiveKeyByRoute(data, currentPath));
+  }, [data, currentPath]);
+  const railCapable = variant === "hover" && !onlyIcon;
+  const collapsed = onlyIcon || railCapable && !expanded;
+  let subMode = "accordion";
+  if (mega) subMode = "mega";
+  else if (dropdown || onlyIcon) subMode = "dropdown";
+  const openMega = useCallback3(
+    (item) => {
+      megaIntent.cancel();
+      setMegaKey(item.key);
+    },
+    [megaIntent]
+  );
+  const closeMega = useCallback3(() => megaIntent.schedule(() => setMegaKey(null), MEGA_CLOSE_DELAY_MS), [megaIntent]);
+  const megaItem = megaKey ? data.find((item) => item.key === megaKey) : void 0;
+  const [megaFocusRequest, setMegaFocusRequest] = useState8(0);
+  useEffect7(() => {
+    if (megaFocusRequest === 0) return;
+    const panel = megaPanelRef.current;
+    (panel?.querySelector("[data-selected]") ?? getFocusable(panel)[0])?.focus();
+  }, [megaFocusRequest]);
+  useEffect7(() => {
+    if (!megaKey) return;
+    const focusRow = () => Array.from(wrapperRef.current?.querySelectorAll("[data-sidebar-key]") ?? []).find((row) => row.dataset.sidebarKey === megaKey)?.focus();
+    const handleKeyDown = (event) => {
+      const panel = megaPanelRef.current;
+      const focusInPanel = !!panel?.contains(document.activeElement);
+      if (event.key === "Escape") {
+        setMegaKey(null);
+        if (focusInPanel) focusRow();
+        return;
+      }
+      if (!focusInPanel || event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = getRovingTarget(getFocusable(panel), document.activeElement, event.key);
+      if (!target) return;
+      event.preventDefault();
+      target.focus();
+    };
+    const handlePointerDown = (event) => {
+      if (!wrapperRef.current?.contains(event.target)) setMegaKey(null);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("mousedown", handlePointerDown);
+    };
+  }, [megaKey]);
+  const navRef = useRef5(null);
+  useEffect7(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const handleKeyDown = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = getRovingTarget(getFocusable(nav), document.activeElement, event.key);
+      if (!target) return;
+      event.preventDefault();
+      target.focus();
+    };
+    nav.addEventListener("keydown", handleKeyDown);
+    return () => nav.removeEventListener("keydown", handleKeyDown);
+  }, [variant]);
+  const handleSelect = (item) => {
+    setActiveKey(item.key);
+    setMegaKey(null);
+  };
+  const logoClass = "flex shrink-0 items-center rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mari-ring";
+  let logoNode = null;
+  if (logo && logoHref) {
+    logoNode = /* @__PURE__ */ jsxs16(MenuLink, { route: logoHref, onNavigate, className: logoClass, children: [
+      /* @__PURE__ */ jsx20("span", { className: "sr-only", children: logoLabel }),
+      /* @__PURE__ */ jsx20("span", { "aria-hidden": "true", children: logo })
+    ] });
+  } else if (logo && onLogoClick) {
+    logoNode = /* @__PURE__ */ jsx20("button", { type: "button", "aria-label": logoLabel, className: cn19(logoClass, "cursor-pointer"), onClick: onLogoClick, children: logo });
+  } else if (logo) {
+    logoNode = /* @__PURE__ */ jsx20("div", { className: "flex shrink-0 items-center", children: logo });
+  }
+  const blockPlaceholder = /* @__PURE__ */ jsx20("span", { className: cn19("block size-full min-h-8 rounded-md", skeletonFill(true)) });
+  if (variant === "drawer") {
+    return /* @__PURE__ */ jsx20(
+      NavDrawer,
+      {
+        open,
+        onClose: () => onOpenChange?.(false),
+        data,
+        color,
+        header: header ?? logo,
+        emphasizedHeader: !!header,
+        side: position,
+        activeKey,
+        onItemSelect: (item) => setActiveKey(item.key),
+        onNavigate,
+        currentPath,
+        label
+      }
+    );
+  }
+  const collapseAll = () => {
+    setExpanded(false);
+    setMegaKey(null);
+  };
+  const wrapperHandlers = {
+    onMouseEnter: () => {
+      if (railCapable) railIntent.schedule(() => setExpanded(true), RAIL_OPEN_DELAY_MS);
+    },
+    onMouseLeave: () => {
+      if (railCapable) railIntent.schedule(collapseAll, RAIL_CLOSE_DELAY_MS);
+      else closeMega();
+    },
+    onFocus: () => {
+      if (!railCapable) return;
+      railIntent.cancel();
+      setExpanded(true);
+    },
+    onBlur: (event) => {
+      if (railCapable && !event.currentTarget.contains(event.relatedTarget)) railIntent.schedule(collapseAll, RAIL_CLOSE_DELAY_MS);
+    }
+  };
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      ref: wrapperRef,
+      ...wrapperHandlers,
+      className: cn19("fixed top-0 z-mari-drawer flex h-full", position === "right" ? "right-0 flex-row-reverse" : "left-0"),
+      children: [
+        /* @__PURE__ */ jsxs16(
+          "aside",
+          {
+            id: asideId,
+            className: cn19(
+              "flex h-full shrink-0 flex-col overflow-hidden border-mari-border bg-mari-surface transition-[width,box-shadow] duration-200 ease-out",
+              position === "right" ? "border-l" : "border-r",
+              getSidebarWidthClass(variant, expanded, onlyIcon)
+            ),
+            children: [
+              header && /* @__PURE__ */ jsx20("div", { className: "shrink-0 overflow-hidden border-b border-mari-border px-2 py-2 whitespace-nowrap", children: /* @__PURE__ */ jsx20(SkeletonSlot, { on: skeleton, placeholder: blockPlaceholder, children: header }) }),
+              logoNode && /* @__PURE__ */ jsx20("div", { className: "flex h-14 shrink-0 items-center overflow-hidden border-b border-mari-border px-4", children: /* @__PURE__ */ jsx20(SkeletonSlot, { on: skeleton, placeholder: blockPlaceholder, children: logoNode }) }),
+              /* @__PURE__ */ jsx20("nav", { ref: navRef, "aria-label": label, "aria-busy": skeleton || void 0, className: "min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-2 py-3", children: /* @__PURE__ */ jsx20(
+                SidebarMenu,
+                {
+                  data,
+                  level: 0,
+                  activeKey,
+                  onSelect: handleSelect,
+                  setActiveKey,
+                  color,
+                  subMode,
+                  collapsed,
+                  showMonogram: railCapable || onlyIcon,
+                  tabbable: true,
+                  skeleton,
+                  position,
+                  megaKey,
+                  onMegaOpen: (item, fromKeyboard) => {
+                    openMega(item);
+                    if (fromKeyboard) setMegaFocusRequest((count) => count + 1);
+                  },
+                  onMegaClose: closeMega,
+                  onNavigate,
+                  currentPath
+                }
+              ) })
+            ]
+          }
+        ),
+        megaItem?.children && /* @__PURE__ */ jsx20(
+          SidebarMegaPanel,
+          {
+            ref: megaPanelRef,
+            item: megaItem,
+            activeKey,
+            setActiveKey,
+            color,
+            position,
+            onClose: () => setMegaKey(null),
+            onMouseEnter: megaIntent.cancel,
+            onMouseLeave: closeMega,
+            onNavigate,
+            currentPath
+          }
+        ),
+        variant === "click" && !onlyIcon && /* @__PURE__ */ jsx20(SidebarButton, { visible: expanded, setVisible: setExpanded, position, controlsId: asideId })
+      ]
+    }
+  );
+}
+export {
+  BasicMenu,
+  MegaMenu,
+  Sidebar
+};
+//# sourceMappingURL=menu.js.map