{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "payments",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "Itemized total with fees and tax.",
  "files": [
    {
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Money } from \"@/components/ledger/money\";\nimport { Rule } from \"@/components/ledger/rule\";\n\nexport type SummaryLine = { label: string; amount: MoneyValue; note?: string };\n\nexport interface CheckoutSummaryProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  /** Itemized and named, never a lump \"Fees\". */\n  fees?: SummaryLine[];\n  items: SummaryLine[];\n  roundingNote?: string;\n  subtotal: MoneyValue;\n  tax?: SummaryLine[];\n  total: MoneyValue;\n}\n\n/**\n * Line items → subtotal (single rule) → fees → tax → total (double rule).\n * The same `Rule` grammar as the statements, which is what makes the\n * library read as one system.\n */\nexport const CheckoutSummary = React.forwardRef<HTMLDivElement, CheckoutSummaryProps>(\n  ({ className, items, subtotal, fees = [], tax = [], total, roundingNote, ...props }, ref) => (\n    <div className={cn(\"w-full\", className)} ref={ref} {...props}>\n      <table className=\"w-full\">\n        <caption className=\"sr-only\">Order summary</caption>\n        <tbody>\n          {items.map((line) => (\n            <Line key={line.label} {...line} />\n          ))}\n          <tr>\n            <td />\n            <td className=\"py-1\">\n              <Rule variant=\"subtotal\" />\n            </td>\n          </tr>\n          <Line amount={subtotal} emphasis label=\"Subtotal\" />\n          {fees.map((line) => (\n            <Line key={line.label} {...line} />\n          ))}\n          {tax.map((line) => (\n            <Line key={line.label} {...line} />\n          ))}\n          <tr>\n            <td />\n            <td className=\"py-1\">\n              <Rule variant=\"subtotal\" />\n            </td>\n          </tr>\n          <tr>\n            <th className=\"py-1 text-left text-body font-medium\" scope=\"row\">\n              Total\n            </th>\n            <td className=\"py-1 text-right\">\n              <Money accounting size=\"md\" value={total} />\n            </td>\n          </tr>\n          <tr>\n            <td />\n            <td className=\"pt-1\">\n              <Rule variant=\"total\" />\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      {roundingNote ? <p className=\"mt-2 text-caption text-text-tertiary\">† {roundingNote}</p> : null}\n    </div>\n  ),\n);\nCheckoutSummary.displayName = \"CheckoutSummary\";\n\nfunction Line({ label, amount, note, emphasis }: SummaryLine & { emphasis?: boolean }) {\n  return (\n    <tr>\n      <th\n        className={cn(\n          \"py-1 pr-6 text-left text-body font-normal\",\n          emphasis ? \"font-medium text-text-primary\" : \"text-text-secondary\",\n        )}\n        scope=\"row\"\n      >\n        {label}\n        {note ? <span className=\"block text-caption text-text-tertiary\">{note}</span> : null}\n      </th>\n      <td className=\"py-1 text-right align-top\">\n        <Money accounting value={amount} />\n      </td>\n    </tr>\n  );\n}\n",
      "path": "components/ledger/checkout-summary.tsx",
      "target": "components/ledger/checkout-summary.tsx",
      "type": "registry:component"
    }
  ],
  "name": "checkout-summary",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/money",
    "@lopifi/money.types",
    "@lopifi/rule"
  ],
  "title": "CheckoutSummary",
  "type": "registry:component"
}