@moontra/moonui 2.1.4 → 2.1.7

package/src/components/ui/textarea.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 
 import { cn } from "../../lib/utils"
 
-export interface MoonUITextareaProps
+export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   // Enhanced props that shouldn't be passed to DOM
   variant?: "default" | "outline" | "ghost" | "underline"
@@ -15,7 +15,7 @@ export interface MoonUITextareaProps
   characterCount?: boolean
 }
 
-const MoonUITextarea = React.forwardRef<HTMLTextAreaElement, MoonUITextareaProps>(
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ 
     className, 
     // Extract enhanced props to prevent them from being passed to DOM
@@ -41,9 +41,6 @@ const MoonUITextarea = React.forwardRef<HTMLTextAreaElement, MoonUITextareaProps
     )
   }
 )
-MoonUITextarea.displayName = "MoonUITextarea"
+Textarea.displayName = "Textarea"
 
-export { MoonUITextarea  };
-
-// Backward compatibility exports
-export { MoonUITextarea as Textarea }
+export { Textarea }

package/src/components/ui/toast.tsx

@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
-const moonUIToastVariants = cva(
+const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-8 shadow-sm transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
@@ -46,11 +46,11 @@ const moonUIToastVariants = cva(
 );
 
 type ToastProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-  VariantProps<typeof moonUIToastVariants>;
+  VariantProps<typeof toastVariants>;
 
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
-const MoonUIToast = React.forwardRef<
+const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   ToastProps
 >(({ className, variant, ...props }, ref) => {
@@ -297,11 +297,12 @@ function Toaster() {
   );
 }
 
-export { type ToastProps,
+export {
+  type ToastProps,
   type ToastActionElement,
   ToastProvider,
   ToastViewport,
-  MoonUIToast,
+  Toast,
   ToastTitle,
   ToastDescription,
   ToastAction,
@@ -309,7 +310,4 @@ export { type ToastProps,
   Toaster,
   toast,
   useToast,
- };
-
-// Backward compatibility exports
-export { MoonUIToast as Toast };
+};

package/src/components/ui/toggle.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
-const moonUIToggleVariants = cva(
+const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
@@ -28,9 +28,9 @@ const moonUIToggleVariants = cva(
   }
 )
 
-export interface MoonUIToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof moonUIToggleVariants> {}
+export interface ToggleProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {}
 
-const MoonUIToggle = React.forwardRef<
+const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
   ToggleProps
 >(({ className, variant, size, ...props }, ref) => (
@@ -43,8 +43,5 @@ const MoonUIToggle = React.forwardRef<
 
 Toggle.displayName = TogglePrimitive.Root.displayName
 
-export { MoonUIToggle, moonUIToggleVariants  };
-
-// Backward compatibility exports
-export { MoonUIToggle as Toggle, moonUIToggleVariants as toggleVariants }
+export { Toggle, toggleVariants }
 export type { ToggleProps }

package/src/components/ui/tooltip.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../../lib/utils"
 
-const MoonUITooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider
 
 const tooltipVariants = cva(
   "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -33,9 +33,9 @@ const tooltipVariants = cva(
   }
 )
 
-const MoonUITooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root
 
-const MoonUITooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipArrow = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Arrow>,
@@ -49,13 +49,13 @@ const TooltipArrow = React.forwardRef<
 ))
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName
 
-export interface MoonUITooltipContentProps
+export interface TooltipContentProps
   extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
     VariantProps<typeof tooltipVariants> {
   showArrow?: boolean
 }
 
-const MoonUITooltipContent = React.forwardRef<
+const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   TooltipContentProps
 >(({ className, variant, size, showArrow = false, sideOffset = 4, ...props }, ref) => (
@@ -141,14 +141,12 @@ const SimpleTooltip = React.forwardRef<
 )
 SimpleTooltip.displayName = "SimpleTooltip"
 
-export { MoonUITooltip,
-  MoonUITooltipProvider,
-  MoonUITooltipTrigger,
-  MoonUITooltipContent,
+export {
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipContent,
   TooltipArrow,
   SimpleTooltip,
   tooltipVariants,
- };
-
-// Backward compatibility exports
-export { MoonUITooltip as Tooltip, MoonUITooltipTrigger as TooltipTrigger, MoonUITooltipContent as TooltipContent, MoonUITooltipProvider as TooltipProvider }
+}

package/src/index.tsx

@@ -1,7 +1,6 @@
-// CSS import kaldırıldı - Style conflict'leri önlemek için
-// Component'ler Tailwind class'ları kullanacak
+// Core UI Components Export
+// Premium components with advanced features
 
-// FREE UI Components Export - Source of Truth
 export * from "./components/ui/accordion"
 export * from "./components/ui/alert"
 export * from "./components/ui/aspect-ratio"
@@ -13,27 +12,34 @@ export * from "./components/ui/calendar"
 export * from "./components/ui/card"
 export * from "./components/ui/checkbox"
 export * from "./components/ui/collapsible"
+export * from "./components/ui/color-picker"
 export * from "./components/ui/command"
+export * from "./components/ui/data-table"
 export * from "./components/ui/date-picker"
 export * from "./components/ui/dialog"
+export * from "./components/ui/draggable-list"
 export * from "./components/ui/dropdown-menu"
+export * from "./components/ui/file-upload"
+export * from "./components/ui/gesture-drawer"
+export * from "./components/ui/github-stars"
 export * from "./components/ui/input"
 export * from "./components/ui/label"
+export * from "./components/ui/moon-logo"
 export * from "./components/ui/pagination"
 export * from "./components/ui/popover"
 export * from "./components/ui/progress"
 export * from "./components/ui/radio-group"
+export * from "./components/ui/rich-text-editor"
 export * from "./components/ui/select"
 export * from "./components/ui/separator"
+export * from "./components/ui/simple-editor"
 export * from "./components/ui/skeleton"
 export * from "./components/ui/slider"
+export * from "./components/ui/swipeable-card"
 export * from "./components/ui/switch"
 export * from "./components/ui/table"
 export * from "./components/ui/tabs"
 export * from "./components/ui/textarea"
 export * from "./components/ui/toast"
 export * from "./components/ui/toggle"
-export * from "./components/ui/tooltip"
-
-// Utility exports
-export * from "./lib/utils"
+export * from "./components/ui/tooltip"

package/src/lib/utils.ts

@@ -1,69 +1,6 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
-// Utility function using clsx and tailwind-merge
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
-
-// Date formatting utility
-export function formatDate(date: Date): string {
-  if (isNaN(date.getTime())) {
-    return 'Invalid Date'
-  }
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric'
-  })
-}
-
-// Currency formatting utility
-export function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(amount)
-}
-
-// Text truncation utility
-export function truncateText(text: string, maxLength: number): string {
-  if (text.length <= maxLength) {
-    return text
-  }
-  return text.slice(0, maxLength) + '...'
-}
-
-// ID generation utility
-export function generateId(length: number = 8): string {
-  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
-  let result = ''
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length))
-  }
-  return result
-}
-
-// Get client IP address from request
-export function getClientIP(request: Request): string {
-  // Check various headers for IP address
-  const forwarded = request.headers.get('x-forwarded-for')
-  const realIP = request.headers.get('x-real-ip')
-  const remoteAddr = request.headers.get('x-remote-addr')
-  
-  if (forwarded) {
-    // x-forwarded-for can contain multiple IPs, take the first one
-    return forwarded.split(',')[0].trim()
-  }
-  
-  if (realIP) {
-    return realIP
-  }
-  
-  if (remoteAddr) {
-    return remoteAddr
-  }
-  
-  // Fallback to a default IP if none found
-  return '127.0.0.1'
-}

