@moontra/moonui-pro 2.6.2 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

package/src/components/credit-card-input/index.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import React, { useState, useRef, useEffect } from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import { CreditCard, Lock } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+
+export interface CreditCardInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  value?: {
+    number: string
+    expiry: string
+    cvc: string
+    name?: string
+  }
+  onChange?: (value: {
+    number: string
+    expiry: string
+    cvc: string
+    name?: string
+  }) => void
+  showCardPreview?: boolean
+  showCardType?: boolean
+  showSecurityBadge?: boolean
+  autoFormat?: boolean
+  validateOnChange?: boolean
+  labels?: {
+    number?: string
+    expiry?: string
+    cvc?: string
+    name?: string
+  }
+  placeholders?: {
+    number?: string
+    expiry?: string
+    cvc?: string
+    name?: string
+  }
+  errors?: {
+    number?: string
+    expiry?: string
+    cvc?: string
+    name?: string
+  }
+  className?: string
+  inputClassName?: string
+  labelClassName?: string
+  errorClassName?: string
+}
+
+// Kart tipi tespiti için regex patternleri
+const cardPatterns = {
+  visa: /^4/,
+  mastercard: /^5[1-5]/,
+  amex: /^3[47]/,
+  discover: /^6(?:011|5)/,
+  diners: /^3(?:0[0-5]|[68])/,
+  jcb: /^35/,
+  unionpay: /^62/
+}
+
+// Kart numarası formatlama fonksiyonu
+function formatCardNumber(value: string, cardType?: string): string {
+  const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
+  const matches = cardType === 'amex' 
+    ? v.match(/\d{1,4}/g) 
+    : v.match(/\d{1,4}/g)
+  return matches ? matches.join(' ') : v
+}
+
+// Expiry formatlama fonksiyonu
+function formatExpiry(value: string): string {
+  const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
+  if (v.length >= 2) {
+    return v.slice(0, 2) + (v.length > 2 ? '/' + v.slice(2, 4) : '')
+  }
+  return v
+}
+
+// Kart tipi tespiti
+function detectCardType(number: string): string | null {
+  const cleanNumber = number.replace(/\s+/g, '')
+  for (const [type, pattern] of Object.entries(cardPatterns)) {
+    if (pattern.test(cleanNumber)) {
+      return type
+    }
+  }
+  return null
+}
+
+// Luhn algoritması ile kart numarası doğrulama
+function validateCardNumber(number: string): boolean {
+  const cleanNumber = number.replace(/\s+/g, '')
+  if (!/^\d+$/.test(cleanNumber)) return false
+  
+  let sum = 0
+  let isEven = false
+  
+  for (let i = cleanNumber.length - 1; i >= 0; i--) {
+    let digit = parseInt(cleanNumber.charAt(i), 10)
+    
+    if (isEven) {
+      digit *= 2
+      if (digit > 9) {
+        digit -= 9
+      }
+    }
+    
+    sum += digit
+    isEven = !isEven
+  }
+  
+  return sum % 10 === 0
+}
+
+// Expiry doğrulama
+function validateExpiry(expiry: string): boolean {
+  const parts = expiry.split('/')
+  if (parts.length !== 2) return false
+  
+  const month = parseInt(parts[0], 10)
+  const year = parseInt('20' + parts[1], 10)
+  
+  if (month < 1 || month > 12) return false
+  
+  const now = new Date()
+  const expiryDate = new Date(year, month - 1)
+  
+  return expiryDate > now
+}
+
+export const MoonUICreditCardInputPro = React.forwardRef<HTMLDivElement, CreditCardInputProps>(({
+  value = { number: '', expiry: '', cvc: '', name: '' },
+  onChange,
+  showCardPreview = true,
+  showCardType = true,
+  showSecurityBadge = true,
+  autoFormat = true,
+  validateOnChange = false,
+  labels = {},
+  placeholders = {},
+  errors = {},
+  className,
+  inputClassName,
+  labelClassName,
+  errorClassName,
+  disabled,
+  required,
+  ...props
+}, ref) => {
+  const [cardType, setCardType] = useState<string | null>(null)
+  const [focused, setFocused] = useState<string | null>(null)
+  const [localErrors, setLocalErrors] = useState<typeof errors>({})
+  
+  const numberRef = useRef<HTMLInputElement>(null)
+  const expiryRef = useRef<HTMLInputElement>(null)
+  const cvcRef = useRef<HTMLInputElement>(null)
+  const nameRef = useRef<HTMLInputElement>(null)
+
+  // Kart tipini tespit et
+  useEffect(() => {
+    const detectedType = detectCardType(value.number)
+    setCardType(detectedType)
+  }, [value.number])
+
+  // Doğrulama
+  useEffect(() => {
+    if (!validateOnChange) return
+
+    const newErrors: typeof errors = {}
+    
+    if (value.number && !validateCardNumber(value.number)) {
+      newErrors.number = 'Invalid card number'
+    }
+    
+    if (value.expiry && !validateExpiry(value.expiry)) {
+      newErrors.expiry = 'Invalid expiry date'
+    }
+    
+    if (value.cvc && (value.cvc.length < 3 || value.cvc.length > 4)) {
+      newErrors.cvc = 'Invalid CVC'
+    }
+    
+    setLocalErrors(newErrors)
+  }, [value, validateOnChange])
+
+  const handleChange = (field: keyof typeof value, newValue: string) => {
+    let formattedValue = newValue
+    
+    if (autoFormat) {
+      if (field === 'number') {
+        formattedValue = formatCardNumber(newValue, cardType || undefined)
+        // Maksimum uzunluk kontrolü
+        const maxLength = cardType === 'amex' ? 18 : 19 // Boşluklarla birlikte
+        if (formattedValue.length > maxLength) return
+      } else if (field === 'expiry') {
+        formattedValue = formatExpiry(newValue)
+        if (formattedValue.length > 5) return
+      } else if (field === 'cvc') {
+        formattedValue = newValue.replace(/\D/g, '')
+        const maxLength = cardType === 'amex' ? 4 : 3
+        if (formattedValue.length > maxLength) return
+      }
+    }
+    
+    onChange?.({
+      ...value,
+      [field]: formattedValue
+    })
+    
+    // Otomatik geçiş
+    if (autoFormat) {
+      if (field === 'number' && formattedValue.length === (cardType === 'amex' ? 18 : 19)) {
+        expiryRef.current?.focus()
+      } else if (field === 'expiry' && formattedValue.length === 5) {
+        cvcRef.current?.focus()
+      } else if (field === 'cvc' && formattedValue.length === (cardType === 'amex' ? 4 : 3)) {
+        nameRef.current?.focus()
+      }
+    }
+  }
+
+  const displayErrors = { ...localErrors, ...errors }
+
+  return (
+    <div ref={ref} className={cn("space-y-4", className)} {...props}>
+      {showCardPreview && (
+        <motion.div
+          className="relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-gray-700 to-gray-900 p-6 text-white shadow-xl"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <div className="flex justify-between items-start mb-8">
+            <div className="text-lg font-semibold">
+              {cardType ? cardType.toUpperCase() : 'CARD'}
+            </div>
+            <CreditCard className="w-8 h-8" />
+          </div>
+          
+          <div className="space-y-4">
+            <div className="text-xl font-mono tracking-wider">
+              {value.number || '•••• •••• •••• ••••'}
+            </div>
+            
+            <div className="flex justify-between">
+              <div>
+                <div className="text-xs opacity-70">NAME</div>
+                <div className="text-sm uppercase">
+                  {value.name || 'YOUR NAME'}
+                </div>
+              </div>
+              
+              <div>
+                <div className="text-xs opacity-70">EXPIRES</div>
+                <div className="text-sm">
+                  {value.expiry || 'MM/YY'}
+                </div>
+              </div>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      <div className="space-y-4">
+        {/* Kart Numarası */}
+        <div className="space-y-1">
+          <Label htmlFor="card-number" className={labelClassName}>
+            {labels.number || 'Card Number'}
+            {required && <span className="text-destructive ml-1">*</span>}
+          </Label>
+          <div className="relative">
+            <Input
+              ref={numberRef}
+              id="card-number"
+              type="text"
+              inputMode="numeric"
+              value={value.number}
+              onChange={(e) => handleChange('number', e.target.value)}
+              onFocus={() => setFocused('number')}
+              onBlur={() => setFocused(null)}
+              placeholder={placeholders.number || '1234 5678 9012 3456'}
+              className={cn(
+                "pr-20",
+                displayErrors.number && "border-destructive",
+                inputClassName
+              )}
+              disabled={disabled}
+            />
+            {showCardType && cardType && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground">
+                {cardType.toUpperCase()}
+              </div>
+            )}
+          </div>
+          {displayErrors.number && (
+            <p className={cn("text-sm text-destructive", errorClassName)}>
+              {displayErrors.number}
+            </p>
+          )}
+        </div>
+
+        {/* Expiry ve CVC */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1">
+            <Label htmlFor="card-expiry" className={labelClassName}>
+              {labels.expiry || 'Expiry Date'}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <Input
+              ref={expiryRef}
+              id="card-expiry"
+              type="text"
+              inputMode="numeric"
+              value={value.expiry}
+              onChange={(e) => handleChange('expiry', e.target.value)}
+              onFocus={() => setFocused('expiry')}
+              onBlur={() => setFocused(null)}
+              placeholder={placeholders.expiry || 'MM/YY'}
+              className={cn(
+                displayErrors.expiry && "border-destructive",
+                inputClassName
+              )}
+              disabled={disabled}
+            />
+            {displayErrors.expiry && (
+              <p className={cn("text-sm text-destructive", errorClassName)}>
+                {displayErrors.expiry}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-1">
+            <Label htmlFor="card-cvc" className={labelClassName}>
+              {labels.cvc || 'CVC'}
+              {required && <span className="text-destructive ml-1">*</span>}
+            </Label>
+            <div className="relative">
+              <Input
+                ref={cvcRef}
+                id="card-cvc"
+                type="text"
+                inputMode="numeric"
+                value={value.cvc}
+                onChange={(e) => handleChange('cvc', e.target.value)}
+                onFocus={() => setFocused('cvc')}
+                onBlur={() => setFocused(null)}
+                placeholder={placeholders.cvc || cardType === 'amex' ? '1234' : '123'}
+                className={cn(
+                  displayErrors.cvc && "border-destructive",
+                  inputClassName
+                )}
+                disabled={disabled}
+              />
+              {showSecurityBadge && (
+                <Lock className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              )}
+            </div>
+            {displayErrors.cvc && (
+              <p className={cn("text-sm text-destructive", errorClassName)}>
+                {displayErrors.cvc}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Kart Sahibi Adı */}
+        <div className="space-y-1">
+          <Label htmlFor="card-name" className={labelClassName}>
+            {labels.name || 'Cardholder Name'}
+          </Label>
+          <Input
+            ref={nameRef}
+            id="card-name"
+            type="text"
+            value={value.name}
+            onChange={(e) => handleChange('name', e.target.value)}
+            onFocus={() => setFocused('name')}
+            onBlur={() => setFocused(null)}
+            placeholder={placeholders.name || 'John Doe'}
+            className={cn(
+              displayErrors.name && "border-destructive",
+              inputClassName
+            )}
+            disabled={disabled}
+          />
+          {displayErrors.name && (
+            <p className={cn("text-sm text-destructive", errorClassName)}>
+              {displayErrors.name}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {showSecurityBadge && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Lock className="w-4 h-4" />
+          <span>Your payment information is secure and encrypted</span>
+        </div>
+      )}
+    </div>
+  )
+})
+
+MoonUICreditCardInputPro.displayName = "MoonUICreditCardInputPro"

package/src/components/form-wizard/index.tsx

@@ -10,7 +10,7 @@ import { FormWizardProps } from "./types"
 import { Card, CardContent } from "../ui/card"
 import { Separator } from "../ui/separator"
 
-export const FormWizardPro = React.forwardRef<HTMLDivElement, FormWizardProps>(({
+export const MoonUIFormWizardPro = React.forwardRef<HTMLDivElement, FormWizardProps>(({
   steps,
   currentStep = 0,
   onStepChange,
@@ -93,7 +93,7 @@ export const FormWizardPro = React.forwardRef<HTMLDivElement, FormWizardProps>((
   )
 })
 
-FormWizardPro.displayName = "FormWizardPro"
+MoonUIFormWizardPro.displayName = "MoonUIFormWizardPro"
 
 // Export types and hooks
 export type { FormWizardProps, WizardStep, WizardStepContentProps } from "./types"

package/src/components/index.ts

@@ -93,4 +93,10 @@ export * from "./form-wizard"
 export * from "./multi-step-form"
 
 // Quiz Form
-export * from "./quiz-form"
+export * from "./quiz-form"
+
+// Credit Card Input
+export * from "./credit-card-input"
+
+// Phone Number Input
+export * from "./phone-number-input"

package/src/components/multi-step-form/index.tsx

@@ -4,7 +4,7 @@ import React from "react"
 import { useForm, FormProvider, UseFormReturn, FieldValues, DefaultValues } from "react-hook-form"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { z } from "zod"
-import { FormWizardPro, FormWizardProps, WizardStep } from "../form-wizard"
+import { MoonUIFormWizardPro, FormWizardProps, WizardStep } from "../form-wizard"
 import { Alert, AlertDescription } from "../ui/alert"
 import { AlertCircle } from "lucide-react"
 
@@ -92,7 +92,7 @@ function createStepSchema(fields: MultiStepFormField[]): z.ZodSchema<any> {
   return z.object(shape)
 }
 
-export function MultiStepFormPro<TFormData extends FieldValues = FieldValues>({
+export function MoonUIMultiStepFormPro<TFormData extends FieldValues = FieldValues>({
   steps,
   onSubmit,
   defaultValues,
@@ -209,7 +209,7 @@ export function MultiStepFormPro<TFormData extends FieldValues = FieldValues>({
   }
 
   return (
-    <FormWizardPro
+    <MoonUIFormWizardPro
       {...wizardProps}
       steps={wizardSteps}
       onComplete={handleComplete}