{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "payment-card", "title": "Payment Card", "type": "registry:ui", "description": "Premium metallic credit-card visual with embossed type, holographic foil, and per-digit typing animation. Auto-detects brand (Visa, Mastercard, Amex, Discover), flips in 3D, and supports opt-in mouse-parallax tilt and shimmer. Pure presentational — pass typed values in via props.", "categories": [ "data-display" ], "files": [ { "path": "packages/elements-lit/src/components/payment-card/payment-card.ts", "content": "import { LitElement, css, html, nothing, svg } from 'lit'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\nexport type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'unknown'\n\n// --- verbatim from packages/registry-react/components/payment-card/payment-card.tsx ---\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 formatMasked(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 + '••••••••••••••••').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\ninterface BrandVisual {\n cardClass: string\n accentGlow: string\n foilSheen: string\n guillocheColor: string\n textColor: string\n subtextColor: string\n embossStyle: string\n chipType: 'gold' | 'silver'\n}\n\nconst BRAND_VISUALS: Record = {\n visa: {\n cardClass:\n '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)]',\n accentGlow: 'from-blue-400/20 via-indigo-500/10 to-transparent',\n foilSheen: 'from-white/20 via-blue-200/5 to-transparent',\n guillocheColor: 'rgba(96, 165, 250, 0.12)',\n textColor: 'text-white',\n subtextColor: 'text-blue-200/60',\n embossStyle: 'text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]',\n chipType: 'gold',\n },\n mastercard: {\n cardClass:\n '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)]',\n accentGlow: 'from-red-500/25 via-amber-500/15 to-transparent',\n foilSheen: 'from-white/20 via-orange-300/10 to-transparent',\n guillocheColor: 'rgba(239, 68, 68, 0.1)',\n textColor: 'text-white',\n subtextColor: 'text-zinc-400',\n embossStyle: 'text-zinc-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'gold',\n },\n amex: {\n cardClass:\n '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)]',\n accentGlow: 'from-slate-300/20 via-teal-500/10 to-transparent',\n foilSheen: 'from-white/25 via-cyan-100/10 to-transparent',\n guillocheColor: 'rgba(148, 163, 184, 0.12)',\n textColor: 'text-slate-100',\n subtextColor: 'text-slate-400',\n embossStyle: 'text-slate-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'silver',\n },\n discover: {\n cardClass:\n '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)]',\n accentGlow: 'from-orange-400/25 via-amber-600/15 to-transparent',\n foilSheen: 'from-white/20 via-amber-200/10 to-transparent',\n guillocheColor: 'rgba(251, 146, 60, 0.12)',\n textColor: 'text-white',\n subtextColor: 'text-amber-200/60',\n embossStyle: 'text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'gold',\n },\n unknown: {\n cardClass:\n '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)]',\n accentGlow: 'from-zinc-400/15 via-zinc-600/10 to-transparent',\n foilSheen: 'from-white/18 via-zinc-300/5 to-transparent',\n guillocheColor: 'rgba(255, 255, 255, 0.06)',\n textColor: 'text-white',\n subtextColor: 'text-zinc-400',\n embossStyle: 'text-zinc-100 drop-shadow-[0_1px_2px_rgba(0,0,0,0.9)]',\n chipType: 'silver',\n },\n}\n\n// --- end verbatim ---\n\n// Boolean props whose React default is `true`: `attr=\"false\"` turns them off.\nconst trueByDefault = { fromAttribute: (v: string | null) => v !== 'false', toAttribute: () => null }\n\n/**\n * — the registry PaymentCard (a display-only credit-card\n * preview, `role=\"img\"`) as a web component. Not a form control in React, so\n * not form-associated here either; pair it with inputs that format the values.\n *\n * Class strings, brand visuals, masking (`formatMasked`), brand detection and\n * the tilt maths are React's verbatim. The React root
(role=img, size\n * width, perspective, mouse handlers) is rendered inside the shadow root; the\n * host is `display: inline-block` like that root's `inline-block`.\n *\n * Properties / attributes (React prop names): `number`, `name`, `expiry`,\n * `cvc`, `brand` ('auto' | 'visa' | 'mastercard' | 'amex' | 'discover' |\n * 'unknown'), `flipped`, `variant` ('default' | 'compact'), `tilt`, `shimmer`,\n * `flip` (default true; `flip=\"false\"` for the short 300ms transition),\n * `size` ('sm' | 'md' | 'lg').\n *\n * No events (React has no callbacks).\n */\nexport class UipPaymentCard extends LitElement {\n static styles = [tailwind, css`:host { display: inline-block; }`]\n\n static properties = {\n number: {},\n name: {},\n expiry: {},\n cvc: {},\n brand: { reflect: true },\n flipped: { type: Boolean, reflect: true },\n variant: { reflect: true },\n tilt: { type: Boolean },\n shimmer: { type: Boolean },\n flip: { converter: trueByDefault },\n size: { reflect: true },\n tiltState: { state: true },\n }\n\n number = ''\n name = ''\n expiry = ''\n cvc = ''\n brand: CardBrand | 'auto' = 'auto'\n flipped = false\n variant: 'default' | 'compact' = 'default'\n tilt = false\n shimmer = false\n flip = true\n size: 'sm' | 'md' | 'lg' = 'md'\n private tiltState = { x: 0, y: 0, active: false }\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'payment-card')\n }\n\n private get cardEl() {\n return this.renderRoot?.querySelector('[role=img]')\n }\n\n private onMouseMove = (e: MouseEvent) => {\n const el = this.cardEl\n if (!this.tilt || !el) return\n const rect = el.getBoundingClientRect()\n const x = e.clientX - rect.left\n const y = e.clientY - rect.top\n const px = (x / rect.width - 0.5) * 2\n const py = (y / rect.height - 0.5) * 2\n this.tiltState = { x: -py * 10, y: px * 12, active: true }\n }\n\n private onMouseLeave = () => {\n if (!this.tilt) return\n this.tiltState = { x: 0, y: 0, active: false }\n }\n\n private renderBrandLogo(detectedBrand: CardBrand) {\n const compact = this.variant === 'compact'\n switch (detectedBrand) {\n case 'visa':\n return html`\n \n \n `\n case 'mastercard':\n return html`
\n \n \n \n \n \n ${!compact\n ? // React sets letter-spacing -0.05em inline; a static inline style is\n // expressed as an arbitrary-property utility here.\n html`mastercard`\n : nothing}\n
`\n case 'amex':\n return html`\n AMEX\n
`\n case 'discover':\n return html`
\n DISC\n \n VER\n
`\n default:\n return html`
\n
\n
\n PREMIUM\n
`\n }\n }\n\n render() {\n const compact = this.variant === 'compact'\n const detectedBrand: CardBrand = this.brand && this.brand !== 'auto' ? this.brand : detectBrand(this.number ?? '')\n const theme = BRAND_VISUALS[detectedBrand] ?? BRAND_VISUALS.unknown\n\n const displayNumber = formatMasked(this.number ?? '', detectedBrand)\n const displayName = ((this.name ?? '').trim() || 'CARDHOLDER NAME').toUpperCase()\n const displayExpiry = (() => {\n const raw = (this.expiry ?? '').replace(/\\D/g, '').slice(0, 4)\n if (!raw) return 'MM/YY'\n if (raw.length <= 2) return raw + '/YY'\n return `${raw.slice(0, 2)}/${raw.slice(2, 4)}`\n })()\n const displayCvc = (() => {\n const max = detectedBrand === 'amex' ? 4 : 3\n const digits = (this.cvc ?? '').replace(/\\D/g, '').slice(0, max)\n return digits || '•••'\n })()\n const displayChars = displayNumber.split('')\n\n const sizeClass = compact\n ? 'w-[120px]'\n : this.size === 'sm'\n ? 'w-[280px]'\n : this.size === 'lg'\n ? 'w-[420px]'\n : 'w-[360px]'\n\n const flipDeg = this.flipped ? 180 : 0\n const innerTransform =\n this.tilt && this.tiltState.active\n ? `perspective(1200px) rotateX(${this.tiltState.x}deg) rotateY(${this.tiltState.y + flipDeg}deg) scale3d(1.02, 1.02, 1.02)`\n : `perspective(1200px) rotateY(${flipDeg}deg)`\n\n const bevel = html``\n\n return html`\n \n \n \n \n ${svg`\n \n \n \n \n \n \n \n \n `}\n \n\n
\n
\n
\n
\n ${bevel}\n ${this.shimmer\n ? // React sets animation: payment-card-shimmer 2.5s linear infinite inline\n // (the keyframes are not defined in the React registry either).\n html``\n : nothing}\n\n
\n \n
\n
\n ${!compact\n ? html`${detectedBrand === 'amex'\n ? 'PLATINUM'\n : detectedBrand === 'mastercard'\n ? 'WORLD ELITE'\n : 'SIGNATURE'}`\n : html`CARD`}\n
\n
${this.renderBrandLogo(detectedBrand)}
\n
\n\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n ${!compact\n ? html`\n \n \n \n `\n : nothing}\n
\n ${!compact ? html`
` : nothing}\n
\n\n \n \n ${displayNumber}\n ${displayChars.map(\n (ch) => html`${ch === ' ' ? ' ' : ch}`,\n )}\n \n\n \n
\n
\n ${!compact\n ? html`
CARDHOLDER NAME
`\n : nothing}\n
${displayName}
\n
\n
\n ${!compact\n ? html`
\n GOOD
THRU\n MONTH/YEAR\n
`\n : nothing}\n
${displayExpiry}
\n
\n
\n \n \n\n \n \n ${bevel}\n \n
\n
\n \n \n ${!compact\n ? html`
AUTHORIZED SIGNATURE
`\n : nothing}\n
\n \n ${!compact ? html`CVV` : nothing}\n ${displayCvc}\n
\n \n ${!compact\n ? html`
\n

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

\n
\n 24/7 Support: 1-800-555-0199\n CIRRUS · PLUS · STAR\n
\n
`\n : nothing}\n \n \n \n `\n }\n}\n\ncustomElements.get('uip-payment-card') || customElements.define('uip-payment-card', UipPaymentCard)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-payment-card': UipPaymentCard\n }\n}\n", "type": "registry:file", "target": "src/uip/components/payment-card/payment-card.ts" } ], "dependencies": [ "lit" ], "registryDependencies": [ "https://uipkge.dev/r/lit/lit-core.json" ] }