{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-summary",
  "title": "Order Summary",
  "description": "A read-only order review with line items, subtotal, shipping, tax, and total.",
  "registryDependencies": [
    "https://lumo-www.vercel.app/r/lib.json"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/order-summary.tsx",
      "content": "import * as React from \"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 OrderSummaryProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  lines: CartLine[]\r\n  subtotal: Money\r\n  shipping?: Money\r\n  tax?: Money\r\n  total?: Money\r\n  locale?: string\r\n  title?: string\r\n}\r\n\r\nfunction Row({ label, value, strong }: { label: string; value: string; strong?: boolean }) {\r\n  return (\r\n    <div className={cn(\"flex items-center justify-between\", strong ? \"text-base font-semibold\" : \"text-sm\")}>\r\n      <span className={strong ? \"\" : \"text-muted-foreground\"}>{label}</span>\r\n      <span className=\"tabular-nums\">{value}</span>\r\n    </div>\r\n  )\r\n}\r\n\r\nconst OrderSummary = React.forwardRef<HTMLDivElement, OrderSummaryProps>(\r\n  ({ lines, subtotal, shipping, tax, total, locale, title = \"Order summary\", className, ...props }, ref) => {\r\n    return (\r\n      <div ref={ref} className={cn(\"flex flex-col gap-4 rounded-2xl border bg-card p-6\", className)} {...props}>\r\n        <h3 className=\"font-semibold\">{title}</h3>\r\n\r\n        <ul className=\"flex flex-col gap-3\">\r\n          {lines.map((line) => {\r\n            const image = line.product.images[0] ?? line.variant.image\r\n            return (\r\n              <li key={line.id} className=\"flex items-center gap-3\">\r\n                <div className=\"relative h-12 w-12 shrink-0 overflow-hidden rounded-md border bg-muted/20\">\r\n                  {image && (\r\n                    <img src={image.url} alt={image.alt ?? line.product.title} className=\"h-full w-full object-cover\" />\r\n                  )}\r\n                  <span className=\"absolute -right-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-foreground px-1 text-[10px] font-semibold text-background\">\r\n                    {line.quantity}\r\n                  </span>\r\n                </div>\r\n                <div className=\"min-w-0 flex-1\">\r\n                  <p className=\"truncate text-sm font-medium\">{line.product.title}</p>\r\n                  {line.variant.title && <p className=\"text-xs text-muted-foreground\">{line.variant.title}</p>}\r\n                </div>\r\n                <span className=\"text-sm tabular-nums\">{formatMoney(line.lineTotal, { locale })}</span>\r\n              </li>\r\n            )\r\n          })}\r\n        </ul>\r\n\r\n        <div className=\"flex flex-col gap-2 border-t pt-4\">\r\n          <Row label=\"Subtotal\" value={formatMoney(subtotal, { locale })} />\r\n          {shipping && <Row label=\"Shipping\" value={formatMoney(shipping, { locale })} />}\r\n          {tax && <Row label=\"Tax\" value={formatMoney(tax, { locale })} />}\r\n        </div>\r\n\r\n        {total && (\r\n          <div className=\"border-t pt-4\">\r\n            <Row label=\"Total\" value={formatMoney(total, { locale })} strong />\r\n          </div>\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n)\r\nOrderSummary.displayName = \"OrderSummary\"\r\n\r\nexport { OrderSummary }\r\n",
      "type": "registry:ui",
      "target": "components/lumo/order-summary.tsx"
    }
  ],
  "type": "registry:ui"
}