{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "billing-account",
  "title": "Billing Account",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/billing-account/BillingAccount.vue",
      "content": "<script setup lang=\"ts\">\nimport { CreditCard, Download, Trash2 } from 'lucide-vue-next'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\n\ninterface UsageMetric {\n  label: string\n  used: number\n  total: number\n}\n\ninterface Invoice {\n  id: string\n  date: string\n  amount: string\n  status: 'Paid' | 'Open' | 'Past due'\n}\n\nconst plan = {\n  name: 'Pro',\n  price: '$49',\n  cadence: 'month',\n  renewalDate: 'September 12, 2026',\n}\n\nconst usage: UsageMetric[] = [\n  { label: 'Seats', used: 18, total: 20 },\n  { label: 'Projects', used: 7, total: 10 },\n]\n\nconst paymentMethod = {\n  brand: 'Visa',\n  last4: '4242',\n  expiry: '04/28',\n}\n\nconst invoices: Invoice[] = [\n  { id: 'inv-2026-08', date: 'Aug 12, 2026', amount: '$49.00', status: 'Paid' },\n  { id: 'inv-2026-07', date: 'Jul 12, 2026', amount: '$49.00', status: 'Paid' },\n  { id: 'inv-2026-06', date: 'Jun 12, 2026', amount: '$49.00', status: 'Paid' },\n  { id: 'inv-2026-05', date: 'May 12, 2026', amount: '$49.00', status: 'Paid' },\n]\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n  <div data-slot=\"billing-account\" :class=\"cn('mx-auto w-full max-w-2xl space-y-6', props.class)\">\n    <Card>\n      <CardHeader>\n        <div class=\"flex items-center gap-2\">\n          <CardTitle>Current plan</CardTitle>\n          <Badge>Pro</Badge>\n        </div>\n        <CardDescription>Your subscription renews automatically each month.</CardDescription>\n      </CardHeader>\n      <CardContent class=\"space-y-4\">\n        <div class=\"flex flex-wrap items-end justify-between gap-4\">\n          <div>\n            <p class=\"text-2xl font-bold tracking-tight\">\n              {{ plan.price }}\n              <span class=\"text-muted-foreground text-sm font-normal\">/ {{ plan.cadence }}</span>\n            </p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">Renews on {{ plan.renewalDate }}</p>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Button size=\"sm\">Upgrade</Button>\n            <Button variant=\"ghost\" size=\"sm\" class=\"text-destructive hover:text-destructive\">\n              Cancel subscription\n            </Button>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader>\n        <CardTitle>Usage</CardTitle>\n        <CardDescription>Consumption against your plan limits this cycle.</CardDescription>\n      </CardHeader>\n      <CardContent class=\"space-y-5\">\n        <div v-for=\"metric in usage\" :key=\"metric.label\" class=\"space-y-2\">\n          <div class=\"flex items-center justify-between text-sm\">\n            <span class=\"font-medium\">{{ metric.label }}</span>\n            <span class=\"text-muted-foreground text-xs tabular-nums\">\n              {{ metric.used }} of {{ metric.total }} used\n            </span>\n          </div>\n          <Progress :model-value=\"(metric.used / metric.total) * 100\" />\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader>\n        <CardTitle>Payment method</CardTitle>\n        <CardDescription>Charged when your subscription renews.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <div class=\"flex items-center justify-between gap-4\">\n          <div class=\"flex items-center gap-3\">\n            <div\n              class=\"bg-muted text-muted-foreground border-border flex size-9 shrink-0 items-center justify-center rounded-md border shadow-xs\"\n              aria-hidden=\"true\"\n            >\n              <CreditCard class=\"size-4\" />\n            </div>\n            <div>\n              <p class=\"text-sm font-medium tabular-nums\">•••• •••• •••• {{ paymentMethod.last4 }}</p>\n              <p class=\"text-muted-foreground text-xs\">\n                {{ paymentMethod.brand }} · Expires {{ paymentMethod.expiry }}\n              </p>\n            </div>\n          </div>\n          <div class=\"flex items-center gap-1\">\n            <Button variant=\"ghost\" size=\"sm\">Update</Button>\n            <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Delete payment method\">\n              <Trash2 class=\"text-muted-foreground size-4\" />\n            </Button>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader>\n        <CardTitle>Billing history</CardTitle>\n        <CardDescription>Invoices from the last 12 months.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ul class=\"-my-2 divide-y\">\n          <li v-for=\"invoice in invoices\" :key=\"invoice.id\" class=\"flex items-center justify-between gap-4 py-3\">\n            <div class=\"min-w-0\">\n              <p class=\"text-sm font-medium\">{{ invoice.date }}</p>\n              <p class=\"text-muted-foreground text-xs tabular-nums\">{{ invoice.amount }}</p>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Badge variant=\"success\">{{ invoice.status }}</Badge>\n              <Separator orientation=\"vertical\" class=\"!h-4\" />\n              <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Download invoice\">\n                <Download class=\"text-muted-foreground size-4\" />\n              </Button>\n            </div>\n          </li>\n        </ul>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/BillingAccount.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/progress.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Stripe-style account billing page: current-plan card with Pro badge, price and renewal date plus Upgrade / Cancel actions, usage meters for seats and projects, a payment-method row with update and delete actions, and a compact billing-history list with paid badges and per-invoice downloads. Data is hardcoded inline so you can wire it to your own billing API.",
  "categories": [
    "finance",
    "app",
    "billing"
  ]
}