@moontra/moonui-pro 2.1.0 → 2.1.1

package/src/components/enhanced/badge.tsx

@@ -0,0 +1,191 @@
+import React from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../lib/utils'
+
+const badgeVariants = cva(
+  ["inline-flex items-center gap-1.5", 
+  "font-medium transition-all duration-200", 
+  "border focus:outline-none",
+  "focus-visible:ring-2 focus-visible:ring-offset-1"],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-transparent bg-primary text-primary-foreground",
+          "hover:bg-primary/90",
+          "focus-visible:ring-primary/30",
+        ],
+        secondary: [
+          "border-transparent bg-secondary text-secondary-foreground",
+          "hover:bg-secondary/80",
+          "focus-visible:ring-gray-400/30",
+        ],
+        destructive: [
+          "border-transparent bg-destructive text-destructive-foreground",
+          "hover:bg-destructive/90",
+          "focus-visible:ring-destructive/30",
+        ],
+        outline: [
+          "border-input bg-transparent",
+          "hover:border-input/80",
+          "focus-visible:ring-gray-400/30",
+        ],
+        success: [
+          "border-transparent bg-green-500 text-white",
+          "hover:bg-green-600",
+          "focus-visible:ring-green-500/30",
+        ],
+        warning: [
+          "border-transparent bg-yellow-500 text-white",
+          "hover:bg-yellow-600",
+          "focus-visible:ring-yellow-500/30",
+        ],
+        pro: [
+          "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
+          "hover:from-purple-700 hover:to-pink-700",
+          "focus-visible:ring-purple-400/30",
+        ],
+      },
+      size: {
+        sm: "h-5 px-2 text-xs",
+        default: "h-6 px-3 text-sm",
+        lg: "h-8 px-4 text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface BadgeProProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {
+  enablePulse?: boolean
+  enableGlow?: boolean
+  enableShimmer?: boolean
+  removable?: boolean
+  onRemove?: () => void
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+}
+
+export const BadgePro = React.forwardRef<
+  HTMLDivElement,
+  BadgeProProps
+>(({
+  className,
+  variant,
+  size,
+  enablePulse = false,
+  enableGlow = false,
+  enableShimmer = false,
+  removable = false,
+  onRemove,
+  leftIcon,
+  rightIcon,
+  children,
+  ...props
+}, ref) => {
+  const [isRemoving, setIsRemoving] = React.useState(false)
+
+  const handleRemove = () => {
+    setIsRemoving(true)
+    setTimeout(() => {
+      onRemove?.()
+    }, 300)
+  }
+
+  // Auto-assign icons for special variants
+  let autoLeftIcon = leftIcon
+  let autoChildren = children
+  
+  if (variant === 'pro' && !leftIcon) {
+    autoLeftIcon = (
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-3 h-3">
+        <path d="M12 0L13.09 8.26L22 9L13.09 9.74L12 18L10.91 9.74L2 9L10.91 8.26L12 0Z" fill="currentColor"/>
+        <path d="M19 5L19.5 7L21 7.5L19.5 8L19 10L18.5 8L17 7.5L18.5 7L19 5Z" fill="currentColor"/>
+        <path d="M19 15L19.5 17L21 17.5L19.5 18L19 20L18.5 18L17 17.5L18.5 17L19 15Z" fill="currentColor"/>
+      </svg>
+    )
+    autoChildren = children || 'Pro'
+  }
+
+  return (
+    <AnimatePresence>
+      {!isRemoving && (
+        <motion.div
+          ref={ref}
+          className={cn(
+            badgeVariants({ variant, size }),
+            enablePulse && "animate-pulse",
+            enableGlow && "shadow-lg shadow-current/50",
+            enableShimmer && "relative overflow-hidden",
+            className
+          )}
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.8 }}
+          transition={{ duration: 0.2 }}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          {enableShimmer && (
+            <motion.div
+              className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
+              animate={{ translateX: "200%" }}
+              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+            />
+          )}
+          
+          {autoLeftIcon && (
+            <motion.span 
+              className="inline-flex shrink-0"
+              animate={enablePulse ? { scale: [1, 1.2, 1] } : {}}
+              transition={{ duration: 2, repeat: Infinity }}
+            >
+              {autoLeftIcon}
+            </motion.span>
+          )}
+          
+          <span className="truncate">{autoChildren}</span>
+          
+          {rightIcon && (
+            <span className="inline-flex shrink-0">
+              {rightIcon}
+            </span>
+          )}
+          
+          {removable && onRemove && (
+            <motion.button 
+              type="button"
+              className="ml-1 -mr-1 h-3.5 w-3.5 rounded-full inline-flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10"
+              onClick={handleRemove}
+              whileHover={{ rotate: 90 }}
+              transition={{ type: "spring", stiffness: 300 }}
+              aria-label="Remove badge"
+            >
+              <svg 
+                width="8" 
+                height="8" 
+                viewBox="0 0 8 8" 
+                fill="none" 
+                xmlns="http://www.w3.org/2000/svg"
+                className="opacity-70"
+                aria-hidden="true"
+              >
+                <path d="M0.799988 7.19999L7.19999 0.799988M0.799988 0.799988L7.19999 7.19999" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </motion.button>
+          )}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+})
+
+BadgePro.displayName = 'BadgePro'
+
+export { badgeVariants }

package/src/components/enhanced/button.tsx

@@ -48,7 +48,7 @@ interface RippleEffect {
   id: number
 }
 
-export interface EnhancedButtonProps
+export interface ButtonProProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof enhancedButtonVariants> {
   state?: "idle" | "loading" | "success" | "error"
@@ -60,7 +60,7 @@ export interface EnhancedButtonProps
   enableGlitch?: boolean
 }
 
-export const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButtonProps>(
+export const ButtonPro = React.forwardRef<HTMLButtonElement, ButtonProProps>(
   ({ 
     className, 
     variant, 
@@ -75,6 +75,8 @@ export const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButton
     enableParticles = false,
     enableMagnetic = false,
     enableGlitch = false,
+    disabled,
+    type = "button",
     ...props 
   }, ref) => {
     const [internalState, setInternalState] = useState<"idle" | "loading" | "success" | "error">("idle")
@@ -211,7 +213,8 @@ export const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButton
         onClick={handleClick}
         onMouseMove={handleMouseMove}
         onMouseLeave={handleMouseLeave}
-        disabled={currentState === "loading" || props.disabled}
+        disabled={currentState === "loading" || disabled}
+        type={type}
         animate={{
           x: magneticPosition.x,
           y: magneticPosition.y,
@@ -222,7 +225,6 @@ export const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButton
           damping: 15,
           mass: 0.1
         }}
-        {...props}
       >
         {/* Ripple effects */}
         <AnimatePresence>
@@ -355,6 +357,6 @@ export const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButton
   }
 )
 
-EnhancedButton.displayName = "EnhancedButton"
+ButtonPro.displayName = "ButtonPro"
 
 export { enhancedButtonVariants }

package/src/components/enhanced/card.tsx

@@ -4,7 +4,7 @@ import React, { useRef, useState } from "react"
 import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
 import { cn } from "../../lib/utils"
 
-export interface EnhancedCardProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardProProps extends React.HTMLAttributes<HTMLDivElement> {
   enableGlassmorphism?: boolean
   enableParallax?: boolean
   enableTilt?: boolean
@@ -15,7 +15,7 @@ export interface EnhancedCardProps extends React.HTMLAttributes<HTMLDivElement>
   parallaxOffset?: number
 }
 
-export const EnhancedCard = React.forwardRef<HTMLDivElement, EnhancedCardProps>(
+export const CardPro = React.forwardRef<HTMLDivElement, CardProProps>(
   ({ 
     className, 
     children,
@@ -100,11 +100,10 @@ export const EnhancedCard = React.forwardRef<HTMLDivElement, EnhancedCardProps>(
           perspective: "1000px"
         }}
         animate={{
-          rotateX: enableTilt ? rotateX : 0,
-          rotateY: enableTilt ? rotateY : 0,
+          rotateX: enableTilt ? rotateX.get() : 0,
+          rotateY: enableTilt ? rotateY.get() : 0,
         }}
         transition={{ type: "spring", ...springConfig }}
-        {...props}
       >
         {/* Glow effect overlay */}
         {enableGlow && (
@@ -190,10 +189,10 @@ export const EnhancedCard = React.forwardRef<HTMLDivElement, EnhancedCardProps>(
   }
 )
 
-EnhancedCard.displayName = "EnhancedCard"
+CardPro.displayName = "CardPro"
 
 // Enhanced Card sub-components with animations
-export const EnhancedCardHeader = React.forwardRef<
+export const CardProHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
@@ -203,10 +202,9 @@ export const EnhancedCardHeader = React.forwardRef<
     initial={{ opacity: 0, y: -10 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.3, delay: 0.1 }}
-    {...props}
   />
 ))
-EnhancedCardHeader.displayName = "EnhancedCardHeader"
+CardProHeader.displayName = "CardProHeader"
 
 export const EnhancedCardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -221,7 +219,6 @@ export const EnhancedCardTitle = React.forwardRef<
     initial={{ opacity: 0, x: -10 }}
     animate={{ opacity: 1, x: 0 }}
     transition={{ duration: 0.3, delay: 0.2 }}
-    {...props}
   />
 ))
 EnhancedCardTitle.displayName = "EnhancedCardTitle"
@@ -236,12 +233,11 @@ export const EnhancedCardDescription = React.forwardRef<
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.3, delay: 0.3 }}
-    {...props}
   />
 ))
 EnhancedCardDescription.displayName = "EnhancedCardDescription"
 
