@rufous/ui 0.1.62 → 0.1.64

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

@@ -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-X357WQOT.js";
+import "../chunk-LI4N7JWK.js";
 export {
   Checkbox
 };

package/dist/Contexts/rufousThemeProvider.cjs

@@ -39,16 +39,45 @@ var import_react = __toESM(require("react"), 1);
 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",
+    light: {
+      primary: "#707070",
+      secondary: "#e0e0e0",
+      background: "#f5f5f5",
+      surface: "#ffffff",
+      text: "#2d2d2d",
+      textSecondary: "#6f6f6f",
+      border: "#dcdcdc",
+      hover: "#d4d4d4",
+      selection: "#5a5a5a",
+      icon: "#707070",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    },
+    dark: {
+      primary: "#94a3b8",
+      secondary: "#475569",
+      background: "#0f172a",
+      surface: "#1e293b",
+      text: "#f1f5f9",
+      textSecondary: "#94a3b8",
+      border: "#334155",
+      hover: "#1e293b",
+      selection: "#334155",
+      icon: "#94a3b8",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
+    },
+    // Keep user's extra properties if they were intended for specific components
     button: {
       background: "#707070",
       text: "#ffffff",
@@ -77,96 +106,132 @@ var APP_THEMES = {
   },
   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)"
-    },
-    sidebar: {
-      background: "#fff0ed",
-      text: "#2d2d2d",
-      hover: "#f5e0dc"
+      textSecondary: "#666666",
+      border: "#e0e0e0",
+      hover: "#fff5f5",
+      selection: "#fce4ec",
+      icon: "#a41b06",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
-    success: "#4CAF50",
-    warning: "#FFC107",
-    error: "#F44336"
+    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,
+  //       };
+  //     },
+  //   },
+  //   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)(() => {
-    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 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 cancelTheme = () => setPreviewThemeKey(committedThemeKey);
   return /* @__PURE__ */ import_react.default.createElement(
     RufousThemeContext.Provider,
     {
       value: {
-        theme: fullTheme,
-        previewTheme,
+        colorScheme,
+        mode,
+        toggleMode,
+        changeScheme,
+        previewTheme: changeScheme,
         saveTheme,
-        cancelTheme,
-        currentThemeKey: previewThemeKey,
-        committedThemeKey,
-        settings,
-        updateSettings: (v) => setSettings(v)
+        updateSettings,
+        theme: APP_THEMES[colorScheme][mode],
+        themeConfig: APP_THEMES[colorScheme][mode]
       }
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: `theme-${previewThemeKey || committedThemeKey || "default"}`
-      },
-      children
-    )
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `rufous-theme-root scheme-${colorScheme} mode-${mode}` }, children)
   );
 };
 var useRufousTheme = () => (0, import_react.useContext)(RufousThemeContext);

package/dist/Contexts/rufousThemeProvider.js

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