{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "order-confirm",
  "version": "1.1.0",
  "category": "payment",
  "meta": {
    "preview": "https://ui.manifest.build/previews/order-confirm.png",
    "version": "1.1.0",
    "changelog": {
      "1.0.0": "Initial release with product image and delivery info",
      "1.0.2": "Added comprehensive JSDoc documentation",
      "1.0.3": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
      "1.0.4": "Removed default content data - component only renders explicitly provided data",
      "1.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 delivery info",
    "1.0.2": "Added comprehensive JSDoc documentation",
    "1.0.3": "Updated Props interface with decorative header and sub-parameter JSDoc documentation",
    "1.0.4": "Removed default content data - component only renders explicitly provided data",
    "1.1.0": "Added demo data defaults - component renders demo content when no data prop is provided"
  },
  "title": "Order Confirm",
  "author": "MNFST, Inc",
  "description": "Order confirmation with product image, delivery info, and confirm action.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.manifest.build/r/manifest-types.json"
  ],
  "files": [
    {
      "path": "registry/payment/order-confirm.tsx",
      "content": "'use client'\n\nimport { Button } from '@/components/ui/button'\nimport { ArrowRight, Calendar, MapPin } from 'lucide-react'\nimport { demoOrderConfirm } from './demo/payment'\n\n/**\n * ═══════════════════════════════════════════════════════════════════════════\n * OrderConfirmProps\n * ═══════════════════════════════════════════════════════════════════════════\n *\n * Props for an order confirmation component with product image, delivery info,\n * and confirm action. Displays responsive layouts for mobile and desktop.\n */\nexport interface OrderConfirmProps {\n  data?: {\n    /** Name of the product being ordered. */\n    productName?: string\n    /** Product variant such as color or size. */\n    productVariant?: string\n    /** URL to the product image. */\n    productImage?: string\n    /**\n     * Quantity of items being ordered.\n     * @default 1\n     */\n    quantity?: number\n    /** Total price for the order. */\n    price?: number\n    /** Expected delivery date string (e.g., \"Tue. Dec 10\"). */\n    deliveryDate?: string\n    /** Delivery address for the order. */\n    deliveryAddress?: string\n    /**\n     * Whether shipping is free for this order.\n     * @default true\n     */\n    freeShipping?: boolean\n  }\n  actions?: {\n    /** Called when the user confirms the order. */\n    onConfirm?: () => void\n  }\n  appearance?: {\n    /**\n     * Currency code for formatting the price.\n     * @default \"USD\"\n     */\n    currency?: string\n  }\n  control?: {\n    /**\n     * Shows loading state on the confirm button.\n     * @default false\n     */\n    isLoading?: boolean\n  }\n}\n\n/**\n * An order confirmation component with product image, delivery info, and confirm action.\n * Displays responsive layouts for mobile and desktop with delivery details.\n *\n * Features:\n * - Product image and details display\n * - Variant and quantity information\n * - Price with free shipping indicator\n * - Delivery date and address\n * - Confirm order button with loading state\n * - Responsive mobile/desktop layouts\n *\n * @component\n * @example\n * ```tsx\n * <OrderConfirm\n *   data={{\n *     productName: \"Wireless Earbuds\",\n *     productVariant: \"White\",\n *     productImage: \"/images/earbuds.jpg\",\n *     quantity: 1,\n *     price: 149.99,\n *     deliveryDate: \"Fri. Jan 20\",\n *     deliveryAddress: \"123 Main St, New York 10001\",\n *     freeShipping: true\n *   }}\n *   actions={{\n *     onConfirm: () => console.log(\"Order confirmed\")\n *   }}\n *   appearance={{ currency: \"USD\" }}\n *   control={{ isLoading: false }}\n * />\n * ```\n */\nexport function OrderConfirm({ data, actions, appearance, control }: OrderConfirmProps) {\n  const resolved: NonNullable<OrderConfirmProps['data']> = data ?? demoOrderConfirm\n  const productName = resolved?.productName\n  const productVariant = resolved?.productVariant\n  const productImage = resolved?.productImage\n  const quantity = resolved?.quantity ?? 1\n  const price = resolved?.price\n  const deliveryDate = resolved?.deliveryDate\n  const deliveryAddress = resolved?.deliveryAddress\n  const freeShipping = resolved?.freeShipping ?? true\n  const { onConfirm } = actions ?? {}\n  const { currency = 'USD' } = appearance ?? {}\n  const { isLoading = false } = control ?? {}\n  const formatCurrency = (value: number) => {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency\n    }).format(value)\n  }\n\n  return (\n    <div className=\"w-full rounded-md sm:rounded-lg bg-card\">\n      {/* Product info */}\n      <div className=\"flex items-start gap-3 p-3 sm:gap-4 sm:p-2\">\n        {productImage && (\n          <img\n            src={productImage}\n            alt={productName ?? 'Product image'}\n            className=\"h-12 w-12 sm:h-16 sm:w-16 rounded-sm sm:rounded-md object-contain bg-muted/30\"\n          />\n        )}\n        <div className=\"flex-1 min-w-0\">\n          {/* Mobile: stacked layout */}\n          {productName && (\n            <h3 className=\"text-sm sm:text-base font-medium truncate\">\n              {productName}\n            </h3>\n          )}\n          {(productVariant || quantity) && (\n            <p className=\"text-xs sm:text-sm text-muted-foreground\">\n              {productVariant}{productVariant && quantity ? ' • ' : ''}Qty: {quantity}\n            </p>\n          )}\n          {/* Mobile: price below product info */}\n          <div className=\"mt-1 sm:hidden\">\n            {price !== undefined && <p className=\"text-sm font-semibold\">{formatCurrency(price)}</p>}\n            {freeShipping && (\n              <p className=\"text-xs text-green-600\">Free shipping</p>\n            )}\n          </div>\n        </div>\n        {/* Desktop: price on the right */}\n        <div className=\"hidden sm:block text-right\">\n          {price !== undefined && <p className=\"font-semibold\">{formatCurrency(price)}</p>}\n          {freeShipping && (\n            <p className=\"text-sm text-green-600\">Free shipping</p>\n          )}\n        </div>\n      </div>\n\n      <div className=\"border-t\" />\n\n      {/* Delivery info & button */}\n      <div className=\"p-3 space-y-3 sm:py-2 sm:pr-2 sm:pl-4 sm:space-y-0 sm:flex sm:items-center sm:justify-between\">\n        {/* Mobile: stacked, Desktop: inline */}\n        <div className=\"space-y-1.5 sm:space-y-0 sm:flex sm:flex-wrap sm:items-center sm:gap-2 text-xs sm:text-sm text-muted-foreground\">\n          {deliveryDate && (\n            <div className=\"flex items-center gap-1.5\">\n              <Calendar className=\"h-3 w-3 sm:h-3.5 sm:w-3.5 flex-shrink-0\" />\n              <span>{deliveryDate}</span>\n            </div>\n          )}\n          {deliveryDate && deliveryAddress && <span className=\"hidden sm:inline\">•</span>}\n          {deliveryAddress && (\n            <div className=\"flex items-center gap-1.5\">\n              <MapPin className=\"h-3 w-3 sm:h-3.5 sm:w-3.5 flex-shrink-0\" />\n              <span className=\"truncate\">{deliveryAddress}</span>\n            </div>\n          )}\n        </div>\n\n        <Button\n          size=\"sm\"\n          className=\"w-full sm:w-auto\"\n          onClick={onConfirm}\n          disabled={isLoading}\n        >\n          {isLoading ? 'Confirming...' : 'Confirm order'}\n          <ArrowRight className=\"ml-1.5 h-3.5 w-3.5 sm:h-4 sm:w-4\" />\n        </Button>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/ui/order-confirm.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"
}