@rufous/ui 0.1.63 → 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/Buttons/addButton.js

@@ -1,6 +1,7 @@
 import {
   addButton_default
 } from "../chunk-U7SARO5B.js";
+import "../chunk-LI4N7JWK.js";
 export {
   addButton_default as default
 };

package/dist/Buttons/cancelButton.js

@@ -1,6 +1,7 @@
 import {
   cancelButton_default
 } from "../chunk-BMMDUQDJ.js";
+import "../chunk-LI4N7JWK.js";
 export {
   cancelButton_default as default
 };

package/dist/Buttons/index.cjs

@@ -48,7 +48,7 @@ var React3 = __toESM(require("react"), 1);
 
 // lib/Progress/circularProgress.tsx
 var React2 = __toESM(require("react"), 1);
-var CircularProgess = ({
+var CircularProgress = ({
   size = 50,
   color = "#a81c08",
   ...props
@@ -72,7 +72,7 @@ var CircularProgess = ({
     ))
   );
 };
-var circularProgress_default = CircularProgess;
+var circularProgress_default = CircularProgress;
 
 // lib/Buttons/submitButton.tsx
 var SubmitButton = ({

package/dist/Buttons/index.js

@@ -10,8 +10,9 @@ import {
 } from "../chunk-R3GARAVJ.js";
 import {
   submitButton_default
-} from "../chunk-7YKG3WYS.js";
-import "../chunk-YRFUVQDN.js";
+} from "../chunk-YRLN3TBF.js";
+import "../chunk-CTBYVXFP.js";
+import "../chunk-LI4N7JWK.js";
 export {
   addButton_default as AddButton,
   cancelButton_default as CancelButton,

package/dist/Buttons/stdButton.js

@@ -1,6 +1,7 @@
 import {
   stdButton_default
 } from "../chunk-R3GARAVJ.js";
+import "../chunk-LI4N7JWK.js";
 export {
   stdButton_default as default
 };

package/dist/Buttons/submitButton.cjs

@@ -36,7 +36,7 @@ var React2 = __toESM(require("react"), 1);
 
 // lib/Progress/circularProgress.tsx
 var React = __toESM(require("react"), 1);
-var CircularProgess = ({
+var CircularProgress = ({
   size = 50,
   color = "#a81c08",
   ...props
@@ -60,7 +60,7 @@ var CircularProgess = ({
     ))
   );
 };
-var circularProgress_default = CircularProgess;
+var circularProgress_default = CircularProgress;
 
 // lib/Buttons/submitButton.tsx
 var SubmitButton = ({

package/dist/Buttons/submitButton.js

@@ -1,7 +1,8 @@
 import {
   submitButton_default
-} from "../chunk-7YKG3WYS.js";
-import "../chunk-YRFUVQDN.js";
+} from "../chunk-YRLN3TBF.js";
+import "../chunk-CTBYVXFP.js";
+import "../chunk-LI4N7JWK.js";
 export {
   submitButton_default as default
 };

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
@@ -43,7 +43,7 @@ var Checkbox = ({
   style
 }) => {
   const handleChange = (e) => {
-    onChange(e.target.checked);
+    if (onChange) onChange(e.target.checked);
   };
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "checkbox-wrapper-13" }, /* @__PURE__ */ import_react.default.createElement("label", { className: `${className}`, style }, /* @__PURE__ */ import_react.default.createElement(
     "input",

package/dist/CheckBoxes/CheckBox.js

@@ -1,28 +1,7 @@
-// lib/CheckBoxes/CheckBox.jsx
-import React from "react";
-var Checkbox = ({
-  id,
-  label,
-  checked,
-  onChange,
-  disabled = false,
-  className = "",
-  style
-}) => {
-  const handleChange = (e) => {
-    onChange(e.target.checked);
-  };
-  return /* @__PURE__ */ React.createElement("div", { className: "checkbox-wrapper-13" }, /* @__PURE__ */ React.createElement("label", { className: `${className}`, style }, /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      id,
-      type: "checkbox",
-      checked,
-      onChange: handleChange,
-      disabled
-    }
-  ), label && /* @__PURE__ */ React.createElement("span", { className: "checkbox-label" }, label)));
-};
+import {
+  Checkbox
+} from "../chunk-NEGQXBQV.js";
+import "../chunk-LI4N7JWK.js";
 export {
   Checkbox
 };

package/dist/Contexts/rufousThemeProvider.cjs

@@ -37,133 +37,165 @@ var import_react = __toESM(require("react"), 1);
 
 // lib/utils/constants.ts
 var APP_THEMES = {
-  default: {
-    name: "Default",
-    primaryColor: "#707070",
-    secondaryColor: "#e0e0e0",
-    backgroundColor: "#f5f5f5",
-    surfaceColor: "#ffffff",
-    iconColor: "#707070",
-    textColor: "#2d2d2d",
-    textSecondaryColor: "#6f6f6f",
-    borderColor: "#dcdcdc",
-    hoverColor: "#d4d4d4",
-    activeColor: "#5a5a5a",
-    button: {
-      background: "#707070",
-      text: "#ffffff",
-      hoverBackground: "#5f5f5f",
-      disabledBackground: "#cfcfcf"
-    },
-    input: {
-      background: "#ffffff",
-      text: "#2d2d2d",
-      border: "#ccc",
-      placeholder: "#999",
-      focusBorder: "#707070"
-    },
-    card: {
-      background: "#ffffff",
-      shadow: "0 1px 3px rgba(0,0,0,0.1)"
-    },
-    sidebar: {
-      background: "#e8e8e8",
-      text: "#2d2d2d",
-      hover: "#dcdcdc"
-    },
-    success: "#4CAF50",
-    warning: "#FFC107",
-    error: "#F44336"
-  },
   rufous: {
     name: "Rufous",
-    primaryColor: "#a81c08",
-    secondaryColor: "#f7d4cc",
-    backgroundColor: "#fff8f7",
-    surfaceColor: "#fff",
-    iconColor: "#a81c08",
-    textColor: "#2d2d2d",
-    textSecondaryColor: "#6f6f6f",
-    borderColor: "#e5e5e5",
-    hoverColor: "#f3c2b9",
-    activeColor: "#c01708",
-    button: {
-      background: "#a81c08",
-      text: "#ffffff",
-      hoverBackground: "#8f1907",
-      disabledBackground: "#f4cccc"
-    },
-    input: {
+    light: {
+      primary: "#a41b06",
+      secondary: "#8b1605",
       background: "#ffffff",
+      surface: "#ffffff",
       text: "#2d2d2d",
-      border: "#ccc",
-      placeholder: "#999",
-      focusBorder: "#a81c08"
-    },
-    card: {
-      background: "#ffffff",
-      shadow: "0 1px 3px rgba(0,0,0,0.1)"
+      textSecondary: "#666666",
+      border: "#e0e0e0",
+      hover: "#fff5f5",
+      selection: "#fce4ec",
+      icon: "#a41b06",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
-    sidebar: {
-      background: "#fff0ed",
-      text: "#2d2d2d",
-      hover: "#f5e0dc"
+    dark: {
+      primary: "#dc2626",
+      secondary: "#a41b06",
+      background: "#121212",
+      surface: "#1e1e1e",
+      text: "#f5f5f5",
+      textSecondary: "#b0b0b0",
+      border: "#333333",
+      hover: "#2d1a1a",
+      selection: "#4a1212",
+      icon: "#dc2626",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    }
+  },
+  slate: {
+    name: "Slate",
+    light: {
+      primary: "#334155",
+      secondary: "#475569",
+      background: "#f8fafc",
+      surface: "#ffffff",
+      text: "#0f172a",
+      textSecondary: "#64748b",
+      border: "#e2e8f0",
+      hover: "#f1f5f9",
+      selection: "#e0f2fe",
+      icon: "#334155",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
-    success: "#4CAF50",
-    warning: "#FFC107",
-    error: "#F44336"
+    dark: {
+      primary: "#94a3b8",
+      secondary: "#64748b",
+      background: "#0f172a",
+      surface: "#1e293b",
+      text: "#f1f5f9",
+      textSecondary: "#94a3b8",
+      border: "#334155",
+      hover: "#1e293b",
+      selection: "#0c4a6e",
+      icon: "#94a3b8",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    }
   }
 };
 
 // lib/Contexts/rufousThemeProvider.tsx
 var RufousThemeContext = (0, import_react.createContext)(null);
 var RufousThemeProvider = ({ children }) => {
-  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);
-    }
-  };
+  const [colorScheme, setColorScheme] = (0, import_react.useState)("rufous");
+  const [mode, setMode] = (0, import_react.useState)("light");
   (0, import_react.useEffect)(() => {
-    getGeneralSettings();
+    const savedScheme = localStorage.getItem("colorScheme") || "rufous";
+    const savedMode = localStorage.getItem("themeMode") || "light";
+    setColorScheme(savedScheme);
+    setMode(savedMode);
   }, []);
-  const fullTheme = (0, import_react.useMemo)(() => {
+  const themeVars = (0, import_react.useMemo)(() => {
+    const config = APP_THEMES[colorScheme][mode];
     return {
-      themeKey: previewThemeKey || settings.theme,
-      customStyles: APP_THEMES[previewThemeKey || settings.theme]
+      "--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,
+      "--background-color": config.background,
+      "--text-color": config.text,
+      "--border-color": config.border,
+      "--surface-color": config.surface
     };
-  }, [previewThemeKey, settings]);
-  const previewTheme = (key) => setPreviewThemeKey(key);
-  const saveTheme = (inputKey) => {
-    const key = inputKey || previewThemeKey || settings.theme;
-    localStorage.setItem("theme", key);
-    setCommittedThemeKey(key);
+  }, [colorScheme, mode]);
+  const toggleMode = () => {
+    const newMode = mode === "light" ? "dark" : "light";
+    setMode(newMode);
+  };
+  const changeScheme = (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);
+    }
   };
-  const cancelTheme = () => setPreviewThemeKey(committedThemeKey);
   return /* @__PURE__ */ import_react.default.createElement(
     RufousThemeContext.Provider,
     {
       value: {
-        theme: fullTheme,
-        previewTheme,
+        colorScheme,
+        mode,
+        toggleMode,
+        changeScheme,
+        previewTheme: changeScheme,
+        updateSettings,
         saveTheme,
-        cancelTheme,
-        currentThemeKey: previewThemeKey,
-        committedThemeKey,
-        settings,
-        updateSettings: (v) => setSettings(v)
+        theme: APP_THEMES[colorScheme][mode],
+        // Direct access to current theme config
+        themeConfig: APP_THEMES[colorScheme][mode]
       }
     },
     /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        className: `theme-${previewThemeKey || committedThemeKey || "default"}`
+        className: `rufous-theme-root scheme-${colorScheme} mode-${mode}`,
+        style: themeVars
       },
       children
     )

package/dist/Contexts/rufousThemeProvider.js

@@ -1,8 +1,9 @@
 import {
   RufousThemeProvider,
   useRufousTheme
-} from "../chunk-BCGCLMKA.js";
-import "../chunk-2FHTGYR4.js";
+} from "../chunk-HMG3FW2Q.js";
+import "../chunk-YXPBXCY5.js";
+import "../chunk-LI4N7JWK.js";
 export {
   RufousThemeProvider,
   useRufousTheme