@moontra/moonui 2.1.9 → 2.2.1

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

@@ -0,0 +1,222 @@
+"use client"
+
+// 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'
+
+interface LockedComponentProps {
+  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 */}
+          <Button 
+            size="sm" 
+            className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 border-0"
+            onClick={() => {
+              if (typeof window !== 'undefined') {
+                window.location.href = '/pricing'
+              }
+            }}
+          >
+            <Zap className="w-4 h-4 mr-2" />
+            Upgrade to Pro
+          </Button>
+        </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) {
+  // For now, always show the component (no access control)
+  // This can be updated later when proper access control is implemented
+  const canUse = true
+  const isLocked = false
+  const isLoading = false
+
+  // 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/components/ui/moon-logo.tsx

@@ -18,7 +18,7 @@ export function MoonLogo({
   const gradientId = `moon-gradient-${logoId}`
   
   return (
-    <div className={cn("flex items-center gap-2", className)}>
+    <div className={cn("moonui-theme", "flex items-center gap-2", className)}>
       {/* Moon Icon */}
       <svg
         width="32"

package/src/components/ui/pagination.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
 import { cn } from "../../lib/utils"
@@ -7,7 +9,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
     role="navigation"
     aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
+    className={cn("moonui-theme", "mx-auto flex w-full justify-center", className)}
     {...props}
   />
 )
@@ -19,7 +21,7 @@ const PaginationContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ul
     ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
+    className={cn("moonui-theme", "flex flex-row items-center gap-1", className)}
     {...props}
   />
 ))
@@ -29,7 +31,7 @@ const PaginationItem = React.forwardRef<
   HTMLLIElement,
   React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
+  <li ref={ref} className={cn("moonui-theme", "", className)} {...props} />
 ))
 PaginationItem.displayName = "PaginationItem"
 
