{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "billing-1",
  "title": "Current Plan Summary Card",
  "description": "Current-plan billing card with monthly price, renewal date, a seat usage bar, and a dialog of radio tiers for switching plans.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "alert-dialog",
    "badge",
    "button",
    "card",
    "field",
    "progress",
    "radio-group",
    "separator",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/billing/1/billing-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n} from \"@/components/ui/field\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nconst PLANS = [\n  {\n    id: \"starter\",\n    name: \"Starter\",\n    price: \"$19\",\n    seats: 5,\n    description: \"For small teams getting started.\",\n  },\n  {\n    id: \"pro\",\n    name: \"Pro\",\n    price: \"$49\",\n    seats: 25,\n    description: \"For growing teams that need more seats.\",\n  },\n  {\n    id: \"scale\",\n    name: \"Scale\",\n    price: \"$99\",\n    seats: 100,\n    description: \"For organizations operating at scale.\",\n  },\n] as const\n\nconst SEATS_USED = 11\nconst RENEWAL_DATE = \"July 14, 2026\"\n\nexport default function BillingBlock() {\n  const [planId, setPlanId] = React.useState<string>(\"pro\")\n  const [pendingPlanId, setPendingPlanId] = React.useState<string>(\"pro\")\n  const [open, setOpen] = React.useState(false)\n\n  const currentPlan = PLANS.find((p) => p.id === planId) ?? PLANS[1]\n  const pendingPlan = PLANS.find((p) => p.id === pendingPlanId) ?? currentPlan\n\n  const seatPct = Math.round((SEATS_USED / currentPlan.seats) * 100)\n\n  function openManage() {\n    setPendingPlanId(planId)\n    setOpen(true)\n  }\n\n  function confirmPlan() {\n    setPlanId(pendingPlanId)\n    setOpen(false)\n    if (pendingPlanId === planId) {\n      toast.info(\"No changes made\", {\n        description: `You're still on the ${pendingPlan.name} plan.`,\n      })\n    } else {\n      toast.success(\"Plan updated\", {\n        description: `You're now on the ${pendingPlan.name} plan.`,\n      })\n    }\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <div className=\"flex items-center gap-2\">\n            <CardTitle>Current Plan</CardTitle>\n            <Badge variant=\"secondary\">{currentPlan.name}</Badge>\n          </div>\n          <CardDescription>\n            Your subscription renews automatically each month.\n          </CardDescription>\n        </CardHeader>\n\n        <CardContent className=\"flex flex-col gap-4\">\n          <div className=\"flex items-end gap-1\">\n            <span className=\"text-3xl font-semibold tracking-tight text-foreground\">\n              {currentPlan.price}\n            </span>\n            <span className=\"mb-0.5 text-xs text-muted-foreground\">\n              / Month\n            </span>\n          </div>\n\n          <Separator />\n\n          <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n            <IconPlaceholder\n              lucide=\"Calendar\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"Calendar\"\n              remixicon=\"RiCalendarLine\"\n              className=\"size-3.5 shrink-0\"\n            />\n            <span>\n              Next Renewal:{\" \"}\n              <span className=\"font-medium text-foreground\">\n                {RENEWAL_DATE}\n              </span>\n            </span>\n          </div>\n\n          <div className=\"flex flex-col gap-2\">\n            <div className=\"flex items-center justify-between text-xs\">\n              <div className=\"flex items-center gap-2 text-muted-foreground\">\n                <IconPlaceholder\n                  lucide=\"Group\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"GroupIcon\"\n                  phosphor=\"Users\"\n                  remixicon=\"RiGroupLine\"\n                  className=\"size-3.5 shrink-0\"\n                />\n                <span>Seats Used</span>\n              </div>\n              <span className=\"font-medium text-foreground\">\n                {SEATS_USED}{\" \"}\n                <span className=\"text-muted-foreground\">\n                  / {currentPlan.seats}\n                </span>\n              </span>\n            </div>\n            <Progress value={seatPct} className=\"w-full\" />\n            <p className=\"text-xs text-muted-foreground\">\n              {Math.max(currentPlan.seats - SEATS_USED, 0)} Seats Remaining\n            </p>\n          </div>\n        </CardContent>\n\n        <CardFooter>\n          <AlertDialog open={open} onOpenChange={setOpen}>\n            <AlertDialogTrigger\n              render={\n                <Button\n                  className=\"w-full\"\n                  variant=\"outline\"\n                  onClick={openManage}\n                >\n                  Manage Plan\n                  <IconPlaceholder\n                    lucide=\"ArrowRight\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ArrowRight\"\n                    remixicon=\"RiArrowRightLine\"\n                    data-icon=\"inline-end\"\n                  />\n                </Button>\n              }\n            />\n            <AlertDialogContent>\n              <AlertDialogHeader>\n                <AlertDialogTitle>Change your plan</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Select a tier. Changes take effect at your next renewal.\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n\n              <RadioGroup\n                value={pendingPlanId}\n                onValueChange={(value) => setPendingPlanId(String(value))}\n                className=\"gap-2\"\n              >\n                {PLANS.map((plan) => (\n                  <FieldLabel key={plan.id} htmlFor={`plan-${plan.id}`}>\n                    <Field\n                      orientation=\"horizontal\"\n                      className=\"items-start gap-3\"\n                    >\n                      <RadioGroupItem\n                        value={plan.id}\n                        id={`plan-${plan.id}`}\n                        className=\"mt-0.5\"\n                      />\n                      <FieldContent>\n                        <span className=\"flex items-center justify-between gap-2 text-sm font-medium\">\n                          {plan.name}\n                          <span className=\"text-xs text-muted-foreground\">\n                            {plan.price} / Month For {plan.seats} Seats\n                          </span>\n                        </span>\n                        <FieldDescription>{plan.description}</FieldDescription>\n                      </FieldContent>\n                    </Field>\n                  </FieldLabel>\n                ))}\n              </RadioGroup>\n\n              <AlertDialogFooter>\n                <AlertDialogCancel>Cancel</AlertDialogCancel>\n                <Button onClick={confirmPlan}>Update Plan</Button>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n        </CardFooter>\n      </Card>\n      <Toaster />\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "414px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "billing"
  ],
  "type": "registry:block"
}