@rufous/ui 0.1.64 → 0.1.66

package/dist/Contexts/rufousThemeProvider.cjs

@@ -191,47 +191,55 @@ var APP_THEMES = {
 // lib/Contexts/rufousThemeProvider.tsx
 var RufousThemeContext = (0, import_react.createContext)(null);
 var RufousThemeProvider = ({ children }) => {
-  const [colorScheme, setColorScheme] = (0, import_react.useState)("rufous");
-  const [mode, setMode] = (0, import_react.useState)("light");
+  const [committedThemeKey, setCommittedThemeKey] = (0, import_react.useState)("default");
+  const [previewThemeKey, setPreviewThemeKey] = (0, import_react.useState)("default");
+  const [settings, setSettings] = (0, import_react.useState)(null);
+  const getGeneralSettings = async () => {
+    try {
+      const theme = localStorage.getItem("theme") || "default";
+      setCommittedThemeKey(theme);
+      setPreviewThemeKey(theme);
+    } catch (err) {
+      console.error("Error fetching general settings:", err);
+    }
+  };
   (0, import_react.useEffect)(() => {
-    const savedScheme = localStorage.getItem("colorScheme") || "rufous";
-    const savedMode = localStorage.getItem("themeMode") || "light";
-    setColorScheme(savedScheme);
-    setMode(savedMode);
+    getGeneralSettings();
   }, []);
-  const toggleMode = () => {
-    const newMode = mode === "light" ? "dark" : "light";
-    setMode(newMode);
-    localStorage.setItem("themeMode", newMode);
-  };
-  const changeScheme = (scheme) => {
-    setColorScheme(scheme);
-    localStorage.setItem("colorScheme", scheme);
-  };
-  const saveTheme = () => {
-    localStorage.setItem("themeMode", mode);
-    localStorage.setItem("colorScheme", colorScheme);
-  };
-  const updateSettings = (settings) => {
-    if (settings.theme) setColorScheme(settings.theme);
-    if (settings.mode) setMode(settings.mode);
+  const fullTheme = (0, import_react.useMemo)(() => {
+    return {
+      themeKey: previewThemeKey || settings.theme,
+      customStyles: APP_THEMES[previewThemeKey || settings.theme]
+    };
+  }, [previewThemeKey, settings]);
+  const previewTheme = (key) => setPreviewThemeKey(key);
+  const saveTheme = (inputKey) => {
+    const key = inputKey || previewThemeKey || settings.theme;
+    localStorage.setItem("theme", key);
+    setCommittedThemeKey(key);
   };
+  const cancelTheme = () => setPreviewThemeKey(committedThemeKey);
   return /* @__PURE__ */ import_react.default.createElement(
     RufousThemeContext.Provider,
     {
       value: {
-        colorScheme,
-        mode,
-        toggleMode,
-        changeScheme,
-        previewTheme: changeScheme,
+        theme: fullTheme,
+        previewTheme,
         saveTheme,
-        updateSettings,
-        theme: APP_THEMES[colorScheme][mode],
-        themeConfig: APP_THEMES[colorScheme][mode]
+        cancelTheme,
+        currentThemeKey: previewThemeKey,
+        committedThemeKey,
+        settings,
+        updateSettings: (v) => setSettings(v)
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `rufous-theme-root scheme-${colorScheme} mode-${mode}` }, children)
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `theme-${previewThemeKey || committedThemeKey || "default"}`
+      },
+      children
+    )
   );
 };
 var useRufousTheme = () => (0, import_react.useContext)(RufousThemeContext);

package/dist/Contexts/rufousThemeProvider.js

@@ -1,7 +1,7 @@
 import {
   RufousThemeProvider,
   useRufousTheme
-} from "../chunk-CSQGNUVU.js";
+} from "../chunk-BOE27BFQ.js";
 import "../chunk-S7BNFVQO.js";
 import "../chunk-LI4N7JWK.js";
 export {

package/dist/Dialogs/BaseDialog.js

@@ -1,6 +1,6 @@
 import {
   BaseDialog_default
-} from "../chunk-P3I6CP2I.js";
+} from "../chunk-4GPYGFPP.js";
 import "../chunk-E5RTHYCU.js";
 import "../chunk-EZI3QGYJ.js";
 import "../chunk-QTGVW36I.js";
@@ -54,24 +54,24 @@ import "../chunk-XPJVVKOU.js";
 import "../chunk-GL43GPEM.js";
 import "../chunk-FZCFFVXW.js";
 import "../chunk-N26C33E6.js";
+import "../chunk-EB6MPFGC.js";
+import "../chunk-UPCMMCPQ.js";
 import "../chunk-AH6RCYDL.js";
 import "../chunk-3IBCGGN3.js";
 import "../chunk-MNPAE2ZF.js";
 import "../chunk-Q5XKCUE3.js";
