@moontra/moonui-pro 2.28.10 → 2.28.12

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';
@@ -86249,7 +86249,7 @@ function ChartWidget2({
     const total = values.reduce((sum, val) => sum + val, 0);
     let currentAngle = -90;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 h-full overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative w-32 h-32 lg:w-40 lg:h-40 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-48 h-48 flex-shrink-0", children: [
         /* @__PURE__ */ jsxs("svg", { className: "w-full h-full transform", viewBox: "0 0 100 100", children: [
           values.map((value, index2) => {
             const percentage = value / total * 100;
@@ -86947,8 +86947,8 @@ function FunnelWidget({
                   children: /* @__PURE__ */ jsx("div", { style: { color }, children: icon })
                 }
               ),
-              index2 > 0 && showDropoff && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "destructive", className: "text-xs", children: [
-                /* @__PURE__ */ jsx(TrendingDown, { className: "h-3 w-3 mr-1" }),
+              index2 > 0 && showDropoff && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "destructive", className: "text-xs flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(TrendingDown, { className: "h-3 w-3" }),
                 formatNumber2(stage.dropoffPercentage),
                 "%"
               ] })
@@ -87323,6 +87323,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 +87420,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.10",
+    "version": "2.28.12",
     "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",