docs: adds examples for ap and date

docs/components/content/Data.vue

@@ -1,5 +1,15 @@
 <script lang="ts" setup>
-const fns = {
+import type { FunctionRef } from "../../src/types"
+const fns: Record<
+  string,
+  {
+    description: string
+    return: string
+    arguments: FunctionRef["arguments"]
+    example?: string
+    tip?: string
+  }
+> = {
   ap: {
     description: "Returns either am or pm but in any given locale.",
     return: "Date",
@@ -13,6 +23,7 @@ const fns = {
         type: "string",
       },
     ],
+    example: "ap",
   },
   dayOfYear: {
     description: `Gets the what day of the year a given date is. For example, August 1st is the 213th day of the year on non-leapyears and 214th on leapyears.`,
@@ -160,12 +171,14 @@ const fns = {
     </p>
     <div v-for="(def, fn) in fns">
       <h4>{{ fn }}</h4>
-      <p v-html="def.description" />
       <FunctionReference
         :function="fn"
         :arguments="def.arguments"
         :return="def.return"
       />
+      <p v-html="def.description" />
+      <CodeExample v-if="def.example" :file="def.example" />
+      <CalloutInfo v-if="def.tip" v-html="def.tip" />
     </div>
   </PageSection>
 </template>

docs/components/content/Modify.vue

@@ -7,6 +7,7 @@ const fns: Record<
     return: string
     arguments: FunctionRef["arguments"]
     example?: string
+    tip?: string
   }
 > = {
   addDay: {
@@ -148,6 +149,7 @@ const fns: Record<
       },
     ],
     example: "date",
+    tip: 'To produce a date in a given timezone either include the offset in the date string (ex: "2021-01-01T00:00:00.000-0800") or use the <code>tzDate</code> function.',
   },
   dayStart: {
     description: `Returns a new Date object with the time set to 00:00:00.000 (local time).`,
@@ -206,7 +208,7 @@ const fns: Record<
     ],
   },
   tzDate: {
-    description: `Converts an ISO 8601 like string into a Date object with a timezone applied. For example, <code>tzDate('2021-01-01T00:00:00.000', 'America/Los_Angeles')</code> will return a Date object representing 2021-01-01 00:00:00 in L.A. which equates to <code>2021-01-01T00:00:00.000</code>.`,
+    description: `Converts an ISO 8601 like string into a Date object with a timezone applied. For example, <code>tzDate('2021-01-01T00:00', 'America/Los_Angeles')</code> will return a Date object representing 2021-01-01 00:00 in L.A.`,
     return: "Date",
     arguments: [
       {
@@ -272,6 +274,7 @@ const fns: Record<
       />
       <p v-html="def.description" />
       <CodeExample v-if="def.example" :file="def.example" />
+      <CalloutInfo v-if="def.tip" v-html="def.tip" />
     </div>
   </PageSection>
 </template>

docs/components/content/Parse.vue

@@ -46,11 +46,12 @@ const parseOptionsProperties = [
       :arguments="[
         {
           name: 'date',
-          type: 'string | ParseOptions',
+          type: 'string',
         },
         { name: 'format', type: 'string | { date?: string, time?: string }' },
         { name: 'locale?', type: 'string' },
       ]"
+      :overload="[{ name: 'options', type: 'ParseOptions' }]"
       return="Date"
     />
     <p>

docs/examples/ap.ts

@@ -0,0 +1,3 @@
+import { ap } from "@formkit/tempo"
+
+ap("am", "ja")

docs/examples/date.ts

@@ -2,3 +2,9 @@ import { date } from "@formkit/tempo"
 
 // Partial ISO 8601 strings are acceptable
 date("2013-11")
+
+// Date at UTC
+date("2013-11-18T12:00:00Z")
+
+// Date with an offset (see tzDate() for timezones)
+date("2013-11-18T12:00:00-0500")