{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-confirmation",
  "title": "Order Confirmation",
  "description": "A post-purchase confirmation with order number, receipt email, item summary, and total.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://lumo-www.vercel.app/r/lib.json"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/order-confirmation.tsx",
      "content": "import * as React from \"react\"\r\nimport { CheckCircle2 } from \"lucide-react\"\r\nimport type { CartLine, Money } from \"@/lib/lumo/types\"\r\nimport { formatMoney } from \"@/lib/lumo/money\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport interface OrderConfirmationProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  orderNumber: string\r\n  email?: string\r\n  lines?: CartLine[]\r\n  total?: Money\r\n  locale?: string\r\n  onContinue?: () => void\r\n  continueLabel?: string\r\n}\r\n\r\nconst OrderConfirmation = React.forwardRef<HTMLDivElement, OrderConfirmationProps>(\r\n  (\r\n    { orderNumber, email, lines, total, locale, onContinue, continueLabel = \"Continue shopping\", className, ...props },\r\n    ref\r\n  ) => {\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(\"flex flex-col items-center gap-5 rounded-2xl border bg-card p-8 text-center\", className)}\r\n        {...props}\r\n      >\r\n        <span className=\"flex h-14 w-14 items-center justify-center rounded-full bg-primary/15 text-primary\">\r\n          <CheckCircle2 className=\"h-8 w-8\" strokeWidth={2} />\r\n        </span>\r\n\r\n        <div>\r\n          <h2 className=\"font-display text-2xl font-semibold tracking-tight\">Order confirmed</h2>\r\n          <p className=\"mt-1 text-muted-foreground\">\r\n            Thanks. Your order <span className=\"font-medium text-foreground\">{orderNumber}</span> is on its way.\r\n          </p>\r\n          {email && <p className=\"mt-1 text-sm text-muted-foreground\">A receipt was sent to {email}.</p>}\r\n        </div>\r\n\r\n        {lines && lines.length > 0 && (\r\n          <ul className=\"w-full max-w-sm divide-y border-y\">\r\n            {lines.map((line) => (\r\n              <li key={line.id} className=\"flex items-center justify-between py-3 text-sm\">\r\n                <span className=\"truncate pr-3\">\r\n                  {line.product.title}\r\n                  <span className=\"text-muted-foreground\"> x {line.quantity}</span>\r\n                </span>\r\n                <span className=\"tabular-nums\">{formatMoney(line.lineTotal, { locale })}</span>\r\n              </li>\r\n            ))}\r\n          </ul>\r\n        )}\r\n\r\n        {total && <p className=\"text-lg font-semibold\">Total {formatMoney(total, { locale })}</p>}\r\n\r\n        {onContinue && (\r\n          <button\r\n            type=\"button\"\r\n            onClick={onContinue}\r\n            className=\"inline-flex h-11 items-center justify-center rounded-full bg-primary px-6 text-sm font-semibold text-primary-foreground transition-[background-color,transform] hover:bg-primary/90 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\r\n          >\r\n            {continueLabel}\r\n          </button>\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n)\r\nOrderConfirmation.displayName = \"OrderConfirmation\"\r\n\r\nexport { OrderConfirmation }\r\n",
      "type": "registry:ui",
      "target": "components/lumo/order-confirmation.tsx"
    }
  ],
  "type": "registry:ui"
}