@moontra/moonui-pro 2.20.1 → 2.20.2

package/src/components/dashboard/widgets/progress-widget.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card'
+import { Progress } from '../../ui/progress'
+import { cn } from '../../../lib/utils'
+import { ProgressData } from '../types'
+import { Clock, TrendingUp, Target } from 'lucide-react'
+
+interface ProgressWidgetProps {
+  data: ProgressData | ProgressData[]
+  title?: string
+  className?: string
+  glassmorphism?: boolean
+}
+
+export function ProgressWidget({
+  data,
+  title = "Progress",
+  className,
+  glassmorphism = false
+}: ProgressWidgetProps) {
+  const items = Array.isArray(data) ? data : [data]
+  const [isMounted, setIsMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return (
+    <Card className={cn(
+      "h-full flex flex-col",
+      glassmorphism && "bg-background/60 backdrop-blur-md border-white/10",
+      className
+    )}>
+      <CardHeader className="pb-3 space-y-0">
+        <CardTitle className="text-sm sm:text-base font-semibold flex items-center gap-2">
+          <Target className="h-4 w-4 text-muted-foreground" />
+          <span className="truncate">{title}</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex-1 space-y-3 overflow-auto">
+        {items.map((item, index) => {
+          const progress = (item.current / item.target) * 100
+          const isOverdue = item.deadline && new Date(item.deadline) < new Date()
+          
+          return (
+            <motion.div
+              key={item.id}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.05 }}
+              className="space-y-2"
+            >
+              <div className="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
+                <div className="flex-1 min-w-0">
+                  <h4 className="text-xs sm:text-sm font-medium truncate">{item.title}</h4>
+                  {item.description && (
+                    <p className="text-xs text-muted-foreground mt-0.5 truncate">{item.description}</p>
+                  )}
+                </div>
+                <div className="text-left sm:text-right">
+                  <p className="text-xs sm:text-sm font-semibold tabular-nums">
+                    {item.current} / {item.target} {item.unit}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {progress.toFixed(1)}%
+                  </p>
+                </div>
+              </div>
+              
+              <div className="relative">
+                <Progress 
+                  value={Math.min(progress, 100)} 
+                  className={cn(
+                    "h-1.5 sm:h-2",
+                    isOverdue && "[&>div]:bg-destructive"
+                  )}
+                />
+                {item.milestone && (
+                  <div 
+                    className="absolute top-1/2 -translate-y-1/2 w-0.5 h-3 sm:h-4 bg-border"
+                    style={{ left: `${(item.milestone / item.target) * 100}%` }}
+                  />
+                )}
+              </div>
+              
+              {item.deadline && (
+                <div className={cn(
+                  "flex items-center gap-1 text-xs",
+                  isOverdue ? "text-destructive" : "text-muted-foreground"
+                )}>
+                  <Clock className="h-3 w-3" />
+                  <span>
+                    {isOverdue ? 'Overdue' : 'Due'}: {isMounted ? new Date(item.deadline).toLocaleDateString() : 'Loading...'}
+                  </span>
+                </div>
+              )}
+              
+              {item.trend && (
+                <div className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+                  <TrendingUp className="h-3 w-3" />
+                  <span>+{item.trend}% this week</span>
+                </div>
+              )}
+            </motion.div>
+          )
+        })}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/error-boundary/index.tsx

@@ -1,80 +1,202 @@
 "use client"
 
-import React, { Component, ErrorInfo, ReactNode } from "react"
+import React, { Component, ErrorInfo, ReactNode, ComponentType, useEffect, useRef } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Button } from "../ui/button"
 import { AlertTriangle, RefreshCw, Lock, Sparkles } from "lucide-react"
 import { cn } from "../../lib/utils"
 import { useSubscription } from "../../hooks/use-subscription"
 
+// Types for error fallback component props
+export interface ErrorFallbackProps {
+  error: Error
+  resetErrorBoundary: () => void
+  errorInfo?: ErrorInfo
+}
+
 interface ErrorBoundaryProps {
   children: ReactNode
-  fallback?: ReactNode
+  fallback?: ComponentType<ErrorFallbackProps> | ReactNode
   className?: string
   onError?: (error: Error, errorInfo: ErrorInfo) => void
+  onReset?: () => void
+  isolate?: boolean
+  resetKeys?: unknown[]
+  resetOnPropsChange?: boolean
+  showErrorDetails?: boolean
 }
 
 interface ErrorBoundaryState {
   hasError: boolean
   error?: Error
+  errorInfo?: ErrorInfo
 }
 
 class ErrorBoundaryInternal extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  resetTimeoutId: NodeJS.Timeout | null = null
