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

package/index.d.ts

@@ -79,3 +79,4 @@ export * from './lib/work-side-menu-group/work-side-menu-group';
 export * from './lib/work-side-menu-item/work-side-menu-item';
 export * from './lib/work-side-notification-item/work-side-notification-item';
 export * from './lib/work-side-notification-panel/work-side-notification-panel';
+export * from './lib/theme/theme-context';

package/index.js

@@ -4316,30 +4316,28 @@ function GoabWorkSideMenu({
 }) {
   const el = react.useRef(null);
   react.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]);
   react.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__ */ jsxRuntime.jsxs(
     "goa-work-side-menu",
     {
@@ -4462,6 +4460,51 @@ function GoabWorkSideNotificationPanel({
     }
   );
 }
+const STORAGE_KEY = "goab-theme";
+const ATTRIBUTE = "data-theme";
+const GoabThemeContext = react.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] = react.useState(
+    () => readInitialMode(defaultMode)
+  );
+  react.useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute(ATTRIBUTE, mode);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, mode);
+    } catch {
+    }
+  }, [mode]);
+  const setMode = react.useCallback((next) => {
+    setModeState(next);
+  }, []);
+  const toggle = react.useCallback(() => {
+    setModeState((prev) => prev === "light" ? "dark" : "light");
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(GoabThemeContext.Provider, { value: { mode, setMode, toggle }, children });
+}
+function useTheme() {
+  const ctx = react.useContext(GoabThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a GoabThemeProvider");
+  }
+  return ctx;
+}
 exports.GoALinkButton = GoALinkButton;
 exports.GoabAccordion = GoabAccordion;
 exports.GoabAppFooter = GoabAppFooter;
@@ -4550,6 +4593,7 @@ exports.GoabTemporaryNotificationCtrl = GoabTemporaryNotificationCtrl;
 exports.GoabText = GoabText;
 exports.GoabTextArea = GoabTextArea;
 exports.GoabTextarea = GoabTextArea;
+exports.GoabThemeProvider = GoabThemeProvider;
 exports.GoabThreeColumnLayout = GoabThreeColumnLayout;
 exports.GoabTooltip = GoabTooltip;
 exports.GoabTwoColumnLayout = GoabTwoColumnLayout;
@@ -4559,4 +4603,5 @@ exports.GoabWorkSideMenuItem = GoabWorkSideMenuItem;
 exports.GoabWorkSideNotificationItem = GoabWorkSideNotificationItem;
 exports.GoabWorkSideNotificationPanel = GoabWorkSideNotificationPanel;
 exports.usePublicFormController = usePublicFormController;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map