@aehrc/smart-forms-renderer 1.0.0-alpha.93 → 1.0.0-alpha.94

package/lib/theme/RendererDynamicThemeProvider.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+type ThemeMode = 'light' | 'dark' | 'system';
+interface RendererThemeContextType {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    resolvedMode: 'light' | 'dark';
+}
+export type { RendererThemeContextType };
+declare const RendererThemeContext: React.Context<RendererThemeContextType | undefined>;
+export { RendererThemeContext };
+export interface RendererDynamicThemeProviderProps {
+    children: ReactNode;
+    /** Initial theme mode. Defaults to 'system' */
+    defaultMode?: ThemeMode;
+    /** Storage key for persisting theme preference. Set to null to disable persistence */
+    storageKey?: string | null;
+}
+/**
+ * Advanced theme provider with dynamic theme switching and system theme detection.
+ * Provides theme context for child components to access and control theme mode.
+ */
+export declare function RendererDynamicThemeProvider({ children, defaultMode, storageKey }: RendererDynamicThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export default RendererDynamicThemeProvider;

package/lib/theme/RendererDynamicThemeProvider.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from 'react';
+import { createTheme, StyledEngineProvider, ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import { rendererThemeComponentOverrides } from './overrides/rendererThemeComponentOverrides';
+import { rendererLightThemeOptions, rendererDarkThemeOptions } from './rendererThemeOptions';
+import { ScopedCssBaseline } from '@mui/material';
+const RendererThemeContext = createContext(undefined);
+export { RendererThemeContext };
+/**
+ * Advanced theme provider with dynamic theme switching and system theme detection.
+ * Provides theme context for child components to access and control theme mode.
+ */
+export function RendererDynamicThemeProvider({ children, defaultMode = 'system', storageKey = 'smart-forms-theme' }) {
+    const [mode, setModeState] = useState(() => {
+        if (typeof window === 'undefined')
+            return defaultMode;
+        if (storageKey) {
+            const stored = localStorage.getItem(storageKey);
+            if (stored && ['light', 'dark', 'system'].includes(stored)) {
+                return stored;
+            }
+        }
+        return defaultMode;
+    });
+    const [resolvedMode, setResolvedMode] = useState(() => {
+        if (typeof window === 'undefined')
+            return 'light';
+        if (mode === 'system') {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return mode;
+    });
+    useEffect(() => {
+        if (mode === 'system') {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const handleChange = () => {
+                setResolvedMode(mediaQuery.matches ? 'dark' : 'light');
+            };
+            // Set initial value
+            setResolvedMode(mediaQuery.matches ? 'dark' : 'light');
+            mediaQuery.addEventListener('change', handleChange);
+            return () => mediaQuery.removeEventListener('change', handleChange);
+        }
+        else {
+            setResolvedMode(mode);
+        }
+    }, [mode]);
+    const setMode = (newMode) => {
+        setModeState(newMode);
+        if (storageKey) {
+            localStorage.setItem(storageKey, newMode);
+        }
+    };
+    const themeOptions = resolvedMode === 'dark' ? rendererDarkThemeOptions : rendererLightThemeOptions;
+    const theme = createTheme(themeOptions);
+    theme.components = rendererThemeComponentOverrides(theme);
+    const contextValue = {
+        mode,
+        setMode,
+        resolvedMode
+    };
+    return (_jsx(RendererThemeContext.Provider, { value: contextValue, children: _jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(MUIThemeProvider, { theme: theme, children: _jsx(ScopedCssBaseline, { enableColorScheme: true, children: children }) }) }) }));
+}
+export default RendererDynamicThemeProvider;
+//# sourceMappingURL=RendererDynamicThemeProvider.js.map

package/lib/theme/RendererDynamicThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RendererDynamicThemeProvider.js","sourceRoot":"","sources":["../../src/theme/RendererDynamicThemeProvider.tsx"],"names":[],"mappings":"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"}

package/lib/theme/RendererThemeProvider.js

@@ -12,7 +12,7 @@ import { ScopedCssBaseline } from '@mui/material';
 export function RendererThemeProvider({ children }) {
     const theme = createTheme(rendererThemeOptions);
     theme.components = rendererThemeComponentOverrides(theme);
-    return (_jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(MUIThemeProvider, { theme: theme, children: _jsx(ScopedCssBaseline, { children: children }) }) }));
+    return (_jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(MUIThemeProvider, { theme: theme, children: _jsx(ScopedCssBaseline, { enableColorScheme: true, children: children }) }) }));
 }
 export default RendererThemeProvider;
 //# sourceMappingURL=RendererThemeProvider.js.map

package/lib/theme/RendererThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RendererThemeProvider.js","sourceRoot":"","sources":["../../src/theme/RendererThemeProvider.tsx"],"names":[],"mappings":";AAmBA,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,aAAa,IAAI,gBAAgB,EAClC,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,+BAA+B,EAAE,MAAM,6CAA6C,CAAC;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAAE,QAAQ,EAA2B;IACzE,MAAM,KAAK,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAChD,KAAK,CAAC,UAAU,GAAG,+BAA+B,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,KAAC,oBAAoB,IAAC,WAAW,kBAC/B,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,YAC5B,KAAC,iBAAiB,cAAE,QAAQ,GAAqB,GAChC,GACE,CACxB,CAAC;AACJ,CAAC;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"RendererThemeProvider.js","sourceRoot":"","sources":["../../src/theme/RendererThemeProvider.tsx"],"names":[],"mappings":";AAmBA,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,aAAa,IAAI,gBAAgB,EAClC,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,+BAA+B,EAAE,MAAM,6CAA6C,CAAC;AAC9F,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAC,EAAE,QAAQ,EAA2B;IACzE,MAAM,KAAK,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAChD,KAAK,CAAC,UAAU,GAAG,+BAA+B,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACL,KAAC,oBAAoB,IAAC,WAAW,kBAC/B,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,YAC5B,KAAC,iBAAiB,IAAC,iBAAiB,kBAAE,QAAQ,GAAqB,GAClD,GACE,CACxB,CAAC;AACJ,CAAC;AAED,eAAe,qBAAqB,CAAC"}

