{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "payment-confirmed",
  "version": "2.1.0",
  "category": "payment",
  "meta": {
    "preview": "https://ui.manifest.build/previews/payment-confirmed.png",
    "version": "2.1.0",
    "changelog": {
      "1.0.0": "Initial release with product image and tracking button",
      "1.0.2": "Added comprehensive JSDoc documentation",
      "1.0.3": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
      "2.0.0": "Added compressed variant, merged payment-success into this component",
      "2.0.1": "Removed default content data - component only renders explicitly provided data",
      "2.0.2": "Fixed missing alt fallback on product image in compressed desktop variant",
      "2.1.0": "Added demo data defaults - component renders demo content when no data prop is provided"
    }
  },
  "changelog": {
    "1.0.0": "Initial release with product image and tracking button",
    "1.0.2": "Added comprehensive JSDoc documentation",
    "1.0.3": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
    "2.0.0": "Added compressed variant, merged payment-success into this component",
    "2.0.1": "Removed default content data - component only renders explicitly provided data",
    "2.0.2": "Fixed missing alt fallback on product image in compressed desktop variant",
    "2.1.0": "Added demo data defaults - component renders demo content when no data prop is provided"
  },
  "title": "Payment Confirmed",
  "author": "MNFST, Inc",
  "description": "Payment confirmation card with product image, price, delivery info, and tracking button. Supports default and compressed variants.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.manifest.build/r/manifest-types.json"
  ],
  "files": [
    {
      "path": "registry/payment/payment-confirmed.tsx",
      "content": "'use client'\n\nimport { Button } from '@/components/ui/button'\nimport { Check, ExternalLink } from 'lucide-react'\nimport { demoPaymentConfirmed } from './demo/payment'\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * PaymentConfirmedProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for a payment confirmation card with product image, price, delivery info,\n * and tracking button. Supports default (detailed) and compressed layouts.\n */\nexport interface PaymentConfirmedProps {\n  data?: {\n    /** Order reference number displayed in the header. */\n    orderId?: string\n    /** Name of the purchased product. */\n    productName?: string\n    /** Product description or variant details (e.g., \"Nike - Size 42 - White\"). Only shown in default variant. */\n    productDescription?: string\n    /** URL to the product image. */\n    productImage?: string\n    /** Total price paid for the order. */\n    price?: number\n    /** Expected delivery date string (e.g., \"Tue. Dec 10\"). */\n    deliveryDate?: string\n  }\n  actions?: {\n    /** Called when the user clicks the track order button. */\n    onTrackOrder?: () => void\n  }\n  appearance?: {\n    /**\n     * Display variant: \"default\" shows detailed layout with header, \"compressed\" shows compact inline layout.\n     * @default \"default\"\n     */\n    variant?: 'default' | 'compressed'\n    /**\n     * Currency code for formatting the price.\n     * @default \"EUR\"\n     */\n    currency?: string\n  }\n}\n\n/**\n * A payment confirmation card with product image, price, delivery info, and tracking button.\n * Supports two variants: default (detailed with header) and compressed (compact inline).\n *\n * Features:\n * - Success checkmark with \"Payment confirmed\" header\n * - Order ID reference\n * - Product image and description (default variant only)\n * - Price and delivery date display\n * - Track order button\n * - Responsive mobile/desktop layouts\n *\n * @component\n * @example\n * ```tsx\n * <PaymentConfirmed\n *   data={{\n *     orderId: \"ORD-2024-5678\",\n *     productName: \"Running Shoes\",\n *     productDescription: \"Nike · Size 10 · Black\",\n *     productImage: \"/images/shoes.jpg\",\n *     price: 129.99,\n *     deliveryDate: \"Wed. Jan 18\"\n *   }}\n *   actions={{\n *     onTrackOrder: () => console.log(\"Track order clicked\")\n *   }}\n *   appearance={{ variant: \"default\", currency: \"USD\" }}\n * />\n * ```\n */\nexport function PaymentConfirmed({ data, actions, appearance }: PaymentConfirmedProps) {\n  const resolved: NonNullable<PaymentConfirmedProps['data']> = data ?? demoPaymentConfirmed\n  const orderId = resolved?.orderId\n  const productName = resolved?.productName\n  const productDescription = resolved?.productDescription\n  const productImage = resolved?.productImage\n  const price = resolved?.price\n  const deliveryDate = resolved?.deliveryDate\n  const { onTrackOrder } = actions ?? {}\n  const { variant = 'default', currency = 'EUR' } = appearance ?? {}\n\n  const formatCurrency = (value: number) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency\n    }).format(value)\n  }\n\n  // Compressed variant - compact inline layout\n  if (variant === 'compressed') {\n    return (\n      <div className=\"w-full rounded-lg bg-card border\">\n        {/* Mobile layout */}\n        <div className=\"sm:hidden p-4 space-y-4\">\n          {/* Success icon and title */}\n          <div className=\"flex flex-col items-center gap-2\">\n            <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-foreground\">\n              <Check className=\"h-5 w-5 text-background\" />\n            </div>\n            <p className=\"font-semibold text-base\">Payment confirmed</p>\n          </div>\n\n          {/* Product image centered */}\n          <div className=\"flex justify-center\">\n            <div className=\"h-20 w-20 rounded-lg overflow-hidden bg-muted\">\n              {productImage ? (\n                <img\n                  src={productImage}\n                  alt={productName ?? 'Product image'}\n                  className=\"h-full w-full object-cover\"\n                />\n              ) : (\n                <div className=\"h-full w-full bg-muted\" />\n              )}\n            </div>\n          </div>\n\n          {/* Product info stacked */}\n          <div className=\"text-center space-y-1\">\n            {productName && <p className=\"font-medium text-sm\">{productName}</p>}\n            {orderId && <p className=\"text-xs text-muted-foreground\">Order #{orderId}</p>}\n          </div>\n\n          {/* Price and delivery */}\n          {(price !== undefined || deliveryDate) && (\n            <div className=\"flex items-center justify-between py-3 border-y\">\n              {price !== undefined && (\n                <div>\n                  <p className=\"text-xs text-muted-foreground\">Total</p>\n                  <p className=\"text-lg font-semibold\">{formatCurrency(price)}</p>\n                </div>\n              )}\n              {deliveryDate && (\n                <div className=\"text-right\">\n                  <p className=\"text-xs text-muted-foreground\">Delivery</p>\n                  <p className=\"text-sm font-medium\">{deliveryDate}</p>\n                </div>\n              )}\n            </div>\n          )}\n\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onTrackOrder}\n            className=\"w-full\"\n          >\n            Track order\n            <ExternalLink className=\"ml-1.5 h-3.5 w-3.5\" />\n          </Button>\n        </div>\n\n        {/* Desktop layout - compact inline */}\n        <div className=\"hidden sm:flex items-center gap-3 p-3\">\n          <div className=\"flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-foreground\">\n            <Check className=\"h-4 w-4 text-background\" />\n          </div>\n          <div className=\"h-9 w-9 flex-shrink-0 rounded-lg overflow-hidden bg-muted\">\n            {productImage ? (\n              <img\n                src={productImage}\n                alt={productName ?? 'Product image'}\n                className=\"h-full w-full object-cover\"\n              />\n            ) : (\n              <div className=\"h-full w-full bg-muted\" />\n            )}\n          </div>\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              {productName && <span className=\"font-medium text-sm truncate\">{productName}</span>}\n              {orderId && <span className=\"text-xs text-muted-foreground\">#{orderId}</span>}\n            </div>\n            {deliveryDate && (\n              <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n                <span>Delivery: {deliveryDate}</span>\n              </div>\n            )}\n          </div>\n          {price !== undefined && (\n            <div className=\"text-right flex-shrink-0\">\n              <p className=\"font-semibold\">{formatCurrency(price)}</p>\n            </div>\n          )}\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onTrackOrder}\n            className=\"flex-shrink-0\"\n          >\n            Track\n            <ExternalLink className=\"ml-1 h-3 w-3\" />\n          </Button>\n        </div>\n      </div>\n    )\n  }\n\n  // Default variant - detailed layout with header\n  return (\n    <div className=\"w-full rounded-lg bg-card border overflow-hidden\">\n      {/* Mobile layout */}\n      <div className=\"sm:hidden\">\n        {/* Header */}\n        <div className=\"flex flex-col items-center gap-1 px-3 py-3 bg-muted border-b\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-full bg-foreground\">\n            <Check className=\"h-4 w-4 text-background\" />\n          </div>\n          <span className=\"text-sm font-medium\">\n            Payment confirmed\n          </span>\n          {orderId && (\n            <span className=\"text-xs text-muted-foreground\">\n              #{orderId}\n            </span>\n          )}\n        </div>\n        {/* Content */}\n        <div className=\"p-4 space-y-4\">\n          {/* Product image centered */}\n          {productImage && (\n            <div className=\"flex justify-center\">\n              <div className=\"h-20 w-20 rounded-lg overflow-hidden bg-muted\">\n                <img\n                  src={productImage}\n                  alt={productName ?? 'Product image'}\n                  className=\"h-full w-full object-cover\"\n                />\n              </div>\n            </div>\n          )}\n          {/* Product details stacked */}\n          <div className=\"text-center space-y-1\">\n            {productName && <p className=\"text-base font-medium\">{productName}</p>}\n            {productDescription && <p className=\"text-sm text-muted-foreground\">{productDescription}</p>}\n          </div>\n          {/* Price and delivery */}\n          {(price !== undefined || deliveryDate) && (\n            <div className=\"flex items-center justify-between py-3 border-y\">\n              {price !== undefined && (\n                <div>\n                  <p className=\"text-xs text-muted-foreground\">Total</p>\n                  <p className=\"text-lg font-semibold\">{formatCurrency(price)}</p>\n                </div>\n              )}\n              {deliveryDate && (\n                <div className=\"text-right\">\n                  <p className=\"text-xs text-muted-foreground\">Delivery</p>\n                  <p className=\"text-sm font-medium\">{deliveryDate}</p>\n                </div>\n              )}\n            </div>\n          )}\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\" onClick={onTrackOrder}>\n            Track order\n            <ExternalLink className=\"ml-1.5 h-3.5 w-3.5\" />\n          </Button>\n        </div>\n      </div>\n\n      {/* Desktop layout */}\n      <div className=\"hidden sm:block\">\n        {/* Header */}\n        <div className=\"flex items-center gap-2 px-4 py-2 bg-muted border-b\">\n          <div className=\"flex h-6 w-6 items-center justify-center rounded-full bg-foreground flex-shrink-0\">\n            <Check className=\"h-3 w-3 text-background\" />\n          </div>\n          <span className=\"text-sm font-medium\">\n            Payment confirmed\n          </span>\n          {orderId && (\n            <span className=\"text-xs text-muted-foreground ml-auto\">\n              #{orderId}\n            </span>\n          )}\n        </div>\n        {/* Product info */}\n        <div className=\"p-4\">\n          <div className=\"flex gap-4\">\n            <div className=\"h-20 w-20 flex-shrink-0 rounded-lg overflow-hidden bg-muted\">\n              {productImage ? (\n                <img\n                  src={productImage}\n                  alt={productName ?? 'Product image'}\n                  className=\"h-full w-full object-cover\"\n                />\n              ) : (\n                <div className=\"h-full w-full bg-muted\" />\n              )}\n            </div>\n            <div className=\"flex-1 min-w-0\">\n              {productName && <p className=\"text-base font-medium truncate\">{productName}</p>}\n              {productDescription && <p className=\"text-sm text-muted-foreground\">{productDescription}</p>}\n              <div className=\"flex items-center justify-between mt-2\">\n                {price !== undefined && <span className=\"text-lg font-semibold\">{formatCurrency(price)}</span>}\n                {deliveryDate && (\n                  <span className=\"text-sm text-muted-foreground\">\n                    Delivery: {deliveryDate}\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n          <div className=\"mt-4 pt-4 border-t flex justify-end\">\n            <Button variant=\"outline\" size=\"sm\" onClick={onTrackOrder}>\n              Track order\n              <ExternalLink className=\"ml-1.5 h-3.5 w-3.5\" />\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/ui/payment-confirmed.tsx"
    },
    {
      "path": "registry/payment/demo/payment.ts",
      "content": "// Demo data for Payment category components\n// This file contains sample data used for component previews and documentation\n\nimport type { OrderItem } from '../types'\n\n// Default order items for OrderSummary\nexport const demoOrderItems: OrderItem[] = [\n  { id: '1', name: 'Premium Headphones', quantity: 1, price: 199.99 },\n  { id: '2', name: 'Wireless Charger', quantity: 2, price: 29.99 }\n]\n\n// Default order data for OrderSummary\nexport const demoOrderData = {\n  items: demoOrderItems,\n  subtotal: 259.97,\n  shipping: 9.99,\n  tax: 21.58,\n  discount: 25.0,\n  discountCode: 'SAVE10',\n  total: 266.54,\n}\n\n// OrderConfirm component data\nexport const demoOrderConfirm = {\n  productName: \"Air Force 1 '07\",\n  productImage: 'https://ui.manifest.build/demo/shoe-1.png',\n  price: 299,\n  deliveryDate: 'Jan 20, 2024',\n}\n\n// AmountInput presets\nexport const demoAmountPresets = [10, 25, 50, 100]\n\n// PaymentConfirmed component data\nexport const demoPaymentConfirmed = {\n  productName: \"Air Force 1 '07\",\n  productImage: 'https://ui.manifest.build/demo/shoe-1.png',\n  price: 299,\n  deliveryDate: 'Jan 20, 2024',\n}\n",
      "type": "registry:lib",
      "target": "components/ui/demo/payment.ts"
    }
  ],
  "categories": [
    "payment"
  ],
  "type": "registry:block"
}