{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "payment-card", "title": "Payment Card", "type": "registry:ui", "files": [ { "path": "packages/registry-react/components/payment-card/payment-card.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\ntype CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'\n\n// Brand wordmark paths (from simpleicons.org, MIT-licensed). Single-path SVGs\n// drawn against a 24x24 viewBox. Fill is set to currentColor so the parent\n// controls color (white on the dark card gradient).\nconst BRAND_PATHS: Record, string> = {\n visa: 'M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z',\n mastercard:\n 'M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z',\n amex: 'M16.015 14.378c0-.32-.135-.496-.344-.622-.21-.12-.464-.135-.81-.135h-1.543v2.82h.675v-1.027h.72c.24 0 .39.024.478.125.12.13.104.38.104.55v.35h.66v-.555c-.002-.25-.017-.376-.108-.516-.06-.08-.18-.18-.33-.234l.02-.008c.18-.072.48-.297.48-.747zm-.87.407l-.028-.002c-.09.053-.195.058-.33.058h-.81v-.63h.824c.12 0 .24 0 .33.05.098.048.156.147.15.255 0 .12-.045.215-.134.27zM20.297 15.837H19v.6h1.304c.676 0 1.05-.278 1.05-.884 0-.28-.066-.448-.187-.582-.153-.133-.392-.193-.73-.207l-.376-.015c-.104 0-.18 0-.255-.03-.09-.03-.15-.105-.15-.21 0-.09.017-.166.09-.21.083-.046.177-.066.272-.06h1.23v-.602h-1.35c-.704 0-.958.437-.958.84 0 .9.776.855 1.407.87.104 0 .18.015.225.06.046.03.082.106.082.18 0 .077-.035.15-.08.18-.06.053-.15.07-.277.07zM0 0v10.096L.81 8.22h1.75l.225.464V8.22h2.043l.45 1.02.437-1.013h6.502c.295 0 .56.057.756.236v-.23h1.787v.23c.307-.17.686-.23 1.12-.23h2.606l.24.466v-.466h1.918l.254.465v-.466h1.858v3.948H20.87l-.36-.6v.585h-2.353l-.256-.63h-.583l-.27.614h-1.213c-.48 0-.84-.104-1.08-.24v.24h-2.89v-.884c0-.12-.03-.12-.105-.135h-.105v1.036H6.067v-.48l-.21.48H4.69l-.202-.48v.465H2.235l-.256-.624H1.4l-.256.624H0V24h23.786v-7.108c-.27.135-.613.18-.973.18H21.09v-.255c-.21.165-.57.255-.914.255H14.71v-.9c0-.12-.018-.12-.12-.12h-.075v1.022h-1.8v-1.066c-.298.136-.643.15-.928.136h-.214v.915h-2.18l-.54-.617-.57.6H4.742v-3.93h3.61l.518.602.554-.6h2.412c.28 0 .74.03.942.225v-.24h2.177c.202 0 .644.045.903.225v-.24h3.265v.24c.163-.164.508-.24.803-.24h1.89v.24c.194-.15.464-.24.84-.24h1.176V0H0zM21.156 14.955c.004.005.006.012.01.016.01.01.024.01.032.02l-.042-.035zM23.828 13.082h.065v.555h-.065zM23.865 15.03v-.005c-.03-.025-.046-.048-.075-.07-.15-.153-.39-.215-.764-.225l-.36-.012c-.12 0-.194-.007-.27-.03-.09-.03-.15-.105-.15-.21 0-.09.03-.16.09-.204.076-.045.15-.05.27-.05h1.223v-.588h-1.283c-.69 0-.96.437-.96.84 0 .9.78.855 1.41.87.104 0 .18.015.224.06.046.03.076.106.076.18 0 .07-.034.138-.09.18-.045.056-.136.07-.27.07h-1.288v.605h1.287c.42 0 .734-.118.9-.36h.03c.09-.134.135-.3.135-.523 0-.24-.045-.39-.135-.526zM18.597 14.208v-.583h-2.235V16.458h2.235v-.585h-1.57v-.57h1.533v-.584h-1.532v-.51M13.51 8.787h.685V11.6h-.684zM13.126 9.543l-.007.006c0-.314-.13-.5-.34-.624-.217-.125-.47-.135-.81-.135H10.43v2.82h.674v-1.034h.72c.24 0 .39.03.487.12.122.136.107.378.107.548v.354h.677v-.553c0-.25-.016-.375-.11-.516-.09-.107-.202-.19-.33-.237.172-.07.472-.3.472-.75zm-.855.396h-.015c-.09.054-.195.056-.33.056H11.1v-.623h.825c.12 0 .24.004.33.05.09.04.15.128.15.25s-.047.22-.134.266zM15.92 9.373h.632v-.6h-.644c-.464 0-.804.105-1.02.33-.286.3-.362.69-.362 1.11 0 .512.123.833.36 1.074.232.238.645.31.97.31h.78l.255-.627h1.39l.262.627h1.36v-2.11l1.272 2.11h.95l.002.002V8.786h-.684v1.963l-1.18-1.96h-1.02V11.4L18.11 8.744h-1.004l-.943 2.22h-.3c-.177 0-.362-.03-.468-.134-.125-.15-.186-.36-.186-.662 0-.285.08-.51.194-.63.133-.135.272-.165.516-.165zm1.668-.108l.464 1.118v.002h-.93l.466-1.12zM2.38 10.97l.254.628H4V9.393l.972 2.205h.584l.973-2.202.015 2.202h.69v-2.81H6.118l-.807 1.904-.876-1.905H3.343v2.663L2.205 8.787h-.997L.01 11.597h.72l.26-.626h1.39zm-.688-1.705l.46 1.118-.003.002h-.915l.457-1.12zM11.856 13.62H9.714l-.85.923-.825-.922H5.346v2.82H8l.855-.932.824.93h1.302v-.94h.838c.6 0 1.17-.164 1.17-.945l-.006-.003c0-.78-.598-.93-1.128-.93zM7.67 15.853l-.014-.002H6.02v-.557h1.47v-.574H6.02v-.51H7.7l.733.82-.764.824zm2.642.33l-1.03-1.147 1.03-1.108v2.253zm1.553-1.258h-.885v-.717h.885c.24 0 .42.098.42.344 0 .243-.15.372-.42.372zM9.967 9.373v-.586H7.73V11.6h2.237v-.58H8.4v-.564h1.527V9.88H8.4v-.507',\n discover:\n 'M14.58 12a2.023 2.023 0 1 1-2.025-2.023h.002c1.118 0 2.023.906 2.023 2.023zm-5.2-2.001c-1.124 0-2.025.884-2.025 1.99 0 1.118.878 1.984 2.007 1.984.319 0 .593-.063.93-.221v-.873c-.296.297-.559.416-.895.416-.747 0-1.277-.542-1.277-1.312 0-.73.547-1.306 1.243-1.306.354 0 .622.126.93.428v-.873a1.898 1.898 0 0 0-.913-.233zm-3.352 1.545c-.445-.165-.576-.273-.576-.479 0-.239.233-.422.553-.422.222 0 .405.091.598.308l.388-.508a1.665 1.665 0 0 0-1.117-.422c-.673 0-1.186.467-1.186 1.089 0 .524.239.792.936 1.043.291.103.438.171.513.217a.456.456 0 0 1 .222.394c0 .308-.245.536-.576.536-.354 0-.639-.177-.809-.507l-.479.461c.342.502.752.724 1.317.724.771 0 1.311-.513 1.311-1.249-.002-.603-.252-.876-1.095-1.185zM24 10.3a.29.29 0 0 1-.288.291.29.29 0 0 1-.291-.291v-.003A.29.29 0 1 1 24 10.3zm-.059.001a.235.235 0 0 0-.231-.239.234.234 0 0 0-.232.239c0 .132.104.239.232.239a.235.235 0 0 0 .231-.239zM3.472 13.887h.742v-3.803h-.742v3.803zm12.702-1.248l-1.014-2.554h-.81l1.614 3.9h.399l1.643-3.9h-.804l-1.028 2.554zm2.166 1.248h2.104v-.644h-1.362v-1.027h1.312v-.644h-1.312v-.844h1.362v-.644H18.34v3.803zm5.409-3.557l.11.138h-.097l-.094-.13v.13h-.08v-.334h.107c.081 0 .126.036.126.103.001.046-.025.08-.072.093zm-.006-.092c0-.029-.021-.043-.06-.043h-.014v.087h.014c.039 0 .06-.014.06-.044zm-1.228 2.047l1.197 1.602H22.8l-1.027-1.528h-.097v1.528h-.741v-3.803h1.1c.855 0 1.346.411 1.346 1.123 0 .583-.308.965-.866 1.078zm.103-1.038c0-.37-.251-.563-.713-.563h-.228v1.152h.217c.473-.001.724-.207.724-.589zm-19.487.742a1.91 1.91 0 0 1-.69 1.46c-.365.303-.781.439-1.357.439H.001v-3.803H1.09c1.202 0 2.041.781 2.041 1.904zm-.764-.006c0-.364-.154-.718-.411-.947-.245-.222-.536-.308-1.015-.308H.742v2.515h.199c.479 0 .782-.092 1.015-.302.256-.228.411-.593.411-.958z',\n}\n\n// Tight viewBox per brand so the visible glyph fills its slot. The default\n// simpleicons 24x24 canvas leaves a lot of empty space around wordmarks like\n// Visa and Discover, which made them render visibly smaller than the\n// Mastercard / Amex marks at the same nominal size.\nconst BRAND_VIEWBOX: Record, string> = {\n visa: '0 7 24 10',\n mastercard: '0 4 24 16',\n amex: '0 0 24 24',\n discover: '0 8 24 8',\n}\n\nexport interface PaymentCardProps {\n number?: string\n name?: string\n expiry?: string\n cvc?: string\n brand?: 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown' | 'auto'\n flipped?: boolean\n variant?: 'default' | 'compact'\n tilt?: boolean\n shimmer?: boolean\n flip?: boolean\n size?: 'sm' | 'md' | 'lg'\n className?: string\n}\n\nfunction detectBrand(raw: string): CardBrand {\n const n = raw.replace(/\\D/g, '')\n if (!n) return 'unknown'\n if (/^4/.test(n)) return 'visa'\n if (/^(5[1-5]|2[2-7])/.test(n)) return 'mastercard'\n if (/^3[47]/.test(n)) return 'amex'\n if (/^(6011|65|64[4-9])/.test(n)) return 'discover'\n return 'unknown'\n}\n\nfunction maskedNumber(raw: string, brand: CardBrand): string {\n const digits = raw.replace(/\\D/g, '').slice(0, brand === 'amex' ? 15 : 16)\n const groups = brand === 'amex' ? [4, 6, 5] : [4, 4, 4, 4]\n const total = groups.reduce((a, b) => a + b, 0)\n const padded = (digits + '•'.repeat(total)).slice(0, total)\n let i = 0\n return groups\n .map((g) => {\n const slice = padded.slice(i, i + g)\n i += g\n return slice\n })\n .join(' ')\n}\n\nconst STYLE_ID = 'payment-card-styles'\nconst STYLE_CONTENT = `\n@keyframes payment-card-shimmer {\n 0% { transform: translateX(-50%); }\n 100% { transform: translateX(150%); }\n}\n[data-slot='payment-card'] .payment-card-brand {\n transition: opacity 200ms ease;\n}\n@media (prefers-reduced-motion: reduce) {\n [data-slot='payment-card'] [class*='transition-'] {\n transition-duration: 0ms !important;\n }\n [data-slot='payment-card'] [style*='payment-card-shimmer'] {\n animation: none !important;\n }\n}\n`\n\nconst PaymentCard = React.forwardRef(\n (\n {\n number = '',\n name = '',\n expiry = '',\n cvc = '',\n brand = 'auto',\n flipped = false,\n variant = 'default',\n tilt = false,\n shimmer = false,\n flip = true,\n size = 'md',\n className,\n },\n ref,\n ) => {\n // Inject keyframes + reduced-motion rules once.\n React.useEffect(() => {\n if (typeof document === 'undefined') return\n if (document.getElementById(STYLE_ID)) return\n const el = document.createElement('style')\n el.id = STYLE_ID\n el.textContent = STYLE_CONTENT\n document.head.appendChild(el)\n }, [])\n\n const detectedBrand: CardBrand = brand === 'auto' ? detectBrand(number) : (brand as CardBrand)\n\n const displayNumber = maskedNumber(number, detectedBrand)\n const displayName = (name || (variant === 'compact' ? '' : 'CARDHOLDER NAME')).toUpperCase()\n const displayExpiry = expiry || 'MM/YY'\n const displayCvc = (() => {\n const want = detectedBrand === 'amex' ? 4 : 3\n const v = (cvc || '').replace(/\\D/g, '').slice(0, want)\n return v.padEnd(want, '•')\n })()\n\n const brandGradient = (() => {\n switch (detectedBrand) {\n case 'visa':\n return 'bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900'\n case 'mastercard':\n return 'bg-gradient-to-br from-orange-500 via-red-500 to-red-700'\n case 'amex':\n return 'bg-gradient-to-br from-teal-500 via-teal-600 to-teal-800'\n case 'discover':\n return 'bg-gradient-to-br from-orange-400 via-orange-500 to-orange-700'\n default:\n return 'bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900'\n }\n })()\n\n const sizeClass =\n variant === 'compact' ? 'w-[120px]' : { sm: 'w-[280px]', md: 'w-[340px]', lg: 'w-[400px]' }[size]\n\n const fontClass = variant === 'compact' ? 'text-[7px]' : { sm: 'text-xs', md: 'text-sm', lg: 'text-base' }[size]\n\n const numberFontClass =\n variant === 'compact'\n ? 'text-[7px] tracking-tight'\n : { sm: 'text-base tracking-wider', md: 'text-lg tracking-wider', lg: 'text-xl tracking-widest' }[size]\n\n const brandHeightClass = variant === 'compact' ? 'h-2.5' : { sm: 'h-4', md: 'h-5', lg: 'h-6' }[size]\n\n // Tilt — mouse-parallax\n const cardRef = React.useRef(null)\n const setRefs = React.useCallback(\n (node: HTMLDivElement | null) => {\n cardRef.current = node\n if (typeof ref === 'function') ref(node)\n else if (ref) (ref as React.MutableRefObject).current = node\n },\n [ref],\n )\n const [tiltX, setTiltX] = React.useState(0)\n const [tiltY, setTiltY] = React.useState(0)\n const rafId = React.useRef(null)\n\n function onMove(e: React.MouseEvent) {\n if (!tilt || !cardRef.current) return\n if (rafId.current) cancelAnimationFrame(rafId.current)\n const clientX = e.clientX\n const clientY = e.clientY\n rafId.current = requestAnimationFrame(() => {\n if (!cardRef.current) return\n const rect = cardRef.current.getBoundingClientRect()\n const dx = (clientX - rect.left) / rect.width - 0.5\n const dy = (clientY - rect.top) / rect.height - 0.5\n setTiltY(dx * 16)\n setTiltX(-dy * 16)\n })\n }\n function onLeave() {\n setTiltX(0)\n setTiltY(0)\n }\n\n const flipDeg = flipped ? 180 : 0\n const innerTransform = `rotateX(${tiltX}deg) rotateY(${tiltY + flipDeg}deg)`\n\n return (\n \n \n {/* FRONT */}\n \n {/* Lighting overlay: subtle radial highlight top-left */}\n \n {/* Subtle bottom-right darkening */}\n \n {/* Shimmer sweep */}\n {shimmer && (\n \n )}\n\n
\n {/* Brand top-right */}\n
\n {detectedBrand !== 'unknown' ? (\n \n \n \n ) : (\n \n CARD\n \n )}\n
\n\n {/* Chip + contactless NFC, below brand on left */}\n
\n {/* EMV chip with 8-contact layout */}\n \n {/* Outer ring */}\n
\n {/* Horizontal divider */}\n
\n {/* Vertical dividers */}\n
\n
\n
\n\n {/* Contactless NFC waves */}\n {variant !== 'compact' && (\n \n \n \n \n \n )}\n
\n\n {/* spacer to push number+bottom down */}\n
\n\n {/* Number — embossed look via subtle text shadow */}\n \n {displayNumber}\n
\n\n {/* Bottom row: name + expiry */}\n
\n
\n {variant !== 'compact' && (\n
Cardholder
\n )}\n
\n {displayName}\n
\n
\n
\n {variant !== 'compact' && (\n
Expires
\n )}\n
\n {displayExpiry}\n
\n
\n
\n
\n
\n\n {/* BACK */}\n \n {/* Lighting overlay */}\n \n {/* Magstripe */}\n \n\n
\n {/* Signature strip + CVC */}\n
\n {/* Signature strip with diagonal hatching */}\n \n {variant !== 'compact' && (\n
\n Signature\n
\n )}\n
\n {/* CVC pill */}\n \n {variant !== 'compact' && (\n CVC\n )}\n {displayCvc}\n
\n
\n\n {variant !== 'compact' && (\n
\n Authorized signature. Not valid unless signed. For customer service, see your card issuer.\n
\n )}\n
\n \n \n \n )\n },\n)\nPaymentCard.displayName = 'PaymentCard'\n\nexport { PaymentCard }\n", "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" } ], "dependencies": [], "devDependencies": [], "registryDependencies": [], "description": "Animated 3D credit-card visual. Auto-detects brand (Visa, Mastercard, Amex, Discover) from the card number, flips between front and back, and supports opt-in mouse-parallax tilt and a shimmering gradient sweep. Pure presentational — pass typed values in via props.", "categories": [ "data-display" ] }