-export const EnhancedCardContent = React.forwardRef<
+export const CardProContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
@@ -251,12 +247,11 @@ export const EnhancedCardContent = React.forwardRef<
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.3, delay: 0.4 }}
-    {...props}
   />
 ))
-EnhancedCardContent.displayName = "EnhancedCardContent"
+CardProContent.displayName = "CardProContent"
 
-export const EnhancedCardFooter = React.forwardRef<
+export const CardProFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
@@ -266,7 +261,6 @@ export const EnhancedCardFooter = React.forwardRef<
     initial={{ opacity: 0, y: 10 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ duration: 0.3, delay: 0.5 }}
-    {...props}
   />
 ))
-EnhancedCardFooter.displayName = "EnhancedCardFooter"
+CardProFooter.displayName = "CardProFooter"

package/src/components/enhanced/dialog.tsx

@@ -11,15 +11,15 @@ const DialogTrigger = DialogPrimitive.Trigger
 const DialogPortal = DialogPrimitive.Portal
 const DialogClose = DialogPrimitive.Close
 
-interface EnhancedDialogOverlayProps
+interface DialogProOverlayProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
   blur?: "none" | "sm" | "md" | "lg" | "xl"
   variant?: "default" | "dark" | "light" | "gradient"
 }
 
-const EnhancedDialogOverlay = React.forwardRef<
+const DialogProOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
-  EnhancedDialogOverlayProps
+  DialogProOverlayProps
 >(({ className, blur = "md", variant = "default", ...props }, ref) => {
   const blurClasses = {
     none: "",
@@ -49,19 +49,19 @@ const EnhancedDialogOverlay = React.forwardRef<
     />
   )
 })
-EnhancedDialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+DialogProOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-interface EnhancedDialogContentProps
+interface DialogProContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   animation?: "fade" | "scale" | "slide" | "rotate" | "bounce"
   animationDuration?: number
   overlay?: boolean
-  overlayProps?: EnhancedDialogOverlayProps
+  overlayProps?: DialogProOverlayProps
 }
 
-const EnhancedDialogContent = React.forwardRef<
+const DialogProContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  EnhancedDialogContentProps
+  DialogProContentProps
 >(({ 
   className, 
   children, 
@@ -118,7 +118,7 @@ const EnhancedDialogContent = React.forwardRef<
             exit={{ opacity: 0 }}
             transition={{ duration: animationDuration * 0.8 }}
           >
-            <EnhancedDialogOverlay {...overlayProps} />
+            <DialogProOverlay {...overlayProps} />
           </motion.div>
         )}
         <motion.div
@@ -173,9 +173,9 @@ const EnhancedDialogContent = React.forwardRef<
     </AnimatePresence>
   )
 })
-EnhancedDialogContent.displayName = DialogPrimitive.Content.displayName
+DialogProContent.displayName = DialogPrimitive.Content.displayName
 
-const EnhancedDialogHeader = ({
+const DialogProHeader = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -187,12 +187,11 @@ const EnhancedDialogHeader = ({
     initial={{ opacity: 0, y: -10 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ delay: 0.1, duration: 0.3 }}
-    {...props}
   />
 )
-EnhancedDialogHeader.displayName = "EnhancedDialogHeader"
+DialogProHeader.displayName = "DialogProHeader"
 
-const EnhancedDialogFooter = ({
+const DialogProFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
@@ -204,12 +203,11 @@ const EnhancedDialogFooter = ({
     initial={{ opacity: 0, y: 10 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{ delay: 0.2, duration: 0.3 }}
-    {...props}
   />
 )
-EnhancedDialogFooter.displayName = "EnhancedDialogFooter"
+DialogProFooter.displayName = "DialogProFooter"
 
-const EnhancedDialogTitle = React.forwardRef<
+const DialogProTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
@@ -222,9 +220,9 @@ const EnhancedDialogTitle = React.forwardRef<
     {...props}
   />
 ))
-EnhancedDialogTitle.displayName = DialogPrimitive.Title.displayName
+DialogProTitle.displayName = DialogPrimitive.Title.displayName
 
-const EnhancedDialogDescription = React.forwardRef<
+const DialogProDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
@@ -234,15 +232,15 @@ const EnhancedDialogDescription = React.forwardRef<
     {...props}
   />
 ))
-EnhancedDialogDescription.displayName = DialogPrimitive.Description.displayName
+DialogProDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
-  Dialog as EnhancedDialog,
-  DialogTrigger as EnhancedDialogTrigger,
-  EnhancedDialogContent,
-  EnhancedDialogHeader,
-  EnhancedDialogFooter,
-  EnhancedDialogTitle,
-  EnhancedDialogDescription,
-  DialogClose as EnhancedDialogClose,
+  Dialog as DialogPro,
+  DialogTrigger as DialogProTrigger,
+  DialogProContent,
+  DialogProHeader,
+  DialogProFooter,
+  DialogProTitle,
+  DialogProDescription,
+  DialogClose as DialogProClose,
 }

package/src/components/enhanced/index.ts

@@ -1,3 +1,4 @@
 export * from './button'
 export * from './card'
-export * from './dialog'
+export * from './dialog'
+export * from './badge'

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

@@ -7,7 +7,7 @@ import { AlertTriangle, RefreshCw, Lock, Sparkles } from "lucide-react"
 import { cn } from "../../lib/utils"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface ErrorBoundaryProps {
+interface ErrorBoundaryProps {
   children: ReactNode
   fallback?: ReactNode
   className?: string
@@ -72,14 +72,12 @@ class ErrorBoundaryInternal extends Component<ErrorBoundaryProps, ErrorBoundaryS
 
 function ErrorBoundaryWrapper(props: ErrorBoundaryProps) {
   // Check if we're in docs mode or have pro access
-  const docsProAccess = { hasAccess: true } // Pro access assumed in package
   const { hasProAccess, isLoading } = useSubscription()
   
   // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
   
   // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-fit", props.className)}>
         <CardContent className="py-6 text-center">

package/src/components/file-upload/index.tsx

@@ -25,7 +25,7 @@ import { cn } from '../../lib/utils'
 import { useDocsProAccess } from '@/components/docs/docs-pro-provider'
 import { useSubscription } from '../../hooks/use-subscription'
 
-export interface FileUploadProps {
+interface FileUploadProps {
   accept?: string
   multiple?: boolean
   maxSize?: number // in MB
@@ -38,7 +38,7 @@ export interface FileUploadProps {
   allowedTypes?: string[]
 }
 
-export interface UploadedFile {
+interface UploadedFile {
   file: File
   id: string
   status: 'uploading' | 'success' | 'error'
@@ -77,14 +77,12 @@ export function FileUpload({
   allowedTypes = []
 }: FileUploadProps) {
   // Check if we're in docs mode or have pro access
-  const docsProAccess = useDocsProAccess()
   const { hasProAccess, isLoading } = useSubscription()
   
   // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
   
   // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-full", className)}>
         <CardContent className="py-12 text-center">

package/src/components/floating-action-button/index.tsx

@@ -142,7 +142,6 @@ const FloatingActionButtonInternal = React.forwardRef<HTMLButtonElement, Floatin
           whileTap={{ scale: 0.9 }}
           animate={{ rotate: isOpen ? 45 : 0 }}
           transition={{ duration: 0.2 }}
-          {...props}
         >
           {children || (actions.length > 0 ? <Plus className="h-5 w-5" /> : <Plus className="h-5 w-5" />)}
         </motion.button>
@@ -169,14 +168,12 @@ FloatingActionButtonInternal.displayName = "FloatingActionButtonInternal"
 export const FloatingActionButton = React.forwardRef<HTMLButtonElement, FloatingActionButtonProps>(
   ({ className, ...props }, ref) => {
     // Check if we're in docs mode or have pro access
-    const docsProAccess = { hasAccess: true } // Pro access assumed in package
     const { hasProAccess, isLoading } = useSubscription()
     
     // In docs mode, always show the component
-    const canShowComponent = docsProAccess.isDocsMode || hasProAccess
     
     // If not in docs mode and no pro access, show upgrade prompt
-    if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+    if (!isLoading && !hasProAccess) {
       return (
         <Card className={cn("w-fit", className)}>
           <CardContent className="py-6 text-center">

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

@@ -5,12 +5,12 @@ import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
 import { Badge } from "../ui/badge"
-import { Skeleton } from "@moontra/moonui"
+import { Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
 import { Star, GitFork, Eye, Users, ExternalLink, Github, Lock, Sparkles, RefreshCw } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface GitHubRepository {
+interface GitHubRepository {
   id: number
   name: string
   full_name: string
@@ -31,7 +31,7 @@ export interface GitHubRepository {
   }
 }
 
-export interface GitHubStarsProps {
+interface GitHubStarsProps {
   username: string
   repositories?: string[]
   showDescription?: boolean
@@ -375,14 +375,12 @@ const GitHubStarsInternal: React.FC<GitHubStarsProps> = ({
 
 export const GitHubStars: React.FC<GitHubStarsProps> = ({ className, ...props }) => {
   // Check if we're in docs mode or have pro access
-  const docsProAccess = { hasAccess: true } // Pro access assumed in package
   const { hasProAccess, isLoading } = useSubscription()
   
   // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
   
   // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-fit", className)}>
         <CardContent className="py-6 text-center">

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

@@ -25,7 +25,7 @@ import {
 } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface HealthCheckEndpoint {
+interface HealthCheckEndpoint {
   id: string
   name: string
   url: string
@@ -37,7 +37,7 @@ export interface HealthCheckEndpoint {
   critical?: boolean
 }
 
-export interface HealthCheckResult {
+interface HealthCheckResult {
   id: string
   name: string
   status: "healthy" | "unhealthy" | "warning" | "pending"
@@ -48,7 +48,7 @@ export interface HealthCheckResult {
   uptime?: number
 }
 
-export interface HealthCheckProps {
+interface HealthCheckProps {
   endpoints: HealthCheckEndpoint[]
   interval?: number
   autoRefresh?: boolean
@@ -242,7 +242,7 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
                 <CardTitle className="flex items-center gap-2">
                   System Health
                   <Badge 
-                    variant={overallStatus === "healthy" ? "default" : "destructive"}
+                    variant={overallStatus === "healthy" ? "secondary" : "destructive"}
                     className={cn(
                       "text-white",
                       overallStatus === "healthy" && "bg-green-500",
@@ -402,14 +402,12 @@ const HealthCheckInternal: React.FC<HealthCheckProps> = ({
 
 export const HealthCheck: React.FC<HealthCheckProps> = ({ className, ...props }) => {
   // Check if we're in docs mode or have pro access
-  const docsProAccess = { hasAccess: true } // Pro access assumed in package
   const { hasProAccess, isLoading } = useSubscription()
   
   // In docs mode, always show the component
-  const canShowComponent = docsProAccess.isDocsMode || hasProAccess
   
   // If not in docs mode and no pro access, show upgrade prompt
-  if (!docsProAccess.isDocsMode && !isLoading && !hasProAccess) {
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-fit", className)}>
         <CardContent className="py-6 text-center">