{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "order-confirmation",
  "title": "Order Confirmation",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/order-confirmation/OrderConfirmation.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface OrderItem {\n    id: string\n    name: string\n    variant: string\n    quantity: number\n    price: string\n    image: string\n  }\n\n  export interface TrackingStep {\n    id: string\n    title: string\n    date: string\n    status: 'completed' | 'current' | 'upcoming'\n    description: string\n  }\n\n  export interface OrderConfirmationProps {\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import {\n    Check,\n    CheckCircle2,\n    CreditCard,\n    Download,\n    ExternalLink,\n    HelpCircle,\n    Mail,\n    MapPin,\n    MessageSquare,\n    Package,\n    Truck,\n  } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Separator } from '$lib/components/ui/separator'\n  import { cn } from '$lib/utils'\n\n  let { class: className }: OrderConfirmationProps = $props()\n\n  const orderItems: OrderItem[] = [\n    {\n      id: 'item-1',\n      name: 'Studio Wireless Noise-Canceling Headphones',\n      variant: 'Space Gray • Over-Ear',\n      quantity: 1,\n      price: '$179.00',\n      image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=160&auto=format&fit=crop&q=80',\n    },\n    {\n      id: 'item-2',\n      name: 'Braided USB-C Fast Charging Cable (2m)',\n      variant: 'Midnight Black • 100W PD',\n      quantity: 2,\n      price: '$38.00',\n      image: 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=160&auto=format&fit=crop&q=80',\n    },\n    {\n      id: 'item-3',\n      name: 'Magnetic Aluminum Desk Stand',\n      variant: 'Silver • Anodized Aluminum',\n      quantity: 1,\n      price: '$35.00',\n      image: 'https://images.unsplash.com/photo-1586105251261-72a756497a11?w=160&auto=format&fit=crop&q=80',\n    },\n  ]\n\n  const trackingSteps: TrackingStep[] = [\n    {\n      id: 'step-1',\n      title: 'Order Placed',\n      date: 'Aug 21, 2026 • 10:42 AM',\n      status: 'completed',\n      description: 'Payment authorized & order confirmed',\n    },\n    {\n      id: 'step-2',\n      title: 'Processing',\n      date: 'Aug 22, 2026 • 02:15 PM',\n      status: 'completed',\n      description: 'Item picked & packed at warehouse',\n    },\n    {\n      id: 'step-3',\n      title: 'Shipped',\n      date: 'Aug 23, 2026 • 09:30 AM',\n      status: 'current',\n      description: 'In transit via FedEx Priority • Chicago, IL',\n    },\n    {\n      id: 'step-4',\n      title: 'Delivered',\n      date: 'Est. Aug 27, 2026',\n      status: 'upcoming',\n      description: 'Estimated delivery to front door',\n    },\n  ]\n</script>\n\n<div data-slot=\"order-confirmation\" class={cn('w-full space-y-6', className)}>\n  <!-- Success Banner Card -->\n  <Card class=\"border shadow-xs\">\n    <CardContent class=\"flex flex-col items-center p-6 text-center sm:p-10\">\n      <div\n        class=\"bg-success/10 text-success ring-success/10 text-success relative flex size-16 items-center justify-center rounded-full ring-8 sm:size-20\"\n      >\n        <CheckCircle2 class=\"size-8 sm:size-10\" aria-hidden=\"true\" />\n      </div>\n\n      <div class=\"mt-6 max-w-xl space-y-2\">\n        <div\n          class=\"border-success/20 bg-success/10 text-success inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium\"\n        >\n          <span class=\"bg-success size-1.5 rounded-full\"></span>\n          Order Confirmed\n        </div>\n        <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">Thank you for your order!</h1>\n        <p class=\"text-muted-foreground text-sm sm:text-base\">\n          We've received your order\n          <span class=\"text-foreground font-mono font-semibold\">#ORD-92841</span>\n          and sent a confirmation email to\n          <span class=\"text-foreground font-medium\">customer@example.com</span>.\n        </p>\n      </div>\n\n      <div class=\"mt-8 flex flex-wrap items-center justify-center gap-3\">\n        <Button class=\"gap-2 shadow-xs\">\n          <ExternalLink class=\"size-4\" aria-hidden=\"true\" />\n          Track Shipment\n        </Button>\n        <Button aria-label=\"Download attachment\" variant=\"outline\" class=\"gap-2 shadow-xs\">\n          <Download class=\"size-4\" aria-hidden=\"true\" />\n          Download Receipt\n        </Button>\n        <Button variant=\"ghost\" class=\"text-muted-foreground hover:text-foreground\"> Continue Shopping </Button>\n      </div>\n    </CardContent>\n  </Card>\n\n  <!-- Tracking Stepper Card -->\n  <Card class=\"border shadow-xs\">\n    <CardHeader class=\"flex flex-col gap-3 pb-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex items-center gap-2\">\n          <Truck class=\"text-primary size-4\" aria-hidden=\"true\" />\n          <CardTitle class=\"text-base font-semibold\">Shipment Progress</CardTitle>\n          <Badge variant=\"secondary\" class=\"bg-primary/10 text-primary text-xs font-medium\">In Transit</Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs\">\n          Carrier:\n          <span class=\"text-foreground font-medium\">FedEx Priority</span>\n          • Tracking:\n          <span class=\"text-foreground font-mono font-medium\">#FX-9821734910</span>\n        </p>\n      </div>\n      <div class=\"border-border/80 bg-muted/40 rounded-lg border px-3 py-1.5 text-xs\">\n        <span class=\"text-muted-foreground\">Estimated Delivery:</span>\n        <span class=\"text-foreground ml-1 font-semibold\">Thursday, Aug 27, 2026</span>\n      </div>\n    </CardHeader>\n    <CardContent class=\"pt-4\">\n      <!-- Desktop Stepper (md+) -->\n      <div class=\"hidden md:block\">\n        <div class=\"grid grid-cols-4 gap-4\">\n          {#each trackingSteps as step, idx (step.id)}\n            <div class=\"relative flex flex-col\">\n              <div class=\"relative flex items-center\">\n                <!-- Connecting Line before current step -->\n                {#if idx > 0}\n                  <div\n                    class=\"absolute top-1/2 right-1/2 -z-0 h-0.5 w-full -translate-y-1/2 {step.status === 'upcoming'\n                      ? 'bg-muted'\n                      : 'bg-primary'}\"\n                  ></div>\n                {/if}\n\n                <!-- Connecting Line after current step -->\n                {#if idx < trackingSteps.length - 1}\n                  <div\n                    class=\"absolute top-1/2 left-1/2 -z-0 h-0.5 w-full -translate-y-1/2 {trackingSteps[idx + 1].status ===\n                    'upcoming'\n                      ? 'bg-muted'\n                      : 'bg-primary'}\"\n                  ></div>\n                {/if}\n\n                <!-- Step Indicator Circle -->\n                <div class=\"relative z-10 mx-auto flex items-center justify-center\">\n                  {#if step.status === 'completed'}\n                    <div\n                      class=\"bg-primary text-primary-foreground ring-background flex size-8 items-center justify-center rounded-full ring-4\"\n                    >\n                      <Check class=\"size-4\" aria-hidden=\"true\" />\n                    </div>\n                  {:else if step.status === 'current'}\n                    <div\n                      class=\"border-primary bg-background text-primary ring-background flex size-8 items-center justify-center rounded-full border-2 ring-4\"\n                    >\n                      <span class=\"relative flex size-2.5\">\n                        <span class=\"bg-primary absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n                        <span class=\"bg-primary relative inline-flex size-2.5 rounded-full\"></span>\n                      </span>\n                    </div>\n                  {:else}\n                    <div\n                      class=\"border-muted-foreground/30 bg-muted/40 text-muted-foreground ring-background flex size-8 items-center justify-center rounded-full border-2 ring-4\"\n                    >\n                      <Package class=\"size-3.5\" aria-hidden=\"true\" />\n                    </div>\n                  {/if}\n                </div>\n              </div>\n\n              <!-- Step Info -->\n              <div class=\"mt-3 text-center\">\n                <p\n                  class=\"text-sm font-semibold {step.status === 'upcoming'\n                    ? 'text-muted-foreground'\n                    : 'text-foreground'}\"\n                >\n                  {step.title}\n                </p>\n                <p class=\"text-muted-foreground mt-0.5 text-xs tabular-nums\">{step.date}</p>\n                <p class=\"text-muted-foreground/80 mt-0.5 text-xs\">{step.description}</p>\n              </div>\n            </div>\n          {/each}\n        </div>\n      </div>\n\n      <!-- Mobile Stepper (< md) -->\n      <div class=\"space-y-4 md:hidden\">\n        {#each trackingSteps as step, idx (step.id)}\n          <div class=\"flex items-start gap-3\">\n            <div class=\"flex flex-col items-center\">\n              {#if step.status === 'completed'}\n                <div\n                  class=\"bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-full\"\n                >\n                  <Check class=\"size-3.5\" aria-hidden=\"true\" />\n                </div>\n              {:else if step.status === 'current'}\n                <div\n                  class=\"border-primary bg-background text-primary flex size-7 shrink-0 items-center justify-center rounded-full border-2\"\n                >\n                  <span class=\"relative flex size-2\">\n                    <span class=\"bg-primary absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n                    <span class=\"bg-primary relative inline-flex size-2 rounded-full\"></span>\n                  </span>\n                </div>\n              {:else}\n                <div\n                  class=\"border-muted-foreground/30 bg-muted/40 text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full border-2\"\n                >\n                  <Package class=\"size-3\" aria-hidden=\"true\" />\n                </div>\n              {/if}\n\n              {#if idx < trackingSteps.length - 1}\n                <div\n                  class=\"mt-1 h-8 w-0.5 {trackingSteps[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary'}\"\n                ></div>\n              {/if}\n            </div>\n\n            <div class=\"min-w-0 flex-1 pt-0.5 pb-2\">\n              <div class=\"flex items-center justify-between gap-2\">\n                <p\n                  class=\"text-sm font-semibold {step.status === 'upcoming'\n                    ? 'text-muted-foreground'\n                    : 'text-foreground'}\"\n                >\n                  {step.title}\n                </p>\n                <span class=\"text-muted-foreground text-xs tabular-nums\">{step.date}</span>\n              </div>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">{step.description}</p>\n            </div>\n          </div>\n        {/each}\n      </div>\n    </CardContent>\n  </Card>\n\n  <!-- 2-Column Details Grid -->\n  <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n    <!-- Left Column: Itemized Order Summary -->\n    <div class=\"lg:col-span-7\">\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-4\">\n          <CardTitle class=\"text-base font-semibold\">Order Summary</CardTitle>\n          <CardDescription>3 items in shipment</CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-6\">\n          <!-- Items list -->\n          <div class=\"space-y-4\">\n            {#each orderItems as item (item.id)}\n              <div class=\"flex items-center gap-4\">\n                <div class=\"border-border bg-muted/40 relative size-16 shrink-0 overflow-hidden rounded-lg border\">\n                  <img src={item.image} alt={item.name} class=\"h-full w-full object-cover\" />\n                </div>\n                <div class=\"min-w-0 flex-1\">\n                  <p class=\"text-foreground truncate text-sm font-medium\">{item.name}</p>\n                  <p class=\"text-muted-foreground text-xs\">{item.variant}</p>\n                  <p class=\"text-muted-foreground mt-1 text-xs\">Qty: {item.quantity}</p>\n                </div>\n                <div class=\"text-right\">\n                  <p class=\"text-foreground text-sm font-semibold tabular-nums\">{item.price}</p>\n                </div>\n              </div>\n            {/each}\n          </div>\n\n          <Separator />\n\n          <!-- Cost breakdown -->\n          <div class=\"space-y-2 text-sm\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Subtotal</span>\n              <span class=\"text-foreground font-medium tabular-nums\">$252.00</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Shipping (FedEx Priority)</span>\n              <span class=\"text-success text-success font-medium tabular-nums\">Free</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Estimated Tax</span>\n              <span class=\"text-foreground font-medium tabular-nums\">$12.50</span>\n            </div>\n          </div>\n\n          <Separator />\n\n          <!-- Total -->\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-foreground text-base font-semibold\">Total</span>\n            <span class=\"text-foreground text-xl font-bold tabular-nums sm:text-2xl\">$264.50</span>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Right Column: Customer & Delivery Details -->\n    <div class=\"space-y-6 lg:col-span-5\">\n      <!-- Shipping Address Card -->\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center gap-2\">\n            <MapPin class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n            <CardTitle class=\"text-base font-semibold\">Shipping Address</CardTitle>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 text-sm\">\n          <div class=\"space-y-0.5\">\n            <p class=\"text-foreground font-medium\">Alex Morgan</p>\n            <p class=\"text-muted-foreground\">742 Evergreen Terrace, Suite 4B</p>\n            <p class=\"text-muted-foreground\">Springfield, OR 97477</p>\n            <p class=\"text-muted-foreground\">United States</p>\n            <p class=\"text-muted-foreground mt-1 text-xs\">+1 (555) 234-5678</p>\n          </div>\n          <div class=\"border-border bg-muted/30 rounded-md border p-2.5 text-xs\">\n            <span class=\"text-muted-foreground\">Delivery Method:</span>\n            <span class=\"text-foreground ml-1 font-medium\">FedEx Priority Express</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Payment Method Card -->\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center gap-2\">\n            <CreditCard class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n            <CardTitle class=\"text-base font-semibold\">Payment Method</CardTitle>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 text-sm\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2.5\">\n              <div\n                class=\"border-border bg-muted/40 text-foreground flex h-7 w-11 items-center justify-center rounded border font-mono text-xs font-bold\"\n              >\n                VISA\n              </div>\n              <div>\n                <p class=\"text-foreground text-sm font-medium\">Visa ending in 4242</p>\n                <p class=\"text-muted-foreground text-xs\">Expires 08/29</p>\n              </div>\n            </div>\n            <Badge variant=\"secondary\" class=\"bg-success/10 text-success\">Paid</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">Billing address matches shipping address</p>\n        </CardContent>\n      </Card>\n\n      <!-- Need Help Card -->\n      <Card class=\"border shadow-xs\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center gap-2\">\n            <HelpCircle class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n            <CardTitle class=\"text-base font-semibold\">Need Help?</CardTitle>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 text-sm\">\n          <p class=\"text-muted-foreground text-xs\">\n            Questions about your order? Chat with support or email support@example.com.\n          </p>\n          <div class=\"space-y-2 pt-1\">\n            <Button variant=\"outline\" size=\"sm\" class=\"w-full justify-start gap-2 text-xs shadow-xs\">\n              <MessageSquare class=\"size-3.5\" aria-hidden=\"true\" />\n              Chat with Support\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"text-muted-foreground hover:text-foreground w-full justify-start gap-2 text-xs\"\n            >\n              <Mail class=\"size-3.5\" aria-hidden=\"true\" />\n              support@example.com\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</div>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/order-confirmation/OrderConfirmation.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/separator.json"
  ],
  "description": "Post-purchase order confirmation & tracking page featuring a success banner with emerald checkmark halo, 4-step shipment progress bar with pulsing active state, itemized order breakdown, and customer delivery & payment cards.",
  "categories": [
    "commerce",
    "ecommerce"
  ]
}