@moontra/moonui-pro 2.28.11 → 2.29.0

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useMemo, useCallback, useRef, useEffect, forwardRef, createContext, useContext, useLayoutEffect, useDebugValue, Component } from 'react';
 import * as AccordionPrimitive2 from '@radix-ui/react-accordion';
-import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, BarChart3, Menu, Bell, CheckCheck, CheckCircle, Palette, User, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Phone, Globe, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code as Code$1, Link as Link$1, Undo, Redo, Edit, GripVertical, Type, Heading1, Heading2, Heading3, CheckSquare, Highlighter, Link2, Table as Table$1, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Languages, Lightbulb, MoreVertical, TrendingUp, Activity, BellOff, Target, ArrowUpRight, ArrowDownRight, CalendarIcon, MapPin, Navigation, ArrowUp, ArrowDown, ArrowUpDown, Calendar as Calendar$1, DollarSign, Users, Map as Map$1, Music, Archive, File, FileSpreadsheet, FileJson, FileDown, ChevronsLeft, ChevronsRight, Star, Shield, Award, Gem, Flame, TrendingDown, Repeat, Move, EyeOff, Timer, Square, Cpu, GitBranch, ArrowRight, Trash, MessageCircle, Paperclip, Printer, Grip, Unlock, Github, Server, Monitor, MemoryStick, HardDrive, Network, Columns, PlusCircle, Pin, Sun, Moon, Home, Send, Tag, Flag, Trophy, Wifi, WifiOff, Thermometer, GitFork, Package, PoundSterling, Euro, Database, ShoppingCart } from 'lucide-react';
+import { Loader2, Play, ExternalLink, ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Minus, Clock, ChevronUp, Search, Mic, MicOff, Settings, RefreshCw, Zap, ChevronRight, Crown, Circle, ChevronLeft, Plus, Lock, Sparkles, ZoomOut, ZoomIn, Pause, VolumeX, Volume2, Download, Maximize2, Filter, Image as Image$1, Video, RotateCw, Minimize2, BarChart3, Menu, Bell, CheckCheck, CheckCircle, Palette, User, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, Phone, Globe, Eye, CheckCircle2, RotateCcw, Copy, Share, Trash2, CreditCard, XCircle, HelpCircle, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, Quote, Code as Code$1, Link as Link$1, Undo, Redo, Edit, GripVertical, Type, Heading1, Heading2, Heading3, CheckSquare, Highlighter, Link2, Table as Table$1, Wand2, Maximize, FileText, Briefcase, MessageSquare, Heart, GraduationCap, Languages, Lightbulb, MoreVertical, TrendingUp, Activity, BellOff, Target, ArrowUpRight, ArrowDownRight, CalendarIcon, MapPin, Navigation, ArrowUp, ArrowDown, ArrowUpDown, Calendar as Calendar$1, DollarSign, Users, Map as Map$1, Music, Archive, File, FileSpreadsheet, FileJson, FileDown, ChevronsLeft, ChevronsRight, Star, Shield, Award, Gem, Flame, TrendingDown, Repeat, Move, EyeOff, Timer, Square, Cpu, GitBranch, ArrowRight, Trash, MessageCircle, Paperclip, Printer, Grip, Unlock, Github, Server, Monitor, MemoryStick, HardDrive, Network, Columns, PlusCircle, Pin, Sun, Moon, Home, Send, Tag, Flag, Trophy, ShoppingBag, Wifi, WifiOff, Thermometer, GitFork, Package, PoundSterling, Euro, Database, ShoppingCart } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -85695,6 +85695,7 @@ function WidgetBase({
   subtitle,
   children,
   variant = "default",
+  backgroundVariant,
   colorScheme = "blue",
   className,
   headerAction,
@@ -85706,6 +85707,7 @@ function WidgetBase({
   gradientDirection = "to-br",
   overlay
 }) {
+  const activeVariant = backgroundVariant || variant;
   const colorSchemeClasses = {
     blue: "from-blue-500/10 via-blue-500/5 to-transparent border-blue-500/20 dark:from-blue-400/10 dark:via-blue-400/5 dark:border-blue-400/20",
     green: "from-green-500/10 via-green-500/5 to-transparent border-green-500/20 dark:from-green-400/10 dark:via-green-400/5 dark:border-green-400/20",
@@ -85790,15 +85792,15 @@ function WidgetBase({
     MoonUICardPro,
     {
       className: cn(
-        variantClasses[variant],
+        variantClasses[activeVariant],
         roundedClasses[rounded],
         shadowClasses[shadow],
         "transition-all duration-200 relative",
         className
       ),
-      style: variant === "gradient" || variant === "colored" ? gradientDirectionStyles[gradientDirection] : void 0,
+      style: activeVariant === "gradient" || activeVariant === "colored" ? gradientDirectionStyles[gradientDirection] : void 0,
       children: [
-        (variant === "overlay" || overlay) && overlay?.pattern && overlay.pattern !== "none" && /* @__PURE__ */ jsx(
+        (activeVariant === "overlay" || overlay) && overlay?.pattern && overlay.pattern !== "none" && /* @__PURE__ */ jsx(
           "div",
           {
             className: "absolute inset-0 pointer-events-none",
@@ -87323,6 +87325,87 @@ function RevenueWidget({
       ] })
     ] });
   };
+  const renderMetrics = () => {
+    if (!data.customerMetrics)
+      return null;
+    const metrics = [
+      {
+        label: "ARPU (Average Revenue Per User)",
+        value: formatCurrency(data.customerMetrics.arpu || 0),
+        icon: /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" }),
+        description: "Average revenue generated per user"
+      },
+      {
+        label: "LTV (Lifetime Value)",
+        value: formatCurrency(data.customerMetrics.ltv || 0),
+        icon: /* @__PURE__ */ jsx(TrendingUp, { className: "h-4 w-4" }),
+        description: "Expected revenue from customer over their lifetime"
+      },
+      {
+        label: "CAC (Customer Acquisition Cost)",
+        value: formatCurrency(data.customerMetrics.cac || 0),
+        icon: /* @__PURE__ */ jsx(ShoppingBag, { className: "h-4 w-4" }),
+        description: "Cost to acquire one new customer"
+      },
+      {
+        label: "Churn Rate",
+        value: `${formatNumber2(data.customerMetrics.churnRate || 0)}%`,
+        icon: /* @__PURE__ */ jsx(TrendingDown, { className: "h-4 w-4" }),
+        description: "Percentage of customers lost per period"
+      },
+      {
+        label: "Retention Rate",
+        value: `${formatNumber2(data.customerMetrics.retentionRate || 0)}%`,
+        icon: /* @__PURE__ */ jsx(Repeat, { className: "h-4 w-4" }),
+        description: "Percentage of customers retained"
+      }
+    ];
+    const ltvCacRatio = (data.customerMetrics.ltv || 0) / (data.customerMetrics.cac || 1);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: metrics.map((metric, index2) => /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
+        /* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "p-4 rounded-lg border bg-card hover:bg-muted/50 transition-colors cursor-help",
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { delay: index2 * 0.1 },
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: metric.icon }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: metric.label }),
+                /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: metric.value })
+              ] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(MoonUITooltipContentPro, { children: /* @__PURE__ */ jsx("p", { children: metric.description }) })
+      ] }) }, index2)) }),
+      /* @__PURE__ */ jsxs("div", { className: "p-4 rounded-lg border bg-card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "LTV/CAC Ratio" }),
+            /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: formatNumber2(ltvCacRatio) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+            /* @__PURE__ */ jsx(
+              MoonUIBadgePro,
+              {
+                variant: ltvCacRatio >= 3 ? "primary" : ltvCacRatio >= 2 ? "secondary" : "destructive",
+                className: "text-xs",
+                children: ltvCacRatio >= 3 ? "Excellent" : ltvCacRatio >= 2 ? "Good" : "Needs Improvement"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Target: 3:1 or higher" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mb-1", children: "Ratio Progress" }),
+          /* @__PURE__ */ jsx(MoonUIProgressPro, { value: Math.min(100, ltvCacRatio / 5 * 100), className: "h-2" })
+        ] })
+      ] })
+    ] });
+  };
   const renderContent = () => {
     switch (variant) {
       case "compact":
@@ -87339,7 +87422,7 @@ function RevenueWidget({
             showBreakdown && renderBreakdown()
           ] }),
           /* @__PURE__ */ jsx(TabsContent, { value: "streams", className: "space-y-4", children: renderStreams() }),
-          /* @__PURE__ */ jsx(TabsContent, { value: "metrics", className: "space-y-4", children: /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-muted-foreground", children: /* @__PURE__ */ jsx("p", { children: "Metrics coming soon" }) }) })
+          /* @__PURE__ */ jsx(TabsContent, { value: "metrics", className: "space-y-4", children: renderMetrics() })
         ] });
       case "dashboard":
         return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.28.11",
+    "version": "2.29.0",
     "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
     "type": "module",
     "main": "dist/index.mjs",
@@ -81,7 +81,7 @@
         "react-dom": ">=18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "@moontra/moonui-pro": "^2.28.5",
+        "@moontra/moonui-pro": "^2.28.12",
         "@radix-ui/react-accordion": "^1.2.11",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-checkbox": "^1.3.2",