{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "cards",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Recurring charge with next-billing.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatDate } from \"@/lib/ledger/fiscal-period\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Card } from \"@/components/ledger/card\";\nimport { EntityMark } from \"@/components/ledger/entity-mark\";\nimport { Money } from \"@/components/ledger/money\";\n\nexport interface SubscriptionCardProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  amount: MoneyValue;\n  /** Computed by the caller — components never do arithmetic. */\n  annualized: MoneyValue;\n  cadence: \"monthly\" | \"quarterly\" | \"annual\";\n  nextCharge: Date;\n  vendor: string;\n  vendorSrc?: string;\n}\n\n/**\n * The annualized figure is the useful number. $49/mo is $588/yr, and showing\n * it is what makes a spend review actionable.\n */\nexport const SubscriptionCard = React.forwardRef<HTMLDivElement, SubscriptionCardProps>(\n  ({ className, vendor, vendorSrc, amount, cadence, nextCharge, annualized, ...props }, ref) => (\n    <Card className={cn(\"flex items-center gap-3\", className)} inset=\"compact\" ref={ref} {...props}>\n      <EntityMark category=\"merchant\" name={vendor} size={40} src={vendorSrc} />\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"truncate text-body font-medium\">{vendor}</p>\n        <p className=\"text-caption text-text-secondary\">Next {formatDate(nextCharge)}</p>\n      </div>\n      <div className=\"text-right\">\n        <Money size=\"md\" value={amount} />\n        <p className=\"text-caption text-text-secondary\">\n          <span className=\"numeric\">\n            <Money size=\"xs\" tone=\"inherit\" value={annualized} />\n          </span>{\" \"}\n          / year\n        </p>\n        <p className=\"sr-only\">{cadence}</p>\n      </div>\n    </Card>\n  ),\n);\nSubscriptionCard.displayName = \"SubscriptionCard\";\n",
      "path": "components/ledger/subscription-card.tsx",
      "target": "components/ledger/subscription-card.tsx",
      "type": "registry:component"
    }
  ],
  "name": "subscription-card",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/card",
    "@lopifi/cn",
    "@lopifi/entity-mark",
    "@lopifi/fiscal-period",
    "@lopifi/money",
    "@lopifi/money.types"
  ],
  "title": "SubscriptionCard",
  "type": "registry:component"
}