{
  "name": "address-03-block",
  "type": "registry:block",
  "dependencies": [
    "@hookform/resolvers",
    "lucide-react",
    "react-hook-form",
    "zod"
  ],
  "registryDependencies": [
    "input",
    "form",
    "button",
    "checkbox",
    "https://ui.stackzero.co/r/phone-number-input-basic.json",
    "https://ui.stackzero.co/r/input-icon.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport InputIcon from \"@/components/commerce-ui/input-icon\";\nimport PhoneInput from \"@/components/commerce-ui/phone-number-input-basic\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { Building, Building2, Globe, House, Mail, User } from \"lucide-react\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\n\nexport const addressFormSchema = z.object({\n  address1: z.string().min(1, \"Address is required\"),\n  address2: z.string().optional(),\n  city: z.string().min(1, \"City is required\"),\n  country: z.string().min(1, \"Country is required\"),\n  email: z.string().email(\"Invalid email\").optional(),\n  fullName: z.string().min(5, \"Full name is required\"),\n  phone: z.string().optional(),\n  postalCode: z.string().min(1, \"Postal code is required\"),\n  state: z.string().min(1, \"State is required\"),\n});\n\nexport type AddressFormValues = z.infer<typeof addressFormSchema>;\n\nexport type AddressFormProps = {\n  value?: AddressFormValues;\n  onSubmit?: (value: AddressFormValues) => void;\n  submitLabel?: string;\n  disabled?: boolean;\n  className?: string;\n};\n\nfunction Address_03({\n  className = \"\",\n  disabled = false,\n  onSubmit,\n  submitLabel = \"Save Address\",\n  value,\n}: AddressFormProps) {\n  const form = useForm<AddressFormValues>({\n    defaultValues: value || {\n      address1: \"\",\n      address2: \"\",\n      city: \"\",\n      country: \"\",\n      email: \"\",\n      fullName: \"\",\n      phone: \"\",\n      postalCode: \"\",\n      state: \"\",\n    },\n    mode: \"onChange\",\n    resolver: zodResolver(addressFormSchema),\n  });\n\n  return (\n    <div className=\"mx-auto max-w-xl rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900\">\n      <h1 className=\"mb-6 text-2xl font-bold text-gray-900 dark:text-gray-100\">\n        Shipping Address\n      </h1>\n      <Form {...form}>\n        <form\n          className={className}\n          onSubmit={form.handleSubmit(onSubmit ?? (() => {}))}\n        >\n          <div className=\"grid gap-6\">\n            {/* Full Name */}\n            <div>\n              <FormField\n                control={form.control}\n                name=\"fullName\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Full Name</FormLabel>\n                    <FormControl>\n                      <>\n                        <InputIcon\n                          {...field}\n                          disabled={disabled}\n                          autoComplete=\"full-name\"\n                          required\n                          startIcon={User}\n                          placeholder=\"John Doe\"\n                        />\n                      </>\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </div>\n\n            <hr className=\"my-2 border-gray-100 dark:border-gray-800\" />\n\n            {/* Address 1 & 2 */}\n            <div className=\"grid gap-4 md:grid-cols-2\">\n              <FormField\n                control={form.control}\n                name=\"address1\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Address</FormLabel>\n                    <FormControl>\n                      <InputIcon\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"address-line1\"\n                        required\n                        startIcon={House}\n                        placeholder=\"123 Main St\"\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              <FormField\n                control={form.control}\n                name=\"address2\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Apartment, suite, etc. (optional)</FormLabel>\n                    <FormControl>\n                      <InputIcon\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"address-line2\"\n                        placeholder=\"Apt, suite, etc.\"\n                        startIcon={Building}\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </div>\n\n            <hr className=\"my-2 border-gray-100 dark:border-gray-800\" />\n\n            {/* City, State, Postal Code */}\n            <div className=\"grid gap-4 md:grid-cols-3\">\n              <FormField\n                control={form.control}\n                name=\"city\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>City</FormLabel>\n                    <FormControl>\n                      <InputIcon\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"address-level2\"\n                        required\n                        startIcon={Building2}\n                        placeholder=\"New York\"\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              <FormField\n                control={form.control}\n                name=\"state\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>State</FormLabel>\n                    <FormControl>\n                      <InputIcon\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"address-level1\"\n                        required\n                        startIcon={Building2}\n                        placeholder=\"NY\"\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              <FormField\n                control={form.control}\n                name=\"postalCode\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Postal Code</FormLabel>\n                    <FormControl>\n                      <InputIcon\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"postal-code\"\n                        required\n                        startIcon={Mail}\n                        placeholder=\"10001\"\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </div>\n\n            <hr className=\"my-2 border-gray-100 dark:border-gray-800\" />\n\n            {/* Country, Phone, Email */}\n            <div className=\"grid gap-4 md:grid-cols-3\">\n              <FormField\n                control={form.control}\n                name=\"country\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Country</FormLabel>\n                    <FormControl>\n                      <InputIcon\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"country\"\n                        required\n                        startIcon={Globe}\n                        placeholder=\"United States\"\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              <FormField\n                control={form.control}\n                name=\"phone\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Phone (optional)</FormLabel>\n                    <FormControl>\n                      <PhoneInput\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"tel\"\n                        type=\"tel\"\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n              <FormField\n                control={form.control}\n                name=\"email\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Email (optional)</FormLabel>\n                    <FormControl>\n                      <InputIcon\n                        {...field}\n                        disabled={disabled}\n                        autoComplete=\"email\"\n                        type=\"email\"\n                        startIcon={Mail}\n                        placeholder=\"you@example.com\"\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n            </div>\n\n            <div className=\"pt-2\">\n              <Button type=\"submit\" disabled={disabled} className=\"w-full\">\n                {submitLabel}\n              </Button>\n            </div>\n          </div>\n        </form>\n      </Form>\n    </div>\n  );\n}\n\nexport default Address_03;\n",
      "path": "/components/commerce-ui/blocks/address/address-03.tsx",
      "target": "components/commerce-ui/address-03.tsx"
    }
  ]
}