{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-forms-02",
  "type": "registry:component",
  "title": "Checkout Forms",
  "author": "Toby Belhome",
  "description": "Streamline the purchasing process with Tailwind CSS checkout form sections. These layouts feature organized fields, clear labels, and responsive design to ensure smooth and user-friendly transactions. Perfect for online stores and marketplaces aiming for modern, secure, and conversion-optimized checkout experiences.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card",
    "card",
    "button",
    "card",
    "card",
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/checkout-forms/02/components/delivery-card.tsx",
      "content": "import { Card, CardContent } from \"@/components/ui/card\";\nimport { MapPin, Truck } from \"lucide-react\";\n\ninterface DeliveryCardProps {\n  address: {\n    name: string;\n    street: string;\n    apt: string;\n    city: string;\n    country: string;\n  };\n  delivery: {\n    type: string;\n    date: string;\n    time: string;\n  };\n}\n\nconst DeliveryCard = ({ address, delivery }: DeliveryCardProps) => {\n  return (\n    <div className=\"grid gap-4 md:grid-cols-2\">\n      <Card className=\"shadow-none\">\n        <CardContent className=\"flex gap-4\">\n          <div className=\"bg-muted flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg\">\n            <MapPin className=\"text-muted-foreground h-6 w-6\" />\n          </div>\n          <div className=\"flex-1\">\n            <h3 className=\"text-foreground mb-3 font-semibold\">{address.name}</h3>\n            <div className=\"text-foreground space-y-1 text-sm\">\n              <p>{address.street}</p>\n              <p>{address.apt}</p>\n              <p>{address.city}</p>\n              <p>{address.country}</p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card className=\"shadow-none\">\n        <CardContent className=\"flex gap-4\">\n          <div className=\"bg-muted flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg\">\n            <Truck className=\"text-muted-foreground h-6 w-6\" />\n          </div>\n          <div className=\"flex-1\">\n            <h3 className=\"text-foreground mb-3 font-semibold\">{delivery.type}</h3>\n            <div className=\"text-foreground space-y-1 text-sm\">\n              <p>{delivery.date}</p>\n              <p>{delivery.time}</p>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n\nexport default DeliveryCard;\n",
      "type": "registry:component",
      "target": "components/checkout-forms/components/delivery-card.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/checkout-forms/02/components/order-item.tsx",
      "content": "import { Card } from \"@/components/ui/card\";\n\ninterface OrderItemProps {\n  image: string;\n  name: string;\n  quantity: number;\n  price: string;\n}\n\nconst OrderItem = ({ image, name, quantity, price }: OrderItemProps) => {\n  return (\n    <div className=\"bg-muted/50 mb-3 flex flex-row items-center justify-between gap-4 rounded-lg border-none pe-4 shadow-none\">\n      <img src={image} alt={name} className=\"aspect-square w-20 rounded-md object-cover\" />\n      <div className=\"min-w-0 flex-1\">\n        <h3 className=\"font-medium\">{name}</h3>\n      </div>\n      <div className=\"flex flex-shrink-0 items-center gap-6\">\n        <span className=\"text-muted-foreground\">{quantity} pc</span>\n        <span className=\"font-medium\">{price}</span>\n      </div>\n    </div>\n  );\n};\n\nexport default OrderItem;\n",
      "type": "registry:component",
      "target": "components/checkout-forms/components/order-item.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/checkout-forms/02/components/order-summary.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\n\ninterface OrderSummaryProps {\n  subtotal: string;\n  discount: string;\n  delivery: string;\n  total: string;\n}\n\nconst OrderSummary = ({ subtotal, discount, delivery, total }: OrderSummaryProps) => {\n  return (\n    <Card className=\"shadow-none\">\n      <CardContent className=\"space-y-6\">\n        <div className=\"space-y-4\">\n          <div className=\"font-heading flex items-center justify-between text-2xl\">\n            <div>Total</div>\n            <div>{total}</div>\n          </div>\n\n          <div className=\"border-border space-y-3 border-t pt-4 text-sm\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"\">Subtotal</span>\n              <span className=\"font-medium\">{subtotal}</span>\n            </div>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"\">Discount</span>\n              <span className=\"text-destructive font-medium\">-{discount}</span>\n            </div>\n            <div className=\"flex items-center justify-between\">\n              <span className=\"\">Delivery</span>\n              <span className=\"font-medium\">{delivery}</span>\n            </div>\n          </div>\n        </div>\n\n        <Button size=\"lg\" className=\"w-full\">\n          Pay {total}\n        </Button>\n\n        <p className=\"text-muted-foreground text-xs leading-relaxed\">\n          By placing an order, you're agreeing to our{\" \"}\n          <a href=\"#\" className=\"underline\">\n            Privacy Policy\n          </a>\n          ,{\" \"}\n          <a href=\"#\" className=\"underline\">\n            Terms and Conditions\n          </a>{\" \"}\n          and{\" \"}\n          <a href=\"#\" className=\"underline\">\n            Cancellation policy\n          </a>\n          .\n        </p>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default OrderSummary;\n",
      "type": "registry:component",
      "target": "components/checkout-forms/components/order-summary.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/checkout-forms/02/components/payment-method-card.tsx",
      "content": "import { Card, CardContent } from \"@/components/ui/card\";\n\ninterface PaymentMethodCardProps {\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n}\n\nconst PaymentMethodCard = ({ icon, title, description }: PaymentMethodCardProps) => {\n  return (\n    <Card className=\"shadow-none\">\n      <CardContent className=\"flex gap-4\">\n        <div className=\"flex-shrink-0\">{icon}</div>\n        <div className=\"flex-1\">\n          <h3 className=\"mb-1 font-semibold\">{title}</h3>\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default PaymentMethodCard;\n",
      "type": "registry:component",
      "target": "components/checkout-forms/components/payment-method-card.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/checkout-forms/02/components/payment-stepper.tsx",
      "content": "import { Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Step {\n  number: number;\n  label: string;\n  completed: boolean;\n  active: boolean;\n}\n\ninterface PaymentStepperProps {\n  currentStep: number;\n}\n\nconst PaymentStepper = ({ currentStep }: PaymentStepperProps) => {\n  const steps: Step[] = [\n    { number: 1, label: \"Cart\", completed: currentStep > 1, active: currentStep === 1 },\n    {\n      number: 2,\n      label: \"Delivery and payment\",\n      completed: currentStep > 2,\n      active: currentStep === 2\n    },\n    { number: 3, label: \"Summary\", completed: currentStep > 3, active: currentStep === 3 },\n    { number: 4, label: \"Done\", completed: false, active: currentStep === 4 }\n  ];\n\n  return (\n    <div className=\"w-full py-8\">\n      <div className=\"mx-auto flex max-w-5xl items-center justify-between px-4\">\n        {steps.map((step, index) => (\n          <div key={step.number} className=\"flex flex-1 items-center\">\n            <div className=\"flex flex-1 flex-col items-center\">\n              <div className=\"flex w-full items-center\">\n                <div\n                  className={cn(\n                    \"flex h-10 w-10 items-center justify-center rounded-full border-2 font-medium transition-colors\",\n                    step.active && \"bg-accent border-accent text-accent-foreground\",\n                    step.completed && \"bg-accent border-accent text-accent-foreground\",\n                    !step.active &&\n                      !step.completed &&\n                      \"bg-muted border-border text-muted-foreground\"\n                  )}>\n                  {step.completed ? <Check className=\"h-5 w-5\" /> : step.number}\n                </div>\n                {index < steps.length - 1 && (\n                  <div\n                    className={cn(\n                      \"mx-2 h-0.5 flex-1 transition-colors\",\n                      step.completed ? \"bg-accent\" : \"bg-border\"\n                    )}\n                  />\n                )}\n              </div>\n              <span\n                className={cn(\n                  \"mt-2 text-center text-sm font-medium whitespace-nowrap\",\n                  step.active ? \"text-foreground\" : \"text-muted-foreground\"\n                )}>\n                {step.label}\n              </span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default PaymentStepper;\n",
      "type": "registry:component",
      "target": "components/checkout-forms/components/payment-stepper.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/checkout-forms/02/data.ts",
      "content": "export const orderItems = [\n  {\n    image: \"/images/products/list3.png\",\n    name: \"Ilia C Beyond Triple Serum SPF 40\",\n    quantity: 1,\n    price: \"$23.99\"\n  },\n  {\n    image: \"/images/products/list1.png\",\n    name: \"Our Place Always Pan\",\n    quantity: 1,\n    price: \"$129.99\"\n  }\n];\n\nexport const deliveryAddress = {\n  name: \"Emily Anderson\",\n  street: \"123 Main Street\",\n  apt: \"Apt 4B\",\n  city: \"Cityville, State 56789\",\n  country: \"United States\"\n};\n\nexport const deliveryInfo = {\n  type: \"Courier delivery\",\n  date: \"September 17, 2023\",\n  time: \"12:00 - 14:00\"\n};\n",
      "type": "registry:component",
      "target": "components/checkout-forms/data.ts"
    },
    {
      "path": "examples/blocks/ecommerce/checkout-forms/02/page.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\n\nimport OrderItem from \"./components/order-item\";\nimport DeliveryCard from \"./components/delivery-card\";\nimport PaymentMethodCard from \"./components/payment-method-card\";\nimport OrderSummary from \"./components/order-summary\";\nimport { orderItems, deliveryAddress, deliveryInfo } from \"./data\";\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n  StepperNav,\n  StepperSeparator,\n  StepperTrigger\n} from \"@/components/ui/stepper\";\nimport { Check, LoaderCircleIcon } from \"lucide-react\";\n\nconst steps = [1, 2, 3, 4];\n\nexport default function CheckoutPage() {\n  const ApplePayIcon = () => (\n    <div className=\"bg-muted flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"currentColor\"\n        className=\"bi bi-apple size-6\"\n        viewBox=\"0 0 16 16\">\n        <path d=\"M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282\" />\n        <path d=\"M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282\" />\n      </svg>\n    </div>\n  );\n\n  return (\n    <section className=\"py-10 lg:py-20\">\n      <div className=\"px-4 lg:px-6\">\n        <div className=\"mx-auto max-w-3xl\">\n          <Stepper\n            defaultValue={2}\n            indicators={{\n              completed: <Check className=\"size-4\" />,\n              loading: <LoaderCircleIcon className=\"size-4 animate-spin\" />\n            }}\n            className=\"mb-14 space-y-8\">\n            <StepperNav>\n              {steps.map((step) => (\n                <StepperItem key={step} step={step}>\n                  <StepperTrigger>\n                    <StepperIndicator className=\"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:bg-green-500 data-[state=completed]:text-white data-[state=inactive]:text-gray-500\">\n                      {step}\n                    </StepperIndicator>\n                  </StepperTrigger>\n                  {steps.length > step && (\n                    <StepperSeparator className=\"group-data-[state=completed]/step:bg-primary\" />\n                  )}\n                </StepperItem>\n              ))}\n            </StepperNav>\n          </Stepper>\n        </div>\n        <div className=\"grid gap-8 lg:grid-cols-[1fr_400px]\">\n          {/* Left Column */}\n          <div className=\"space-y-12\">\n            {/* Order Details */}\n            <section>\n              <div className=\"mb-4 flex items-center justify-between\">\n                <h2 className=\"font-heading text-xl\">Order details</h2>\n              </div>\n              <div>\n                {orderItems.map((item, index) => (\n                  <OrderItem key={index} {...item} />\n                ))}\n              </div>\n            </section>\n\n            {/* Delivery */}\n            <section>\n              <div className=\"mb-4 flex items-center justify-between\">\n                <h2 className=\"font-heading text-xl\">Delivery</h2>\n                <Button variant=\"secondary\" size=\"sm\">\n                  Edit\n                </Button>\n              </div>\n              <DeliveryCard address={deliveryAddress} delivery={deliveryInfo} />\n            </section>\n\n            {/* Payment Method */}\n            <section>\n              <div className=\"mb-4 flex items-center justify-between\">\n                <h2 className=\"font-heading text-xl\">Payment method</h2>\n                <Button variant=\"secondary\" size=\"sm\">\n                  Edit\n                </Button>\n              </div>\n              <PaymentMethodCard\n                icon={<ApplePayIcon />}\n                title=\"Apple Pay\"\n                description=\"Swiftly make contactless payments with Apple Pay, ensuring a seamless and secure checkout experience.\"\n              />\n            </section>\n          </div>\n\n          {/* Right Column - Summary */}\n          <div>\n            <OrderSummary subtotal=\"$153.98\" discount=\"$10.00\" delivery=\"Free\" total=\"$143.98\" />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/checkout-forms/checkout-forms.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}