diff --git a/packages/react/components/Time/index.mjs b/packages/react/components/Time/index.mjs
index 51d23f8c5b9..daa416ee960 100644
--- a/packages/react/components/Time/index.mjs
+++ b/packages/react/components/Time/index.mjs
@@ -6,12 +6,20 @@ const hour = 3600000
const minute = 60000
const second = 1000
+/**
+ * A component to render date + time
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.iso - Time in ISO format
+ * @returns {JSX.Element}
+ */
export const DateAndTime = ({ iso }) => {
const dt = DateTime.fromISO(iso)
return dt.toLocaleString(DateTime.DATETIME_MED)
}
-export const TimeForHumans = ({ iso, future = false }) => {
+const TimeForHumans = ({ iso, future = false }) => {
const suffix = future ? 'from now' : 'ago'
const dates = [DateTime.fromISO(iso), DateTime.now()]
if (future) dates.reverse()
@@ -36,11 +44,36 @@ export const TimeForHumans = ({ iso, future = false }) => {
return `${years} years ${suffix}`
}
-export const TimeAgo = (props) =>
-export const TimeToGo = (props) =>
+/**
+ * A component to render the time delta between now and a moment in the past.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.iso - Time in ISO format
+ * @returns {JSX.Element}
+ */
+export const TimeAgo = (props) =>
+/**
+ * A component to render the time delta between now and a moment in the future.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.iso - Time in ISO format
+ * @returns {JSX.Element}
+ */
+export const TimeToGo = (props) =>
+
+/**
+ * A component to render the time delta between now and a moment in the past.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.time - Timestamp in milliseconds
+ * @returns {JSX.Element}
+ */
export const TimeAgoBrief = ({ time }) => {
- const d = Math.floor(Date.now() - time)
+ const d = Math.floor(Date.now() - Number(time))
if (d > day) return `${Math.floor(d / day)}d ago`
if (d > hour) return `${Math.floor(d / hour)}h ago`
if (d > minute * 2) return `${Math.floor(d / minute)}m ago`
@@ -48,8 +81,16 @@ export const TimeAgoBrief = ({ time }) => {
return `${d}ms ago`
}
+/**
+ * A component to render the time delta between now and a moment in the future.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.time - Timestamp in milliseconds
+ * @returns {JSX.Element}
+ */
export const TimeToGoBrief = ({ time }) => {
- const d = Math.floor(time * 1000 - Date.now())
+ const d = Math.floor(Number(time) - Date.now())
if (d > day) return `${Math.floor(d / day)}d`
if (d > hour) return `${Math.floor(d / hour)}h`
if (d > minute * 2) return `${Math.floor(d / minute)}m`
diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh
index b5f149ca67e..b059f7d3207 100755
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@@ -38,3 +38,4 @@ jsdoc -c jsdoc.json components/Spinner/* > ../../sites/dev/prebuild/jsdoc/react/
jsdoc -c jsdoc.json components/Stats/* > ../../sites/dev/prebuild/jsdoc/react/components/stats.json
jsdoc -c jsdoc.json components/Tab/* > ../../sites/dev/prebuild/jsdoc/react/components/tab.json
jsdoc -c jsdoc.json components/Table/* > ../../sites/dev/prebuild/jsdoc/react/components/table.json
+jsdoc -c jsdoc.json components/Time/* > ../../sites/dev/prebuild/jsdoc/react/components/time.json
diff --git a/sites/dev/docs/reference/packages/react/components/time/_examples.js b/sites/dev/docs/reference/packages/react/components/time/_examples.js
new file mode 100644
index 00000000000..7d765b7f445
--- /dev/null
+++ b/sites/dev/docs/reference/packages/react/components/time/_examples.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import { DateAndTime, TimeAgo, TimeToGo, TimeAgoBrief, TimeToGoBrief } from '@freesewing/react/components/Time'
+
+export const DateAndTimeExample = () =>
+export const TimeAgoExample = () =>
+export const TimeToGoExample = () =>
+export const TimeAgoBriefExample = () =>
+export const TimeToGoBriefExample = () =>
+
diff --git a/sites/dev/docs/reference/packages/react/components/time/readme.mdx b/sites/dev/docs/reference/packages/react/components/time/readme.mdx
index d8c7f67bd64..2e5b736bfe4 100644
--- a/sites/dev/docs/reference/packages/react/components/time/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/time/readme.mdx
@@ -2,6 +2,43 @@
title: Time
---
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.time.mjs'
+import { TimeToGoExample, TimeAgoExample, TimeToGoBriefExample, TimeAgoBriefExample, DateAndTimeExample } from './_examples.js'
+
+
+
+- [Components](#components)
+
+## Components
+
+The **Table** component family provides the following components:
+
+- [DateAndTime](#dateandtime)
+- [TimeAgo](#timeago)
+- [TimeAgoBrief](#timeagobrief)
+- [TimeToGo](#timetogo)
+- [TimeToGoBrief](#timetogobrief)
+
+### DateAndTime
+
+
+
+### TimeAgo
+
+
+
+### TimeAgoBrief
+
+
+
+### TimeToGo
+
+
+
+### TimeToGoBrief
+
+
+
+