63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T6534,'use client' import * as React from 'react' import { cn } from '@/lib/utils' export type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown' export interface PaymentCardProps { number?: string name?: string expiry?: string cvc?: string brand?: CardBrand | 'auto' flipped?: boolean variant?: 'default' | 'compact' tilt?: boolean shimmer?: boolean flip?: boolean size?: 'sm' | 'md' | 'lg' className?: string } function detectBrand(raw: string): CardBrand { const n = raw.replace(/\D/g, '') if (!n) return 'unknown' if (/^4/.test(n)) return 'visa' if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard' if (/^3[47]/.test(n)) return 'amex' if (/^(6011|65|64[4-9])/.test(n)) return 'discover' return 'unknown' } function formatMasked(raw: string, brand: CardBrand): string { const digits = raw.replace(/\D/g, '').slice(0, brand === 'amex' ? 15 : 16) const groups = brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4] const total = groups.reduce((a, b) => a + b, 0) const padded = (digits + '••••••••••••••••').slice(0, total) let i = 0 return groups .map((g) => { const slice = padded.slice(i, i + g) i += g return slice }) .join(' ') } interface BrandVisual { cardClass: string accentGlow: string foilSheen: string guillocheColor: string textColor: string subtextColor: string embossStyle: string chipType: 'gold' | 'silver' } const BRAND_VISUALS: Record = { visa: { cardClass: 'bg-[radial-gradient(ellipse_at_top_right,#1e3a8a_0%,#0f2252_45%,#08122c_85%,#040a18_100%)] text-white shadow-[0_22px_45px_-12px_rgba(15,34,82,0.65),0_8px_16px_-8px_rgba(0,0,0,0.5)]', accentGlow: 'from-blue-400/20 via-indigo-500/10 to-transparent', foilSheen: 'from-white/20 via-blue-200/5 to-transparent', guillocheColor: 'rgba(96, 165, 250, 0.12)', textColor: 'text-white', subtextColor: 'text-blue-200/60', embossStyle: 'text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]', chipType: 'gold', }, mastercard: { cardClass: 'bg-[radial-gradient(ellipse_at_top_right,#2a0808_0%,#180608_35%,#0f0506_70%,#09090b_100%)] text-white shadow-[0_22px_45px_-12px_rgba(220,38,38,0.35),0_8px_16px_-8px_rgba(0,0,0,0.6)]', accentGlow: 'from-red-500/25 via-amber-500/15 to-transparent', foilSheen: 'from-white/20 via-orange-300/10 to-transparent', guillocheColor: 'rgba(239, 68, 68, 0.1)', textColor: 'text-white', subtextColor: 'text-zinc-400', embossStyle: 'text-zinc-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]', chipType: 'gold', }, amex: { cardClass: 'bg-[radial-gradient(ellipse_at_top_right,#1e293b_0%,#0f172a_40%,#090d16_80%,#020617_100%)] text-slate-100 shadow-[0_22px_45px_-12px_rgba(15,23,42,0.7),0_8px_16px_-8px_rgba(0,0,0,0.6)]', accentGlow: 'from-slate-300/20 via-teal-500/10 to-transparent', foilSheen: 'from-white/25 via-cyan-100/10 to-transparent', guillocheColor: 'rgba(148, 163, 184, 0.12)', textColor: 'text-slate-100', subtextColor: 'text-slate-400', embossStyle: 'text-slate-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]', chipType: 'silver', }, discover: { cardClass: 'bg-[radial-gradient(ellipse_at_top_right,#431407_0%,#270d04_45%,#1c0903_80%,#0c0401_100%)] text-white shadow-[0_22px_45px_-12px_rgba(194,65,12,0.45),0_8px_16px_-8px_rgba(0,0,0,0.6)]', accentGlow: 'from-orange-400/25 via-amber-600/15 to-transparent', foilSheen: 'from-white/20 via-amber-200/10 to-transparent', guillocheColor: 'rgba(251, 146, 60, 0.12)', textColor: 'text-white', subtextColor: 'text-amber-200/60', embossStyle: 'text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]', chipType: 'gold', }, unknown: { cardClass: 'bg-[radial-gradient(ellipse_at_top_right,#27272a_0%,#18181b_40%,#09090b_85%,#000000_100%)] text-white shadow-[0_22px_45px_-12px_rgba(0,0,0,0.7),0_8px_16px_-8px_rgba(0,0,0,0.5)]', accentGlow: 'from-zinc-400/15 via-zinc-600/10 to-transparent', foilSheen: 'from-white/18 via-zinc-300/5 to-transparent', guillocheColor: 'rgba(255, 255, 255, 0.06)', textColor: 'text-white', subtextColor: 'text-zinc-400', embossStyle: 'text-zinc-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]', chipType: 'silver', }, } export const PaymentCard = React.forwardRef( ( { number = '', name = '', expiry = '', cvc = '', brand = 'auto', flipped = false, variant = 'default', tilt = false, shimmer = false, flip = true, size = 'md', className, }, ref, ) => { const cardElRef = React.useRef(null) const [tiltState, setTiltState] = React.useState({ x: 0, y: 0, active: false }) const detectedBrand: CardBrand = React.useMemo(() => { if (brand && brand !== 'auto') return brand return detectBrand(number) }, [brand, number]) const theme = BRAND_VISUALS[detectedBrand] const displayNumber = React.useMemo(() => formatMasked(number, detectedBrand), [number, detectedBrand]) const displayName = React.useMemo(() => (name.trim() || 'CARDHOLDER NAME').toUpperCase(), [name]) const displayExpiry = React.useMemo(() => { const raw = expiry.replace(/\D/g, '').slice(0, 4) if (!raw) return 'MM/YY' if (raw.length <= 2) return raw + '/YY' return `${raw.slice(0, 2)}/${raw.slice(2, 4)}` }, [expiry]) const displayCvc = React.useMemo(() => { const max = detectedBrand === 'amex' ? 4 : 3 const digits = cvc.replace(/\D/g, '').slice(0, max) return digits || '•••' }, [cvc, detectedBrand]) const displayChars = React.useMemo(() => displayNumber.split(''), [displayNumber]) // Sizing const sizeClass = React.useMemo(() => { if (variant === 'compact') return 'w-[120px]' switch (size) { case 'sm': return 'w-[280px]' case 'lg': return 'w-[420px]' case 'md': default: return 'w-[360px]' } }, [variant, size]) // Tilt handler const onMouseMove = (e: React.MouseEvent) => { if (!tilt || !cardElRef.current) return const rect = cardElRef.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const px = (x / rect.width - 0.5) * 2 const py = (y / rect.height - 0.5) * 2 setTiltState({ x: -py * 10, y: px * 12, active: true }) } const onMouseLeave = () => { if (!tilt) return setTiltState({ x: 0, y: 0, active: false }) } const innerTransform = React.useMemo(() => { const flipDeg = flipped ? 180 : 0 if (tilt && tiltState.active) { return `perspective(1200px) rotateX(${tiltState.x}deg) rotateY(${tiltState.y + flipDeg}deg) scale3d(1.02, 1.02, 1.02)` } return `perspective(1200px) rotateY(${flipDeg}deg)` }, [tilt, tiltState, flipped]) return (

{ cardElRef.current = node if (typeof ref === 'function') ref(node) else if (ref) (ref as React.MutableRefObject).current = node }} data-uipkge data-slot="payment-card" role="img" aria-label={`${detectedBrand === 'unknown' ? 'Card' : detectedBrand} ending ${displayNumber.replace(/[•\s]/g, '').slice(-4) || '••••'}, ${displayName}, expires ${displayExpiry}`} className={cn('group relative inline-block select-none [perspective:1200px]', sizeClass, className)} onMouseMove={onMouseMove} onMouseLeave={onMouseLeave} >

{/* ================================= FRONT FACE ================================= */}

{/* Fine Guilloché & Security Geometric Wave Pattern */} {/* Brushed Metallic Sheen & Specular Lighting */}

{/* Ambient Corner Highlights */}

{/* Outer Bevel Perimeter Ring */}

{/* Shimmer sweep (opt-in) */} {shimmer && (

)} {/* Content Structure */}

{/* TOP ROW: Bank Watermark / Card Tier & Brand Logo */}

{/* Left: Card Tier / Bank label */}

{variant !== 'compact' ? ( {detectedBrand === 'amex' ? 'PLATINUM' : detectedBrand === 'mastercard' ? 'WORLD ELITE' : 'SIGNATURE'} ) : ( CARD )}

{/* Right: Authentic Brand Logo */}

{/* VISA */} {detectedBrand === 'visa' && ( )} {/* MASTERCARD */} {detectedBrand === 'mastercard' && (

{variant !== 'compact' && ( mastercard )}

)} {/* AMEX */} {detectedBrand === 'amex' && (

AMEX

)} {/* DISCOVER */} {detectedBrand === 'discover' && (

DISC VER

)} {/* UNKNOWN */} {detectedBrand === 'unknown' && (

PREMIUM

)}

{/* MIDDLE ROW: EMV Chip + Contactless Symbol */}

{/* Ultra-Realistic Metallic EMV Chip */}

{/* Authentic Chip Circuit Etching Lines */}

{/* Metallic Glint Reflection */}

{/* Contactless NFC Radio Waves */} {variant !== 'compact' && ( )}

{/* Holographic Security Stamp */} {variant !== 'compact' &&

}

{/* CARD NUMBER (Authentic Embossed Raised Digits) */}

{displayNumber} {displayChars.map((ch, i) => ( ))}

{/* BOTTOM ROW: Cardholder Name + Expiry Date */}

{/* Cardholder Name */}

{variant !== 'compact' && (

CARDHOLDER NAME

)}

{displayName}

{/* Expiry Date */}

{variant !== 'compact' && (

GOOD
THRU MONTH/YEAR

)}

{displayExpiry}

{/* ================================= BACK FACE ================================= */}

{/* Specular Bevel Perimeter */}

{/* Full-Width Deep Matte Magnetic Stripe */}

{/* Signature Panel + CVV Code */}

{/* White Security Hatched Signature Strip */}

{variant !== 'compact' && (

AUTHORIZED SIGNATURE

)}

{/* Printed CVV Code Box */}

{variant !== 'compact' && ( CVV )} {displayCvc}

{/* Microtext Disclaimer & Regulatory Compliance Marks */} {variant !== 'compact' && (

This card is property of the issuing bank and must be returned upon request. Use is subject to the cardholder agreement.

24/7 Support: 1-800-555-0199 CIRRUS · PLUS · STAR

)}

) }, ) PaymentCard.displayName = 'PaymentCard' 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"packages/registry-react/components/payment-card/payment-card.tsx","content":"$64","type":"registry:ui","target":"~/components/ui/payment-card/payment-card.tsx"},{"path":"packages/registry-react/components/payment-card/index.ts","content":"export { PaymentCard, type PaymentCardProps } from './payment-card'\n","type":"registry:ui","target":"~/components/ui/payment-card/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]