@moontra/moonui-pro 2.31.0 → 2.31.2

package/dist/index.mjs

@@ -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,207 @@ 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"
+    }
+  };
+}
+function ProLockScreen({
+  componentName = "Pro Component",
+  className,
+  compact = false
+}) {
+  if (compact) {
+    return /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex flex-col items-center justify-center p-4 text-center",
+      "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700",
+      "bg-gray-50/50 dark:bg-gray-900/50",
+      className
+    ), children: [
+      /* @__PURE__ */ jsx(Lock, { className: "h-8 w-8 text-gray-400 dark:text-gray-600 mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "CLI Authentication Required"  }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "https://moonui.dev/docs/cli#authentication" ,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-xs text-primary hover:underline font-medium mt-1",
+          children: "Setup CLI Auth \u2192" 
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn(
+    "flex flex-col items-center justify-center",
+    "rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-700",
+    "bg-gradient-to-b from-gray-50 to-gray-100/50 dark:from-gray-900 dark:to-gray-950/50",
+    "p-8 text-center min-h-[200px]",
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-primary/20 blur-xl rounded-full" }),
+      /* @__PURE__ */ jsx(Lock, { className: "relative h-12 w-12 text-gray-400 dark:text-gray-600 mb-4" })
+    ] }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: componentName }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mb-4 max-w-sm", children: "CLI authentication required to access Pro components"  }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: "https://moonui.dev/docs/cli#authentication" ,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(Lock, { className: "h-3 w-3" }),
+            "Setup CLI Authentication" 
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Run: moonui login"  }),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://moonui.dev/pricing",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-xs text-primary hover:underline",
+            children: "View Pro Plans \u2192"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 var defaultColors = [
   "#000000",
   "#374151",
@@ -4748,6 +4956,7 @@ var MoonUIColorPickerPro = ({
   size: size4 = "default",
   presets = defaultColors
 }) => {
+  const { hasProAccess, isLoading } = useSubscription();
   const [currentColor, setCurrentColor] = useState(value);
   const handleColorChange = (color) => {
     setCurrentColor(color);
@@ -4758,6 +4967,15 @@ var MoonUIColorPickerPro = ({
     default: "w-8 h-8",
     lg: "w-10 h-10"
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Color Picker",
+        compact: true
+      }
+    );
+  }
   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 +8320,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 +8425,15 @@ var MoonUITabsPro = t.forwardRef(({
       scrollRef.current.scrollBy({ left: 200, behavior: "smooth" });
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Tabs Pro",
+        compact: true
+      }
+    );
+  }
   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 +12872,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 +13282,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 +13298,15 @@ function LightboxProvider({ children, items = [], defaultIndex = 0 }) {
     }),
     [items, currentIndex, isOpen, zoom]
   );
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Lightbox",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(LightboxContext.Provider, { value, children });
 }
 var LightboxTrigger = t.forwardRef(
@@ -13661,6 +13803,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 +13963,15 @@ 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__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Media Gallery",
+        compact: true
+      }
+    );
+  }
   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 +14142,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 +14339,15 @@ function DraggableList({
     }
     return null;
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Draggable List",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -17174,17 +17336,13 @@ function CalendarInternal({
 function Calendar3(props) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", props.className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced Calendar is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Advanced Calendar",
+        className: cn("w-full", props.className)
+      }
+    );
   }
   return /* @__PURE__ */ jsx(CalendarInternal, { ...props });
 }
@@ -58349,17 +58507,13 @@ function RichTextEditor({
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced Rich Text Editor is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Advanced Rich Text Editor",
+        className: cn("w-full", className)
+      }
+    );
   }
   const [aiSettings, setAiSettings] = useState(() => {
     if (persistAISettings && typeof window !== "undefined") {
@@ -63385,16 +63539,13 @@ function AdvancedChartInternal({
 function AdvancedChart(props) {
   const { hasProAccess } = useSubscription();
   if (!hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: "w-full", children: /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "flex flex-col items-center justify-center py-12", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4", children: /* @__PURE__ */ jsx(Lock, { className: "w-8 h-8 text-primary" }) }),
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-center mb-2", children: "Advanced Chart - Pro Feature" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-center text-sm mb-6 max-w-sm", children: "Professional chart component with advanced features like animations, themes, and interactive controls requires a Pro subscription." }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "secondary", className: "bg-gradient-to-r from-purple-500/10 to-pink-500/10 text-purple-700 dark:text-purple-300", children: [
-        /* @__PURE__ */ jsx(Sparkles, { className: "w-3 h-3 mr-1" }),
-        "Pro Feature"
-      ] }) }),
-      /* @__PURE__ */ jsx(MoonUIButtonPro, { className: "mt-4", size: "sm", children: "Upgrade to Pro" })
-    ] }) });
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Advanced Chart",
+        className: "w-full"
+      }
+    );
   }
   return /* @__PURE__ */ jsx(AdvancedChartInternal, { ...props });
 }
