@moontra/moonui-pro 2.0.23 → 2.1.1

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

@@ -84,12 +84,11 @@ const HoverCard3DInternal = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
           transformStyle: "preserve-3d",
         }}
         animate={{
-          rotateX: isHovered ? rotateX : 0,
-          rotateY: isHovered ? rotateY : 0,
+          rotateX: isHovered ? rotateX.get() : 0,
+          rotateY: isHovered ? rotateY.get() : 0,
           scale: isHovered ? 1.05 : 1,
         }}
         transition={{ duration: 0.15 }}
-        {...props}
       >
         <motion.div
           className="relative z-10"
@@ -130,14 +129,12 @@ HoverCard3DInternal.displayName = "HoverCard3DInternal"
 export const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
   ({ 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/kanban/index.tsx

@@ -22,7 +22,7 @@ import { cn } from '../../lib/utils'
 // Note: DocsProAccess should be handled by consuming application
 import { useSubscription } from '../../hooks/use-subscription'
 
-export interface KanbanCard {
+interface KanbanCard {
   id: string
   title: string
   description?: string
@@ -39,7 +39,7 @@ export interface KanbanCard {
   completed?: boolean
 }
 
-export interface KanbanColumn {
+interface KanbanColumn {
   id: string
   title: string
   color?: string
@@ -47,7 +47,7 @@ export interface KanbanColumn {
   limit?: number
 }
 
-export interface KanbanProps {
+interface KanbanProps {
   columns: KanbanColumn[]
   onCardMove?: (cardId: string, fromColumn: string, toColumn: string, newIndex: number) => void
   onCardClick?: (card: KanbanCard) => void
@@ -89,14 +89,12 @@ export function Kanban({
   disabled = false
 }: KanbanProps) {
   // 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-full", className)}>
         <CardContent className="py-12 text-center">

package/src/components/lazy-component/index.tsx

@@ -4,12 +4,12 @@ import React, { useState, useEffect, useRef, Suspense } from "react"
 import { motion } from "framer-motion"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
-import { Skeleton } from "@moontra/moonui"
+import { Skeleton } from "../ui/skeleton"
 import { cn } from "../../lib/utils"
 import { Eye, Loader2, Lock, Sparkles, RefreshCw } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface LazyComponentProps {
+interface LazyComponentProps {
   children: React.ReactNode
   fallback?: React.ReactNode
   threshold?: number
@@ -216,7 +216,6 @@ export const LazyImage: React.FC<LazyImageProps> = ({
           animate={{ opacity: 1 }}
           transition={{ duration: 0.3 }}
           className="w-full h-full object-cover"
-          {...props}
         />
       ) : showPlaceholder ? (
         <Skeleton className="w-full h-full min-h-32" />
@@ -303,14 +302,12 @@ export function LazyList<T>({
 
 export const LazyComponent: React.FC<LazyComponentProps> = ({ 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">
@@ -339,4 +336,4 @@ export const LazyComponent: React.FC<LazyComponentProps> = ({ className, ...prop
   return <LazyComponentInternal className={className} {...props} />
 }
 
-export type { LazyComponentProps, LazyImageProps, LazyListProps }
+// Export types removed to fix conflict

package/src/components/magnetic-button/index.tsx

@@ -95,11 +95,10 @@ const MagneticButtonInternal = React.forwardRef<HTMLButtonElement, MagneticButto
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 0.95 }}
         animate={{
-          rotateX: isHovered ? rotateX : 0,
-          rotateY: isHovered ? rotateY : 0,
+          rotateX: isHovered ? rotateX.get() : 0,
+          rotateY: isHovered ? rotateY.get() : 0,
         }}
         transition={{ duration: 0.3 }}
-        {...props}
       >
         <motion.div
           className="relative z-10"
@@ -130,14 +129,12 @@ MagneticButtonInternal.displayName = "MagneticButtonInternal"
 export const MagneticButton = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(
   ({ 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/memory-efficient-data/index.tsx

@@ -4,7 +4,7 @@ import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react'
 import { cn } from '../../lib/utils'
 
 // Memory konfigürasyonu için tip tanımları
-export interface MemoryConfig {
+interface MemoryConfig {
   chunkSize?: number
   maxMemoryItems?: number
   cacheStrategy?: 'lru' | 'fifo' | 'lfu'
@@ -17,7 +17,7 @@ export interface MemoryConfig {
 }
 
 // Memory istatistikleri için tip tanımı
-export interface MemoryStats {
+interface MemoryStats {
   memoryUsage: number
   itemCount: number
   cacheHitRate: number
@@ -108,7 +108,7 @@ class MemoryCache<T> {
 
       case 'fifo':
         // İlk gireni sil
-        keyToDelete = this.cache.keys().next().value
+        keyToDelete = this.cache.keys().next().value || null
         break
     }
 
@@ -161,7 +161,7 @@ export function MemoryEfficientData<T = any>({
   // Refs
   const containerRef = useRef<HTMLDivElement>(null)
   const cacheRef = useRef(new MemoryCache<T>(Math.floor(maxMemoryItems / chunkSize), cacheStrategy))
-  const scrollTimeoutRef = useRef<NodeJS.Timeout>()
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 
   // Visible data'yı memoize et
   const visibleData = useMemo(() => {
@@ -277,7 +277,7 @@ export function MemoryEfficientData<T = any>({
 }
 
 // Memory Analytics Component
-export interface MemoryAnalyticsProps {
+interface MemoryAnalyticsProps {
   onStatsUpdate?: (stats: MemoryStats) => void
   showRealTime?: boolean
   className?: string
@@ -349,4 +349,4 @@ export function useStreamingData<T>(
 }
 
 // Export types
-export type { MemoryConfig, MemoryStats, MemoryEfficientDataProps, MemoryAnalyticsProps }
+export type { MemoryConfig, MemoryStats, MemoryAnalyticsProps }

package/src/components/optimized-image/index.tsx

@@ -5,7 +5,7 @@ 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 { 
   Image as ImageIcon, 
@@ -23,7 +23,7 @@ import {
 } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface OptimizedImageProps {
+interface OptimizedImageProps {
   src: string
   alt: string
   width?: number
@@ -83,7 +83,7 @@ const OptimizedImageInternal: React.FC<OptimizedImageProps> = ({
   const [showImageInfo, setShowImageInfo] = useState(false)
   
   const imgRef = useRef<HTMLImageElement>(null)
-  const previewRef = useRef<HTMLDivElement>(null)
+  const previewRef = useRef<HTMLImageElement>(null)
 
   // Generate optimized image URL
   const getOptimizedSrc = (originalSrc: string, options: {
@@ -388,14 +388,12 @@ const OptimizedImageInternal: React.FC<OptimizedImageProps> = ({
 
 export const OptimizedImage: React.FC<OptimizedImageProps> = ({ 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/performance-debugger/index.tsx

@@ -5,7 +5,7 @@ import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Button } from "../ui/button"
 import { Badge } from "../ui/badge"
-import { Progress } from "@moontra/moonui"
+import { Progress } from "../ui/progress"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { cn } from "../../lib/utils"
 import { 
@@ -29,7 +29,7 @@ import {
 } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface PerformanceMetric {
+interface PerformanceMetric {
   name: string
   value: number
   unit: string
@@ -40,14 +40,14 @@ export interface PerformanceMetric {
   description?: string
 }
 
-export interface PerformanceEntry {
+interface PerformanceEntry {
   timestamp: number
   metrics: PerformanceMetric[]
   url: string
   userAgent: string
 }
 
-export interface PerformanceDebuggerProps {
+interface PerformanceDebuggerProps {
   autoCapture?: boolean
   captureInterval?: number
   maxEntries?: number
@@ -74,7 +74,7 @@ const PerformanceDebuggerInternal: React.FC<PerformanceDebuggerProps> = ({
   const [currentMetrics, setCurrentMetrics] = useState<PerformanceMetric[]>([])
   const [isCapturing, setIsCapturing] = useState(autoCapture)
   const [isVisible, setIsVisible] = useState(true)
-  const intervalRef = useRef<NodeJS.Timeout>()
+  const intervalRef = useRef<NodeJS.Timeout | undefined>(undefined)
 
   // Core Web Vitals thresholds
   const webVitalsThresholds = {
@@ -115,7 +115,7 @@ const PerformanceDebuggerInternal: React.FC<PerformanceDebuggerProps> = ({
           },
           {
             name: 'DOM Processing',
-            value: nav.domComplete - nav.domLoading,
+            value: nav.domComplete - (nav.domInteractive || nav.fetchStart),
             unit: 'ms',
             description: 'Time to process DOM'
           },
@@ -362,7 +362,7 @@ const PerformanceDebuggerInternal: React.FC<PerformanceDebuggerProps> = ({
           </div>
           
           <div className="flex items-center gap-2">
-            <Badge variant={isCapturing ? "default" : "secondary"} className="gap-1">
+            <Badge variant={isCapturing ? "secondary" : "secondary"} className="gap-1">
               {isCapturing ? <Activity className="h-3 w-3 animate-pulse" /> : <Clock className="h-3 w-3" />}
               {isCapturing ? "Live" : "Paused"}
             </Badge>
@@ -552,14 +552,12 @@ const PerformanceDebuggerInternal: React.FC<PerformanceDebuggerProps> = ({
 
 export const PerformanceDebugger: React.FC<PerformanceDebuggerProps> = ({ 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/performance-monitor/index.tsx

@@ -5,7 +5,6 @@ import { motion, AnimatePresence } from "framer-motion"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Button } from "../ui/button"
 import { Badge } from "../ui/badge"
-import { Progress } from "@moontra/moonui"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { cn } from "../../lib/utils"
 import { 
@@ -32,7 +31,7 @@ import {
 } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface PerformanceMetrics {
+interface PerformanceMetrics {
   cpu: {
     usage: number
     cores: number
@@ -67,7 +66,7 @@ export interface PerformanceMetrics {
   }
 }
 
-export interface PerformanceAlert {
+interface PerformanceAlert {
   id: string
   type: "warning" | "critical" | "info"
   metric: string
@@ -77,7 +76,7 @@ export interface PerformanceAlert {
   timestamp: Date
 }
 
-export interface PerformanceMonitorProps {
+interface PerformanceMonitorProps {
   autoRefresh?: boolean
   refreshInterval?: number
   showAlerts?: boolean
@@ -117,7 +116,7 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
   const [alerts, setAlerts] = useState<PerformanceAlert[]>([])
   const [isVisible, setIsVisible] = useState(true)
   const [isRefreshing, setIsRefreshing] = useState(false)
-  const intervalRef = useRef<NodeJS.Timeout>()
+  const intervalRef = useRef<NodeJS.Timeout | undefined>(undefined)
 
   const generateMockMetrics = useCallback((): PerformanceMetrics => {
     const baseMetrics = metrics || {
@@ -365,7 +364,7 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
           </div>
           
           <div className="flex items-center gap-2">
-            <Badge variant={autoRefresh ? "default" : "secondary"} className="gap-1">
+            <Badge variant={autoRefresh ? "outline" : "secondary"} className="gap-1">
               {autoRefresh ? <Activity className="h-3 w-3 animate-pulse" /> : <Timer className="h-3 w-3" />}
               {autoRefresh ? "Live" : "Paused"}
             </Badge>
@@ -428,7 +427,12 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
                       {metrics.cpu.usage.toFixed(1)}%
                     </span>
                   </div>
-                  <Progress value={metrics.cpu.usage} className="h-2 mt-2" />
+                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
+                    <div 
+                      className="h-full bg-primary transition-all duration-300 ease-out"
+                      style={{ width: `${metrics.cpu.usage}%` }}
+                    />
+                  </div>
                   <div className="text-xs text-muted-foreground mt-1">
                     {metrics.cpu.cores} cores {metrics.cpu.temperature && `• ${metrics.cpu.temperature.toFixed(0)}°C`}
                   </div>
@@ -446,7 +450,12 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
                       {metrics.memory.percentage.toFixed(1)}%
                     </span>
                   </div>
-                  <Progress value={metrics.memory.percentage} className="h-2 mt-2" />
+                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
+                    <div 
+                      className="h-full bg-primary transition-all duration-300 ease-out"
+                      style={{ width: `${metrics.memory.percentage}%` }}
+                    />
+                  </div>
                   <div className="text-xs text-muted-foreground mt-1">
                     {formatBytes(metrics.memory.used * 1024 * 1024 * 1024)} / {formatBytes(metrics.memory.total * 1024 * 1024 * 1024)}
                   </div>
@@ -464,7 +473,12 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
                       {metrics.disk.percentage.toFixed(1)}%
                     </span>
                   </div>
-                  <Progress value={metrics.disk.percentage} className="h-2 mt-2" />
+                  <div className="h-2 mt-2 bg-secondary rounded-full overflow-hidden">
+                    <div 
+                      className="h-full bg-primary transition-all duration-300 ease-out"
+                      style={{ width: `${metrics.disk.percentage}%` }}
+                    />
+                  </div>
                   <div className="text-xs text-muted-foreground mt-1">
                     {formatBytes(metrics.disk.used * 1024 * 1024 * 1024)} / {formatBytes(metrics.disk.total * 1024 * 1024 * 1024)}
                   </div>
@@ -553,7 +567,12 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
                       <span>Usage</span>
                       <span className={getStatusColor(metrics.cpu.usage)}>{metrics.cpu.usage.toFixed(1)}%</span>
                     </div>
-                    <Progress value={metrics.cpu.usage} className="h-2" />
+                    <div className="h-2 bg-secondary rounded-full overflow-hidden">
+                      <div 
+                        className="h-full bg-primary transition-all duration-300 ease-out"
+                        style={{ width: `${metrics.cpu.usage}%` }}
+                      />
+                    </div>
                   </div>
                   <div className="grid grid-cols-2 gap-4 text-sm">
                     <div>
@@ -584,7 +603,12 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
                       <span>Usage</span>
                       <span className={getStatusColor(metrics.memory.percentage)}>{metrics.memory.percentage.toFixed(1)}%</span>
                     </div>
-                    <Progress value={metrics.memory.percentage} className="h-2" />
+                    <div className="h-2 bg-secondary rounded-full overflow-hidden">
+                      <div 
+                        className="h-full bg-primary transition-all duration-300 ease-out"
+                        style={{ width: `${metrics.memory.percentage}%` }}
+                      />
+                    </div>
                   </div>
                   <div className="space-y-2 text-sm">
                     <div className="flex justify-between">
@@ -735,15 +759,10 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
 }
 
 export const PerformanceMonitor: React.FC<PerformanceMonitorProps> = ({ 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 no pro access, show upgrade prompt
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-fit", className)}>
         <CardContent className="py-6 text-center">

package/src/components/pinch-zoom/index.tsx

@@ -8,7 +8,7 @@ import { Button } from "../ui/button"
 import { Lock, Sparkles } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
 
-export interface PinchZoomProps {
+interface PinchZoomProps {
   children: React.ReactNode
   minZoom?: number
   maxZoom?: number
@@ -132,14 +132,12 @@ PinchZoomInternal.displayName = "PinchZoomInternal"
 export const PinchZoom = React.forwardRef<HTMLDivElement, PinchZoomProps>(
   ({ 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/rich-text-editor/index-old-backup.tsx

@@ -5,7 +5,6 @@
 "use client"
 
 import React from 'react'
-import { useDocsProAccess } from '@/components/docs/docs-pro-provider'
 import { useSubscription } from '../../hooks/use-subscription'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
 import { Button } from './button'
@@ -30,7 +29,7 @@ import {
 } from 'lucide-react'
 import { cn } from '../../lib/utils'
 
-export interface OldRichTextEditorProps {
+interface OldRichTextEditorProps {
   value?: string
   onChange?: (value: string) => void
   placeholder?: string
@@ -72,15 +71,10 @@ export function OldRichTextEditor({
   features = {},
   height
 }: OldRichTextEditorProps) {
-  // 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 no pro access, show upgrade prompt
+  if (!isLoading && !hasProAccess) {
     return (
       <Card className={cn("w-full", className)}>
         <CardContent className="py-12 text-center">