{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "bank-account-connector",
  "title": "Bank Account Connector",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/bank-account-connector/BankAccountConnector.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref, watch } from 'vue'\nimport { ArrowLeft, Building2, CheckCircle2, ExternalLink, Loader2, Lock, Search, Shield } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\ninterface BankInstitution {\n  id: string\n  name: string\n  fullName: string\n  tagline: string\n}\n\ninterface BankAccount {\n  id: string\n  name: string\n  last4: string\n  type: 'Checking' | 'Savings' | 'Credit'\n  balance: string\n  balanceLabel: string\n  subtitle: string\n}\n\ninterface ConnectPayload {\n  bankId: string\n  bankName: string\n  accountId: string\n  accountName: string\n  last4: string\n  balance: string\n}\n\nconst props = defineProps<{\n  initialBankId?: string\n  class?: HTMLAttributes['class']\n}>()\n\nconst emit = defineEmits<{\n  connect: [payload: ConnectPayload]\n  cancel: []\n  'select-bank': [bankId: string]\n}>()\n\nconst institutions: BankInstitution[] = [\n  { id: 'chase', name: 'Chase', fullName: 'JPMorgan Chase Bank', tagline: 'Checking, Savings & Credit' },\n  { id: 'bofa', name: 'Bank of America', fullName: 'Bank of America N.A.', tagline: 'Advantage Banking' },\n  { id: 'wellsfargo', name: 'Wells Fargo', fullName: 'Wells Fargo Bank', tagline: 'Everyday & Way2Save' },\n  { id: 'citibank', name: 'Citibank', fullName: 'Citibank N.A.', tagline: 'Citi Priority & Access' },\n  { id: 'capitalone', name: 'Capital One', fullName: 'Capital One Bank', tagline: '360 Checking & Savings' },\n  { id: 'svb', name: 'SVB', fullName: 'Silicon Valley Bank', tagline: 'Commercial & Startup Banking' },\n]\n\nconst accounts: BankAccount[] = [\n  {\n    id: 'acc-chk-4892',\n    name: 'Checking',\n    last4: '4892',\n    type: 'Checking',\n    balance: '$14,250.00',\n    balanceLabel: 'Available balance',\n    subtitle: 'Primary checking account',\n  },\n  {\n    id: 'acc-sav-9210',\n    name: 'Savings',\n    last4: '9210',\n    type: 'Savings',\n    balance: '$48,900.00',\n    balanceLabel: 'Available balance',\n    subtitle: 'High yield savings',\n  },\n  {\n    id: 'acc-crd-1049',\n    name: 'Business Credit',\n    last4: '1049',\n    type: 'Credit',\n    balance: '$5,200.00',\n    balanceLabel: 'Current balance',\n    subtitle: 'Corporate credit line',\n  },\n]\n\nconst searchQuery = ref('')\nconst selectedBankId = ref<string | null>(props.initialBankId ?? null)\nconst selectedAccountId = ref<string>('acc-chk-4892')\nconst isConnecting = ref(false)\nconst isConnected = ref(false)\n\nwatch(\n  () => props.initialBankId,\n  (newId) => {\n    if (newId) {\n      selectedBankId.value = newId\n    }\n  },\n)\n\nconst filteredInstitutions = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase()\n  if (!query) return institutions\n  return institutions.filter((b) => b.name.toLowerCase().includes(query) || b.fullName.toLowerCase().includes(query))\n})\n\nconst activeBank = computed(() => {\n  if (!selectedBankId.value) return institutions[0]\n  return (\n    institutions.find((b) => b.id === selectedBankId.value) ?? {\n      id: selectedBankId.value,\n      name: searchQuery.value ? searchQuery.value : 'Custom Institution',\n      fullName: 'Financial Institution',\n      tagline: 'Direct Open Banking',\n    }\n  )\n})\n\nconst selectedAccount = computed(() => {\n  return accounts.find((a) => a.id === selectedAccountId.value) ?? accounts[0]\n})\n\nfunction handleSelectBank(bankId: string) {\n  selectedBankId.value = bankId\n  emit('select-bank', bankId)\n}\n\nfunction handleConnect() {\n  if (!selectedBankId.value) {\n    selectedBankId.value = institutions[0].id\n    return\n  }\n\n  isConnecting.value = true\n  setTimeout(() => {\n    isConnecting.value = false\n    isConnected.value = true\n    emit('connect', {\n      bankId: activeBank.value.id,\n      bankName: activeBank.value.name,\n      accountId: selectedAccount.value.id,\n      accountName: selectedAccount.value.name,\n      last4: selectedAccount.value.last4,\n      balance: selectedAccount.value.balance,\n    })\n    setTimeout(() => {\n      isConnected.value = false\n    }, 2500)\n  }, 900)\n}\n\nfunction handleCancel() {\n  if (selectedBankId.value && !props.initialBankId) {\n    selectedBankId.value = null\n  }\n  emit('cancel')\n}\n</script>\n\n<template>\n  <Card\n    data-slot=\"bank-account-connector\"\n    :class=\"cn('mx-auto w-full max-w-lg overflow-hidden border shadow-sm', props.class)\"\n  >\n    <CardContent class=\"space-y-5 p-6\">\n      <!-- Step 1: Institution Selection -->\n      <div v-if=\"!selectedBankId\" class=\"space-y-5\">\n        <!-- Header -->\n        <div class=\"flex items-start gap-3.5\">\n          <div\n            class=\"bg-success/10 text-success ring-success/5 dark:bg-success/10 text-success flex size-10 shrink-0 items-center justify-center rounded-full ring-4\"\n          >\n            <Shield class=\"size-5\" />\n          </div>\n          <div class=\"min-w-0 space-y-1\">\n            <h3 class=\"text-foreground text-base leading-tight font-semibold tracking-tight\">\n              Connect your bank account\n            </h3>\n            <p class=\"text-muted-foreground text-xs\">Secure 256-bit encrypted connection powered by open banking.</p>\n          </div>\n        </div>\n\n        <!-- Search input -->\n        <div class=\"relative\">\n          <Input\n            v-model=\"searchQuery\"\n            :prefix-icon=\"Search\"\n            placeholder=\"Search institutions (e.g. Chase, Wells Fargo)...\"\n            class=\"text-sm\"\n          />\n        </div>\n\n        <!-- Popular Institutions Grid -->\n        <div class=\"space-y-2.5\">\n          <div class=\"flex items-center justify-between\">\n            <p class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Popular institutions</p>\n            <span class=\"text-muted-foreground text-xs\">10,000+ supported</span>\n          </div>\n\n          <div v-if=\"filteredInstitutions.length > 0\" class=\"grid grid-cols-2 gap-2.5 sm:grid-cols-3\">\n            <button\n              v-for=\"bank in filteredInstitutions\"\n              :key=\"bank.id\"\n              type=\"button\"\n              class=\"group border-border bg-card hover:border-primary/40 hover:bg-muted/40 focus-visible:ring-ring flex flex-col items-center justify-center rounded-xl border p-3.5 text-center transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n              @click=\"handleSelectBank(bank.id)\"\n            >\n              <div\n                class=\"border-border/60 bg-muted/60 dark:bg-muted/30 mb-2 flex size-10 items-center justify-center rounded-lg border shadow-xs transition-transform group-hover:scale-105\"\n              >\n                <!-- Chase -->\n                <svg\n                  v-if=\"bank.id === 'chase'\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"size-5 shrink-0 text-[#117ACA]\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    d=\"M12 2.5L7.5 7h4.8L16.2 3.1 12 2.5zm9.5 9.5L17 7.5v4.8l3.9 3.9.6-4.2zm-9.5 9.5L16.5 17h-4.8L7.8 20.9l4.2.6zm-9.5-9.5L7 16.5v-4.8L3.1 7.8 2.5 12z\"\n                  />\n                </svg>\n                <!-- Bank of America -->\n                <svg v-else-if=\"bank.id === 'bofa'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect x=\"2\" y=\"5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#E31837\" />\n                  <rect x=\"2\" y=\"10.5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#002D62\" />\n                  <rect x=\"2\" y=\"16\" width=\"8\" height=\"3\" rx=\"0.5\" fill=\"#E31837\" />\n                  <rect x=\"14\" y=\"5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#002D62\" />\n                  <rect x=\"14\" y=\"10.5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#E31837\" />\n                  <rect x=\"14\" y=\"16\" width=\"8\" height=\"3\" rx=\"0.5\" fill=\"#002D62\" />\n                </svg>\n                <!-- Wells Fargo -->\n                <svg v-else-if=\"bank.id === 'wellsfargo'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#D71E28\" />\n                  <path\n                    d=\"M4 7h2.2l1.6 7 1.8-7h2.1l1.8 7 1.6-7H17.5l-2.6 10h-2.2l-1.8-7-1.8 7H7.1L4 7z\"\n                    fill=\"#FFCC00\"\n                  />\n                </svg>\n                <!-- Citibank -->\n                <svg v-else-if=\"bank.id === 'citibank'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <path\n                    d=\"M12 4.5C8 4.5 4.5 6.8 4 9.5h2.5c.5-1.5 3-2.5 5.5-2.5s5 1 5.5 2.5H20c-.5-2.7-4-5-8-5z\"\n                    fill=\"#EC111A\"\n                  />\n                  <rect x=\"4\" y=\"11\" width=\"3\" height=\"8\" rx=\"0.5\" fill=\"#003B70\" />\n                  <circle cx=\"12\" cy=\"15\" r=\"4\" fill=\"#003B70\" />\n                  <rect x=\"17\" y=\"11\" width=\"3\" height=\"8\" rx=\"0.5\" fill=\"#003B70\" />\n                </svg>\n                <!-- Capital One -->\n                <svg v-else-if=\"bank.id === 'capitalone'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#004879\" />\n                  <path d=\"M3.5 15.5C8 9.5 16 8 20.5 12c-5-2-12-1-15 3.5z\" fill=\"#D03027\" />\n                  <rect x=\"7\" y=\"9\" width=\"10\" height=\"2\" rx=\"1\" fill=\"#FFFFFF\" />\n                </svg>\n                <!-- SVB -->\n                <svg v-else-if=\"bank.id === 'svb'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#005587\" />\n                  <path d=\"M6 15l6-9 6 9-3 1.5-3-4.5-3 4.5L6 15z\" fill=\"#FFFFFF\" />\n                  <path d=\"M9 16.5l3-4.5 3 4.5-3 1.5-3-1.5z\" fill=\"#00A3E0\" />\n                </svg>\n                <!-- Generic fallback -->\n                <Building2 v-else class=\"text-muted-foreground size-5\" />\n              </div>\n\n              <span class=\"text-foreground w-full truncate text-xs font-semibold\">{{ bank.name }}</span>\n              <span class=\"text-muted-foreground mt-0.5 w-full truncate text-xs\">{{ bank.tagline }}</span>\n            </button>\n          </div>\n\n          <!-- Direct search fallback for non-popular queries -->\n          <div v-else class=\"border-border rounded-xl border border-dashed p-4 text-center\">\n            <p class=\"text-muted-foreground mb-2 text-xs\">\n              No popular bank matched \"{{ searchQuery }}\". Connect via direct institution link:\n            </p>\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              class=\"gap-1.5 text-xs\"\n              @click=\"handleSelectBank(searchQuery.toLowerCase().replace(/\\s+/g, '-'))\"\n            >\n              <Building2 class=\"text-muted-foreground size-3.5\" />\n              Connect with {{ searchQuery }}\n            </Button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Step 2: Account Selection Step -->\n      <div v-else class=\"space-y-5\">\n        <!-- Back and Banner Header -->\n        <div class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"text-muted-foreground hover:text-foreground -ml-2 h-7 gap-1 px-2 text-xs\"\n              @click=\"selectedBankId = null\"\n            >\n              <ArrowLeft class=\"size-3.5\" />\n              Back to banks\n            </Button>\n            <span class=\"text-muted-foreground font-mono text-xs\">Step 2 of 2</span>\n          </div>\n\n          <!-- Bank Banner -->\n          <div class=\"border-border bg-muted/40 flex items-center justify-between rounded-xl border p-3.5\">\n            <div class=\"flex min-w-0 items-center gap-3\">\n              <div\n                class=\"border-border/80 bg-background flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              >\n                <!-- Chase -->\n                <svg\n                  v-if=\"activeBank.id === 'chase'\"\n                  viewBox=\"0 0 24 24\"\n                  class=\"size-5 shrink-0 text-[#117ACA]\"\n                  fill=\"currentColor\"\n                >\n                  <path\n                    d=\"M12 2.5L7.5 7h4.8L16.2 3.1 12 2.5zm9.5 9.5L17 7.5v4.8l3.9 3.9.6-4.2zm-9.5 9.5L16.5 17h-4.8L7.8 20.9l4.2.6zm-9.5-9.5L7 16.5v-4.8L3.1 7.8 2.5 12z\"\n                  />\n                </svg>\n                <!-- Bank of America -->\n                <svg v-else-if=\"activeBank.id === 'bofa'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect x=\"2\" y=\"5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#E31837\" />\n                  <rect x=\"2\" y=\"10.5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#002D62\" />\n                  <rect x=\"2\" y=\"16\" width=\"8\" height=\"3\" rx=\"0.5\" fill=\"#E31837\" />\n                  <rect x=\"14\" y=\"5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#002D62\" />\n                  <rect x=\"14\" y=\"10.5\" width=\"8\" height=\"4\" rx=\"1\" fill=\"#E31837\" />\n                  <rect x=\"14\" y=\"16\" width=\"8\" height=\"3\" rx=\"0.5\" fill=\"#002D62\" />\n                </svg>\n                <!-- Wells Fargo -->\n                <svg v-else-if=\"activeBank.id === 'wellsfargo'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#D71E28\" />\n                  <path\n                    d=\"M4 7h2.2l1.6 7 1.8-7h2.1l1.8 7 1.6-7H17.5l-2.6 10h-2.2l-1.8-7-1.8 7H7.1L4 7z\"\n                    fill=\"#FFCC00\"\n                  />\n                </svg>\n                <!-- Citibank -->\n                <svg v-else-if=\"activeBank.id === 'citibank'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <path\n                    d=\"M12 4.5C8 4.5 4.5 6.8 4 9.5h2.5c.5-1.5 3-2.5 5.5-2.5s5 1 5.5 2.5H20c-.5-2.7-4-5-8-5z\"\n                    fill=\"#EC111A\"\n                  />\n                  <rect x=\"4\" y=\"11\" width=\"3\" height=\"8\" rx=\"0.5\" fill=\"#003B70\" />\n                  <circle cx=\"12\" cy=\"15\" r=\"4\" fill=\"#003B70\" />\n                  <rect x=\"17\" y=\"11\" width=\"3\" height=\"8\" rx=\"0.5\" fill=\"#003B70\" />\n                </svg>\n                <!-- Capital One -->\n                <svg v-else-if=\"activeBank.id === 'capitalone'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#004879\" />\n                  <path d=\"M3.5 15.5C8 9.5 16 8 20.5 12c-5-2-12-1-15 3.5z\" fill=\"#D03027\" />\n                  <rect x=\"7\" y=\"9\" width=\"10\" height=\"2\" rx=\"1\" fill=\"#FFFFFF\" />\n                </svg>\n                <!-- SVB -->\n                <svg v-else-if=\"activeBank.id === 'svb'\" viewBox=\"0 0 24 24\" class=\"size-5 shrink-0\" fill=\"none\">\n                  <rect width=\"24\" height=\"24\" rx=\"4\" fill=\"#005587\" />\n                  <path d=\"M6 15l6-9 6 9-3 1.5-3-4.5-3 4.5L6 15z\" fill=\"#FFFFFF\" />\n                  <path d=\"M9 16.5l3-4.5 3 4.5-3 1.5-3-1.5z\" fill=\"#00A3E0\" />\n                </svg>\n                <!-- Generic fallback -->\n                <Building2 v-else class=\"text-muted-foreground size-5\" />\n              </div>\n\n              <div class=\"min-w-0\">\n                <p class=\"text-foreground truncate text-sm font-semibold\">\n                  {{ activeBank.name }} Checking &amp; Savings\n                </p>\n                <div class=\"mt-0.5 flex items-center gap-1.5\">\n                  <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                  <span class=\"text-success text-xs font-medium\">Connected</span>\n                </div>\n              </div>\n            </div>\n\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"text-muted-foreground hover:text-foreground h-7 shrink-0 text-xs\"\n              @click=\"selectedBankId = null\"\n            >\n              Change\n            </Button>\n          </div>\n        </div>\n\n        <!-- Account Radio Cards -->\n        <div class=\"space-y-2.5\">\n          <div class=\"space-y-1\">\n            <h4 class=\"text-foreground text-sm font-semibold\">Select an account</h4>\n            <p class=\"text-muted-foreground text-xs\">\n              Choose the primary account to link for transactions and balance tracking.\n            </p>\n          </div>\n\n          <div role=\"radiogroup\" aria-label=\"Bank accounts\" class=\"space-y-2\">\n            <div\n              v-for=\"account in accounts\"\n              :key=\"account.id\"\n              role=\"radio\"\n              :aria-checked=\"selectedAccountId === account.id\"\n              tabindex=\"0\"\n              class=\"group focus-visible:ring-ring relative flex cursor-pointer items-center justify-between rounded-xl border p-3.5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n              :class=\"[\n                selectedAccountId === account.id\n                  ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                  : 'border-border bg-card hover:border-border/80 hover:bg-muted/30',\n              ]\"\n              @click=\"selectedAccountId = account.id\"\n              @keydown.enter.prevent=\"selectedAccountId = account.id\"\n              @keydown.space.prevent=\"selectedAccountId = account.id\"\n            >\n              <div class=\"flex min-w-0 items-center gap-3\">\n                <!-- Custom Radio Indicator -->\n                <div\n                  class=\"flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors\"\n                  :class=\"[\n                    selectedAccountId === account.id\n                      ? 'border-primary bg-primary text-primary-foreground'\n                      : 'border-muted-foreground/30 bg-background group-hover:border-muted-foreground/60',\n                  ]\"\n                >\n                  <div v-if=\"selectedAccountId === account.id\" class=\"bg-primary-foreground size-1.5 rounded-full\" />\n                </div>\n\n                <!-- Account Info -->\n                <div class=\"min-w-0 space-y-0.5\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <span class=\"text-foreground truncate text-sm font-medium\">\n                      {{ account.name }}\n                    </span>\n                    <span class=\"text-muted-foreground font-mono text-xs\"> •••• {{ account.last4 }} </span>\n                    <Badge\n                      :variant=\"account.type === 'Credit' ? 'outline' : 'secondary'\"\n                      class=\"h-5 px-2 py-0 text-xs font-normal\"\n                    >\n                      {{ account.type }}\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    {{ account.subtitle }}\n                  </p>\n                </div>\n              </div>\n\n              <!-- Balance -->\n              <div class=\"shrink-0 pl-3 text-right\">\n                <div class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">\n                  {{ account.balance }}\n                </div>\n                <div class=\"text-muted-foreground text-xs\">\n                  {{ account.balanceLabel }}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Security Footer -->\n      <div class=\"space-y-4 pt-2\">\n        <Separator />\n\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <Badge variant=\"outline\" class=\"text-muted-foreground border-border/80 gap-1.5 py-1 text-xs font-normal\">\n            <Lock class=\"text-success size-3 shrink-0\" />\n            <span>Encrypted with AES-256</span>\n          </Badge>\n\n          <a\n            href=\"#\"\n            class=\"text-muted-foreground hover:text-foreground flex min-h-6 items-center gap-1 text-xs underline underline-offset-4 transition-colors\"\n            @click.prevent\n          >\n            Privacy policy\n            <ExternalLink class=\"size-3\" />\n          </a>\n        </div>\n\n        <div class=\"flex flex-col-reverse gap-2 pt-1 sm:flex-row sm:items-center sm:justify-end\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"text-muted-foreground hover:text-foreground h-9 text-xs\"\n            @click=\"handleCancel\"\n          >\n            Cancel\n          </Button>\n          <Button\n            size=\"sm\"\n            class=\"h-9 text-xs font-medium\"\n            :disabled=\"isConnecting || isConnected\"\n            @click=\"handleConnect\"\n          >\n            <Loader2 v-if=\"isConnecting\" class=\"mr-1.5 size-3.5 animate-spin\" />\n            <CheckCircle2 v-else-if=\"isConnected\" class=\"text-success mr-1.5 size-3.5\" />\n            <span v-if=\"isConnected\">Account Connected!</span>\n            <span v-else-if=\"isConnecting\">Connecting…</span>\n            <span v-else-if=\"!selectedBankId\">Continue</span>\n            <span v-else>Connect Selected Account</span>\n          </Button>\n        </div>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/BankAccountConnector.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/separator.json"
  ],
  "description": "Plaid/Tink style bank linking modal and account selector with institution search, popular bank grid (Chase, Bank of America, Wells Fargo, Citibank, Capital One, SVB), account radio selection with balances and badges, and an AES-256 encrypted security footer.",
  "categories": [
    "finance",
    "dashboard"
  ]
}