-import "../chunk-7KRG7VNW.js";
-import "../chunk-MGFGSPHM.js";
-import "../chunk-UPCMMCPQ.js";
 import "../chunk-X357WQOT.js";
+import "../chunk-7KRG7VNW.js";
+import "../chunk-J6E3UO2W.js";
 import "../chunk-GJGRMMAQ.js";
 import "../chunk-66HHM7VI.js";
-import "../chunk-J6E3UO2W.js";
 import "../chunk-QPGJCRBS.js";
 import "../chunk-U7SARO5B.js";
 import "../chunk-BMMDUQDJ.js";
 import "../chunk-R3GARAVJ.js";
 import "../chunk-YRLN3TBF.js";
 import "../chunk-CTBYVXFP.js";
-import "../chunk-CSQGNUVU.js";
+import "../chunk-BOE27BFQ.js";
 import "../chunk-S7BNFVQO.js";
 import "../chunk-LI4N7JWK.js";
 export {

package/dist/Dialogs/index.js

@@ -1,6 +1,6 @@
 import {
   BaseDialog_default
-} from "../chunk-P3I6CP2I.js";
+} from "../chunk-4GPYGFPP.js";
 import "../chunk-E5RTHYCU.js";
 import "../chunk-EZI3QGYJ.js";
 import "../chunk-QTGVW36I.js";
@@ -54,24 +54,24 @@ import "../chunk-XPJVVKOU.js";
 import "../chunk-GL43GPEM.js";
 import "../chunk-FZCFFVXW.js";
 import "../chunk-N26C33E6.js";
+import "../chunk-EB6MPFGC.js";
+import "../chunk-UPCMMCPQ.js";
 import "../chunk-AH6RCYDL.js";
 import "../chunk-3IBCGGN3.js";
 import "../chunk-MNPAE2ZF.js";
 import "../chunk-Q5XKCUE3.js";
-import "../chunk-7KRG7VNW.js";
-import "../chunk-MGFGSPHM.js";
-import "../chunk-UPCMMCPQ.js";
 import "../chunk-X357WQOT.js";
+import "../chunk-7KRG7VNW.js";
+import "../chunk-J6E3UO2W.js";
 import "../chunk-GJGRMMAQ.js";
 import "../chunk-66HHM7VI.js";
-import "../chunk-J6E3UO2W.js";
 import "../chunk-QPGJCRBS.js";
 import "../chunk-U7SARO5B.js";
 import "../chunk-BMMDUQDJ.js";
 import "../chunk-R3GARAVJ.js";
 import "../chunk-YRLN3TBF.js";
 import "../chunk-CTBYVXFP.js";
-import "../chunk-CSQGNUVU.js";
+import "../chunk-BOE27BFQ.js";
 import "../chunk-S7BNFVQO.js";
 import "../chunk-LI4N7JWK.js";
 export {

package/dist/TextFields/AddressLookup.js

@@ -1,9 +1,9 @@
 import {
   AddressLookup_default
-} from "../chunk-MGFGSPHM.js";
+} from "../chunk-EB6MPFGC.js";
 import "../chunk-UPCMMCPQ.js";
 import "../chunk-CTBYVXFP.js";
