@adminlte/react 0.1.0

package/dist/context/accessibility.js

@@ -0,0 +1,141 @@
+"use client";
+import { useEffect } from "react";
+function Accessibility() {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const created = [];
+    const cleanups = [];
+    let liveRegion = document.getElementById("live-region");
+    if (!liveRegion) {
+      liveRegion = document.createElement("div");
+      liveRegion.id = "live-region";
+      liveRegion.className = "live-region";
+      liveRegion.setAttribute("aria-live", "polite");
+      liveRegion.setAttribute("aria-atomic", "true");
+      liveRegion.setAttribute("role", "status");
+      document.body.append(liveRegion);
+      created.push(liveRegion);
+    }
+    const announce = (message, priority = "polite") => {
+      if (!liveRegion) return;
+      liveRegion.setAttribute("aria-live", priority);
+      liveRegion.textContent = message;
+      window.setTimeout(() => {
+        if (liveRegion) liveRegion.textContent = "";
+      }, 1e3);
+    };
+    if (!document.querySelector(".skip-links")) {
+      const container = document.createElement("div");
+      container.className = "skip-links";
+      const mk = (href, text) => {
+        const a = document.createElement("a");
+        a.href = href;
+        a.className = "skip-link";
+        a.textContent = text;
+        return a;
+      };
+      container.append(mk("#main", "Skip to main content"));
+      container.append(mk("#navigation", "Skip to navigation"));
+      document.body.insertBefore(container, document.body.firstChild);
+      created.push(container);
+      const main = document.querySelector('#main, main, [role="main"]');
+      if (main) {
+        if (!main.id) main.id = "main";
+        if (!main.hasAttribute("tabindex")) main.setAttribute("tabindex", "-1");
+      }
+      const nav = document.querySelector('#navigation, nav, [role="navigation"]');
+      if (nav) {
+        if (!nav.id) nav.id = "navigation";
+        if (!nav.hasAttribute("tabindex")) nav.setAttribute("tabindex", "-1");
+      }
+    }
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      if (document.querySelector(".modal.show")) return;
+      if (document.querySelector(".dropdown-menu.show")) {
+        const toggleButton = document.querySelector(
+          '[data-bs-toggle="dropdown"][aria-expanded="true"]'
+        );
+        toggleButton?.click();
+        event.preventDefault();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    cleanups.push(() => document.removeEventListener("keydown", onKeyDown));
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      document.body.classList.add("reduce-motion");
+      document.documentElement.style.scrollBehavior = "auto";
+      const style = document.createElement("style");
+      style.textContent = "*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }";
+      document.head.append(style);
+      created.push(style);
+      cleanups.push(() => document.body.classList.remove("reduce-motion"));
+    }
+    const appMain = document.querySelector(".app-main");
+    if (appMain) {
+      if (!appMain.getAttribute("role")) appMain.setAttribute("role", "main");
+      if (!appMain.id) appMain.id = "main";
+    }
+    document.querySelectorAll(".navbar-nav, .nav").forEach((nav, index) => {
+      if (nav.tagName === "UL" || nav.tagName === "OL") return;
+      if (!nav.hasAttribute("role")) nav.setAttribute("role", "navigation");
+      if (!nav.hasAttribute("aria-label")) nav.setAttribute("aria-label", `Navigation ${index + 1}`);
+    });
+    document.querySelectorAll("table").forEach((table) => {
+      if (!table.hasAttribute("role")) table.setAttribute("role", "table");
+      table.querySelectorAll("th").forEach((th) => {
+        if (!th.hasAttribute("scope")) {
+          if (th.closest("thead")) th.setAttribute("scope", "col");
+          else if (th.cellIndex === 0) th.setAttribute("scope", "row");
+        }
+      });
+    });
+    document.querySelectorAll("input, select, textarea").forEach((input) => {
+      if (!input.labels?.length && !input.hasAttribute("aria-label") && !input.hasAttribute("aria-labelledby")) {
+        const placeholder = input.getAttribute("placeholder");
+        if (placeholder) input.setAttribute("aria-label", placeholder);
+      }
+      if (!input.classList.contains("disable-adminlte-validations")) {
+        const onInvalid = () => {
+          input.classList.add("is-invalid");
+          announce(
+            `Error in ${input.labels?.[0]?.textContent || input.name}: ${input.validationMessage}`,
+            "assertive"
+          );
+        };
+        input.addEventListener("invalid", onInvalid);
+        cleanups.push(() => input.removeEventListener("invalid", onInvalid));
+      }
+    });
+    const focusHistory = [];
+    const onModalShown = (e) => {
+      const modal = e.target;
+      const focusable = modal.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      focusHistory.push(document.activeElement);
+      focusable?.focus();
+    };
+    const onModalHidden = () => focusHistory.pop()?.focus();
+    const onDropdownShown = (e) => {
+      const dropdown = e.target;
+      dropdown.querySelector(".dropdown-menu a, .dropdown-menu button")?.focus();
+    };
+    document.addEventListener("shown.bs.modal", onModalShown);
+    document.addEventListener("hidden.bs.modal", onModalHidden);
+    document.addEventListener("shown.bs.dropdown", onDropdownShown);
+    cleanups.push(() => {
+      document.removeEventListener("shown.bs.modal", onModalShown);
+      document.removeEventListener("hidden.bs.modal", onModalHidden);
+      document.removeEventListener("shown.bs.dropdown", onDropdownShown);
+    });
+    return () => {
+      cleanups.forEach((fn) => fn());
+      created.forEach((el) => el.remove());
+    };
+  }, []);
+  return null;
+}
+export {
+  Accessibility
+};

