{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gift-card-balance-checker",
  "title": "Gift Card Balance Checker",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/gift-card-balance-checker/GiftCardBalanceChecker.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { useMemo } from 'react'\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-react'\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\nexport interface GiftCardBalanceCheckerProps {\n  className?: string\n}\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\nexport function GiftCardBalanceChecker({ className }: GiftCardBalanceCheckerProps) {\n  const [cardNumber, setCardNumber] = React.useState('7482 - 9104 - 6382 - 8492')\n  const [securityPin, setSecurityPin] = React.useState('4829')\n  const [isChecking, setIsChecking] = React.useState(false)\n  const [isVerified, setIsVerified] = React.useState(true)\n  const [copied, setCopied] = React.useState(false)\n  const [applied, setApplied] = React.useState(false)\n  const [feedbackMessage, setFeedbackMessage] = React.useState<string | null>(null)\n  const [filterType, setFilterType] = React.useState<'all' | 'redemptions' | 'loads'>('all')\n  const [transactions, setTransactions] = React.useState<TransactionRecord[]>(initialTransactions)\n\n  function formatCardInput(raw: string): string {\n    const digits = raw.replace(/\\D/g, '').slice(0, 16)\n    return digits.replace(/(.{4})(?=.)/g, '$1 - ')\n  }\n\n  function handleCardNumberChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const formatted = formatCardInput(e.target.value)\n    setCardNumber(formatted)\n  }\n\n  function handlePinChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const digits = e.target.value.replace(/\\D/g, '').slice(0, 4)\n    setSecurityPin(digits)\n  }\n\n  const currentBalance = useMemo(() => {\n    if (transactions.length === 0) return 0\n    return transactions[0].balanceAfter\n  }, [transactions])\n\n  const totalLoaded = useMemo(() => {\n    return transactions.filter((t) => t.amount > 0).reduce((sum, t) => sum + t.amount, 0)\n  }, [transactions])\n\n  const totalSpent = useMemo(() => {\n    return Math.abs(transactions.filter((t) => t.amount < 0).reduce((sum, t) => sum + t.amount, 0))\n  }, [transactions])\n\n  const lastFourDigits = useMemo(() => {\n    const digits = cardNumber.replace(/\\D/g, '')\n    return digits.length >= 4 ? digits.slice(-4) : '8492'\n  }, [cardNumber])\n\n  const filteredTransactions = useMemo(() => {\n    if (filterType === 'redemptions') {\n      return transactions.filter((t) => t.type === 'redemption')\n    }\n    if (filterType === 'loads') {\n      return transactions.filter((t) => t.type === 'activation' || t.type === 'reload')\n    }\n    return transactions\n  }, [transactions, filterType])\n\n  function checkBalance() {\n    setIsChecking(true)\n    setFeedbackMessage(null)\n    setTimeout(() => {\n      setIsChecking(false)\n      setIsVerified(true)\n      setFeedbackMessage(`Gift card verified. Current active balance is $${currentBalance.toFixed(2)}.`)\n      setTimeout(() => {\n        setFeedbackMessage(null)\n      }, 4000)\n    }, 500)\n  }\n\n  function copyCardNumber() {\n    const raw = cardNumber.replace(/\\s+/g, '')\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(raw)\n    }\n    setCopied(true)\n    setTimeout(() => {\n      setCopied(false)\n    }, 2000)\n  }\n\n  function applyToOrder() {\n    copyCardNumber()\n    setApplied(true)\n    setFeedbackMessage(`Card ending in ${lastFourDigits} copied and applied to your checkout session!`)\n    setTimeout(() => {\n      setApplied(false)\n      setFeedbackMessage(null)\n    }, 4000)\n  }\n\n  function reloadFunds(amount: number) {\n    const newBalance = currentBalance + 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    setTransactions((prev) => [newRecord, ...prev])\n    setFeedbackMessage(`Successfully reloaded +$${amount.toFixed(2)}! New card balance: $${newBalance.toFixed(2)}.`)\n    setTimeout(() => {\n      setFeedbackMessage(null)\n    }, 4000)\n  }\n\n  return (\n    <div data-slot=\"gift-card-balance-checker\" className={cn('w-full space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex items-center gap-2\">\n            <h2 className=\"text-foreground text-2xl font-bold tracking-tight\">Check Gift Card Balance</h2>\n            <Badge variant=\"outline\" className=\"bg-primary/5 text-primary border-primary/20 gap-1\">\n              <CheckCircle2 className=\"text-primary size-3\" />\n              Storefront Pass\n            </Badge>\n          </div>\n          <p className=\"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 className=\"flex items-center gap-2\">\n          <TooltipProvider delayDuration={150}>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <div className=\"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                  <HelpCircle className=\"text-primary size-3.5\" />\n                  <span>PIN & Card Guide</span>\n                </div>\n              </TooltipTrigger>\n              <TooltipContent side=\"bottom\" className=\"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      {feedbackMessage && (\n        <div className=\"border-success/20 bg-success/10 text-success flex items-center justify-between rounded-lg border px-4 py-2.5 text-sm\">\n          <div className=\"flex items-center gap-2\">\n            <CheckCircle2 className=\"text-success size-4 shrink-0\" />\n            <span>{feedbackMessage}</span>\n          </div>\n        </div>\n      )}\n\n      {/* 2-Column Storefront Layout */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        {/* Left Column: Lookup Form & Digital Card Hero */}\n        <div className=\"space-y-6 lg:col-span-5\">\n          {/* Lookup Card Form */}\n          <Card className=\"border-border shadow-xs\">\n            <CardHeader className=\"pb-4\">\n              <div className=\"flex items-center justify-between\">\n                <CardTitle className=\"text-base font-semibold\">Card Lookup</CardTitle>\n                {isVerified && (\n                  <Badge variant=\"outline\" className=\"border-success/30 bg-success/10 text-success gap-1 text-xs\">\n                    <Check className=\"size-3\" />\n                    Active Card\n                  </Badge>\n                )}\n              </div>\n              <CardDescription className=\"text-xs\">\n                Enter your gift card credentials to view live balance and activity.\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4 pb-4\">\n              {/* 16-Digit Card Number Input */}\n              <div className=\"space-y-1.5\">\n                <div className=\"flex items-center justify-between\">\n                  <label htmlFor=\"gc-number-input-react\" className=\"text-foreground text-xs font-medium\">\n                    16-Digit Card Number\n                  </label>\n                  <TooltipProvider delayDuration={150}>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <button\n                          type=\"button\"\n                          className=\"text-muted-foreground hover:text-foreground inline-flex items-center focus-visible:outline-none\"\n                          aria-label=\"Gift card number info\"\n                        >\n                          <HelpCircle className=\"size-3.5\" />\n                        </button>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"top\" className=\"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-react\"\n                  value={cardNumber}\n                  placeholder=\"XXXX - XXXX - XXXX - XXXX\"\n                  maxLength={25}\n                  className=\"font-mono text-sm\"\n                  prefixIcon={<CreditCard className=\"size-4\" />}\n                  onChange={handleCardNumberChange}\n                />\n              </div>\n\n              {/* 4-Digit Security PIN Input */}\n              <div className=\"space-y-1.5\">\n                <div className=\"flex items-center justify-between\">\n                  <label htmlFor=\"gc-pin-input-react\" className=\"text-foreground text-xs font-medium\">\n                    Security PIN (4 digits)\n                  </label>\n                  <TooltipProvider delayDuration={150}>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <button\n                          type=\"button\"\n                          className=\"text-muted-foreground hover:text-foreground inline-flex items-center focus-visible:outline-none\"\n                          aria-label=\"Security PIN info\"\n                        >\n                          <HelpCircle className=\"size-3.5\" />\n                        </button>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"top\" className=\"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-react\"\n                  value={securityPin}\n                  type=\"password\"\n                  placeholder=\"••••\"\n                  maxLength={4}\n                  showPasswordToggle\n                  className=\"font-mono text-sm\"\n                  prefixIcon={<Lock className=\"size-4\" />}\n                  onChange={handlePinChange}\n                />\n              </div>\n\n              <Button type=\"button\" className=\"w-full font-medium\" disabled={isChecking} onClick={checkBalance}>\n                {isChecking ? (\n                  <>\n                    <RefreshCw className=\"mr-2 size-4 animate-spin\" />\n                    Verifying Balance...\n                  </>\n                ) : (\n                  <>\n                    <ShieldCheck className=\"mr-2 size-4\" />\n                    Check Balance\n                  </>\n                )}\n              </Button>\n            </CardContent>\n          </Card>\n\n          {/* Stylized Digital Gift Card Hero Display */}\n          <div className=\"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            <div className=\"relative flex flex-col justify-between space-y-6\">\n              {/* Card Top Bar: Brand & Pass Badge */}\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-center gap-2.5\">\n                  <div className=\"flex size-9 items-center justify-center rounded-xl border border-white/10 bg-white/10 text-white shadow-inner backdrop-blur-md\">\n                    <Gift className=\"text-success size-5\" />\n                  </div>\n                  <div>\n                    <p className=\"text-xs font-bold tracking-wider text-neutral-200 uppercase\">Lumen Store</p>\n                    <p className=\"text-xs text-neutral-400\">Digital Gift Pass</p>\n                  </div>\n                </div>\n\n                <Badge\n                  variant=\"outline\"\n                  className=\"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 className=\"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 className=\"space-y-1 pt-1\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-xs font-medium tracking-wider text-neutral-400 uppercase\">\n                    Available Balance\n                  </span>\n                  {/* Chip graphic representation */}\n                  <div className=\"flex items-center gap-1 opacity-70\">\n                    <div className=\"border-warning/20/40 h-5 w-7 rounded-sm border bg-gradient-to-tr from-amber-400/20 to-amber-200/40\" />\n                    <span className=\"font-mono text-xs tracking-tighter text-neutral-400\">NFC</span>\n                  </div>\n                </div>\n\n                <div className=\"flex items-baseline gap-2\">\n                  <span className=\"text-3xl font-bold tracking-tight text-white tabular-nums sm:text-4xl\">\n                    ${currentBalance.toFixed(2)}\n                  </span>\n                  <span className=\"text-success text-xs font-medium\">USD</span>\n                </div>\n              </div>\n\n              {/* Card Footer: Card Number & Expiry terms */}\n              <div className=\"space-y-2 border-t border-white/10 pt-4\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"font-mono text-sm tracking-widest text-neutral-200\">\n                      •••• •••• •••• {lastFourDigits}\n                    </span>\n                    <button\n                      type=\"button\"\n                      className=\"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                      onClick={copyCardNumber}\n                    >\n                      {copied ? <Check className=\"text-success size-3.5\" /> : <Copy className=\"size-3.5\" />}\n                    </button>\n                  </div>\n                  {copied && <span className=\"animate-in fade-in text-success text-xs font-medium\">Copied!</span>}\n                </div>\n\n                <div className=\"flex items-center justify-between text-xs text-neutral-400\">\n                  <span>Never Expires · No Inactivity Fees</span>\n                  <span className=\"font-mono text-neutral-500\">PIN: ••••</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Quick Action Buttons */}\n          <div className=\"space-y-3\">\n            <Button variant=\"default\" className=\"w-full font-medium\" onClick={applyToOrder}>\n              {applied ? (\n                <>\n                  <Check className=\"text-success mr-2 size-4\" />\n                  Applied to Checkout!\n                </>\n              ) : (\n                <>\n                  <ShoppingBag className=\"mr-2 size-4\" />\n                  Apply to Next Order\n                </>\n              )}\n            </Button>\n\n            {/* Quick Reload Card */}\n            <Card className=\"border-border shadow-xs\">\n              <CardHeader className=\"p-4 pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                    Quick Reload Funds\n                  </CardTitle>\n                  <Plus className=\"text-muted-foreground size-3.5\" />\n                </div>\n              </CardHeader>\n              <CardContent className=\"p-4 pt-0\">\n                <p className=\"text-muted-foreground mb-3 text-xs\">\n                  Top up your gift card instantly with a saved payment method.\n                </p>\n                <div className=\"grid grid-cols-3 gap-2\">\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"hover:bg-primary/5 hover:text-primary hover:border-primary/30 w-full font-medium tabular-nums\"\n                    onClick={() => reloadFunds(25)}\n                  >\n                    + $25.00\n                  </Button>\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"hover:bg-primary/5 hover:text-primary hover:border-primary/30 w-full font-medium tabular-nums\"\n                    onClick={() => reloadFunds(50)}\n                  >\n                    + $50.00\n                  </Button>\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"hover:bg-primary/5 hover:text-primary hover:border-primary/30 w-full font-medium tabular-nums\"\n                    onClick={() => 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 className=\"space-y-6 lg:col-span-7\">\n          {/* Passbook Summary Metrics */}\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n            <div className=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n              <div className=\"text-muted-foreground mb-1 flex items-center justify-between text-xs\">\n                <span>Available Balance</span>\n                <Wallet className=\"text-primary size-3.5\" />\n              </div>\n              <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n                ${currentBalance.toFixed(2)}\n              </p>\n              <p className=\"text-success mt-1 flex items-center gap-1 text-xs font-medium\">\n                <Check className=\"size-3\" />\n                Ready to spend\n              </p>\n            </div>\n\n            <div className=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n              <div className=\"text-muted-foreground mb-1 flex items-center justify-between text-xs\">\n                <span>Total Value Loaded</span>\n                <ArrowDownLeft className=\"text-success size-3.5\" />\n              </div>\n              <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n                ${totalLoaded.toFixed(2)}\n              </p>\n              <p className=\"text-muted-foreground mt-1 text-xs\">All top-ups & issue</p>\n            </div>\n\n            <div className=\"border-border bg-card rounded-xl border p-4 shadow-xs\">\n              <div className=\"text-muted-foreground mb-1 flex items-center justify-between text-xs\">\n                <span>Total Redeemed</span>\n                <ArrowUpRight className=\"text-muted-foreground size-3.5\" />\n              </div>\n              <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">\n                -${totalSpent.toFixed(2)}\n              </p>\n              <p className=\"text-muted-foreground mt-1 text-xs\">Past store orders</p>\n            </div>\n          </div>\n\n          {/* Redemption & Activity History Card */}\n          <Card className=\"border-border shadow-xs\">\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                <div>\n                  <CardTitle className=\"text-base font-semibold\">Redemption & Activity History</CardTitle>\n                  <CardDescription className=\"text-xs\">\n                    Detailed ledger of card issuance, promotional top-ups, and store checkouts.\n                  </CardDescription>\n                </div>\n\n                {/* Filter Pills */}\n                <div className=\"border-border bg-muted/40 flex items-center gap-1.5 rounded-lg border p-1 text-xs\">\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setFilterType('all')}\n                  >\n                    All ({transactions.length})\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setFilterType('redemptions')}\n                  >\n                    Redemptions\n                  </button>\n                  <button\n                    type=\"button\"\n                    className={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                    onClick={() => setFilterType('loads')}\n                  >\n                    Loads\n                  </button>\n                </div>\n              </div>\n            </CardHeader>\n\n            <CardContent className=\"p-0\">\n              <div className=\"overflow-x-auto\">\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead className=\"w-[110px]\">Date</TableHead>\n                      <TableHead>Activity & Reference</TableHead>\n                      <TableHead className=\"w-[90px] text-center\">Type</TableHead>\n                      <TableHead className=\"w-[100px] text-right\">Amount</TableHead>\n                      <TableHead className=\"w-[110px] text-right\">Resulting Balance</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {filteredTransactions.map((record) => (\n                      <TableRow key={record.id}>\n                        <TableCell className=\"text-muted-foreground text-xs font-medium\">{record.date}</TableCell>\n                        <TableCell>\n                          <div className=\"space-y-0.5\">\n                            <p className=\"text-foreground text-sm leading-none font-medium\">{record.title}</p>\n                            {record.subtitle && <p className=\"text-muted-foreground text-xs\">{record.subtitle}</p>}\n                          </div>\n                        </TableCell>\n                        <TableCell className=\"text-center\">\n                          {record.type === 'activation' && (\n                            <Badge\n                              variant=\"outline\"\n                              className=\"border-success/30 bg-success/10 text-success px-2 py-0.5 text-xs font-normal\"\n                            >\n                              Activation\n                            </Badge>\n                          )}\n                          {record.type === 'reload' && (\n                            <Badge\n                              variant=\"outline\"\n                              className=\"border-info/30 bg-info/10 text-info px-2 py-0.5 text-xs font-normal\"\n                            >\n                              Reload\n                            </Badge>\n                          )}\n                          {record.type === 'redemption' && (\n                            <Badge variant=\"secondary\" className=\"px-2 py-0.5 text-xs font-normal\">\n                              Redemption\n                            </Badge>\n                          )}\n                        </TableCell>\n                        <TableCell\n                          className={cn(\n                            'text-right text-sm font-medium tabular-nums',\n                            record.amount > 0 ? 'text-success' : 'text-foreground',\n                          )}\n                        >\n                          {record.amount > 0\n                            ? `+$${record.amount.toFixed(2)}`\n                            : `-$${Math.abs(record.amount).toFixed(2)}`}\n                        </TableCell>\n                        <TableCell className=\"text-muted-foreground text-right font-mono text-sm tabular-nums\">\n                          ${record.balanceAfter.toFixed(2)}\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </div>\n            </CardContent>\n\n            <CardFooter className=\"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              <div className=\"flex items-center gap-1.5\">\n                <ShieldCheck className=\"text-primary size-4 shrink-0\" />\n                <span>Protected by 256-bit encryption · Zero liability policy</span>\n              </div>\n              <div className=\"flex items-center gap-3\">\n                <button\n                  type=\"button\"\n                  className=\"hover:text-foreground flex min-h-6 items-center gap-1 underline-offset-4 hover:underline\"\n                  onClick={checkBalance}\n                >\n                  <RefreshCw className=\"size-3\" />\n                  Refresh Ledger\n                </button>\n              </div>\n            </CardFooter>\n          </Card>\n\n          {/* Digital Passbook Barcode Card */}\n          <Card className=\"border-border bg-muted/20 shadow-xs\">\n            <CardContent className=\"flex flex-col items-center justify-between gap-4 p-4 sm:flex-row sm:p-5\">\n              <div className=\"space-y-1 text-center sm:text-left\">\n                <h4 className=\"text-foreground flex items-center justify-center gap-2 text-sm font-semibold sm:justify-start\">\n                  <Wallet className=\"text-primary size-4\" />\n                  In-Store Digital Pass\n                </h4>\n                <p className=\"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 className=\"border-border bg-card flex flex-col items-center gap-1.5 rounded-lg border p-3 shadow-xs\">\n                <div className=\"flex h-10 items-end gap-[3px] px-2\" aria-hidden=\"true\">\n                  <div className=\"bg-foreground h-full w-[2px]\" />\n                  <div className=\"bg-foreground h-full w-[4px]\" />\n                  <div className=\"bg-foreground h-full w-[1px]\" />\n                  <div className=\"bg-foreground h-full w-[3px]\" />\n                  <div className=\"bg-foreground h-full w-[2px]\" />\n                  <div className=\"bg-foreground h-full w-[5px]\" />\n                  <div className=\"bg-foreground h-full w-[1px]\" />\n                  <div className=\"bg-foreground h-full w-[3px]\" />\n                  <div className=\"bg-foreground h-full w-[2px]\" />\n                  <div className=\"bg-foreground h-full w-[4px]\" />\n                  <div className=\"bg-foreground h-full w-[2px]\" />\n                  <div className=\"bg-foreground h-full w-[1px]\" />\n                  <div className=\"bg-foreground h-full w-[4px]\" />\n                  <div className=\"bg-foreground h-full w-[2px]\" />\n                  <div className=\"bg-foreground h-full w-[3px]\" />\n                </div>\n                <span className=\"text-muted-foreground font-mono text-xs tracking-widest\">{cardNumber}</span>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default GiftCardBalanceChecker\n",
      "type": "registry:block",
      "target": "~/components/blocks/GiftCardBalanceChecker.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/table.json",
    "https://uipkge.dev/r/react/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"
  ]
}