@@ -66865,17 +67016,13 @@ var DashboardInternal = t__default.memo(function DashboardInternal2({
 var Dashboard = t__default.memo(function Dashboard2(props) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", props.className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Dashboard is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Dashboard",
+        className: cn("w-full", props.className)
+      }
+    );
   }
   return /* @__PURE__ */ jsx(DashboardInternal, { ...props });
 });
@@ -74005,17 +74152,13 @@ function DataTable({
   }, [originalColumns]);
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Data Table is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-center", children: /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Data Table",
+        className: cn("w-full", className)
+      }
+    );
   }
   const [sorting, setSorting] = t__default.useState([]);
   const [columnFilters, setColumnFilters] = t__default.useState([]);
@@ -75426,17 +75569,14 @@ function SidebarInternal({
 function Sidebar(props) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full max-w-xs", props.className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-12 text-center", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced Sidebar is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Advanced Sidebar",
+        compact: true,
+        className: cn("w-full max-w-xs", props.className)
+      }
+    );
   }
   return /* @__PURE__ */ jsx(SidebarInternal, { ...props });
 }
@@ -76300,17 +76440,13 @@ function NavbarInternal({
 function Navbar(props) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
-    return /* @__PURE__ */ jsx(MoonUICardPro, { className: cn("w-full", props.className), children: /* @__PURE__ */ jsx(MoonUICardContentPro, { className: "py-8 text-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-md mx-auto space-y-4", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto", children: /* @__PURE__ */ jsx(Lock, { className: "h-6 w-6 text-purple-600 dark:text-purple-400" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-lg mb-2", children: "Pro Feature" }),
-        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm mb-4", children: "Advanced Navbar is available exclusively to MoonUI Pro subscribers." }),
-        /* @__PURE__ */ jsx("a", { href: "/pricing", children: /* @__PURE__ */ jsxs(MoonUIButtonPro, { size: "sm", children: [
-          /* @__PURE__ */ jsx(Sparkles, { className: "mr-2 h-4 w-4" }),
-          "Upgrade to Pro"
-        ] }) })
-      ] })
-    ] }) }) });
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Advanced Navbar",
+        className: cn("w-full", props.className)
+      }
+    );
   }
   return /* @__PURE__ */ jsx(NavbarInternal, { ...props });
 }
@@ -85526,6 +85662,7 @@ var MoonUIAvatarPro2 = t.forwardRef(({
   error = false,
   ...props
 }, ref) => {
+  useSubscription();
   const animationClasses = {
     pulse: "animate-pulse",
     bounce: "animate-bounce",
@@ -85623,6 +85760,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 +85769,15 @@ var MoonUIAvatarGroupPro2 = t.forwardRef(({ children, max: max2 = 4, size: size4
     normal: "-space-x-2",
     loose: "-space-x-1"
   };
+  if (!isCheckingAuth && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Avatar Pro",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -85667,6 +85814,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 +85825,15 @@ 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__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Avatar Pro",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     MoonUIAvatarPro2,
     {
@@ -85859,6 +86016,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 +86179,15 @@ function KPIWidget({
       index2
     );
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "KPI Widget",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -86052,6 +86219,7 @@ function ChartWidget2({
   onDataPointClick,
   ...widgetProps
 }) {
+  const { hasProAccess, isLoading } = useSubscription();
   const [hoveredIndex, setHoveredIndex] = t__default.useState(null);
   const defaultColors2 = [
     "#3b82f6",
@@ -86417,6 +86585,15 @@ function ChartWidget2({
         return renderBarChart();
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Chart Widget",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -86469,6 +86646,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 +86903,15 @@ function GaugeWidget({
         return renderRadialGauge(gauge, index2);
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Gauge Widget",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -86757,6 +86944,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 +87243,15 @@ function FunnelWidget({
         return renderVerticalFunnel();
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Funnel Widget",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -87105,6 +87302,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 +87712,15 @@ function RevenueWidget({
         ] });
     }
   };
+  if (!isLoading && !hasProAccess) {
+    return /* @__PURE__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Revenue Widget",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {
@@ -87540,6 +87747,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 +88101,15 @@ 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__ */ jsx(
+      ProLockScreen,
+      {
+        componentName: "Server Monitor Widget",
+        compact: true
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     WidgetBase,
     {