package/dist/context/body-class-sync.js

@@ -0,0 +1,22 @@
+"use client";
+import { useEffect } from "react";
+import { useSidebarContext } from "./sidebar-context.js";
+function BodyClassSync({ staticClasses }) {
+  const { isCollapsed, isMobileOpen, isMiniMode } = useSidebarContext();
+  useEffect(() => {
+    const body = document.body;
+    const staticList = staticClasses.split(" ").filter(Boolean);
+    staticList.forEach((cls) => body.classList.add(cls));
+    body.classList.toggle("sidebar-collapse", isCollapsed);
+    body.classList.toggle("sidebar-open", isMobileOpen);
+    body.classList.toggle("sidebar-mini", isMiniMode);
+    return () => {
+      staticList.forEach((cls) => body.classList.remove(cls));
+      body.classList.remove("sidebar-collapse", "sidebar-open", "sidebar-mini");
+    };
+  }, [isCollapsed, isMobileOpen, isMiniMode, staticClasses]);
+  return null;
+}
+export {
+  BodyClassSync
+};

package/dist/context/color-mode-context.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+const ColorModeContext = createContext(void 0);
+function ColorModeProvider({
+  initialMode = "auto",
+  children
+}) {
+  const [colorMode, setColorMode] = useState(initialMode);
+  const [resolvedMode, setResolvedMode] = useState("light");
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const saved = localStorage.getItem("lte-theme");
+    if (saved && ["light", "dark", "auto"].includes(saved)) {
+      setColorMode(saved);
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    let resolved;
+    if (colorMode === "auto") {
+      resolved = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } else {
+      resolved = colorMode;
+    }
+    setResolvedMode(resolved);
+    document.documentElement.setAttribute("data-bs-theme", resolved);
+    localStorage.setItem("lte-theme", colorMode);
+  }, [colorMode]);
+  useEffect(() => {
+    if (colorMode !== "auto" || typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      const resolved = mediaQuery.matches ? "dark" : "light";
+      setResolvedMode(resolved);
+      document.documentElement.setAttribute("data-bs-theme", resolved);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [colorMode]);
+  const value = useMemo(
+    () => ({
+      colorMode,
+      setColorMode,
+      resolvedMode
+    }),
+    [colorMode, resolvedMode]
+  );
+  return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value, children });
+}
+function useColorModeContext() {
+  const context = useContext(ColorModeContext);
+  if (!context) {
+    throw new Error("useColorModeContext must be used within ColorModeProvider");
+  }
+  return context;
+}
+export {
+  ColorModeProvider,
+  useColorModeContext
+};

package/dist/context/command-palette-context.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+const CommandPaletteContext = createContext(void 0);
+function CommandPaletteProvider({ children }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((o) => !o), []);
+  useEffect(() => {
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [toggle]);
+  return /* @__PURE__ */ jsx(CommandPaletteContext.Provider, { value: { isOpen, open, close, toggle }, children });
+}
+function useCommandPalette() {
+  return useContext(CommandPaletteContext);
+}
+export {
+  CommandPaletteProvider,
+  useCommandPalette
+};

package/dist/context/html-dir.js

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect } from "react";
+function HtmlDir({ dir }) {
+  useEffect(() => {
+    const root = document.documentElement;
+    const previous = root.getAttribute("dir");
+    root.setAttribute("dir", dir);
+    return () => {
+      if (previous) root.setAttribute("dir", previous);
+      else root.removeAttribute("dir");
+    };
+  }, [dir]);
+  return null;
+}
+export {
+  HtmlDir
+};

