{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "address-form",
  "title": "Address Form",
  "description": "A validated shipping/billing address form (react-hook-form + zod) that emits a normalized Address.",
  "dependencies": [
    "react-hook-form",
    "zod",
    "@hookform/resolvers"
  ],
  "registryDependencies": [
    "https://lumo-www.vercel.app/r/lib.json"
  ],
  "files": [
    {
      "path": "packages/core/src/components/lumo/address-form.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { useForm, type SubmitHandler } from \"react-hook-form\"\r\nimport { zodResolver } from \"@hookform/resolvers/zod\"\r\nimport { z } from \"zod\"\r\nimport type { Address } from \"@/lib/lumo/types\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst addressSchema = z.object({\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 AddressFormValues = z.infer<typeof addressSchema>\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 AddressFormProps {\r\n  defaultValues?: Partial<Address>\r\n  onSubmit?: (address: Address) => void\r\n  submitLabel?: string\r\n  className?: string\r\n}\r\n\r\nexport function AddressForm({ defaultValues, onSubmit, submitLabel = \"Continue\", className }: AddressFormProps) {\r\n  const {\r\n    register,\r\n    handleSubmit,\r\n    formState: { errors, isSubmitting },\r\n  } = useForm<AddressFormValues>({\r\n    resolver: zodResolver(addressSchema),\r\n    defaultValues: defaultValues as AddressFormValues,\r\n  })\r\n\r\n  const submit: SubmitHandler<AddressFormValues> = (values) => onSubmit?.(values as Address)\r\n\r\n  return (\r\n    <form onSubmit={handleSubmit(submit)} noValidate className={cn(\"flex flex-col gap-4\", className)}>\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      <Field label=\"Phone (optional)\">\r\n        <input className={inputClass} autoComplete=\"tel\" {...register(\"phone\")} />\r\n      </Field>\r\n      <button\r\n        type=\"submit\"\r\n        disabled={isSubmitting}\r\n        className=\"mt-2 inline-flex h-11 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-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\r\n      >\r\n        {submitLabel}\r\n      </button>\r\n    </form>\r\n  )\r\n}\r\n",
      "type": "registry:ui",
      "target": "components/lumo/address-form.tsx"
    }
  ],
  "type": "registry:ui"
}