@mounaji_npm/navbar 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# @mounaji_npm/navbar
+
+Composable top navigation bar — logo, links, dropdowns, mobile drawer, auth slot.  
+Token-driven. Zero router dependency.
+
+## Install
+
+```bash
+npm install @mounaji_npm/navbar @mounaji_npm/tokens
+```
+
+## Usage
+
+```jsx
+import { Navbar } from '@mounaji_npm/navbar';
+
+<Navbar
+  logo={{ text: 'My App', href: '/' }}
+  links={[
+    { label: 'Features', href: '/features' },
+    { label: 'Pricing',  href: '/pricing' },
+    {
+      label: 'Resources',
+      children: [
+        { label: 'Docs',  href: '/docs' },
+        { label: 'Blog',  href: '/blog' },
+      ],
+    },
+  ]}
+  actions={[
+    { label: 'Log in',      variant: 'ghost',   href: '/login' },
+    { label: 'Get Started', variant: 'primary',  href: '/signup' },
+  ]}
+  sticky
+  isDark
+/>
+```
+
+## With auth slot
+
+```jsx
+import { Navbar } from '@mounaji_npm/navbar';
+import { LoginButton } from '@mounaji_npm/auth';
+
+<Navbar
+  logo={{ text: 'My App' }}
+  links={[...]}
+  authSlot={<LoginButton />}
+/>
+```
+
+## Props
+
+| Prop               | Type                     | Default  | Description                                      |
+|--------------------|--------------------------|----------|--------------------------------------------------|
+| `logo`             | `LogoConfig`             | `{}`     | `{ text?, src?, alt?, href?, onClick? }`         |
+| `links`            | `NavLink[]`              | `[]`     | `{ label, href?, onClick?, icon?, active?, children? }` |
+| `actions`          | `NavAction[]`            | `[]`     | `{ label, href?, onClick?, variant?, icon?, size? }` |
+| `authSlot`         | `ReactNode`              | –        | Injected right of links (e.g. `<LoginButton />`) |
+| `sticky`           | `boolean`                | `true`   | `position: sticky`                               |
+| `transparent`      | `boolean`                | `false`  | No background (glass effect on scroll)           |
+| `blurOnScroll`     | `boolean`                | `true`   | Backdrop blur after scroll                       |
+| `isDark`           | `boolean`                | `true`   | Dark or light mode token set                     |
+| `mobileBreakpoint` | `number`                 | `768`    | px below which mobile drawer activates           |
+| `height`           | `number`                 | `64`     | Navbar height in px                              |
+| `style`            | `CSSProperties`          | –        | Container override                               |
+
+## Sub-components
+
+```jsx
+import { NavLogo, NavLink, NavDropdown, NavActions, NavHamburger, NavMobileDrawer } from '@mounaji_npm/navbar';
+```
+
+## Demo data
+
+```jsx
+import { DEMO_LOGO, DEMO_LINKS, DEMO_ACTIONS } from '@mounaji_npm/navbar';
+```

package/dist/mounajinavbar.es.js

