@rqdhw3n/react-admin-layout 1.0.0

package/dist/index.js

@@ -0,0 +1,804 @@
+import { jsx as n, Fragment as A, jsxs as o } from "react/jsx-runtime";
+import { createContext as V, useState as w, useEffect as M, useCallback as L, useMemo as U, useContext as Z, useRef as T } from "react";
+import { useLocation as I, NavLink as ee } from "react-router-dom";
+import { ChevronDown as H, X as te, Home as ne, ChevronRight as ae, Search as re, Bell as ie, Sun as le, Moon as se, Settings as de, User as oe, LogOut as ce, Menu as me, PanelLeftOpen as J, PanelLeftClose as G } from "lucide-react";
+function ue(e) {
+  if (typeof window > "u") return {};
+  try {
+    const t = localStorage.getItem(e);
+    return t ? JSON.parse(t) : {};
+  } catch {
+    return {};
+  }
+}
+function be(e, t) {
+  if (!(typeof window > "u"))
+    try {
+      localStorage.setItem(e, JSON.stringify(t));
+    } catch {
+    }
+}
+const Q = V(null);
+function he({
+  children: e,
+  storageKey: t = "rqdhw3n-admin-layout",
+  defaultCollapsed: a = !1,
+  permissions: r = {},
+  initialBreadcrumbs: s = [],
+  initialActivePath: l = "/",
+  initialDarkMode: i
+}) {
+  const d = ue(t), [c, b] = w(
+    d.sidebarCollapsed ?? a
+  ), [f, v] = w(!1), [h, m] = w(
+    d.darkMode ?? i ?? !1
+  ), [p, N] = w(s), [C, x] = w(l);
+  M(() => {
+    be(t, { sidebarCollapsed: c, darkMode: h });
+  }, [t, c, h]), M(() => {
+    const y = document.documentElement;
+    h ? y.classList.add("dark") : y.classList.remove("dark");
+  }, [h]);
+  const S = L(() => b((y) => !y), []), g = L(() => v((y) => !y), []), P = L(() => m((y) => !y), []), B = U(
+    () => ({
+      sidebarCollapsed: c,
+      mobileOpen: f,
+      darkMode: h,
+      toggleSidebar: S,
+      setSidebarCollapsed: b,
+      toggleMobile: g,
+      setMobileOpen: v,
+      toggleDarkMode: P,
+      setDarkMode: m,
+      permissions: r,
+      breadcrumbs: p,
+      setBreadcrumbs: N,
+      activePath: C,
+      setActivePath: x
+    }),
+    [
+      c,
+      f,
+      h,
+      S,
+      g,
+      P,
+      r,
+      p,
+      C
+    ]
+  );
+  return /* @__PURE__ */ n(Q.Provider, { value: B, children: e });
+}
+function k() {
+  const e = Z(Q);
+  if (!e)
+    throw new Error("useLayoutContext must be used within LayoutProvider / AdminLayout");
+  return e;
+}
+function O() {
+  const {
+    sidebarCollapsed: e,
+    mobileOpen: t,
+    toggleSidebar: a,
+    setSidebarCollapsed: r,
+    toggleMobile: s,
+    setMobileOpen: l
+  } = k();
+  return {
+    collapsed: e,
+    mobileOpen: t,
+    toggle: a,
+    setCollapsed: r,
+    toggleMobile: s,
+    setMobileOpen: l,
+    closeMobile: () => l(!1)
+  };
+}
+function E(e) {
+  const t = e.split("/").filter(Boolean);
+  return t.length ? t.map((a, r) => {
+    const s = "/" + t.slice(0, r + 1).join("/");
+    return { label: a.replace(/-/g, " ").replace(/\b\w/g, (i) => i.toUpperCase()), path: r < t.length - 1 ? s : void 0 };
+  }) : [{ label: "Home", path: "/" }];
+}
+function W(e) {
+  var t, a, r = "";
+  if (typeof e == "string" || typeof e == "number") r += e;
+  else if (typeof e == "object") if (Array.isArray(e)) {
+    var s = e.length;
+    for (t = 0; t < s; t++) e[t] && (a = W(e[t])) && (r && (r += " "), r += a);
+  } else for (a in e) e[a] && (r && (r += " "), r += a);
+  return r;
+}
+function fe() {
+  for (var e, t, a = 0, r = "", s = arguments.length; a < s; a++) (e = arguments[a]) && (t = W(e)) && (r && (r += " "), r += t);
+  return r;
+}
+function u(...e) {
+  return fe(e);
+}
+function pe({ children: e }) {
+  const { pathname: t } = I(), { setActivePath: a, setBreadcrumbs: r, breadcrumbs: s } = k();
+  return M(() => {
+    a(t), s.length || r(E(t));
+  }, [t, a, r, s.length]), /* @__PURE__ */ n(A, { children: e });
+}
+function xe({ children: e, className: t }) {
+  return /* @__PURE__ */ n(
+    "footer",
+    {
+      className: u(
+        "mt-auto border-t border-admin-border bg-admin-surface px-6 py-4 text-sm text-admin-muted",
+        t
+      ),
+      children: e ?? /* @__PURE__ */ o("p", { className: "text-center", children: [
+        "© ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " Admin Layout · Built with @rqdhw3n/react-admin-layout"
+      ] })
+    }
+  );
+}
+function ge(e) {
+  const t = e.indexOf(".");
+  return t === -1 ? { resource: e, action: "view" } : {
+    resource: e.slice(0, t),
+    action: e.slice(t + 1)
+  };
+}
+function ve(e, t) {
+  if (!t) return !0;
+  const { resource: a, action: r } = ge(t), s = e[a];
+  return s != null && s.length ? s.includes(r) || s.includes("*") : !1;
+}
+function D(e, t) {
+  return e.filter((a) => ve(t, a.permission)).map((a) => ({
+    ...a,
+    children: a.children ? D(a.children, t) : void 0
+  })).filter((a) => {
+    var r;
+    return !((r = a.children) != null && r.length) || a.children.length > 0 || a.path;
+  });
+}
+function X({ label: e, children: t, collapsed: a, className: r }) {
+  return /* @__PURE__ */ o("div", { className: u("mb-4", r), children: [
+    e && !a && /* @__PURE__ */ n("p", { className: "mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-admin-muted", children: e }),
+    /* @__PURE__ */ n("ul", { className: "space-y-0.5", children: t })
+  ] });
+}
+function z(e, t) {
+  return e ? t === e || t.startsWith(`${e}/`) : !1;
+}
+function R({
+  item: e,
+  collapsed: t = !1,
+  depth: a = 0,
+  activePath: r = "/",
+  onNavigate: s,
+  LinkComponent: l,
+  onItemClick: i
+}) {
+  var x, S;
+  const d = !!((x = e.children) != null && x.length), c = e.path ? z(e.path, r) : !1, b = (S = e.children) == null ? void 0 : S.some((g) => g.path && z(g.path, r)), [f, v] = w(c || b), h = e.icon, m = u(
+    "group flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-admin-primary",
+    c || b ? "bg-admin-primary text-white shadow-sm" : "text-admin-muted hover:bg-admin-bg hover:text-admin-text",
+    e.disabled && "pointer-events-none opacity-50",
+    a > 0 && "text-[13px] py-2"
+  ), p = /* @__PURE__ */ o(A, { children: [
+    h && /* @__PURE__ */ n(
+      h,
+      {
+        className: u("h-[18px] w-[18px] shrink-0", c || b ? "text-white" : ""),
+        "aria-hidden": !0
+      }
+    ),
+    !t && /* @__PURE__ */ o(A, { children: [
+      /* @__PURE__ */ n("span", { className: "flex-1 truncate text-left", children: e.label }),
+      e.badge != null && /* @__PURE__ */ n(
+        "span",
+        {
+          className: u(
+            "rounded-full px-2 py-0.5 text-[11px] font-semibold",
+            c ? "bg-white/20 text-white" : "bg-admin-primary/10 text-admin-primary"
+          ),
+          children: e.badge
+        }
+      ),
+      d && /* @__PURE__ */ n(
+        H,
+        {
+          className: u("h-4 w-4 shrink-0 transition-transform", f && "rotate-180"),
+          "aria-hidden": !0
+        }
+      )
+    ] })
+  ] }), N = () => {
+    if (d) {
+      v((g) => !g);
+      return;
+    }
+    e.path && (s == null || s(e.path), i == null || i());
+  }, C = e.path && !d && l ? /* @__PURE__ */ n(
+    l,
+    {
+      to: e.path,
+      className: m,
+      onClick: () => {
+        i == null || i();
+      },
+      children: p
+    }
+  ) : /* @__PURE__ */ n("button", { type: "button", className: m, onClick: N, disabled: e.disabled, children: p });
+  return /* @__PURE__ */ o("li", { children: [
+    C,
+    d && f && !t && /* @__PURE__ */ n("ul", { className: "mt-1 space-y-0.5 border-l border-admin-border ml-5 pl-2", children: e.children.map((g) => /* @__PURE__ */ n(
+      R,
+      {
+        item: g,
+        collapsed: t,
+        depth: a + 1,
+        activePath: r,
+        onNavigate: s,
+        LinkComponent: l,
+        onItemClick: i
+      },
+      g.label + (g.path ?? "")
+    )) })
+  ] });
+}
+function ye({
+  items: e,
+  appName: t = "Admin",
+  appLogo: a,
+  onNavigate: r,
+  activePath: s,
+  LinkComponent: l
+}) {
+  const { mobileOpen: i, closeMobile: d } = O(), { permissions: c, activePath: b } = k(), f = s ?? b, v = D(e, c);
+  if (M(() => {
+    if (!i) return;
+    const m = (p) => {
+      p.key === "Escape" && d();
+    };
+    return document.addEventListener("keydown", m), document.body.style.overflow = "hidden", () => {
+      document.removeEventListener("keydown", m), document.body.style.overflow = "";
+    };
+  }, [i, d]), !i) return null;
+  const h = (m) => {
+    r == null || r(m), d();
+  };
+  return /* @__PURE__ */ o("div", { className: "fixed inset-0 z-50 lg:hidden", role: "dialog", "aria-modal": "true", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: "absolute inset-0 bg-slate-900/50 backdrop-blur-sm animate-fade-in",
+        "aria-label": "Close menu",
+        onClick: d
+      }
+    ),
+    /* @__PURE__ */ o(
+      "aside",
+      {
+        className: u(
+          "absolute left-0 top-0 flex h-full w-[min(280px,85vw)] flex-col",
+          "border-r border-admin-border bg-admin-surface shadow-admin-lg animate-slide-in"
+        ),
+        children: [
+          /* @__PURE__ */ o("div", { className: "flex h-16 items-center justify-between border-b border-admin-border px-4", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+              a ?? /* @__PURE__ */ n("div", { className: "flex h-9 w-9 items-center justify-center rounded-xl bg-admin-primary text-sm font-bold text-white", children: t.charAt(0) }),
+              /* @__PURE__ */ n("span", { className: "font-semibold text-admin-text", children: t })
+            ] }),
+            /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                onClick: d,
+                className: "rounded-lg p-2 text-admin-muted hover:bg-admin-bg",
+                "aria-label": "Close sidebar",
+                children: /* @__PURE__ */ n(te, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("nav", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ n(X, { children: v.map((m) => /* @__PURE__ */ n(
+            R,
+            {
+              item: m,
+              activePath: f,
+              onNavigate: h,
+              LinkComponent: l,
+              onItemClick: d
+            },
+            m.label + (m.path ?? "")
+          )) }) })
+        ]
+      }
+    )
+  ] });
+}
+function we({
+  items: e,
+  className: t,
+  LinkComponent: a,
+  onNavigate: r
+}) {
+  if (!e.length) return null;
+  const s = (l, i) => {
+    const d = u(
+      "text-sm transition-colors",
+      i ? "font-medium text-admin-text" : "text-admin-muted hover:text-admin-text"
+    );
+    return !l.path || i ? /* @__PURE__ */ n("span", { className: d, children: l.label }) : a ? /* @__PURE__ */ n(a, { to: l.path, className: d, children: l.label }) : /* @__PURE__ */ n("button", { type: "button", className: d, onClick: () => r == null ? void 0 : r(l.path), children: l.label });
+  };
+  return /* @__PURE__ */ o("nav", { "aria-label": "Breadcrumb", className: u("flex items-center gap-1.5", t), children: [
+    /* @__PURE__ */ n(ne, { className: "h-4 w-4 text-admin-muted shrink-0", "aria-hidden": !0 }),
+    e.map((l, i) => {
+      const d = i === e.length - 1;
+      return /* @__PURE__ */ o("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ n(ae, { className: "h-3.5 w-3.5 text-admin-muted", "aria-hidden": !0 }),
+        s(l, d)
+      ] }, `${l.label}-${i}`);
+    })
+  ] });
+}
+function Ne({
+  placeholder: e = "Search...",
+  onSearch: t,
+  className: a
+}) {
+  const [r, s] = w("");
+  return /* @__PURE__ */ o("form", { onSubmit: (i) => {
+    i.preventDefault(), t == null || t(r.trim());
+  }, className: u("relative w-full max-w-md", a), children: [
+    /* @__PURE__ */ n(
+      re,
+      {
+        className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-admin-muted",
+        "aria-hidden": !0
+      }
+    ),
+    /* @__PURE__ */ n(
+      "input",
+      {
+        type: "search",
+        value: r,
+        onChange: (i) => s(i.target.value),
+        placeholder: e,
+        className: u(
+          "h-10 w-full rounded-xl border border-admin-border bg-admin-bg pl-10 pr-4 text-sm text-admin-text",
+          "placeholder:text-admin-muted focus:border-admin-primary focus:outline-none focus:ring-2 focus:ring-admin-primary/20"
+        ),
+        "aria-label": "Search"
+      }
+    )
+  ] });
+}
+function ke({ notifications: e = [], className: t }) {
+  const [a, r] = w(!1), s = T(null), l = e.filter((i) => !i.read).length;
+  return M(() => {
+    const i = (d) => {
+      s.current && !s.current.contains(d.target) && r(!1);
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, []), /* @__PURE__ */ o("div", { ref: s, className: u("relative", t), children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        onClick: () => r((i) => !i),
+        className: u(
+          "relative inline-flex h-9 w-9 items-center justify-center rounded-lg border border-admin-border",
+          "bg-admin-surface text-admin-muted transition-colors hover:bg-admin-bg hover:text-admin-text",
+          "focus-visible:ring-2 focus-visible:ring-admin-primary"
+        ),
+        "aria-label": `Notifications${l ? `, ${l} unread` : ""}`,
+        "aria-expanded": a,
+        children: [
+          /* @__PURE__ */ n(ie, { className: "h-4 w-4", "aria-hidden": !0 }),
+          l > 0 && /* @__PURE__ */ n("span", { className: "absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white", children: l > 9 ? "9+" : l })
+        ]
+      }
+    ),
+    a && /* @__PURE__ */ o("div", { className: "absolute right-0 top-full z-50 mt-2 w-80 rounded-xl border border-admin-border bg-admin-surface shadow-admin-lg animate-fade-in", children: [
+      /* @__PURE__ */ n("div", { className: "border-b border-admin-border px-4 py-3", children: /* @__PURE__ */ n("p", { className: "text-sm font-semibold text-admin-text", children: "Notifications" }) }),
+      /* @__PURE__ */ n("ul", { className: "max-h-72 overflow-y-auto p-2", children: e.length === 0 ? /* @__PURE__ */ n("li", { className: "px-3 py-6 text-center text-sm text-admin-muted", children: "No notifications" }) : e.map((i) => /* @__PURE__ */ o(
+        "li",
+        {
+          className: u(
+            "rounded-lg px-3 py-2.5 transition-colors hover:bg-admin-bg",
+            !i.read && "bg-admin-primary/5"
+          ),
+          children: [
+            /* @__PURE__ */ n("p", { className: "text-sm font-medium text-admin-text", children: i.title }),
+            i.description && /* @__PURE__ */ n("p", { className: "mt-0.5 text-xs text-admin-muted line-clamp-2", children: i.description }),
+            i.time && /* @__PURE__ */ n("p", { className: "mt-1 text-[11px] text-admin-muted", children: i.time })
+          ]
+        },
+        i.id
+      )) })
+    ] })
+  ] });
+}
+function Ce() {
+  const { darkMode: e, toggleDarkMode: t, setDarkMode: a } = k();
+  return {
+    isDark: e,
+    toggle: t,
+    setDarkMode: a
+  };
+}
+function Se({ className: e }) {
+  const { isDark: t, toggle: a } = Ce();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: a,
+      className: u(
+        "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-admin-border",
+        "bg-admin-surface text-admin-muted transition-colors hover:bg-admin-bg hover:text-admin-text",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-admin-primary focus-visible:ring-offset-2",
+        e
+      ),
+      "aria-label": t ? "Switch to light mode" : "Switch to dark mode",
+      children: t ? /* @__PURE__ */ n(le, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ n(se, { className: "h-4 w-4", "aria-hidden": !0 })
+    }
+  );
+}
+function Me({ user: e, onLogout: t, onSettings: a, className: r }) {
+  const [s, l] = w(!1), i = T(null);
+  M(() => {
+    const c = (b) => {
+      i.current && !i.current.contains(b.target) && l(!1);
+    };
+    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
+  }, []);
+  const d = e.name.split(" ").map((c) => c[0]).join("").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ o("div", { ref: i, className: u("relative", r), children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        onClick: () => l((c) => !c),
+        className: u(
+          "flex items-center gap-2 rounded-xl border border-admin-border bg-admin-surface px-2 py-1.5",
+          "transition-colors hover:bg-admin-bg focus-visible:ring-2 focus-visible:ring-admin-primary"
+        ),
+        "aria-expanded": s,
+        "aria-haspopup": "menu",
+        children: [
+          e.avatar ? /* @__PURE__ */ n("img", { src: e.avatar, alt: "", className: "h-8 w-8 rounded-lg object-cover" }) : /* @__PURE__ */ n("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-admin-primary text-xs font-semibold text-white", children: d }),
+          /* @__PURE__ */ o("div", { className: "hidden text-left sm:block", children: [
+            /* @__PURE__ */ n("p", { className: "text-sm font-medium text-admin-text leading-tight", children: e.name }),
+            /* @__PURE__ */ n("p", { className: "text-xs text-admin-muted leading-tight", children: e.email })
+          ] }),
+          /* @__PURE__ */ n(H, { className: "hidden h-4 w-4 text-admin-muted sm:block", "aria-hidden": !0 })
+        ]
+      }
+    ),
+    s && /* @__PURE__ */ o(
+      "div",
+      {
+        role: "menu",
+        className: "absolute right-0 top-full z-50 mt-2 w-56 rounded-xl border border-admin-border bg-admin-surface p-1.5 shadow-admin-lg animate-fade-in",
+        children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-admin-text hover:bg-admin-bg",
+              onClick: () => {
+                a == null || a(), l(!1);
+              },
+              children: [
+                /* @__PURE__ */ n(de, { className: "h-4 w-4 text-admin-muted" }),
+                "Settings"
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-admin-text hover:bg-admin-bg",
+              children: [
+                /* @__PURE__ */ n(oe, { className: "h-4 w-4 text-admin-muted" }),
+                "Profile"
+              ]
+            }
+          ),
+          /* @__PURE__ */ n("hr", { className: "my-1 border-admin-border" }),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30",
+              onClick: () => {
+                t == null || t(), l(!1);
+              },
+              children: [
+                /* @__PURE__ */ n(ce, { className: "h-4 w-4" }),
+                "Log out"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Pe({
+  user: e,
+  notifications: t = [],
+  onSearch: a,
+  searchPlaceholder: r = "Search...",
+  showSearch: s = !0,
+  className: l,
+  breadcrumbs: i = [],
+  onMenuClick: d,
+  sidebarCollapsed: c,
+  onToggleSidebar: b
+}) {
+  return /* @__PURE__ */ o(
+    "header",
+    {
+      className: u(
+        "sticky top-0 z-40 flex h-16 shrink-0 items-center gap-4 border-b border-admin-border",
+        "admin-glass bg-admin-surface px-4 lg:px-6",
+        l
+      ),
+      children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: "rounded-lg p-2 text-admin-muted hover:bg-admin-bg lg:hidden",
+            onClick: d,
+            "aria-label": "Open menu",
+            children: /* @__PURE__ */ n(me, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: "hidden rounded-lg p-2 text-admin-muted hover:bg-admin-bg lg:inline-flex",
+            onClick: b,
+            "aria-label": c ? "Expand sidebar" : "Collapse sidebar",
+            children: c ? /* @__PURE__ */ n(J, { className: "h-5 w-5" }) : /* @__PURE__ */ n(G, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "hidden min-w-0 flex-1 md:block", children: /* @__PURE__ */ n(we, { items: i }) }),
+        /* @__PURE__ */ o("div", { className: "flex flex-1 items-center justify-end gap-2 sm:gap-3", children: [
+          s && /* @__PURE__ */ n("div", { className: "hidden flex-1 sm:flex sm:max-w-md", children: /* @__PURE__ */ n(Ne, { placeholder: r, onSearch: a }) }),
+          /* @__PURE__ */ n(Se, {}),
+          /* @__PURE__ */ n(ke, { notifications: t }),
+          e && /* @__PURE__ */ n(Me, { user: e })
+        ] })
+      ]
+    }
+  );
+}
+function Le({
+  items: e,
+  collapsed: t,
+  appName: a = "Admin",
+  appLogo: r,
+  className: s,
+  onNavigate: l,
+  activePath: i,
+  LinkComponent: d
+}) {
+  const { collapsed: c, toggle: b, closeMobile: f } = O(), { permissions: v, activePath: h } = k(), m = t ?? c, p = i ?? h, N = D(e, v), C = (x) => {
+    l == null || l(x), f();
+  };
+  return /* @__PURE__ */ o(
+    "aside",
+    {
+      className: u(
+        "hidden lg:flex flex-col border-r border-admin-border bg-admin-surface transition-all duration-300 ease-in-out",
+        m ? "w-[var(--admin-sidebar-collapsed)]" : "w-[var(--admin-sidebar-width)]",
+        s
+      ),
+      "aria-label": "Sidebar navigation",
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: u(
+              "flex h-16 items-center border-b border-admin-border px-4",
+              m ? "justify-center" : "justify-between gap-2"
+            ),
+            children: [
+              /* @__PURE__ */ o("div", { className: u("flex items-center gap-3 min-w-0", m && "justify-center"), children: [
+                r ?? /* @__PURE__ */ n("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-admin-primary text-sm font-bold text-white shadow-admin", children: a.charAt(0) }),
+                !m && /* @__PURE__ */ n("span", { className: "truncate text-base font-semibold text-admin-text", children: a })
+              ] }),
+              !m && /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: b,
+                  className: "rounded-lg p-2 text-admin-muted hover:bg-admin-bg hover:text-admin-text focus-visible:ring-2 focus-visible:ring-admin-primary",
+                  "aria-label": "Collapse sidebar",
+                  children: /* @__PURE__ */ n(G, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        m && /* @__PURE__ */ n("div", { className: "flex justify-center py-2 border-b border-admin-border", children: /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: b,
+            className: "rounded-lg p-2 text-admin-muted hover:bg-admin-bg",
+            "aria-label": "Expand sidebar",
+            children: /* @__PURE__ */ n(J, { className: "h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ n("nav", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ n(X, { collapsed: m, children: N.map((x) => /* @__PURE__ */ n(
+          R,
+          {
+            item: x,
+            collapsed: m,
+            activePath: p,
+            onNavigate: C,
+            LinkComponent: d
+          },
+          x.label + (x.path ?? "")
+        )) }) })
+      ]
+    }
+  );
+}
+function F({
+  children: e,
+  sidebarItems: t,
+  appName: a = "Admin",
+  appLogo: r,
+  user: s,
+  notifications: l = [],
+  footer: i,
+  showFooter: d = !0,
+  showSearch: c = !0,
+  searchPlaceholder: b,
+  onSearch: f,
+  breadcrumbs: v,
+  contentClassName: h,
+  activePath: m,
+  onNavigate: p,
+  LinkComponent: N,
+  enableRouter: C = !1
+}) {
+  const {
+    sidebarCollapsed: x,
+    toggleSidebar: S,
+    toggleMobile: g,
+    breadcrumbs: P,
+    setBreadcrumbs: B,
+    activePath: y,
+    setActivePath: Y
+  } = k(), { closeMobile: _ } = O(), $ = m ?? y, K = v ?? P, q = (j) => {
+    Y(j), v || B(E(j)), p == null || p(j), _();
+  };
+  return /* @__PURE__ */ o("div", { className: "admin-layout-root min-h-screen bg-admin-bg text-admin-text", children: [
+    /* @__PURE__ */ n(
+      Le,
+      {
+        items: t,
+        appName: a,
+        appLogo: r,
+        activePath: $,
+        onNavigate: q,
+        LinkComponent: N
+      }
+    ),
+    /* @__PURE__ */ n(
+      ye,
+      {
+        items: t,
+        appName: a,
+        appLogo: r,
+        activePath: $,
+        onNavigate: q,
+        LinkComponent: N
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: u("flex min-h-screen flex-col transition-all duration-300", x ? "lg:pl-[var(--admin-sidebar-collapsed)]" : "lg:pl-[var(--admin-sidebar-width)]"), children: [
+      /* @__PURE__ */ n(
+        Pe,
+        {
+          user: s,
+          notifications: l,
+          onSearch: f,
+          searchPlaceholder: b,
+          showSearch: c,
+          breadcrumbs: K,
+          onMenuClick: g,
+          sidebarCollapsed: x,
+          onToggleSidebar: S
+        }
+      ),
+      /* @__PURE__ */ n("main", { className: u("flex-1 p-4 lg:p-6", h), children: e }),
+      d && /* @__PURE__ */ n(xe, { children: i })
+    ] })
+  ] });
+}
+function De(e) {
+  const {
+    storageKey: t = "rqdhw3n-admin-layout",
+    defaultCollapsed: a = !1,
+    initialDarkMode: r = !1,
+    permissions: s = {},
+    breadcrumbs: l = [],
+    activePath: i = "/",
+    enableRouter: d = !1,
+    children: c,
+    ...b
+  } = e, f = U(
+    () => l.length ? l : E(i),
+    [l, i]
+  );
+  return /* @__PURE__ */ n(
+    he,
+    {
+      storageKey: t,
+      defaultCollapsed: a,
+      permissions: s,
+      initialBreadcrumbs: f,
+      initialActivePath: i,
+      initialDarkMode: r,
+      children: d ? /* @__PURE__ */ n(pe, { children: /* @__PURE__ */ n(F, { ...b, enableRouter: d, children: c }) }) : /* @__PURE__ */ n(F, { ...b, enableRouter: d, children: c })
+    }
+  );
+}
+function Re({ to: e, className: t, children: a, onClick: r }) {
+  return /* @__PURE__ */ n(ee, { to: e, className: t, onClick: r, children: a });
+}
+function $e() {
+  return k();
+}
+function qe() {
+  const { breadcrumbs: e, setBreadcrumbs: t } = k(), a = L(
+    (r) => t(r),
+    [t]
+  );
+  return {
+    items: e,
+    setBreadcrumbs: a
+  };
+}
+export {
+  De as AdminLayout,
+  pe as AdminLayoutRouterSync,
+  we as Breadcrumbs,
+  xe as Footer,
+  he as LayoutProvider,
+  ye as MobileSidebar,
+  Pe as Navbar,
+  Ne as NavbarSearch,
+  ke as NotificationMenu,
+  Re as RouterLink,
+  Le as Sidebar,
+  X as SidebarGroup,
+  R as SidebarItem,
+  Se as ThemeToggle,
+  Me as UserMenu,
+  u as cn,
+  D as filterSidebarByPermissions,
+  E as generateBreadcrumbsFromPath,
+  ve as hasPermission,
+  qe as useBreadcrumbs,
+  Ce as useDarkMode,
+  k as useLayoutContext,
+  $e as useLayoutState,
+  O as useSidebar
+};
+//# sourceMappingURL=index.js.map