{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "receipt",
  "title": "Receipt",
  "description": "A polished payment receipt with ticket details, card information, and a decorative barcode.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spark-ui/receipt.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport type * as React from \"react\";\n\nexport interface ReceiptProps extends React.HTMLAttributes<HTMLElement> {\n  title?: string;\n  description?: string;\n  ticketId: string;\n  amount: string;\n  dateTime: string;\n  cardholder: string;\n  cardLastFour: string;\n  barcodeValue?: string;\n  successIcon?: React.ReactNode;\n}\n\nexport function Receipt({\n  title = \"Thank you!\",\n  description = \"Your ticket has been issued successfully\",\n  ticketId,\n  amount,\n  dateTime,\n  cardholder,\n  cardLastFour,\n  barcodeValue = ticketId,\n  successIcon = \"🎉\",\n  className,\n  ...props\n}: ReceiptProps) {\n  return (\n    <article\n      className={cn(\n        \"relative w-full max-w-sm overflow-hidden rounded-3xl bg-zinc-100 text-card-foreground dark:bg-card\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"px-6 pb-6 pt-7 text-center sm:px-8\">\n        <div className=\"text-4xl\" aria-hidden>\n          {successIcon}\n        </div>\n        <h2 className=\"mt-4 text-xl font-bold tracking-tight\">{title}</h2>\n        <p className=\"mx-auto mt-1.5 max-w-56 text-sm leading-relaxed text-muted-foreground\">\n          {description}\n        </p>\n      </div>\n\n      <div className=\"relative px-6 sm:px-8\">\n        <span className=\"absolute -left-3 top-1/2 size-6 -translate-y-1/2 rounded-full bg-background\" />\n        <span className=\"absolute -right-3 top-1/2 size-6 -translate-y-1/2 rounded-full bg-background\" />\n        <div className=\"border-t border-dashed border-border\" />\n      </div>\n\n      <div className=\"space-y-5 px-6 py-6 sm:px-8\">\n        <div className=\"grid grid-cols-[1fr_auto] gap-6\">\n          <div>\n            <p className=\"text-xs uppercase tracking-wide text-muted-foreground\">\n              Ticket ID\n            </p>\n            <p className=\"mt-1 font-semibold tabular-nums\">{ticketId}</p>\n          </div>\n          <div className=\"text-right\">\n            <p className=\"text-xs uppercase tracking-wide text-muted-foreground\">\n              Amount\n            </p>\n            <p className=\"mt-1 font-semibold tabular-nums\">{amount}</p>\n          </div>\n        </div>\n\n        <div>\n          <p className=\"text-xs uppercase tracking-wide text-muted-foreground\">\n            Date &amp; Time\n          </p>\n          <time className=\"mt-1 block font-semibold\">{dateTime}</time>\n        </div>\n\n        <div className=\"flex items-center gap-3 rounded-xl bg-background/80 p-3.5 dark:bg-muted/60\">\n          <div className=\"relative h-7 w-10 shrink-0\" aria-label=\"Mastercard\">\n            <span className=\"absolute left-0 top-1 size-6 rounded-full bg-red-500\" />\n            <span className=\"absolute right-0 top-1 size-6 rounded-full bg-amber-400/90\" />\n          </div>\n          <div>\n            <p className=\"font-semibold\">{cardholder}</p>\n            <p className=\"text-sm tabular-nums text-muted-foreground\">\n              •••• {cardLastFour}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"border-t border-dashed border-border px-6 pb-10 pt-6 sm:px-8\">\n        <div\n          className=\"h-16 w-full text-foreground\"\n          style={{\n            backgroundImage:\n              \"repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px,currentColor 5px 6px,transparent 6px 10px)\",\n          }}\n          aria-hidden\n        />\n        <p className=\"mt-2 text-center font-mono text-[11px] tracking-[0.3em] text-muted-foreground\">\n          {barcodeValue}\n        </p>\n      </div>\n\n      <div className=\"absolute inset-x-2 bottom-0 flex justify-around\" aria-hidden>\n        {Array.from({ length: 8 }).map((_, index) => (\n          <span\n            key={index}\n            className=\"size-6 translate-y-1/2 rounded-full bg-background\"\n          />\n        ))}\n      </div>\n    </article>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}