docs: adds range example

docs/components/content/Data.vue

@@ -131,6 +131,7 @@ const fns: Record<
       },
     ],
     return: "string[]",
+    example: "range",
   },
   sameDay: {
     description:

docs/components/content/Introduction.vue

@@ -8,12 +8,13 @@ import { defineProps } from "vue"
     <p>
       Tempo is a new library in a proud tradition of JavaScript date and time
       libraries. Inspired by the likes of moment.js, day.js, and date-fns Tempo
-      is built from the ground up to be as small and easy to use as possible.
+      is built from the ground up to be as small and easy to use as possible —
+      including first-class support for timezone operations.
     </p>
     <p>
-      Tempo is best thought of as a collection of utilities for working with
-      <code>Date</code> objects — an important distinction from other libraries
-      that provide custom date primitives. Under the hood, Tempo mines
+      Tempo is best thought of as a collection of utilities for working with the
+      native <code>Date</code> object — an important distinction from other
+      libraries that provide custom date primitives. Under the hood, Tempo mines
       JavaScript's <code>Intl.DateTimeFormat</code> to extract complex data like
       timezones offsets and locale aware date formats giving you a simple API to
       format, parse, and manipulate dates.

docs/components/content/Modify.vue

@@ -149,7 +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.',
+    tip: 'To produce a date in a given timezone either include the offset in the date string (ex: "2021-01-01T00:00:00-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).`,
@@ -274,7 +274,9 @@ 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" />
+      <CalloutInfo v-if="def.tip">
+        <span v-html="def.tip" />
+      </CalloutInfo>
     </div>
   </PageSection>
 </template>

docs/examples/range.ts

@@ -0,0 +1,7 @@
+import { range } from "@formkit/tempo"
+
+range("dddd", "en")
+
+range("MMMM", "zh")
+
+range("MMMM", "ar")