@@ -0,0 +1,435 @@
+"use client";
+import { jsx as n, jsxs as p, Fragment as z } from "react/jsx-runtime";
+import { useState as h, useRef as L, useEffect as k } from "react";
+function R({ logo: e = {}, isDark: r }) {
+  const { text: m, src: o, alt: t, href: i, onClick: s } = e, l = /* @__PURE__ */ p("span", { style: { display: "flex", alignItems: "center", gap: "10px", textDecoration: "none", cursor: i || s ? "pointer" : "default" }, children: [
+    o && /* @__PURE__ */ n(
+      "img",
+      {
+        src: o,
+        alt: t || m || "Logo",
+        style: { height: "32px", width: "auto", display: "block", flexShrink: 0 }
+      }
+    ),
+    m && /* @__PURE__ */ n("span", { style: {
+      fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+      fontSize: "var(--mn-font-size-lg, 1.125rem)",
+      fontWeight: "var(--mn-font-weight-bold, 700)",
+      color: r ? "var(--mn-text-primary-dark, #F0F4FF)" : "var(--mn-text-primary-light, #1C1915)",
+      letterSpacing: "-0.02em",
+      whiteSpace: "nowrap"
+    }, children: m })
+  ] });
+  return i ? /* @__PURE__ */ n("a", { href: i, style: { textDecoration: "none" }, children: l }) : s ? /* @__PURE__ */ n("button", { onClick: s, style: { background: "none", border: "none", padding: 0 }, children: l }) : l;
+}
+function M({ link: e, isDark: r, onMouseEnter: m, onMouseLeave: o }) {
+  const { label: t, href: i, onClick: s, active: a, icon: l } = e, [f, d] = h(!1), v = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 12px",
+    borderRadius: "var(--mn-radius-md, 0.5rem)",
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    fontSize: "var(--mn-font-size-sm, 0.875rem)",
+    fontWeight: a ? "var(--mn-font-weight-semibold, 600)" : "var(--mn-font-weight-medium, 500)",
+    color: a ? "var(--mn-color-primary, #3B82F6)" : f ? r ? "var(--mn-topnav-text-primary-dark, #F0F4FF)" : "var(--mn-topnav-text-primary-light, #1C1915)" : r ? "var(--mn-topnav-text-secondary-dark, #94A3B8)" : "var(--mn-topnav-text-secondary-light, #47413C)",
+    background: a ? r ? "rgba(59,130,246,0.1)" : "rgba(59,130,246,0.08)" : f ? r ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.04)" : "transparent",
+    textDecoration: "none",
+    cursor: "pointer",
+    border: "none",
+    transition: "color var(--mn-duration-fast, 150ms) var(--mn-easing-default, ease), background var(--mn-duration-fast, 150ms) var(--mn-easing-default, ease)",
+    whiteSpace: "nowrap"
+  }, c = (g) => {
+    d(!0), m == null || m(g);
+  }, x = (g) => {
+    d(!1), o == null || o(g);
+  };
+  return i ? /* @__PURE__ */ p("a", { href: i, style: v, onMouseEnter: c, onMouseLeave: x, children: [
+    l && /* @__PURE__ */ n("span", { style: { fontSize: "1em" }, children: l }),
+    t
+  ] }) : /* @__PURE__ */ p("button", { onClick: s, style: v, onMouseEnter: c, onMouseLeave: x, children: [
+    l && /* @__PURE__ */ n("span", { style: { fontSize: "1em" }, children: l }),
+    t
+  ] });
+}
+function O({ link: e, isDark: r }) {
+  const { label: m, icon: o, children: t = [], active: i } = e, [s, a] = h(!1), l = L(null), f = r ? "var(--mn-topnav-text-primary-dark, #F0F4FF)" : "var(--mn-topnav-text-primary-light, #1C1915)", d = r ? "var(--mn-topnav-text-secondary-dark, #94A3B8)" : "var(--mn-topnav-text-secondary-light, #47413C)", u = r ? "var(--mn-color-card-dark, #0B0F23)" : "var(--mn-color-card-light, #EDE8DE)", y = r ? "var(--mn-border-dark, rgba(255,255,255,0.07))" : "var(--mn-border-light, #C9C2B6)";
+  k(() => {
+    function x(g) {
+      l.current && !l.current.contains(g.target) && a(!1);
+    }
+    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
+  }, []);
+  const v = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 12px",
+    borderRadius: "var(--mn-radius-md, 0.5rem)",
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    fontSize: "var(--mn-font-size-sm, 0.875rem)",
+    fontWeight: i ? "var(--mn-font-weight-semibold, 600)" : "var(--mn-font-weight-medium, 500)",
+    color: i ? "var(--mn-color-primary, #3B82F6)" : s ? f : d,
+    background: s ? r ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.04)" : "transparent",
+    border: "none",
+    cursor: "pointer",
+    transition: "color var(--mn-duration-fast, 150ms) ease, background var(--mn-duration-fast, 150ms) ease",
+    whiteSpace: "nowrap"
+  }, c = {
+    position: "absolute",
+    top: "calc(100% + 8px)",
+    left: 0,
+    minWidth: "200px",
+    background: u,
+    border: `1px solid ${y}`,
+    borderRadius: "var(--mn-radius-lg, 0.75rem)",
+    boxShadow: "var(--mn-shadow-md, 0 4px 16px rgba(0,0,0,0.18))",
+    padding: "6px",
+    zIndex: 1e3,
+    opacity: s ? 1 : 0,
+    transform: s ? "translateY(0)" : "translateY(-6px)",
+    pointerEvents: s ? "auto" : "none",
+    transition: "opacity var(--mn-duration-fast, 150ms) ease, transform var(--mn-duration-fast, 150ms) ease"
+  };
+  return /* @__PURE__ */ p("div", { ref: l, style: { position: "relative" }, children: [
+    /* @__PURE__ */ p("button", { style: v, onClick: () => a((x) => !x), children: [
+      o && /* @__PURE__ */ n("span", { children: o }),
+      m,
+      /* @__PURE__ */ n("span", { style: { fontSize: "10px", marginLeft: "2px", transform: s ? "rotate(180deg)" : "none", transition: "transform var(--mn-duration-fast, 150ms) ease", display: "inline-block" }, children: "▼" })
+    ] }),
+    /* @__PURE__ */ n("div", { style: c, children: t.map((x, g) => /* @__PURE__ */ n(W, { child: x, isDark: r, textColor: f, onClose: () => a(!1) }, g)) })
+  ] });
+}
+function W({ child: e, isDark: r, textColor: m, onClose: o }) {
+  const [t, i] = h(!1), s = {
+    display: "block",
+    width: "100%",
+    textAlign: "left",
+    padding: "8px 12px",
+    borderRadius: "var(--mn-radius-sm, 0.375rem)",
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    fontSize: "var(--mn-font-size-sm, 0.875rem)",
+    fontWeight: "var(--mn-font-weight-medium, 500)",
+    color: t ? "var(--mn-color-primary, #3B82F6)" : m,
+    background: t ? r ? "rgba(59,130,246,0.1)" : "rgba(59,130,246,0.08)" : "transparent",
+    border: "none",
+    cursor: "pointer",
+    textDecoration: "none",
+    transition: "color var(--mn-duration-fast, 150ms) ease, background var(--mn-duration-fast, 150ms) ease"
+  };
+  return e.href ? /* @__PURE__ */ p("a", { href: e.href, style: s, onMouseEnter: () => i(!0), onMouseLeave: () => i(!1), onClick: o, children: [
+    e.icon && /* @__PURE__ */ n("span", { style: { marginRight: "8px" }, children: e.icon }),
+    e.label
+  ] }) : /* @__PURE__ */ p("button", { style: s, onMouseEnter: () => i(!0), onMouseLeave: () => i(!1), onClick: () => {
+    var a;
+    (a = e.onClick) == null || a.call(e), o();
+  }, children: [
+    e.icon && /* @__PURE__ */ n("span", { style: { marginRight: "8px" }, children: e.icon }),
+    e.label
+  ] });
+}
+function N({ actions: e = [], isDark: r }) {
+  return /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: e.map((m, o) => /* @__PURE__ */ n($, { action: m, isDark: r }, o)) });
+}
+function $({ action: e, isDark: r }) {
+  const { label: m, onClick: o, href: t, variant: i = "primary", icon: s, size: a = "sm" } = e, [l, f] = h(!1), d = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    fontWeight: "var(--mn-font-weight-semibold, 600)",
+    borderRadius: "var(--mn-radius-md, 0.5rem)",
+    cursor: "pointer",
+    textDecoration: "none",
+    border: "none",
+    transition: "all var(--mn-duration-fast, 150ms) var(--mn-easing-default, ease)",
+    whiteSpace: "nowrap"
+  }, u = {
+    sm: { padding: "7px 16px", fontSize: "var(--mn-font-size-sm, 0.875rem)" },
+    md: { padding: "9px 20px", fontSize: "var(--mn-font-size-base, 1rem)" }
+  }, y = {
+    primary: {
+      background: l ? "var(--mn-color-primary-hover, #60A5FA)" : "var(--mn-color-primary, #3B82F6)",
+      color: "#fff"
+    },
+    outline: {
+      background: "transparent",
+      color: r ? "var(--mn-topnav-text-primary-dark, #F0F4FF)" : "var(--mn-topnav-text-primary-light, #1C1915)",
+      border: `1px solid ${r ? "var(--mn-border-md-dark, rgba(255,255,255,0.13))" : "var(--mn-border-light, #C9C2B6)"}`
+    },
+    ghost: {
+      background: l ? r ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.04)" : "transparent",
+      color: r ? "var(--mn-topnav-text-secondary-dark, #94A3B8)" : "var(--mn-topnav-text-secondary-light, #47413C)",
+      border: "none"
+    },
+    gradient: {
+      background: l ? "linear-gradient(135deg, #60A5FA, #A78BFA)" : "var(--mn-gradient-primary, linear-gradient(135deg, #3B82F6, #7C3AED))",
+      color: "#fff"
+    }
+  }, v = { ...d, ...u[a] ?? u.sm, ...y[i] ?? y.primary };
+  return t ? /* @__PURE__ */ p("a", { href: t, style: v, onMouseEnter: () => f(!0), onMouseLeave: () => f(!1), children: [
+    s && /* @__PURE__ */ n("span", { children: s }),
+    m
+  ] }) : /* @__PURE__ */ p("button", { style: v, onClick: o, onMouseEnter: () => f(!0), onMouseLeave: () => f(!1), children: [
+    s && /* @__PURE__ */ n("span", { children: s }),
+    m
+  ] });
+}
+function H({ open: e, onClick: r, isDark: m }) {
+  const o = m ? "var(--mn-topnav-text-primary-dark, #F0F4FF)" : "var(--mn-topnav-text-primary-light, #1C1915)";
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: r,
+      "aria-label": e ? "Close menu" : "Open menu",
+      "aria-expanded": e,
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "8px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px",
+        borderRadius: "var(--mn-radius-sm, 0.375rem)"
+      },
+      children: [0, 1, 2].map((t) => /* @__PURE__ */ n("span", { style: {
+        display: "block",
+        width: "22px",
+        height: "2px",
+        background: o,
+        borderRadius: "2px",
+        transition: "all var(--mn-duration-normal, 200ms) ease",
+        transformOrigin: "center",
+        transform: e ? t === 0 ? "translateY(7px) rotate(45deg)" : t === 2 ? "translateY(-7px) rotate(-45deg)" : "scaleX(0) opacity(0)" : "none",
+        opacity: e && t === 1 ? 0 : 1
+      } }, t))
+    }
+  );
+}
+function Y({ open: e, links: r = [], actions: m = [], authSlot: o, isDark: t, onClose: i }) {
+  const s = t ? "var(--mn-color-nav-dark, #07091C)" : "var(--mn-color-nav-light, #E1DAD0)", a = t ? "var(--mn-border-dark, rgba(255,255,255,0.07))" : "var(--mn-border-light, #C9C2B6)", l = t ? "var(--mn-topnav-text-primary-dark, #F0F4FF)" : "var(--mn-topnav-text-primary-light, #1C1915)", f = t ? "var(--mn-topnav-text-secondary-dark, #94A3B8)" : "var(--mn-topnav-text-secondary-light, #47413C)";
+  return k(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [e]), /* @__PURE__ */ p(z, { children: [
+    /* @__PURE__ */ n(
+      "div",
+      {
+        onClick: i,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 998,
+          background: "rgba(0,0,0,0.5)",
+          opacity: e ? 1 : 0,
+          pointerEvents: e ? "auto" : "none",
+          transition: "opacity var(--mn-duration-normal, 200ms) ease"
+        }
+      }
+    ),
+    /* @__PURE__ */ p("div", { style: {
+      position: "fixed",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: "min(320px, 85vw)",
+      background: s,
+      borderLeft: `1px solid ${a}`,
+      zIndex: 999,
+      transform: e ? "translateX(0)" : "translateX(100%)",
+      transition: "transform var(--mn-duration-normal, 200ms) var(--mn-easing-default, ease)",
+      display: "flex",
+      flexDirection: "column",
+      padding: "24px 20px",
+      overflowY: "auto"
+    }, children: [
+      /* @__PURE__ */ n("button", { onClick: i, style: { alignSelf: "flex-end", background: "none", border: "none", cursor: "pointer", color: f, fontSize: "20px", lineHeight: 1, padding: "4px" }, children: "✕" }),
+      /* @__PURE__ */ n("nav", { style: { display: "flex", flexDirection: "column", gap: "4px", marginTop: "16px" }, children: r.map((d, u) => /* @__PURE__ */ n(D, { link: d, isDark: t, textColor: l, mutedColor: f, onClose: i }, u)) }),
+      (m.length > 0 || o) && /* @__PURE__ */ n("div", { style: { borderTop: `1px solid ${a}`, margin: "20px 0" } }),
+      o && /* @__PURE__ */ n("div", { style: { marginBottom: "12px" }, children: o }),
+      /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: m.map((d, u) => /* @__PURE__ */ n(
+        "a",
+        {
+          href: d.href,
+          onClick: () => {
+            var y;
+            (y = d.onClick) == null || y.call(d), i();
+          },
+          style: {
+            display: "block",
+            padding: "10px 16px",
+            borderRadius: "var(--mn-radius-md, 0.5rem)",
+            textAlign: "center",
+            fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+            fontWeight: "var(--mn-font-weight-semibold, 600)",
+            fontSize: "var(--mn-font-size-sm, 0.875rem)",
+            cursor: "pointer",
+            textDecoration: "none",
+            background: d.variant === "primary" || !d.variant ? "var(--mn-color-primary, #3B82F6)" : "transparent",
+            color: d.variant === "primary" || !d.variant ? "#fff" : l,
+            border: d.variant === "outline" ? `1px solid ${a}` : "none"
+          },
+          children: d.label
+        },
+        u
+      )) })
+    ] })
+  ] });
+}
+function D({ link: e, isDark: r, textColor: m, mutedColor: o, onClose: t }) {
+  const { label: i, href: s, onClick: a, icon: l, active: f, children: d } = e, [u, y] = h(!1), v = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "10px 12px",
+    borderRadius: "var(--mn-radius-md, 0.5rem)",
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    fontSize: "var(--mn-font-size-base, 1rem)",
+    fontWeight: f ? "var(--mn-font-weight-semibold, 600)" : "var(--mn-font-weight-medium, 500)",
+    color: f ? "var(--mn-color-primary, #3B82F6)" : m,
+    background: f ? r ? "rgba(59,130,246,0.1)" : "rgba(59,130,246,0.08)" : "transparent",
+    textDecoration: "none",
+    cursor: "pointer",
+    border: "none",
+    width: "100%",
+    textAlign: "left"
+  };
+  return d != null && d.length ? /* @__PURE__ */ p("div", { children: [
+    /* @__PURE__ */ p("button", { style: v, onClick: () => y((c) => !c), children: [
+      /* @__PURE__ */ p("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        l && /* @__PURE__ */ n("span", { children: l }),
+        i
+      ] }),
+      /* @__PURE__ */ n("span", { style: { fontSize: "10px", transform: u ? "rotate(180deg)" : "none", transition: "transform 150ms ease", display: "inline-block" }, children: "▼" })
+    ] }),
+    u && /* @__PURE__ */ n("div", { style: { paddingLeft: "12px", marginTop: "4px", display: "flex", flexDirection: "column", gap: "2px" }, children: d.map((c, x) => c.href ? /* @__PURE__ */ p("a", { href: c.href, style: { ...v, fontSize: "var(--mn-font-size-sm, 0.875rem)", color: o }, onClick: t, children: [
+      c.icon && /* @__PURE__ */ n("span", { style: { marginRight: "8px" }, children: c.icon }),
+      c.label
+    ] }, x) : /* @__PURE__ */ p("button", { style: { ...v, fontSize: "var(--mn-font-size-sm, 0.875rem)", color: o }, onClick: () => {
+      var g;
+      (g = c.onClick) == null || g.call(c), t();
+    }, children: [
+      c.icon && /* @__PURE__ */ n("span", { style: { marginRight: "8px" }, children: c.icon }),
+      c.label
+    ] }, x)) })
+  ] }) : s ? /* @__PURE__ */ p("a", { href: s, style: v, onClick: t, children: [
+    l && /* @__PURE__ */ n("span", { style: { marginRight: "8px" }, children: l }),
+    i
+  ] }) : /* @__PURE__ */ p("button", { style: v, onClick: () => {
+    a == null || a(), t();
+  }, children: [
+    l && /* @__PURE__ */ n("span", { style: { marginRight: "8px" }, children: l }),
+    i
+  ] });
+}
+function _({
+  logo: e = {},
+  links: r = [],
+  actions: m = [],
+  authSlot: o,
+  sticky: t = !0,
+  transparent: i = !1,
+  blurOnScroll: s = !0,
+  isDark: a = !0,
+  tokens: l,
+  style: f,
+  mobileBreakpoint: d = 768,
+  height: u = 64
+}) {
+  const [y, v] = h(!1), [c, x] = h(!1), [g, B] = h(!1);
+  k(() => {
+    function b() {
+      B(window.innerWidth < d);
+    }
+    function w() {
+      x(window.scrollY > 12);
+    }
+    return b(), w(), window.addEventListener("resize", b), window.addEventListener("scroll", w, { passive: !0 }), () => {
+      window.removeEventListener("resize", b), window.removeEventListener("scroll", w);
+    };
+  }, [d]);
+  const E = a ? "var(--mn-color-nav-dark, #07091C)" : "var(--mn-color-nav-light, #E1DAD0)", A = a ? "var(--mn-border-dark, rgba(255,255,255,0.07))" : "var(--mn-border-light, #C9C2B6)", C = !i || c, F = s && c, I = {
+    position: t ? "sticky" : "relative",
+    top: 0,
+    zIndex: 100,
+    width: "100%",
+    height: `${u}px`,
+    display: "flex",
+    alignItems: "center",
+    background: C ? E : "transparent",
+    borderBottom: C ? `1px solid ${A}` : "none",
+    backdropFilter: F ? "blur(12px) saturate(1.3)" : "none",
+    WebkitBackdropFilter: F ? "blur(12px) saturate(1.3)" : "none",
+    transition: "background var(--mn-duration-normal, 200ms) ease, border-color var(--mn-duration-normal, 200ms) ease",
+    fontFamily: "var(--mn-font-family, system-ui, sans-serif)",
+    ...f
+  };
+  return /* @__PURE__ */ p(z, { children: [
+    /* @__PURE__ */ n("nav", { style: I, role: "navigation", "aria-label": "Main navigation", children: /* @__PURE__ */ p("div", { style: {
+      width: "100%",
+      maxWidth: "1280px",
+      margin: "0 auto",
+      padding: "0 var(--mn-spacing-lg, 24px)",
+      display: "flex",
+      alignItems: "center",
+      gap: "var(--mn-spacing-lg, 24px)"
+    }, children: [
+      /* @__PURE__ */ n("div", { style: { flexShrink: 0 }, children: /* @__PURE__ */ n(R, { logo: e, isDark: a }) }),
+      !g && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: "4px", flex: 1 }, children: r.map(
+        (b, w) => {
+          var S;
+          return (S = b.children) != null && S.length ? /* @__PURE__ */ n(O, { link: b, isDark: a }, w) : /* @__PURE__ */ n(M, { link: b, isDark: a }, w);
+        }
+      ) }),
+      /* @__PURE__ */ n("div", { style: { flex: g ? 1 : 0 } }),
+      !g && /* @__PURE__ */ p("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }, children: [
+        o,
+        /* @__PURE__ */ n(N, { actions: m, isDark: a })
+      ] }),
+      g && /* @__PURE__ */ n(H, { open: y, onClick: () => v((b) => !b), isDark: a })
+    ] }) }),
+    g && /* @__PURE__ */ n(
+      Y,
+      {
+        open: y,
+        links: r,
+        actions: m,
+        authSlot: o,
+        isDark: a,
+        onClose: () => v(!1)
+      }
+    )
+  ] });
+}
+const G = {
+  text: "Acme SaaS",
+  href: "/"
+}, K = [
+  { label: "Home", href: "/", active: !0 },
+  { label: "Features", href: "/features" },
+  { label: "Pricing", href: "/pricing" },
+  {
+    label: "Resources",
+    children: [
+      { label: "Documentation", href: "/docs", icon: "📄" },
+      { label: "Blog", href: "/blog", icon: "✍️" },
+      { label: "Changelog", href: "/changelog", icon: "🕐" }
+    ]
+  }
+], P = [
+  { label: "Log in", variant: "ghost", href: "/login" },
+  { label: "Get Started", variant: "primary", href: "/signup" }
+];
+export {
+  P as DEMO_ACTIONS,
+  K as DEMO_LINKS,
+  G as DEMO_LOGO,
+  N as NavActions,
+  O as NavDropdown,
+  H as NavHamburger,
+  M as NavLink,
+  R as NavLogo,
+  Y as NavMobileDrawer,
+  _ as Navbar
+};
+//# sourceMappingURL=mounajinavbar.es.js.map

