{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "gift-card-balance-checker",
  "title": "Gift Card Balance Checker",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/gift-card-balance-checker/GiftCardBalanceChecker.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  ArrowDownLeft,\n  ArrowUpRight,\n  Check,\n  CheckCircle2,\n  Copy,\n  CreditCard,\n  Gift,\n  HelpCircle,\n  Lock,\n  Plus,\n  RefreshCw,\n  ShieldCheck,\n  ShoppingBag,\n  Wallet,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\ninterface TransactionRecord {\n  id: string\n  date: string\n  reference: string\n  title: string\n  subtitle?: string\n  type: 'activation' | 'redemption' | 'reload'\n  amount: number\n  balanceAfter: number\n  status: 'Completed' | 'Pending'\n}\n\nconst initialTransactions: TransactionRecord[] = [\n  {\n    id: 'tx-1',\n    date: 'Dec 19, 2024',\n    reference: '#ORD-84112',\n    title: 'Store Checkout Redemption',\n    subtitle: 'Order #ORD-84112 · Leather Travel Wallet',\n    type: 'redemption',\n    amount: -15.0,\n    balanceAfter: 150.0,\n    status: 'Completed',\n  },\n  {\n    id: 'tx-2',\n    date: 'Nov 04, 2024',\n    reference: '#ORD-84920',\n    title: 'Store Checkout Redemption',\n    subtitle: 'Order #ORD-84920 · Merino Knit Sweater',\n    type: 'redemption',\n    amount: -35.0,\n    balanceAfter: 165.0,\n    status: 'Completed',\n  },\n  {\n    id: 'tx-3',\n    date: 'Oct 12, 2024',\n    reference: '#ACT-99014',\n    title: 'Initial Activation & Fund Issue',\n    subtitle: 'Digital Storefront Pass Issued',\n    type: 'activation',\n    amount: 200.0,\n    balanceAfter: 200.0,\n    status: 'Completed',\n  },\n]\n\nconst cardNumber = ref('7482 - 9104 - 6382 - 8492')\nconst securityPin = ref('4829')\nconst isChecking = ref(false)\nconst isVerified = ref(true)\nconst copied = ref(false)\nconst applied = ref(false)\nconst feedbackMessage = ref<string | null>(null)\nconst filterType = ref<'all' | 'redemptions' | 'loads'>('all')\nconst transactions = ref<TransactionRecord[]>(initialTransactions)\n\nfunction formatCardInput(raw: string): string {\n  const digits = raw.replace(/\\D/g, '').slice(0, 16)\n  return digits.replace(/(.{4})(?=.)/g, '$1 - ')\n}\n\nfunction handleCardNumberChange(e: Event) {\n  const target = e.target as HTMLInputElement\n  const formatted = formatCardInput(target.value)\n  cardNumber.value = formatted\n  target.value = formatted\n}\n\nfunction handlePinChange(e: Event) {\n  const target = e.target as HTMLInputElement\n  const digits = target.value.replace(/\\D/g, '').slice(0, 4)\n  securityPin.value = digits\n  target.value = digits\n}\n\nconst currentBalance = computed(() => {\n  if (transactions.value.length === 0) return 0\n  return transactions.value[0].balanceAfter\n})\n\nconst totalLoaded = computed(() => {\n  return transactions.value.filter((t) => t.amount > 0).reduce((sum, t) => sum + t.amount, 0)\n})\n\nconst totalSpent = computed(() => {\n  return Math.abs(transactions.value.filter((t) => t.amount < 0).reduce((sum, t) => sum + t.amount, 0))\n})\n\nconst lastFourDigits = computed(() => {\n  const digits = cardNumber.value.replace(/\\D/g, '')\n  return digits.length >= 4 ? digits.slice(-4) : '8492'\n})\n\nconst filteredTransactions = computed(() => {\n  if (filterType.value === 'redemptions') {\n    return transactions.value.filter((t) => t.type === 'redemption')\n  }\n  if (filterType.value === 'loads') {\n    return transactions.value.filter((t) => t.type === 'activation' || t.type === 'reload')\n  }\n  return transactions.value\n})\n\nfunction checkBalance() {\n  isChecking.value = true\n  feedbackMessage.value = null\n  setTimeout(() => {\n    isChecking.value = false\n    isVerified.value = true\n    feedbackMessage.value = `Gift card verified. Current active balance is $${currentBalance.value.toFixed(2)}.`\n    setTimeout(() => {\n      feedbackMessage.value = null\n    }, 4000)\n  }, 500)\n}\n\nfunction copyCardNumber() {\n  const raw = cardNumber.value.replace(/\\s+/g, '')\n  if (navigator?.clipboard) {\n    navigator.clipboard.writeText(raw)\n  }\n  copied.value = true\n  setTimeout(() => {\n    copied.value = false\n  }, 2000)\n}\n\nfunction applyToOrder() {\n  copyCardNumber()\n  applied.value = true\n  feedbackMessage.value = `Card ending in ${lastFourDigits.value} copied and applied to your checkout session!`\n  setTimeout(() => {\n    applied.value = false\n    feedbackMessage.value = null\n  }, 4000)\n}\n\nfunction reloadFunds(amount: number) {\n  const newBalance = currentBalance.value + amount\n  const newRecord: TransactionRecord = {\n    id: `tx-${Date.now()}`,\n    date: 'Today',\n    reference: `#RLD-${Math.floor(10000 + Math.random() * 90000)}`,\n    title: 'Manual Online Fund Reload',\n    subtitle: `Instant Online Top-Up (+ $${amount.toFixed(2)})`,\n    type: 'reload',\n    amount: amount,\n    balanceAfter: newBalance,\n    status: 'Completed',\n  }\n  transactions.value = [newRecord, ...transactions.value]\n  feedbackMessage.value = `Successfully reloaded +$${amount.toFixed(2)}! New card balance: $${newBalance.toFixed(2)}.`\n  setTimeout(() => {\n    feedbackMessage.value = null\n  }, 4000)\n}\n</script>\n\n<template>\n  <div data-slot=\"gift-card-balance-checker\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex items-center gap-2\">\n          <h2 class=\"text-foreground text-2xl font-bold tracking-tight\">Check Gift Card Balance</h2>\n          <Badge variant=\"outline\" class=\"bg-primary/5 text-primary border-primary/20 gap-1\">\n            <CheckCircle2 class=\"text-primary size-3\" />\n            Storefront Pass\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-sm\">\n          Check your remaining card balance, review past order redemptions, or reload funds.\n        </p>\n      </div>\n\n      <div class=\"flex items-center gap-2\">\n        <TooltipProvider :delay-duration=\"150\">\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <div\n                class=\"border-border bg-card text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs shadow-xs\"\n              >\n                <HelpCircle class=\"text-primary size-3.5\" />\n                <span>PIN & Card Guide</span>\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"bottom\" class=\"max-w-xs text-xs\">\n              Locate the 16-digit card code on the back of your physical card or inside your digital gift email. The\n              4-digit security PIN is under the scratch-off foil.\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </div>\n    </div>\n\n    <!-- Feedback Banner if active -->\n    <div\n      v-if=\"feedbackMessage\"\n      class=\"border-success/20 bg-success/10 text-success flex items-center justify-between rounded-lg border px-4 py-2.5 text-sm\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n        <span>{{ feedbackMessage }}</span>\n      </div>\n    </div>\n\n    <!-- 2-Column Storefront Layout -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Lookup Form & Digital Card Hero -->\n      <div class=\"space-y-6 lg:col-span-5\">\n        <!-- Lookup Card Form -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">Card Lookup</CardTitle>\n              <Badge\n                v-if=\"isVerified\"\n                variant=\"outline\"\n                class=\"border-success/30 bg-success/10 text-success gap-1 text-xs\"\n              >\n                <Check class=\"size-3\" />\n                Active Card\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Enter your gift card credentials to view live balance and activity.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4 pb-4\">\n            <!-- 16-Digit Card Number Input -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between\">\n                <label for=\"gc-number-input\" class=\"text-foreground text-xs font-medium\"> 16-Digit Card Number </label>\n                <TooltipProvider :delay-duration=\"150\">\n                  <Tooltip>\n                    <TooltipTrigger as-child>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:text-foreground inline-flex items-center focus-visible:outline-none\"\n                        aria-label=\"Gift card number info\"\n                      >\n                        <HelpCircle class=\"size-3.5\" />\n                      </button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"top\" class=\"max-w-xs text-xs\">\n                      Enter the 16 digits on the back of your card or in your receipt email.\n                    </TooltipContent>\n                  </Tooltip>\n                </TooltipProvider>\n              </div>\n\n              <Input\n                id=\"gc-number-input\"\n                :model-value=\"cardNumber\"\n                placeholder=\"XXXX - XXXX - XXXX - XXXX\"\n                maxlength=\"25\"\n                class=\"font-mono text-sm\"\n                :prefix-icon=\"CreditCard\"\n                @input=\"handleCardNumberChange\"\n              />\n            </div>\n\n            <!-- 4-Digit Security PIN Input -->\n            <div class=\"space-y-1.5\">\n              <div class=\"flex items-center justify-between\">\n                <label for=\"gc-pin-input\" class=\"text-foreground text-xs font-medium\"> Security PIN (4 digits) </label>\n                <TooltipProvider :delay-duration=\"150\">\n                  <Tooltip>\n                    <TooltipTrigger as-child>\n                      <button\n                        type=\"button\"\n                        class=\"text-muted-foreground hover:text-foreground inline-flex items-center focus-visible:outline-none\"\n                        aria-label=\"Security PIN info\"\n                      >\n                        <HelpCircle class=\"size-3.5\" />\n                      </button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"top\" class=\"max-w-xs text-xs\">\n                      The 4-digit PIN is revealed by scratching the silver foil or listed in your digital claim email.\n                    </TooltipContent>\n                  </Tooltip>\n                </TooltipProvider>\n              </div>\n\n              <Input\n                id=\"gc-pin-input\"\n                :model-value=\"securityPin\"\n                type=\"password\"\n                placeholder=\"••••\"\n                maxlength=\"4\"\n                show-password-toggle\n                class=\"font-mono text-sm\"\n                :prefix-icon=\"Lock\"\n                @input=\"handlePinChange\"\n              />\n            </div>\n\n            <Button type=\"button\" class=\"w-full font-medium\" :disabled=\"isChecking\" @click=\"checkBalance\">\n              <RefreshCw v-if=\"isChecking\" class=\"mr-2 size-4 animate-spin\" />\n              <ShieldCheck v-else class=\"mr-2 size-4\" />\n              {{ isChecking ? 'Verifying Balance...' : 'Check Balance' }}\n            </Button>\n          </CardContent>\n        </Card>\n\n        <!-- Stylized Digital Gift Card Hero Display -->\n        <div\n          class=\"relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-zinc-950 via-neutral-900 to-zinc-900 p-6 text-white shadow-lg\"\n        >\n          <div class=\"relative flex flex-col justify-between space-y-6\">\n            <!-- Card Top Bar: Brand & Pass Badge -->\n            <div class=\"flex items-start justify-between\">\n              <div class=\"flex items-center gap-2.5\">\n                <div\n                  class=\"flex size-9 items-center justify-center rounded-xl border border-white/10 bg-white/10 text-white shadow-inner backdrop-blur-md\"\n                >\n                  <Gift class=\"text-success size-5\" />\n                </div>\n                <div>\n                  <p class=\"text-xs font-bold tracking-wider text-neutral-200 uppercase\">Lumen Store</p>\n                  <p class=\"text-xs text-neutral-400\">Digital Gift Pass</p>\n                </div>\n              </div>\n\n              <Badge\n                variant=\"outline\"\n                class=\"gap-1.5 border-white/20 bg-white/10 px-2.5 py-0.5 text-xs text-white backdrop-blur-md\"\n              >\n                <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                Verified Active\n              </Badge>\n            </div>\n\n            <!-- Card Center: Chip Icon & Balance Display -->\n            <div class=\"space-y-1 pt-1\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-xs font-medium tracking-wider text-neutral-400 uppercase\">Available Balance</span>\n                <!-- Chip graphic representation -->\n                <div class=\"flex items-center gap-1 opacity-70\">\n                  <div\n                    class=\"border-warning/20/40 h-5 w-7 rounded-sm border bg-gradient-to-tr from-amber-400/20 to-amber-200/40\"\n                  />\n                  <span class=\"font-mono text-xs tracking-tighter text-neutral-400\">NFC</span>\n                </div>\n              </div>\n\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-3xl font-bold tracking-tight text-white tabular-nums sm:text-4xl\">\n                  ${{ currentBalance.toFixed(2) }}\n                </span>\n                <span class=\"text-success text-xs font-medium\">USD</span>\n              </div>\n            </div>\n\n            <!-- Card Footer: Card Number & Expiry terms -->\n            <div class=\"space-y-2 border-t border-white/10 pt-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <span class=\"font-mono text-sm tracking-widest text-neutral-200\">\n                    •••• •••• •••• {{ lastFourDigits }}\n                  </span>\n                  <button\n                    type=\"button\"\n                    class=\"rounded p-1 text-neutral-400 transition-colors hover:text-white focus-visible:ring-1 focus-visible:ring-white/40 focus-visible:outline-none\"\n                    aria-label=\"Copy card number\"\n                    @click=\"copyCardNumber\"\n                  >\n                    <Check v-if=\"copied\" class=\"text-success size-3.5\" />\n                    <Copy v-else class=\"size-3.5\" />\n                  </button>\n                </div>\n                <span v-if=\"copied\" class=\"animate-in fade-in text-success text-xs font-medium\"> Copied! </span>\n              </div>\n\n              <div class=\"flex items-center justify-between text-xs text-neutral-400\">\n                <span>Never Expires · No Inactivity Fees</span>\n                <span class=\"font-mono text-neutral-500\">PIN: ••••</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Quick Action Buttons -->\n        <div class=\"space-y-3\">\n          <Button variant=\"default\" class=\"w-full font-medium\" @click=\"applyToOrder\">\n            <Check v-if=\"applied\" class=\"text-success mr-2 size-4\" />\n            <ShoppingBag v-else class=\"mr-2 size-4\" />\n            {{ applied ? 'Applied to Checkout!' : 'Apply to Next Order' }}\n          </Button>\n\n          <!-- Quick Reload Card -->\n          <Card class=\"border-border shadow-xs\">\n            <CardHeader class=\"p-4 pb-2\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                  Quick Reload Funds\n                </CardTitle>\n                <Plus class=\"text-muted-foreground size-3.5\" />\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-4 pt-0\">\n              <p class=\"text-muted-foreground mb-3 text-xs\">\n                Top up your gift card instantly with a saved payment method.\n              </p>\n              <div class=\"grid grid-cols-3 gap-2\">\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  class=\"hover:bg-primary/5 hover:text-primary hover:border-primary/30 w-full font-medium tabular-nums\"\n                  @click=\"reloadFunds(25)\"\n                >\n                  + $25.00\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  class=\"hover:bg-primary/5 hover:text-primary hover:border-primary/30 w-full font-medium tabular-nums\"\n                  @click=\"reloadFunds(50)\"\n                >\n                  + $50.00\n                </Button>\n                <Button\n                  variant=\"outline\"\n                  size=\"sm\"\n                  class=\"hover:bg-primary/5 hover:text-primary hover:border-primary/30 w-full font-medium tabular-nums\"\n                  @click=\"reloadFunds(100)\"\n                >\n                  + $100.00\n                </Button>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n\n      <!-- Right Column: Balance Stats & Redemption History Table -->\n      <div class=\"space-y-6 lg:col-span-7\">\n        <!-- Passbook Summary Metrics -->\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n          <div class=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n            <div class=\"text-muted-foreground mb-1 flex items-center justify-between text-xs\">\n              <span>Available Balance</span>\n              <Wallet class=\"text-primary size-3.5\" />\n            </div>\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n              ${{ currentBalance.toFixed(2) }}\n            </p>\n            <p class=\"text-success mt-1 flex items-center gap-1 text-xs font-medium\">\n              <Check class=\"size-3\" />\n              Ready to spend\n            </p>\n          </div>\n\n          <div class=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n            <div class=\"text-muted-foreground mb-1 flex items-center justify-between text-xs\">\n              <span>Total Value Loaded</span>\n              <ArrowDownLeft class=\"text-success size-3.5\" />\n            </div>\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">${{ totalLoaded.toFixed(2) }}</p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">All top-ups & issue</p>\n          </div>\n\n          <div class=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n            <div class=\"text-muted-foreground mb-1 flex items-center justify-between text-xs\">\n              <span>Total Redeemed</span>\n              <ArrowUpRight class=\"text-muted-foreground size-3.5\" />\n            </div>\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">-${{ totalSpent.toFixed(2) }}</p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">Past store orders</p>\n          </div>\n        </div>\n\n        <!-- Redemption & Activity History Card -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n              <div>\n                <CardTitle class=\"text-base font-semibold\">Redemption & Activity History</CardTitle>\n                <CardDescription class=\"text-xs\">\n                  Detailed ledger of card issuance, promotional top-ups, and store checkouts.\n                </CardDescription>\n              </div>\n\n              <!-- Filter Pills -->\n              <div class=\"border-border bg-muted/40 flex items-center gap-1.5 rounded-lg border p-1 text-xs\">\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded px-2.5 py-1 font-medium transition-colors',\n                      filterType === 'all'\n                        ? 'bg-background text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"filterType = 'all'\"\n                >\n                  All ({{ transactions.length }})\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded px-2.5 py-1 font-medium transition-colors',\n                      filterType === 'redemptions'\n                        ? 'bg-background text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"filterType = 'redemptions'\"\n                >\n                  Redemptions\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded px-2.5 py-1 font-medium transition-colors',\n                      filterType === 'loads'\n                        ? 'bg-background text-foreground shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"filterType = 'loads'\"\n                >\n                  Loads\n                </button>\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"p-0\">\n            <div class=\"overflow-x-auto\">\n              <Table>\n                <TableHeader>\n                  <TableRow>\n                    <TableHead class=\"w-[110px]\">Date</TableHead>\n                    <TableHead>Activity & Reference</TableHead>\n                    <TableHead class=\"w-[90px] text-center\">Type</TableHead>\n                    <TableHead class=\"w-[100px] text-right\">Amount</TableHead>\n                    <TableHead class=\"w-[110px] text-right\">Resulting Balance</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow v-for=\"record in filteredTransactions\" :key=\"record.id\">\n                    <TableCell class=\"text-muted-foreground text-xs font-medium\">\n                      {{ record.date }}\n                    </TableCell>\n                    <TableCell>\n                      <div class=\"space-y-0.5\">\n                        <p class=\"text-foreground text-sm leading-none font-medium\">\n                          {{ record.title }}\n                        </p>\n                        <p v-if=\"record.subtitle\" class=\"text-muted-foreground text-xs\">\n                          {{ record.subtitle }}\n                        </p>\n                      </div>\n                    </TableCell>\n                    <TableCell class=\"text-center\">\n                      <Badge\n                        v-if=\"record.type === 'activation'\"\n                        variant=\"outline\"\n                        class=\"border-success/30 bg-success/10 text-success px-2 py-0.5 text-xs font-normal\"\n                      >\n                        Activation\n                      </Badge>\n                      <Badge\n                        v-else-if=\"record.type === 'reload'\"\n                        variant=\"outline\"\n                        class=\"border-info/30 bg-info/10 text-info px-2 py-0.5 text-xs font-normal\"\n                      >\n                        Reload\n                      </Badge>\n                      <Badge v-else variant=\"secondary\" class=\"px-2 py-0.5 text-xs font-normal\"> Redemption </Badge>\n                    </TableCell>\n                    <TableCell\n                      :class=\"\n                        cn(\n                          'text-right text-sm font-medium tabular-nums',\n                          record.amount > 0 ? 'text-success' : 'text-foreground',\n                        )\n                      \"\n                    >\n                      {{\n                        record.amount > 0 ? `+$${record.amount.toFixed(2)}` : `-$${Math.abs(record.amount).toFixed(2)}`\n                      }}\n                    </TableCell>\n                    <TableCell class=\"text-muted-foreground text-right font-mono text-sm tabular-nums\">\n                      ${{ record.balanceAfter.toFixed(2) }}\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n          </CardContent>\n\n          <CardFooter\n            class=\"border-border text-muted-foreground flex flex-col gap-3 border-t p-4 text-xs sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <div class=\"flex items-center gap-1.5\">\n              <ShieldCheck class=\"text-primary size-4 shrink-0\" />\n              <span>Protected by 256-bit encryption · Zero liability policy</span>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <button\n                type=\"button\"\n                class=\"hover:text-foreground flex min-h-6 items-center gap-1 underline-offset-4 hover:underline\"\n                @click=\"checkBalance\"\n              >\n                <RefreshCw class=\"size-3\" />\n                Refresh Ledger\n              </button>\n            </div>\n          </CardFooter>\n        </Card>\n\n        <!-- Digital Passbook Barcode Card -->\n        <Card class=\"border-border bg-muted/20 shadow-xs\">\n          <CardContent class=\"flex flex-col items-center justify-between gap-4 p-4 sm:flex-row sm:p-5\">\n            <div class=\"space-y-1 text-center sm:text-left\">\n              <h4 class=\"text-foreground flex items-center justify-center gap-2 text-sm font-semibold sm:justify-start\">\n                <Wallet class=\"text-primary size-4\" />\n                In-Store Digital Pass\n              </h4>\n              <p class=\"text-muted-foreground max-w-sm text-xs\">\n                Present this barcode at checkout in any physical store location to scan and redeem card funds.\n              </p>\n            </div>\n\n            <!-- Barcode Simulation -->\n            <div class=\"border-border bg-card flex flex-col items-center gap-1.5 rounded-lg border p-3 shadow-xs\">\n              <div class=\"flex h-10 items-end gap-[3px] px-2\" aria-hidden=\"true\">\n                <div class=\"bg-foreground h-full w-[2px]\" />\n                <div class=\"bg-foreground h-full w-[4px]\" />\n                <div class=\"bg-foreground h-full w-[1px]\" />\n                <div class=\"bg-foreground h-full w-[3px]\" />\n                <div class=\"bg-foreground h-full w-[2px]\" />\n                <div class=\"bg-foreground h-full w-[5px]\" />\n                <div class=\"bg-foreground h-full w-[1px]\" />\n                <div class=\"bg-foreground h-full w-[3px]\" />\n                <div class=\"bg-foreground h-full w-[2px]\" />\n                <div class=\"bg-foreground h-full w-[4px]\" />\n                <div class=\"bg-foreground h-full w-[2px]\" />\n                <div class=\"bg-foreground h-full w-[1px]\" />\n                <div class=\"bg-foreground h-full w-[4px]\" />\n                <div class=\"bg-foreground h-full w-[2px]\" />\n                <div class=\"bg-foreground h-full w-[3px]\" />\n              </div>\n              <span class=\"text-muted-foreground font-mono text-xs tracking-widest\">\n                {{ cardNumber }}\n              </span>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/GiftCardBalanceChecker.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/tooltip.json"
  ],
  "description": "Customer storefront gift card balance lookup, live digital card passbook, quick fund reloading, and complete redemption audit history ledger.",
  "categories": [
    "commerce",
    "ecommerce",
    "finance",
    "app"
  ]
}