package/lib/theme/RendererThemeToggle.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A simple theme toggle button that cycles through light, dark, and system themes.
+ * Must be used within a RendererDynamicThemeProvider.
+ */
+export declare function RendererThemeToggle(): import("react/jsx-runtime").JSX.Element;
+export default RendererThemeToggle;

package/lib/theme/RendererThemeToggle.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconButton, Tooltip } from '@mui/material';
+import { Brightness4 as DarkIcon, Brightness7 as LightIcon, SettingsBrightness as SystemIcon } from '@mui/icons-material';
+import { useRendererTheme } from './useRendererTheme';
+/**
+ * A simple theme toggle button that cycles through light, dark, and system themes.
+ * Must be used within a RendererDynamicThemeProvider.
+ */
+export function RendererThemeToggle() {
+    const { mode, setMode } = useRendererTheme();
+    const handleToggle = () => {
+        if (mode === 'light') {
+            setMode('dark');
+        }
+        else if (mode === 'dark') {
+            setMode('system');
+        }
+        else {
+            setMode('light');
+        }
+    };
+    const getIcon = () => {
+        switch (mode) {
+            case 'light':
+                return _jsx(LightIcon, {});
+            case 'dark':
+                return _jsx(DarkIcon, {});
+            case 'system':
+                return _jsx(SystemIcon, {});
+        }
+    };
+    const getTooltip = () => {
+        switch (mode) {
+            case 'light':
+                return 'Switch to dark mode';
+            case 'dark':
+                return 'Switch to system theme';
+            case 'system':
+                return 'Switch to light mode';
+        }
+    };
+    return (_jsx(Tooltip, { title: getTooltip(), children: _jsx(IconButton, { onClick: handleToggle, color: "inherit", children: getIcon() }) }));
+}
+export default RendererThemeToggle;
+//# sourceMappingURL=RendererThemeToggle.js.map

package/lib/theme/RendererThemeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RendererThemeToggle.js","sourceRoot":"","sources":["../../src/theme/RendererThemeToggle.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EACL,WAAW,IAAI,QAAQ,EACvB,WAAW,IAAI,SAAS,EACxB,kBAAkB,IAAI,UAAU,EACjC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;GAGG;AACH,MAAM,UAAU,mBAAmB;IACjC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,OAAO,CAAC,MAAM,CAAC,CAAC;QAClB,CAAC;aAAM,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YAC3B,OAAO,CAAC,QAAQ,CAAC,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,OAAO,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,KAAC,SAAS,KAAG,CAAC;YACvB,KAAK,MAAM;gBACT,OAAO,KAAC,QAAQ,KAAG,CAAC;YACtB,KAAK,QAAQ;gBACX,OAAO,KAAC,UAAU,KAAG,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,qBAAqB,CAAC;YAC/B,KAAK,MAAM;gBACT,OAAO,wBAAwB,CAAC;YAClC,KAAK,QAAQ;gBACX,OAAO,sBAAsB,CAAC;QAClC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAE,UAAU,EAAE,YAC1B,KAAC,UAAU,IAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAC,SAAS,YAC/C,OAAO,EAAE,GACC,GACL,CACX,CAAC;AACJ,CAAC;AAED,eAAe,mBAAmB,CAAC"}

package/lib/theme/useRendererTheme.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to access and control the renderer theme.
+ * Must be used within a RendererDynamicThemeProvider.
+ */
+export declare function useRendererTheme(): import("./RendererDynamicThemeProvider").RendererThemeContextType;

package/lib/theme/useRendererTheme.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright 2025 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useContext } from 'react';
+import { RendererThemeContext } from './RendererDynamicThemeProvider';
+/**
+ * Hook to access and control the renderer theme.
+ * Must be used within a RendererDynamicThemeProvider.
+ */
+export function useRendererTheme() {
+    const context = useContext(RendererThemeContext);
+    if (context === undefined) {
+        throw new Error('useRendererTheme must be used within a RendererDynamicThemeProvider');
+    }
+    return context;
+}
+//# sourceMappingURL=useRendererTheme.js.map

package/lib/theme/useRendererTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRendererTheme.js","sourceRoot":"","sources":["../../src/theme/useRendererTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEtE;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,qEAAqE,CAAC,CAAC;IACzF,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "1.0.0-alpha.93",
+  "version": "1.0.0-alpha.94",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

package/src/theme/RendererThemeProvider.tsx

@@ -39,7 +39,7 @@ export function RendererThemeProvider({ children }: { children: ReactNode }) {
   return (
     <StyledEngineProvider injectFirst>
       <MUIThemeProvider theme={theme}>
-        <ScopedCssBaseline>{children}</ScopedCssBaseline>
+        <ScopedCssBaseline enableColorScheme>{children}</ScopedCssBaseline>
       </MUIThemeProvider>
     </StyledEngineProvider>
   );