package/dist/mounajinavbar.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mounajinavbar.es.js","sources":["../src/components/NavLogo.jsx","../src/components/NavLink.jsx","../src/components/NavDropdown.jsx","../src/components/NavActions.jsx","../src/components/NavMobileMenu.jsx","../src/Navbar.jsx","../src/demo.js"],"sourcesContent":["import { useState } from 'react';\n\nexport function NavLogo({ logo = {}, isDark }) {\n  const { text, src, alt, href, onClick } = logo;\n  const textColor = isDark ? 'var(--mn-text-primary-dark, #F0F4FF)' : 'var(--mn-text-primary-light, #1C1915)';\n\n  const inner = (\n    <span style={{ display: 'flex', alignItems: 'center', gap: '10px', textDecoration: 'none', cursor: href || onClick ? 'pointer' : 'default' }}>\n      {src && (\n        <img\n          src={src}\n          alt={alt || text || 'Logo'}\n          style={{ height: '32px', width: 'auto', display: 'block', flexShrink: 0 }}\n        />\n      )}\n      {text && (\n        <span style={{\n          fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n          fontSize: 'var(--mn-font-size-lg, 1.125rem)',\n          fontWeight: 'var(--mn-font-weight-bold, 700)',\n          color: textColor,\n          letterSpacing: '-0.02em',\n          whiteSpace: 'nowrap',\n        }}>\n          {text}\n        </span>\n      )}\n    </span>\n  );\n\n  if (href) {\n    return <a href={href} style={{ textDecoration: 'none' }}>{inner}</a>;\n  }\n  if (onClick) {\n    return <button onClick={onClick} style={{ background: 'none', border: 'none', padding: 0 }}>{inner}</button>;\n  }\n  return inner;\n}\n","import { useState } from 'react';\n\nexport function NavLink({ link, isDark, onMouseEnter, onMouseLeave }) {\n  const { label, href, onClick, active, icon } = link;\n  const [hovered, setHovered] = useState(false);\n\n  const textColor = isDark\n    ? 'var(--mn-topnav-text-primary-dark, #F0F4FF)'\n    : 'var(--mn-topnav-text-primary-light, #1C1915)';\n  const mutedColor = isDark\n    ? 'var(--mn-topnav-text-secondary-dark, #94A3B8)'\n    : 'var(--mn-topnav-text-secondary-light, #47413C)';\n\n  const style = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '6px',\n    padding: '6px 12px',\n    borderRadius: 'var(--mn-radius-md, 0.5rem)',\n    fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n    fontSize: 'var(--mn-font-size-sm, 0.875rem)',\n    fontWeight: active ? 'var(--mn-font-weight-semibold, 600)' : 'var(--mn-font-weight-medium, 500)',\n    color: active ? 'var(--mn-color-primary, #3B82F6)' : (hovered ? textColor : mutedColor),\n    background: active\n      ? (isDark ? 'rgba(59,130,246,0.1)' : 'rgba(59,130,246,0.08)')\n      : (hovered ? (isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)') : 'transparent'),\n    textDecoration: 'none',\n    cursor: 'pointer',\n    border: 'none',\n    transition: 'color var(--mn-duration-fast, 150ms) var(--mn-easing-default, ease), background var(--mn-duration-fast, 150ms) var(--mn-easing-default, ease)',\n    whiteSpace: 'nowrap',\n  };\n\n  const handleMouseEnter = (e) => { setHovered(true); onMouseEnter?.(e); };\n  const handleMouseLeave = (e) => { setHovered(false); onMouseLeave?.(e); };\n\n  if (href) {\n    return (\n      <a href={href} style={style} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n        {icon && <span style={{ fontSize: '1em' }}>{icon}</span>}\n        {label}\n      </a>\n    );\n  }\n\n  return (\n    <button onClick={onClick} style={style} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      {icon && <span style={{ fontSize: '1em' }}>{icon}</span>}\n      {label}\n    </button>\n  );\n}\n","import { useState, useRef, useEffect } from 'react';\n\nexport function NavDropdown({ link, isDark }) {\n  const { label, icon, children = [], active } = link;\n  const [open, setOpen] = useState(false);\n  const ref = useRef(null);\n\n  const textColor = isDark ? 'var(--mn-topnav-text-primary-dark, #F0F4FF)' : 'var(--mn-topnav-text-primary-light, #1C1915)';\n  const mutedColor = isDark ? 'var(--mn-topnav-text-secondary-dark, #94A3B8)' : 'var(--mn-topnav-text-secondary-light, #47413C)';\n  const cardBg = isDark ? 'var(--mn-color-card-dark, #0B0F23)' : 'var(--mn-color-card-light, #EDE8DE)';\n  const borderColor = isDark ? 'var(--mn-border-dark, rgba(255,255,255,0.07))' : 'var(--mn-border-light, #C9C2B6)';\n\n  useEffect(() => {\n    function handleClick(e) {\n      if (ref.current && !ref.current.contains(e.target)) setOpen(false);\n    }\n    document.addEventListener('mousedown', handleClick);\n    return () => document.removeEventListener('mousedown', handleClick);\n  }, []);\n\n  const triggerStyle = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '6px',\n    padding: '6px 12px',\n    borderRadius: 'var(--mn-radius-md, 0.5rem)',\n    fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n    fontSize: 'var(--mn-font-size-sm, 0.875rem)',\n    fontWeight: active ? 'var(--mn-font-weight-semibold, 600)' : 'var(--mn-font-weight-medium, 500)',\n    color: active ? 'var(--mn-color-primary, #3B82F6)' : (open ? textColor : mutedColor),\n    background: open ? (isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)') : 'transparent',\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'color var(--mn-duration-fast, 150ms) ease, background var(--mn-duration-fast, 150ms) ease',\n    whiteSpace: 'nowrap',\n  };\n\n  const dropdownStyle = {\n    position: 'absolute',\n    top: 'calc(100% + 8px)',\n    left: 0,\n    minWidth: '200px',\n    background: cardBg,\n    border: `1px solid ${borderColor}`,\n    borderRadius: 'var(--mn-radius-lg, 0.75rem)',\n    boxShadow: 'var(--mn-shadow-md, 0 4px 16px rgba(0,0,0,0.18))',\n    padding: '6px',\n    zIndex: 1000,\n    opacity: open ? 1 : 0,\n    transform: open ? 'translateY(0)' : 'translateY(-6px)',\n    pointerEvents: open ? 'auto' : 'none',\n    transition: 'opacity var(--mn-duration-fast, 150ms) ease, transform var(--mn-duration-fast, 150ms) ease',\n  };\n\n  const itemStyle = (hovered) => ({\n    display: 'block',\n    width: '100%',\n    textAlign: 'left',\n    padding: '8px 12px',\n    borderRadius: 'var(--mn-radius-sm, 0.375rem)',\n    fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n    fontSize: 'var(--mn-font-size-sm, 0.875rem)',\n    fontWeight: 'var(--mn-font-weight-medium, 500)',\n    color: hovered ? 'var(--mn-color-primary, #3B82F6)' : textColor,\n    background: hovered ? (isDark ? 'rgba(59,130,246,0.1)' : 'rgba(59,130,246,0.08)') : 'transparent',\n    border: 'none',\n    cursor: 'pointer',\n    textDecoration: 'none',\n    transition: 'color var(--mn-duration-fast, 150ms) ease, background var(--mn-duration-fast, 150ms) ease',\n  });\n\n  return (\n    <div ref={ref} style={{ position: 'relative' }}>\n      <button style={triggerStyle} onClick={() => setOpen(o => !o)}>\n        {icon && <span>{icon}</span>}\n        {label}\n        <span style={{ fontSize: '10px', marginLeft: '2px', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--mn-duration-fast, 150ms) ease', display: 'inline-block' }}>▼</span>\n      </button>\n      <div style={dropdownStyle}>\n        {children.map((child, i) => (\n          <DropdownItem key={i} child={child} isDark={isDark} textColor={textColor} onClose={() => setOpen(false)} />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction DropdownItem({ child, isDark, textColor, onClose }) {\n  const [hov, setHov] = useState(false);\n  const cardBg = isDark ? 'var(--mn-color-card-dark, #0B0F23)' : 'var(--mn-color-card-light, #EDE8DE)';\n\n  const s = {\n    display: 'block',\n    width: '100%',\n    textAlign: 'left',\n    padding: '8px 12px',\n    borderRadius: 'var(--mn-radius-sm, 0.375rem)',\n    fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n    fontSize: 'var(--mn-font-size-sm, 0.875rem)',\n    fontWeight: 'var(--mn-font-weight-medium, 500)',\n    color: hov ? 'var(--mn-color-primary, #3B82F6)' : textColor,\n    background: hov ? (isDark ? 'rgba(59,130,246,0.1)' : 'rgba(59,130,246,0.08)') : 'transparent',\n    border: 'none',\n    cursor: 'pointer',\n    textDecoration: 'none',\n    transition: 'color var(--mn-duration-fast, 150ms) ease, background var(--mn-duration-fast, 150ms) ease',\n  };\n\n  if (child.href) {\n    return (\n      <a href={child.href} style={s} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} onClick={onClose}>\n        {child.icon && <span style={{ marginRight: '8px' }}>{child.icon}</span>}\n        {child.label}\n      </a>\n    );\n  }\n  return (\n    <button style={s} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)} onClick={() => { child.onClick?.(); onClose(); }}>\n      {child.icon && <span style={{ marginRight: '8px' }}>{child.icon}</span>}\n      {child.label}\n    </button>\n  );\n}\n","import { useState } from 'react';\n\nexport function NavActions({ actions = [], isDark }) {\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n      {actions.map((action, i) => (\n        <NavActionButton key={i} action={action} isDark={isDark} />\n      ))}\n    </div>\n  );\n}\n\nfunction NavActionButton({ action, isDark }) {\n  const { label, onClick, href, variant = 'primary', icon, size = 'sm' } = action;\n  const [hovered, setHovered] = useState(false);\n\n  const base = {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '6px',\n    fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n    fontWeight: 'var(--mn-font-weight-semibold, 600)',\n    borderRadius: 'var(--mn-radius-md, 0.5rem)',\n    cursor: 'pointer',\n    textDecoration: 'none',\n    border: 'none',\n    transition: 'all var(--mn-duration-fast, 150ms) var(--mn-easing-default, ease)',\n    whiteSpace: 'nowrap',\n  };\n\n  const sizes = {\n    sm: { padding: '7px 16px', fontSize: 'var(--mn-font-size-sm, 0.875rem)' },\n    md: { padding: '9px 20px', fontSize: 'var(--mn-font-size-base, 1rem)' },\n  };\n\n  const variants = {\n    primary: {\n      background: hovered ? 'var(--mn-color-primary-hover, #60A5FA)' : 'var(--mn-color-primary, #3B82F6)',\n      color: '#fff',\n    },\n    outline: {\n      background: 'transparent',\n      color: isDark ? 'var(--mn-topnav-text-primary-dark, #F0F4FF)' : 'var(--mn-topnav-text-primary-light, #1C1915)',\n      border: `1px solid ${isDark ? 'var(--mn-border-md-dark, rgba(255,255,255,0.13))' : 'var(--mn-border-light, #C9C2B6)'}`,\n    },\n    ghost: {\n      background: hovered ? (isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)') : 'transparent',\n      color: isDark ? 'var(--mn-topnav-text-secondary-dark, #94A3B8)' : 'var(--mn-topnav-text-secondary-light, #47413C)',\n      border: 'none',\n    },\n    gradient: {\n      background: hovered\n        ? 'linear-gradient(135deg, #60A5FA, #A78BFA)'\n        : 'var(--mn-gradient-primary, linear-gradient(135deg, #3B82F6, #7C3AED))',\n      color: '#fff',\n    },\n  };\n\n  const style = { ...base, ...sizes[size] ?? sizes.sm, ...variants[variant] ?? variants.primary };\n\n  if (href) {\n    return (\n      <a href={href} style={style} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>\n        {icon && <span>{icon}</span>}\n        {label}\n      </a>\n    );\n  }\n\n  return (\n    <button style={style} onClick={onClick} onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>\n      {icon && <span>{icon}</span>}\n      {label}\n    </button>\n  );\n}\n","import { useState, useEffect } from 'react';\n\nexport function NavHamburger({ open, onClick, isDark }) {\n  const color = isDark ? 'var(--mn-topnav-text-primary-dark, #F0F4FF)' : 'var(--mn-topnav-text-primary-light, #1C1915)';\n  return (\n    <button\n      onClick={onClick}\n      aria-label={open ? 'Close menu' : 'Open menu'}\n      aria-expanded={open}\n      style={{\n        background: 'none',\n        border: 'none',\n        cursor: 'pointer',\n        padding: '8px',\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '5px',\n        borderRadius: 'var(--mn-radius-sm, 0.375rem)',\n      }}\n    >\n      {[0, 1, 2].map(i => (\n        <span key={i} style={{\n          display: 'block',\n          width: '22px',\n          height: '2px',\n          background: color,\n          borderRadius: '2px',\n          transition: 'all var(--mn-duration-normal, 200ms) ease',\n          transformOrigin: 'center',\n          transform: open\n            ? (i === 0 ? 'translateY(7px) rotate(45deg)' : i === 2 ? 'translateY(-7px) rotate(-45deg)' : 'scaleX(0) opacity(0)')\n            : 'none',\n          opacity: open && i === 1 ? 0 : 1,\n        }} />\n      ))}\n    </button>\n  );\n}\n\nexport function NavMobileDrawer({ open, links = [], actions = [], authSlot, isDark, onClose }) {\n  const bg = isDark ? 'var(--mn-color-nav-dark, #07091C)' : 'var(--mn-color-nav-light, #E1DAD0)';\n  const borderColor = isDark ? 'var(--mn-border-dark, rgba(255,255,255,0.07))' : 'var(--mn-border-light, #C9C2B6)';\n  const textColor = isDark ? 'var(--mn-topnav-text-primary-dark, #F0F4FF)' : 'var(--mn-topnav-text-primary-light, #1C1915)';\n  const mutedColor = isDark ? 'var(--mn-topnav-text-secondary-dark, #94A3B8)' : 'var(--mn-topnav-text-secondary-light, #47413C)';\n\n  useEffect(() => {\n    if (open) document.body.style.overflow = 'hidden';\n    else document.body.style.overflow = '';\n    return () => { document.body.style.overflow = ''; };\n  }, [open]);\n\n  return (\n    <>\n      {/* Backdrop */}\n      <div\n        onClick={onClose}\n        style={{\n          position: 'fixed', inset: 0, zIndex: 998,\n          background: 'rgba(0,0,0,0.5)',\n          opacity: open ? 1 : 0,\n          pointerEvents: open ? 'auto' : 'none',\n          transition: 'opacity var(--mn-duration-normal, 200ms) ease',\n        }}\n      />\n\n      {/* Drawer */}\n      <div style={{\n        position: 'fixed', top: 0, right: 0, bottom: 0,\n        width: 'min(320px, 85vw)',\n        background: bg,\n        borderLeft: `1px solid ${borderColor}`,\n        zIndex: 999,\n        transform: open ? 'translateX(0)' : 'translateX(100%)',\n        transition: 'transform var(--mn-duration-normal, 200ms) var(--mn-easing-default, ease)',\n        display: 'flex',\n        flexDirection: 'column',\n        padding: '24px 20px',\n        overflowY: 'auto',\n      }}>\n        {/* Close */}\n        <button onClick={onClose} style={{ alignSelf: 'flex-end', background: 'none', border: 'none', cursor: 'pointer', color: mutedColor, fontSize: '20px', lineHeight: 1, padding: '4px' }}>✕</button>\n\n        {/* Links */}\n        <nav style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '16px' }}>\n          {links.map((link, i) => (\n            <MobileLinkItem key={i} link={link} isDark={isDark} textColor={textColor} mutedColor={mutedColor} onClose={onClose} />\n          ))}\n        </nav>\n\n        {/* Divider */}\n        {(actions.length > 0 || authSlot) && (\n          <div style={{ borderTop: `1px solid ${borderColor}`, margin: '20px 0' }} />\n        )}\n\n        {/* Auth slot */}\n        {authSlot && <div style={{ marginBottom: '12px' }}>{authSlot}</div>}\n\n        {/* Actions */}\n        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>\n          {actions.map((action, i) => (\n            <a key={i}\n              href={action.href}\n              onClick={() => { action.onClick?.(); onClose(); }}\n              style={{\n                display: 'block',\n                padding: '10px 16px',\n                borderRadius: 'var(--mn-radius-md, 0.5rem)',\n                textAlign: 'center',\n                fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n                fontWeight: 'var(--mn-font-weight-semibold, 600)',\n                fontSize: 'var(--mn-font-size-sm, 0.875rem)',\n                cursor: 'pointer',\n                textDecoration: 'none',\n                background: action.variant === 'primary' || !action.variant\n                  ? 'var(--mn-color-primary, #3B82F6)' : 'transparent',\n                color: action.variant === 'primary' || !action.variant\n                  ? '#fff' : textColor,\n                border: action.variant === 'outline' ? `1px solid ${borderColor}` : 'none',\n              }}\n            >\n              {action.label}\n            </a>\n          ))}\n        </div>\n      </div>\n    </>\n  );\n}\n\nfunction MobileLinkItem({ link, isDark, textColor, mutedColor, onClose }) {\n  const { label, href, onClick, icon, active, children } = link;\n  const [expanded, setExpanded] = useState(false);\n\n  const linkStyle = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '10px 12px',\n    borderRadius: 'var(--mn-radius-md, 0.5rem)',\n    fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n    fontSize: 'var(--mn-font-size-base, 1rem)',\n    fontWeight: active ? 'var(--mn-font-weight-semibold, 600)' : 'var(--mn-font-weight-medium, 500)',\n    color: active ? 'var(--mn-color-primary, #3B82F6)' : textColor,\n    background: active ? (isDark ? 'rgba(59,130,246,0.1)' : 'rgba(59,130,246,0.08)') : 'transparent',\n    textDecoration: 'none',\n    cursor: 'pointer',\n    border: 'none',\n    width: '100%',\n    textAlign: 'left',\n  };\n\n  if (children?.length) {\n    return (\n      <div>\n        <button style={linkStyle} onClick={() => setExpanded(e => !e)}>\n          <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n            {icon && <span>{icon}</span>}\n            {label}\n          </span>\n          <span style={{ fontSize: '10px', transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 150ms ease', display: 'inline-block' }}>▼</span>\n        </button>\n        {expanded && (\n          <div style={{ paddingLeft: '12px', marginTop: '4px', display: 'flex', flexDirection: 'column', gap: '2px' }}>\n            {children.map((child, i) => (\n              child.href\n                ? <a key={i} href={child.href} style={{ ...linkStyle, fontSize: 'var(--mn-font-size-sm, 0.875rem)', color: mutedColor }} onClick={onClose}>{child.icon && <span style={{ marginRight: '8px' }}>{child.icon}</span>}{child.label}</a>\n                : <button key={i} style={{ ...linkStyle, fontSize: 'var(--mn-font-size-sm, 0.875rem)', color: mutedColor }} onClick={() => { child.onClick?.(); onClose(); }}>{child.icon && <span style={{ marginRight: '8px' }}>{child.icon}</span>}{child.label}</button>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  if (href) {\n    return <a href={href} style={linkStyle} onClick={onClose}>{icon && <span style={{ marginRight: '8px' }}>{icon}</span>}{label}</a>;\n  }\n  return <button style={linkStyle} onClick={() => { onClick?.(); onClose(); }}>{icon && <span style={{ marginRight: '8px' }}>{icon}</span>}{label}</button>;\n}\n\n","/**\n * Navbar — @mounaji_npm/navbar\n *\n * Composable top navigation bar.\n *\n * Props:\n *   logo              — { text?, src?, alt?, href?, onClick? }\n *   links             — NavLink[]   { label, href?, onClick?, icon?, active?, children?: NavLink[] }\n *   actions           — NavAction[] { label, href?, onClick?, variant?, icon?, size? }\n *   authSlot          — ReactNode   inject e.g. <LoginButton /> from @mounaji_npm/auth\n *   sticky            — boolean     (default: true)\n *   transparent       — boolean     no background (for hero overlay)\n *   blurOnScroll      — boolean     glass blur effect after scroll (default: true)\n *   isDark            — boolean     (default: true)\n *   tokens            — Partial<DEFAULT_TOKENS>\n *   style             — CSSProperties\n *   mobileBreakpoint  — number px   (default: 768)\n *   height            — number px   (default: 64)\n */\n\nimport { useState, useEffect } from 'react';\nimport { NavLogo } from './components/NavLogo.jsx';\nimport { NavLink } from './components/NavLink.jsx';\nimport { NavDropdown } from './components/NavDropdown.jsx';\nimport { NavActions } from './components/NavActions.jsx';\nimport { NavHamburger, NavMobileDrawer } from './components/NavMobileMenu.jsx';\n\nexport function Navbar({\n  logo = {},\n  links = [],\n  actions = [],\n  authSlot,\n  sticky = true,\n  transparent = false,\n  blurOnScroll = true,\n  isDark = true,\n  tokens,\n  style,\n  mobileBreakpoint = 768,\n  height = 64,\n}) {\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [scrolled, setScrolled] = useState(false);\n  const [isMobile, setIsMobile] = useState(false);\n\n  useEffect(() => {\n    function checkMobile() { setIsMobile(window.innerWidth < mobileBreakpoint); }\n    function checkScroll() { setScrolled(window.scrollY > 12); }\n    checkMobile();\n    checkScroll();\n    window.addEventListener('resize', checkMobile);\n    window.addEventListener('scroll', checkScroll, { passive: true });\n    return () => {\n      window.removeEventListener('resize', checkMobile);\n      window.removeEventListener('scroll', checkScroll);\n    };\n  }, [mobileBreakpoint]);\n\n  const navBg = isDark ? 'var(--mn-color-nav-dark, #07091C)' : 'var(--mn-color-nav-light, #E1DAD0)';\n  const borderColor = isDark ? 'var(--mn-border-dark, rgba(255,255,255,0.07))' : 'var(--mn-border-light, #C9C2B6)';\n\n  const showBackground = !transparent || scrolled;\n  const showBlur = blurOnScroll && scrolled;\n\n  const navStyle = {\n    position: sticky ? 'sticky' : 'relative',\n    top: 0,\n    zIndex: 100,\n    width: '100%',\n    height: `${height}px`,\n    display: 'flex',\n    alignItems: 'center',\n    background: showBackground ? navBg : 'transparent',\n    borderBottom: showBackground ? `1px solid ${borderColor}` : 'none',\n    backdropFilter: showBlur ? 'blur(12px) saturate(1.3)' : 'none',\n    WebkitBackdropFilter: showBlur ? 'blur(12px) saturate(1.3)' : 'none',\n    transition: 'background var(--mn-duration-normal, 200ms) ease, border-color var(--mn-duration-normal, 200ms) ease',\n    fontFamily: 'var(--mn-font-family, system-ui, sans-serif)',\n    ...style,\n  };\n\n  const innerStyle = {\n    width: '100%',\n    maxWidth: '1280px',\n    margin: '0 auto',\n    padding: '0 var(--mn-spacing-lg, 24px)',\n    display: 'flex',\n    alignItems: 'center',\n    gap: 'var(--mn-spacing-lg, 24px)',\n  };\n\n  return (\n    <>\n      <nav style={navStyle} role=\"navigation\" aria-label=\"Main navigation\">\n        <div style={innerStyle}>\n          {/* Logo */}\n          <div style={{ flexShrink: 0 }}>\n            <NavLogo logo={logo} isDark={isDark} />\n          </div>\n\n          {/* Desktop links */}\n          {!isMobile && (\n            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', flex: 1 }}>\n              {links.map((link, i) =>\n                link.children?.length\n                  ? <NavDropdown key={i} link={link} isDark={isDark} />\n                  : <NavLink key={i} link={link} isDark={isDark} />\n              )}\n            </div>\n          )}\n\n          {/* Spacer */}\n          <div style={{ flex: isMobile ? 1 : 0 }} />\n\n          {/* Desktop: auth slot + actions */}\n          {!isMobile && (\n            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>\n              {authSlot}\n              <NavActions actions={actions} isDark={isDark} />\n            </div>\n          )}\n\n          {/* Mobile: hamburger */}\n          {isMobile && (\n            <NavHamburger open={mobileOpen} onClick={() => setMobileOpen(o => !o)} isDark={isDark} />\n          )}\n        </div>\n      </nav>\n\n      {/* Mobile drawer */}\n      {isMobile && (\n        <NavMobileDrawer\n          open={mobileOpen}\n          links={links}\n          actions={actions}\n          authSlot={authSlot}\n          isDark={isDark}\n          onClose={() => setMobileOpen(false)}\n        />\n      )}\n    </>\n  );\n}\n","/**\n * Demo data for @mounaji_npm/navbar — use in prototypes and stories.\n */\n\nexport const DEMO_LOGO = {\n  text: 'Acme SaaS',\n  href: '/',\n};\n\nexport const DEMO_LINKS = [\n  { label: 'Home',        href: '/', active: true },\n  { label: 'Features',   href: '/features' },\n  { label: 'Pricing',    href: '/pricing' },\n  {\n    label: 'Resources',\n    children: [\n      { label: 'Documentation', href: '/docs', icon: '📄' },\n      { label: 'Blog',          href: '/blog', icon: '✍️' },\n      { label: 'Changelog',     href: '/changelog', icon: '🕐' },\n    ],\n  },\n];\n\nexport const DEMO_ACTIONS = [\n  { label: 'Log in',       variant: 'ghost',   href: '/login' },\n  { label: 'Get Started',  variant: 'primary',  href: '/signup' },\n];\n"],"names":["NavLogo","logo","isDark","text","src","alt","href","onClick","inner","jsxs","jsx","NavLink","link","onMouseEnter","onMouseLeave","label","active","icon","hovered","setHovered","useState","style","handleMouseEnter","e","handleMouseLeave","NavDropdown","children","open","setOpen","ref","useRef","textColor","mutedColor","cardBg","borderColor","useEffect","handleClick","triggerStyle","dropdownStyle","o","child","i","DropdownItem","onClose","hov","setHov","_a","NavActions","actions","action","NavActionButton","variant","size","base","sizes","variants","NavHamburger","color","NavMobileDrawer","links","authSlot","bg","Fragment","MobileLinkItem","expanded","setExpanded","linkStyle","Navbar","sticky","transparent","blurOnScroll","tokens","mobileBreakpoint","height","mobileOpen","setMobileOpen","scrolled","setScrolled","isMobile","setIsMobile","checkMobile","checkScroll","navBg","showBackground","showBlur","navStyle","DEMO_LOGO","DEMO_LINKS","DEMO_ACTIONS"],"mappings":"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"}