package/src/components/ui/locked-component.tsx

@@ -1,215 +0,0 @@
-// Locked Component UI
-// Pro componentlerin locked state'ini gösteren wrapper component
-
-import React, { useState } from 'react'
-import { cn } from '../../lib/utils'
-import { Button } from './button'
-import { Badge } from './badge'
-import { Lock, Crown, Zap } from 'lucide-react'
-import Link from 'next/link'
-import { useComponentAccess } from '../../use-pro-access'
-
-interface MoonUILockedComponentProps {
-  children: React.ReactNode
-  componentName: string
-  className?: string
-  showPreview?: boolean
-  previewDuration?: number // ms
-}
-
-export function LockedComponent({
-  children,
-  componentName,
-  className,
-  showPreview = true,
-  previewDuration = 2000
-}: LockedComponentProps) {
-  const [isPreviewActive, setIsPreviewActive] = useState(false)
-  const [previewTimeout, setPreviewTimeout] = useState<NodeJS.Timeout | null>(null)
-
-  const handleMouseEnter = () => {
-    if (!showPreview) return
-    
-    setIsPreviewActive(true)
-    
-    // Clear existing timeout
-    if (previewTimeout) {
-      clearTimeout(previewTimeout)
-    }
-    
-    // Set new timeout
-    const timeout = setTimeout(() => {
-      setIsPreviewActive(false)
-    }, previewDuration)
-    
-    setPreviewTimeout(timeout)
-  }
-
-  const handleMouseLeave = () => {
-    if (previewTimeout) {
-      clearTimeout(previewTimeout)
-      setPreviewTimeout(null)
-    }
-    setIsPreviewActive(false)
-  }
-
-  return (
-    <div 
-      className={cn(
-        "relative group cursor-pointer transition-all duration-300",
-        className
-      )}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {/* Component Content */}
-      <div 
-        className={cn(
-          "transition-all duration-300",
-          !isPreviewActive && "blur-sm grayscale-[0.3] opacity-60"
-        )}
-      >
-        {children}
-      </div>
-
-      {/* Overlay */}
-      <div 
-        className={cn(
-          "absolute inset-0 bg-gradient-to-br from-amber-500/10 via-transparent to-purple-500/10",
-          "border-2 border-dashed border-amber-400/30 rounded-lg",
-          "flex items-center justify-center",
-          "transition-all duration-300",
-          isPreviewActive ? "opacity-0" : "opacity-100"
-        )}
-      >
-        <div className="text-center space-y-3 p-6">
-          {/* Pro Badge */}
-          <div className="flex justify-center">
-            <Badge 
-              variant="secondary" 
-              className="bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 px-3 py-1"
-            >
-              <Crown className="w-3 h-3 mr-1" />
-              PRO ONLY
-            </Badge>
-          </div>
-
-          {/* Lock Icon */}
-          <div className="flex justify-center">
-            <div className="p-3 rounded-full bg-amber-100 dark:bg-amber-900/30">
-              <Lock className="w-6 h-6 text-amber-600 dark:text-amber-400" />
-            </div>
-          </div>
-
-          {/* Component Name */}
-          <h3 className="font-semibold text-gray-900 dark:text-gray-100">
-            {componentName}
-          </h3>
-
-          {/* Description */}
-          <p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs">
-            This premium component is available with Pro subscription
-          </p>
-
-          {/* Upgrade Button */}
-          <Link href="/pricing">
-            <Button 
-              size="sm" 
-              className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 border-0"
-            >
-              <Zap className="w-4 h-4 mr-2" />
-              Upgrade to Pro
-            </Button>
-          </Link>
-        </div>
-      </div>
-
-      {/* Preview Hint */}
-      {showPreview && !isPreviewActive && (
-        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-          <div className="bg-black/80 text-white text-xs px-2 py-1 rounded">
-            Hover to preview
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Pro Component Wrapper - Otomatik erişim kontrolü ile
-interface ProComponentWrapperProps {
-  children: React.ReactNode
-  componentId: string
-  componentName?: string
-  className?: string
-  fallback?: React.ReactNode
-}
-
-export function ProComponentWrapper({
-  children,
-  componentId,
-  componentName,
-  className,
-  fallback
-}: ProComponentWrapperProps) {
-  const { canUse, isLocked, isLoading } = useComponentAccess(componentId)
-
-  // Loading state
-  if (isLoading) {
-    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>
-    )
-  }
-
-  // Unlocked - show actual component
-  if (canUse) {
-    return <div className={className}>{children}</div>
-  }
-
-  // Locked - show locked state
-  if (isLocked) {
-    return (
-      <LockedComponent
-        componentName={componentName || componentId}
-        className={className}
-      >
-        {fallback || children}
-      </LockedComponent>
-    )
-  }
-
-  // Default fallback
-  return <div className={className}>{children}</div>
-}
-
-// Pro Badge Component
-export function ProBadge({ className }: { className?: string }) {
-  return (
-    <Badge 
-      variant="secondary"
-      className={cn(
-        "bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 text-xs",
-        className
-      )}
-    >
-      <Crown className="w-3 h-3 mr-1" />
-      PRO
-    </Badge>
-  )
-}
-
-// Free Badge Component  
-export function FreeBadge({ className }: { className?: string }) {
-  return (
-    <Badge 
-      variant="outline"
-      className={cn("border-green-500 text-green-600 dark:text-green-400 text-xs", className)}
-    >
-      FREE
-    </Badge>
-  )
-}

package/src/use-pro-access.ts

@@ -1,141 +0,0 @@
-// Pro Access Hook
-// Kullanıcının pro componentlere erişim durumunu kontrol eder
-
-import React from 'react'
-import { useSession } from 'next-auth/react'
-import { useQuery } from '@tanstack/react-query'
-import { getComponentAccess } from '@/lib/component-metadata'
-
-export interface UserSubscription {
-  userId: string
-  plan: 'free' | 'pro_monthly' | 'pro_annual' | 'pro_lifetime'
-  status: 'active' | 'expired' | 'cancelled' | 'trial'
-  expiresAt: Date | null // lifetime için null
-  createdAt: Date
-  updatedAt: Date
-}
-
-export interface ProAccessStatus {
-  hasProAccess: boolean
-  subscription: UserSubscription | null | undefined
-  isLoading: boolean
-  error: Error | null
-  daysUntilExpiry: number | null
-}
-
-// Subscription durumunu API'den çek
-async function fetchSubscriptionStatus(): Promise<UserSubscription | null> {
-  const response = await fetch('/api/user/subscription-status')
-  
-  if (!response.ok) {
-    throw new Error('Subscription status fetch failed')
-  }
-  
-  const data = await response.json()
-  return data.subscription
-}
-
-// Pro erişim durumunu hesapla
-function calculateProAccess(subscription: UserSubscription | null | undefined): {
-  hasProAccess: boolean
-  daysUntilExpiry: number | null
-} {
-  if (!subscription) {
-    return { hasProAccess: false, daysUntilExpiry: null }
-  }
-
-  // Lifetime üyelik
-  if (subscription.plan === 'pro_lifetime') {
-    return { hasProAccess: true, daysUntilExpiry: null }
-  }
-
-  // Aktif olmayan subscription
-  if (subscription.status !== 'active') {
-    return { hasProAccess: false, daysUntilExpiry: null }
-  }
-
-  // Süre kontrolü
-  if (subscription.expiresAt) {
-    const now = new Date()
-    const expiryDate = new Date(subscription.expiresAt)
-    const daysUntilExpiry = Math.ceil((expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
-    
-    return {
-      hasProAccess: daysUntilExpiry > 0,
-      daysUntilExpiry: daysUntilExpiry > 0 ? daysUntilExpiry : 0
-    }
-  }
-
-  return { hasProAccess: false, daysUntilExpiry: null }
-}
-
-export function useProAccess(): ProAccessStatus {
-  const { data: session, status } = useSession()
-  
-  const {
-    data: subscription,
-    isLoading,
-    error
-  } = useQuery({
-    queryKey: ['subscription-status', session?.user?.id],
-    queryFn: fetchSubscriptionStatus,
-    enabled: !!session?.user?.id && status === 'authenticated',
-    staleTime: 5 * 60 * 1000, // 5 dakika cache
-    refetchInterval: 10 * 60 * 1000, // 10 dakikada bir otomatik refresh
-  })
-
-  const { hasProAccess, daysUntilExpiry } = calculateProAccess(subscription)
-
-  return {
-    hasProAccess,
-    subscription,
-    isLoading: status === 'loading' || isLoading,
-    error: error as Error | null,
-    daysUntilExpiry
-  }
-}
-
-// Component erişim kontrolü için helper hook
-export function useComponentAccess(componentId: string) {
-  const { hasProAccess, isLoading } = useProAccess()
-  
-  const access = React.useMemo(() => {
-    return getComponentAccess(componentId, hasProAccess ? 'pro' : 'free')
-  }, [componentId, hasProAccess])
-  
-  return {
-    ...access,
-    isLoading,
-    canUse: access.access === 'unlocked',
-    isLocked: access.access === 'locked'
-  }
-}
-
-// Subscription durumu için utility functions
-export function getSubscriptionDisplayName(plan: string): string {
-  switch (plan) {
-    case 'pro_monthly':
-      return 'Pro Monthly'
-    case 'pro_annual':
-      return 'Pro Annual'
-    case 'pro_lifetime':
-      return 'Pro Lifetime'
-    default:
-      return 'Free'
-  }
-}
-
-export function getSubscriptionColor(status: string): string {
-  switch (status) {
-    case 'active':
-      return 'green'
-    case 'trial':
-      return 'blue'
-    case 'expired':
-      return 'red'
-    case 'cancelled':
-      return 'gray'
-    default:
-      return 'gray'
-  }
-}