@rufous/ui 0.1.63 → 0.2.0-beta.1

package/dist/styles/editor.css

@@ -0,0 +1,211 @@
+/* lib/styles/editor.css */
+.rte-wrapper {
+  position: relative;
+  font-family: var(--font-family, "Roboto", "Helvetica", "Arial", sans-serif);
+}
+.rte-speech-popup {
+  position: absolute;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(6px);
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  font-size: 0.85rem;
+  font-style: italic;
+  color: #212121;
+  max-width: 280px;
+  transition: opacity 0.3s, transform 0.3s;
+  pointer-events: none;
+}
+.rte-speech-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #dc2626;
+  flex-shrink: 0;
+  animation: rte-pulse 1s ease-in-out infinite;
+}
+@keyframes rte-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+.rte-error {
+  margin: 4px 14px 0;
+  font-size: 0.75rem;
+  line-height: 1.66;
+  color: #d32f2f;
+}
+.jodit-toolbar__box:not(:empty) {
+  background-color: #fff !important;
+}
+.jodit-toolbar-button__button:focus-visible:not([disabled]),
+.jodit-toolbar-button__button:hover:not([disabled]) {
+  background-color: #f9e0e0 !important;
+  opacity: 1;
+  outline: 0;
+}
+.jodit-toolbar-button__button:active:not([disabled]),
+.jodit-toolbar-button__trigger:focus-visible:not([disabled]),
+.jodit-toolbar-button__trigger:hover:not([disabled]) {
+  background-color: #f9e0e0 !important;
+}
+.jodit-toolbar-button__button[aria-pressed=true]:not([disabled]) {
+  background-color: #f9e0e0 !important;
+}
+.jodit-ui-button_variant_primary {
+  background-color: var(--rufous-primary-color) !important;
+}
+.jodit-ui-button_variant_primary:hover:not([disabled]),
+.jodit-ui-button_variant_primary:focus:not([disabled]) {
+  background-color: var(--rufous-secondary-color) !important;
+  outline: 1px solid var(--rufous-primary-color) !important;
+}
+.rte-listening .jodit-toolbar-button_customSpeechRecognize button {
+  background-color: #f9e0e0 !important;
+}
+.jodit-checkbox {
+  appearance: none;
+  width: 18px !important;
+  height: 18px !important;
+  border: 2px solid #000 !important;
+  border-radius: 4px;
+  background-color: #fff !important;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+}
+.jodit-checkbox:checked {
+  background-color: var(--rufous-primary-color) !important;
+  border-color: var(--rufous-primary-color) !important;
+}
+.jodit-checkbox:checked::before {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 4px;
+  width: 5px;
+  height: 10px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.jodit-ui-group__aiContinuePrompt,
+.jodit-ui-group__aiTranslateToJapanesePrompt,
+.jodit-ui-group__aiTranslateToArabicPrompt,
+.jodit-ui-group__aiTranslateToRussianPrompt,
+.jodit-ui-group__aiTranslateToKoreanPrompt,
+.jodit-ui-group__aiTranslateToChinesePrompt,
+.jodit-ui-group__aiTranslateToEnglishPrompt,
+.jodit-ui-group__aiTranslateToPortuguesePrompt,
+.jodit-ui-group__aiTranslateToItalianPrompt,
+.jodit-ui-group__aiTranslateToGermanPrompt,
+.jodit-ui-group__aiTranslateToFrenchPrompt,
+.jodit-ui-group__aiTranslateToSpanishPrompt,
+.jodit-ui-group__aiChangeStylePoeticPrompt,
+.jodit-ui-group__aiChangeStyleJournalismPrompt,
+.jodit-ui-group__aiChangeStyleLegalPrompt,
+.jodit-ui-group__aiChangeToneConfidentPrompt,
+.jodit-ui-group__aiChangeToneDirectPrompt,
+.jodit-ui-group__aiChangeToneCasualPrompt,
+.jodit-ui-group__aiChangeToneFriendlyPrompt {
+  display: none !important;
+}
+.jodit-popup-container:has(.jodit-toolbar-button_buttonGenerator) {
+  display: none !important;
+}
+.jodit-dialog:has(.jodit-ui-button-generator) {
+  display: none !important;
+}
+.jodit-wysiwyg .todo-item,
+.rte-wrapper .todo-item {
+  display: flex;
+  align-items: flex-start;
+  margin-left: 0 !important;
+  margin-bottom: 4px !important;
+  min-height: 24px;
+  width: 100%;
+  position: relative;
+}
+.jodit-wysiwyg .todo-item-button,
+.rte-wrapper .todo-item-button {
+  flex-shrink: 0;
+  margin-right: 8px;
+  margin-top: 1px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.jodit-wysiwyg .todo-item-button img,
+.rte-wrapper .todo-item-button img {
+  width: 16px !important;
+  height: 16px !important;
+  pointer-events: none;
+}
+.jodit-wysiwyg .todo-item-text,
+.rte-wrapper .todo-item-text {
+  flex: 1;
+  margin-top: -2px;
+  word-break: break-word;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  display: block;
+}
+.mention-jodit {
+  background-color: var(--rufous-hover-color);
+  border-radius: 4px;
+  padding: 2px 4px;
+  color: var(--rufous-primary-color);
+}
+.jodit-ui-translate-list__item:hover .jodit-ui-translate-list__item-title,
+.jodit-ui-translate-list__item[data-active=true] .jodit-ui-translate-list__item-title,
+.jodit-ui-translate-list__item:hover .jodit-ui-translate-list__item-key,
+.jodit-ui-translate-list__item[data-active=true] .jodit-ui-translate-list__item-key {
+  background-color: #f9e0e0 !important;
+  color: #000;
+}
+.jodit-toolbar-button_close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: #fff;
+}
+.jodit-toolbar-button_close .jodit-icon {
+  width: 22px !important;
+  height: 22px !important;
+}
+.jodit-dialog .jodit-ui-ai-assistant {
+  width: 800px;
+}
+@media (max-width: 750px) {
+  .jodit-dialog .jodit-ui-ai-assistant {
+    width: 500px;
+  }
+}
+@media (max-width: 500px) {
+  .jodit-dialog .jodit-ui-ai-assistant {
+    width: 360px;
+  }
+}
+.todo-option {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.todo-option img {
+  margin-right: 5px;
+}

package/dist/styles/editor.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles/editor.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/utils/constants.cjs

@@ -23,81 +23,87 @@ __export(constants_exports, {
 });
 module.exports = __toCommonJS(constants_exports);
 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"
+      textSecondary: "#666666",
+      border: "#e0e0e0",
+      hover: "#fff5f5",
+      selection: "#fce4ec",
+      icon: "#a41b06",
+      get customStyles() {
+        return {
+          iconColor: this.icon,
+          primaryColor: this.primary,
+          secondaryColor: this.secondary
+        };
+      }
     },
-    card: {
-      background: "#ffffff",
-      shadow: "0 1px 3px rgba(0,0,0,0.1)"
-    },
-    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
+        };
+      }
+    }
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/utils/constants.d.cts

