{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "billing-account",
  "title": "Billing Account",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/billing-account/BillingAccount.tsx",
      "content": "'use client'\n\nimport { CreditCard, Download, Trash2 } from 'lucide-react'\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\nexport function BillingAccount({ className }: { className?: string }) {\n  return (\n    <div data-slot=\"billing-account\" className={cn('mx-auto w-full max-w-2xl space-y-6', className)}>\n      <Card>\n        <CardHeader>\n          <div className=\"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 className=\"space-y-4\">\n          <div className=\"flex flex-wrap items-end justify-between gap-4\">\n            <div>\n              <p className=\"text-2xl font-bold tracking-tight\">\n                {plan.price}\n                <span className=\"text-muted-foreground text-sm font-normal\"> / {plan.cadence}</span>\n              </p>\n              <p className=\"text-muted-foreground mt-1 text-xs\">Renews on {plan.renewalDate}</p>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <Button size=\"sm\">Upgrade</Button>\n              <Button variant=\"ghost\" size=\"sm\" className=\"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 className=\"space-y-5\">\n          {usage.map((metric) => (\n            <div key={metric.label} className=\"space-y-2\">\n              <div className=\"flex items-center justify-between text-sm\">\n                <span className=\"font-medium\">{metric.label}</span>\n                <span className=\"text-muted-foreground text-xs tabular-nums\">\n                  {metric.used} of {metric.total} used\n                </span>\n              </div>\n              <Progress value={(metric.used / metric.total) * 100} />\n            </div>\n          ))}\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 className=\"flex items-center justify-between gap-4\">\n            <div className=\"flex items-center gap-3\">\n              <div\n                aria-hidden=\"true\"\n                className=\"bg-muted text-muted-foreground border-border flex size-9 shrink-0 items-center justify-center rounded-md border shadow-xs\"\n              >\n                <CreditCard className=\"size-4\" />\n              </div>\n              <div>\n                <p className=\"text-sm font-medium tabular-nums\">•••• •••• •••• {paymentMethod.last4}</p>\n                <p className=\"text-muted-foreground text-xs\">\n                  {paymentMethod.brand} · Expires {paymentMethod.expiry}\n                </p>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-1\">\n              <Button variant=\"ghost\" size=\"sm\">\n                Update\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Delete payment method\">\n                <Trash2 className=\"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 className=\"-my-2 divide-y\">\n            {invoices.map((invoice) => (\n              <li key={invoice.id} className=\"flex items-center justify-between gap-4 py-3\">\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-medium\">{invoice.date}</p>\n                  <p className=\"text-muted-foreground text-xs tabular-nums\">{invoice.amount}</p>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Badge variant=\"success\">{invoice.status}</Badge>\n                  <Separator orientation=\"vertical\" className=\"!h-4\" />\n                  <Button variant=\"ghost\" size=\"icon-sm\" aria-label=\"Download invoice\">\n                    <Download className=\"text-muted-foreground size-4\" />\n                  </Button>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/BillingAccount.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/progress.json",
    "https://uipkge.dev/r/react/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"
  ]
}