{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "Lopifi (https://lopifi.com)",
  "categories": [
    "payments",
    "finance",
    "accounting"
  ],
  "dependencies": [],
  "description": "The sanctioned delight moment.",
  "files": [
    {
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { useReducedMotion } from \"@/hooks/ledger/use-media-query\";\nimport { cn } from \"@/lib/ledger/cn\";\nimport { formatDate } from \"@/lib/ledger/fiscal-period\";\nimport type { MoneyValue } from \"@/lib/ledger/money.types\";\nimport { Figure } from \"@/components/ledger/figure\";\nimport { MaskedAccount } from \"@/components/ledger/reference\";\n\nexport interface PaymentSuccessProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  amount: MoneyValue;\n  arrivalDate: Date;\n  payeeLast4: string;\n  payeeName: string;\n}\n\n/**\n * The sanctioned delight moment: circle scale → checkmark stroke draw →\n * details fade up, staggered. Total ≤ 700ms. No confetti, no bounce, no sound.\n *\n * Shows the three things a user needs before they close the screen: the\n * amount, the destination, and the arrival estimate.\n */\nexport const PaymentSuccess = React.forwardRef<HTMLDivElement, PaymentSuccessProps>(\n  ({ className, amount, payeeName, payeeLast4, arrivalDate, ...props }, ref) => {\n    const reduced = useReducedMotion();\n    return (\n      <div\n        className={cn(\"flex flex-col items-center gap-4 py-8 text-center\", className)}\n        ref={ref}\n        role=\"status\"\n        {...props}\n      >\n        <svg aria-hidden=\"true\" className=\"shrink-0\" height=\"64\" viewBox=\"0 0 64 64\" width=\"64\">\n          <circle\n            cx=\"32\"\n            cy=\"32\"\n            fill=\"var(--positive-subtle)\"\n            r=\"30\"\n            stroke=\"var(--positive)\"\n            strokeWidth=\"1.5\"\n            style={reduced ? undefined : { animation: \"ledger-enter 240ms var(--ease-out) both\" }}\n          />\n          <path\n            d=\"M20 33 L28.5 41.5 L44 25\"\n            fill=\"none\"\n            stroke=\"var(--positive)\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth=\"3\"\n            style={\n              reduced\n                ? undefined\n                : {\n                    animation: \"ledger-draw 280ms var(--ease-out) 200ms forwards\",\n                    strokeDasharray: 40,\n                    strokeDashoffset: 40,\n                  }\n            }\n          />\n        </svg>\n\n        <div style={reduced ? undefined : { animation: \"ledger-enter 240ms var(--ease-out) 400ms both\" }}>\n          <p className=\"text-title-sm font-medium\">Payment sent</p>\n          <Figure className=\"mt-2 justify-center\" size=\"lg\" value={amount} />\n        </div>\n\n        <p\n          className=\"flex flex-wrap items-center justify-center gap-1 text-body text-text-secondary\"\n          style={reduced ? undefined : { animation: \"ledger-enter 240ms var(--ease-out) 480ms both\" }}\n        >\n          To {payeeName} <MaskedAccount last4={payeeLast4} />\n          <span aria-hidden=\"true\">·</span> Arrives {formatDate(arrivalDate)}\n        </p>\n      </div>\n    );\n  },\n);\nPaymentSuccess.displayName = \"PaymentSuccess\";\n",
      "path": "components/ledger/payment-success.tsx",
      "target": "components/ledger/payment-success.tsx",
      "type": "registry:component"
    }
  ],
  "name": "payment-success",
  "registryDependencies": [
    "@lopifi/theme",
    "@lopifi/cn",
    "@lopifi/figure",
    "@lopifi/fiscal-period",
    "@lopifi/money.types",
    "@lopifi/reference",
    "@lopifi/use-media-query"
  ],
  "title": "PaymentSuccess",
  "type": "registry:component"
}