@abgov/react-components 7.2.0-dev.5 → 7.2.0-dev.6

package/index.mjs

@@ -9,7 +9,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _PublicFormController_instances, updateObjectListState_fn, dispatchError_fn;
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useLayoutEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useLayoutEffect, useState, useCallback, createContext, useContext } from "react";
 const lowercase = (input) => input.toLowerCase();
 const kebab = (input) => input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 function transformProps(props, transform = lowercase) {
@@ -4314,30 +4314,28 @@ function GoabWorkSideMenu({
 }) {
   const el = useRef(null);
   useEffect(() => {
-    var _a;
-    if (!(el == null ? void 0 : el.current) || !onToggle) {
+    const node = el.current;
+    if (!node || !onToggle) {
       return;
     }
-    (_a = el.current) == null ? void 0 : _a.addEventListener("_toggle", onToggle);
+    node.addEventListener("_toggle", onToggle);
     return () => {
-      var _a2;
-      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
+      node.removeEventListener("_toggle", onToggle);
     };
-  }, [el, onToggle]);
+  }, [onToggle]);
   useEffect(() => {
-    var _a;
-    if (!(el == null ? void 0 : el.current) || !onNavigate) {
+    const node = el.current;
+    if (!node || !onNavigate) {
       return;
     }
     const handler = (e) => {
       onNavigate(e.detail.url);
     };
-    (_a = el.current) == null ? void 0 : _a.addEventListener("_navigate", handler);
+    node.addEventListener("_navigate", handler);
     return () => {
-      var _a2;
-      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_navigate", handler);
+      node.removeEventListener("_navigate", handler);
     };
-  }, [el, onNavigate]);
+  }, [onNavigate]);
   return /* @__PURE__ */ jsxs(
     "goa-work-side-menu",
     {
@@ -4460,6 +4458,51 @@ function GoabWorkSideNotificationPanel({
     }
   );
 }
+const STORAGE_KEY = "goab-theme";
+const ATTRIBUTE = "data-theme";
+const GoabThemeContext = createContext(null);
+function readInitialMode(defaultMode) {
+  if (typeof window === "undefined") return defaultMode;
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+  }
+  const fromAttribute = document.documentElement.getAttribute(ATTRIBUTE);
+  if (fromAttribute === "light" || fromAttribute === "dark") return fromAttribute;
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+  return defaultMode;
+}
+function GoabThemeProvider({
+  children,
+  defaultMode = "light"
+}) {
+  const [mode, setModeState] = useState(
+    () => readInitialMode(defaultMode)
+  );
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute(ATTRIBUTE, mode);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, mode);
+    } catch {
+    }
+  }, [mode]);
+  const setMode = useCallback((next) => {
+    setModeState(next);
+  }, []);
+  const toggle = useCallback(() => {
+    setModeState((prev) => prev === "light" ? "dark" : "light");
+  }, []);
+  return /* @__PURE__ */ jsx(GoabThemeContext.Provider, { value: { mode, setMode, toggle }, children });
+}
+function useTheme() {
+  const ctx = useContext(GoabThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a GoabThemeProvider");
+  }
+  return ctx;
+}
 export {
   GoALinkButton,
   GoabAccordion,
@@ -4549,6 +4592,7 @@ export {
   GoabText,
   GoabTextArea,
   GoabTextArea as GoabTextarea,
+  GoabThemeProvider,
   GoabThreeColumnLayout,
   GoabTooltip,
   GoabTwoColumnLayout,
@@ -4557,6 +4601,7 @@ export {
   GoabWorkSideMenuItem,
   GoabWorkSideNotificationItem,
   GoabWorkSideNotificationPanel,
-  usePublicFormController
+  usePublicFormController,
+  useTheme
 };
 //# sourceMappingURL=index.mjs.map