@wakastellar/ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,982 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { CreditCard, Eye, EyeOff, Check, AlertCircle } from "lucide-react"
+import { Input } from "../input"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type CardType =
+  | "visa"
+  | "mastercard"
+  | "amex"
+  | "discover"
+  | "diners"
+  | "jcb"
+  | "unionpay"
+  | "maestro"
+  | "unknown"
+
+export interface CardData {
+  /** Card number (formatted with spaces) */
+  cardNumber: string
+  /** Raw card number (no spaces) */
+  rawCardNumber: string
+  /** Card holder name */
+  cardHolder: string
+  /** Expiry date (MM/YY) */
+  expiry: string
+  /** CVV code */
+  cvv: string
+  /** Detected card type */
+  cardType: CardType
+}
+
+export interface CardErrors {
+  cardNumber?: string
+  cardHolder?: string
+  expiry?: string
+  cvv?: string
+}
+
+export interface WakaCreditCardInputProps {
+  /** Current card data */
+  value?: Partial<CardData>
+  /** Callback when card data changes */
+  onChange?: (data: CardData) => void
+  /** Callback when validation changes */
+  onValidationChange?: (isValid: boolean, errors: CardErrors) => void
+  /** Disabled state */
+  disabled?: boolean
+  /** Read-only state */
+  readOnly?: boolean
+  /** Combined single-field mode */
+  singleFieldMode?: boolean
+  /** Show card flip preview animation */
+  showCardPreview?: boolean
+  /** Show card type icon */
+  showCardTypeIcon?: boolean
+  /** Placeholder texts */
+  placeholders?: {
+    cardNumber?: string
+    cardHolder?: string
+    expiry?: string
+    cvv?: string
+  }
+  /** Labels for fields */
+  labels?: {
+    cardNumber?: string
+    cardHolder?: string
+    expiry?: string
+    cvv?: string
+  }
+  /** Custom error messages */
+  errorMessages?: {
+    cardNumber?: string
+    cardHolder?: string
+    expiry?: string
+    cvv?: string
+    luhn?: string
+  }
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+  /** Additional class names */
+  className?: string
+  /** ID for accessibility */
+  id?: string
+  /** Name prefix for form fields */
+  name?: string
+  /** Auto-focus first field */
+  autoFocus?: boolean
+}
+
+// ============================================
+// CARD TYPE DETECTION
+// ============================================
+
+const CARD_PATTERNS: { type: CardType; pattern: RegExp; lengths: number[]; cvvLength: number }[] = [
+  { type: "amex", pattern: /^3[47]/, lengths: [15], cvvLength: 4 },
+  { type: "visa", pattern: /^4/, lengths: [13, 16, 19], cvvLength: 3 },
+  { type: "mastercard", pattern: /^(5[1-5]|2[2-7])/, lengths: [16], cvvLength: 3 },
+  { type: "discover", pattern: /^(6011|65|64[4-9])/, lengths: [16, 19], cvvLength: 3 },
+  { type: "diners", pattern: /^(36|38|30[0-5])/, lengths: [14], cvvLength: 3 },
+  { type: "jcb", pattern: /^35/, lengths: [16, 19], cvvLength: 3 },
+  { type: "unionpay", pattern: /^62/, lengths: [16, 17, 18, 19], cvvLength: 3 },
+  { type: "maestro", pattern: /^(50|5[6-9]|6[0-9])/, lengths: [12, 13, 14, 15, 16, 17, 18, 19], cvvLength: 3 },
+]
+
+function detectCardType(cardNumber: string): CardType {
+  const cleaned = cardNumber.replace(/\D/g, "")
+  for (const card of CARD_PATTERNS) {
+    if (card.pattern.test(cleaned)) {
+      return card.type
+    }
+  }
+  return "unknown"
+}
+
+function getCardConfig(type: CardType) {
+  const config = CARD_PATTERNS.find((c) => c.type === type)
+  return config || { type: "unknown" as CardType, pattern: /.*/, lengths: [16], cvvLength: 3 }
+}
+
+// ============================================
+// LUHN VALIDATION
+// ============================================
+
+function luhnCheck(cardNumber: string): boolean {
+  const cleaned = cardNumber.replace(/\D/g, "")
+  if (cleaned.length === 0) return false
+
+  let sum = 0
+  let isEven = false
+
+  for (let i = cleaned.length - 1; i >= 0; i--) {
+    let digit = parseInt(cleaned[i], 10)
+
+    if (isEven) {
+      digit *= 2
+      if (digit > 9) {
+        digit -= 9
+      }
+    }
+
+    sum += digit
+    isEven = !isEven
+  }
+
+  return sum % 10 === 0
+}
+
+// ============================================
+// FORMATTING HELPERS
+// ============================================
+
+function formatCardNumber(value: string, cardType: CardType): string {
+  const cleaned = value.replace(/\D/g, "")
+
+  // Amex has 4-6-5 format
+  if (cardType === "amex") {
+    const parts = [cleaned.slice(0, 4), cleaned.slice(4, 10), cleaned.slice(10, 15)]
+    return parts.filter(Boolean).join(" ")
+  }
+
+  // Standard 4-4-4-4 format
+  const parts = []
+  for (let i = 0; i < cleaned.length; i += 4) {
+    parts.push(cleaned.slice(i, i + 4))
+  }
+  return parts.join(" ")
+}
+
+function formatExpiry(value: string): string {
+  const cleaned = value.replace(/\D/g, "")
+  if (cleaned.length >= 2) {
+    return `${cleaned.slice(0, 2)}/${cleaned.slice(2, 4)}`
+  }
+  return cleaned
+}
+
+function parseExpiry(value: string): { month: number; year: number } | null {
+  const match = value.match(/^(\d{2})\/(\d{2})$/)
+  if (!match) return null
+
+  const month = parseInt(match[1], 10)
+  const year = parseInt(match[2], 10) + 2000
+
+  return { month, year }
+}
+
+function isExpiryValid(expiry: string): boolean {
+  const parsed = parseExpiry(expiry)
+  if (!parsed) return false
+
+  const { month, year } = parsed
+  if (month < 1 || month > 12) return false
+
+  const now = new Date()
+  const currentYear = now.getFullYear()
+  const currentMonth = now.getMonth() + 1
+
+  if (year < currentYear) return false
+  if (year === currentYear && month < currentMonth) return false
+
+  return true
+}
+
+// ============================================
+// CARD BRAND ICONS
+// ============================================
+
+function CardBrandIcon({ type, className }: { type: CardType; className?: string }) {
+  const baseClass = cn("w-8 h-6", className)
+
+  switch (type) {
+    case "visa":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#1A1F71" />
+          <path d="M20.5 21.5L22.5 10.5H25.5L23.5 21.5H20.5Z" fill="white" />
+          <path d="M32.5 10.7C31.9 10.5 31 10.2 29.8 10.2C26.8 10.2 24.7 11.7 24.7 13.9C24.7 15.5 26.2 16.4 27.3 16.9C28.5 17.5 28.9 17.9 28.9 18.4C28.9 19.2 27.9 19.5 27 19.5C25.8 19.5 25.1 19.3 24.1 18.9L23.7 18.7L23.3 21.3C24 21.6 25.3 21.8 26.6 21.8C29.8 21.8 31.8 20.3 31.9 18C31.9 16.7 31.1 15.7 29.4 14.9C28.4 14.4 27.8 14 27.8 13.5C27.8 13 28.4 12.5 29.5 12.5C30.5 12.5 31.2 12.7 31.7 12.9L32 13L32.5 10.7Z" fill="white" />
+          <path d="M37.5 10.5H35.2C34.5 10.5 34 10.7 33.7 11.4L29.5 21.5H32.7L33.3 19.8H37.2L37.6 21.5H40.5L37.5 10.5ZM34.2 17.5C34.5 16.7 35.5 14 35.5 14C35.5 14 35.8 13.2 36 12.7L36.2 13.9C36.2 13.9 36.8 16.7 36.9 17.5H34.2Z" fill="white" />
+          <path d="M18.5 10.5L15.6 18.1L15.3 16.8C14.7 15 13 13 11 12L13.7 21.5H17L21.9 10.5H18.5Z" fill="white" />
+          <path d="M13 10.5H8.1L8 10.7C11.8 11.6 14.3 14 15.2 16.9L14.2 11.5C14.1 10.8 13.6 10.5 13 10.5Z" fill="#F9A51A" />
+        </svg>
+      )
+    case "mastercard":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#000000" />
+          <circle cx="18" cy="16" r="8" fill="#EB001B" />
+          <circle cx="30" cy="16" r="8" fill="#F79E1B" />
+          <path d="M24 10.8C25.8 12.2 27 14.5 27 16C27 17.5 25.8 19.8 24 21.2C22.2 19.8 21 17.5 21 16C21 14.5 22.2 12.2 24 10.8Z" fill="#FF5F00" />
+        </svg>
+      )
+    case "amex":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#006FCF" />
+          <path d="M8 16H12L13 13.5L14 16H18L15.5 19.5H18V21H8V19.5H10.5L8 16Z" fill="white" />
+          <text x="20" y="20" fill="white" fontSize="8" fontWeight="bold" fontFamily="Arial">AMEX</text>
+        </svg>
+      )
+    case "discover":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#FFFFFF" stroke="#E5E5E5" />
+          <circle cx="30" cy="16" r="6" fill="#FF6600" />
+          <text x="8" y="20" fill="#000000" fontSize="7" fontWeight="bold" fontFamily="Arial">DISCOVER</text>
+        </svg>
+      )
+    case "diners":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#FFFFFF" stroke="#E5E5E5" />
+          <circle cx="24" cy="16" r="8" fill="#0079BE" />
+          <path d="M19 16C19 13.2 20.5 10.8 22.7 9.6V22.4C20.5 21.2 19 18.8 19 16Z" fill="white" />
+          <path d="M25.3 9.6C27.5 10.8 29 13.2 29 16C29 18.8 27.5 21.2 25.3 22.4V9.6Z" fill="white" />
+        </svg>
+      )
+    case "jcb":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#FFFFFF" stroke="#E5E5E5" />
+          <rect x="8" y="8" width="10" height="16" rx="2" fill="#0066CC" />
+          <rect x="19" y="8" width="10" height="16" rx="2" fill="#E30613" />
+          <rect x="30" y="8" width="10" height="16" rx="2" fill="#00A651" />
+        </svg>
+      )
+    case "unionpay":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#D71F27" />
+          <text x="10" y="20" fill="white" fontSize="8" fontWeight="bold" fontFamily="Arial">UnionPay</text>
+        </svg>
+      )
+    case "maestro":
+      return (
+        <svg className={baseClass} viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="48" height="32" rx="4" fill="#000000" />
+          <circle cx="18" cy="16" r="8" fill="#0066CC" />
+          <circle cx="30" cy="16" r="8" fill="#CC0000" />
+          <path d="M24 10C26 11.5 27.5 13.5 27.5 16C27.5 18.5 26 20.5 24 22C22 20.5 20.5 18.5 20.5 16C20.5 13.5 22 11.5 24 10Z" fill="#6C4899" />
+        </svg>
+      )
+    default:
+      return <CreditCard className={cn("w-5 h-5 text-muted-foreground", className)} />
+  }
+}
+
+// ============================================
+// CARD PREVIEW COMPONENT
+// ============================================
+
+interface CardPreviewProps {
+  cardData: CardData
+  isFlipped: boolean
+  className?: string
+}
+
+function CardPreview({ cardData, isFlipped, className }: CardPreviewProps) {
+  return (
+    <div className={cn("perspective-1000", className)}>
+      <div
+        className={cn(
+          "relative w-full h-48 transition-transform duration-700 transform-style-3d",
+          isFlipped && "rotate-y-180"
+        )}
+        style={{
+          transformStyle: "preserve-3d",
+          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+        }}
+      >
+        {/* Front of card */}
+        <div
+          className={cn(
+            "absolute inset-0 w-full h-full rounded-xl p-6 text-white backface-hidden",
+            "bg-gradient-to-br shadow-xl",
+            cardData.cardType === "visa" && "from-blue-600 to-blue-800",
+            cardData.cardType === "mastercard" && "from-red-600 to-orange-600",
+            cardData.cardType === "amex" && "from-cyan-600 to-cyan-800",
+            cardData.cardType === "discover" && "from-orange-500 to-orange-700",
+            cardData.cardType === "unknown" && "from-gray-600 to-gray-800"
+          )}
+          style={{ backfaceVisibility: "hidden" }}
+        >
+          <div className="flex justify-between items-start mb-8">
+            <div className="w-12 h-8 bg-gradient-to-br from-yellow-300 to-yellow-500 rounded opacity-90" />
+            <CardBrandIcon type={cardData.cardType} className="w-12 h-8" />
+          </div>
+
+          <div className="font-mono text-xl tracking-wider mb-6">
+            {cardData.cardNumber || "#### #### #### ####"}
+          </div>
+
+          <div className="flex justify-between items-end">
+            <div>
+              <div className="text-xs uppercase opacity-70 mb-1">Card Holder</div>
+              <div className="font-medium tracking-wide uppercase">
+                {cardData.cardHolder || "YOUR NAME"}
+              </div>
+            </div>
+            <div className="text-right">
+              <div className="text-xs uppercase opacity-70 mb-1">Expires</div>
+              <div className="font-mono">
+                {cardData.expiry || "MM/YY"}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Back of card */}
+        <div
+          className={cn(
+            "absolute inset-0 w-full h-full rounded-xl text-white backface-hidden rotate-y-180",
+            "bg-gradient-to-br shadow-xl",
+            cardData.cardType === "visa" && "from-blue-700 to-blue-900",
+            cardData.cardType === "mastercard" && "from-red-700 to-orange-700",
+            cardData.cardType === "amex" && "from-cyan-700 to-cyan-900",
+            cardData.cardType === "discover" && "from-orange-600 to-orange-800",
+            cardData.cardType === "unknown" && "from-gray-700 to-gray-900"
+          )}
+          style={{
+            backfaceVisibility: "hidden",
+            transform: "rotateY(180deg)",
+          }}
+        >
+          <div className="w-full h-12 bg-black/40 mt-6" />
+
+          <div className="px-6 mt-6">
+            <div className="flex items-center gap-2">
+              <div className="flex-1 h-10 bg-white/20 rounded flex items-center justify-end pr-4">
+                <span className="font-mono text-lg italic">
+                  {cardData.cvv || "###"}
+                </span>
+              </div>
+              <div className="text-xs opacity-70">CVV</div>
+            </div>
+          </div>
+
+          <div className="absolute bottom-4 right-4">
+            <CardBrandIcon type={cardData.cardType} className="w-10 h-6 opacity-50" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================
+// HOOK
+// ============================================
+
+export interface UseCreditCardInputOptions {
+  /** Initial card data */
+  initialValue?: Partial<CardData>
+  /** Validation on change */
+  validateOnChange?: boolean
+  /** Custom error messages */
+  errorMessages?: WakaCreditCardInputProps["errorMessages"]
+}
+
+export function useCreditCardInput(options: UseCreditCardInputOptions = {}) {
+  const { initialValue, validateOnChange = true, errorMessages } = options
+
+  const [cardData, setCardData] = React.useState<CardData>({
+    cardNumber: initialValue?.cardNumber || "",
+    rawCardNumber: initialValue?.rawCardNumber || "",
+    cardHolder: initialValue?.cardHolder || "",
+    expiry: initialValue?.expiry || "",
+    cvv: initialValue?.cvv || "",
+    cardType: initialValue?.cardType || "unknown",
+  })
+
+  const [errors, setErrors] = React.useState<CardErrors>({})
+  const [touched, setTouched] = React.useState<Record<keyof CardErrors, boolean>>({
+    cardNumber: false,
+    cardHolder: false,
+    expiry: false,
+    cvv: false,
+  })
+
+  const validate = React.useCallback(
+    (data: CardData): CardErrors => {
+      const newErrors: CardErrors = {}
+      const config = getCardConfig(data.cardType)
+
+      // Card number validation
+      if (!data.rawCardNumber) {
+        newErrors.cardNumber = errorMessages?.cardNumber || "Card number is required"
+      } else if (!config.lengths.includes(data.rawCardNumber.length)) {
+        newErrors.cardNumber = errorMessages?.cardNumber || "Invalid card number length"
+      } else if (!luhnCheck(data.rawCardNumber)) {
+        newErrors.cardNumber = errorMessages?.luhn || "Invalid card number"
+      }
+
+      // Card holder validation
+      if (!data.cardHolder.trim()) {
+        newErrors.cardHolder = errorMessages?.cardHolder || "Cardholder name is required"
+      } else if (data.cardHolder.trim().length < 2) {
+        newErrors.cardHolder = errorMessages?.cardHolder || "Name is too short"
+      }
+
+      // Expiry validation
+      if (!data.expiry) {
+        newErrors.expiry = errorMessages?.expiry || "Expiry date is required"
+      } else if (!isExpiryValid(data.expiry)) {
+        newErrors.expiry = errorMessages?.expiry || "Invalid or expired date"
+      }
+
+      // CVV validation
+      if (!data.cvv) {
+        newErrors.cvv = errorMessages?.cvv || "CVV is required"
+      } else if (data.cvv.length !== config.cvvLength) {
+        newErrors.cvv = errorMessages?.cvv || `CVV must be ${config.cvvLength} digits`
+      }
+
+      return newErrors
+    },
+    [errorMessages]
+  )
+
+  const updateCardNumber = React.useCallback(
+    (value: string) => {
+      const raw = value.replace(/\D/g, "").slice(0, 19)
+      const cardType = detectCardType(raw)
+      const formatted = formatCardNumber(raw, cardType)
+
+      const newData = {
+        ...cardData,
+        cardNumber: formatted,
+        rawCardNumber: raw,
+        cardType,
+      }
+
+      setCardData(newData)
+      setTouched((prev) => ({ ...prev, cardNumber: true }))
+
+      if (validateOnChange) {
+        setErrors(validate(newData))
+      }
+    },
+    [cardData, validate, validateOnChange]
+  )
+
+  const updateCardHolder = React.useCallback(
+    (value: string) => {
+      const newData = {
+        ...cardData,
+        cardHolder: value.toUpperCase(),
+      }
+
+      setCardData(newData)
+      setTouched((prev) => ({ ...prev, cardHolder: true }))
+
+      if (validateOnChange) {
+        setErrors(validate(newData))
+      }
+    },
+    [cardData, validate, validateOnChange]
+  )
+
+  const updateExpiry = React.useCallback(
+    (value: string) => {
+      const cleaned = value.replace(/\D/g, "").slice(0, 4)
+      const formatted = formatExpiry(cleaned)
+
+      const newData = {
+        ...cardData,
+        expiry: formatted,
+      }
+
+      setCardData(newData)
+      setTouched((prev) => ({ ...prev, expiry: true }))
+
+      if (validateOnChange) {
+        setErrors(validate(newData))
+      }
+    },
+    [cardData, validate, validateOnChange]
+  )
+
+  const updateCvv = React.useCallback(
+    (value: string) => {
+      const config = getCardConfig(cardData.cardType)
+      const cleaned = value.replace(/\D/g, "").slice(0, config.cvvLength)
+
+      const newData = {
+        ...cardData,
+        cvv: cleaned,
+      }
+
+      setCardData(newData)
+      setTouched((prev) => ({ ...prev, cvv: true }))
+
+      if (validateOnChange) {
+        setErrors(validate(newData))
+      }
+    },
+    [cardData, validate, validateOnChange]
+  )
+
+  const reset = React.useCallback(() => {
+    setCardData({
+      cardNumber: "",
+      rawCardNumber: "",
+      cardHolder: "",
+      expiry: "",
+      cvv: "",
+      cardType: "unknown",
+    })
+    setErrors({})
+    setTouched({
+      cardNumber: false,
+      cardHolder: false,
+      expiry: false,
+      cvv: false,
+    })
+  }, [])
+
+  const isValid = React.useMemo(() => {
+    const validationErrors = validate(cardData)
+    return Object.keys(validationErrors).length === 0
+  }, [cardData, validate])
+
+  const visibleErrors = React.useMemo(() => {
+    const result: CardErrors = {}
+    if (touched.cardNumber && errors.cardNumber) result.cardNumber = errors.cardNumber
+    if (touched.cardHolder && errors.cardHolder) result.cardHolder = errors.cardHolder
+    if (touched.expiry && errors.expiry) result.expiry = errors.expiry
+    if (touched.cvv && errors.cvv) result.cvv = errors.cvv
+    return result
+  }, [errors, touched])
+
+  return {
+    cardData,
+    errors: visibleErrors,
+    touched,
+    isValid,
+    updateCardNumber,
+    updateCardHolder,
+    updateExpiry,
+    updateCvv,
+    validate: () => validate(cardData),
+    reset,
+    setTouched,
+  }
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function WakaCreditCardInput({
+  value,
+  onChange,
+  onValidationChange,
+  disabled = false,
+  readOnly = false,
+  singleFieldMode = false,
+  showCardPreview = false,
+  showCardTypeIcon = true,
+  placeholders,
+  labels,
+  errorMessages,
+  size = "md",
+  className,
+  id,
+  name,
+  autoFocus = false,
+}: WakaCreditCardInputProps) {
+  const {
+    cardData,
+    errors,
+    isValid,
+    updateCardNumber,
+    updateCardHolder,
+    updateExpiry,
+    updateCvv,
+  } = useCreditCardInput({
+    initialValue: value,
+    errorMessages,
+  })
+
+  const [cvvVisible, setCvvVisible] = React.useState(false)
+  const [isFlipped, setIsFlipped] = React.useState(false)
+  const [focusedField, setFocusedField] = React.useState<string | null>(null)
+
+  const cardNumberRef = React.useRef<HTMLInputElement>(null)
+  const cardHolderRef = React.useRef<HTMLInputElement>(null)
+  const expiryRef = React.useRef<HTMLInputElement>(null)
+  const cvvRef = React.useRef<HTMLInputElement>(null)
+
+  // Notify parent of changes
+  React.useEffect(() => {
+    onChange?.(cardData)
+  }, [cardData, onChange])
+
+  // Notify parent of validation changes
+  React.useEffect(() => {
+    onValidationChange?.(isValid, errors)
+  }, [isValid, errors, onValidationChange])
+
+  // Auto-focus
+  React.useEffect(() => {
+    if (autoFocus && cardNumberRef.current) {
+      cardNumberRef.current.focus()
+    }
+  }, [autoFocus])
+
+  // Handle card number change with auto-advance
+  const handleCardNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateCardNumber(e.target.value)
+
+    // Auto-advance to next field
+    const config = getCardConfig(detectCardType(e.target.value.replace(/\D/g, "")))
+    const raw = e.target.value.replace(/\D/g, "")
+    if (config.lengths.includes(raw.length) && expiryRef.current) {
+      expiryRef.current.focus()
+    }
+  }
+
+  // Handle expiry change with auto-advance
+  const handleExpiryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateExpiry(e.target.value)
+
+    // Auto-advance to CVV
+    const cleaned = e.target.value.replace(/\D/g, "")
+    if (cleaned.length === 4 && cvvRef.current) {
+      cvvRef.current.focus()
+    }
+  }
+
+  // Handle CVV focus/blur for card flip
+  const handleCvvFocus = () => {
+    setFocusedField("cvv")
+    setIsFlipped(true)
+  }
+
+  const handleCvvBlur = () => {
+    setFocusedField(null)
+    setIsFlipped(false)
+  }
+
+  // Size classes
+  const sizeClasses = {
+    sm: "h-8 text-xs",
+    md: "h-9 text-sm",
+    lg: "h-10 text-base",
+  }
+
+  const labelSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base",
+  }
+
+  // Field wrapper with error state
+  const FieldWrapper = ({
+    children,
+    label,
+    error,
+    htmlFor,
+  }: {
+    children: React.ReactNode
+    label?: string
+    error?: string
+    htmlFor?: string
+  }) => (
+    <div className="space-y-1.5">
+      {label && (
+        <label
+          htmlFor={htmlFor}
+          className={cn(
+            "block font-medium text-foreground",
+            labelSizeClasses[size]
+          )}
+        >
+          {label}
+        </label>
+      )}
+      {children}
+      {error && (
+        <div className="flex items-center gap-1 text-destructive">
+          <AlertCircle className="h-3 w-3" />
+          <span className="text-xs">{error}</span>
+        </div>
+      )}
+    </div>
+  )
+
+  // Single field mode renders a combined input
+  if (singleFieldMode) {
+    return (
+      <div className={cn("space-y-4", className)}>
+        <FieldWrapper
+          label={labels?.cardNumber || "Card Details"}
+          error={errors.cardNumber}
+          htmlFor={id ? `${id}-combined` : undefined}
+        >
+          <div className="flex items-center gap-2">
+            {showCardTypeIcon && (
+              <CardBrandIcon type={cardData.cardType} className="flex-shrink-0" />
+            )}
+            <div className="flex-1 flex gap-2">
+              <Input
+                ref={cardNumberRef}
+                id={id ? `${id}-combined` : undefined}
+                name={name ? `${name}-number` : undefined}
+                type="text"
+                inputMode="numeric"
+                autoComplete="cc-number"
+                placeholder={placeholders?.cardNumber || "Card number"}
+                value={cardData.cardNumber}
+                onChange={handleCardNumberChange}
+                disabled={disabled}
+                readOnly={readOnly}
+                className={cn(
+                  sizeClasses[size],
+                  "flex-1",
+                  errors.cardNumber && "border-destructive focus-visible:ring-destructive"
+                )}
+              />
+              <Input
+                ref={expiryRef}
+                name={name ? `${name}-expiry` : undefined}
+                type="text"
+                inputMode="numeric"
+                autoComplete="cc-exp"
+                placeholder={placeholders?.expiry || "MM/YY"}
+                value={cardData.expiry}
+                onChange={handleExpiryChange}
+                disabled={disabled}
+                readOnly={readOnly}
+                className={cn(
+                  sizeClasses[size],
+                  "w-20",
+                  errors.expiry && "border-destructive focus-visible:ring-destructive"
+                )}
+              />
+              <div className="relative w-16">
+                <Input
+                  ref={cvvRef}
+                  name={name ? `${name}-cvv` : undefined}
+                  type={cvvVisible ? "text" : "password"}
+                  inputMode="numeric"
+                  autoComplete="cc-csc"
+                  placeholder={placeholders?.cvv || "CVV"}
+                  value={cardData.cvv}
+                  onChange={(e) => updateCvv(e.target.value)}
+                  onFocus={handleCvvFocus}
+                  onBlur={handleCvvBlur}
+                  disabled={disabled}
+                  readOnly={readOnly}
+                  className={cn(
+                    sizeClasses[size],
+                    "pr-8",
+                    errors.cvv && "border-destructive focus-visible:ring-destructive"
+                  )}
+                />
+                <button
+                  type="button"
+                  onClick={() => setCvvVisible(!cvvVisible)}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  tabIndex={-1}
+                >
+                  {cvvVisible ? (
+                    <EyeOff className="h-4 w-4" />
+                  ) : (
+                    <Eye className="h-4 w-4" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+        </FieldWrapper>
+      </div>
+    )
+  }
+
+  // Full mode with all fields
+  return (
+    <div className={cn("space-y-4", className)}>
+      {showCardPreview && (
+        <CardPreview
+          cardData={cardData}
+          isFlipped={isFlipped}
+          className="mb-6"
+        />
+      )}
+
+      <div className="grid gap-4">
+        {/* Card Number */}
+        <FieldWrapper
+          label={labels?.cardNumber || "Card Number"}
+          error={errors.cardNumber}
+          htmlFor={id ? `${id}-number` : undefined}
+        >
+          <div className="relative">
+            <Input
+              ref={cardNumberRef}
+              id={id ? `${id}-number` : undefined}
+              name={name ? `${name}-number` : undefined}
+              type="text"
+              inputMode="numeric"
+              autoComplete="cc-number"
+              placeholder={placeholders?.cardNumber || "1234 5678 9012 3456"}
+              value={cardData.cardNumber}
+              onChange={handleCardNumberChange}
+              onFocus={() => setFocusedField("cardNumber")}
+              onBlur={() => setFocusedField(null)}
+              disabled={disabled}
+              readOnly={readOnly}
+              className={cn(
+                sizeClasses[size],
+                "pr-12",
+                errors.cardNumber && "border-destructive focus-visible:ring-destructive"
+              )}
+            />
+            {showCardTypeIcon && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                <CardBrandIcon type={cardData.cardType} />
+              </div>
+            )}
+            {cardData.rawCardNumber && !errors.cardNumber && (
+              <Check className="absolute right-12 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
+            )}
+          </div>
+        </FieldWrapper>
+
+        {/* Card Holder */}
+        <FieldWrapper
+          label={labels?.cardHolder || "Cardholder Name"}
+          error={errors.cardHolder}
+          htmlFor={id ? `${id}-holder` : undefined}
+        >
+          <Input
+            ref={cardHolderRef}
+            id={id ? `${id}-holder` : undefined}
+            name={name ? `${name}-holder` : undefined}
+            type="text"
+            autoComplete="cc-name"
+            placeholder={placeholders?.cardHolder || "JOHN DOE"}
+            value={cardData.cardHolder}
+            onChange={(e) => updateCardHolder(e.target.value)}
+            onFocus={() => setFocusedField("cardHolder")}
+            onBlur={() => setFocusedField(null)}
+            disabled={disabled}
+            readOnly={readOnly}
+            className={cn(
+              sizeClasses[size],
+              errors.cardHolder && "border-destructive focus-visible:ring-destructive"
+            )}
+          />
+        </FieldWrapper>
+
+        {/* Expiry and CVV */}
+        <div className="grid grid-cols-2 gap-4">
+          <FieldWrapper
+            label={labels?.expiry || "Expiry Date"}
+            error={errors.expiry}
+            htmlFor={id ? `${id}-expiry` : undefined}
+          >
+            <Input
+              ref={expiryRef}
+              id={id ? `${id}-expiry` : undefined}
+              name={name ? `${name}-expiry` : undefined}
+              type="text"
+              inputMode="numeric"
+              autoComplete="cc-exp"
+              placeholder={placeholders?.expiry || "MM/YY"}
+              value={cardData.expiry}
+              onChange={handleExpiryChange}
+              onFocus={() => setFocusedField("expiry")}
+              onBlur={() => setFocusedField(null)}
+              disabled={disabled}
+              readOnly={readOnly}
+              className={cn(
+                sizeClasses[size],
+                errors.expiry && "border-destructive focus-visible:ring-destructive"
+              )}
+            />
+          </FieldWrapper>
+
+          <FieldWrapper
+            label={labels?.cvv || "CVV"}
+            error={errors.cvv}
+            htmlFor={id ? `${id}-cvv` : undefined}
+          >
+            <div className="relative">
+              <Input
+                ref={cvvRef}
+                id={id ? `${id}-cvv` : undefined}
+                name={name ? `${name}-cvv` : undefined}
+                type={cvvVisible ? "text" : "password"}
+                inputMode="numeric"
+                autoComplete="cc-csc"
+                placeholder={placeholders?.cvv || cardData.cardType === "amex" ? "1234" : "123"}
+                value={cardData.cvv}
+                onChange={(e) => updateCvv(e.target.value)}
+                onFocus={handleCvvFocus}
+                onBlur={handleCvvBlur}
+                disabled={disabled}
+                readOnly={readOnly}
+                className={cn(
+                  sizeClasses[size],
+                  "pr-10",
+                  errors.cvv && "border-destructive focus-visible:ring-destructive"
+                )}
+              />
+              <button
+                type="button"
+                onClick={() => setCvvVisible(!cvvVisible)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                tabIndex={-1}
+                aria-label={cvvVisible ? "Hide CVV" : "Show CVV"}
+              >
+                {cvvVisible ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+          </FieldWrapper>
+        </div>
+      </div>
+
+      {/* Validation summary */}
+      {isValid && cardData.rawCardNumber && (
+        <div className="flex items-center gap-2 text-sm text-green-600">
+          <Check className="h-4 w-4" />
+          <span>Card details are valid</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default WakaCreditCardInput