{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "order-confirmation",
  "title": "Order Confirmation",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/order-confirmation/OrderConfirmation.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport {\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-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\ninterface OrderItem {\n  id: string\n  name: string\n  variant: string\n  quantity: number\n  price: string\n  image: string\n}\n\ninterface TrackingStep {\n  id: string\n  title: string\n  date: string\n  status: 'completed' | 'current' | 'upcoming'\n  description: string\n}\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst 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\nconst 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<template>\n  <div data-slot=\"order-confirmation\" :class=\"cn('w-full space-y-6', props.class)\">\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            <div v-for=\"(step, idx) in trackingSteps\" :key=\"step.id\" class=\"relative flex flex-col\">\n              <div class=\"relative flex items-center\">\n                <!-- Connecting Line before current step -->\n                <div\n                  v-if=\"idx > 0\"\n                  class=\"absolute top-1/2 right-1/2 -z-0 h-0.5 w-full -translate-y-1/2\"\n                  :class=\"step.status === 'upcoming' ? 'bg-muted' : 'bg-primary'\"\n                ></div>\n\n                <!-- Connecting Line after current step -->\n                <div\n                  v-if=\"idx < trackingSteps.length - 1\"\n                  class=\"absolute top-1/2 left-1/2 -z-0 h-0.5 w-full -translate-y-1/2\"\n                  :class=\"trackingSteps[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary'\"\n                ></div>\n\n                <!-- Step Indicator Circle -->\n                <div class=\"relative z-10 mx-auto flex items-center justify-center\">\n                  <div\n                    v-if=\"step.status === 'completed'\"\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                  <div\n                    v-else-if=\"step.status === 'current'\"\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                  <div\n                    v-else\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                </div>\n              </div>\n\n              <!-- Step Info -->\n              <div class=\"mt-3 text-center\">\n                <p\n                  class=\"text-sm font-semibold\"\n                  :class=\"step.status === 'upcoming' ? 'text-muted-foreground' : '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          </div>\n        </div>\n\n        <!-- Mobile Stepper (< md) -->\n        <div class=\"space-y-4 md:hidden\">\n          <div v-for=\"(step, idx) in trackingSteps\" :key=\"step.id\" class=\"flex items-start gap-3\">\n            <div class=\"flex flex-col items-center\">\n              <div\n                v-if=\"step.status === 'completed'\"\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              <div\n                v-else-if=\"step.status === 'current'\"\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              <div\n                v-else\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\n              <div\n                v-if=\"idx < trackingSteps.length - 1\"\n                class=\"mt-1 h-8 w-0.5\"\n                :class=\"trackingSteps[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary'\"\n              ></div>\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\"\n                  :class=\"step.status === 'upcoming' ? 'text-muted-foreground' : '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        </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              <div v-for=\"item in orderItems\" :key=\"item.id\" 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            </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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/OrderConfirmation.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}