@@ -64,8 +66,8 @@ const PaginationPrevious = ({
 }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
+    size="md"
+    className={cn("moonui-theme", "gap-1 pl-2.5", className)}
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
@@ -80,8 +82,8 @@ const PaginationNext = ({
 }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
+    size="md"
+    className={cn("moonui-theme", "gap-1 pr-2.5", className)}
     {...props}
   >
     <span>Next</span>
@@ -96,7 +98,7 @@ const PaginationEllipsis = ({
 }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    className={cn("moonui-theme", "flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />

package/src/components/ui/phone-input.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "./input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+import { Phone } from "lucide-react"
+
+// Country codes data
+const countryCodes = [
+  { code: "+1", country: "US", flag: "🇺🇸", name: "United States" },
+  { code: "+44", country: "GB", flag: "🇬🇧", name: "United Kingdom" },
+  { code: "+49", country: "DE", flag: "🇩🇪", name: "Germany" },
+  { code: "+33", country: "FR", flag: "🇫🇷", name: "France" },
+  { code: "+39", country: "IT", flag: "🇮🇹", name: "Italy" },
+  { code: "+34", country: "ES", flag: "🇪🇸", name: "Spain" },
+  { code: "+31", country: "NL", flag: "🇳🇱", name: "Netherlands" },
+  { code: "+46", country: "SE", flag: "🇸🇪", name: "Sweden" },
+  { code: "+47", country: "NO", flag: "🇳🇴", name: "Norway" },
+  { code: "+45", country: "DK", flag: "🇩🇰", name: "Denmark" },
+  { code: "+358", country: "FI", flag: "🇫🇮", name: "Finland" },
+  { code: "+48", country: "PL", flag: "🇵🇱", name: "Poland" },
+  { code: "+90", country: "TR", flag: "🇹🇷", name: "Turkey" },
+  { code: "+86", country: "CN", flag: "🇨🇳", name: "China" },
+  { code: "+81", country: "JP", flag: "🇯🇵", name: "Japan" },
+  { code: "+82", country: "KR", flag: "🇰🇷", name: "South Korea" },
+  { code: "+91", country: "IN", flag: "🇮🇳", name: "India" },
+  { code: "+61", country: "AU", flag: "🇦🇺", name: "Australia" },
+  { code: "+64", country: "NZ", flag: "🇳🇿", name: "New Zealand" },
+  { code: "+27", country: "ZA", flag: "🇿🇦", name: "South Africa" },
+  { code: "+55", country: "BR", flag: "🇧🇷", name: "Brazil" },
+  { code: "+52", country: "MX", flag: "🇲🇽", name: "Mexico" },
+  { code: "+54", country: "AR", flag: "🇦🇷", name: "Argentina" },
+  { code: "+20", country: "EG", flag: "🇪🇬", name: "Egypt" },
+  { code: "+966", country: "SA", flag: "🇸🇦", name: "Saudi Arabia" },
+  { code: "+971", country: "AE", flag: "🇦🇪", name: "UAE" },
+]
+
+// Format phone number based on country
+const formatPhoneNumber = (value: string, countryCode: string): string => {
+  const cleaned = value.replace(/\D/g, "")
+  
+  switch (countryCode) {
+    case "+1": // US/Canada
+      if (cleaned.length <= 3) return cleaned
+      if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`
+    
+    case "+44": // UK
+      if (cleaned.length <= 4) return cleaned
+      if (cleaned.length <= 7) return `${cleaned.slice(0, 4)} ${cleaned.slice(4)}`
+      return `${cleaned.slice(0, 4)} ${cleaned.slice(4, 7)} ${cleaned.slice(7, 11)}`
+    
+    case "+90": // Turkey
+      if (cleaned.length <= 3) return cleaned
+      if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`
+      if (cleaned.length <= 9) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6)}`
+      return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6, 8)} ${cleaned.slice(8, 10)}`
+    
+    default: // Generic formatting
+      let formatted = ""
+      for (let i = 0; i < cleaned.length; i++) {
+        if (i > 0 && i % 3 === 0) formatted += " "
+        formatted += cleaned[i]
+      }
+      return formatted
+  }
+}
+
+// Get max length based on country
+const getMaxLength = (countryCode: string): number => {
+  switch (countryCode) {
+    case "+1": return 10 // US/Canada
+    case "+44": return 11 // UK
+    case "+90": return 10 // Turkey
+    default: return 15 // Generic max
+  }
+}
+
+export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+  value?: string
+  onChange?: (value: string, countryCode: string) => void
+  defaultCountry?: string
+  showIcon?: boolean
+  showCountrySelect?: boolean
+  countries?: typeof countryCodes
+}
+
+export const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
+  ({ 
+    className, 
+    value = "", 
+    onChange, 
+    defaultCountry = "+1",
+    showIcon = true,
+    showCountrySelect = true,
+    countries = countryCodes,
+    size,
+    ...props 
+  }, ref) => {
+    const [countryCode, setCountryCode] = React.useState(defaultCountry)
+    const [phoneNumber, setPhoneNumber] = React.useState(value)
+    
+    const selectedCountry = countries.find(c => c.code === countryCode) || countries[0]
+    
+    const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = e.target.value.replace(/\D/g, "")
+      const maxLength = getMaxLength(countryCode)
+      const truncated = rawValue.slice(0, maxLength)
+      const formatted = formatPhoneNumber(truncated, countryCode)
+      
+      setPhoneNumber(truncated)
+      onChange?.(truncated, countryCode)
+      
+      // Update the input value with formatted version
+      e.target.value = formatted
+    }
+    
+    const handleCountryChange = (newCountryCode: string) => {
+      setCountryCode(newCountryCode)
+      onChange?.(phoneNumber, newCountryCode)
+    }
+    
+    const formattedValue = formatPhoneNumber(phoneNumber, countryCode)
+    
+    return (
+      <div className={cn("relative flex gap-2", className)}>
+        {showCountrySelect && (
+          <Select value={countryCode} onValueChange={handleCountryChange}>
+            <SelectTrigger className="w-[120px]">
+              <SelectValue>
+                <div className="flex items-center gap-2">
+                  <span>{selectedCountry.flag}</span>
+                  <span>{selectedCountry.code}</span>
+                </div>
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {countries.map((country) => (
+                <SelectItem key={country.code} value={country.code}>
+                  <div className="flex items-center gap-2">
+                    <span>{country.flag}</span>
+                    <span>{country.code}</span>
+                    <span className="text-muted-foreground">{country.name}</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+        
+        <div className="relative flex-1">
+          <Input
+            ref={ref}
+            type="tel"
+            inputMode="numeric"
+            autoComplete="tel"
+            placeholder={countryCode === "+1" ? "(555) 123-4567" : "123 456 789"}
+            value={formattedValue}
+            onChange={handlePhoneChange}
+            className={cn(showIcon && "pl-10", className)}
+            {...props}
+          />
+          {showIcon && (
+            <Phone className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+PhoneInput.displayName = "PhoneInput"