{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "subscription-card",
  "type": "registry:component",
  "title": "Subscription Card",
  "description": "Subscription status and management card for plan, renewal, and usage details.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/subscription-card/subscription-card.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Button } from \"@vllnt/ui\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@vllnt/ui\";\nimport { PlanBadge, type PlanBadgeTier } from \"@vllnt/ui\";\n\nexport type SubscriptionCardStatus =\n  | \"active\"\n  | \"canceled\"\n  | \"past-due\"\n  | \"trialing\";\n\nexport type SubscriptionCardProps = React.ComponentPropsWithoutRef<\n  typeof Card\n> & {\n  note?: string;\n  plan: PlanBadgeTier;\n  priceLabel: string;\n  primaryActionLabel?: string;\n  renewalLabel: string;\n  seatsLabel?: string;\n  secondaryActionLabel?: string;\n  status: SubscriptionCardStatus;\n  usageLabel?: string;\n};\n\ntype SubscriptionActionsProps = {\n  primaryActionLabel?: string;\n  secondaryActionLabel?: string;\n};\n\ntype SubscriptionDetailsProps = {\n  note?: string;\n  priceLabel: string;\n  renewalLabel: string;\n  seatsLabel?: string;\n  usageLabel?: string;\n};\n\nfunction getStatusLabel(status: SubscriptionCardStatus): string {\n  switch (status) {\n    case \"active\":\n      return \"Active\";\n    case \"canceled\":\n      return \"Canceled\";\n    case \"past-due\":\n      return \"Past due\";\n    case \"trialing\":\n      return \"Trialing\";\n  }\n}\n\nfunction getStatusClasses(status: SubscriptionCardStatus): string {\n  switch (status) {\n    case \"active\":\n      return \"bg-emerald-500/10 text-emerald-700 dark:text-emerald-300\";\n    case \"canceled\":\n      return \"bg-muted text-muted-foreground\";\n    case \"past-due\":\n      return \"bg-amber-500/10 text-amber-700 dark:text-amber-300\";\n    case \"trialing\":\n      return \"bg-sky-500/10 text-sky-700 dark:text-sky-300\";\n  }\n}\n\nfunction getPlanState(\n  status: SubscriptionCardStatus,\n): \"current\" | \"legacy\" | \"trial\" {\n  switch (status) {\n    case \"active\":\n    case \"past-due\":\n      return \"current\";\n    case \"canceled\":\n      return \"legacy\";\n    case \"trialing\":\n      return \"trial\";\n  }\n}\n\nfunction DetailRow({ label, value }: { label: string; value: string }) {\n  return (\n    <div className=\"flex items-center justify-between gap-4 text-sm\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"text-right font-medium\">{value}</span>\n    </div>\n  );\n}\n\nfunction SubscriptionDetails({\n  note,\n  priceLabel,\n  renewalLabel,\n  seatsLabel,\n  usageLabel,\n}: SubscriptionDetailsProps) {\n  return (\n    <CardContent className=\"space-y-4\">\n      <div className=\"rounded-lg border border-border/70 bg-background px-4 py-3\">\n        <p className=\"text-xs uppercase tracking-[0.18em] text-muted-foreground\">\n          Monthly total\n        </p>\n        <p className=\"mt-2 text-3xl font-semibold tracking-tight\">\n          {priceLabel}\n        </p>\n      </div>\n      <div className=\"space-y-3 rounded-lg border border-border/70 bg-muted/20 p-4\">\n        <DetailRow label=\"Renewal\" value={renewalLabel} />\n        {seatsLabel ? <DetailRow label=\"Seats\" value={seatsLabel} /> : null}\n        {usageLabel ? <DetailRow label=\"Usage\" value={usageLabel} /> : null}\n      </div>\n      {note ? (\n        <p className=\"rounded-lg bg-muted px-4 py-3 text-sm text-muted-foreground\">\n          {note}\n        </p>\n      ) : null}\n    </CardContent>\n  );\n}\n\nfunction SubscriptionActions({\n  primaryActionLabel,\n  secondaryActionLabel,\n}: SubscriptionActionsProps) {\n  if (!primaryActionLabel && !secondaryActionLabel) {\n    return null;\n  }\n\n  return (\n    <CardFooter className=\"flex flex-col gap-2 sm:flex-row sm:justify-end\">\n      {secondaryActionLabel ? (\n        <Button className=\"w-full sm:w-auto\" variant=\"outline\">\n          {secondaryActionLabel}\n        </Button>\n      ) : null}\n      {primaryActionLabel ? (\n        <Button className=\"w-full sm:w-auto\">{primaryActionLabel}</Button>\n      ) : null}\n    </CardFooter>\n  );\n}\n\nexport const SubscriptionCard = React.forwardRef<\n  React.ComponentRef<typeof Card>,\n  SubscriptionCardProps\n>(\n  (\n    {\n      className,\n      note,\n      plan,\n      priceLabel,\n      primaryActionLabel,\n      renewalLabel,\n      seatsLabel,\n      secondaryActionLabel,\n      status,\n      usageLabel,\n      ...props\n    },\n    reference,\n  ) => {\n    return (\n      <Card\n        className={cn(\n          \"w-full max-w-md border-border/70 bg-card shadow-sm\",\n          className,\n        )}\n        ref={reference}\n        {...props}\n      >\n        <CardHeader className=\"space-y-4 pb-4\">\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"space-y-1\">\n              <CardTitle className=\"text-lg\">Subscription</CardTitle>\n              <CardDescription>\n                Billing overview for the current workspace plan.\n              </CardDescription>\n            </div>\n            <span\n              className={cn(\n                \"inline-flex rounded-full px-2.5 py-1 text-xs font-medium\",\n                getStatusClasses(status),\n              )}\n            >\n              {getStatusLabel(status)}\n            </span>\n          </div>\n          <div className=\"flex items-center justify-between gap-3 rounded-lg border border-border/70 bg-muted/30 px-4 py-3\">\n            <div>\n              <p className=\"text-sm font-medium\">Current plan</p>\n              <p className=\"text-xs text-muted-foreground\">{renewalLabel}</p>\n            </div>\n            <PlanBadge state={getPlanState(status)} tier={plan} />\n          </div>\n        </CardHeader>\n        <SubscriptionDetails\n          note={note}\n          priceLabel={priceLabel}\n          renewalLabel={renewalLabel}\n          seatsLabel={seatsLabel}\n          usageLabel={usageLabel}\n        />\n        <SubscriptionActions\n          primaryActionLabel={primaryActionLabel}\n          secondaryActionLabel={secondaryActionLabel}\n        />\n      </Card>\n    );\n  },\n);\n\nSubscriptionCard.displayName = \"SubscriptionCard\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}