@moontra/moonui-pro 2.31.0 → 2.31.1

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, ShoppingBag, 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, Lock, ChevronLeft, Plus, 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';
@@ -50,7 +50,14 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __commonJS = (cb, mod) => function __require() {
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __copyProps = (to, from2, except, desc) => {
@@ -4721,6 +4728,138 @@ var useCollapsibleAnalytics = () => {
   }, []);
   return { analytics, trackOpen, trackClose };
 };
+var CACHE_KEY = "moonui_license_cache";
+var CACHE_DURATION = 24 * 60 * 60 * 1e3;
+var OFFLINE_GRACE_PERIOD = 7 * 24 * 60 * 60 * 1e3;
+function useSubscription() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasProAccess, setHasProAccess] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  useEffect(() => {
+    const checkLicense = async () => {
+      try {
+        const cached = localStorage.getItem(CACHE_KEY);
+        if (cached) {
+          const cacheData = JSON.parse(cached);
+          const now = Date.now();
+          if (now - cacheData.timestamp < CACHE_DURATION) {
+            setHasProAccess(cacheData.valid && cacheData.hasLifetimeAccess);
+            setIsAuthenticated(cacheData.valid);
+            setIsLoading(false);
+            return;
+          }
+          if (now - cacheData.timestamp < OFFLINE_GRACE_PERIOD) {
+            validateLicense().catch(() => {
+              setHasProAccess(cacheData.valid && cacheData.hasLifetimeAccess);
+              setIsAuthenticated(cacheData.valid);
+            });
+            setIsLoading(false);
+            return;
+          }
+        }
+        await validateLicense();
+      } catch (error) {
+        console.error("License check error:", error);
+        setHasProAccess(false);
+        setIsAuthenticated(false);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    checkLicense();
+  }, []);
+  const getAuthToken = async () => {
+    {
+      if (typeof window !== "undefined") {
+        const browserToken = localStorage.getItem("moonui_auth_token");
+        if (browserToken)
+          return browserToken;
+      }
+      if (typeof window === "undefined") {
+        try {
+          const fs = __require("fs");
+          const path = __require("path");
+          const os2 = __require("os");
+          const authPath = path.join(os2.homedir(), ".moonui", "auth.encrypted");
+          if (fs.existsSync(authPath)) {
+            return "cli-authenticated";
+          }
+        } catch (error) {
+          console.debug("CLI auth check failed:", error);
+        }
+      }
+    }
+    return process.env.NEXT_PUBLIC_MOONUI_AUTH_TOKEN || process.env.MOONUI_LICENSE_KEY || null;
+  };
+  const validateLicense = async () => {
+    const token = await getAuthToken();
+    if (!token) {
+      setHasProAccess(false);
+      setIsAuthenticated(false);
+      return;
+    }
+    if (token === "cli-authenticated") {
+      setHasProAccess(true);
+      setIsAuthenticated(true);
+      if (typeof window !== "undefined") {
+        const cacheData = {
+          valid: true,
+          hasLifetimeAccess: true,
+          timestamp: Date.now()
+        };
+        localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
+      }
+      return;
+    }
+    try {
+      const response = await fetch("https://moonui.dev/api/auth/validate", {
+        headers: {
+          "Authorization": `Bearer ${token}`
+        }
+      });
+      if (response.ok) {
+        const data = await response.json();
+        const cacheData = {
+          valid: data.valid,
+          hasLifetimeAccess: data.user?.hasLifetimeAccess || false,
+          timestamp: Date.now(),
+          cacheUntil: data.cacheUntil ? new Date(data.cacheUntil).getTime() : void 0
+        };
+        localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
+        setHasProAccess(data.valid && (data.user?.hasLifetimeAccess || data.user?.features?.includes("pro_components")));
+        setIsAuthenticated(data.valid);
+      } else {
+        localStorage.removeItem(CACHE_KEY);
+        setHasProAccess(false);
+        setIsAuthenticated(false);
+      }
+    } catch (error) {
+      const cached = localStorage.getItem(CACHE_KEY);
+      if (cached) {
+        const cacheData = JSON.parse(cached);
+        const now = Date.now();
+        if (now - cacheData.timestamp < OFFLINE_GRACE_PERIOD) {
+          setHasProAccess(cacheData.valid && cacheData.hasLifetimeAccess);
+          setIsAuthenticated(cacheData.valid);
+          return;
+        }
+      }
+      setHasProAccess(false);
+      setIsAuthenticated(false);
+    }
+  };
+  return {
+    isLoading,
+    isAuthenticated,
+    isAdmin: false,
+    hasProAccess,
+    subscriptionPlan: hasProAccess ? "lifetime" : "free",
+    subscription: {
+      status: hasProAccess ? "active" : "inactive",
+      plan: hasProAccess ? "lifetime" : "free"
+    }
+  };
+}
 var defaultColors = [
   "#000000",
   "#374151",
@@ -4748,6 +4887,7 @@ var MoonUIColorPickerPro = ({
   size: size4 = "default",
   presets = defaultColors
 }) => {
+  const { hasProAccess, isLoading } = useSubscription();
   const [currentColor, setCurrentColor] = useState(value);
   const handleColorChange = (color) => {
     setCurrentColor(color);
@@ -4758,6 +4898,21 @@ var MoonUIColorPickerPro = ({
     default: "w-8 h-8",
     lg: "w-10 h-10"
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
     showInput && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
       /* @__PURE__ */ jsx(
@@ -8102,6 +8257,7 @@ var MoonUITabsPro = t.forwardRef(({
   onValueChange,
   ...props
 }, ref) => {
+  const { hasProAccess, isLoading } = useSubscription();
   const [items, setItems] = t.useState(initialItems);
   const [localValue, setLocalValue] = t.useState(() => {
     if (persistKey && typeof window !== "undefined") {
@@ -8206,6 +8362,21 @@ var MoonUITabsPro = t.forwardRef(({
       scrollRef.current.scrollBy({ left: 200, behavior: "smooth" });
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: cn(
     "relative w-full",
     variant === "gradient" && "bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-1",
@@ -12644,102 +12815,6 @@ var NavigationMenuIndicator2 = t.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 NavigationMenuIndicator2.displayName = Indicator3.displayName;
-var CACHE_KEY = "moonui_license_cache";
-var CACHE_DURATION = 24 * 60 * 60 * 1e3;
-var OFFLINE_GRACE_PERIOD = 7 * 24 * 60 * 60 * 1e3;
-function useSubscription() {
-  const [isLoading, setIsLoading] = useState(true);
-  const [hasProAccess, setHasProAccess] = useState(true);
-  const [isAuthenticated, setIsAuthenticated] = useState(true);
-  useEffect(() => {
-    const checkLicense = async () => {
-      try {
-        const cached = localStorage.getItem(CACHE_KEY);
-        if (cached) {
-          const cacheData = JSON.parse(cached);
-          const now = Date.now();
-          if (now - cacheData.timestamp < CACHE_DURATION) {
-            setHasProAccess(cacheData.valid && cacheData.hasLifetimeAccess);
-            setIsAuthenticated(cacheData.valid);
-            setIsLoading(false);
-            return;
-          }
-          if (now - cacheData.timestamp < OFFLINE_GRACE_PERIOD) {
-            validateLicense().catch(() => {
-              setHasProAccess(cacheData.valid && cacheData.hasLifetimeAccess);
-              setIsAuthenticated(cacheData.valid);
-            });
-            setIsLoading(false);
-            return;
-          }
-        }
-        await validateLicense();
-      } catch (error) {
-        console.error("License check error:", error);
-        setHasProAccess(true);
-        setIsAuthenticated(true);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    checkLicense();
-  }, []);
-  const validateLicense = async () => {
-    const token = process.env.NEXT_PUBLIC_MOONUI_AUTH_TOKEN || localStorage.getItem("moonui_auth_token");
-    if (!token) {
-      setHasProAccess(true);
-      setIsAuthenticated(true);
-      return;
-    }
-    try {
-      const response = await fetch("https://moonui.dev/api/auth/validate", {
-        headers: {
-          "Authorization": `Bearer ${token}`
-        }
-      });
-      if (response.ok) {
-        const data = await response.json();
-        const cacheData = {
-          valid: data.valid,
-          hasLifetimeAccess: data.user?.hasLifetimeAccess || false,
-          timestamp: Date.now(),
-          cacheUntil: data.cacheUntil ? new Date(data.cacheUntil).getTime() : void 0
-        };
-        localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
-        setHasProAccess(data.valid && (data.user?.hasLifetimeAccess || data.user?.features?.includes("pro_components")));
-        setIsAuthenticated(data.valid);
-      } else {
-        localStorage.removeItem(CACHE_KEY);
-        setHasProAccess(false);
-        setIsAuthenticated(false);
-      }
-    } catch (error) {
-      const cached = localStorage.getItem(CACHE_KEY);
-      if (cached) {
-        const cacheData = JSON.parse(cached);
-        const now = Date.now();
-        if (now - cacheData.timestamp < OFFLINE_GRACE_PERIOD) {
-          setHasProAccess(cacheData.valid && cacheData.hasLifetimeAccess);
-          setIsAuthenticated(cacheData.valid);
-          return;
-        }
-      }
-      setHasProAccess(false);
-      setIsAuthenticated(false);
-    }
-  };
-  return {
-    isLoading,
-    isAuthenticated,
-    isAdmin: false,
-    hasProAccess,
-    subscriptionPlan: hasProAccess ? "lifetime" : "free",
-    subscription: {
-      status: hasProAccess ? "active" : "inactive",
-      plan: hasProAccess ? "lifetime" : "free"
-    }
-  };
-}
 var gestureDrawerVariants = cva(
   "fixed bg-background shadow-2xl overflow-hidden",
   {
@@ -13150,6 +13225,7 @@ function useLightbox() {
   return context;
 }
 function LightboxProvider({ children, items = [], defaultIndex = 0 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const [currentIndex, setCurrentIndex] = t.useState(defaultIndex);
   const [isOpen, setIsOpen] = t.useState(false);
   const [zoom, setZoom] = t.useState(1);
@@ -13165,6 +13241,21 @@ function LightboxProvider({ children, items = [], defaultIndex = 0 }) {
     }),
     [items, currentIndex, isOpen, zoom]
   );
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(LightboxContext.Provider, { value, children });
 }
 var LightboxTrigger = t.forwardRef(
@@ -13661,6 +13752,7 @@ var MoonUIMediaGalleryPro = t.forwardRef(({
   lightboxProps,
   ...props
 }, ref) => {
+  const { hasProAccess, isLoading } = useSubscription();
   const [activeCategory, setActiveCategory] = t.useState(defaultCategory);
   const [activeSort, setActiveSort] = t.useState(defaultSort);
   const [showFilters, setShowFilters] = t.useState(false);
@@ -13820,6 +13912,21 @@ var MoonUIMediaGalleryPro = t.forwardRef(({
     return itemContent;
   };
   const renderSkeleton = () => /* @__PURE__ */ jsx("div", { className: cn(galleryItemVariants({ variant, aspectRatio })), children: /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-muted animate-pulse" }) });
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   const galleryContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     (enableFiltering || enableSorting) && /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
@@ -13990,6 +14097,7 @@ function DraggableList({
   dragPreviewStyle = "clone",
   hapticFeedback = true
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const [draggedIndex, setDraggedIndex] = useState(null);
   const [dropPosition, setDropPosition] = useState(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -14186,6 +14294,21 @@ function DraggableList({
     }
     return null;
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -85526,6 +85649,7 @@ var MoonUIAvatarPro2 = t.forwardRef(({
   error = false,
   ...props
 }, ref) => {
+  useSubscription();
   const animationClasses = {
     pulse: "animate-pulse",
     bounce: "animate-bounce",
@@ -85623,6 +85747,7 @@ var MoonUIAvatarPro2 = t.forwardRef(({
 });
 MoonUIAvatarPro2.displayName = "MoonUIAvatarPro";
 var MoonUIAvatarGroupPro2 = t.forwardRef(({ children, max: max2 = 4, size: size4 = "md", spacing = "normal", className }, ref) => {
+  const { hasProAccess, isLoading: isCheckingAuth } = useSubscription();
   const childrenArray = t.Children.toArray(children);
   const visibleChildren = childrenArray.slice(0, max2);
   const remainingCount = childrenArray.length - max2;
@@ -85631,6 +85756,21 @@ var MoonUIAvatarGroupPro2 = t.forwardRef(({ children, max: max2 = 4, size: size4
     normal: "-space-x-2",
     loose: "-space-x-1"
   };
+  if (!isCheckingAuth && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -85667,6 +85807,7 @@ var MoonUIAvatarGroupPro2 = t.forwardRef(({ children, max: max2 = 4, size: size4
 });
 MoonUIAvatarGroupPro2.displayName = "MoonUIAvatarGroupPro";
 var MoonUIAsyncAvatarPro = t.forwardRef(({ userId, fetchUser, ...props }, ref) => {
+  const { hasProAccess, isLoading: isCheckingAuth } = useSubscription();
   const [userData, setUserData] = t.useState(null);
   const [isLoading, setIsLoading] = t.useState(false);
   const [hasError, setHasError] = t.useState(false);
@@ -85677,6 +85818,21 @@ var MoonUIAsyncAvatarPro = t.forwardRef(({ userId, fetchUser, ...props }, ref) =
       fetchUser(userId).then(setUserData).catch(() => setHasError(true)).finally(() => setIsLoading(false));
     }
   }, [userId, fetchUser]);
+  if (!isCheckingAuth && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     MoonUIAvatarPro2,
     {
@@ -85859,6 +86015,7 @@ function KPIWidget({
   onKPIClick,
   ...widgetProps
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const kpis = Array.isArray(data) ? data : [data];
   const formatValue = (value, unit) => {
     if (typeof value === "string")
@@ -86021,6 +86178,21 @@ function KPIWidget({
       index2
     );
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -86052,6 +86224,7 @@ function ChartWidget2({
   onDataPointClick,
   ...widgetProps
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const [hoveredIndex, setHoveredIndex] = t__default.useState(null);
   const defaultColors2 = [
     "#3b82f6",
@@ -86417,6 +86590,21 @@ function ChartWidget2({
         return renderBarChart();
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -86469,6 +86657,7 @@ function GaugeWidget({
   onGaugeClick,
   ...widgetProps
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const gauges = Array.isArray(data) ? data : [data];
   const sizeConfig = {
     sm: { width: 120, height: 120, fontSize: "text-lg", strokeWidth: 8 },
@@ -86725,6 +86914,21 @@ function GaugeWidget({
         return renderRadialGauge(gauge, index2);
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -86757,6 +86961,7 @@ function FunnelWidget({
   onStageClick,
   ...widgetProps
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const [hoveredStage, setHoveredStage] = t__default.useState(null);
   const formatNumber2 = (value) => {
     if (value % 1 !== 0) {
@@ -87055,6 +87260,21 @@ function FunnelWidget({
         return renderVerticalFunnel();
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -87105,6 +87325,7 @@ function RevenueWidget({
   onMetricClick,
   ...widgetProps
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const [selectedTab, setSelectedTab] = t__default.useState("overview");
   const formatNumber2 = (value) => {
     if (value % 1 !== 0) {
@@ -87514,6 +87735,21 @@ function RevenueWidget({
         ] });
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -87540,6 +87776,7 @@ function ServerMonitorWidget({
   onAlertClick,
   ...widgetProps
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const servers = Array.isArray(data) ? data : [data];
   const [selectedTab, setSelectedTab] = t__default.useState("overview");
   const [liveData, setLiveData] = t__default.useState(servers);
@@ -87893,6 +88130,21 @@ function ServerMonitorWidget({
         return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: liveData.map((server) => /* @__PURE__ */ jsx("div", { children: renderServerCard(server) }, server.id)) });
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pro Component" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4", children: "Please login with CLI: moonui login"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/pricing",
+          className: "text-primary hover:underline text-sm font-medium",
+          children: "Get Pro Access \u2192"
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@moontra/moonui-pro",
-    "version": "2.31.0",
+    "version": "2.31.1",
     "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,6 @@
         "react-dom": ">=18.0.0 || ^19.0.0"
     },
     "dependencies": {
-        "@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",