{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-form",
  "title": "Checkout Form",
  "description": "A payment-agnostic checkout: contact and shipping fields with validation, a payment slot, an order summary, and submit states. Wire your own PSP.",
  "dependencies": [
    "react-hook-form",
    "zod",
    "@hookform/resolvers"
  ],
  "registryDependencies": [
    "https://lumo-www.vercel.app/r/lib.json",
    "https://lumo-www.vercel.app/r/order-summary.json"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/checkout-form.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { useForm } from \"react-hook-form\"\r\nimport { zodResolver } from \"@hookform/resolvers/zod\"\r\nimport { z } from \"zod\"\r\nimport type { CartLine, Money } from \"@/lib/lumo/types\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { OrderSummary } from \"@/components/lumo/order-summary\"\r\n\r\nconst checkoutSchema = z.object({\r\n  email: z.string().min(1, \"Required\").email(\"Enter a valid email\"),\r\n  firstName: z.string().min(1, \"Required\"),\r\n  lastName: z.string().min(1, \"Required\"),\r\n  line1: z.string().min(1, \"Required\"),\r\n  line2: z.string().optional(),\r\n  city: z.string().min(1, \"Required\"),\r\n  region: z.string().optional(),\r\n  postalCode: z.string().min(1, \"Required\"),\r\n  country: z.string().min(2, \"Use a 2-letter country code\"),\r\n  phone: z.string().optional(),\r\n})\r\n\r\nexport type CheckoutValues = z.infer<typeof checkoutSchema>\r\n\r\nconst inputClass =\r\n  \"h-10 w-full rounded-md border border-input bg-background px-3 text-sm transition-colors placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\r\n\r\nfunction Field({\r\n  label,\r\n  error,\r\n  children,\r\n  className,\r\n}: {\r\n  label: string\r\n  error?: string\r\n  children: React.ReactElement\r\n  className?: string\r\n}) {\r\n  const id = React.useId()\r\n  return (\r\n    <div className={cn(\"flex flex-col gap-1.5\", className)}>\r\n      <label htmlFor={id} className=\"text-sm font-medium\">\r\n        {label}\r\n      </label>\r\n      {React.cloneElement(children, { id, \"aria-invalid\": error ? true : undefined } as Record<string, unknown>)}\r\n      {error && <span className=\"text-xs text-destructive\">{error}</span>}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport interface CheckoutFormProps {\r\n  lines: CartLine[]\r\n  subtotal: Money\r\n  shipping?: Money\r\n  tax?: Money\r\n  total?: Money\r\n  locale?: string\r\n  /** Slot for your payment provider UI, e.g. Stripe Elements. */\r\n  paymentSlot?: React.ReactNode\r\n  onSubmit?: (values: CheckoutValues) => void | Promise<void>\r\n  submitLabel?: string\r\n  className?: string\r\n}\r\n\r\nexport function CheckoutForm({\r\n  lines,\r\n  subtotal,\r\n  shipping,\r\n  tax,\r\n  total,\r\n  locale,\r\n  paymentSlot,\r\n  onSubmit,\r\n  submitLabel = \"Place order\",\r\n  className,\r\n}: CheckoutFormProps) {\r\n  const [error, setError] = React.useState<string | null>(null)\r\n  const {\r\n    register,\r\n    handleSubmit,\r\n    formState: { errors, isSubmitting },\r\n  } = useForm<CheckoutValues>({ resolver: zodResolver(checkoutSchema) })\r\n\r\n  const submit = async (values: CheckoutValues) => {\r\n    setError(null)\r\n    try {\r\n      await onSubmit?.(values)\r\n    } catch (e) {\r\n      setError(e instanceof Error ? e.message : \"Something went wrong. Please try again.\")\r\n    }\r\n  }\r\n\r\n  return (\r\n    <form onSubmit={handleSubmit(submit)} noValidate className={cn(\"grid gap-8 lg:grid-cols-[1fr_360px]\", className)}>\r\n      <div className=\"flex flex-col gap-8\">\r\n        <section className=\"flex flex-col gap-4\">\r\n          <h3 className=\"font-display text-lg font-semibold tracking-tight\">Contact</h3>\r\n          <Field label=\"Email\" error={errors.email?.message}>\r\n            <input type=\"email\" autoComplete=\"email\" placeholder=\"you@example.com\" className={inputClass} {...register(\"email\")} />\r\n          </Field>\r\n        </section>\r\n\r\n        <section className=\"flex flex-col gap-4\">\r\n          <h3 className=\"font-display text-lg font-semibold tracking-tight\">Shipping address</h3>\r\n          <div className=\"grid grid-cols-2 gap-4\">\r\n            <Field label=\"First name\" error={errors.firstName?.message}>\r\n              <input className={inputClass} autoComplete=\"given-name\" {...register(\"firstName\")} />\r\n            </Field>\r\n            <Field label=\"Last name\" error={errors.lastName?.message}>\r\n              <input className={inputClass} autoComplete=\"family-name\" {...register(\"lastName\")} />\r\n            </Field>\r\n          </div>\r\n          <Field label=\"Address\" error={errors.line1?.message}>\r\n            <input className={inputClass} autoComplete=\"address-line1\" placeholder=\"Street and number\" {...register(\"line1\")} />\r\n          </Field>\r\n          <Field label=\"Apartment, suite (optional)\">\r\n            <input className={inputClass} autoComplete=\"address-line2\" {...register(\"line2\")} />\r\n          </Field>\r\n          <div className=\"grid grid-cols-2 gap-4\">\r\n            <Field label=\"City\" error={errors.city?.message}>\r\n              <input className={inputClass} autoComplete=\"address-level2\" {...register(\"city\")} />\r\n            </Field>\r\n            <Field label=\"State / Province\">\r\n              <input className={inputClass} autoComplete=\"address-level1\" {...register(\"region\")} />\r\n            </Field>\r\n          </div>\r\n          <div className=\"grid grid-cols-2 gap-4\">\r\n            <Field label=\"Postal code\" error={errors.postalCode?.message}>\r\n              <input className={inputClass} autoComplete=\"postal-code\" {...register(\"postalCode\")} />\r\n            </Field>\r\n            <Field label=\"Country\" error={errors.country?.message}>\r\n              <input className={inputClass} autoComplete=\"country\" placeholder=\"US\" {...register(\"country\")} />\r\n            </Field>\r\n          </div>\r\n        </section>\r\n\r\n        {paymentSlot && (\r\n          <section className=\"flex flex-col gap-4\">\r\n            <h3 className=\"font-display text-lg font-semibold tracking-tight\">Payment</h3>\r\n            {paymentSlot}\r\n          </section>\r\n        )}\r\n\r\n        {error && (\r\n          <p role=\"alert\" className=\"rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive\">\r\n            {error}\r\n          </p>\r\n        )}\r\n      </div>\r\n\r\n      <aside className=\"flex flex-col gap-4 lg:sticky lg:top-28 lg:self-start\">\r\n        <OrderSummary lines={lines} subtotal={subtotal} shipping={shipping} tax={tax} total={total} locale={locale} />\r\n        <button\r\n          type=\"submit\"\r\n          disabled={isSubmitting}\r\n          className=\"inline-flex h-12 w-full items-center justify-center rounded-full bg-primary px-6 text-sm font-semibold text-primary-foreground transition-[background-color,transform] hover:bg-primary/90 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\r\n        >\r\n          {isSubmitting ? \"Placing order...\" : submitLabel}\r\n        </button>\r\n        <p className=\"text-center text-xs text-muted-foreground\">\r\n          Taxes and shipping are calculated by your backend.\r\n        </p>\r\n      </aside>\r\n    </form>\r\n  )\r\n}\r\n",
      "type": "registry:ui",
      "target": "components/lumo/checkout-form.tsx"
    }
  ],
  "type": "registry:ui"
}