@rufous/ui 0.2.0-beta.0 → 0.2.0-beta.1

package/README.md

@@ -1,5 +1,9 @@
 # @rufous/ui
 
+> [!CAUTION]
+> **Stability: Experimental / Beta**
+> This package is currently in early development. Breaking changes, bugs, and API updates are expected. We recommend using it in non-critical environments until a stable `1.0.0` version is released.
+
 A lightweight React UI component library with theming, buttons, inputs, dialogs, progress and a rich icon set.
 
 ---

package/dist/CheckBoxes/CheckBox.cjs

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// lib/CheckBoxes/CheckBox.jsx
+// lib/CheckBoxes/CheckBox.tsx
 var CheckBox_exports = {};
 __export(CheckBox_exports, {
   Checkbox: () => Checkbox

package/dist/CheckBoxes/CheckBox.js

@@ -1,6 +1,6 @@
 import {
   Checkbox
-} from "../chunk-X357WQOT.js";
+} from "../chunk-NEGQXBQV.js";
 import "../chunk-LI4N7JWK.js";
 export {
   Checkbox

package/dist/Contexts/rufousThemeProvider.cjs

@@ -49,7 +49,14 @@ var APP_THEMES = {
       border: "#e0e0e0",
       hover: "#fff5f5",
       selection: "#fce4ec",
-      icon: "#a41b06"
+      icon: "#a41b06",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
     dark: {
       primary: "#dc2626",
@@ -61,7 +68,14 @@ var APP_THEMES = {
       border: "#333333",
       hover: "#2d1a1a",
       selection: "#4a1212",
-      icon: "#dc2626"
+      icon: "#dc2626",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     }
   },
   slate: {
@@ -76,7 +90,14 @@ var APP_THEMES = {
       border: "#e2e8f0",
       hover: "#f1f5f9",
       selection: "#e0f2fe",
-      icon: "#334155"
+      icon: "#334155",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
     dark: {
       primary: "#94a3b8",
@@ -88,7 +109,14 @@ var APP_THEMES = {
       border: "#334155",
       hover: "#1e293b",
       selection: "#0c4a6e",
-      icon: "#94a3b8"
+      icon: "#94a3b8",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     }
   }
 };
@@ -107,26 +135,45 @@ var RufousThemeProvider = ({ children }) => {
   const themeVars = (0, import_react.useMemo)(() => {
     const config = APP_THEMES[colorScheme][mode];
     return {
+      "--rufous-primary-color": config.primary,
+      "--rufous-secondary-color": config.secondary,
+      "--rufous-background-color": config.background,
+      "--rufous-surface-color": config.surface,
+      "--rufous-text-color": config.text,
+      "--rufous-text-secondary": config.textSecondary,
+      "--rufous-border-color": config.border,
+      "--rufous-hover-color": config.hover,
+      "--rufous-selection-color": config.selection,
+      "--rufous-icon-color": config.icon,
+      // Keep legacy variables for backward compatibility during transition
       "--primary-color": config.primary,
-      "--secondary-color": config.secondary,
       "--background-color": config.background,
-      "--surface-color": config.surface,
       "--text-color": config.text,
-      "--text-secondary": config.textSecondary,
       "--border-color": config.border,
-      "--hover-color": config.hover,
-      "--selection-color": config.selection,
-      "--icon-color": config.icon
+      "--surface-color": config.surface
     };
   }, [colorScheme, mode]);
   const toggleMode = () => {
     const newMode = mode === "light" ? "dark" : "light";
     setMode(newMode);
-    localStorage.setItem("themeMode", newMode);
   };
   const changeScheme = (scheme) => {
-    setColorScheme(scheme);
-    localStorage.setItem("colorScheme", scheme);
+    if (APP_THEMES[scheme]) {
+      setColorScheme(scheme);
+    }
+  };
+  const saveTheme = () => {
+    localStorage.setItem("colorScheme", colorScheme);
+    localStorage.setItem("themeMode", mode);
+  };
+  const updateSettings = (settings) => {
+    if (!settings) return;
+    if (settings.theme && APP_THEMES[settings.theme]) {
+      setColorScheme(settings.theme);
+    }
+    if (settings.mode) {
+      setMode(settings.mode);
+    }
   };
   return /* @__PURE__ */ import_react.default.createElement(
     RufousThemeContext.Provider,
@@ -136,6 +183,11 @@ var RufousThemeProvider = ({ children }) => {
         mode,
         toggleMode,
         changeScheme,
+        previewTheme: changeScheme,
+        updateSettings,
+        saveTheme,
+        theme: APP_THEMES[colorScheme][mode],
+        // Direct access to current theme config
         themeConfig: APP_THEMES[colorScheme][mode]
       }
     },

package/dist/Contexts/rufousThemeProvider.js

@@ -1,8 +1,8 @@
 import {
   RufousThemeProvider,
   useRufousTheme
-} from "../chunk-WNZLBFLQ.js";
-import "../chunk-QGXXOQJF.js";
+} from "../chunk-HMG3FW2Q.js";
+import "../chunk-YXPBXCY5.js";
 import "../chunk-LI4N7JWK.js";
 export {
   RufousThemeProvider,