@rqdhw3n/react-admin-layout 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,138 +1,264 @@
-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) {
+import { jsx as a, Fragment as $, jsxs as u } from "react/jsx-runtime";
+import { useContext as Y, createContext as _, useCallback as A, useSyncExternalStore as le, useState as C, useEffect as E, useMemo as I, useRef as H } from "react";
+import { useLocation as ce, NavLink as ue } from "react-router-dom";
+import { ChevronDown as Z, X as me, Home as fe, ChevronRight as be, Search as he, Bell as pe, Sun as xe, Moon as ve, Settings as ye, User as ge, LogOut as we, Menu as Ne, PanelLeftOpen as ee, PanelLeftClose as re } from "lucide-react";
+function G(e) {
   if (typeof window > "u") return {};
   try {
-    const t = localStorage.getItem(e);
-    return t ? JSON.parse(t) : {};
+    const r = localStorage.getItem(e), n = r ? JSON.parse(r) : null;
+    if (!n || typeof n != "object") return {};
+    const t = n;
+    return {
+      sidebarCollapsed: typeof t.sidebarCollapsed == "boolean" ? t.sidebarCollapsed : void 0,
+      darkMode: typeof t.darkMode == "boolean" ? t.darkMode : void 0,
+      mode: t.mode === "light" || t.mode === "dark" || t.mode === "system" ? t.mode : void 0
+    };
   } catch {
     return {};
   }
 }
-function be(e, t) {
+function ke(e, r) {
   if (!(typeof window > "u"))
     try {
-      localStorage.setItem(e, JSON.stringify(t));
+      localStorage.setItem(e, JSON.stringify(r));
     } catch {
     }
 }
-const Q = V(null);
-function he({
+const te = Object.freeze({
+  primary: "#2563eb",
+  secondary: "#7c3aed",
+  background: "#f8fafc",
+  surface: "#ffffff",
+  text: "#0f172a",
+  textSecondary: "#64748b",
+  sidebarBackground: "#ffffff",
+  sidebarText: "#64748b",
+  headerBackground: "#ffffff",
+  headerText: "#0f172a",
+  hoverBackground: "#f1f5f9",
+  hoverText: "#0f172a",
+  activeBackground: "#2563eb",
+  activeText: "#ffffff",
+  border: "#e2e8f0",
+  onPrimary: "#ffffff",
+  danger: "#dc2626",
+  onDanger: "#ffffff",
+  overlay: "rgb(15 23 42 / 0.5)"
+}), Se = Object.freeze({
+  ...te,
+  primary: "#3b82f6",
+  secondary: "#a78bfa",
+  background: "#0b1220",
+  surface: "#111827",
+  text: "#f1f5f9",
+  textSecondary: "#94a3b8",
+  sidebarBackground: "#111827",
+  sidebarText: "#cbd5e1",
+  headerBackground: "#111827",
+  headerText: "#f1f5f9",
+  hoverBackground: "#1e293b",
+  hoverText: "#ffffff",
+  activeBackground: "#3b82f6",
+  activeText: "#020617",
+  onPrimary: "#020617",
+  border: "#334155",
+  danger: "#f87171",
+  onDanger: "#020617",
+  overlay: "rgb(2 6 23 / 0.7)"
+}), Xe = Object.freeze({
+  modern: Object.freeze({ style: "modern" }),
+  minimal: Object.freeze({ style: "minimal" }),
+  compact: Object.freeze({ style: "compact" })
+}), Q = {
+  primary: "--ral-primary",
+  secondary: "--ral-secondary",
+  background: "--ral-background",
+  surface: "--ral-surface",
+  text: "--ral-text",
+  textSecondary: "--ral-text-secondary",
+  sidebarBackground: "--ral-sidebar-bg",
+  sidebarText: "--ral-sidebar-text",
+  headerBackground: "--ral-header-bg",
+  headerText: "--ral-header-text",
+  hoverBackground: "--ral-hover-bg",
+  hoverText: "--ral-hover-text",
+  activeBackground: "--ral-active-bg",
+  activeText: "--ral-active-text",
+  border: "--ral-border",
+  onPrimary: "--ral-on-primary",
+  danger: "--ral-danger",
+  onDanger: "--ral-on-danger",
+  overlay: "--ral-overlay"
+};
+function Me(e = {}, r = "light") {
+  const n = e.mode === "system" ? r : e.mode ?? "light", t = { ...n === "dark" ? Se : te }, o = {};
+  for (const s of [e.colors, e[n]])
+    if (s)
+      for (const i of Object.keys(t)) {
+        const d = s[i];
+        typeof d == "string" && d.trim() && (o[i] = d);
+      }
+  return Object.assign(t, o), o.primary && !o.activeBackground && (t.activeBackground = o.primary), { mode: n, style: e.style ?? "modern", colors: t };
+}
+function Ce(e) {
+  return Object.fromEntries(
+    Object.keys(Q).map(
+      (r) => [Q[r], e.colors[r]]
+    )
+  );
+}
+const ae = _(null);
+function Le() {
+  const e = Y(ae);
+  if (!e) throw new Error("useAdminLayoutTheme must be used within LayoutProvider / AdminLayout");
+  return {
+    mode: e.requestedMode,
+    resolvedMode: e.mode,
+    style: e.style,
+    colors: e.colors,
+    setMode: e.setMode
+  };
+}
+const W = "(prefers-color-scheme: dark)", Be = () => "light";
+function je(e) {
+  const r = A((t) => {
+    if (!e || typeof window > "u" || !window.matchMedia) return () => {
+    };
+    const o = window.matchMedia(W);
+    return o.addEventListener ? (o.addEventListener("change", t), () => o.removeEventListener("change", t)) : (o.addListener(t), () => o.removeListener(t));
+  }, [e]), n = A(
+    () => {
+      var t;
+      return e && typeof window < "u" && ((t = window.matchMedia) != null && t.call(window, W).matches) ? "dark" : "light";
+    },
+    [e]
+  );
+  return le(r, n, Be);
+}
+const ne = _(null);
+function Ae({
   children: e,
-  storageKey: t = "rqdhw3n-admin-layout",
-  defaultCollapsed: a = !1,
-  permissions: r = {},
-  initialBreadcrumbs: s = [],
-  initialActivePath: l = "/",
-  initialDarkMode: i
+  storageKey: r = "rqdhw3n-admin-layout",
+  defaultCollapsed: n = !1,
+  permissions: t = {},
+  initialBreadcrumbs: o = [],
+  initialActivePath: s = "/",
+  initialDarkMode: i,
+  theme: d,
+  onThemeModeChange: l
 }) {
-  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(
+  const [c, x] = C(n), [w, y] = C(!1), [m, p] = C(i ? "dark" : "light"), [N, S] = C(null), v = (d == null ? void 0 : d.mode) ?? m, f = je(v === "system"), D = Me({ ...d, mode: v }, f), k = D.mode === "dark", P = A((h) => {
+    (d == null ? void 0 : d.mode) === void 0 && p(h), l == null || l(h);
+  }, [d == null ? void 0 : d.mode, l]), L = A((h) => P(h ? "dark" : "light"), [P]), [T, g] = C(o), [M, B] = C(s);
+  E(() => {
+    const h = G(r);
+    x(h.sidebarCollapsed ?? n), p(h.mode ?? (h.darkMode ?? i ? "dark" : "light")), S(r);
+  }, [r]), E(() => {
+    if (N !== r) return;
+    const h = G(r);
+    ke(r, (d == null ? void 0 : d.mode) === void 0 ? { sidebarCollapsed: c, darkMode: k, mode: v } : { ...h, sidebarCollapsed: c });
+  }, [r, c, k, v, d == null ? void 0 : d.mode, N]), E(() => {
+    if (d !== void 0) return;
+    const h = document.documentElement, z = h.classList.contains("dark");
+    return k ? h.classList.add("dark") : h.classList.remove("dark"), () => {
+      h.classList.toggle("dark", z);
+    };
+  }, [k, d]);
+  const j = A(() => x((h) => !h), []), R = A(() => y((h) => !h), []), q = A(() => L(!k), [L, k]), U = I(
     () => ({
       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
+      mobileOpen: w,
+      darkMode: k,
+      toggleSidebar: j,
+      setSidebarCollapsed: x,
+      toggleMobile: R,
+      setMobileOpen: y,
+      toggleDarkMode: q,
+      setDarkMode: L,
+      permissions: t,
+      breadcrumbs: T,
+      setBreadcrumbs: g,
+      activePath: M,
+      setActivePath: B
     }),
     [
       c,
-      f,
-      h,
-      S,
-      g,
-      P,
-      r,
-      p,
-      C
+      w,
+      k,
+      j,
+      R,
+      q,
+      L,
+      t,
+      T,
+      M
     ]
   );
-  return /* @__PURE__ */ n(Q.Provider, { value: B, children: e });
+  return /* @__PURE__ */ a(ne.Provider, { value: U, children: /* @__PURE__ */ a(ae.Provider, { value: { ...D, requestedMode: v, setMode: P }, children: e }) });
 }
-function k() {
-  const e = Z(Q);
+function O() {
+  const e = Y(ne);
   if (!e)
     throw new Error("useLayoutContext must be used within LayoutProvider / AdminLayout");
   return e;
 }
-function O() {
+function F() {
   const {
     sidebarCollapsed: e,
-    mobileOpen: t,
-    toggleSidebar: a,
-    setSidebarCollapsed: r,
-    toggleMobile: s,
-    setMobileOpen: l
-  } = k();
+    mobileOpen: r,
+    toggleSidebar: n,
+    setSidebarCollapsed: t,
+    toggleMobile: o,
+    setMobileOpen: s
+  } = O(), i = A(() => s(!1), [s]);
   return {
     collapsed: e,
-    mobileOpen: t,
-    toggle: a,
-    setCollapsed: r,
-    toggleMobile: s,
-    setMobileOpen: l,
-    closeMobile: () => l(!1)
+    mobileOpen: r,
+    toggle: n,
+    setCollapsed: t,
+    toggleMobile: o,
+    setMobileOpen: s,
+    closeMobile: i
   };
 }
-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 };
+function J(e) {
+  const r = e.split("/").filter(Boolean);
+  return r.length ? r.map((n, t) => {
+    const o = "/" + r.slice(0, t + 1).join("/");
+    return { label: n.replace(/-/g, " ").replace(/\b\w/g, (i) => i.toUpperCase()), path: t < r.length - 1 ? o : void 0 };
   }) : [{ label: "Home", path: "/" }];
 }
-function W(e) {
-  var t, a, r = "";
-  if (typeof e == "string" || typeof e == "number") r += e;
+function ie(e) {
+  var r, n, t = "";
+  if (typeof e == "string" || typeof e == "number") t += 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(
+    var o = e.length;
+    for (r = 0; r < o; r++) e[r] && (n = ie(e[r])) && (t && (t += " "), t += n);
+  } else for (n in e) e[n] && (t && (t += " "), t += n);
+  return t;
+}
+function Ee() {
+  for (var e, r, n = 0, t = "", o = arguments.length; n < o; n++) (e = arguments[n]) && (r = ie(e)) && (t && (t += " "), t += r);
+  return t;
+}
+function b(...e) {
+  return Ee(e);
+}
+function Pe({ children: e }) {
+  const { pathname: r } = ce(), { setActivePath: n, setBreadcrumbs: t, breadcrumbs: o } = O();
+  return E(() => {
+    n(r), o.length || t(J(r));
+  }, [r, n, t, o.length]), /* @__PURE__ */ a($, { children: e });
+}
+function Oe({ children: e, className: r }) {
+  return /* @__PURE__ */ a(
     "footer",
     {
-      className: u(
+      className: b(
         "mt-auto border-t border-admin-border bg-admin-surface px-6 py-4 text-sm text-admin-muted",
-        t
+        r
       ),
-      children: e ?? /* @__PURE__ */ o("p", { className: "text-center", children: [
+      children: e ?? /* @__PURE__ */ u("p", { className: "text-center", children: [
         "© ",
         (/* @__PURE__ */ new Date()).getFullYear(),
         " Admin Layout · Built with @rqdhw3n/react-admin-layout"
@@ -140,281 +266,322 @@ function xe({ children: e, className: t }) {
     }
   );
 }
-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 De(e) {
+  const r = e.indexOf(".");
+  return r === -1 ? { resource: e, action: "view" } : {
+    resource: e.slice(0, r),
+    action: e.slice(r + 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 Te(e, r) {
+  if (!r) return !0;
+  const { resource: n, action: t } = De(r), o = e[n];
+  return o != null && o.length ? o.includes(t) || o.includes("*") : !1;
+}
+function K(e, r) {
+  return e.filter((n) => Te(r, n.permission)).map((n) => ({
+    ...n,
+    children: n.children ? K(n.children, r) : void 0
+  })).filter((n) => {
+    var t;
+    return !((t = n.children) != null && t.length) || n.children.length > 0 || n.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 oe({ label: e, children: r, collapsed: n, className: t }) {
+  return /* @__PURE__ */ u("div", { className: b("ral-sidebar-group mb-4", t), children: [
+    e && !n && /* @__PURE__ */ a("p", { className: "ral-sidebar-brand mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider", children: e }),
+    /* @__PURE__ */ a("ul", { className: "space-y-0.5", children: r })
   ] });
 }
-function z(e, t) {
-  return e ? t === e || t.startsWith(`${e}/`) : !1;
+function de(e, r) {
+  return e ? r === e || r.startsWith(`${e}/`) : !1;
+}
+function se(e, r) {
+  var n;
+  return !!((n = e.children) != null && n.some((t) => de(t.path, r) || se(t, r)));
 }
-function R({
+function V({
   item: e,
-  collapsed: t = !1,
-  depth: a = 0,
-  activePath: r = "/",
-  onNavigate: s,
-  LinkComponent: l,
+  collapsed: r = !1,
+  depth: n = 0,
+  activePath: t = "/",
+  onNavigate: o,
+  LinkComponent: s,
   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",
+  var v;
+  const d = !!((v = e.children) != null && v.length), l = e.path ? de(e.path, t) : !1, c = se(e, t), [x, w] = C(l || c);
+  E(() => {
+    c && w(!0);
+  }, [t, c]);
+  const y = e.icon, m = b(
+    "ral-nav-item group flex w-full items-center gap-3 px-3 text-sm font-medium",
     "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,
+    n > 0 && "text-[13px]",
+    r && "justify-center",
+    (l || c) && "ral-nav-active"
+  ), p = /* @__PURE__ */ u($, { children: [
+    y && /* @__PURE__ */ a(
+      y,
       {
-        className: u("h-[18px] w-[18px] shrink-0", c || b ? "text-white" : ""),
+        className: "h-[18px] w-[18px] shrink-0",
         "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(
+    r && !y && /* @__PURE__ */ a("span", { "aria-hidden": !0, children: e.label.charAt(0) }),
+    r && /* @__PURE__ */ a("span", { className: "sr-only", children: e.label }),
+    !r && /* @__PURE__ */ u($, { children: [
+      /* @__PURE__ */ a("span", { className: "flex-1 truncate text-left", children: e.label }),
+      e.badge != null && /* @__PURE__ */ a(
         "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"
+          className: b(
+            "ral-nav-badge rounded-full px-2 py-0.5 text-[11px] font-semibold"
           ),
           children: e.badge
         }
       ),
-      d && /* @__PURE__ */ n(
-        H,
+      d && /* @__PURE__ */ a(
+        Z,
         {
-          className: u("h-4 w-4 shrink-0 transition-transform", f && "rotate-180"),
+          className: b("h-4 w-4 shrink-0 transition-transform", x && "rotate-180"),
           "aria-hidden": !0
         }
       )
     ] })
   ] }), N = () => {
-    if (d) {
-      v((g) => !g);
-      return;
+    if (!e.disabled) {
+      if (d) {
+        w((f) => !f);
+        return;
+      }
+      e.path && (o == null || o(e.path), i == null || i());
     }
-    e.path && (s == null || s(e.path), i == null || i());
-  }, C = e.path && !d && l ? /* @__PURE__ */ n(
-    l,
+  }, S = e.path && !d && s && !e.disabled ? /* @__PURE__ */ a(
+    s,
     {
       to: e.path,
       className: m,
-      onClick: () => {
-        i == null || i();
-      },
+      onClick: N,
       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,
+  ) : /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: m,
+      onClick: N,
+      disabled: e.disabled,
+      "data-active": l || c,
+      "aria-label": r ? e.label : void 0,
+      title: r ? e.label : void 0,
+      "aria-expanded": d ? !!x : void 0,
+      "aria-current": l && !d ? "page" : void 0,
+      children: p
+    }
+  );
+  return /* @__PURE__ */ u("li", { "data-active": l || c, "aria-label": r ? e.label : void 0, children: [
+    S,
+    d && x && /* @__PURE__ */ a("ul", { className: b("mt-1 space-y-0.5", !r && "border-l border-admin-border ml-5 pl-2"), children: e.children.map((f) => /* @__PURE__ */ a(
+      V,
       {
-        item: g,
-        collapsed: t,
-        depth: a + 1,
-        activePath: r,
-        onNavigate: s,
-        LinkComponent: l,
+        item: f,
+        collapsed: r,
+        depth: n + 1,
+        activePath: t,
+        onNavigate: o,
+        LinkComponent: s,
         onItemClick: i
       },
-      g.label + (g.path ?? "")
+      f.label + (f.path ?? "")
     )) })
   ] });
 }
-function ye({
+function qe({
   items: e,
-  appName: t = "Admin",
-  appLogo: a,
-  onNavigate: r,
-  activePath: s,
-  LinkComponent: l
+  appName: r = "Admin",
+  appLogo: n,
+  onNavigate: t,
+  activePath: o,
+  LinkComponent: s
 }) {
-  const { mobileOpen: i, closeMobile: d } = O(), { permissions: c, activePath: b } = k(), f = s ?? b, v = D(e, c);
-  if (M(() => {
+  const { mobileOpen: i, closeMobile: d } = F(), { permissions: l, activePath: c } = O(), x = o ?? c, w = K(e, l), y = H(null);
+  if (E(() => {
+    var k, P, L, T;
     if (!i) return;
-    const m = (p) => {
-      p.key === "Escape" && d();
+    const p = document.activeElement, N = document.body.style.overflow, S = () => {
+      var g;
+      return Array.from(((g = y.current) == null ? void 0 : g.querySelectorAll(
+        'button:not(:disabled), a[href], input, [tabindex="0"]'
+      )) ?? []).filter((M) => M.getClientRects().length > 0);
+    };
+    (P = (k = y.current) == null ? void 0 : k.querySelector('[aria-label="Close sidebar"]')) == null || P.focus();
+    const v = (g) => {
+      if (g.key === "Escape" && d(), g.key === "Tab") {
+        const M = S(), B = M[0], j = M[M.length - 1];
+        g.shiftKey && document.activeElement === B ? (g.preventDefault(), j == null || j.focus()) : !g.shiftKey && document.activeElement === j && (g.preventDefault(), B == null || B.focus());
+      }
+    }, f = (L = window.matchMedia) == null ? void 0 : L.call(window, "(min-width: 1024px)"), D = () => {
+      f != null && f.matches && d();
     };
-    return document.addEventListener("keydown", m), document.body.style.overflow = "hidden", () => {
-      document.removeEventListener("keydown", m), document.body.style.overflow = "";
+    return (T = f == null ? void 0 : f.addEventListener) == null || T.call(f, "change", D), document.addEventListener("keydown", v), document.body.style.overflow = "hidden", () => {
+      var g;
+      document.removeEventListener("keydown", v), (g = f == null ? void 0 : f.removeEventListener) == null || g.call(f, "change", D), document.body.style.overflow = N, p == null || p.focus();
     };
   }, [i, d]), !i) return null;
-  const h = (m) => {
-    r == null || r(m), d();
+  const m = (p) => {
+    t == null || t(p), d();
   };
-  return /* @__PURE__ */ o("div", { className: "fixed inset-0 z-50 lg:hidden", role: "dialog", "aria-modal": "true", children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ u("div", { ref: y, className: "fixed inset-0 z-50 lg:hidden", role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", children: [
+    /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        className: "absolute inset-0 bg-slate-900/50 backdrop-blur-sm animate-fade-in",
+        className: "ral-overlay absolute inset-0 backdrop-blur-sm animate-fade-in",
         "aria-label": "Close menu",
         onClick: d
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ u(
       "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"
+        className: b(
+          "ral-sidebar absolute left-0 top-0 flex h-full w-[min(var(--ral-sidebar-width),85vw)] flex-col",
+          "border-r border-admin-border 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__ */ u("div", { className: "ral-sidebar-top flex items-center justify-between border-b border-admin-border px-4", children: [
+            /* @__PURE__ */ u("div", { className: "flex items-center gap-3", children: [
+              n ?? /* @__PURE__ */ a("div", { className: "flex h-9 w-9 items-center justify-center rounded-admin bg-admin-primary text-sm font-bold text-admin-on-primary", children: r.charAt(0) }),
+              /* @__PURE__ */ a("span", { className: "ral-sidebar-brand font-semibold", children: r })
             ] }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
                 onClick: d,
-                className: "rounded-lg p-2 text-admin-muted hover:bg-admin-bg",
+                className: "rounded-admin p-2 text-admin-muted hover:bg-admin-hover",
                 "aria-label": "Close sidebar",
-                children: /* @__PURE__ */ n(te, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ a(me, { 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,
+          /* @__PURE__ */ a("nav", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ a(oe, { children: w.map((p) => /* @__PURE__ */ a(
+            V,
             {
-              item: m,
-              activePath: f,
-              onNavigate: h,
-              LinkComponent: l,
+              item: p,
+              activePath: x,
+              onNavigate: m,
+              LinkComponent: s,
               onItemClick: d
             },
-            m.label + (m.path ?? "")
+            p.label + (p.path ?? "")
           )) }) })
         ]
       }
     )
   ] });
 }
-function we({
+function ze({
   items: e,
-  className: t,
-  LinkComponent: a,
-  onNavigate: r
+  className: r,
+  LinkComponent: n,
+  onNavigate: t
 }) {
   if (!e.length) return null;
-  const s = (l, i) => {
-    const d = u(
+  const o = (s, i) => {
+    const d = b(
       "text-sm transition-colors",
-      i ? "font-medium text-admin-text" : "text-admin-muted hover:text-admin-text"
+      i ? "font-medium text-admin-text" : "text-admin-muted hover:text-admin-hover-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 !s.path || i ? /* @__PURE__ */ a("span", { className: d, children: s.label }) : n ? /* @__PURE__ */ a(n, { to: s.path, className: d, children: s.label }) : /* @__PURE__ */ a("button", { type: "button", className: d, onClick: () => t == null ? void 0 : t(s.path), children: s.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) => {
+  return /* @__PURE__ */ u("nav", { "aria-label": "Breadcrumb", className: b("flex items-center gap-1.5", r), children: [
+    /* @__PURE__ */ a(fe, { className: "h-4 w-4 text-admin-muted shrink-0", "aria-hidden": !0 }),
+    e.map((s, 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}`);
+      return /* @__PURE__ */ u("span", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ a(be, { className: "h-3.5 w-3.5 text-admin-muted", "aria-hidden": !0 }),
+        o(s, d)
+      ] }, `${s.label}-${i}`);
     })
   ] });
 }
-function Ne({
+function Re({
   placeholder: e = "Search...",
-  onSearch: t,
-  className: a
+  onSearch: r,
+  className: n
 }) {
-  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,
+  const [t, o] = C("");
+  return /* @__PURE__ */ u("form", { onSubmit: (i) => {
+    i.preventDefault(), r == null || r(t.trim());
+  }, className: b("relative w-full max-w-md", n), children: [
+    /* @__PURE__ */ a(
+      he,
       {
         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(
+    /* @__PURE__ */ a(
       "input",
       {
         type: "search",
-        value: r,
-        onChange: (i) => s(i.target.value),
+        value: t,
+        onChange: (i) => o(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"
+        className: b(
+          "h-10 w-full rounded-admin 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"
         ),
         "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(() => {
+function Ue({ notifications: e = [], className: r }) {
+  const [n, t] = C(!1), o = H(null), s = e.filter((i) => !i.read).length;
+  return E(() => {
     const i = (d) => {
-      s.current && !s.current.contains(d.target) && r(!1);
+      o.current && !o.current.contains(d.target) && t(!1);
     };
     return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
-  }, []), /* @__PURE__ */ o("div", { ref: s, className: u("relative", t), children: [
-    /* @__PURE__ */ o(
+  }, []), /* @__PURE__ */ u("div", { ref: o, className: b("relative", r), onKeyDown: (i) => {
+    var d, l;
+    i.key === "Escape" && (t(!1), (l = (d = o.current) == null ? void 0 : d.querySelector("button")) == null || l.focus());
+  }, children: [
+    /* @__PURE__ */ u(
       "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",
+        onClick: () => t((i) => !i),
+        className: b(
+          "relative inline-flex h-9 w-9 items-center justify-center rounded-admin border border-admin-border",
+          "bg-admin-surface text-admin-muted transition-colors hover:bg-admin-hover hover:text-admin-hover-text",
           "focus-visible:ring-2 focus-visible:ring-admin-primary"
         ),
-        "aria-label": `Notifications${l ? `, ${l} unread` : ""}`,
-        "aria-expanded": a,
+        "aria-label": `Notifications${s ? `, ${s} unread` : ""}`,
+        "aria-expanded": n,
         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 })
+          /* @__PURE__ */ a(pe, { className: "h-4 w-4", "aria-hidden": !0 }),
+          s > 0 && /* @__PURE__ */ a("span", { className: "absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-admin-danger px-1 text-[10px] font-bold text-admin-on-danger", children: s > 9 ? "9+" : s })
         ]
       }
     ),
-    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(
+    n && /* @__PURE__ */ u("div", { className: "absolute right-0 top-full z-50 mt-2 w-80 max-w-[calc(100vw-6rem)] rounded-admin border border-admin-border bg-admin-surface shadow-admin-lg animate-fade-in", children: [
+      /* @__PURE__ */ a("div", { className: "border-b border-admin-border px-4 py-3", children: /* @__PURE__ */ a("p", { className: "text-sm font-semibold text-admin-text", children: "Notifications" }) }),
+      /* @__PURE__ */ a("ul", { className: "max-h-72 overflow-y-auto p-2", children: e.length === 0 ? /* @__PURE__ */ a("li", { className: "px-3 py-6 text-center text-sm text-admin-muted", children: "No notifications" }) : e.map((i) => /* @__PURE__ */ u(
         "li",
         {
-          className: u(
-            "rounded-lg px-3 py-2.5 transition-colors hover:bg-admin-bg",
-            !i.read && "bg-admin-primary/5"
+          className: b(
+            "rounded-admin px-3 py-2.5 transition-colors hover:bg-admin-hover",
+            !i.read && "ral-unread"
           ),
           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 })
+            /* @__PURE__ */ a("p", { className: "text-sm font-medium text-admin-text", children: i.title }),
+            i.description && /* @__PURE__ */ a("p", { className: "mt-0.5 text-xs text-admin-muted line-clamp-2", children: i.description }),
+            i.time && /* @__PURE__ */ a("p", { className: "mt-1 text-[11px] text-admin-muted", children: i.time })
           ]
         },
         i.id
@@ -422,108 +589,123 @@ function ke({ notifications: e = [], className: t }) {
     ] })
   ] });
 }
-function Ce() {
-  const { darkMode: e, toggleDarkMode: t, setDarkMode: a } = k();
+function $e() {
+  const { darkMode: e, toggleDarkMode: r, setDarkMode: n } = O();
   return {
     isDark: e,
-    toggle: t,
-    setDarkMode: a
+    toggle: r,
+    setDarkMode: n
   };
 }
-function Se({ className: e }) {
-  const { isDark: t, toggle: a } = Ce();
-  return /* @__PURE__ */ n(
+function He({ className: e }) {
+  const { isDark: r, toggle: n } = $e();
+  return /* @__PURE__ */ a(
     "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",
+      onClick: n,
+      className: b(
+        "inline-flex h-9 w-9 items-center justify-center rounded-admin border border-admin-border",
+        "bg-admin-surface text-admin-muted transition-colors hover:bg-admin-hover hover:text-admin-hover-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 })
+      "aria-label": r ? "Switch to light mode" : "Switch to dark mode",
+      children: r ? /* @__PURE__ */ a(xe, { className: "h-4 w-4", "aria-hidden": !0 }) : /* @__PURE__ */ a(ve, { 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);
+function Fe({ user: e, onLogout: r, onSettings: n, className: t }) {
+  const [o, s] = C(!1), i = H(null);
+  E(() => {
+    const l = (c) => {
+      i.current && !i.current.contains(c.target) && s(!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(
+    return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
+  }, []), E(() => {
+    var l, c;
+    o && ((c = (l = i.current) == null ? void 0 : l.querySelector('[role="menuitem"]')) == null || c.focus());
+  }, [o]);
+  const d = e.name.split(" ").map((l) => l[0]).join("").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ u("div", { ref: i, className: b("relative", t), onKeyDown: (l) => {
+    var x, w, y;
+    const c = (x = i.current) == null ? void 0 : x.querySelector("[aria-haspopup]");
+    if (l.key === "Escape" && o && (l.preventDefault(), s(!1), c == null || c.focus()), l.key === "Tab" && s(!1), ["ArrowDown", "ArrowUp", "Home", "End"].includes(l.key)) {
+      if (l.preventDefault(), !o) {
+        s(!0);
+        return;
+      }
+      const m = Array.from(((w = i.current) == null ? void 0 : w.querySelectorAll('[role="menuitem"]')) ?? []), p = m.indexOf(document.activeElement), N = l.key === "Home" ? 0 : l.key === "End" ? m.length - 1 : (p + (l.key === "ArrowDown" ? 1 : -1) + m.length) % m.length;
+      (y = m[N]) == null || y.focus();
+    }
+  }, children: [
+    /* @__PURE__ */ u(
       "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"
+        onClick: () => s((l) => !l),
+        className: b(
+          "flex items-center gap-2 rounded-admin border border-admin-border bg-admin-surface px-2 py-1.5",
+          "transition-colors hover:bg-admin-hover focus-visible:ring-2 focus-visible:ring-admin-primary"
         ),
-        "aria-expanded": s,
+        "aria-expanded": o,
         "aria-haspopup": "menu",
+        "aria-label": `User menu for ${e.name}`,
         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 })
+          e.avatar ? /* @__PURE__ */ a("img", { src: e.avatar, alt: "", className: "h-8 w-8 rounded-admin object-cover" }) : /* @__PURE__ */ a("div", { className: "flex h-8 w-8 items-center justify-center rounded-admin bg-admin-primary text-xs font-semibold text-admin-on-primary", children: d }),
+          /* @__PURE__ */ u("div", { className: "hidden text-left sm:block", children: [
+            /* @__PURE__ */ a("p", { className: "text-sm font-medium text-admin-text leading-tight", children: e.name }),
+            /* @__PURE__ */ a("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 })
+          /* @__PURE__ */ a(Z, { className: "hidden h-4 w-4 text-admin-muted sm:block", "aria-hidden": !0 })
         ]
       }
     ),
-    s && /* @__PURE__ */ o(
+    o && /* @__PURE__ */ u(
       "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",
+        className: "absolute right-0 top-full z-50 mt-2 w-56 rounded-admin border border-admin-border bg-admin-surface p-1.5 shadow-admin-lg animate-fade-in",
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ u(
             "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",
+              className: "flex w-full items-center gap-2 rounded-admin px-3 py-2 text-sm text-admin-text hover:bg-admin-hover",
               onClick: () => {
-                a == null || a(), l(!1);
+                n == null || n(), s(!1);
               },
               children: [
-                /* @__PURE__ */ n(de, { className: "h-4 w-4 text-admin-muted" }),
+                /* @__PURE__ */ a(ye, { className: "h-4 w-4 text-admin-muted" }),
                 "Settings"
               ]
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ u(
             "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",
+              className: "flex w-full items-center gap-2 rounded-admin px-3 py-2 text-sm text-admin-text hover:bg-admin-hover",
               children: [
-                /* @__PURE__ */ n(oe, { className: "h-4 w-4 text-admin-muted" }),
+                /* @__PURE__ */ a(ge, { className: "h-4 w-4 text-admin-muted" }),
                 "Profile"
               ]
             }
           ),
-          /* @__PURE__ */ n("hr", { className: "my-1 border-admin-border" }),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ a("hr", { className: "my-1 border-admin-border" }),
+          /* @__PURE__ */ u(
             "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",
+              className: "flex w-full items-center gap-2 rounded-admin px-3 py-2 text-sm ral-danger",
               onClick: () => {
-                t == null || t(), l(!1);
+                r == null || r(), s(!1);
               },
               children: [
-                /* @__PURE__ */ n(ce, { className: "h-4 w-4" }),
+                /* @__PURE__ */ a(we, { className: "h-4 w-4" }),
                 "Log out"
               ]
             }
@@ -533,272 +715,292 @@ function Me({ user: e, onLogout: t, onSettings: a, className: r }) {
     )
   ] });
 }
-function Pe({
+function Je({
   user: e,
-  notifications: t = [],
-  onSearch: a,
-  searchPlaceholder: r = "Search...",
-  showSearch: s = !0,
-  className: l,
+  notifications: r = [],
+  onSearch: n,
+  searchPlaceholder: t = "Search...",
+  showSearch: o = !0,
+  className: s,
   breadcrumbs: i = [],
   onMenuClick: d,
-  sidebarCollapsed: c,
-  onToggleSidebar: b
+  sidebarCollapsed: l,
+  onToggleSidebar: c
 }) {
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ u(
     "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
+      className: b(
+        "ral-header sticky top-0 z-40 flex shrink-0 items-center gap-4 border-b border-admin-border",
+        s
       ),
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            className: "rounded-lg p-2 text-admin-muted hover:bg-admin-bg lg:hidden",
+            className: "rounded-admin p-2 text-admin-muted hover:bg-admin-hover lg:hidden",
             onClick: d,
             "aria-label": "Open menu",
-            children: /* @__PURE__ */ n(me, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ a(Ne, { className: "h-5 w-5" })
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ a(
           "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" })
+            className: "hidden rounded-admin p-2 text-admin-muted hover:bg-admin-hover lg:inline-flex",
+            onClick: c,
+            "aria-label": l ? "Expand sidebar" : "Collapse sidebar",
+            children: l ? /* @__PURE__ */ a(ee, { className: "h-5 w-5" }) : /* @__PURE__ */ a(re, { 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 })
+        /* @__PURE__ */ a("div", { className: "hidden min-w-0 flex-1 md:block", children: /* @__PURE__ */ a(ze, { items: i }) }),
+        /* @__PURE__ */ u("div", { className: "flex flex-1 items-center justify-end gap-2 sm:gap-3", children: [
+          o && /* @__PURE__ */ a("div", { className: "hidden flex-1 sm:flex sm:max-w-md", children: /* @__PURE__ */ a(Re, { placeholder: t, onSearch: n }) }),
+          /* @__PURE__ */ a(He, {}),
+          /* @__PURE__ */ a(Ue, { notifications: r }),
+          e && /* @__PURE__ */ a(Fe, { user: e })
         ] })
       ]
     }
   );
 }
-function Le({
+function Ke({
   items: e,
-  collapsed: t,
-  appName: a = "Admin",
-  appLogo: r,
-  className: s,
-  onNavigate: l,
+  collapsed: r,
+  appName: n = "Admin",
+  appLogo: t,
+  className: o,
+  onNavigate: s,
   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();
+  const { collapsed: l, toggle: c, closeMobile: x } = F(), { permissions: w, activePath: y } = O(), m = r ?? l, p = i ?? y, N = K(e, w), S = (v) => {
+    s == null || s(v), x();
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ u(
     "aside",
     {
-      className: u(
-        "hidden lg:flex flex-col border-r border-admin-border bg-admin-surface transition-all duration-300 ease-in-out",
+      className: b(
+        "ral-sidebar hidden lg:flex shrink-0 flex-col border-r border-admin-border",
+        "h-screen sticky top-0 transition-[width] duration-300 ease-in-out",
         m ? "w-[var(--admin-sidebar-collapsed)]" : "w-[var(--admin-sidebar-width)]",
-        s
+        o
       ),
       "aria-label": "Sidebar navigation",
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ u(
           "div",
           {
-            className: u(
-              "flex h-16 items-center border-b border-admin-border px-4",
+            className: b(
+              "ral-sidebar-top flex 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 })
+              /* @__PURE__ */ u("div", { className: b("flex items-center gap-3 min-w-0", m && "justify-center"), children: [
+                t ?? /* @__PURE__ */ a("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-admin bg-admin-primary text-sm font-bold text-admin-on-primary shadow-admin", children: n.charAt(0) }),
+                !m && /* @__PURE__ */ a("span", { className: "ral-sidebar-brand truncate text-base font-semibold", children: n })
               ] }),
-              !m && /* @__PURE__ */ n(
+              !m && /* @__PURE__ */ a(
                 "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",
+                  onClick: c,
+                  className: "rounded-admin p-2 text-admin-muted hover:bg-admin-hover hover:text-admin-hover-text focus-visible:ring-2 focus-visible:ring-admin-primary",
                   "aria-label": "Collapse sidebar",
-                  children: /* @__PURE__ */ n(G, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ a(re, { className: "h-4 w-4" })
                 }
               )
             ]
           }
         ),
-        m && /* @__PURE__ */ n("div", { className: "flex justify-center py-2 border-b border-admin-border", children: /* @__PURE__ */ n(
+        m && /* @__PURE__ */ a("div", { className: "flex justify-center py-2 border-b border-admin-border", children: /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: b,
-            className: "rounded-lg p-2 text-admin-muted hover:bg-admin-bg",
+            onClick: c,
+            className: "rounded-admin p-2 text-admin-muted hover:bg-admin-hover",
             "aria-label": "Expand sidebar",
-            children: /* @__PURE__ */ n(J, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ a(ee, { 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,
+        /* @__PURE__ */ a("nav", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ a(oe, { collapsed: m, children: N.map((v) => /* @__PURE__ */ a(
+          V,
           {
-            item: x,
+            item: v,
             collapsed: m,
             activePath: p,
-            onNavigate: C,
+            onNavigate: S,
             LinkComponent: d
           },
-          x.label + (x.path ?? "")
+          v.label + (v.path ?? "")
         )) }) })
       ]
     }
   );
 }
-function F({
+function X({
   children: e,
-  sidebarItems: t,
-  appName: a = "Admin",
-  appLogo: r,
-  user: s,
-  notifications: l = [],
+  sidebarItems: r,
+  appName: n = "Admin",
+  appLogo: t,
+  user: o,
+  notifications: s = [],
   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
+  showSearch: l = !0,
+  searchPlaceholder: c,
+  onSearch: x,
+  breadcrumbs: w,
+  contentClassName: y,
+  className: m,
+  activePath: p,
+  onNavigate: N,
+  LinkComponent: S,
+  enableRouter: v = !1
 }) {
   const {
-    sidebarCollapsed: x,
-    toggleSidebar: S,
-    toggleMobile: g,
+    sidebarCollapsed: f,
+    toggleSidebar: D,
+    toggleMobile: k,
     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), _();
+    setBreadcrumbs: L,
+    activePath: T,
+    setActivePath: g
+  } = O(), { closeMobile: M } = F(), { resolvedMode: B, style: j, colors: R } = Le(), q = p ?? T, U = w ?? P, h = (z) => {
+    g(z), w || L(J(z)), N == null || N(z), M();
   };
-  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 })
-    ] })
-  ] });
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: b("ral-layout admin-layout-root min-h-screen bg-admin-bg text-admin-text", B === "dark" && "dark", m),
+      "data-theme": B,
+      "data-style": j,
+      style: Ce({ colors: R }),
+      children: [
+        /* @__PURE__ */ a(
+          qe,
+          {
+            items: r,
+            appName: n,
+            appLogo: t,
+            activePath: q,
+            onNavigate: h,
+            LinkComponent: S
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: "flex min-h-screen w-full", children: [
+          /* @__PURE__ */ a(
+            Ke,
+            {
+              items: r,
+              appName: n,
+              appLogo: t,
+              activePath: q,
+              onNavigate: h,
+              LinkComponent: S
+            }
+          ),
+          /* @__PURE__ */ u("div", { className: "flex min-h-screen min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ a(
+              Je,
+              {
+                user: o,
+                notifications: s,
+                onSearch: x,
+                searchPlaceholder: c,
+                showSearch: l,
+                breadcrumbs: U,
+                onMenuClick: k,
+                sidebarCollapsed: f,
+                onToggleSidebar: D
+              }
+            ),
+            /* @__PURE__ */ a("main", { className: b("ral-content flex-1", y), children: e }),
+            d && /* @__PURE__ */ a(Oe, { children: i })
+          ] })
+        ] })
+      ]
+    }
+  );
 }
-function De(e) {
+function Ye(e) {
   const {
-    storageKey: t = "rqdhw3n-admin-layout",
-    defaultCollapsed: a = !1,
-    initialDarkMode: r = !1,
-    permissions: s = {},
-    breadcrumbs: l = [],
+    storageKey: r = "rqdhw3n-admin-layout",
+    defaultCollapsed: n = !1,
+    initialDarkMode: t = !1,
+    permissions: o = {},
+    breadcrumbs: s = [],
     activePath: i = "/",
     enableRouter: d = !1,
-    children: c,
-    ...b
-  } = e, f = U(
-    () => l.length ? l : E(i),
-    [l, i]
+    children: l,
+    ...c
+  } = e, x = I(
+    () => s.length ? s : J(i),
+    [s, i]
   );
-  return /* @__PURE__ */ n(
-    he,
+  return /* @__PURE__ */ a(
+    Ae,
     {
-      storageKey: t,
-      defaultCollapsed: a,
-      permissions: s,
-      initialBreadcrumbs: f,
+      storageKey: r,
+      defaultCollapsed: n,
+      permissions: o,
+      initialBreadcrumbs: x,
       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 })
+      initialDarkMode: t,
+      theme: e.theme,
+      onThemeModeChange: e.onThemeModeChange,
+      children: d ? /* @__PURE__ */ a(Pe, { children: /* @__PURE__ */ a(X, { ...c, enableRouter: d, children: l }) }) : /* @__PURE__ */ a(X, { ...c, enableRouter: d, children: l })
     }
   );
 }
-function Re({ to: e, className: t, children: a, onClick: r }) {
-  return /* @__PURE__ */ n(ee, { to: e, className: t, onClick: r, children: a });
+function _e({ to: e, className: r, children: n, onClick: t }) {
+  return /* @__PURE__ */ a(ue, { to: e, className: r, onClick: t, children: n });
 }
-function $e() {
-  return k();
+function Ie() {
+  return O();
 }
-function qe() {
-  const { breadcrumbs: e, setBreadcrumbs: t } = k(), a = L(
-    (r) => t(r),
-    [t]
+function Ze() {
+  const { breadcrumbs: e, setBreadcrumbs: r } = O(), n = A(
+    (t) => r(t),
+    [r]
   );
   return {
     items: e,
-    setBreadcrumbs: a
+    setBreadcrumbs: n
   };
 }
 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
+  Ye as AdminLayout,
+  Pe as AdminLayoutRouterSync,
+  ze as Breadcrumbs,
+  Oe as Footer,
+  Ae as LayoutProvider,
+  qe as MobileSidebar,
+  Je as Navbar,
+  Re as NavbarSearch,
+  Ue as NotificationMenu,
+  _e as RouterLink,
+  Ke as Sidebar,
+  oe as SidebarGroup,
+  V as SidebarItem,
+  He as ThemeToggle,
+  Fe as UserMenu,
+  Xe as adminLayoutPresets,
+  b as cn,
+  Se as darkThemeColors,
+  K as filterSidebarByPermissions,
+  J as generateBreadcrumbsFromPath,
+  Te as hasPermission,
+  te as lightThemeColors,
+  Me as resolveTheme,
+  Ce as themeToCSSVariables,
+  Le as useAdminLayoutTheme,
+  Ze as useBreadcrumbs,
+  $e as useDarkMode,
+  O as useLayoutContext,
+  Ie as useLayoutState,
+  F as useSidebar
 };
 //# sourceMappingURL=index.js.map