@editora/themes 1.0.1 → 1.0.3

package/README.md

@@ -1,5 +1,14 @@
 # @editora/themes
 
+<div align="center">
+  <img src="../../images/editora_logo_blocks.svg" alt="Editora Logo" width="200" height="auto">
+</div>
+
+<div align="center">
+  <img src="../../images/theme-comparison.png" alt="Editora Themes - Light vs Dark Theme Comparison" width="800" style="border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
+  <p><em>Themes and styling system with built-in light/dark mode support</em></p>
+</div>
+
 Themes and styling system for Editora Rich Text Editor with built-in light/dark mode support and customizable design tokens.
 
 ## 📦 Installation
@@ -26,7 +35,9 @@ The themes package provides a comprehensive styling system using CSS variables,
 ### Basic Usage
 
 ```tsx
-import '@editora/themes/styles';
+import "@editora/themes/theme.css";
+OR
+import "@editora/themes/themes/default.css";
 import { EditoraEditor } from '@editora/react';
 
 function App() {
@@ -37,7 +48,9 @@ function App() {
 ### With Theme Toggle
 
 ```tsx
-import '@editora/themes/styles';
+import "@editora/themes/theme.css";
+OR
+import "@editora/themes/themes/default.css";
 import { EditoraEditor } from '@editora/react';
 import { useState } from 'react';
 
@@ -59,7 +72,9 @@ function App() {
 ### Auto Theme Detection
 
 ```tsx
-import '@editora/themes/styles';
+import "@editora/themes/theme.css";
+OR
+import "@editora/themes/themes/default.css";
 import { EditoraEditor } from '@editora/react';
 
 function App() {
@@ -210,7 +225,9 @@ All theme colors and sizes use CSS variables for easy customization.
 
 ```css
 /* custom-theme.css */
-@import '@editora/themes/styles';
+import "@editora/themes/theme.css";
+OR
+import "@editora/themes/themes/default.css";
 
 :root {
   /* Brand colors */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editora/themes",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Themes and styling system for Editora Rich Text Editor with light/dark mode support",
   "author": "Ajay Kumar <ajaykr089@gmail.com>",
   "license": "MIT",
@@ -32,7 +32,9 @@
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs.js"
     },
-    "./styles": "./src/index.css"
+    "./theme.css": "./src/index.css",
+    "./themes/*": "./src/themes/*.css",
+    "./themes/default.css": "./src/themes/default.css"
   },
   "files": [
     "dist",
@@ -55,4 +57,4 @@
     "access": "public"
   },
   "gitHead": "694494db58b809f0dcf24501696284faa1ab68a5"
-}
+}

package/src/index.css

@@ -1,3 +1,6 @@
+/* Import default theme styles including dialog overlays */
+@import './themes/default.css';
+
 /* Toolbar group button and group items for native plugin grouping (e.g., font size) */
 .editora-toolbar-group-button {
   display: flex;

package/src/themes/default.css

@@ -146,27 +146,25 @@
 /* Expanded row for hidden items - Slides down inline */
 .rte-toolbar-expanded-row {
   display: flex;
-  gap: 4px;
-  padding: 8px;
-  background: #f5f5f5;
-  border: 1px solid #ddd;
-  border-top: none;
+  transform: scaleY(0);
+  transform-origin: top;
   max-height: 0;
+  padding: 0;
   overflow: hidden;
   opacity: 0;
-  visibility: hidden;
-  transform: scaleY(0);
-  transform-origin: top;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  flex-wrap: wrap;
-  align-items: center;
+  transition: transform 0.25s ease, opacity 0.2s ease, max-height 0.25s ease;
 }
 
 .rte-toolbar-expanded-row.show {
+  transform: scaleY(1);
   max-height: 200px;
+  padding: 8px;
+  padding-top:1px;
   opacity: 1;
-  visibility: visible;
-  transform: scaleY(1);
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-top: none;
+  gap: 4px;
 }
 
 .rte-content {
@@ -539,3 +537,67 @@
   text-decoration: line-through;
   color: #666;
 }
+
+/* Status bar container */
+.editora-statusbar-container {
+  display: flex;
+  flex-direction: column;
+}
+.rte-editor {
+  .editora-statusbar-bottom{
+    top: -32px;
+  }
+}
+.editora-statusbar-bottom{
+  position: relative;
+  border-left: 1px solid rgb(221, 221, 221);
+  border-right: 1px solid rgb(221, 221, 221);
+}
+/* Status bar */
+.editora-statusbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px;
+  background: #f5f5f5;
+  border-top: 1px solid #ddd;
+  font-size: 12px;
+  color: #666;
+}
+
+.editora-theme-dark .editora-statusbar {
+  background: #252526;
+  border-top-color: #3c3c3c;
+  color: #9a9a9a;
+}
+
+.editora-statusbar-top {
+  border-top: none;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.editora-statusbar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.editora-statusbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.editora-statusbar-item {
+  white-space: nowrap;
+  padding: 2px 4px;
+}
+
+.editora-statusbar-separator {
+  color: #ddd;
+}
+
+.editora-theme-dark .editora-statusbar-separator {
+  color: #3c3c3c;
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Ajay Kumar
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.