{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "upcoming-charges",
  "title": "Upcoming Charges",
  "description": "A component that displays information about upcoming billing cycles, including the next billing date, total amount, and a breakdown of individual charges",
  "dependencies": ["lucide-react"],
  "registryDependencies": ["card", "badge", "utils"],
  "files": [
    {
      "path": "src/registry/billingsdk/upcoming-charges.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { Calendar } from \"lucide-react\";\n\nexport interface ChargeItem {\n  id: string;\n  description: string;\n  amount: string;\n  date: string;\n  type: \"prorated\" | \"recurring\" | \"one-time\";\n}\n\nexport interface UpcomingChargesProps {\n  className?: string;\n  title?: string;\n  description?: string;\n  nextBillingDate: string;\n  totalAmount: string;\n  charges: ChargeItem[];\n}\n\nexport function UpcomingCharges({\n  className,\n  title = \"Upcoming Charges\",\n  description,\n  nextBillingDate,\n  totalAmount,\n  charges,\n}: UpcomingChargesProps) {\n  const getChargeTypeBadge = (type: ChargeItem[\"type\"]) => {\n    switch (type) {\n      case \"prorated\":\n        return <Badge variant=\"secondary\">Prorated</Badge>;\n      case \"recurring\":\n        return <Badge variant=\"default\">Recurring</Badge>;\n      case \"one-time\":\n        return <Badge variant=\"outline\">One-time</Badge>;\n      default:\n        return <Badge variant=\"outline\">Unknown</Badge>;\n    }\n  };\n\n  return (\n    <Card className={cn(\"mx-auto w-full max-w-2xl\", className)}>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent className=\"space-y-6\">\n        <div className=\"bg-muted/30 rounded-lg border p-4\">\n          <div className=\"flex items-center justify-between gap-4\">\n            <div className=\"flex items-center gap-3\">\n              <Calendar className=\"text-muted-foreground h-5 w-5\" />\n              <div>\n                <p className=\"text-muted-foreground text-sm\">\n                  Next Billing Date\n                </p>\n                <p className=\"font-semibold\">{nextBillingDate}</p>\n              </div>\n            </div>\n            <div className=\"text-right\">\n              <p className=\"text-muted-foreground text-sm\">Total</p>\n              <p className=\"text-2xl font-bold tabular-nums\">{totalAmount}</p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"space-y-3\">\n          <h3 className=\"text-sm font-semibold\">Breakdown</h3>\n          <div className=\"space-y-2\">\n            {charges.map((charge) => (\n              <div\n                key={charge.id}\n                className=\"hover:bg-muted/50 rounded-lg border p-3 transition-colors\"\n              >\n                <div className=\"mb-1.5 flex items-start justify-between gap-3\">\n                  <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n                    <span className=\"font-medium\">{charge.description}</span>\n                    {getChargeTypeBadge(charge.type)}\n                  </div>\n                  <span className=\"shrink-0 font-semibold tabular-nums\">\n                    {charge.amount}\n                  </span>\n                </div>\n                <p className=\"text-muted-foreground text-sm\">{charge.date}</p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/upcoming-charges.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/upcoming-charges-demo.tsx",
      "content": "\"use client\";\n\nimport { UpcomingCharges } from \"@/registry/billingsdk/upcoming-charges\";\n\nexport function UpcomingChargesDemo() {\n  return (\n    <UpcomingCharges\n      title=\"Upcoming Charges\"\n      description=\"Your upcoming charges for the next billing period\"\n      nextBillingDate=\"November 1, 2025\"\n      totalAmount=\"$149.99\"\n      charges={[\n        {\n          id: \"ch_001\",\n          description: \"Enterprise Plan (Annual)\",\n          amount: \"$119.99\",\n          date: \"Nov 1, 2025\",\n          type: \"recurring\",\n        },\n        {\n          id: \"ch_002\",\n          description: \"Additional Team Seats (5 seats)\",\n          amount: \"$30.00\",\n          date: \"Nov 1, 2025\",\n          type: \"prorated\",\n        },\n      ]}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/upcoming-charges-demo.tsx"
    }
  ],
  "type": "registry:block"
}