@moontra/moonui 2.3.8 → 2.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/components/ui/index.ts

@@ -218,6 +218,13 @@ export {
     ScrollBar as MoonUIScrollBar,
 } from "./scroll-area";
 
+// ScrollReveal
+export {
+    ScrollReveal as MoonUIScrollReveal,
+    ScrollRevealContainer as MoonUIScrollRevealContainer,
+    ScrollRevealItem as MoonUIScrollRevealItem,
+} from "./scroll-reveal";
+
 // Select
 export {
     Select as MoonUISelect,
@@ -342,6 +349,7 @@ export * from "./progress";
 export * from "./radio-group";
 export * from "./rich-text-editor";
 export * from "./scroll-area";
+export * from "./scroll-reveal";
 export * from "./select";
 export * from "./separator";
 export * from "./simple-editor";

package/src/components/ui/scroll-reveal.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import * as React from "react"
+import { motion, useInView, useAnimation, Variants } from "framer-motion"
+import { cn } from "../../lib/utils"
+
+interface ScrollRevealProps {
+  children: React.ReactNode
+  direction?: "up" | "down" | "left" | "right"
+  delay?: number
+  duration?: number
+  distance?: number
+  threshold?: number
+  triggerOnce?: boolean
+  stagger?: number
+  className?: string
+  variants?: Variants
+  animate?: boolean
+  style?: React.CSSProperties
+  id?: string
+}
+
+const defaultVariants: Record<string, Variants> = {
+  up: {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0 }
+  },
+  down: {
+    hidden: { opacity: 0, y: -50 },
+    visible: { opacity: 1, y: 0 }
+  },
+  left: {
+    hidden: { opacity: 0, x: 50 },
+    visible: { opacity: 1, x: 0 }
+  },
+  right: {
+    hidden: { opacity: 0, x: -50 },
+    visible: { opacity: 1, x: 0 }
+  },
+  fade: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 }
+  },
+  scale: {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: { opacity: 1, scale: 1 }
+  },
+  blur: {
+    hidden: { opacity: 0, filter: "blur(10px)" },
+    visible: { opacity: 1, filter: "blur(0px)" }
+  }
+}
+
+const ScrollReveal = React.forwardRef<HTMLDivElement, ScrollRevealProps>(
+  ({
+    children,
+    direction = "up",
+    delay = 0,
+    duration = 0.6,
+    distance = 50,
+    threshold = 0.1,
+    triggerOnce = true,
+    stagger = 0,
+    className,
+    variants,
+    animate = true,
+    style,
+    id
+  }, ref) => {
+    const controls = useAnimation()
+    const elementRef = React.useRef<HTMLDivElement>(null)
+    const isInView = useInView(elementRef, { 
+      amount: threshold,
+      once: triggerOnce
+    })
+
+    // Custom variants with distance
+    const customVariants = React.useMemo(() => {
+      if (variants) return variants
+      
+      const baseVariants = defaultVariants[direction] || defaultVariants.up
+      
+      return {
+        hidden: {
+          ...baseVariants.hidden,
+          ...(direction === "up" && { y: distance }),
+          ...(direction === "down" && { y: -distance }),
+          ...(direction === "left" && { x: distance }),
+          ...(direction === "right" && { x: -distance })
+        },
+        visible: baseVariants.visible
+      }
+    }, [direction, distance, variants])
+
+    React.useEffect(() => {
+      if (!animate) return
+      
+      if (isInView) {
+        controls.start("visible")
+      } else if (!triggerOnce) {
+        controls.start("hidden")
+      }
+    }, [isInView, controls, triggerOnce, animate])
+
+    React.useImperativeHandle(ref, () => elementRef.current!)
+
+    if (!animate) {
+      return (
+        <div
+          ref={elementRef}
+          className={className}
+          style={style}
+          id={id}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    return (
+      <motion.div
+        ref={elementRef}
+        variants={customVariants}
+        initial="hidden"
+        animate={controls}
+        transition={{
+          duration,
+          delay: delay + stagger,
+          ease: "easeOut"
+        }}
+        className={cn(className)}
+        style={style}
+        id={id}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+
+ScrollReveal.displayName = "ScrollReveal"
+
+// ScrollReveal container for staggered animations
+interface ScrollRevealContainerProps {
+  children: React.ReactNode
+  stagger?: number
+  className?: string
+  style?: React.CSSProperties
+  id?: string
+}
+
+const ScrollRevealContainer = React.forwardRef<HTMLDivElement, ScrollRevealContainerProps>(
+  ({ children, stagger = 0.1, className, style, id }, ref) => {
+    const containerRef = React.useRef<HTMLDivElement>(null)
+    const isInView = useInView(containerRef, { amount: 0.1, once: true })
+
+    React.useImperativeHandle(ref, () => containerRef.current!)
+
+    return (
+      <motion.div
+        ref={containerRef}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        variants={{
+          hidden: {},
+          visible: {
+            transition: {
+              staggerChildren: stagger
+            }
+          }
+        }}
+        className={cn(className)}
+        style={style}
+        id={id}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+
+ScrollRevealContainer.displayName = "ScrollRevealContainer"
+
+// ScrollReveal item for use within containers
+interface ScrollRevealItemProps {
+  children: React.ReactNode
+  direction?: "up" | "down" | "left" | "right"
+  duration?: number
+  distance?: number
+  className?: string
+  variants?: Variants
+  style?: React.CSSProperties
+  id?: string
+}
+
+const ScrollRevealItem = React.forwardRef<HTMLDivElement, ScrollRevealItemProps>(
+  ({
+    children,
+    direction = "up",
+    duration = 0.6,
+    distance = 50,
+    className,
+    variants,
+    style,
+    id
+  }, ref) => {
+    const customVariants = React.useMemo(() => {
+      if (variants) return variants
+      
+      const baseVariants = defaultVariants[direction] || defaultVariants.up
+      
+      return {
+        hidden: {
+          ...baseVariants.hidden,
+          ...(direction === "up" && { y: distance }),
+          ...(direction === "down" && { y: -distance }),
+          ...(direction === "left" && { x: distance }),
+          ...(direction === "right" && { x: -distance })
+        },
+        visible: baseVariants.visible
+      }
+    }, [direction, distance, variants])
+
+    return (
+      <motion.div
+        ref={ref}
+        variants={customVariants}
+        transition={{
+          duration,
+          ease: "easeOut"
+        }}
+        className={cn(className)}
+        style={style}
+        id={id}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+
+ScrollRevealItem.displayName = "ScrollRevealItem"
+
+export { ScrollReveal, ScrollRevealContainer, ScrollRevealItem }
+export type { ScrollRevealProps, ScrollRevealContainerProps, ScrollRevealItemProps }

package/src/components/ui/table.tsx

@@ -207,10 +207,12 @@ interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
   sorted?: SortDirection;
   /** Sıralama değiştiğinde çağrılacak fonksiyon */
   onSort?: () => void;
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right';
 }
 
 const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
-  ({ className, sortable, sorted, onSort, children, ...props }, ref) => {
+  ({ className, sortable, sorted, onSort, align = 'left', children, ...props }, ref) => {
     // Sıralama için simgeler
     const renderSortIcon = () => {
       if (!sortable) return null;
@@ -265,37 +267,61 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
       );
     };
     
+    const alignmentClasses = {
+      left: 'text-left justify-start',
+      center: 'text-center justify-center',
+      right: 'text-right justify-end'
+    };
+
     return (
       <th
         ref={ref}
         className={cn(
-          "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          "h-10 px-4 align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          alignmentClasses[align].split(' ')[0], // text alignment
           sortable && "cursor-pointer hover:text-foreground select-none",
           className
         )}
         onClick={sortable ? onSort : undefined}
         {...props}
       >
-        <div className="flex items-center">
-          {children}
-          {sortable && renderSortIcon()}
-        </div>
+        {sortable || align !== 'left' ? (
+          <div className={cn("flex items-center", alignmentClasses[align].split(' ')[1])}>
+            {children}
+            {sortable && renderSortIcon()}
+          </div>
+        ) : (
+          children
+        )}
       </th>
     );
   }
 );
 TableHead.displayName = "TableHead";
 
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right';
+}
+
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-));
+  TableCellProps
+>(({ className, align = 'left', ...props }, ref) => {
+  const alignmentClass = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+  }[align];
+
+  return (
+    <td
+      ref={ref}
+      className={cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", alignmentClass, className)}
+      {...props}
+    />
+  );
+});
 TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<

package/src/components/ui/pro-component-wrapper.tsx

@@ -1,261 +0,0 @@
-"use client"
-
-// Pro Component Wrapper - Simplified Version
-// Development: CLI auth required
-// Production: License key validation with 24h cache
-
-import React, { useState, useEffect } from 'react'
-import { cn } from '../../lib/utils'
-import { Badge } from './badge'
-import { Lock, Terminal, AlertCircle } from 'lucide-react'
-
-interface ProComponentWrapperProps {
-  children: React.ReactNode
-  componentId: string
-  componentName?: string
-  className?: string
-  fallback?: React.ReactNode
-}
-
-interface LicenseCache {
-  timestamp: number
-  hasProAccess: boolean
-}
-
-const CACHE_KEY = 'moonui_license_cache'
-const CACHE_DURATION = 24 * 60 * 60 * 1000 // 24 hours
-
-export function ProComponentWrapper({
-  children,
-  componentId,
-  componentName,
-  className,
-  fallback
-}: ProComponentWrapperProps) {
-  const [state, setState] = useState<{
-    hasAccess: boolean
-    loading: boolean
-    message?: string
-  }>({
-    hasAccess: false,
-    loading: true
-  })
-
-  useEffect(() => {
-    // Check if development environment
-    const isDevelopment = () => {
-      if (typeof window === 'undefined') return false
-      
-      const isLocalhost = 
-        window.location.hostname === 'localhost' ||
-        window.location.hostname === '127.0.0.1' ||
-        window.location.hostname.includes('.local')
-      
-      const isDevPort = 
-        window.location.port === '3000' ||
-        window.location.port === '3001' ||
-        window.location.port === '8080' ||
-        window.location.port === '5173'
-      
-      // Must be localhost with dev port
-      return process.env.NODE_ENV === 'development' && isLocalhost && isDevPort
-    }
-
-    // DEVELOPMENT: Check CLI auth
-    if (isDevelopment()) {
-      const checkDevAuth = () => {
-        const cliToken = localStorage.getItem('moonui_cli_token')
-        const deviceId = localStorage.getItem('moonui_device_id')
-        
-        if (!cliToken || !deviceId) {
-          setState({
-            hasAccess: false,
-            loading: false,
-            message: 'CLI authentication required'
-          })
-          return
-        }
-        
-        // Token exists - allow access
-        setState({
-          hasAccess: true,
-          loading: false
-        })
-      }
-      
-      checkDevAuth()
-      return
-    }
-
-    // PRODUCTION: Check license cache
-    const checkProdLicense = () => {
-      try {
-        // Check cache first
-        const cached = localStorage.getItem(CACHE_KEY)
-        if (cached) {
-          const data = JSON.parse(cached) as LicenseCache
-          const now = Date.now()
-          
-          // Cache still valid (24 hours)
-          if (data.timestamp && (now - data.timestamp) < CACHE_DURATION) {
-            setState({
-              hasAccess: data.hasProAccess,
-              loading: false
-            })
-            return
-          }
-        }
-        
-        // No valid cache - need license key
-        const licenseKey = process.env.NEXT_PUBLIC_MOONUI_LICENSE_KEY
-        
-        if (!licenseKey) {
-          setState({
-            hasAccess: false,
-            loading: false,
-            message: 'No license key configured'
-          })
-          return
-        }
-        
-        // Validate license async
-        validateLicense(licenseKey).then(result => {
-          // Save to cache
-          const cacheData: LicenseCache = {
-            timestamp: Date.now(),
-            hasProAccess: result.hasProAccess
-          }
-          localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
-          
-          setState({
-            hasAccess: result.hasProAccess,
-            loading: false
-          })
-        }).catch(error => {
-          console.error('License validation failed:', error)
-          
-          // Try expired cache as fallback
-          const cached = localStorage.getItem(CACHE_KEY)
-          if (cached) {
-            const data = JSON.parse(cached) as LicenseCache
-            setState({
-              hasAccess: data.hasProAccess,
-              loading: false,
-              message: 'Using cached license'
-            })
-          } else {
-            setState({
-              hasAccess: false,
-              loading: false,
-              message: 'License validation failed'
-            })
-          }
-        })
-        
-      } catch (error) {
-        console.error('License check error:', error)
-        setState({
-          hasAccess: false,
-          loading: false,
-          message: 'License check failed'
-        })
-      }
-    }
-    
-    checkProdLicense()
-  }, [])
-
-  // Loading state
-  if (state.loading) {
-    return (
-      <div className={cn("animate-pulse bg-gray-200 dark:bg-gray-800 rounded-lg h-32", className)}>
-        <div className="flex items-center justify-center h-full">
-          <div className="text-sm text-gray-500">Loading...</div>
-        </div>
-      </div>
-    )
-  }
-
-  // Access granted
-  if (state.hasAccess) {
-    return <>{children}</>
-  }
-
-  // Development: Show CLI auth required
-  if (state.message === 'CLI authentication required') {
-    return (
-      <div className={cn("relative", className)}>
-        <div className="blur-sm grayscale opacity-60 pointer-events-none">
-          {fallback || children}
-        </div>
-        <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-transparent to-purple-500/10 border-2 border-dashed border-blue-400/30 rounded-lg flex items-center justify-center">
-          <div className="text-center space-y-3 p-6 bg-white/90 dark:bg-gray-900/90 rounded-lg">
-            <Badge variant="secondary" className="mb-2">
-              <Terminal className="w-3 h-3 mr-1" />
-              DEV AUTH REQUIRED
-            </Badge>
-            <h3 className="font-semibold">CLI Authentication Required</h3>
-            <p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs">
-              Login with MoonUI CLI to use Pro components in development
-            </p>
-            <code className="block bg-black text-green-400 p-2 rounded text-xs font-mono">
-              npx moonui auth login
-            </code>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // Production: Show license required
-  return (
-    <div className={cn("relative", className)}>
-      <div className="blur-sm grayscale opacity-60 pointer-events-none">
-        {fallback || children}
-      </div>
-      <div className="absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-orange-500/10 border-2 border-dashed border-amber-400/30 rounded-lg flex items-center justify-center">
-        <div className="text-center space-y-3 p-6 bg-white/90 dark:bg-gray-900/90 rounded-lg">
-          <Badge variant="destructive" className="mb-2">
-            <AlertCircle className="w-3 h-3 mr-1" />
-            LICENSE REQUIRED
-          </Badge>
-          <h3 className="font-semibold">{componentName || componentId}</h3>
-          <p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs">
-            {state.message || 'Pro license required to use this component'}
-          </p>
-          <a 
-            href="https://moonui.dev/pricing" 
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-block bg-gradient-to-r from-amber-500 to-orange-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:from-amber-600 hover:to-orange-600 transition-colors"
-          >
-            Get Pro License
-          </a>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// Validate license with API
-async function validateLicense(licenseKey: string): Promise<{ hasProAccess: boolean }> {
-  const response = await fetch('/api/v1/license/validate', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      licenseKey,
-      domain: window.location.hostname
-    })
-  })
-  
-  if (!response.ok) {
-    throw new Error('License validation failed')
-  }
-  
-  const data = await response.json()
-  return {
-    hasProAccess: data.hasProAccess || false
-  }
-}