-import "../chunk-CSQGNUVU.js";
+import "../chunk-BOE27BFQ.js";
 import "../chunk-S7BNFVQO.js";
 import "../chunk-LI4N7JWK.js";
 export {

package/dist/{chunk-P3I6CP2I.js → chunk-4GPYGFPP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-Q5XKCUE3.js";
 import {
   useRufousTheme
-} from "./chunk-CSQGNUVU.js";
+} from "./chunk-BOE27BFQ.js";
 
 // lib/Dialogs/BaseDialog.tsx
 import * as React from "react";

package/dist/chunk-BOE27BFQ.js

@@ -0,0 +1,71 @@
+import {
+  APP_THEMES
+} from "./chunk-S7BNFVQO.js";
+
+// lib/Contexts/rufousThemeProvider.tsx
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+var RufousThemeContext = createContext(null);
+var RufousThemeProvider = ({ children }) => {
+  const [committedThemeKey, setCommittedThemeKey] = useState("default");
+  const [previewThemeKey, setPreviewThemeKey] = useState("default");
+  const [settings, setSettings] = useState(null);
+  const getGeneralSettings = async () => {
+    try {
+      const theme = localStorage.getItem("theme") || "default";
+      setCommittedThemeKey(theme);
+      setPreviewThemeKey(theme);
+    } catch (err) {
+      console.error("Error fetching general settings:", err);
+    }
+  };
+  useEffect(() => {
+    getGeneralSettings();
+  }, []);
+  const fullTheme = useMemo(() => {
+    return {
+      themeKey: previewThemeKey || settings.theme,
+      customStyles: APP_THEMES[previewThemeKey || settings.theme]
+    };
+  }, [previewThemeKey, settings]);
+  const previewTheme = (key) => setPreviewThemeKey(key);
+  const saveTheme = (inputKey) => {
+    const key = inputKey || previewThemeKey || settings.theme;
+    localStorage.setItem("theme", key);
+    setCommittedThemeKey(key);
+  };
+  const cancelTheme = () => setPreviewThemeKey(committedThemeKey);
+  return /* @__PURE__ */ React.createElement(
+    RufousThemeContext.Provider,
+    {
+      value: {
+        theme: fullTheme,
+        previewTheme,
+        saveTheme,
+        cancelTheme,
+        currentThemeKey: previewThemeKey,
+        committedThemeKey,
+        settings,
+        updateSettings: (v) => setSettings(v)
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `theme-${previewThemeKey || committedThemeKey || "default"}`
+      },
+      children
+    )
+  );
+};
+var useRufousTheme = () => useContext(RufousThemeContext);
+
+export {
+  RufousThemeProvider,
+  useRufousTheme
+};

package/dist/{chunk-MGFGSPHM.js → chunk-EB6MPFGC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-CTBYVXFP.js";
 import {
   useRufousTheme
-} from "./chunk-CSQGNUVU.js";
+} from "./chunk-BOE27BFQ.js";
 
 // lib/TextFields/AddressLookup.tsx
 import React, { useState, useRef, useEffect } from "react";

package/dist/main.cjs

@@ -29973,47 +29973,55 @@ var BaseDialog_default = BaseDialog;
 var import_react14 = __toESM(require("react"), 1);
 var RufousThemeContext = (0, import_react14.createContext)(null);
 var RufousThemeProvider = ({ children }) => {
-  const [colorScheme, setColorScheme] = (0, import_react14.useState)("rufous");
-  const [mode, setMode] = (0, import_react14.useState)("light");
+  const [committedThemeKey, setCommittedThemeKey] = (0, import_react14.useState)("default");
+  const [previewThemeKey, setPreviewThemeKey] = (0, import_react14.useState)("default");
+  const [settings, setSettings] = (0, import_react14.useState)(null);
+  const getGeneralSettings = async () => {
+    try {
+      const theme = localStorage.getItem("theme") || "default";
+      setCommittedThemeKey(theme);
+      setPreviewThemeKey(theme);
+    } catch (err) {
+      console.error("Error fetching general settings:", err);
+    }
+  };
   (0, import_react14.useEffect)(() => {
-    const savedScheme = localStorage.getItem("colorScheme") || "rufous";
-    const savedMode = localStorage.getItem("themeMode") || "light";
-    setColorScheme(savedScheme);
-    setMode(savedMode);
+    getGeneralSettings();
   }, []);
-  const toggleMode = () => {
-    const newMode = mode === "light" ? "dark" : "light";
-    setMode(newMode);
-    localStorage.setItem("themeMode", newMode);
-  };
-  const changeScheme = (scheme) => {
-    setColorScheme(scheme);
-    localStorage.setItem("colorScheme", scheme);
-  };
-  const saveTheme = () => {
-    localStorage.setItem("themeMode", mode);
-    localStorage.setItem("colorScheme", colorScheme);
-  };
-  const updateSettings = (settings) => {
-    if (settings.theme) setColorScheme(settings.theme);
-    if (settings.mode) setMode(settings.mode);
+  const fullTheme = (0, import_react14.useMemo)(() => {
+    return {
+      themeKey: previewThemeKey || settings.theme,
+      customStyles: APP_THEMES[previewThemeKey || settings.theme]
+    };
+  }, [previewThemeKey, settings]);
+  const previewTheme = (key) => setPreviewThemeKey(key);
+  const saveTheme = (inputKey) => {
+    const key = inputKey || previewThemeKey || settings.theme;
+    localStorage.setItem("theme", key);
+    setCommittedThemeKey(key);
   };
+  const cancelTheme = () => setPreviewThemeKey(committedThemeKey);
   return /* @__PURE__ */ import_react14.default.createElement(
     RufousThemeContext.Provider,
     {
       value: {
-        colorScheme,
-        mode,
-        toggleMode,
-        changeScheme,
-        previewTheme: changeScheme,
+        theme: fullTheme,
+        previewTheme,
         saveTheme,
-        updateSettings,
-        theme: APP_THEMES[colorScheme][mode],
-        themeConfig: APP_THEMES[colorScheme][mode]
+        cancelTheme,
+        currentThemeKey: previewThemeKey,
+        committedThemeKey,
+        settings,
+        updateSettings: (v) => setSettings(v)
       }
     },
-    /* @__PURE__ */ import_react14.default.createElement("div", { className: `rufous-theme-root scheme-${colorScheme} mode-${mode}` }, children)
+    /* @__PURE__ */ import_react14.default.createElement(
+      "div",
+      {
+        className: `theme-${previewThemeKey || committedThemeKey || "default"}`
+      },
+      children
+    )
   );
 };
 var useRufousTheme = () => (0, import_react14.useContext)(RufousThemeContext);

package/dist/main.js

@@ -1,6 +1,6 @@
 import {
   BaseDialog_default
-} from "./chunk-P3I6CP2I.js";
+} from "./chunk-4GPYGFPP.js";
 import "./chunk-E5RTHYCU.js";
 import {
   unsubscribeIcon_default
@@ -158,6 +158,12 @@ import {
 import {
   downloadPdfIcon_default
 } from "./chunk-N26C33E6.js";
+import {
+  AddressLookup_default
+} from "./chunk-EB6MPFGC.js";
+import {
+  FloatingInput
+} from "./chunk-UPCMMCPQ.js";
 import {
   activateUserIcon_default
 } from "./chunk-AH6RCYDL.js";
@@ -170,23 +176,17 @@ import {
 import {
   closeIcon_default
 } from "./chunk-Q5XKCUE3.js";
-import "./chunk-7KRG7VNW.js";
-import {
-  AddressLookup_default
-} from "./chunk-MGFGSPHM.js";
-import {
-  FloatingInput
-} from "./chunk-UPCMMCPQ.js";
 import {
   Checkbox
 } from "./chunk-X357WQOT.js";
+import "./chunk-7KRG7VNW.js";
+import {
+  DataGrid
+} from "./chunk-J6E3UO2W.js";
 import "./chunk-GJGRMMAQ.js";
 import {
   RichTextEditor
 } from "./chunk-66HHM7VI.js";
-import {
-  DataGrid
-} from "./chunk-J6E3UO2W.js";
 import "./chunk-QPGJCRBS.js";
 import {
   addButton_default
@@ -206,7 +206,7 @@ import {
 import {
   RufousThemeProvider,
   useRufousTheme
-} from "./chunk-CSQGNUVU.js";
+} from "./chunk-BOE27BFQ.js";
 import {
   APP_THEMES
 } from "./chunk-S7BNFVQO.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.64",
+  "version": "0.1.66",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/style.css",

package/dist/chunk-CSQGNUVU.js

@@ -1,62 +0,0 @@
-import {
-  APP_THEMES
-} from "./chunk-S7BNFVQO.js";
-
-// lib/Contexts/rufousThemeProvider.tsx
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useState
-} from "react";
-var RufousThemeContext = createContext(null);
-var RufousThemeProvider = ({ children }) => {
-  const [colorScheme, setColorScheme] = useState("rufous");
-  const [mode, setMode] = useState("light");
-  useEffect(() => {
-    const savedScheme = localStorage.getItem("colorScheme") || "rufous";
-    const savedMode = localStorage.getItem("themeMode") || "light";
-    setColorScheme(savedScheme);
-    setMode(savedMode);
-  }, []);
-  const toggleMode = () => {
-    const newMode = mode === "light" ? "dark" : "light";
-    setMode(newMode);
-    localStorage.setItem("themeMode", newMode);
-  };
-  const changeScheme = (scheme) => {
-    setColorScheme(scheme);
-    localStorage.setItem("colorScheme", scheme);
-  };
-  const saveTheme = () => {
-    localStorage.setItem("themeMode", mode);
-    localStorage.setItem("colorScheme", colorScheme);
-  };
-  const updateSettings = (settings) => {
-    if (settings.theme) setColorScheme(settings.theme);
-    if (settings.mode) setMode(settings.mode);
-  };
-  return /* @__PURE__ */ React.createElement(
-    RufousThemeContext.Provider,
-    {
-      value: {
-        colorScheme,
-        mode,
-        toggleMode,
-        changeScheme,
-        previewTheme: changeScheme,
-        saveTheme,
-        updateSettings,
-        theme: APP_THEMES[colorScheme][mode],
-        themeConfig: APP_THEMES[colorScheme][mode]
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: `rufous-theme-root scheme-${colorScheme} mode-${mode}` }, children)
-  );
-};
-var useRufousTheme = () => useContext(RufousThemeContext);
-
-export {
-  RufousThemeProvider,
-  useRufousTheme
-};