{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "payment-card",
  "title": "Payment Card",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/payment-card/PaymentCard.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\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<Exclude<CardBrand, 'unknown'>, 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<Exclude<CardBrand, 'unknown'>, 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\nconst props = withDefaults(\n  defineProps<{\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    class?: string\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  },\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\nconst detectedBrand = computed<CardBrand>(() =>\n  props.brand === 'auto' ? detectBrand(props.number) : (props.brand as CardBrand),\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 displayNumber = computed(() => maskedNumber(props.number, detectedBrand.value))\nconst displayName = computed(() => {\n  const fallback = props.variant === 'compact' ? '' : 'CARDHOLDER NAME'\n  return (props.name || fallback).toUpperCase()\n})\nconst displayExpiry = computed(() => props.expiry || 'MM/YY')\nconst displayCvc = computed(() => {\n  const want = detectedBrand.value === 'amex' ? 4 : 3\n  const v = (props.cvc || '').replace(/\\D/g, '').slice(0, want)\n  return v.padEnd(want, '•')\n})\n\nconst brandGradient = computed(() => {\n  switch (detectedBrand.value) {\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\nconst sizeClass = computed(() => {\n  if (props.variant === 'compact') return 'w-[120px]'\n  return { sm: 'w-[280px]', md: 'w-[340px]', lg: 'w-[400px]' }[props.size]\n})\n\nconst fontClass = computed(() => {\n  if (props.variant === 'compact') return 'text-[7px]'\n  return { sm: 'text-xs', md: 'text-sm', lg: 'text-base' }[props.size]\n})\n\nconst numberFontClass = computed(() => {\n  if (props.variant === 'compact') return 'text-[7px] tracking-tight'\n  return { sm: 'text-base tracking-wider', md: 'text-lg tracking-wider', lg: 'text-xl tracking-widest' }[props.size]\n})\n\nconst brandHeightClass = computed(() => {\n  if (props.variant === 'compact') return 'h-2.5'\n  return { sm: 'h-4', md: 'h-5', lg: 'h-6' }[props.size]\n})\n\n// Tilt — mouse-parallax\nconst cardRef = ref<HTMLDivElement | null>(null)\nconst tiltX = ref(0)\nconst tiltY = ref(0)\nlet rafId: number | null = null\n\nfunction onMove(e: MouseEvent) {\n  if (!props.tilt || !cardRef.value) return\n  if (rafId) cancelAnimationFrame(rafId)\n  rafId = requestAnimationFrame(() => {\n    if (!cardRef.value) return\n    const rect = cardRef.value.getBoundingClientRect()\n    const dx = (e.clientX - rect.left) / rect.width - 0.5\n    const dy = (e.clientY - rect.top) / rect.height - 0.5\n    tiltY.value = dx * 16\n    tiltX.value = -dy * 16\n  })\n}\nfunction onLeave() {\n  tiltX.value = 0\n  tiltY.value = 0\n}\n\nconst innerTransform = computed(() => {\n  const flipDeg = props.flipped ? 180 : 0\n  return `rotateX(${tiltX.value}deg) rotateY(${tiltY.value + flipDeg}deg)`\n})\n</script>\n\n<template>\n  <div\n    ref=\"cardRef\"\n    data-uipkge\n    data-slot=\"payment-card\"\n    :class=\"cn('group relative inline-block select-none [perspective:1200px]', sizeClass, props.class)\"\n    @mousemove=\"onMove\"\n    @mouseleave=\"onLeave\"\n  >\n    <div\n      class=\"relative aspect-[1.586/1] w-full transition-transform [transform-style:preserve-3d]\"\n      :class=\"flip ? 'duration-[600ms] ease-[cubic-bezier(0.4,0,0.2,1)]' : 'duration-300'\"\n      :style=\"{ transform: innerTransform }\"\n    >\n      <!-- FRONT -->\n      <div\n        :class=\"\n          cn(\n            'absolute inset-0 overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',\n            'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',\n            brandGradient,\n          )\n        \"\n      >\n        <!-- Lighting overlay: subtle radial highlight top-left -->\n        <div\n          class=\"pointer-events-none absolute inset-0\"\n          style=\"background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)\"\n        />\n        <!-- Subtle bottom-right darkening -->\n        <div\n          class=\"pointer-events-none absolute inset-0\"\n          style=\"background: radial-gradient(80% 60% at 100% 100%, rgba(0, 0, 0, 0.25) 0%, transparent 60%)\"\n        />\n        <!-- Shimmer sweep -->\n        <div\n          v-if=\"shimmer\"\n          class=\"pointer-events-none absolute -inset-x-full inset-y-0 bg-gradient-to-r from-transparent via-white/20 to-transparent\"\n          style=\"animation: payment-card-shimmer 2.5s linear infinite\"\n        />\n\n        <div :class=\"cn('absolute inset-0 flex flex-col', variant === 'compact' ? 'p-2' : 'p-4')\">\n          <!-- Brand top-right -->\n          <div class=\"flex h-auto justify-end text-white\">\n            <Transition name=\"brand-fade\" mode=\"out-in\">\n              <svg\n                v-if=\"detectedBrand !== 'unknown'\"\n                :key=\"detectedBrand\"\n                :viewBox=\"BRAND_VIEWBOX[detectedBrand]\"\n                :class=\"[brandHeightClass, 'w-auto']\"\n                fill=\"currentColor\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                aria-hidden=\"true\"\n              >\n                <path :d=\"BRAND_PATHS[detectedBrand]\" />\n              </svg>\n              <span\n                v-else\n                key=\"unknown\"\n                class=\"font-semibold tracking-wider opacity-60\"\n                :class=\"variant === 'compact' ? 'text-[8px]' : 'text-xs'\"\n                >CARD</span\n              >\n            </Transition>\n          </div>\n\n          <!-- Chip + contactless NFC, below brand on left -->\n          <div :class=\"cn('flex items-center gap-2', variant === 'compact' ? 'mt-1' : 'mt-3')\">\n            <!-- EMV chip with 8-contact layout -->\n            <div\n              :class=\"\n                cn(\n                  'relative rounded-[4px] bg-gradient-to-br from-amber-100 via-yellow-300 to-yellow-600 shadow-[inset_0_0_4px_rgba(0,0,0,0.25)]',\n                  variant === 'compact' ? 'h-3 w-4' : 'h-7 w-10',\n                )\n              \"\n            >\n              <!-- Outer ring -->\n              <div class=\"absolute inset-[2px] rounded-[2px] border border-yellow-700/30\" />\n              <!-- Horizontal divider -->\n              <div class=\"absolute inset-x-[2px] top-1/2 h-px -translate-y-px bg-yellow-700/40\" />\n              <!-- Vertical dividers -->\n              <div class=\"absolute inset-y-[2px] left-1/3 w-px bg-yellow-700/40\" />\n              <div class=\"absolute inset-y-[2px] left-2/3 w-px bg-yellow-700/40\" />\n            </div>\n\n            <!-- Contactless NFC waves -->\n            <svg\n              v-if=\"variant !== 'compact'\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-6 w-auto opacity-80\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.5\"\n              stroke-linecap=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M7 8.5a6 6 0 0 1 0 7\" />\n              <path d=\"M10 6a9.5 9.5 0 0 1 0 12\" />\n              <path d=\"M13 4a13 13 0 0 1 0 16\" />\n            </svg>\n          </div>\n\n          <!-- spacer to push number+bottom down -->\n          <div class=\"flex-1\" />\n\n          <!-- Number — embossed look via subtle text shadow -->\n          <div\n            :class=\"\n              cn(\n                'overflow-hidden font-mono font-semibold whitespace-nowrap',\n                variant === 'compact' ? 'mb-1' : 'mb-3',\n                numberFontClass,\n              )\n            \"\n            style=\"\n              text-shadow:\n                0 1px 0 rgba(0, 0, 0, 0.18),\n                0 -1px 0 rgba(255, 255, 255, 0.08);\n            \"\n          >\n            {{ displayNumber }}\n          </div>\n\n          <!-- Bottom row: name + expiry -->\n          <div class=\"flex items-end justify-between gap-2\">\n            <div class=\"min-w-0 flex-1\">\n              <div v-if=\"variant !== 'compact'\" class=\"text-[9px] font-medium tracking-[0.18em] uppercase opacity-50\">\n                Cardholder\n              </div>\n              <div :class=\"cn('truncate font-semibold tracking-wide whitespace-nowrap uppercase', fontClass)\">\n                {{ displayName }}\n              </div>\n            </div>\n            <div class=\"shrink-0 text-right\">\n              <div v-if=\"variant !== 'compact'\" class=\"text-[9px] font-medium tracking-[0.18em] uppercase opacity-50\">\n                Expires\n              </div>\n              <div :class=\"cn('font-mono font-semibold tracking-wide whitespace-nowrap', fontClass)\">\n                {{ displayExpiry }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- BACK -->\n      <div\n        :class=\"\n          cn(\n            'absolute inset-0 [transform:rotateY(180deg)] overflow-hidden rounded-[14px] text-white [backface-visibility:hidden]',\n            'shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.15)]',\n            brandGradient,\n          )\n        \"\n      >\n        <!-- Lighting overlay -->\n        <div\n          class=\"pointer-events-none absolute inset-0\"\n          style=\"background: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 55%)\"\n        />\n        <!-- Magstripe -->\n        <div\n          :class=\"\n            cn(\n              'w-full bg-gradient-to-b from-black via-neutral-900 to-black/90 shadow-[inset_0_1px_0_rgba(255,255,255,0.06),inset_0_-1px_0_rgba(0,0,0,0.5)]',\n              variant === 'compact' ? 'mt-3 h-5' : 'mt-6 h-10',\n            )\n          \"\n        />\n\n        <div :class=\"cn('relative', variant === 'compact' ? 'p-2' : 'p-4')\">\n          <!-- Signature strip + CVC -->\n          <div :class=\"cn('flex items-stretch gap-2', variant === 'compact' ? 'mt-1' : 'mt-2')\">\n            <!-- Signature strip with diagonal hatching -->\n            <div\n              :class=\"\n                cn(\n                  'relative flex-1 overflow-hidden rounded bg-white/95 px-2 py-1.5',\n                  variant === 'compact' ? 'h-5' : 'h-9',\n                )\n              \"\n              style=\"\n                background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 6px);\n                background-color: rgba(248, 248, 248, 0.95);\n              \"\n            >\n              <div\n                v-if=\"variant !== 'compact'\"\n                class=\"absolute top-1 right-1.5 text-[7px] tracking-wider text-slate-500/80 uppercase\"\n              >\n                Signature\n              </div>\n            </div>\n            <!-- CVC pill -->\n            <div\n              :class=\"\n                cn(\n                  'flex flex-col items-center justify-center rounded bg-white font-mono text-slate-900 shadow-sm',\n                  variant === 'compact' ? 'px-1 text-[9px]' : 'px-2.5 text-sm',\n                )\n              \"\n            >\n              <span v-if=\"variant !== 'compact'\" class=\"text-[7px] font-medium tracking-wider text-slate-500 uppercase\"\n                >CVC</span\n              >\n              <span class=\"leading-none font-semibold\">{{ displayCvc }}</span>\n            </div>\n          </div>\n\n          <div v-if=\"variant !== 'compact'\" class=\"mt-3 text-[9px] tracking-wide opacity-50\">\n            Authorized signature. Not valid unless signed. For customer service, see your card issuer.\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@keyframes payment-card-shimmer {\n  0% {\n    transform: translateX(-50%);\n  }\n  100% {\n    transform: translateX(150%);\n  }\n}\n\n.brand-fade-enter-active,\n.brand-fade-leave-active {\n  transition: opacity 200ms ease;\n}\n.brand-fade-enter-from,\n.brand-fade-leave-to {\n  opacity: 0;\n}\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</style>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/payment-card/PaymentCard.vue"
    },
    {
      "path": "packages/registry-vue/components/payment-card/index.ts",
      "content": "export { default as PaymentCard } from './PaymentCard.vue'\n",
      "type": "registry:ui",
      "target": "~/app/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"
  ]
}