@moontra/moonui 2.2.5 → 2.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/components/ui/date-picker.tsx

@@ -255,7 +255,7 @@ export function DatePicker({
         </Button>
       </PopoverTrigger>
       <PopoverContent 
-        className="w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]" 
+        className="w-[360px] p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]" 
         align="start"
         sideOffset={12}
       >
@@ -370,7 +370,7 @@ export function DateRangePicker({
           </span>
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm z-[1000]" align="start" sideOffset={12}>
+      <PopoverContent className="w-auto p-0 shadow-2xl rounded-2xl border border-gray-200 dark:border-gray-700 bg-background/95 backdrop-blur-sm !z-[9999]" align="start" sideOffset={12}>
         <Calendar
           mode="range"
           defaultMonth={internalRange?.from}
@@ -566,7 +566,7 @@ export function MonthPicker({
           {displayValue || placeholder}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background z-[1000]" align="start">
+      <PopoverContent className="w-64 p-0 shadow-2xl border border-gray-200 dark:border-gray-700 bg-background !z-[9999]" align="start">
         <div className="p-3">
           <div className="flex items-center justify-between mb-3">
             <Button

package/src/components/ui/simple-editor.tsx

@@ -296,7 +296,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
     }
 
     React.useEffect(() => {
-      if (editorRef.current && content !== editorRef.current.innerHTML) {
+      if (editorRef.current && content && content !== editorRef.current.innerHTML) {
         editorRef.current.innerHTML = content
       }
     }, [content])
@@ -312,7 +312,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
     const toolbar = showToolbar && (
       <TooltipProvider>
         <motion.div
-          className="flex items-center gap-1 p-2 border-b bg-muted/50"
+          className="flex items-center gap-1 p-2 border-b bg-gray-50/50 dark:bg-zinc-800/50 backdrop-blur-sm"
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
         >
@@ -350,7 +350,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
           />
         </div>
 
-        <Separator orientation="vertical" className="h-6" />
+        <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />
 
         {/* Font Size / Heading */}
         <Select 
@@ -383,7 +383,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
           </SelectContent>
         </Select>
 
-        <Separator orientation="vertical" className="h-6" />
+        <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />
 
         {/* Alignment */}
         <div className="flex items-center gap-1">
@@ -417,7 +417,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
           />
         </div>
 
-        <Separator orientation="vertical" className="h-6" />
+        <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />
 
         {/* Lists */}
         <div className="flex items-center gap-1">
@@ -451,7 +451,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
           />
         </div>
 
-        <Separator orientation="vertical" className="h-6" />
+        <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />
 
         {/* Indentation */}
         <div className="flex items-center gap-1">
@@ -469,7 +469,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
           />
         </div>
 
-        <Separator orientation="vertical" className="h-6" />
+        <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />
 
         {/* Insert */}
         <div className="flex items-center gap-1">
@@ -487,7 +487,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
           />
         </div>
 
-        <Separator orientation="vertical" className="h-6" />
+        <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />
 
         {/* Color */}
         <Popover>
@@ -507,7 +507,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
           </PopoverContent>
         </Popover>
 
-        <Separator orientation="vertical" className="h-6" />
+        <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />
 
         {/* Undo/Redo */}
         <div className="flex items-center gap-1">
@@ -531,7 +531,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
         {/* Preview Toggle */}
         {showPreview && (
           <>
-            {!isPreview && <Separator orientation="vertical" className="h-6" />}
+            {!isPreview && <Separator orientation="vertical" className="h-6 bg-gray-300 dark:bg-zinc-600" />}
             <ToolbarButton
               icon={isPreview ? <Edit className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
               tooltip={isPreview ? "Edit Mode" : "View Source Code"}
@@ -558,7 +558,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
       <div
         ref={ref}
         className={cn(
-          "border rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-ring",
+          "border border-gray-200 dark:border-zinc-700 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-ring focus-within:border-transparent",
           disabled && "opacity-50 cursor-not-allowed",
           className
         )}
@@ -571,14 +571,14 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
             <motion.div
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
-              className="p-4"
+              className="bg-slate-50 dark:bg-zinc-900/95"
               style={{ minHeight, maxHeight, overflow: 'auto' }}
             >
               <textarea
                 ref={sourceRef}
                 value={sourceContent}
                 onChange={(e) => setSourceContent(e.target.value)}
-                className="w-full h-full bg-muted rounded-lg p-4 font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                className="w-full h-full bg-transparent p-4 font-mono text-sm text-gray-900 dark:text-gray-100 resize-none focus:outline-none"
                 style={{ minHeight: minHeight - 32 }}
                 disabled={disabled}
                 placeholder="HTML source code..."
@@ -591,6 +591,8 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
               suppressContentEditableWarning
               className={cn(
                 "p-4 outline-none prose prose-sm dark:prose-invert max-w-none overflow-y-auto",
+                "bg-slate-50 dark:bg-zinc-900/95",
+                "text-gray-900 dark:text-gray-100",
                 "focus:ring-0",
                 "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mb-4",
                 "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mb-3",
@@ -625,7 +627,7 @@ export const SimpleEditor = React.forwardRef<HTMLDivElement, SimpleEditorProps>(
         </div>
 
         {/* Character Count */}
-        <div className="px-4 py-2 border-t bg-muted/50 text-xs text-muted-foreground">
+        <div className="px-4 py-2 border-t bg-gray-50/50 dark:bg-zinc-800/50 backdrop-blur-sm text-xs text-gray-600 dark:text-gray-400">
           <CharacterCount content={content} />
         </div>
       </div>