{
  "name": "address-01-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 React from \"react\";\nimport { z } from \"zod\";\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  Form,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport PhoneInput from \"@/components/commerce-ui/phone-number-input-basic\";\nimport InputIcon from \"@/components/commerce-ui/input-icon\";\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  firstName: z.string().min(5, \"First name is required\"),\n  isBillingAddress: z.boolean(),\n  lastName: z.string().min(1, \"Last 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_01({\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      firstName: \"\",\n      isBillingAddress: true,\n      lastName: \"\",\n      phone: \"\",\n      postalCode: \"\",\n      state: \"\",\n    },\n    mode: \"onChange\",\n    resolver: zodResolver(addressFormSchema),\n  });\n\n  return (\n    <div>\n      <h1 className=\"mb-6 text-2xl font-bold\">Shipping Address</h1>\n      <Form {...form}>\n        <form\n          className={className}\n          onSubmit={form.handleSubmit(onSubmit ?? (() => {}))}\n        >\n          <div className=\"grid gap-4\">\n            <div className=\"flex flex-wrap gap-4\">\n              <div className=\"min-w-[180px] flex-1\">\n                <FormField\n                  control={form.control}\n                  name=\"firstName\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>First Name</FormLabel>\n                      <FormControl>\n                        <>\n                          <Input\n                            {...field}\n                            disabled={disabled}\n                            autoComplete=\"given-name\"\n                            required\n                          />\n                        </>\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n              <div className=\"min-w-[180px] flex-1\">\n                <FormField\n                  control={form.control}\n                  name=\"lastName\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Last Name</FormLabel>\n                      <FormControl>\n                        <Input\n                          {...field}\n                          disabled={disabled}\n                          autoComplete=\"family-name\"\n                          required\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n            </div>\n            <FormField\n              control={form.control}\n              name=\"address1\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Address</FormLabel>\n                  <FormControl>\n                    <Input\n                      {...field}\n                      disabled={disabled}\n                      autoComplete=\"address-line1\"\n                      required\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                    <Input\n                      {...field}\n                      disabled={disabled}\n                      autoComplete=\"address-line2\"\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n            <div className=\"flex flex-wrap gap-4\">\n              <div className=\"min-w-[120px] flex-1\">\n                <FormField\n                  control={form.control}\n                  name=\"city\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>City</FormLabel>\n                      <FormControl>\n                        <Input\n                          {...field}\n                          disabled={disabled}\n                          autoComplete=\"address-level2\"\n                          required\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n              <div className=\"min-w-[120px] flex-1\">\n                <FormField\n                  control={form.control}\n                  name=\"state\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>State</FormLabel>\n                      <FormControl>\n                        <Input\n                          {...field}\n                          disabled={disabled}\n                          autoComplete=\"address-level1\"\n                          required\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n              <div className=\"min-w-[120px] flex-1\">\n                <FormField\n                  control={form.control}\n                  name=\"postalCode\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Postal Code</FormLabel>\n                      <FormControl>\n                        <Input\n                          {...field}\n                          disabled={disabled}\n                          autoComplete=\"postal-code\"\n                          required\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n            </div>\n            <FormField\n              control={form.control}\n              name=\"country\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Country</FormLabel>\n                  <FormControl>\n                    <Input\n                      {...field}\n                      disabled={disabled}\n                      autoComplete=\"country\"\n                      required\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                    <Input\n                      {...field}\n                      disabled={disabled}\n                      autoComplete=\"email\"\n                      type=\"email\"\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <FormField\n              control={form.control}\n              name=\"isBillingAddress\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Same for Billing Address</FormLabel>\n                  <FormControl>\n                    <Checkbox\n                      name={field.name}\n                      checked={field.value ?? false}\n                      onCheckedChange={(value) => {\n                        field.onChange(value);\n                      }}\n                      onBlur={field.onBlur}\n                      ref={field.ref}\n                      disabled={disabled}\n                    />\n                  </FormControl>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <Button type=\"submit\" disabled={disabled} className=\"mt-2 w-full\">\n              {submitLabel}\n            </Button>\n          </div>\n        </form>\n      </Form>\n    </div>\n  );\n}\n\nexport default Address_01;\n",
      "path": "/components/commerce-ui/blocks/address/address-01.tsx",
      "target": "components/commerce-ui/address-01.tsx"
    }
  ]
}