@@ -1,79 +1,77 @@
 declare const APP_THEMES: {
-    default: {
+    rufous: {
         name: string;
-        primaryColor: string;
-        secondaryColor: string;
-        backgroundColor: string;
-        surfaceColor: string;
-        iconColor: string;
-        textColor: string;
-        textSecondaryColor: string;
-        borderColor: string;
-        hoverColor: string;
-        activeColor: string;
-        button: {
-            background: string;
-            text: string;
-            hoverBackground: string;
-            disabledBackground: string;
-        };
-        input: {
+        light: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
             border: string;
-            placeholder: string;
-            focusBorder: string;
-        };
-        card: {
-            background: string;
-            shadow: string;
+            hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        sidebar: {
+        dark: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
+            border: string;
             hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        success: string;
-        warning: string;
-        error: string;
     };
-    rufous: {
+    slate: {
         name: string;
-        primaryColor: string;
-        secondaryColor: string;
-        backgroundColor: string;
-        surfaceColor: string;
-        iconColor: string;
-        textColor: string;
-        textSecondaryColor: string;
-        borderColor: string;
-        hoverColor: string;
-        activeColor: string;
-        button: {
-            background: string;
-            text: string;
-            hoverBackground: string;
-            disabledBackground: string;
-        };
-        input: {
+        light: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
             border: string;
-            placeholder: string;
-            focusBorder: string;
-        };
-        card: {
-            background: string;
-            shadow: string;
+            hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        sidebar: {
+        dark: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
+            border: string;
             hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        success: string;
-        warning: string;
-        error: string;
     };
 };
 

package/dist/utils/constants.d.ts

@@ -1,79 +1,77 @@
 declare const APP_THEMES: {
-    default: {
+    rufous: {
         name: string;
-        primaryColor: string;
-        secondaryColor: string;
-        backgroundColor: string;
-        surfaceColor: string;
-        iconColor: string;
-        textColor: string;
-        textSecondaryColor: string;
-        borderColor: string;
-        hoverColor: string;
-        activeColor: string;
-        button: {
-            background: string;
-            text: string;
-            hoverBackground: string;
-            disabledBackground: string;
-        };
-        input: {
+        light: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
             border: string;
-            placeholder: string;
-            focusBorder: string;
-        };
-        card: {
-            background: string;
-            shadow: string;
+            hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        sidebar: {
+        dark: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
+            border: string;
             hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        success: string;
-        warning: string;
-        error: string;
     };
-    rufous: {
+    slate: {
         name: string;
-        primaryColor: string;
-        secondaryColor: string;
-        backgroundColor: string;
-        surfaceColor: string;
-        iconColor: string;
-        textColor: string;
-        textSecondaryColor: string;
-        borderColor: string;
-        hoverColor: string;
-        activeColor: string;
-        button: {
-            background: string;
-            text: string;
-            hoverBackground: string;
-            disabledBackground: string;
-        };
-        input: {
+        light: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
             border: string;
-            placeholder: string;
-            focusBorder: string;
-        };
-        card: {
-            background: string;
-            shadow: string;
+            hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        sidebar: {
+        dark: {
+            primary: string;
+            secondary: string;
             background: string;
+            surface: string;
             text: string;
+            textSecondary: string;
+            border: string;
             hover: string;
+            selection: string;
+            icon: string;
+            readonly customStyles: {
+                iconColor: any;
+                primaryColor: any;
+                secondaryColor: any;
+            };
         };
-        success: string;
-        warning: string;
-        error: string;
     };
 };
 

package/dist/utils/constants.js

@@ -1,6 +1,7 @@
 import {
   APP_THEMES
-} from "../chunk-2FHTGYR4.js";
+} from "../chunk-YXPBXCY5.js";
+import "../chunk-LI4N7JWK.js";
 export {
   APP_THEMES
 };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.63",
+  "version": "0.2.0-beta.1",
   "type": "module",
+  "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/style.css",
   "files": [
     "dist"
@@ -24,14 +25,24 @@
     "dev": "vite",
     "build": "tsup lib --dts --format esm,cjs --outDir dist --clean",
     "build:dev": "npm version patch --no-git-tag-version && npm run build",
+    "build:staging": "vite build --config vite.app.config.ts",
     "prebuild": "rm -rf dist",
     "lint": "eslint .",
     "preview": "vite preview",
     "build:types": "tsc -p tsconfig.json"
   },
   "dependencies": {
+    "@types/crypto-js": "^4.2.2",
+    "axios": "^1.13.5",
+    "country-state-city": "^3.2.1",
+    "crypto-js": "^4.2.0",
+    "jodit-react": "^5.3.21",
+    "lucide-react": "^0.575.0",
+    "motion": "^12.34.3",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^7.13.1",
+    "react-secure-storage": "^1.3.2",
     "rufous-ui": "^0.4.6",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
@@ -56,4 +67,4 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }
-}
+}