package/dist/context/link-context.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ jsx("a", { href, ...rest, children });
+const LinkContext = createContext(DefaultLink);
+function LinkProvider({
+  component,
+  children
+}) {
+  return /* @__PURE__ */ jsx(LinkContext.Provider, { value: component ?? DefaultLink, children });
+}
+function useLinkComponent() {
+  return useContext(LinkContext);
+}
+export {
+  LinkProvider,
+  useLinkComponent
+};

package/dist/context/lte-behaviors.js

@@ -0,0 +1,52 @@
+"use client";
+import { useEffect } from "react";
+function LteBehaviors() {
+  useEffect(() => {
+    const onClick = (e) => {
+      const target = e.target;
+      const btn = target?.closest("[data-lte-toggle]");
+      if (!btn) return;
+      const action = btn.getAttribute("data-lte-toggle");
+      const card = btn.closest(".card");
+      switch (action) {
+        case "card-collapse":
+          card?.classList.toggle("collapsed-card");
+          break;
+        case "card-maximize":
+          card?.classList.toggle("maximized-card");
+          break;
+        case "card-remove":
+          card?.remove();
+          break;
+        case "chat-pane": {
+          const chat = btn.closest(".direct-chat") ?? card;
+          chat?.classList.toggle("direct-chat-contacts-open");
+          break;
+        }
+        default:
+          break;
+      }
+    };
+    const onSubmit = (e) => {
+      const form = e.target?.closest(
+        ".needs-validation, .needs-validation-tooltip"
+      );
+      if (!form) return;
+      if (!form.checkValidity()) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      form.classList.add("was-validated");
+    };
+    document.addEventListener("click", onClick);
+    document.addEventListener("submit", onSubmit, true);
+    return () => {
+      document.removeEventListener("click", onClick);
+      document.removeEventListener("submit", onSubmit, true);
+    };
+  }, []);
+  return null;
+}
+export {
+  LteBehaviors
+};

package/dist/context/sidebar-context.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+const SidebarContext = createContext(void 0);
+function SidebarProvider({
+  sidebarMini = false,
+  enablePersistence = false,
+  sidebarBreakpoint = 992,
+  children
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const [isMiniMode] = useState(sidebarMini);
+  const [windowWidth, setWindowWidth] = useState(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    setWindowWidth(window.innerWidth);
+    if (enablePersistence) {
+      const saved = localStorage.getItem("lte.sidebar.state");
+      if (saved) {
+        try {
+          const { collapsed } = JSON.parse(saved);
+          setIsCollapsed(collapsed);
+        } catch {
+        }
+      }
+    }
+  }, [enablePersistence]);
+  useEffect(() => {
+    if (typeof window === "undefined" || !enablePersistence) return;
+    localStorage.setItem("lte.sidebar.state", JSON.stringify({ collapsed: isCollapsed }));
+  }, [isCollapsed, enablePersistence]);
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  useEffect(() => {
+    if (windowWidth === null) return;
+    const isMobileSize = windowWidth <= sidebarBreakpoint;
+    if (!isMobileSize && isMobileOpen) {
+      setIsMobileOpen(false);
+    }
+  }, [windowWidth, sidebarBreakpoint, isMobileOpen]);
+  const toggle = useCallback(() => {
+    const w = windowWidth ?? (typeof window !== "undefined" ? window.innerWidth : 9999);
+    if (w <= sidebarBreakpoint) {
+      setIsMobileOpen((v) => !v);
+    } else {
+      setIsCollapsed((v) => !v);
+    }
+  }, [windowWidth, sidebarBreakpoint]);
+  const collapse = useCallback(() => {
+    setIsCollapsed(true);
+    setIsMobileOpen(false);
+  }, []);
+  const expand = useCallback(() => {
+    setIsCollapsed(false);
+    setIsMobileOpen(false);
+  }, []);
+  const value = useMemo(
+    () => ({
+      isCollapsed,
+      isMobileOpen,
+      isMiniMode,
+      toggle,
+      collapse,
+      expand,
+      sidebarBreakpoint
+    }),
+    [isCollapsed, isMobileOpen, isMiniMode, toggle, collapse, expand, sidebarBreakpoint]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value, children });
+}
+function useSidebarContext() {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebarContext must be used within SidebarProvider");
+  }
+  return context;
+}
+export {
+  SidebarProvider,
+  useSidebarContext
+};