+  previousResetKeys: unknown[] = []
+
   constructor(props: ErrorBoundaryProps) {
     super(props)
     this.state = { hasError: false }
+    this.previousResetKeys = props.resetKeys || []
   }
 
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
     return { hasError: true, error }
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.props.onError?.(error, errorInfo)
-    console.error('ErrorBoundary caught an error:', error, errorInfo)
+    const { onError, isolate } = this.props
+    
+    // Store error info in state for fallback component
+    this.setState({ errorInfo })
+    
+    // Call error handler if provided
+    onError?.(error, errorInfo)
+    
+    // Log error (with isolation context if applicable)
+    if (isolate) {
+      console.error('[Isolated ErrorBoundary] caught an error:', error, errorInfo)
+    } else {
+      console.error('ErrorBoundary caught an error:', error, errorInfo)
+    }
   }
 
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback
+  componentDidUpdate(prevProps: ErrorBoundaryProps) {
+    const { resetKeys, resetOnPropsChange } = this.props
+    const { hasError } = this.state
+    
+    // Check if we should reset based on resetKeys change
+    if (hasError && resetKeys) {
+      const hasResetKeyChanged = resetKeys.some(
+        (key, index) => key !== this.previousResetKeys[index]
+      )
+      
+      if (hasResetKeyChanged) {
+        this.previousResetKeys = resetKeys
+        this.resetErrorBoundary()
+      }
+    }
+    
+    // Reset on any props change if enabled
+    if (hasError && resetOnPropsChange && prevProps !== this.props) {
+      // Avoid resetting due to children changes
+      const propsWithoutChildren = { ...this.props, children: null }
+      const prevPropsWithoutChildren = { ...prevProps, children: null }
+      
+      if (JSON.stringify(propsWithoutChildren) !== JSON.stringify(prevPropsWithoutChildren)) {
+        this.resetErrorBoundary()
+      }
+    }
+  }
+
+  resetErrorBoundary = () => {
+    const { onReset } = this.props
+    onReset?.()
+    this.setState({ hasError: false, error: undefined, errorInfo: undefined })
+  }
+
+  renderFallback() {
+    const { fallback, className, showErrorDetails } = this.props
+    const { error, errorInfo } = this.state
+
+    if (!error) return null
+
+    // If custom fallback is provided
+    if (fallback) {
+      // If fallback is a component
+      if (typeof fallback === 'function') {
+        const FallbackComponent = fallback as ComponentType<ErrorFallbackProps>
+        return (
+          <FallbackComponent
+            error={error}
+            resetErrorBoundary={this.resetErrorBoundary}
+            errorInfo={errorInfo}
+          />
+        )
       }
+      // If fallback is a ReactNode
+      return fallback
+    }
 
-      return (
-        <div className={cn("flex items-center justify-center min-h-[200px] p-4", this.props.className)}>
-          <Card className="w-full max-w-md">
-            <CardHeader className="text-center">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                <AlertTriangle className="h-6 w-6 text-red-600" />
+    // Default fallback UI
+    return (
+      <div className={cn("flex items-center justify-center min-h-[200px] p-4", className)}>
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/20">
+              <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
+            </div>
+            <CardTitle>Something went wrong</CardTitle>
+            <CardDescription>
+              {showErrorDetails && process.env.NODE_ENV === 'development' 
+                ? error.message 
+                : "An error occurred while rendering this component"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="text-center">
+            {showErrorDetails && process.env.NODE_ENV === 'development' && (
+              <div className="mb-4 p-3 bg-muted rounded-md text-left">
+                <pre className="text-xs overflow-auto">
+                  <code>{error.stack}</code>
+                </pre>
               </div>
-              <CardTitle>Something went wrong</CardTitle>
-              <CardDescription>
-                An error occurred while rendering this component
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="text-center">
-              <Button 
-                onClick={() => this.setState({ hasError: false, error: undefined })}
-                className="mt-4"
-              >
-                <RefreshCw className="mr-2 h-4 w-4" />
-                Try again
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      )
+            )}
+            <Button 
+              onClick={this.resetErrorBoundary}
+              className="mt-4"
+            >
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Try again
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  render() {
+    const { hasError } = this.state
+    const { children, isolate } = this.props
+
+    if (hasError) {
+      // If isolate is true, prevent error propagation
+      if (isolate) {
+        try {
+          return this.renderFallback()
+        } catch (fallbackError) {
+          // If fallback also fails, show minimal error UI
+          console.error('Error boundary fallback failed:', fallbackError)
+          return (
+            <div className="p-4 text-center text-red-600">
+              Critical error: Unable to recover
+            </div>
+          )
+        }
+      }
+      return this.renderFallback()
     }
 
-    return this.props.children
+    return children
+  }
+
+  componentWillUnmount() {
+    if (this.resetTimeoutId) {
+      clearTimeout(this.resetTimeoutId)
+    }
   }
 }
 
+// Functional wrapper to handle Pro subscription check
 function ErrorBoundaryWrapper(props: ErrorBoundaryProps) {
-  // Check if we're in docs mode or have pro access
   const { hasProAccess, isLoading } = useSubscription()
-  
-  // In docs mode, always show the component
+  const prevResetKeysRef = useRef(props.resetKeys)
+
+  // Track resetKeys changes for functional component
+  useEffect(() => {
+    prevResetKeysRef.current = props.resetKeys
+  }, [props.resetKeys])
   
   // If not in docs mode and no pro access, show upgrade prompt
   if (!isLoading && !hasProAccess) {
@@ -106,4 +228,5 @@ function ErrorBoundaryWrapper(props: ErrorBoundaryProps) {
   return <ErrorBoundaryInternal {...props} />
 }
 
-export const ErrorBoundary = ErrorBoundaryWrapper
+export const ErrorBoundary = ErrorBoundaryWrapper
+export type { ErrorBoundaryProps }

package/src/components/form-wizard/form-wizard-context.tsx

@@ -96,36 +96,64 @@ export const FormWizardProvider: React.FC<FormWizardProviderProps> = ({
   const validateCurrentStep = useCallback(async (): Promise<boolean> => {
     const step = steps[currentStep]
     
-    // First check HTML5 validation for required fields
-    if (typeof window !== 'undefined') {
+    // Check if automatic validation should be performed
+    const shouldValidateFields = step.requiredFields !== false
+    
+    // First check HTML5 validation for required fields if enabled
+    if (shouldValidateFields && typeof window !== 'undefined') {
       const stepElement = document.querySelector('[data-wizard-step-content]')
       if (stepElement) {
-        const requiredInputs = stepElement.querySelectorAll('input[required], select[required], textarea[required]')
-        const emptyFields: string[] = []
-        
-        requiredInputs.forEach((input: Element) => {
-          const htmlInput = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-          if (!htmlInput.value || htmlInput.value.trim() === '') {
-            const label = document.querySelector(`label[for="${htmlInput.id}"]`)
-            const fieldName = label ? (label.textContent?.replace(' *', '') || 'Field') : htmlInput.name || htmlInput.id || 'Field'
-            emptyFields.push(fieldName)
+        // If requiredFields is an array, only check those specific fields
+        if (Array.isArray(step.requiredFields)) {
+          const emptyFields: string[] = []
+          
+          step.requiredFields.forEach((fieldName) => {
+            const field = stepElement.querySelector(`[name="${fieldName}"], [id="${fieldName}"]`)
+            if (field) {
+              const htmlField = field as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+              if (field.tagName === 'INPUT' && (field as HTMLInputElement).type === 'checkbox') {
+                if (!(field as HTMLInputElement).checked) {
+                  emptyFields.push(fieldName)
+                }
+              } else if (!htmlField.value || htmlField.value.trim() === '') {
+                emptyFields.push(fieldName)
+              }
+            }
+          })
+          
+          if (emptyFields.length > 0) {
+            setError(`Please fill in the following required fields: ${emptyFields.join(', ')}`)
+            return false
           }
-        })
-        
-        // Check for required checkboxes
-        const requiredCheckboxes = stepElement.querySelectorAll('input[type="checkbox"][required]')
-        requiredCheckboxes.forEach((checkbox: Element) => {
-          const htmlCheckbox = checkbox as HTMLInputElement
-          if (!htmlCheckbox.checked) {
-            const label = document.querySelector(`label[for="${htmlCheckbox.id}"]`)
-            const fieldName = label ? (label.textContent?.replace(' *', '') || 'Checkbox') : htmlCheckbox.name || htmlCheckbox.id || 'Checkbox'
-            emptyFields.push(fieldName)
+        } else {
+          // Default behavior: check all required fields
+          const requiredInputs = stepElement.querySelectorAll('input[required], select[required], textarea[required]')
+          const emptyFields: string[] = []
+          
+          requiredInputs.forEach((input: Element) => {
+            const htmlInput = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+            if (!htmlInput.value || htmlInput.value.trim() === '') {
+              const label = document.querySelector(`label[for="${htmlInput.id}"]`)
+              const fieldName = label ? (label.textContent?.replace(' *', '') || 'Field') : htmlInput.name || htmlInput.id || 'Field'
+              emptyFields.push(fieldName)
+            }
+          })
+          
+          // Check for required checkboxes
+          const requiredCheckboxes = stepElement.querySelectorAll('input[type="checkbox"][required]')
+          requiredCheckboxes.forEach((checkbox: Element) => {
+            const htmlCheckbox = checkbox as HTMLInputElement
+            if (!htmlCheckbox.checked) {
+              const label = document.querySelector(`label[for="${htmlCheckbox.id}"]`)
+              const fieldName = label ? (label.textContent?.replace(' *', '') || 'Checkbox') : htmlCheckbox.name || htmlCheckbox.id || 'Checkbox'
+              emptyFields.push(fieldName)
+            }
+          })
+          
+          if (emptyFields.length > 0) {
+            setError(`Please fill in the following required fields: ${emptyFields.join(', ')}`)
+            return false
           }
-        })
-        
-        if (emptyFields.length > 0) {
-          setError(`Please fill in the following required fields: ${emptyFields.join(', ')}`)
-          return false
         }
       }
     }

package/src/components/form-wizard/form-wizard-progress.tsx

@@ -42,7 +42,10 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
         {orientation === 'horizontal' ? (
           <div className="relative w-full">
             {/* Steps Container with connecting lines */}
-            <div className="relative flex items-start justify-between w-full">
+            <div className={cn(
+              "relative flex items-start justify-between w-full",
+              stepIconPosition === 'left' && "pl-14"
+            )}>
               {steps.map((step, index) => {
                 const isActive = index === currentStep
                 const isCompleted = isStepCompleted(index)
@@ -55,6 +58,34 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
 
                 return (
                   <div key={step.id} className="relative flex-1 flex flex-col items-center">
+                    {/* Step Icon - Left Position */}
+                    {stepIconPosition === 'left' && StepIcon && (
+                      <div className="absolute -left-12 top-1/2 -translate-y-1/2 flex items-center justify-center">
+                        <span className={cn(
+                          "w-8 h-8 flex items-center justify-center transition-colors",
+                          isActive && "text-primary",
+                          isCompleted && !isActive && "text-primary",
+                          !isActive && !isCompleted && "text-muted-foreground"
+                        )}>
+                          {StepIcon}
+                        </span>
+                      </div>
+                    )}
+
+                    {/* Step Icon - Top Position */}
+                    {stepIconPosition === 'top' && StepIcon && (
+                      <div className="flex items-center justify-center mb-2">
+                        <span className={cn(
+                          "w-8 h-8 flex items-center justify-center transition-colors",
+                          isActive && "text-primary",
+                          isCompleted && !isActive && "text-primary",
+                          !isActive && !isCompleted && "text-muted-foreground"
+                        )}>
+                          {StepIcon}
+                        </span>
+                      </div>
+                    )}
+
                     {/* Step Title & Description - Above the circle */}
                     {showStepTitles && (
                       <div className="text-center mb-3 min-h-[40px] px-2">
@@ -119,7 +150,7 @@ export const FormWizardProgress: React.FC<FormWizardProgressProps> = ({
                           completedStepIcon
                         ) : isActive && activeStepIcon ? (
                           activeStepIcon
-                        ) : StepIcon ? (
+                        ) : StepIcon && stepIconPosition === 'inside' ? (
                           <span className="w-5 h-5 flex items-center justify-center">{StepIcon}</span>
                         ) : showStepNumbers ? (
                           <span className="text-sm font-semibold">{index + 1}</span>

package/src/components/form-wizard/types.ts

@@ -6,7 +6,8 @@ export interface WizardStep {
   description?: string
   icon?: ReactNode | ((props: { isActive: boolean; isCompleted: boolean }) => ReactNode)
   content: ReactNode | ((props: WizardStepContentProps) => ReactNode)
-  validation?: () => boolean | Promise<boolean>
+  validation?: () => boolean | Promise<boolean> | { isValid: boolean; error?: string; errors?: string[] }
+  requiredFields?: string[] | boolean // Array of field names or boolean to enable/disable automatic validation
   isOptional?: boolean
   isDisabled?: boolean | ((currentStep: number, steps: WizardStep[]) => boolean)
   onEnter?: () => void | Promise<void>

package/src/components/github-stars/hooks.ts

@@ -462,6 +462,7 @@ function getMockGitHubData(
       full_name: `${username || "moonui"}/${repository || "awesome-project"}`,
       description: "An amazing open source project with great features",
       html_url: `https://github.com/${username || "moonui"}/${repository || "awesome-project"}`,
+      private: false,
       homepage: "https://awesome-project.dev",
       stargazers_count: 12453,
       watchers_count: 543,

package/src/components/github-stars/variants.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import React from "react"
 import { motion } from "framer-motion"
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
@@ -296,7 +298,7 @@ export const DetailedVariant: React.FC<BaseVariantProps & { onExport?: () => voi
             {stats.mostStarredRepo && (
               <Card 
                 className="hover:shadow-md transition-shadow cursor-pointer"
-                onClick={() => window.open(`https://github.com/${stats.mostStarredRepo.owner?.login}/${stats.mostStarredRepo.name}`, '_blank')}
+                onClick={() => stats.mostStarredRepo && window.open(`https://github.com/${stats.mostStarredRepo.owner?.login}/${stats.mostStarredRepo.name}`, '_blank')}
               >
                 <CardContent className="p-6">
                   <div className="flex items-center justify-between">

package/src/components/health-check/index.tsx

@@ -233,7 +233,7 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
 
   return (
     <Card className={cn("w-full", className)}>
-      <CardHeader>
+      <CardHeader className="p-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-2">
@@ -266,7 +266,7 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
             {showUptime && (
               <div className="text-right">
                 <div className="text-sm font-medium">{overallUptime.toFixed(1)}%</div>
-                <div className="text-xs text-muted-foreground">Uptime</div>
+                <div className="text-xs text-muted-foreground mt-0.5">Uptime</div>
               </div>
             )}
             
@@ -282,19 +282,19 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
         </div>
 
         {/* Overall Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
-          <div className="text-center">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
+          <div className="p-6 text-center bg-muted/10 rounded-lg">
             <div className="text-2xl font-bold text-green-500">{healthyCount}</div>
-            <div className="text-xs text-muted-foreground">Healthy</div>
+            <div className="text-xs text-muted-foreground mt-1">Healthy</div>
           </div>
-          <div className="text-center">
+          <div className="p-6 text-center bg-muted/10 rounded-lg">
             <div className="text-2xl font-bold text-red-500">
               {results.filter(r => r.status === "unhealthy").length}
             </div>
-            <div className="text-xs text-muted-foreground">Unhealthy</div>
+            <div className="text-xs text-muted-foreground mt-1">Unhealthy</div>
           </div>
           {showResponseTime && (
-            <div className="text-center">
+            <div className="p-6 text-center bg-muted/10 rounded-lg">
               <div className="text-lg font-bold">
                 {results.length > 0 
                   ? formatResponseTime(
@@ -303,17 +303,17 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
                   : "0ms"
                 }
               </div>
-              <div className="text-xs text-muted-foreground">Avg Response</div>
+              <div className="text-xs text-muted-foreground mt-1">Avg Response</div>
             </div>
           )}
-          <div className="text-center">
+          <div className="p-6 text-center bg-muted/10 rounded-lg">
             <div className="text-lg font-bold">{results.length}</div>
-            <div className="text-xs text-muted-foreground">Services</div>
+            <div className="text-xs text-muted-foreground mt-1">Services</div>
           </div>
         </div>
       </CardHeader>
 
-      <CardContent>
+      <CardContent className="p-6 pt-0">
         <div className="space-y-4">
           <AnimatePresence>
             {results.map((result, index) => (
@@ -348,7 +348,7 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
                             <div className="font-medium">
                               {formatResponseTime(result.responseTime)}
                             </div>
-                            <div className="text-xs text-muted-foreground">Response</div>
+                            <div className="text-xs text-muted-foreground mt-0.5">Response</div>
                           </div>
                         )}
                         
@@ -357,7 +357,7 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
                             <div className="font-medium">
                               {calculateUptime(result.id).toFixed(1)}%
                             </div>
-                            <div className="text-xs text-muted-foreground">Uptime</div>
+                            <div className="text-xs text-muted-foreground mt-0.5">Uptime</div>
                           </div>
                         )}
                       </div>

package/src/components/hover-card-3d/index.tsx

@@ -10,7 +10,7 @@ import { useSubscription } from "../../hooks/use-subscription"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const hoverCard3DVariants = cva(
-  "relative rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200",
+  "relative rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200 isolate",
   {
     variants: {
       variant: {
@@ -475,10 +475,9 @@ const HoverCard3DInternal = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
         {/* Glow effect */}
         {glowEffect !== 'none' && (
           <motion.div
-            className="absolute inset-0 rounded-lg pointer-events-none"
+            className="absolute inset-0 rounded-lg pointer-events-none -z-10"
             animate={glowStyle}
             transition={{ duration: 0.3 * (1 / animationSpeed) }}
-            style={{ zIndex: -1 }}
           />
         )}
       </motion.div>